/* ==========================================================================
   Mobile Wholesale City × UBreakWeFix — landing page
   Built from Figma "MWC / Desktop - 3" (1440px artboard)
   ========================================================================== */

:root {
  --c-page: #f5f0f0;
  --c-white: #ffffff;
  --c-soft: #fdfbfb;
  --c-card: #f5f5f7;
  --c-ink: #1d1d1f;
  --c-black: #000000;
  --c-muted: #9e9c9c;
  --c-line: #d9d9d9;
  --c-lime: #ceff00;
  --c-lime-hover: #bdeb00;
  --c-red: #ed1818;
  --c-logo-text: #f0f0f0;
  --c-submenu: #f0f0f0;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page-max: 1440px;
  --gutter: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Logos
   -------------------------------------------------------------------------- */

/* Mobile Wholesale City — every measurement scales with font-size */
.logo-mwc {
  display: inline-flex;
  align-items: center;
  gap: 0.1818em;
  padding: 0.909em;
  background: var(--c-black);
  color: var(--c-logo-text);
  font-weight: 600;
  line-height: 1.2727;
  white-space: nowrap;
}
.logo-mwc .accent { color: var(--c-lime); }
.logo-mwc--sm { font-size: 11px; }
.logo-mwc--lg { font-size: 21.284px; }

/* UBreakWeFix */
.logo-ubwf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6943em;
  padding: 0.1734em 0.3613em;
  border: 0.567px solid var(--c-black);
  font-size: 38.829px;
  font-weight: 400;
  line-height: 1.2308;
  color: var(--c-black);
  white-space: nowrap;
}
.logo-ubwf b { font-weight: 700; color: var(--c-red); }

/* --------------------------------------------------------------------------
   Menu
   -------------------------------------------------------------------------- */

.menu {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.menu__inner {
  max-width: var(--page-max);
  height: 72px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.menu__nav {
  align-self: stretch;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

/* Each item spans the full header height so the pointer can travel
   from the link down into its sub menu without losing hover. */
.menu__item {
  flex: 0 1 var(--w);
  display: flex;
  align-items: center;
}

.menu__link {
  flex: 1;
  padding: 16px 10px;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  color: var(--c-black);
  transition: opacity 0.2s ease;
}
.menu__link:hover { opacity: 0.6; }

.menu__icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.05); }

.menu__toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
}
.menu__toggle span {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: #636363;
  transition: transform 0.25s ease, top 0.25s ease;
}
.menu__toggle span:first-child { top: 20px; }
.menu__toggle span:last-child { top: 27px; }
.menu.is-open .menu__toggle span:first-child { top: 23.5px; transform: rotate(45deg); }
.menu.is-open .menu__toggle span:last-child { top: 23.5px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Sub menu (Figma component "Sub Menu")
   Full-width panel that drops below the header. Columns follow the
   component: a 310px lead column, then 199px link columns.

   Like apple.com, all sub menus share one grey backdrop. Moving from menu
   to menu keeps the backdrop open and eases its height to the new sub
   menu, while the old links fade out and the new ones fade in. The
   backdrop only folds away when the pointer leaves the menu. State is set
   by script: .menu.is-mega-open and .is-active on the owning item (a menu
   item or the search button wrapper).
   -------------------------------------------------------------------------- */

:root {
  --mega-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mega-resize: 0.36s;
}

.menu__backdrop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: var(--c-submenu);
  transition: height var(--mega-resize) var(--mega-ease);
}
.menu.is-mega-open .menu__backdrop { height: var(--mega-h, 0px); }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  min-height: var(--h);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Outgoing: fade fast so it is gone before the next one arrives */
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

.mega__inner {
  transform: translateY(-8px);
  transition: transform 0.16s ease;
}

.is-active > .mega {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Incoming: wait for the outgoing fade, then ease in */
  transition: opacity 0.3s ease 0.1s, visibility 0s linear 0s;
}
.is-active > .mega > .mega__inner {
  transform: none;
  transition: transform 0.4s var(--mega-ease) 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .menu__backdrop,
  .mega,
  .mega__inner,
  .is-active > .mega,
  .is-active > .mega > .mega__inner { transition: none; }
}

.mega__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 31px var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 23px;
}

.mega__lead {
  flex: 0 0 var(--lw, 311px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mega__title {
  max-width: 310px;
  padding: 10px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  color: var(--c-black);
}

.mega__store {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-black);
}

.mega__col { flex: 0 0 var(--cw, 199px); }

.mega__heading {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--c-black);
}

.mega ul { list-style: none; margin: 0; padding: 0; }
.mega__col a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-black);
}

.mega__col a,
.mega__store { transition: opacity 0.2s ease; }
.mega__col a:hover,
.mega__store:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Search flyout (apple.com style)
   Opens into the same grey backdrop as the sub menus. The input and the
   links slide in one after another, and the page behind is blurred.
   -------------------------------------------------------------------------- */

