/* ============================================================
   checkout.css - G8-S0.1 checkout "Tus datos" identity/phone/country
   controls. Scoped to the checkout form only. Reuses tokens.css
   custom properties and the checkout/form-grid/field primitives from
   funnel.css + base.html. No new card language, gradients, glass,
   pills, glows, transforms or decorative chrome. Radius <= 8px.
   Server context stays authoritative; nothing here validates.
   ============================================================ */

/* Visually-hidden but announced to assistive tech (native labels for the
   composite phone controls, error-summary heading context). */
body.funnel-page .co-phone-row label.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* A resumable checkout contains the whole recovery flow (payment, review,
   unit switch and cancellation), so it uses the same content rail as the
   checkout rather than the narrow confirmation-message measure. */
.cs-wrap--checkout-resume {
  max-width: none;
}

/* Existing customers re-enter through the portal without creating a second
   account. This is a functional checkout branch, not a promotional card. */
.co-layout--account-entry {
  grid-template-areas:
    "account summary"
    "main summary";
}

.co-layout--account-entry .co-main {
  grid-area: main;
}

.co-layout--account-entry .co-aside {
  grid-area: summary;
}

.co-account-entry {
  align-items: center;
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  grid-area: account;
  min-width: 0;
  padding: 12px 14px;
}

