/* Variables are now imported from calc-variables.css */

#calcinput-main {
  background-color: var(--frame-background);
  width: 100%;
  font-weight: var(--calc-input-weight-body);
  font-family: var(--calc-font-primary);
  user-select: none;
}

.page_header > .calcinput__main {
  position: relative;
  z-index: 1000;
  margin-top: -80px;
  padding-bottom: 80px;
}

.calcinput__main-container {
  position: relative;
  margin: 0 auto;
  padding: var(--calc-input-space-input-padding);
  min-width: 20rem; /* 320px */
  max-width: 71.25rem; /* 1140px */
  color: var(--calc-input-color-text-form);
  line-height: var(--calc-input-line-compact);
}

@media (min-width: 768px) {
  .calcinput__main-container {
    padding: var(--calc-input-space-input-padding) var(--calc-input-space-input-padding)
      var(--calc-input-space-header-height);
  }
}

.calcinput__content-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.calcinput__header {
  display: grid;
  grid-template-rows: var(--calc-input-space-header-height);
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--calc-input-space-tab-gap);
  z-index: 0;
  user-select: none;
}

@media (min-width: 768px) {
  .calcinput__header {
    grid-template-rows: var(--calc-input-space-header-height-large);
  }
}

.calcinput__option input {
  position: absolute;
  opacity: 0;
  margin: 0;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

.calcinput__option label {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: var(--calc-input-transition-ui-fast);
  cursor: pointer;
  margin-bottom: 0;
  border-top: 1px solid transparent;
  border-right: 1px solid var(--calc-input-border-transparent);
  border-bottom: none;
  border-left: 1px solid var(--calc-input-border-transparent);
  border-color: hsl(0deg 0% 100% / 90%);
  border-radius: var(--calc-input-radius-tab) var(--calc-input-radius-tab) var(--calc-radius-none)
    var(--calc-radius-none);
  background-color: hsl(0deg 0% 100% / 100%);
  padding: 0.3rem;
  font-size: var(--calc-input-text-tab);
  line-height: var(--calc-input-line-compact);
  text-align: center;
}

@media (min-width: 768px) {
  .calcinput__option label {
    padding: var(--calc-space-4) var(--calc-space-15);
    font-size: var(--calc-input-text-tab-large);
    line-height: var(--calc-input-text-tab-large);
  }
}

.calcinput__option--power {
  grid-row: 1 / 2;
  grid-column: 1 / span 1;
  /* margin-right: 4px; */
}

.calcinput__option--gas {
  grid-row: 1 / 2;
  grid-column: 2 / span 1;
  /* margin-left: 4px; */
}

.calcinput__body {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--calc-input-space-layout-gap);
  z-index: 100;
  box-shadow: var(--calc-input-shadow-card);
  border-radius: var(--calc-radius-none) var(--calc-radius-none) var(--calc-input-radius-tab)
    var(--calc-input-radius-tab);
  background-color: var(--calc-surface-card);
  padding: var(--calc-input-space-card-padding);
}

.calcinput__content-container:not(:has(.calcinput__header .calcinput__option--gas)) .calcinput__body {
  border-radius: var(--calc-radius-none) var(--calc-input-radius-tab) var(--calc-input-radius-tab)
    var(--calc-input-radius-tab) !important;
}

.calcinput__content-container:not(:has(.calcinput__header .calcinput__option--power)) .calcinput__body {
  border-radius: var(--calc-input-radius-tab) var(--calc-radius-none) var(--calc-input-radius-tab)
    var(--calc-input-radius-tab) !important;
}

.calcinput__content-container:has(#calcinput-option-power:checked) .calcinput__body {
  clip-path: polygon(-4% 0%, 50.5% 0%, 50.5% -10%, 100% -10%, 100% 0%, 103.81% 0%, 104% 120%, -4% 120%);
}

.calcinput__content-container:has(#calcinput-option-gas:checked) .calcinput__body {
  clip-path: polygon(-4% 0%, 0% 0%, 0% -10%, 49.45% -10%, 49.45% 0%, 104% 0%, 104% 120%, -4% 120%);
}