.search {
  display: block;
  padding: 40px var(--gutter) 48px;
}

.search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
}

.search__icon { flex: none; }

.search__input {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: var(--c-ink);
}
.search__input::placeholder { color: #86868b; }

/* Clear button: a small grey circle with an x, instead of the browser's blue one */
.search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2386868b'/%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.search__heading {
  margin-top: 32px;
  font-size: 12px;
  line-height: 16px;
  color: #6e6e73;
}

.search__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.search__list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--c-black);
  transition: opacity 0.2s ease;
}
.search__list a:hover,
.search__list a:focus-visible { opacity: 0.6; }

.search__arrow { font-weight: 400; color: #6e6e73; }
.search__section { font-size: 13px; font-weight: 400; color: #86868b; }
.search__empty { padding: 8px 0; font-size: 15px; line-height: 20px; color: #6e6e73; }

/* Staggered entrance: each piece follows the previous by ~35ms. Used by the
   search flyout and every sub menu (script adds .mega__anim and --i). */
.search__anim,
.mega__anim {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.is-active > .mega .search__anim,
.is-active > .mega .mega__anim {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease calc(0.12s + var(--i, 0) * 0.035s),
    transform 0.45s var(--mega-ease) calc(0.12s + var(--i, 0) * 0.035s);
}

/* Live suggestions fade in as you type */
.search__list--results li {
  animation: search-in 0.25s ease both;
  animation-delay: calc(var(--i, 0) * 0.025s);
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Page blur behind any open flyout: sub menus and search */
.page-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(232, 232, 237, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu.is-mega-open + .page-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .search__anim,
  .mega__anim,
  .is-active > .mega .search__anim,
  .is-active > .mega .mega__anim,
  .page-scrim,
  .menu.is-mega-open + .page-scrim { transition: none; }
  .search__list--results li { animation: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cta--card { gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 11px 21px;
  border-radius: 99px;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: -0.37px;
  white-space: nowrap;
  color: var(--c-black);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.btn--primary { background: var(--c-lime); }
.btn--primary:hover { background: var(--c-lime-hover); }

.btn--outline { border: 1px solid var(--c-black); }
.btn--outline:hover { background: var(--c-black); color: var(--c-white); }

.btn--soft { border-color: var(--c-line); }
.btn--soft:hover { background: var(--c-white); color: var(--c-black); border-color: var(--c-black); }

/* --------------------------------------------------------------------------
   Section intro (title / subtitle / CTA)
   -------------------------------------------------------------------------- */

.intro {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intro__title {
  padding: 0 10px;
  font-size: clamp(34px, 4.4445vw, 64px);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.28px;
  color: var(--c-ink);
}

.intro__sub {
  max-width: 866px;
  margin-top: 16px;
  font-size: clamp(18px, 1.9445vw, 28px);
  font-weight: 500;
  line-height: 1.2857;
  letter-spacing: 0.2px;
  color: var(--c-muted);
}

.intro .cta { margin-top: 24px; }

/* Hero variant: tighter title/subtitle gap, full-width subtitle */
.intro--hero .intro__sub { margin-top: 8px; letter-spacing: 0.23px; }
.intro__sub--wide { max-width: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--c-white);
  padding: 53px 0 52px;
}

.hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 66.7px;
  margin-bottom: 30px;
  padding: 0 16px;
}

/* --------------------------------------------------------------------------
   Showcase sections (product "stage")
   Images are placed with Figma coordinates, converted to percentages of a
   1440-wide stage so the composition scales proportionally.
   -------------------------------------------------------------------------- */

.showcase { overflow: hidden; }
.showcase--apple { background: var(--c-white); padding-top: 53px; }
.showcase--smartphone { background: var(--c-soft); padding-top: 25px; }
.showcase--preowned { background: var(--c-white); padding-top: 33px; }

.showcase--apple .stage { margin-top: 44px; }
.showcase--smartphone .stage { margin-top: 12px; }
.showcase--preowned .stage { margin-top: 14px; }

.stage {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  aspect-ratio: var(--sw) / var(--sh);
  overflow: hidden;
}

.stage__img {
  position: absolute;
  left: calc(var(--x) / var(--sw) * 100%);
  top: calc(var(--y) / var(--sh) * 100%);
  width: calc(var(--w) / var(--sw) * 100%);
  height: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards {
  background: var(--c-white);
  padding: 24px max(24px, calc((100% - var(--page-max)) / 2 + 24px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.card {
  --ch: 766;
  position: relative;
  aspect-ratio: 692 / var(--ch);
  overflow: hidden;
  background: var(--c-card);
  container-type: inline-size;
}

.card__text {
  position: absolute;
  z-index: 1;
  top: calc(var(--ty) / var(--ch) * 100%);
  left: 0;
  right: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--c-ink);
}

.card__title {
  font-size: clamp(26px, 5.78cqi, 40px);
  font-weight: 600;
  line-height: 1.2;
}

.card__sub {
  margin-top: 8px;
  font-size: clamp(15px, 2.746cqi, 19px);
  line-height: 1.4737;
  letter-spacing: 0.23px;
}

.card .cta { margin-top: 16px; }

/* Images are anchored to the card's bottom edge, as in the design */
.card__img {
  position: absolute;
  left: calc(var(--x) / 692 * 100%);
  bottom: calc(var(--b) / var(--ch) * 100%);
  width: calc(var(--w) / 692 * 100%);
  height: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  :root { --gutter: 24px; }

  .menu__toggle { display: block; }

  .menu__nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .menu.is-open .menu__nav { opacity: 1; visibility: visible; transform: none; }

  .menu__nav {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .menu__item {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .menu__link {
    position: relative;
    padding: 14px 32px 14px 0;
    font-size: 17px;
    line-height: 21px;
    text-align: left;
  }
  .menu__link:hover { opacity: 1; }

  /* Chevron showing the item expands */
  .menu__link::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 1.5px solid #636363;
    border-bottom: 1.5px solid #636363;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin-top 0.2s ease;
  }
  .menu__item.is-expanded .menu__link::after { margin-top: -2px; transform: rotate(-135deg); }

  /* Sub menu becomes an inline accordion panel */
  .menu__backdrop { display: none; }

  .menu__item .mega,
  .menu__item.is-active .mega {
    position: static;
    display: none;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .menu__item.is-expanded .mega { display: block; }

  .menu__item .mega__inner,
  .menu__item.is-active .mega__inner {
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    transform: none;
    transition: none;
  }
  .mega__lead { flex: none; order: 1; }
  .mega__title { display: none; }
  .mega__col { flex: none; }
  .mega__col a,
  .mega__store { padding: 8px 0; }

  /* Accordion links show straight away, without the desktop cascade */
  .menu__item .mega .mega__anim { opacity: 1; transform: none; transition: none; }

  /* Search flyout keeps its dropdown, with its own background since the
     shared backdrop lives in the collapsed nav */
  .mega--search { background: var(--c-submenu); }
  .search { padding: 24px var(--gutter) 32px; }
  .search__input { font-size: 20px; }
}

@media (max-width: 734px) {
  :root { --gutter: 16px; }

  .logo-mwc--lg { font-size: 14px; }
  .logo-ubwf { font-size: 25px; }

  .hero { padding: 40px 0; }
  .hero__logos { margin-bottom: 24px; }

  .showcase--apple,
  .showcase--smartphone,
  .showcase--preowned { padding-top: 40px; }
  .showcase .stage { margin-top: 24px; }

  .cards {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  /* A taller card leaves room for the copy above the bottom-anchored images */
  .card { --ch: 880; }
  .card__text { padding: 0 16px; }
}

@media (max-width: 400px) {
  .logo-mwc--lg { font-size: 11px; }
  .logo-ubwf { font-size: 20px; }
  .btn { font-size: 15px; padding: 11px 18px; }
}

/* ==========================================================================
   Booking page: Apple Device Repair › iPhone Repair › Battery Replacement
   Layout and colours from Figma "MWC / Page 1" (node 104:1716); sizes and
   spacing follow the apple.com store scale (980px content, 17px body,
   56px form fields, 12px corners).
   ========================================================================== */

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

.booking {
  display: block;
  max-width: calc(980px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 40px var(--gutter) 120px;
  background: var(--c-white);
}
body:has(.booking) { background: var(--c-white); }

/* Apple headline: 32px / 1.125 */
.booking__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: 0.004em;
  color: var(--c-black);
}

/* ---- Device pickers ----
   Figma "Dropdown_device type": label + bold value, and the option list
   opens below inside the same bordered box, floating over the page so the
   layout underneath does not move. Apple 56px field height. */
.pickers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.picker {
  position: relative;
  height: 56px;
}

.dropdown--picker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--c-white);
}
.dropdown.dropdown--picker.is-open {
  z-index: 20;
  border-color: #9e9c9c;
}

.dropdown--picker .dropdown__toggle { padding: 7px 16px; }

.picker__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.picker__label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: #9e9c9c;
}

.picker__value {
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.022em;
  color: var(--c-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown--picker .dropdown__list {
  max-height: min(710px, calc(100vh - 260px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown--picker .dropdown__list li {
  padding: 11px 16px;
  line-height: 22px;
}

/* ---- Two-column body: sticky device image + booking steps ---- */
.booking__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 56px;
}

.booking__media {
  position: sticky;
  top: 96px;
}

/* Device photo frame: Figma 533:774. The photo is fitted inside without
   stretching, so square and portrait photos both work. */
.booking__image {
  position: relative;
  aspect-ratio: 533 / 774;
  overflow: hidden;
}
.booking__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.booking__steps { display: flex; flex-direction: column; }

.step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
}
.step:first-child { margin-top: 0; }
.step--gap-lg { margin-top: 56px; }

.step__head { display: flex; flex-direction: column; gap: 8px; }

/* Apple section headline: 24px / 1.16667 */
.step__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.16667;
  letter-spacing: 0.009em;
  color: var(--c-black);
}

/* Apple body copy: 17px / 1.47059 */
.step__desc {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: #636363;
}

/* ---- Battery option tiles (radio buttons) ---- */
.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid #9e9c9c;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.option:hover { border-color: #636363; }
.option:has(.option__input:checked) {
  border-color: var(--c-black);
  box-shadow: 0 0 0 1px var(--c-black);
}
.option:has(.option__input:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Battery not offered for the chosen model: removed from the list */
.option.is-unavailable { display: none; }

.option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Apple tile title: 17px / 1.23529 semibold */
.option__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.23529;
  letter-spacing: -0.022em;
  color: var(--c-black);
}

.option__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: -0.016em;
  color: #636363;
}

/* Warranty and spec lines: Apple caption 12px / 1.33337 */
.option__caption {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: -0.01em;
}

.option__price {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.23529;
  letter-spacing: -0.022em;
  color: var(--c-black);
  white-space: nowrap;
}

/* ---- Dropdowns (location, date, time): Apple 56px fields ----
   Expand in place like the Figma component; the panel eases open with the
   same curve as the header flyouts. */
.dropdown {
  border: 1px solid #9e9c9c;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.dropdown.is-filled,
.dropdown.is-open { border-color: var(--c-black); }

.dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 15px 16px;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  text-align: left;
  color: var(--c-black);
}
.dropdown__toggle:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -4px; border-radius: 12px; }

.dropdown__value.is-placeholder { color: #9e9c9c; }

.dropdown__chevron {
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform 0.3s var(--mega-ease);
}
.dropdown.is-open .dropdown__chevron { transform: rotate(180deg); }

.dropdown__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mega-resize) var(--mega-ease);
}
.dropdown.is-open .dropdown__panel { grid-template-rows: 1fr; }

.dropdown__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dropdown.is-open .dropdown__inner { opacity: 1; transition: opacity 0.3s ease 0.08s; }

.dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}
.dropdown__list--scroll {
  max-height: 318px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dropdown__list li {
  padding: 13px 16px;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  color: var(--c-black);
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease;
}
.dropdown__list li:hover,
.dropdown__list li:focus-visible { background: #f5f5f7; }
.dropdown__list li[aria-selected="true"] { font-weight: 600; }
.dropdown__list li[aria-disabled="true"] { color: #c7c7c7; cursor: default; background: none; }

/* ---- Calendar ---- */
.calendar { padding: 0 12px 12px; }

.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px;
}

.calendar__month {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.022em;
}

.calendar__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #636363;
  transition: background-color 0.15s ease;
}
.calendar__arrow:hover:not(:disabled) { background: var(--c-submenu); }
.calendar__arrow:disabled { opacity: 0.3; cursor: default; }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.calendar__grid + .calendar__grid { margin-top: 4px; }

.calendar__weekdays span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #6e6e73;
}

.calendar__days > * {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  color: var(--c-black);
}
.calendar__weekdays .is-sunday,
.calendar__days .is-sunday { color: var(--c-red); }

.calendar__days button {
  border-radius: 50%;
  transition: background-color 0.15s ease;
}
.calendar__days button:hover:not(:disabled) { background: var(--c-submenu); }
.calendar__days button[aria-pressed="true"] { background: var(--c-line); }
.calendar__days button:disabled { color: #c7c7c7; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .dropdown__panel,
  .dropdown__inner,
  .dropdown__chevron,
  .option { transition: none; }
}

/* ---- Booking page responsive (Apple steps: 1068px and 734px) ---- */
@media (max-width: 1068px) {
  .booking__title { font-size: 28px; line-height: 1.14286; letter-spacing: 0.007em; }
  .step__title { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }
}

@media (max-width: 1023px) {
  .booking__body {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
  .booking__media { position: static; }
  .booking__image { width: min(100%, 320px); margin: 0 auto; }
}

@media (max-width: 734px) {
  .booking { padding-top: 28px; padding-bottom: 80px; }
  .pickers { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .option { gap: 12px; padding: 13px 14px; }
  .calendar { padding: 0 8px 10px; }
  .calendar__days > * { width: 40px; height: 40px; }
}