.co-account-entry__icon {
  align-items: center;
  border: 1px solid var(--tg-line);
  border-radius: 50%;
  color: var(--tg-navy);
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.co-account-entry__icon svg {
  height: 21px;
  width: 21px;
}

.co-account-entry__copy {
  color: var(--tg-muted);
  display: grid;
  flex: 1 1 auto;
  font-size: 12.5px;
  gap: 2px;
  line-height: 1.4;
  min-width: 0;
}

.co-account-entry__copy strong {
  color: var(--tg-navy);
  font-size: 14px;
}

.co-account-entry__action {
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  color: var(--tg-navy);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  margin-left: auto;
  padding: 9px 13px;
  text-decoration: none;
}

.co-account-entry__action:hover,
.co-account-entry__action:focus-visible {
  background: var(--tg-surface);
  color: var(--tg-navy);
  text-decoration: none;
}

.co-primary-actions {
  justify-content: space-between;
}

.co-data-protected {
  align-items: center;
  color: var(--tg-muted);
  display: inline-flex;
  font-size: 12.5px;
  gap: 6px;
  margin-left: auto;
}

.co-data-protected svg {
  color: var(--tg-navy);
  height: 15px;
  width: 15px;
}

/* ---- Continuous form flow ----
   "Tus datos" is one form, not a stack of decorated sub-sections. The
   wrappers remain structural/conditional hooks, but do not introduce rules or
   extra vertical padding between the fields. */
.co-fieldgroup {
  margin: 0;
}

/* All customer fields after the persona control share one grid, so the
   14px row rhythm stays identical across identity, phone and address. The
   company wrapper participates transparently in that grid and can still be
   hidden as one authoritative conditional unit by the existing script. */
.co-customer-fields .field {
  margin-bottom: 0;
  max-width: none;
}

.co-customer-fields__company {
  display: contents;
}

.co-customer-fields__company[hidden] {
  display: none !important;
}

/* A company has exactly one accepted entity-document type. The selector is
   progressively hidden and the NIF/CIF field uses the whole row; no dead
   half-column remains after removing an impossible choice. */
.co-customer-fields[data-customer-type="company"] .co-company-document {
  grid-column: 1 / -1;
}

/* Postal code, municipality and province are one address relationship. At
   tablet/desktop widths they read as one row; mobile keeps normal form order. */
.co-address-locality {
  display: grid;
  gap: 14px 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Composite phone (prefix select + national number) ---- */
.co-phone-field {
  border: 0;
  margin: 0 0 14px;
  max-width: none;
  min-inline-size: 0;
  padding: 0;
}

.co-phone-field > legend {
  color: var(--tg-navy);
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 6px;
  padding: 0;
}

.co-phone-row {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

.co-phone-prefix {
  flex: 0 0 132px;
}

.co-phone-number {
  flex: 1 1 auto;
  min-width: 0;
}

.co-phone-row select,
.co-phone-row input {
  width: 100%;
}

/* ---- Per-field + summary errors (danger red only, never orange) ---- */
.co-field-error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
}

.co-preflight-status {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0 0;
}

.co-error-summary {
  background: #fff2f0;
  border: 1px solid #f2b8b5;
  border-radius: 8px;
  color: var(--danger);
  margin: 0 0 18px;
  padding: 12px 14px;
}

.co-error-summary:focus {
  outline: 2px solid rgba(180, 35, 24, 0.4);
  outline-offset: 2px;
}

.co-error-summary__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
}

.co-error-summary__form {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}

.co-error-summary__list {
  margin: 0;
  padding-left: 18px;
}

.co-error-summary__list li + li {
  margin-top: 4px;
}

.co-error-summary__list a {
  color: var(--danger);
  font-weight: 650;
  text-decoration: underline;
}

/* Invalid controls: danger border + soft ring, matching the signature
   invalid treatment. Applies to whichever controls the server flags. */
body.funnel-page .co-step-1 [aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

/* ---- Degraded / blocked-context notice (only rendered when the server
   has not yet supplied a required option catalogue) ---- */
.co-context-blocked {
  background: var(--tg-surface);
  border: 1px dashed var(--tg-line);
  border-radius: 8px;
  color: var(--tg-muted);
  font-size: 13px;
  margin: 6px 0 0;
  padding: 8px 10px;
}

.co-contract-review {
  align-items: center;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
}

.co-contract-review div {
  display: grid;
  gap: 3px;
}

.co-contract-review strong {
  color: var(--tg-navy);
  font-size: 14px;
}

.co-contract-review span {
  color: var(--tg-muted);
  font-size: 13px;
  line-height: 1.45;
}

.co-contract-review button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Address assistance stays invisible unless an ambiguity needs a decision. */
.co-address-assist-status {
  color: var(--tg-muted);
  font-size: 13px;
  margin: -4px 0 0;
}

/* Pending-checkout unit change: backend data remains authoritative; this
   surface only lets the customer choose and preview the next checkout. */
.cs-unit-switch {
  border-top: 1px solid var(--tg-line);
  margin-top: 24px;
  padding-top: 24px;
  text-align: left;
}

.cs-unit-switch__heading h2 {
  color: var(--tg-navy);
  font-size: 20px;
  margin: 0 0 6px;
}

.cs-unit-switch__heading p {
  color: var(--tg-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.cs-unit-switch__floorplan {
  margin: 16px 0 14px;
}

.cs-unit-switch__floorplan .fp-legend {
  margin: 0 0 12px;
}

.cs-unit-switch__floorplan .fp-svg-container {
  max-height: 560px;
}

.cs-unit-switch__details {
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  margin: 0 0 14px;
  overflow: hidden;
}

.cs-unit-switch__details > summary {
  color: var(--tg-navy);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  padding: 12px 14px;
}

.cs-unit-switch__details > summary::-webkit-details-marker {
  display: none;
}

.cs-unit-switch__details > summary::after {
  content: "▾";
  float: right;
}

.cs-unit-switch__details[open] > summary {
  border-bottom: 1px solid var(--tg-line);
}

.cs-unit-switch__details[open] > summary::after {
  transform: rotate(180deg);
}

.cs-unit-switch__details .cs-unit-switch__grid {
  margin: 0;
  padding: 10px;
}

.cs-unit-switch__grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
  max-height: 280px;
  overflow: auto;
  padding: 2px;
}

.cs-unit-switch__option {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
}

.cs-unit-switch__option:has(input:checked) {
  border-color: var(--tg-navy);
  box-shadow: 0 0 0 2px rgba(12, 45, 82, 0.12);
}

.cs-unit-switch__option input {
  margin-top: 3px;
}

.cs-unit-switch__option span {
  display: grid;
  gap: 3px;
}

.cs-unit-switch__option strong {
  color: var(--tg-navy);
  font-size: 14px;
}

.cs-unit-switch__option small {
  color: var(--tg-muted);
  font-size: 12px;
  line-height: 1.4;
}

.cs-unit-switch__preview {
  align-items: start;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  margin: 0 0 14px;
  padding: 14px;
}

.cs-unit-switch__preview[hidden] {
  display: none;
}

.cs-unit-switch__preview > div {
  display: grid;
  gap: 3px;
}

.cs-unit-switch__preview span,
.cs-unit-switch__preview small,
.cs-unit-switch__preview dt {
  color: var(--tg-muted);
  font-size: 12px;
}

.cs-unit-switch__preview strong {
  color: var(--tg-navy);
  font-size: 16px;
}

.cs-unit-switch__preview dl {
  margin: 0;
}

.cs-unit-switch__preview dl div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cs-unit-switch__preview dl div + div {
  margin-top: 5px;
}

.cs-unit-switch__preview dd {
  color: var(--tg-navy);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.cs-unit-switch .checkbox-label,
.cs-abandon .checkbox-label {
  margin: 12px 0;
}

.cs-unit-switch button,
.cs-abandon button {
  width: 100%;
}

.cs-unit-switch > form > button,
.cs-abandon button {
  margin-top: 12px;
}

.cs-abandon {
  border-top: 1px solid var(--tg-line);
  margin-top: 20px;
  padding-top: 18px;
  text-align: left;
}

@media (max-width: 360px) {
  .co-phone-prefix {
    flex-basis: 108px;
  }
}

@media (max-width: 720px) {
  .co-actions-final {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .co-actions-final > button {
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .cs-unit-switch__grid,
  .cs-unit-switch__preview {
    grid-template-columns: 1fr;
  }

  .co-address-locality {
    grid-template-columns: 1fr;
  }

  .co-account-entry {
    padding: 12px;
  }

  .co-primary-actions {
    align-items: center;
    flex-wrap: nowrap;
  }

  .co-data-protected {
    text-align: right;
  }

  .co-contract-review {
    align-items: stretch;
    flex-direction: column;
  }

  .co-contract-review button {
    align-self: flex-start;
  }
}

@media (max-width: 960px) {
  .co-layout--account-entry {
    grid-template-areas:
      "summary"
      "account"
      "main";
  }
}