@media (min-width: 768px) {
  .calcinput__body {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    gap: var(--calc-input-space-layout-gap);
  }

  .calcinput__employee-checkbox-wrapper {
    flex: 1 1 100%;
    order: 1;
    gap: var(--calc-space-8); /* 2rem */
  }

  .calcinput__zipcode-container {
    flex: 1 1 calc(50% - var(--calc-input-space-layout-gap) / 2);
    order: 2;
  }

  .calcinput__usage {
    flex: 1 1 calc(50% - var(--calc-input-space-layout-gap) / 2);
    order: 3;
  }

  .calcinput__submit-button {
    flex: 1 1 100%;
    order: 4;
  }
}

.calcinput__employee-checkbox-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--calc-input-space-element-gap);
  user-select: none;
}

@media (min-width: 768px) {
  .calcinput__employee-checkbox-wrapper {
    flex-wrap: nowrap;
    align-items: center;
  }
}

.calcinput__employee-checkbox input[type='checkbox'] {
  flex-shrink: 0;
  margin: 0;
  margin-top: var(--calc-input-space-element-gap);
}

@media (min-width: 768px) {
  .calcinput__employee-checkbox input[type='checkbox'] {
    margin-top: 0;
  }
}

.calcinput__employee-checkbox label {
  margin: 0;
  padding: var(--calc-input-space-element-gap) 0;
  font-size: var(--calc-input-text-form-label);
  text-wrap: nowrap;
}

@media (min-width: 768px) {
  .calcinput__employee-checkbox label {
    padding: 0;
  }
}

.calcinput__employee {
  display: none;
  margin-top: var(--calc-input-space-element-gap);
  width: 100%;
}

@media (min-width: 768px) {
  .calcinput__employee {
    flex: 1;
    margin-top: 0;
    margin-left: auto;
    width: auto;
    max-width: calc(50% - var(--calc-input-space-layout-gap) / 2);
  }
}

.calcinput__employee--open {
  display: block;
}

.calcinput__zipcode-container {
  /* Container for employee and zipcode sections */
}

.calcinput__zipcode {
  /* Nested inside zipcode-container */
}

.calcinput__zipcode-select {
  margin-top: var(--calc-input-space-layout-gap);
}

.calcinput__zipcode-select--hidden {
  display: none !important;
}

.calcinput__select-wrapper {
  display: flex;
  position: relative;
  align-items: center;
}

.calcinput__select-wrapper select {
  flex: 1;
  appearance: none;
  padding-right: 3.125rem; /* 50px - Space for caret */
  user-select: none;
}

.calcinput__select-caret {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: var(--calc-space-4);
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  transition: var(--calc-input-transition-color);
  pointer-events: none; /* Don't interfere with select clicks */
  color: var(--calc-input-color-text-form);
}

.calcinput__select-wrapper:hover .calcinput__select-caret {
  color: var(--calc-color-text-primary);
}

.calcinput__select-caret svg {
  transition: var(--calc-input-transition-hover);
}

.calcinput__zipcode input,
.calcinput__zipcode-select select,
.calcinput__usage input,
.calcinput__adress select,
.calcinput__employee input[type='text'] {
  outline: none;
  border: 1px solid var(--calc-input-border-default);
  border-radius: var(--calc-input-radius-input);
  background-color: var(--calc-input-surface-input);
  padding: var(--calc-input-space-input-padding);
  width: 100%;
  color: var(--calc-color-text-primary);
  font-size: var(--calc-input-text-form-input);
  line-height: var(--calc-input-line-form);
  text-align: left;
}

.calcinput__employee input[type='text'] {
  margin: 0;
}

.calcinput__zipcode input::placeholder,
.calcinput__usage input::placeholder,
.calcinput__employee input[type='text']::placeholder {
  color: var(--calc-color-text-secondary);
  font-size: var(--calc-input-text-form-input);
  user-select: none;
}

/* Browser-specific placeholder styling for better compatibility */
.calcinput__zipcode input::input-placeholder,
.calcinput__usage input::input-placeholder,
.calcinput__employee input[type='text']::input-placeholder {
  color: var(--calc-color-text-secondary);
}

