/*
 * Tango pre-order forms - shared stylesheet.
 * Colours, spacing and component shapes come from the approved mockups.
 * Everything under "Live-form states" covers behaviour the mockups did not
 * show: catalogue loading, the duplicate-submission block, and submitting.
 */

/*
 * TT Rounds Neue Condensed: Tango's brand face, supplied by Proximus.
 * Self-hosted rather than linked, so there is no third-party request on the
 * critical path. Only the four weights the design uses are shipped (400/700/
 * 800/900); adding another means dropping its woff2 in and a block here.
 * `font-display: swap` so a slow font never blocks the form from being filled.
 */
@font-face {
  font-family: 'TT Rounds Neue Cond';
  src: url('/assets/fonts/tt-rounds-neue-cond-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Rounds Neue Cond';
  src: url('/assets/fonts/tt-rounds-neue-cond-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Rounds Neue Cond';
  src: url('/assets/fonts/tt-rounds-neue-cond-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Rounds Neue Cond';
  src: url('/assets/fonts/tt-rounds-neue-cond-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #005ca9;
  --dark-blue: #002544;
  --light-blue: #f0f4f9;
  --page: #f0f4f9;
  --green: #bcfc32;
  --pink: #d8127e;
  --border: rgba(0, 92, 169, .22);
  --text: #002544;
  --muted: rgba(0, 37, 68, .72);
  --success-bg: #eefaf3;
  --success-border: #b8ebcc;
  --success-text: #006b2f;
  --warning-bg: #fff8e8;
  --warning-border: #ffd98a;
  --warning-text: #7a5200;
  --error: #ff2b3a;
  --error-bg: #fff5f5;
  /* The error/duplicate pages use a pink alert palette, distinct from the
   * red used for field errors inside the form. */
  --alert-bg: #fff5fa;
  --alert-border: #f3b8d8;
  --soft-limit-bg: #fff8e8;
  --soft-limit-border: #ffd98a;
  --soft-limit-text: #7a5200;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'TT Rounds Neue Cond', sans-serif;
  background: var(--page);
  color: var(--text);
}

/*
 * Header: a slim bar carrying only the logo and the language selector. The
 * 30 July prototypes dropped the Tango site chrome (utility strip, nav, My
 * Tango) in favour of a standalone landing page, so none of that is here.
 * The logo is absolutely centred, which is why the bar is a positioning
 * context and the language selector is pushed right with margin-left:auto.
 */
.header {
  width: calc(100% - 40px);
  max-width: 940px;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
  overflow: visible;
  position: relative;
  z-index: 10;
  background: #0a4db3;
  color: #fff;
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 12px 18px 12px 28px;
  position: relative;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.header a { text-decoration: none; }

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0;
}

.logo .tango-logo-img {
  display: block;
  width: 118px;
  height: auto;
}

/*
 * Campaign artwork. The prototype fakes the phone with CSS gradients, so this
 * is a placeholder frame: drop the real campaign image in as an <img> and the
 * gradient stops mattering.
 */
/* Spec from Proximus: 940 x 250 with a 25px radius. The page's content width
 * is 940, so `width: 100%` is that measurement. */
.campaign-image {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 25px;
  background:
    radial-gradient(circle at 78% 26%, rgba(188, 252, 50, .28) 0, rgba(188, 252, 50, .10) 24%, transparent 46%),
    radial-gradient(circle at 22% 92%, rgba(216, 18, 126, .24) 0, rgba(216, 18, 126, .08) 28%, transparent 54%),
    linear-gradient(135deg, #002544 0%, #123d68 58%, #005ca9 100%);
  box-shadow: 0 14px 34px rgba(0, 37, 68, .08);
}

.campaign-image img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * The phone illustration, drawn in CSS as the prototypes do: a tilted handset
 * with a camera cluster, a translucent card behind it and an orbit ring. It
 * bleeds off the bottom edge, which `overflow: hidden` above crops.
 */
.campaign-art {
  position: absolute;
  right: 50%;
  bottom: -18px;
  z-index: 1;
  /* The spec marks the central 460px of the banner as the artwork area. */
  width: 460px;
  height: 320px;
  transform: translateX(50%);
}

.campaign-orbit {
  position: absolute;
  right: 28px;
  bottom: 26px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  transform: rotate(-16deg);
}

.campaign-orbit::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 24px rgba(188, 252, 50, .8);
}

.iphone-shadow-card {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 126px;
  height: 210px;
  border-radius: 30px;
  transform: rotate(-16deg) translate(34px, 10px);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(1px);
}

.iphone-visual {
  position: absolute;
  right: 72px;
  bottom: -18px;
  width: 124px;
  height: 236px;
  border-radius: 32px;
  transform: rotate(-16deg);
  background: linear-gradient(145deg, #121722 0%, #2c3445 48%, #6b7487 100%);
  box-shadow: 0 28px 46px rgba(0, 0, 0, .42), inset 0 0 0 2px rgba(255, 255, 255, .18);
}

.iphone-visual::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(160deg, #121827 0%, #404a60 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* The Dynamic Island. */
.iphone-visual::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 42px;
  width: 42px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .50);
}

.camera-cluster {
  position: absolute;
  top: 24px;
  left: 18px;
  width: 62px;
  height: 70px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.camera-cluster span {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8f98aa 0 12%, #111722 38%, #02050a 72%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .30);
}

.camera-cluster span:nth-child(1) { top: 9px; left: 8px; }
.camera-cluster span:nth-child(2) { top: 9px; right: 8px; }
.camera-cluster span:nth-child(3) { bottom: 9px; left: 20px; }

/*
 * Intro block and the form card below it read as one continuous white card:
 * this one is square at the bottom, the card is square at the top.
 */
.intro-block {
  margin-top: 28px;
  padding: 34px 40px 34px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: var(--dark-blue);
}

/* Specificity has to beat `.intro-block p` below. */
.intro-block .intro-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--dark-blue);
}

.intro-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dark-blue);
}

/* Specificity has to beat `.intro-block p` above, which zeroes the margin. */
.intro-block .intro-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dark-blue);
}