.calcinput__zipcode input::placeholder,
.calcinput__usage input::placeholder,
.calcinput__employee input[type='text']::placeholder {
  opacity: 1; /* Firefox reduces opacity by default */
  color: var(--calc-color-text-secondary);
}

.calcinput__zipcode input:input-placeholder,
.calcinput__usage input:input-placeholder,
.calcinput__employee input[type='text']:input-placeholder {
  color: var(--calc-color-text-secondary);
}

.calcinput__adress .calcinput__select-wrapper {
  margin-top: var(--calc-input-space-layout-gap);
}

.calcinput__usage {
  /* Flexbox handles spacing and positioning automatically */
}

.calcinput__usage-input-wrapper {
  display: flex;
  position: relative;
  align-items: center;
}

.calcinput__usage-input-wrapper input {
  flex: 1;
  padding-right: 5.5rem; /* 88px - Space for unit + caret button */
}

/* kWh Unit Indicator */
.calcinput__usage-unit {
  position: absolute;
  top: 50%;
  right: 3.125rem; /* 50px - Position before caret button */
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  color: var(--calc-color-text-secondary, #6b7280);
  font-weight: var(--calc-input-weight-body, 400);
  font-size: var(--calc-input-text-body, 1rem);
  user-select: none;
}

/* Show unit when input has content */
.calcinput__usage-input-wrapper--has-content .calcinput__usage-unit {
  opacity: 0.7;
}

.calcinput__usage-input-wrapper--has-content:hover .calcinput__usage-unit {
  opacity: 0.9;
}

.calcinput__usage-caret {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: var(--calc-space-4);
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  transition: var(--calc-input-transition-color);
  cursor: pointer;
  padding: var(--calc-input-space-micro);
  color: var(--calc-input-color-text-form);
}

.calcinput__usage-caret:hover {
  color: var(--calc-color-text-primary);
}

.calcinput__usage-caret svg {
  transition: var(--calc-input-transition-hover);
}

.calcinput__usage--open .calcinput__usage-caret svg {
  transform: rotate(180deg);
}

.calcinput__usage--open .calcinput__usage-input-wrapper input {
  border-bottom: none;
  border-radius: var(--calc-input-radius-input) var(--calc-input-radius-input) var(--calc-radius-none)
    var(--calc-radius-none);
}

/* When usage input has error and dropdown is open */
.calcinput__usage--error.calcinput__usage--open .calcinput__usage-input-wrapper input {
  border-bottom: none;
  border-color: var(--calc-color-text-error) !important;
}

/* Apply error border to dropdown when container has error class */
.calcinput__usage--error .calcinput__usage-select {
  border-color: var(--calc-color-text-error) !important;
  /* background-color: rgb(220 53 69 / 5%); */
}

/* Ensure no top border on dropdown when open with error */
.calcinput__usage--error.calcinput__usage--open .calcinput__usage-select {
  border-top: none;
}

/* Success styling for usage container dropdown */
.calcinput__usage--success.calcinput__usage--open .calcinput__usage-input-wrapper input {
  border-bottom: none;
  border-color: var(--calc-green-400) !important;
}

.calcinput__usage--success .calcinput__usage-select {
  border-color: var(--calc-green-400) !important;
  /* background-color: rgb(139 197 63 / 8%); */
}

.calcinput__usage--success.calcinput__usage--open .calcinput__usage-select {
  border-top: none;
}

.calcinput__usage-select {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: var(--calc-input-space-element-gap);
  transition: var(--calc-input-transition-ui);
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid var(--calc-input-border-default);
  border-top: none;
  border-radius: var(--calc-radius-none) var(--calc-radius-none) var(--calc-input-radius-input)
    var(--calc-input-radius-input);
  background-color: var(--calc-input-surface-input);
  padding: var(--calc-space-4) var(--calc-space-8);
  width: 100%;
  line-height: 2rem; /* 32px */
  list-style: none;
}

.calcinput__usage-select--hidden {
  display: none;
}

.calcinput__usage-select > div {
  display: flex;
  align-items: center;
  gap: var(--calc-input-space-element-gap);
  cursor: pointer;
  width: 100%;
}

.calcinput__usage-select > div input[type='radio'] {
  flex-shrink: 0;
  appearance: auto;
  margin: 0;
  width: var(--calc-input-size-checkbox);
  height: var(--calc-input-size-checkbox);
}

/* DEBUG: Temporary radio button visibility styles */
.calcinput__usage-select > div input[type='radio'] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 2px solid #007bff !important;
  background: white !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.calcinput__usage-select > div label {
  transition: color 0.2s ease;
  cursor: pointer;
  margin: 0;
  width: 100%;
  font-size: var(--calc-input-text-form-select);
  user-select: none;
}

.calcinput__usage-select > div label:hover {
  color: var(--calc-brand-primary, #007bff);
}

/* Dual preset containers for "both" market type */
.calcinput__presets-power,
.calcinput__presets-gas {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: var(--calc-input-space-element-gap-large);
  width: 100%;
}

.calcinput__presets-power div,
.calcinput__presets-gas div {
  display: flex;
  align-items: center;
  gap: var(--calc-input-space-element-gap);
  transition: background-color 0.2s ease;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.25rem;
  width: 100%;
}

.calcinput__presets-power input[type='radio'],
.calcinput__presets-gas input[type='radio'] {
  flex-shrink: 0;
  appearance: auto;
  margin: 0;
  width: var(--calc-input-size-checkbox);
  height: var(--calc-input-size-checkbox);
}

/* DEBUG: Temporary preset radio button visibility styles */
.calcinput__presets-power input[type='radio'],
.calcinput__presets-gas input[type='radio'] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 2px solid #007bff !important;
  background: white !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.calcinput__presets-power input[type='radio']:checked,
.calcinput__presets-gas input[type='radio']:checked {
  background: #007bff !important;
}

.calcinput__presets-power label,
.calcinput__presets-gas label {
  transition: color 0.2s ease;
  cursor: pointer;
  margin: 0;
  width: 100%;
  font-size: var(--calc-input-text-form-select);
  user-select: none;
}

.calcinput__presets-power div:hover label,
.calcinput__presets-gas div:hover label {
  color: var(--calc-brand-primary, #007bff);
}

.calcinput__usage-select-icon {
  flex: 0 0 2rem;
  fill: var(--calc-brand-primary);
}

.calcinput__usage-separator {
  margin: 0;
  border: none;
  background-color: var(--calc-input-color-text-form);
  width: 100%;
  height: 1px;
}

.calcinput__submit-button {
  margin-top: calc(var(--calc-input-space-layout-gap) * 1);
  margin-bottom: calc(var(--calc-input-space-layout-gap) * 1);
}

@media (min-width: 768px) {
  .calcinput__submit-button {
    display: flex;
    justify-content: center;
  }
}

.calcinput__submit-button button,
.calcinput__submit-button a {
  display: inline-block;
  transition: var(--calc-input-transition-ui-medium);
  cursor: pointer;
  outline: none;
  border: 1px solid var(--calc-brand-primary);
  border-radius: var(--calc-input-radius-button);
  background-color: var(--calc-brand-primary);
  padding: var(--calc-input-space-button-padding-y) var(--calc-input-space-button-padding-x);
  width: 100%;
  color: var(--calc-color-text-on-brand);
  font-weight: var(--calc-input-weight-tab);
  font-size: var(--calc-input-text-button);
  line-height: var(--calc-input-line-button);
  user-select: none;
  text-align: center;
  text-decoration: none;
}

button#calcinput-submit:hover,
.calcinput__submit-button a:hover {
  border-color: var(--calc-brand-primary-hover);
  background-color: var(--calc-brand-primary-hover);
  color: var(--calc-color-text-on-brand-hover);
}

@media (min-width: 768px) {
  .calcinput__submit-button button,
  .calcinput__submit-button a {
    width: auto;
  }
}

/* Error messages */
.calcinput__error {
  display: none;
  position: relative;
  margin-top: var(--calc-space-3);
  border-radius: var(--calc-input-radius-error);
  background-color: var(--calc-color-text-error);
  padding: var(--calc-input-space-error-padding-y) var(--calc-input-space-error-padding-x);
  color: var(--calc-color-text-on-brand);
  font-weight: var(--calc-input-weight-body);
  font-size: var(--calc-input-text-error-message);
  line-height: var(--calc-input-line-disclaimer);
  text-align: center;
}

.calcinput__error::before {
  position: absolute;
  top: -0.5rem; /* -8px */
  left: 50%;
  transform: translateX(-50%);
  border-right: 0.5rem solid transparent; /* 8px */
  border-bottom: var(--calc-input-space-element-gap) solid var(--calc-color-text-error);
  border-left: 0.5rem solid transparent; /* 8px */
  width: 0;
  height: 0;
  content: '';
}

.calcinput__error:empty {
  display: none;
}

.calcinput__error.calcinput__error--visible {
  display: block !important;
}

/* Heimatmarkt validation error - friendly and informative styling */
.calcinput__error--heimatmarkt {
  box-shadow: 0 2px 8px rgb(0 123 255 / 15%);
  border: 1px solid #9eeaf9;
  border-radius: var(--calc-input-radius-error);
  background-color: #cff4fc !important;
  padding: 1rem;
  color: #05515f;
  font-weight: var(--calc-input-weight-body);
  font-size: var(--calc-input-text-body);
  line-height: 1.4;
}

.calcinput__error--heimatmarkt::before {
  border-bottom-color: #9eeaf9 !important;
}

/* Alternative softer styling for Heimatmarkt errors */
@media (prefers-color-scheme: light) {
  .calcinput__error--heimatmarkt {
    border-color: #2196f3;
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
  }

  .calcinput__error--heimatmarkt::before {
    border-bottom-color: #2196f3 !important;
  }
}

/* Info messages - für informative Nachrichten ohne Error-Kontext */
.calcinput__info {
  display: none;
  position: relative;
  margin-top: var(--calc-space-3);
  border-radius: var(--calc-input-radius-error);
  background-color: var(--calc-brand-primary);
  padding: var(--calc-input-space-error-padding-y) var(--calc-input-space-error-padding-x);
  color: var(--calc-color-text-on-brand);
  font-weight: var(--calc-input-weight-body);
  font-size: var(--calc-input-text-error-message);
  line-height: var(--calc-input-line-disclaimer);
  text-align: center;
}

.calcinput__info::before {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-right: 0.5rem solid transparent;
  border-bottom: var(--calc-input-space-element-gap) solid var(--calc-brand-primary);
  border-left: 0.5rem solid transparent;
  width: 0;
  height: 0;
  content: '';
}

.calcinput__info:empty {
  display: none;
}

.calcinput__info.calcinput__info--visible {
  display: block !important;
}

/* Consumption info message - friendly informative styling like heimatmarkt */
.calcinput__info--consumption {
  box-shadow: 0 2px 8px rgb(0 123 255 / 15%);
  border: 1px solid #9eeaf9;
  background-color: #cff4fc !important;
  padding: 1rem;
  color: #05515f;
}

.calcinput__info--consumption::before {
  border-bottom-color: #9eeaf9 !important;
}

/* External Teaser Element for Heimatmarkt Validation */
#calc-teasextern {
  display: none;
  transform: translateY(10px);
  opacity: 0;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

#calc-teasextern.calc-teaser--visible {
  display: block !important;
  transform: translateY(0);
  opacity: 1;
}

/* Smooth appearance animation for external teaser */
@keyframes calc-teaser-slide-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#calc-teasextern.calc-teaser--visible {
  animation: calc-teaser-slide-in 0.4s ease-out;
}

/* Ensure teaser is properly integrated with page layout */
/* #calc-teasextern {
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  border-radius: var(--calc-input-radius-card, 8px);
} */

/* Responsive behavior for external teaser */
/* @media (max-width: 767px) {
  #calc-teasextern {
    margin: 0.5rem 0;
  }
} */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #calc-teasextern {
    animation: none;
    transition: none;
  }

  #calc-teasextern.calc-teaser--visible {
    animation: none;
  }
}