.intro-block .intro-switch a {
  color: var(--dark-blue);
  text-decoration: underline;
}

.page {
  max-width: 980px;
  margin: 30px auto 60px;
  padding: 0 20px;
}

/* Centred inside the intro block, per the prototypes. */
h1 {
  max-width: 760px;
  margin: 0 auto 26px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-align: center;
  color: #07245a;
}

.card {
  background: #fff;
  /* Square on top: the intro block sits directly above and the two read as
   * one continuous card. */
  border-radius: 0 0 24px 24px;
  padding: 34px 40px 40px;
}

.info {
  background: #f1f6fd;
  border-radius: 14px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 32px;
}

.section {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  margin-top: 28px;
}

.section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  font-size: 21px;
  color: var(--dark-blue);
}

.section-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.phone-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--blue);
  background: #f3f8ff;
  color: var(--dark-blue);
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.phone-counter.is-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.phone-counter.is-limit {
  border-color: var(--soft-limit-border);
  background: var(--soft-limit-bg);
  color: var(--soft-limit-text);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}

.field.full { grid-column: 1 / -1; }

label {
  display: block;
  margin-bottom: 9px;
  font-weight: 800;
  color: var(--dark-blue);
  font-size: 14px;
}

.required { color: var(--pink); }

/*
 * The required Yes/No question, as the prototypes draw it: a single bordered
 * row with the label on the left and the two options right-aligned. The error
 * state colours the whole row, because neither radio is "the" field.
 */
.radio-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 92, 169, .20);
  border-radius: 18px;
  background: #f7faff;
  box-shadow: 0 4px 14px rgba(0, 37, 68, .04);
}

.radio-question-title {
  display: block;
  margin: 0;
  color: var(--dark-blue);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

.radio-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 10px;
  min-width: 210px;
  flex: 0 0 auto;
}

.radio-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 2px solid #cfe1f8;
  border-radius: 14px;
  background: #fff;
  color: var(--dark-blue);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.radio-option:hover {
  border-color: var(--blue);
  background: #f7fbff;
  transform: translateY(-1px);
}

.radio-option.selected {
  border-color: var(--blue);
  background: #eef6ff;
  box-shadow: 0 0 0 3px rgba(0, 92, 169, .09);
}

.radio-option input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.radio-option:focus-within {
  outline: 3px solid rgba(0, 92, 169, .16);
  outline-offset: 2px;
}

.radio-question.has-error {
  border-color: var(--error);
  background: var(--error-bg);
}

.radio-question:focus { outline: none; }

input, select, textarea {
  width: 100%;
  border: 2px solid var(--blue);
  border-radius: 22px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--dark-blue);
  background: #fff;
  outline: none;
}

textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 18px;
}

input.has-error, select.has-error, textarea.has-error {
  border-color: var(--error);
  background: #fff;
}

/*
 * Phone number with a dial-code picker, from the Proximus mockup: one rounded
 * field holding the flag and code on the left and the number on the right.
 */
.phone-input {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 2px solid var(--blue);
  border-radius: 22px;
  background: #fff;
}

.phone-input.has-error { border-color: var(--error); }

.phone-input > input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0 20px 20px 0;
}

.phone-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 20px 0 0 20px;
  background: transparent;
  padding: 0 14px 0 18px;
  color: var(--dark-blue);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.phone-country:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -5px;
}

.phone-country img,
.phone-country-list img {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 37, 68, .12);
}

.phone-country-caret { font-size: 12px; }

.phone-input.no-picker .phone-country { display: none; }
.phone-input.no-picker > input { border-radius: 20px; }

.phone-country-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -2px;
  z-index: 50;
  width: min(340px, calc(100% + 4px));
  background: #fff;
  border: 1px solid rgba(0, 92, 169, .12);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 37, 68, .18);
  overflow: hidden;
}

.phone-country-menu[hidden] { display: none; }

.phone-country-menu .phone-country-search {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}

.phone-country-list {
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.phone-country-list [role="option"] {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--dark-blue);
  cursor: pointer;
}

.phone-country-list [role="option"].active,
.phone-country-list [role="option"]:hover { background: var(--page); }

.phone-country-list [role="option"].selected { font-weight: 800; }

.phone-country-code { font-weight: 800; }

.phone-country-empty {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
}

.field-error {
  display: none;
  margin-top: 8px;
  color: var(--error);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
}

.field-error.visible { display: block; }

.hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.hidden { display: none !important; }


.fixed-collection-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: #f3f8ff;
  border: 1px solid var(--border);
  color: var(--dark-blue);
  line-height: 1.5;
}

.collection-label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .35px;
}

.fixed-collection-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.fixed-collection-card .address {
  color: var(--muted);
  font-size: 14px;
}

/* Add breathing room between the choice step and the form fields.
   The first following section has no top border, so a dedicated gap keeps the UI from feeling compressed. */
#continuationSection {
  margin-bottom: 34px;
}

#onlineRequestContent > .section:first-child {
  margin-top: 0;
  padding-top: 0;
}

#advisorPanel {
  margin-top: 34px;
}


.choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: var(--dark-blue);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.choice-card.selected {
  border-color: var(--blue);
  background: #f7fbff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .08);
}