/* Auto-Submit Loading States */
.calcinput__form--auto-submitting {
  opacity: 0.7;
  pointer-events: none;
}

.calcinput__button--loading {
  position: relative;
  overflow: hidden;
}

.calcinput__loading-spinner {
  display: inline-block;
  animation: calcinput-spin 1s linear infinite;
  margin-right: 0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentcolor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

.calcinput__loading-spinner--large {
  margin-right: 0;
  border-width: 3px;
  width: 32px;
  height: 32px;
}

@keyframes calcinput-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Auto-Submit Overlay */
.calcinput__auto-submit-overlay {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  inset: 0;
  border-radius: var(--calc-input-radius-form, 8px);
  background-color: rgb(255 255 255 / 95%);
}

.calcinput__auto-submit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.calcinput__auto-submit-message {
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-input-weight-heading);
  font-size: var(--calc-input-text-body-large);
  line-height: 1.4;
}

.calcinput__auto-submit-submessage {
  opacity: 0.8;
  color: var(--calc-color-text-secondary);
  font-weight: var(--calc-input-weight-body);
  font-size: var(--calc-input-text-body);
  line-height: 1.4;
}

/* Responsive auto-submit overlay */
@media (max-width: 767px) {
  .calcinput__auto-submit-content {
    gap: 0.75rem;
    padding: 1.5rem;
  }

  .calcinput__auto-submit-message {
    font-size: var(--calc-input-text-body);
  }

  .calcinput__auto-submit-submessage {
    font-size: var(--calc-input-text-body-small);
  }
}

/* Reduced motion for auto-submit */
@media (prefers-reduced-motion: reduce) {
  .calcinput__loading-spinner {
    animation: none;
    border-top-color: currentcolor;
  }

  .calcinput__auto-submit-overlay {
    backdrop-filter: none;
  }
}

/* Tab shadow states */

/* Active tab - strong shadow, seamless connection */
.calcinput__option input:checked + label {
  position: relative;
  z-index: 3;
  margin-bottom: -0.125rem; /* -2px */
  box-shadow: var(--calc-input-shadow-card);
  border-bottom: 2px solid var(--calc-surface-card);
}

.calcinput__option--power input + label {
  /* Clip exactly where shadow would interfere with body */
  clip-path: polygon(-5.5% -40%, 105% -40%, 105% 92%, 100% 92%, 100% 97%, 0 97%, 0 150%, -5.5% 150%);
}

.calcinput__option--gas input + label {
  /* Clip exactly where shadow would interfere with body */
  clip-path: polygon(105.5% -40%, -5% -40%, -5% 92%, 0% 92%, 0% 97%, 100% 97%, 100% 150%, 105.5% 150%);
}

/* ZIP Code Loading State */
.calcinput__zipcode {
  position: relative;
  width: 100%;
}

.calcinput__zipcode--loading input {
  padding-right: 40px; /* Make space for spinner */
}