.choice-card input {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.choice-text {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1.2;
}

.choice-title {
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
}

.choice-description {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.advisor-panel {
  display: none;
  line-height: 1.45;
}

.advisor-panel.visible { display: block; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff8e8;
  border: 1px solid #ffd98a;
  color: #7a5200;
  font-size: 13px;
  font-weight: 900;
}

.advisor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  background: #d8e4f2;
  color: var(--muted);
  padding: 14px 22px;
  border-radius: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: not-allowed;
  pointer-events: none;
}

.configuration-card {
  padding: 22px;
  border: 1px solid var(--border);
  background: #fbfdff;
  border-radius: 18px;
  margin-top: 4px;
}

.configuration-card + .configuration-card { margin-top: 16px; }

/*
 * Private has one device, and the prototype puts its fields and the point of
 * sale in a single box. The device card comes from a shared template, so when
 * it lands inside another configuration card it drops its own frame rather
 * than nesting two borders.
 */
.configuration-card .configuration-card {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
}

/* ...and the grid that follows it picks up the row gap the single grid in the
 * prototype would have given. */
#deviceList + .grid { margin-top: 22px; }

.configuration-card h3 {
  margin: 0 0 18px;
  color: var(--dark-blue);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.remove-button {
  border: 0;
  background: transparent;
  color: #b00020;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.secondary-button {
  border: 2px solid var(--blue);
  background: #fff;
  color: var(--dark-blue);
  padding: 12px 18px;
  border-radius: 24px;
  font-weight: 900;
  cursor: pointer;
}

.secondary-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.configuration-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.limit-message {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-weight: 700;
  line-height: 1.4;
}

.capacity-message {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f3f8ff;
  border: 1px solid var(--border);
  color: var(--dark-blue);
  font-weight: 700;
  line-height: 1.4;
}

.capacity-message.visible { display: block; }

.limit-message.is-limit {
  background: var(--soft-limit-bg);
  border-color: var(--soft-limit-border);
  color: var(--soft-limit-text);
}

.hint.is-warning { color: var(--warning-text); font-weight: 800; }
.hint.is-limit { color: var(--soft-limit-text); font-weight: 800; }

/*
 * Form-level validation summary. Sits above the submit button: dangling under
 * a centred button, and unstyled as it was, it read as a stray line of text.
 * JS flips it to `display: block`.
 */
.validation {
  display: none;
  margin: 18px 0 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff5f5;
  border: 1px solid #ffc8c8;
  color: #b00020;
  font-weight: 700;
  line-height: 1.4;
}

.privacy-note {
  margin: 0 0 14px;
  padding: 16px;
  background: #f6f9fd;
  border: 1px solid #e4eefb;
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.privacy-note a {
  color: var(--blue);
  font-weight: 800;
}

/* The footnote for the asterisk after "iPhone" in the intro. */
.contract-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

button.primary {
  border: 0;
  background: var(--pink);
  color: #fff;
  padding: 16px 28px;
  border-radius: 28px;
  font-weight: 900;
  text-transform: none;
  cursor: pointer;
  letter-spacing: .3px;
}

button.primary:hover { background: #b50f69; }

.confirmation {
  padding: 34px;
  border-radius: 18px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  line-height: 1.55;
}

.confirmation h2 {
  color: var(--success-text);
  margin-bottom: 14px;
  font-size: 24px;
}

.confirmation p { margin: 0 0 12px; }
.confirmation p:last-child { margin-bottom: 0; }



.language-selector {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 20;
}

.language-button {
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--dark-blue);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  /* The prototype lets the chip size to its content rather than pinning a
   * minimum width, which is what made this 10px too wide. */
  min-height: 30px;
  justify-content: space-between;
}

.language-button .arrow {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

/*
 * The prototype's menu is a white card floating 8px below the chip, not a lime
 * skirt hanging off it.
 */
.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: #fff;
  color: var(--dark-blue);
  border: 1px solid rgba(0, 92, 169, .12);
  border-radius: 14px;
  padding: 6px 0 8px;
  box-shadow: 0 14px 30px rgba(0, 37, 68, .18);
  display: none;
  overflow: hidden;
  z-index: 1000;
}

.language-selector.open .language-menu { display: block; }

.language-option {
  width: 100%;
  border: 0;
  background: #fff;
  color: var(--dark-blue);
  padding: 10px 13px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.language-option:hover, .language-option.active {
  background: var(--page);
  font-weight: 900;
}

@media (max-width: 760px) {
  .header { width: calc(100% - 24px); max-width: none; }
  .header-inner { min-height: 58px; padding: 10px 12px 10px 18px; }
  .logo .tango-logo-img { width: 96px; }
  .page { max-width: none; margin-top: 22px; padding: 0 12px; }
  .campaign-image { height: 250px; border-radius: 18px; }
  .campaign-art { width: 300px; height: 280px; bottom: -28px; }
  .intro-block { margin-top: 20px; padding: 26px 22px 24px; border-radius: 20px 20px 0 0; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 28px 20px; border-radius: 0 0 20px 20px; }
  h1 { font-size: 28px; margin-bottom: 22px; }
  .section-header { flex-direction: column; }
  .actions { flex-direction: column; }
  .choice-group { grid-template-columns: 1fr; }
  .choice-title { white-space: normal; }
  /* The question stacks: label above, the two options full width below. */
  .radio-question { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .radio-options { width: 100%; min-width: 0; }
  #continuationSection { margin-bottom: 28px; }
  .phone-counter { min-width: 0; }
}

/* ------------------------------------------------------------------ *
 * Live-form states
 * ------------------------------------------------------------------ */

/* Catalogue loading: the device dropdowns come from Zendesk custom objects,
   so the pre-order section is skeletonised until /api/catalog answers. */
.catalog-loading {
  display: grid;
  gap: 12px;
}

.skeleton {
  height: 52px;
  border-radius: 22px;
  background: linear-gradient(90deg, #eaf2fd 25%, #f6faff 37%, #eaf2fd 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.3s ease-in-out infinite;
}

.skeleton.short { width: 55%; height: 18px; border-radius: 9px; }

@keyframes skeleton-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* Blocking notice for the anti-duplication rule and for hard failures. */
.notice {
  padding: 18px 20px;
  border-radius: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.notice h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }

.notice.warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.notice.warning h2 { color: var(--warning-text); }

.notice.error {
  background: var(--error-bg);
  border: 1px solid #ffc8c8;
  color: #b00020;
}

.notice.error h2 { color: #b00020; }

.notice .reference {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* Submit button while the request is in flight. */
button.primary[disabled],
.secondary-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

button.primary .spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

button.primary.is-busy .spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  button.primary .spinner { animation-duration: 2.4s; }
}

/* Preferred language sits with the contact details rather than the header. */
.field select[data-preferred-language] { text-transform: none; }

/* Turnstile widget, only rendered when a site key is configured. */
.turnstile-holder:not(:empty) { margin: 4px 0 20px; }

/* Screen-reader-only live region for validation summaries. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The mockups relied on inline styles for these two; keep them in CSS. */
.limit-message[hidden],
.capacity-message[hidden],
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ *
 * Standalone message pages (duplicate email, submission failure)
 *
 * The prototypes drop the campaign image and intro block for these and show
 * only this alert inside the card, so `.page.is-message` hides both.
 * ------------------------------------------------------------------ */

.page.is-message .campaign-image,
.page.is-message .intro-block {
  display: none;
}

.page.is-message .card {
  border-radius: 24px;
  padding: 44px;
  box-shadow: 0 16px 40px rgba(0, 40, 80, .08);
}

.static-message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  color: var(--dark-blue);
  line-height: 1.5;
}

.static-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 900;
  font-size: 24px;
  flex: 0 0 auto;
}

.static-message h2 {
  margin: 0 0 10px;
  color: var(--pink);
  font-size: 27px;
  line-height: 1.2;
}

.static-message p {
  margin: 0 0 10px;
  font-size: 17px;
}

.static-message p:last-child { margin-bottom: 0; }

/* The same alert above a filled-in form, e.g. when the connection drops. */
.static-message.compact {
  /* Icon beside the text even on a phone, where the page alert stacks. */
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 24px;
  border-radius: 16px;
}

.static-message.compact .static-message-icon {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.static-message.compact h2 {
  margin: 4px 0 0;
  font-size: 19px;
}

.static-message.compact p { margin: 6px 0 0; font-size: 15px; }

.static-message-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* `button.primary` is an element selector, so the anchor needs its own rule. */
.static-message-actions a.primary {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 28px;
  background: var(--pink);
  color: #fff;
  padding: 16px 28px;
  font-weight: 900;
  letter-spacing: .3px;
  text-decoration: none;
}

.static-message-actions a.primary:hover { background: #b50f69; }

.static-message-actions a.secondary {
  color: var(--dark-blue);
  font-weight: 800;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .page.is-message .card { padding: 26px 20px; }
  .static-message { grid-template-columns: 1fr; padding: 22px; }
  .static-message h2 { font-size: 23px; }
  .static-message-actions { flex-direction: column; align-items: flex-start; }
}