.calcinput__zipcode--loading::after {
  display: inline-block;
  position: absolute;
  top: 1.5rem; /* Position at center of input field */
  right: 20px;
  z-index: 1; /* Keep spinner above input */
  animation: spin 1s linear infinite;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #333;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  pointer-events: none; /* Ensure spinner doesn't block input */
  content: '';
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Validation States */
.calcinput__input--error {
  border-color: var(--calc-color-text-error) !important;
  background-color: rgb(220 53 69 / 5%);
}

.calcinput__select--error {
  border-color: var(--calc-color-text-error) !important;
  background-color: rgb(220 53 69 / 5%);
}

/* Success styling for valid fields */
.calcinput__input--success {
  border-color: var(--calc-green-400) !important;
  background-color: rgb(139 197 63 / 8%);
}

.calcinput__select--success {
  border-color: var(--calc-green-400) !important;
  background-color: rgb(139 197 63 / 8%);
}

.calcinput__select--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

/* Only make the text gray when disabled AND showing placeholder "Stadt auswählen" */
.calcinput__select--disabled.calcinput__select--placeholder {
  opacity: 1; /* Full opacity to match other placeholder text */
  color: var(--calc-color-text-secondary);
}

/* Style the caret for disabled select with placeholder */
.calcinput__zipcode-select .calcinput__select--disabled.calcinput__select--placeholder ~ .calcinput__select-caret {
  opacity: 0.5;
  color: var(--calc-color-text-secondary);
}

.calcinput__select-wrapper--disabled .calcinput__select-caret {
  opacity: 0.4;
  cursor: not-allowed;
}

.calcinput__select-wrapper--focused {
  outline: 2px solid var(--calc-color-primary);
  outline-offset: 2px;
  border-radius: var(--calc-input-radius-input);
}

/* Submit Button Disabled State */
.calcinput__submit--disabled {
  opacity: 0.7;
  cursor: not-allowed;
  border-color: var(--calc-brand-primary) !important;
  background-color: var(--calc-input-surface-input) !important;
  color: var(--calc-color-text-secondary) !important;
}

.calcinput__submit--disabled:hover {
  transform: none;
  background-color: var(--calc-input-surface-input) !important;
  color: var(--calc-color-text-secondary) !important;
}

/* Screen Reader Only Class for Announcements */
.sr-only {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* ZIP Code Container - removed duplicate position relative as it's now on loading state */

/* Error Message for Consumption */
.calcinput__error--usage {
  margin-top: var(--calc-space-3);
}

/* City Select Error */
.calcinput__error--city {
  margin-top: var(--calc-space-3);
}

/* ZIP Code Error */
.calcinput__error--zipcode {
  margin-top: var(--calc-space-3);
}

/* Retrieval Error Styles */
.calcinput__retrieval-error {
  display: none;
  position: relative;
  margin-top: var(--calc-space-4);
  border: 1px solid var(--calc-color-error-border, #fecaca);
  border-radius: var(--calc-radius-small, 4px);
  background-color: var(--calc-color-error-background, #fdf2f2);
  padding: var(--calc-input-space-error-padding-y) var(--calc-input-space-error-padding-x);
  color: var(--calc-color-error, #e74c3c);
  font-weight: var(--calc-input-weight-body);
  font-size: var(--calc-input-text-error-message);
  line-height: var(--calc-input-line-disclaimer);
}

.calcinput__error-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--calc-space-3);
}

.calcinput__error-close {
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: none;
  border-radius: var(--calc-radius-small, 4px);
  background-color: transparent;
  padding: var(--calc-space-1) var(--calc-space-2);
  color: var(--calc-color-error, #e74c3c);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
}

.calcinput__error-close:hover {
  background-color: rgb(231 76 60 / 10%);
}

.calcinput__error-close:focus {
  outline: 2px solid var(--calc-color-error, #e74c3c);
  outline-offset: 2px;
}

/* City Field Visibility Transitions */
.calcinput__zipcode-select {
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.calcinput__zipcode-select[style*='display: none'] {
  transform: translateY(-10px);
  opacity: 0;
}

/* Inactive tab - weak shadow, behind */
.calcinput__option input:not(:checked) + label {
  transform: translateY(0.1875rem); /* 3px */
  z-index: 1;
  box-shadow: var(--calc-input-shadow-card);
  background-color: hsl(0deg 0% 96.5% / 75%);
}

/* Hover effect for inactive tabs */
.calcinput__option input:not(:checked) + label:hover {
  transform: translateY(0.0625rem); /* 1px */
  box-shadow: var(--calc-input-shadow-card);
}

/* Utility classes */
.hidden {
  display: none;
}

/* Enhanced error styling for limit exceeded scenarios */
.calcinput__error--primary {
  background-color: var(--calc-brand-primary) !important;
  color: white !important;
}

.calcinput__error--primary::before {
  border-bottom-color: var(--calc-brand-primary) !important;
}

/* Individual offer button styling */
.calcinput__submit--individual-offer {
  /* Inherits same styling as regular submit button */
}