/**
 * Auto-generated CSS Custom Properties from MUI Theme
 * Generated: 2026-04-20T18:58:58.967Z
 * Source: src/theme/muiPalette.ts, src/theme/muiTypography.ts, src/constants/constants.ts
 * DO NOT EDIT MANUALLY - Run generate-theme-css.ts to regenerate
 */

:root {
  /* Primary Colors */
  --color-primary: #5A51EC;
  --color-primary-light: #5A51EC;
  --color-primary-dark: #5A51EC;
  --color-primary-contrast: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #E5E4FC;
  --color-secondary-contrast: #5A51EC;

  /* Feedback Colors */
  --color-success: #A4E82D;
  --color-error: #CE1E2C;
  --color-warning: #FFA336;

  /* Foreground Colors */
  --color-fg-default: #191B1E;
  --color-fg-subtle: #5D646F;
  --color-fg-subtler: #89898B;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-on-dark: #FFFFFF;
  --color-fg-on-accent: #000000E0;
  --color-fg-on-light: #000000E0;
  --color-fg-on-inverse: #FFFFFF;
  --color-fg-action-primary: #5A50EB;
  --color-fg-action-accent: #F5C246;
  --color-fg-action-secondary: #E9E8FC;
  --color-fg-feedback-danger: #CE1E2C;
  --color-fg-feedback-success: #067F41;
  --color-fg-feedback-warning: #B35000;
  --color-fg-feedback-information: #0063F9;
  --color-fg-datavis-main: #5E97F2;
  --color-fg-datavis-extra: #EA84C0;

  /* Background Colors */
  --color-bg-full-screen-dark-filter: #000000A0;
  --color-bg-container-default: #FFFFFF;
  --color-bg-container-inverse: #191B1E;
  --color-bg-action-accent: #F5C246;
  --color-bg-action-primary: #5A50EB;
  --color-bg-action-secondary: #E9E8FC;
  --color-bg-surface-low: #F2F3F4;
  --color-bg-surface-default: #F7F7F7;
  --color-bg-selectable-default: #ECEEF1;
  --color-bg-selectable-active: #FFFFFF;
  --color-bg-selectable-filled: #E3E4E7;
  --color-bg-wrapper-default: #F7F7F7;
  --color-bg-wrapper-features: #F7F7F7;
  --color-bg-datavis-empty: #0000000A;
  --color-bg-promote-setup: #5E97F2;
  --color-bg-branding-a: #5E97F2;
  --color-bg-branding-b: #EA84C0;
  --color-bg-branding-c: #4692BF;
  --color-bg-branding-d: #EE845B;
  --color-bg-branding-e: #9CCE70;
  --color-bg-branding-f: #F5C246;
  --color-bg-branding-a-light: #91B8EF;
  --color-bg-branding-b-light: #E3A1C9;
  --color-bg-branding-c-light: #85B1CB;
  --color-bg-branding-d-light: #E1A989;
  --color-bg-branding-e-light: #A6C095;
  --color-bg-branding-f-light: #FFE6A8;
  --color-bg-branding-a-dark: #2472E0;
  --color-bg-branding-b-dark: #C74394;
  --color-bg-branding-c-dark: #347DA8;
  --color-bg-branding-d-dark: #C35413;
  --color-bg-branding-e-dark: #4E812C;
  --color-bg-branding-f-dark: #E5A823;
  --color-bg-branding-grey: #EEEEEE;
  --color-bg-unsorted-brand: #EEECFF;
  --color-bg-unsorted-footer: #030031;

  /* Background Action Colors */
  --color-background-action-primary: #5A51EC;
  --color-background-action-primary-on-dark: #7ED13F;
  --color-background-action-secondary: #E5E4FC;
  --color-background-action-tertiary: #E5F4DC;
  --color-background-container-default: #FFFFFF;
  --color-background-container-dark: #191B1E;
  --color-background-container-high: #ECEEF1;
  --color-background-container-medium: #F7F7F7;
  --color-background-container-credit: #24DB4125;
  --color-background-container-debit: #77C6EE25;
  --color-background-feedback-error: #CE1E2C;
  --color-background-feedback-warning: #FFC8001F;
  --color-background-feedback-danger: rgba(206, 30, 44, 0.08);
  --color-background-promote-account: #8428E5;
  --color-background-promote-boost: #FF28D0;
  --color-background-promote-groove: #EDEDED;
  --color-background-surface-default: #F7F7F7;
  --color-background-surface-default-over: #F7F7F7CC;
  --color-background-surface-high-over: #EAEDF0CC;
  --color-background-surface-dark: #191B1E;
  --color-background-surface-dark-over: #191B1ECC;

  /* Stroke/Border Colors */
  --color-stroke-default: #0000001F;
  --color-stroke-subtle: #00000014;
  --color-stroke-credit: #40BF54;
  --color-stroke-debit: #8FBED6;
  --color-stroke-feedback-error: #CE1E2C;
  --color-stroke-feedback-warning: #CE1E2C;

  /* State Colors */
  --color-state-neutral-hover: #FFFFFF0A;
  --color-state-neutral-pressed: #0000001F;
  --color-state-neutral-focused: #FFFFFF14;
  --color-state-neutral-selected: #0000000A;
  --color-state-primary-hover: rgba(90, 80, 235, 0.08);
  --color-state-primary-pressed: rgba(90, 80, 235, 0.12);
  --color-state-primary-focused: rgba(90, 80, 235, 0.08);
  --color-state-primary-selected: rgba(90, 80, 235, 0.12);
  --color-state-dark-hover: #FFFFFF0A;
  --color-state-dark-pressed: #FFFFFF1F;
  --color-state-dark-focused: #FFFFFF14;
  --color-state-dark-selected: #FFFFFF14;
  --color-state-light-hover: #0000000A;
  --color-state-light-pressed: #0000001F;
  --color-state-light-focused: #00000014;
  --color-state-light-selected: #00000014;

  /* Action Button Colors */
  --color-action-button-background: #E5F4DC;
  --color-action-button-selected: #FFFFFF;
  --color-action-button-hover: rgba(0, 0, 0, 0.04);
  --color-action-button-active: rgba(0, 0, 0, 0.12);
  --color-action-button-focus: rgba(90, 80, 235, 0.08);
  --color-action-button-selected-hover: rgba(0, 0, 0, 0.04);
  --color-action-button-selected-active: rgba(0, 0, 0, 0.12);
  --color-action-button-selective-focus: rgba(90, 80, 235, 0.12);

  /* Spacing */
  --spacing-xxs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 56px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-rounded: 400px;

  /* Layout */
  --header-height: 64px;
  --content-max-width: 800px;
  --sidebar-max-width: 400px;
  --layout-max-width: 1200px;

  /* Breakpoints */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 568px;
  --breakpoint-desktop: 769px;
  --breakpoint-desktop-large: 1920px;

  /* Typography - Font Family */
  --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   Typography Classes (Auto-generated from MUI Theme)
   ============================================================ */
.text-display1 {
  font-weight: 800;
  font-size: 44px;
  line-height: 44px;
}
.text-display2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}
.text-display3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
.text-headline {
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
}
.text-headline-small {
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
}
.text-headline-desktop {
  font-weight: 900;
  font-size: 44px;
  line-height: 44px;
}
.text-title1 {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
.text-title2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.text-title3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}
.text-emphasis1 {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}
.text-emphasis2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.text-emphasis3 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.text-body1 {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.text-body2 {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.text-body3 {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.text-label1 {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.text-label2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}
.text-label3 {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}
.text-link {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.text-body-web {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}
.text-display2-web {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}

/**
 * Backward-Compatible Variable Aliases
 * Maps generated theme variables to legacy names used in component CSS
 *
 * Source: destination-styles.css lines 10-27
 */
:root {
  /* Aliases for background colors */
  --color-bg-default: var(--color-bg-container-default);
  --color-bg-surface: var(--color-bg-surface-default);

  /* Aliases for feedback colors */
  --color-fg-danger: var(--color-fg-feedback-danger);
  --color-fg-success: var(--color-fg-feedback-success);

  /* Aliases for state colors */
  --color-primary-hover: var(--color-state-primary-hover);
  --color-primary-pressed: var(--color-state-primary-pressed);
  --color-primary-selected: var(--color-state-primary-selected);
}


/**
 * Base Styles & Reset
 * Box sizing, body defaults, autofill styles
 *
 * Source: destination-styles.css lines 29-68
 */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: var(--color-bg-surface);
  margin: 0;
  min-height: 100%;
  padding: 0;
  scroll-padding-top: 6rem;
  font-family: var(--font-family);
  color: var(--color-fg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

/* Prevent scroll only when cookie modal is open (backup; JS sets position:fixed + top) */
html.cookie-modal-open,
body.cookie-modal-open, 
html.cookie-banner-open,
body.cookie-banner-open {
  overflow: hidden;
  height: 100%;
}

iframe#webpack-dev-server-client-overlay { display: none; }

/* Autofill Styles */
input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 30px #eceef1 inset !important;
  box-shadow: 0 0 0 30px #eceef1 inset !important;
}
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0 30px #0000000a inset, 0 0 0 30px #0000000a inset, 0 0 0 30px #eceef1 inset !important;
  box-shadow: 0 0 0 30px #0000000a inset, 0 0 0 30px #0000000a inset, 0 0 0 30px #eceef1 inset !important;
}
input[type='password']:hover {
  -webkit-box-shadow: 0 0 0 30px #ced0d3 inset !important;
  box-shadow: 0 0 0 30px #ced0d3 inset !important;
}
input[type='password'] { -webkit-text-security: disc !important; }


/**
 * Typography Classes
 * Text utility classes matching MUI typography variants
 *
 * Source: destination-styles.css lines 70-89
 */
.text-display1 { font-weight: 800; font-size: 44px; line-height: 44px; }
.text-display2 { font-weight: 700; font-size: 40px; line-height: 48px; }
.text-display3 { font-weight: 700; font-size: 24px; line-height: 32px; }
.text-headline { font-weight: 800; font-size: 40px; line-height: 48px; }
.text-headline-small { font-weight: 800; font-size: 32px; line-height: 40px; }
.text-title1 { font-weight: 700; font-size: 20px; line-height: 24px; }
.text-title2 { font-weight: 700; font-size: 16px; line-height: 24px; }
.text-title3 { font-weight: 700; font-size: 14px; line-height: 20px; }
.text-emphasis1 { font-weight: 600; font-size: 20px; line-height: 24px; }
.text-emphasis2 { font-weight: 600; font-size: 16px; line-height: 24px; }
.text-emphasis3 { font-weight: 600; font-size: 14px; line-height: 20px; }
.text-body1 { font-weight: 400; font-size: 16px; line-height: 24px; }
.text-body2 { font-weight: 400; font-size: 14px; line-height: 20px; }
.text-body3 { font-weight: 400; font-size: 12px; line-height: 16px; }
.text-label1 { font-weight: 700; font-size: 16px; line-height: 24px; }
.text-label2 { font-weight: 700; font-size: 14px; line-height: 20px; }
.text-label3 { font-weight: 700; font-size: 12px; line-height: 16px; }


/**
 * Accessibility Utilities
 * Screen reader only, focus styles
 *
 * Source: destination-styles.css lines 1039-1057
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/**
 * Page Wrapper & Split Screen Layout
 * Main layout structure for destination pages
 *
 * Source: destination-styles.css lines 91-157
 */
.destination-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--header-height);
  position: relative;
}

/* Extend sidebar background color to viewport right edge */
.destination-page-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc((100vw - var(--layout-max-width)) / 2 + var(--sidebar-max-width));
  background-color: var(--color-bg-surface-low);
  z-index: 0;
}


.destination-split-screen {
  display: flex;
  flex-direction: row;
  flex: 1;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.destination-main-content {
  flex: 1;
  max-width: var(--content-max-width);
  padding: var(--spacing-md) var(--spacing-lg) 56px var(--spacing-sm); /* Figma main frame: 56px bottom */
}

.destination-sidebar {
  width: var(--sidebar-max-width);
  background-color: var(--color-bg-surface-low);
  padding: 88px 16px 56px 64px; /* React: 32px gray box + 32px aside = 64px total left padding */
}

@media (max-width: 768px) {
  .destination-split-screen {
    flex-direction: column;
  }
  .destination-main-content {
    max-width: 100%;
    padding: var(--spacing-md) var(--spacing-sm) 0 var(--spacing-sm);
  }
  .destination-sidebar {
    display: none !important;
  }
  /* Mobile footer now hidden - using inline checkout instead */
  .destination-page-wrapper {
    padding-bottom: 0; /* No longer need space for sticky footer */
  }
  .destination-page-wrapper::before {
    display: none !important;
    width: 0 !important;
  }
}


/**
 * Banner/Hero Section & Country Title
 * Hero image and country flag/name display
 *
 * Source: destination-styles.css lines 159-252
 */

/* Banner/Hero Section */
.destination-banner {
  width: 100%;
  height: 224px;
  background-size: cover;
  background-position: 0% 0%; /* React: backgroundPosition: '0% 0%' */
  background-repeat: no-repeat; /* React: alternateLayout uses 'no-repeat no-repeat' */
  position: relative;
}

/* Note: Banner height is always 224px in React (headlineBanner.tsx line 24)
   The previous 168px mobile height was incorrect - removed to match React */

/* Country Flag + H1 — Figma "country": column, gap 8px, y offset -40px into banner */
.destination-country-title-wrapper {
}

.destination-country-title-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -64px; /* -40px Figma offset - 24px parent padding-top */
}

.destination-flag-container {
  display: inline-block;
}

.destination-country-flag {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: solid;
  border-color: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
  background-color: white;
}

.destination-country-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-fg-default);
  margin: 0;
}

/* Tablet/Mobile: below 769px */
@media (max-width: 768px) {
  .destination-country-title-row {
    margin-top: -56px; /* -32px Figma offset - 24px parent padding-top */
  }
  .destination-country-flag {
    width: 64px;
    height: 64px;
  }
}

/* SEO H1 Heading — Figma "headline": Figtree 800 32/1.25em */
.destination-h1-heading {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.25em;
  color: #191B1E;
  margin: 0;
}

/* Page Header — Figma: ~32px visual gap between H1 and H2 */
.destination-page-header {
  margin-top: 32px;
  padding: 0;
}

/* H2 — Figma "title 1": Figtree 700 20/1.2em */
.destination-page-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2em;
  color: #191B1E;
  margin: 0 0 8px 0;
}

/* Intro sentence — Figma "body 2": Figtree 400 14/1.43em, color #5D646F */
.destination-page-description {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  color: #5D646F;
  margin: 0;
}


/**
 * Currency Selector
 * Dropdown for currency selection
 *
 * Source: destination-styles.css lines 254-366
 */
.destination-currency-selector {
  display: none; /* Shown via JS for guests and Prospect only; avoids flash before session resolves */
  justify-content: flex-end;
  margin-top: 16px; /* React: mt={isDesktop ? 4 : 0} - 16px on desktop */
  margin-bottom: 16px; /* React: mb={4} = 16px */
  position: relative;
}

/* Mobile/Tablet: below 769px (React isDesktop breakpoint) */
@media (max-width: 768px) {
  .destination-currency-selector {
    margin-top: 0; /* React: mt={isDesktop ? 4 : 0} - 0 on mobile/tablet */
  }
}

.destination-currency-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 40px; /* React: 40px height */
  padding: 3px 5px 0 16px; /* Match production button width */
  background-color: #FFFFFF; /* White background */
  border: 1px solid rgb(137, 137, 139); /* React: 1px solid rgb(137, 137, 139) */
  border-radius: 12px; /* React: 12px */
  font-family: var(--font-family);
  font-weight: 700; /* React label2: 700 (bold) */
  font-size: 14px; /* React label2: 14px */
  line-height: 20px; /* React label2: 20px */
  color: var(--color-primary); /* React: rgb(90, 80, 235) - purple text */
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1); /* React: subtle hover transition */
}

.destination-currency-btn:hover {
  background-color: rgba(0, 0, 0, 0.02); /* React: subtle darkening on hover */
}

.destination-currency-symbol {
  color: inherit; /* Inherit purple from button */
}

.destination-currency-code {
  color: inherit; /* Inherit purple from button */
}

.destination-currency-chevron {
  width: 24px;
  height: 24px;
  color: rgba(0, 0, 0, 0.54); /* React: rgba(0, 0, 0, 0.54) - gray chevron */
  margin-left: 1px; /* Adjust gap between text and chevron */
  margin-top: 1px; /* Adjusted: arrow at 10px from button top */
  margin-right: 2px; /* Adjusted: 8px from right edge */
  transition: transform 0.2s ease;
}

.destination-currency-btn[aria-expanded="true"] .destination-currency-chevron {
  transform: rotate(180deg);
}

.destination-currency-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 264px;
  background-color: var(--color-bg-container-default);
  border-radius: 16px; /* React: 16px */
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; /* MUI elevation */
  z-index: 100;
  overflow: hidden;
  padding: 4px; /* React: 4px */
}

.destination-currency-dropdown.open {
  display: block;
}

.destination-currency-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px; /* React: 48px */
  padding: 6px 16px; /* React: 6px 16px */
  text-align: left;
  background: none;
  border: none;
  border-radius: 12px; /* Rounded options */
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.destination-currency-option:hover {
  background-color: var(--color-state-primary-hover); /* React: rgba(90, 80, 235, 0.08) */
}

.destination-currency-option.selected {
  background-color: rgba(90, 81, 236, 0.2); /* React: rgba(90, 81, 236, 0.2) - 20% opacity */
}

.destination-currency-note {
  padding: 12px 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-fg-subtler);
}


/**
 * Plan Cards
 * eSIM plan selection cards and paper container
 *
 * Source: destination-styles.css lines 367-504
 */

/* Paper/Card Component */
.destination-paper {
  background-color: var(--color-bg-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: none;
}

/* Plan Cards */
.destination-plans-container {
  margin-top: 0; /* Spacing comes from currency selector's margin-bottom */
}

.destination-plans-paper {
  background-color: var(--color-bg-default);
  border-radius: var(--radius-lg);
  padding: 4px;
  box-shadow: none;
}

.destination-plan-card {
  display: flex;
  align-items: flex-start; /* React: align-items: start */
  padding: 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
  height: 88px;
}

.destination-plan-card:hover {
  background-color: var(--color-primary-hover);
}

.destination-plan-card.selected {
  background-color: var(--color-primary-selected);
}

.destination-plan-radio {
  width: 42px; /* React: 42x42 touch target */
  height: 42px;
  margin: -4px 1px 0 -11px; /* React: -4px top to position at 16px from row, -11px left for 9px from edge */
  padding: 9px; /* React: centers 24px SVG in 42px container */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Radio icons - show/hide based on selection state */
.destination-radio-unchecked {
  display: block;
  color: var(--color-fg-subtle);
}

.destination-radio-checked {
  display: none;
}

.destination-plan-card.selected .destination-radio-unchecked {
  display: none;
}

.destination-plan-card.selected .destination-radio-checked {
  display: block;
}

.destination-plan-info {
  flex: 1;
}

.destination-plan-data {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
  margin-bottom: 4px; /* Adjusted to match React validity position */
}

.destination-plan-validity {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
}

/* Unlimited plan: extra text only visible when card is selected (matches React choose plan) */
.destination-plan-unlimited-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-fg-subtle);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.35s ease;
  word-break: break-word;
  overflow-wrap: break-word;
}

.destination-plan-card--unlimited.selected .destination-plan-unlimited-text {
  opacity: 1;
}

/* Unlimited card height transition: taller when selected to show additional text */
.destination-plan-card--unlimited {
  height: 88px;
  transition: height 0.35s ease;
}

.destination-plan-card--unlimited.selected {
  height: 108px;
}

.destination-plan-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
}

/* Discount price styling - inline like React app */
.destination-plan-price-discount {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}

.destination-plan-price-original,
.destination-price-original {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  text-decoration: line-through;
  margin-right: var(--spacing-xxs);
}

.destination-plan-price-discounted,
.destination-price-discounted {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-danger);
}

/* Summary section discount styling */
.destination-summary-total .destination-summary-value {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .destination-plan-card {
    padding: 12px;
    height: 72px;
  }

  .destination-plan-card--unlimited {
    height: 98px;
  }

  .destination-plan-card--unlimited.selected {
    height: 118px;
  }
}


/**
 * Technical Specs Section
 * Figma: "technical specs" frame — card-based grid layout
 */

/* Section container — Figma: 32px gap (main frame) + 24px padding-top (tech specs frame) */
.destination-tech-specs {
  margin-top: 32px;
  padding-top: 24px;
}

/* Section title — Figma "title 1": Figtree 700 20/1.2em, color #191B1E */
.destination-tech-specs-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2em;
  color: #191B1E;
  margin: 0 0 16px 0;
}

/* Cards container — two columns; grid keeps odd last row at half width (vs flex-grow stretch) */
.destination-tech-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Individual card — same surface as body/html (main column is transparent); avoid surface-low (sidebar) which reads darker */
.destination-tech-spec-card {
  min-width: 0;
  background: var(--color-bg-surface);
  border-radius: 16px;
  padding: 24px;
}

/* Feature row inside card — Figma layout_08RTCQ: row, gap 16px */
.destination-tech-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Icon — Figma: 44x44 fixed */
.destination-tech-spec-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.destination-tech-spec-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

/* Text content — Figma layout_84O2ZK: column, gap 4px */
.destination-tech-spec-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label — Figma "emphasis 2": Figtree 600 16/1.5em, color #191B1E */
.destination-tech-spec-label {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5em;
  color: #191B1E;
}

/* Description — Figma "body 2": Figtree 400 14/1.43em, color #5D646F */
.destination-tech-spec-value {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  color: #5D646F;
}

@media (max-width: 768px) {
  .destination-tech-specs {
    display: none;
  }
}


/**
 * Sidebar Summary & Device Compatibility Banner
 * Desktop sidebar with plan summary and checkout
 *
 * Source: destination-styles.css lines 591-739
 */
.destination-sidebar-summary {
  width: 292.5px; /* React: ~292.47px width */
  padding: 24px; /* React: 24px padding */
  border-radius: 16px; /* React: 16px border-radius */
}

.destination-sidebar-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-fg-default);
  margin: 0;
  padding-bottom: 24px; /* React: 24px gap from title to plan data */
}

.destination-sidebar-plan {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 40px; /* React: adjusted to match button position at 156px from card top */
}

.destination-sidebar-plan-info {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap - inline height difference compensates */
}

.destination-sidebar-plan-data {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
}

.destination-sidebar-plan-validity {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
}

.destination-sidebar-plan-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
}

/* Discount pricing in sidebar */
.destination-sidebar-plan-price.has-discount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.destination-sidebar-plan-price .destination-price-original {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  text-decoration: line-through;
}

.destination-sidebar-plan-price .destination-price-discounted {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-danger);
}

/* Checkout button with price */
.destination-checkout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.destination-checkout-text,
.destination-checkout-price {
  font-weight: 700;
}

/* Device Compatibility Banner */
.destination-compat-banner {
  position: relative;
  width: 320px; /* React: 320px width */
  max-width: 320px;
  padding: 24px; /* React: 24px padding all sides */
  background-color: var(--color-bg-default);
  border-radius: 16px; /* React: 16px border-radius */
  margin-top: 16px; /* React: 16px gap from summary card */
  box-sizing: border-box;
}

.destination-compat-content {
  width: 100%;
}

.destination-compat-title {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px; /* React label2 */
  color: var(--color-fg-default);
  margin-bottom: 4px; /* React: 4px gap to description (via Grid item paddingBottom) */
  max-width: 195px; /* React title width: 194.76px */
}

.destination-compat-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  margin: 0 0 18.5px 0; /* Adjusted: match Learn more position */
  max-width: 181px; /* React description width: 181.33px */
}

.destination-compat-link {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  padding: 4px 0; /* React: button has 28px height (20px line-height + 8px padding) */
  color: var(--color-primary);
  text-decoration: none;
}

.destination-compat-link:hover {
  text-decoration: underline;
}

.destination-compat-image {
  position: absolute;
  right: 19px; /* React: mascot at ~205px from left (320 - 205 - 96 = 19px from right) */
  top: 52px; /* React: fixed position 52px from top */
  width: 96px; /* React: 96x96px mascot */
  height: 96px;
}

.destination-compat-image svg {
  width: 100%;
  height: 100%;
}


/**
 * Buttons
 * Primary, secondary, and text buttons
 *
 * Source: destination-styles.css lines 741-782
 */
.destination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 32px;
  background-color: var(--color-primary);
  color: var(--color-fg-on-primary);
  border: none;
  border-radius: 8px; /* React: 8px border-radius */
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.destination-button:hover {
  background-color: #4a42d0;
}

.destination-button:active {
  background-color: #3d36b5;
}

.destination-button-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  height: 40px;
  padding: 0 16px;
}

.destination-button-secondary:hover {
  background-color: var(--color-primary-hover);
}


/**
 * Mobile Inline Checkout & Promo Banner
 * Mobile checkout section and device compatibility promo
 *
 * Source: destination-styles.css lines 784-922
 */

/* Mobile Inline Checkout (matches React's !isDesktop Box mb={4}) */
.destination-mobile-inline-checkout {
  display: none; /* Hidden on desktop */
  margin-bottom: 16px; /* React: mb={4} = 16px */
}

@media (max-width: 768px) {
  .destination-mobile-inline-checkout {
    display: block;
  }
}

/* PromoBannerCompatible - matches React Paper sx={{ margin: '16px 0', width: '100%', padding: '24px' }} */
.destination-mobile-promo-banner {
  margin: 16px 0;
  width: 100%;
  padding: 24px;
  background-color: var(--color-bg-default);
  border-radius: 16px;
  box-sizing: border-box;
}

/* Title row - Grid item mobile={12} pb={1} */
.destination-mobile-promo-banner .destination-promo-title-row {
  padding-bottom: 4px; /* pb={1} = 4px */
}

/* Title - Typography variant="emphasis2" */
.destination-mobile-promo-banner .destination-promo-title {
  display: block;
  font-weight: 600; /* emphasis2: font-weight 600 */
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
}

/* Content row - Description (mobile={8}) + Image (mobile={4}) */
.destination-mobile-promo-banner .destination-promo-content-row {
  display: flex;
  justify-content: space-between;
}

.destination-mobile-promo-banner .destination-promo-text-col {
  flex: 0 0 66.67%; /* 8/12 = 66.67% */
  max-height: 80px; /* React: maxHeight="80px" */
}

.destination-mobile-promo-banner .destination-promo-image-col {
  flex: 0 0 33.33%; /* 4/12 = 33.33% */
  text-align: right;
}

.destination-mobile-promo-banner .destination-promo-image-col img {
  max-width: 100%;
  height: auto;
}

/* Description - Typography variant="body2" */
.destination-mobile-promo-banner .destination-promo-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  margin: 0;
}

/* Learn more row - Grid item mobile={12} */
.destination-mobile-promo-banner .destination-promo-link-row {
  /* Full width row for link */
}

/* Learn more link - Button variant="text" with Typography variant="label2" color="primary" */
.destination-mobile-promo-banner .destination-promo-link {
  display: inline-block;
  font-weight: 700; /* label2: font-weight 700 */
  font-size: 14px;
  line-height: 20px;
  padding: 4px 0; /* React: paddingY: '4px', paddingX: 0 */
  min-height: 24px; /* React: minHeight: '24px' */
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.destination-mobile-promo-banner .destination-promo-link:hover {
  text-decoration: underline;
}

/* Mobile checkout button - matches React PrimaryButton fullWidth */
.destination-mobile-checkout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}

/* Mobile Footer (Legacy - now hidden, using inline checkout instead) */
.destination-mobile-footer {
  display: none !important; /* Hidden - using inline checkout instead */
  position: sticky;
  bottom: 0;
  background-color: var(--color-bg-default);
  padding: var(--spacing-sm);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Promo Banner (generic) */
.destination-promo-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-bg-surface-low);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
}

.destination-promo-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.destination-promo-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-default);
}


/**
 * Loading Skeleton & Error States
 * Loading animations and error displays
 *
 * Source: destination-styles.css lines 924-1037
 */
.destination-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton card styles */
.destination-skeleton-card {
  pointer-events: none;
}

.destination-skeleton-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.destination-skeleton-data {
  width: 60px;
  height: 24px;
}

.destination-skeleton-validity {
  width: 45px;
  height: 20px;
  margin-top: 4px;
}

.destination-skeleton-price {
  width: 50px;
  height: 24px;
}

/* Sidebar skeleton elements */
.destination-skeleton-text-sm {
  width: 60px;
  height: 20px;
}

.destination-skeleton-text-xs {
  width: 45px;
  height: 16px;
}

.destination-skeleton-price-sm {
  width: 50px;
  height: 20px;
}

/* Hide skeleton cards when loaded */
.destination-plans-paper:not(.destination-plans-loading) .destination-skeleton-card {
  display: none;
}

/* Hide skeleton in sidebar when loaded */
.destination-sidebar-summary:not(.destination-sidebar-loading) .destination-skeleton {
  display: none;
}

/* Error State */
.destination-plans-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  text-align: center;
  background-color: var(--color-bg-default);
  border-radius: var(--radius-lg);
}

.destination-error-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-sm);
}

.destination-error-icon svg {
  width: 100%;
  height: 100%;
}

.destination-error-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-fg-default);
  margin: 0 0 var(--spacing-xxs) 0;
}

.destination-error-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  margin: 0 0 var(--spacing-md) 0;
  max-width: 280px;
}

.destination-error-retry {
  width: auto;
  padding: 0 24px;
  height: 40px;
}


/**
 * Site Header
 * Desktop navigation header
 *
 * Source: destination-styles.css lines 1059-1333
 */
.destination-site-header {
  width: 100%;
  height: var(--header-height);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-surface-default);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.destination-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--layout-max-width);
}

.destination-header-left {
  display: flex;
  align-items: center;
  height: 40px;
  margin-left: 16px; /* React BoxWrapper: ml={4} = 16px */
}

.destination-header-nav {
  display: flex;
  align-items: center;
}

.destination-header-right {
  display: flex;
  align-items: center;
  height: 40px;
  margin-right: 16px; /* React BoxWrapper: mr={4} = 16px */
}

.destination-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  text-decoration: none;
  margin-right: 24px; /* React: mr={6} = 24px on desktop */
}

.destination-logo img,
.destination-logo-img {
  width: 96.55px;
  height: 14px;
  display: block;
}

/* Nav links - matches MenuLink styled component */
.destination-nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding-left: 4px;  /* React inner div padding: pl={1} */
  padding-right: 4px; /* React inner div padding: pr={1} */
  margin-right: 16px; /* React MenuLink: mr={4} = 16px */
  color: var(--color-fg-subtle);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0; /* React emphasis3 typography: letterSpacing: '0px' */
  transition: color 0.15s ease;
  box-sizing: content-box; /* Match React Box default box-sizing */
}

.destination-nav-link svg {
  height: 24px;
  margin-right: 2px; /* React MenuLink: marginRight: '2px' */
  stroke-width: 2; /* React MenuLink: strokeWidth: '2' */
}

/* Shop icon is 24px wide in React */
.destination-header-left .destination-nav-link svg {
  width: 24px;
}

/* Help icon is 25px wide in React */
.destination-header-right .destination-nav-link svg {
  width: 25px;
}

/* Override hardcoded SVG colors to inherit from parent */
.destination-nav-link svg path[fill]:not([fill="none"]) {
  fill: currentColor;
}
.destination-nav-link svg path[stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

.destination-nav-link:hover {
  color: var(--color-bg-action-primary);
  text-decoration: underline;
}

.destination-nav-link.active {
  color: var(--color-bg-action-primary);
}

/* Sign In Button - matches BoxButton styled component */
.destination-sign-in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px; /* from React computed styles */
  margin-right: 16px; /* from React computed styles - keeps spacing consistent */
  background-color: var(--color-fg-action-secondary); /* #E9E8FC */
  color: var(--color-fg-action-primary); /* #5A50EB */
  border: none;
  border-radius: 8px; /* from React computed styles */
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.destination-sign-in-btn:hover {
  background: linear-gradient(0deg, var(--color-state-neutral-hover) 0%, var(--color-state-neutral-hover) 100%), var(--color-bg-action-secondary);
}

.destination-sign-in-btn:focus {
  background: linear-gradient(0deg, var(--color-state-neutral-focused) 0%, var(--color-state-neutral-focused) 100%), var(--color-bg-action-secondary);
}

.destination-sign-in-btn:active {
  background: linear-gradient(0deg, var(--color-state-neutral-pressed) 0%, var(--color-state-neutral-pressed) 100%), var(--color-bg-action-secondary);
}

/* Account icon in sign-in button (hidden by default, shown when authenticated) */
/* Higher specificity to override .destination-header-right .destination-nav-link svg rule */
.destination-sign-in-btn .destination-account-icon,
.destination-header-right .destination-account-link .destination-account-icon {
  width: 20px !important;  /* React computed: 20x20 for Account icon */
  height: 20px !important;
  margin-right: 2px;
  flex-shrink: 0;
}

/* Account link style when authenticated - matches nav link style */
.destination-account-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding-left: 4px;  /* React inner Box: pl={1} = 4px */
  padding-right: 4px; /* React inner Box: pr={1} = 4px */
  margin-right: 16px; /* React MenuLink: mr={4} = 16px */
  color: var(--color-fg-subtle);
  text-decoration: none;
  font-family: var(--font-family);
  font-weight: 600; /* React emphasis3 typography: font-weight 600 */
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0; /* React emphasis3 typography */
  background: none;
  border: none;
  box-sizing: content-box; /* Match React Box default */
  transition: color 0.15s ease;
}

.destination-account-link:hover {
  color: var(--color-bg-action-primary);
  text-decoration: underline;
}

/* My eSIMs link styling (hidden by default, shown when authenticated) */
.destination-my-esims-link {
  /* Inherits from .destination-nav-link */
}

/* My eSIMs icon is 24x24 in React (not 25px like Help icon) */
.destination-my-esims-link svg {
  width: 24px !important;
  height: 24px;
}

/* Language Selector - matches LangButton styled component */
.destination-lang-selector {
  position: relative;
}

.destination-lang-btn {
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;
  min-width: 89px; /* match React button width */
  padding: 4px 5px; /* from React computed styles */
  margin-right: 8px; /* React LangButton: marginRight: theme.spacing(2) = 8px */
  background: none;
  border: none;
  color: var(--color-fg-subtle);
  font-family: var(--font-family);
  font-weight: 700; /* React computed: 700 */
  font-size: 14px;
  line-height: 24.5px; /* React computed */
  cursor: pointer;
  transition: color 0.15s ease;
}

.destination-lang-btn .destination-lang-text {
  flex: 1;
  text-align: center;
}

/* Globe icon (first svg) - matches MUI startIcon margins */
.destination-lang-btn > svg:first-child {
  margin-left: -2px;
  margin-right: 8px;
}

/* Chevron icon (last svg) - matches MUI endIcon margins */
.destination-lang-btn > svg:last-child {
  margin-left: 8px;
  margin-right: -2px;
}

.destination-lang-btn:hover {
  color: var(--color-bg-action-primary);
}

.destination-lang-btn svg {
  width: 24px;
  height: 24px;
}

.destination-lang-chevron {
  width: 24px !important;
  height: 24px !important;
}

/* Legacy dropdown styles removed - now using modal instead */
/* See .destination-lang-modal-* styles in _language-modal.css */

/* Tablet breakpoint (568px - 768px) - responsive header adjustments */
@media (max-width: 768px) and (min-width: 568px) {
  /* Add tablet padding to header inner (React: pr={isTablet ? 4 : 0}, pl={isTablet ? 4 : 0}) */
  .destination-header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* React logo has marginRight: '16px' on tablet breakpoint */
  .destination-logo {
    margin-right: 16px;
  }
}

/* Mobile breakpoint (below 568px) - hide entire header like React app */
@media (max-width: 567px) {
  .destination-site-header {
    display: none;
  }
  .destination-page-wrapper {
    padding-top: 0;
  }
}


/**
 * Site Footer
 * Footer with branding, links, and social
 *
 * Source: destination-styles.css lines 1335-1524
 */
.destination-site-footer {
  background-color: #191B1E;
  padding: 80px var(--spacing-sm) 80px; /* React: paddingTop 80px, paddingBottom 80px on desktop */
  min-height: 588px; /* React: minHeight 588px */
  margin-top: auto;
  position: relative;
  z-index: 1;
}

/* Mobile: below 568px (React isMobile breakpoint = breakpoints.down('tablet')) */
@media (max-width: 567px) {
  .destination-site-footer {
    padding-bottom: 100px; /* React: paddingBottom: isMobile ? '100px' : '80px' */
  }
}

.destination-footer-inner {
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  width: 100%;
}

.destination-footer-content {
  display: flex;
  flex-direction: column;
  gap: 0; /* React uses margin on brand section, not gap */
}

@media (min-width: 769px) {
  .destination-footer-content {
    flex-direction: row;
    justify-content: flex-start; /* React: items flow naturally, not space-between */
    gap: 0; /* React: no gap between brand and columns on desktop */
    padding-bottom: 80px; /* React: content area is 384px */
  }
}

.destination-footer-brand {
  flex-shrink: 0;
  margin-bottom: 80px; /* React: mb={20} = 80px */
}

@media (min-width: 769px) {
  .destination-footer-brand {
    width: 560px; /* React: brand area is 560px */
    min-height: 304px; /* React: brand section is 304px tall */
  }
}

.destination-footer-title {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #FFFFFF;
  margin: 0 0 32px 0; /* React computed: 32px */
}

/* NOTE: React siteFooter does NOT hide title, badges, or social on mobile.
   They remain visible at all screen sizes. Previous hiding rule was incorrect. */

.destination-footer-badges {
  display: flex;
  gap: 16px; /* React computed: 16px margin-right */
  margin-bottom: 32px; /* React computed: 32px */
}

.destination-footer-badge {
  height: 45px; /* React: badges are 45px tall */
}

.destination-footer-badge img {
  height: 100%;
  width: auto;
}

.destination-footer-social {
  display: flex;
  gap: 16px; /* React computed: 16px margin-right */
  margin-bottom: 16px; /* React computed: 16px */
}

.destination-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: opacity 0.15s ease;
}

.destination-footer-social a:hover {
  opacity: 0.8;
}

.destination-footer-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.destination-footer-support {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  margin: 0;
}

.destination-footer-support a {
  display: inline-block;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  padding: 4px 0;
}

.destination-footer-columns {
  display: flex;
  flex-direction: row; /* React: columns are side by side even on mobile */
  gap: 0; /* React uses margin-right on each column's content, not gap */
  margin-top: 0; /* Spacing comes from brand's margin-bottom */
  margin-bottom: 80px; /* React: mb={20} = 80px - for space to copyright */
}

.destination-footer-column {
  width: 50%; /* React: width: 50% on mobile */
  min-width: 0; /* Allow shrinking */
  padding-right: 36px; /* React: mr={9} = 36px spacing between columns */
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .destination-footer-column {
    width: 292px; /* React: width: 292px on desktop */
  }
}

.destination-footer-column-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  margin: 0 0 16px 0; /* React computed: 16px */
}

.destination-footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px; /* React computed: 16px margin-bottom on each link */
}

.destination-footer-link {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.15s ease;
  display: inline-block;
  min-height: 24px;
  padding: 4px 0; /* React: paddingY: 4px - makes total height 28px */
}

.destination-footer-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Footer button styled as link */
.destination-footer-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
}

.destination-footer-copyright {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  margin-top: 0; /* Spacing comes from columns' margin-bottom */
  margin-bottom: 0;
}


/**
 * Mobile Bottom Navigation
 * Bottom navigation bar for mobile
 *
 * Source: destination-styles.css lines 1526-1593
 */
.destination-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  background-color: #FFFFFF; /* MUI BottomNavigation default is white */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 999;
  padding: 0; /* React: BottomNavigation has no container padding */
}

/* React: MobileNav isVisible={isMobile}, where isMobile = breakpoints.down('tablet') = < 568px */
@media (max-width: 567px) {
  .destination-mobile-nav {
    display: flex;
    justify-content: center; /* React: BottomNavigation centers items */
    align-items: stretch;
  }
}

.destination-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px; /* React computed: 100px per item */
  height: 88px; /* React computed: 88px */
  padding: 0 12px; /* React computed: 0px 12px */
  color: var(--color-fg-subtle);
  text-decoration: none;
  transition: color 0.15s ease;
}

.destination-mobile-nav-item:hover,
.destination-mobile-nav-item.active {
  color: var(--color-bg-action-primary);
}

.destination-mobile-nav-item svg {
  width: 24px;
  height: 24px;
}

/* React icons use both fill and stroke, inherit color from parent */
.destination-mobile-nav-item svg path[fill="currentColor"] {
  fill: currentColor;
}

.destination-mobile-nav-item svg path[stroke="currentColor"] {
  stroke: currentColor;
}

/* For icons with fill="none", don't override */
.destination-mobile-nav-item svg path[fill="none"] {
  fill: none;
}

.destination-mobile-nav-item span {
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  margin-top: 4px; /* React: marginTop: '4px' in getLabelStyles */
}


/**
 * Chat Trigger Button
 * Floating action button for live chat
 *
 * Source: destination-styles.css lines 1595-1653
 */
.destination-chat-trigger {
  display: none; /* Hidden until chat is initialized */
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-bg-action-secondary); /* #E9E8FC - matches MUI theme.palette.custom.bg.action.secondary */
  color: var(--color-fg-action-primary); /* #5A50EB - matches MUI theme.palette.custom.fg.action.primary */
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: background-color 0.15s ease;
}

.destination-chat-trigger:hover {
  background-color: #dddcf7;
}

.destination-chat-trigger:active {
  background-color: #d1d0f2;
}

.destination-chat-trigger svg {
  width: 24px;
  height: 24px;
}

/* Tablet: Move further from right edge, keep bottom: 40px since no mobile nav */
@media (max-width: 768px) {
  .destination-chat-trigger {
    right: 32px;
  }
}

/* Mobile: When mobile nav is visible, position above it */
@media (max-width: 567px) {
  .destination-chat-trigger {
    bottom: 104px; /* Above mobile nav (88px height + 16px spacing) */
    right: 32px;
  }
}

/* Hide CXone default chat button - we use our own trigger */
[data-selector="GUIDE_CHANNEL_BUTTON"],
.ChannelButton_ChannelButton__hBWsf,
.ChannelButton_Container__YBsRx {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/**
 * Plan Details Button & Modal
 * Mobile plan details button and modal
 *
 * Source: destination-styles.css lines 1655-1912
 */

/* Plan Details Button (mobile/tablet only) */
.destination-plan-details-button-wrapper {
  display: none; /* Hidden on desktop (>= 769px) */
  margin-top: 16px; /* React: mt={4} = 16px */
}

@media (max-width: 768px) {
  .destination-plan-details-button-wrapper {
    display: block;
  }
}

.destination-plan-details-btn {
  /* MUI text button primary styling (label2 typography) */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700; /* React label2: fontWeight 700 */
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-bg-action-primary);
  padding: 4px 5px; /* React computed: 4px 5px */
  /* No negative margin - button aligns with content naturally in React */
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.destination-plan-details-btn:hover {
  background-color: rgba(93, 100, 111, 0.04);
}

.destination-plan-details-btn:focus {
  outline: 2px solid var(--color-bg-action-primary);
  outline-offset: 2px;
}

/* Plan Details Modal */
.destination-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1300; /* Above header (z-index: 999) */
  padding: 32px; /* Desktop: MUI Dialog default */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.destination-modal-overlay.open {
  display: flex;
  justify-content: center;
  align-items: center; /* React MuiDialog-scrollPaper: centers vertically */
}

/* Mobile: modalPlanDetailsStyles uses margin: 0 and maxWidth: 414px */
@media (max-width: 567px) {
  .destination-modal-overlay {
    padding: 0; /* React mobile: no padding on overlay */
  }
  
  .destination-modal-overlay.open {
    align-items: center; /* Keep centered */
  }
}

.destination-modal-content {
  background-color: var(--color-bg-surface-default);
  border-radius: 16px;
  width: 100%;
  max-width: 480px; /* Desktop: modalPlanDetailsStyles desktop maxWidth */
  padding: 24px;
  margin: 0;
  position: relative;
  max-height: calc(100% - 64px); /* MUI Dialog scroll=paper */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 
              0 24px 38px 3px rgba(0,0,0,0.14), 
              0 9px 46px 8px rgba(0,0,0,0.12);
}

/* Mobile: modalPlanDetailsStyles mobile uses maxWidth: 414px, margin: 0 */
@media (max-width: 567px) {
  .destination-modal-content {
    max-width: 414px; /* React: modalPlanDetailsStyles mobile maxWidth */
    max-height: 100%; /* React: modalPlanDetailsStyles mobile maxHeight */
    margin: 0; /* React: modalPlanDetailsStyles mobile margin */
  }
}

/* Modal Header Section - wraps entire header with pb={6} = 24px */
.destination-modal-header-section {
  padding-top: 8px; /* Extra top spacing to match React modal internal padding */
  padding-bottom: 24px; /* React: pb={6} = 24px */
}

/* Modal Header Row - matches React Grid layout: 8/12 empty + 4/12 close button */
.destination-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px; /* React: mb={2} = 8px on grid items */
}

/* Empty space for title area (8/12 columns) */
.destination-modal-header-left {
  flex: 0 0 66.66%; /* 8/12 columns */
  min-height: 30px; /* Match close button height for alignment */
}

/* Close button area (4/12 columns) */
.destination-modal-header-right {
  flex: 0 0 33.33%; /* 4/12 columns */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Plan details placeholder row - empty but takes space with mb={2} */
.destination-modal-plan-details {
  margin-bottom: 8px; /* React: mb={2} = 8px */
}

/* Close button matching React's CloseButton SVG style */
.destination-modal-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.destination-modal-close-btn:hover {
  opacity: 0.8;
}

.destination-modal-close-btn:focus {
  outline: 2px solid var(--color-stroke-default);
  outline-offset: 1px;
}

/* Modal Description - inside header-section, no margin (pb comes from wrapper) */
.destination-modal-description {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-fg-subtle);
  margin: 0; /* No margin - padding comes from .destination-modal-header-section pb={6} */
}

/* Modal Technical Specs */
.destination-modal-tech-specs {
  background-color: var(--color-bg-surface-default);
}

.destination-modal-tech-specs-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-fg-default);
  margin: 0 0 16px 0; /* React: mb={4} = 16px */
}

.destination-modal-tech-specs-content {
  background-color: var(--color-bg-default);
  border-radius: 16px;
  padding: 16px;
}

.destination-modal-tech-spec-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px; /* React: mb={8} = 32px */
}

.destination-modal-tech-spec-item:last-child {
  margin-bottom: 0;
}

/* First 3 items have 48px height, last 2 have 68px height */
.destination-modal-tech-spec-item:nth-child(-n+3) {
  min-height: 48px;
}

.destination-modal-tech-spec-item:nth-child(n+4) {
  min-height: 68px;
}

.destination-modal-tech-spec-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding-right: 16px; /* React: paddingRight: '16px' */
  box-sizing: content-box;
}

.destination-modal-tech-spec-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

.destination-modal-tech-spec-text {
  display: flex;
  flex-direction: column;
}

.destination-modal-tech-spec-label {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-fg-default);
}

.destination-modal-tech-spec-value {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-fg-subtle);
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}


/**
 * Language Modal
 * Language selection modal
 *
 * Source: destination-styles.css lines 1914-2110
 */

/* Language Modal Overlay - matches BaseModal Dialog */
.destination-lang-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1300; /* Above header (z-index: 999) */
  padding: 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.destination-lang-modal-overlay.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile: modalPaperStyles mobile layout - bottom sheet style */
@media (max-width: 567px) {
  .destination-lang-modal-overlay {
    padding: 0;
    align-items: flex-end; /* Position at bottom on mobile */
  }
  
  .destination-lang-modal-overlay.open {
    align-items: flex-end;
  }
}

/* Language Modal Content - matches modalPaperStyles */
.destination-lang-modal-content {
  background-color: var(--color-bg-surface-default); /* React: theme.palette.custom.background.surface.default */
  border-radius: 16px;
  width: 480px; /* React: modalPaperStyles desktop width */
  max-width: 100%;
  padding: 24px; /* React: modalPaperStyles padding = '24px' */
  margin: 0;
  position: relative;
  max-height: calc(100% - 64px);
  overflow-y: auto;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 
              0 24px 38px 3px rgba(0,0,0,0.14), 
              0 9px 46px 8px rgba(0,0,0,0.12);
}

/* Mobile: Bottom sheet style matching React modalPaperStyles mobile */
@media (max-width: 567px) {
  .destination-lang-modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin-top: 32px; /* React: marginTop: '32px' */
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border-bottom-left-radius: 0; /* React: borderBottomLeftRadius: '0' */
    border-bottom-right-radius: 0; /* React: borderBottomRightRadius: '0' */
  }
}

/* Modal Title - matches DialogTitle with title1 typography */
.destination-lang-modal-title {
  font-weight: 700; /* React: title1 font-weight */
  font-size: 20px; /* React: title1 font-size */
  line-height: 24px; /* React: title1 line-height */
  color: var(--color-fg-default);
  margin: 0;
  padding: 0;
  margin-bottom: 24px; /* React: mb: LAYOUT_SPACERS.MEDIUM = 24px */
}

/* Language Options Container - matches Paper with p: '4px' */
.destination-lang-options-container {
  background-color: var(--color-bg-container-default); /* React: Paper white background */
  border-radius: 16px;
  padding: 4px; /* React: Paper p: '4px' */
}

/* Language Option Row - matches GridComponent styled component */
.destination-lang-option-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 72px; /* React: height={'72px'} */
  padding: 24px 12px; /* React: padding={'24px 12px'} */
  border-radius: 12px; /* React: borderRadius: '12px' */
  cursor: pointer;
  transition: background-color 0.15s ease;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

/* Unselected option hover/focus states - matches unSelectedPlanStyling */
.destination-lang-option-row:hover {
  background-color: var(--color-state-primary-hover); /* React: theme.palette.custom.state.primary.hover */
}

.destination-lang-option-row:active {
  background-color: var(--color-state-primary-pressed); /* React: theme.palette.custom.state.primary.pressed */
}

.destination-lang-option-row:focus {
  background-color: var(--color-state-primary-focused); /* React: theme.palette.custom.state.primary.focused */
  outline: none;
}

/* Selected option styling - matches selectedPlanStyling */
.destination-lang-option-row.selected {
  background-color: var(--color-state-primary-selected); /* React: theme.palette.custom.state.primary.selected */
  position: relative;
  overflow: hidden;
}

/* Selected option with hover overlay - matches ::before pseudo-element */
.destination-lang-option-row.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.destination-lang-option-row.selected:hover::before {
  background: var(--color-state-primary-hover);
  opacity: 1;
}

.destination-lang-option-row.selected:active::before {
  background: var(--color-state-primary-pressed);
  opacity: 1;
}

.destination-lang-option-row.selected:focus::before {
  background: var(--color-state-primary-focused);
  opacity: 1;
}

/* Radio Icon Container - matches Grid item with icon */
.destination-lang-radio-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px; /* React: marginRight: '12px' */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1; /* Above ::before overlay */
}

/* Unchecked radio circle - matches MUI Radio default */
.destination-lang-radio-unchecked {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-fg-subtle);
  border-radius: 50%;
  box-sizing: border-box;
}

.destination-lang-option-row.selected .destination-lang-radio-unchecked {
  display: none;
}

/* Checked radio icon - matches CheckIcon SVG */
.destination-lang-radio-checked {
  display: none;
  width: 24px;
  height: 24px;
}

.destination-lang-option-row.selected .destination-lang-radio-checked {
  display: block;
}

/* Language Name - matches Typography emphasis2 */
.destination-lang-option-name {
  font-weight: 600; /* React: emphasis2 font-weight */
  font-size: 16px; /* React: emphasis2 font-size */
  line-height: 24px; /* React: emphasis2 line-height */
  color: var(--color-fg-default);
  flex: 1;
  position: relative;
  z-index: 1; /* Above ::before overlay */
}


/**
 * Cookie Consent Banner
 * Matches React: CookieTrigger (full-screen dark overlay) + CookiePreferences (centered card).
 * - Full-screen overlay: theme.palette.custom.bg.fullScreen.darkFilter = #000000A0
 * - Centered card: ContentWidths.Small (480px), BORDERS.LARGE (16px), LAYOUT_SPACERS.SMALL (16px) padding
 * - One line of text (body2, fg.subtle), Cookie Settings (secondary) + Allow All (primary)
 */

.destination-cookie-banner {
  display: none; /* Hidden by default, shown via JS */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* React: CookieTrigger zIndex 1000 */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.destination-cookie-banner.visible {
  display: block;
  opacity: 1;
}

/* Full-screen dark overlay - matches React CookieTrigger backgroundColor; card has 32px top margin (React mt={8} = 32px) */
.destination-cookie-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100%;
  background-color: #000000A0; /* theme.palette.custom.bg.fullScreen.darkFilter */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 12px 0; /* 32px top to match React, 12px sides */
  box-sizing: border-box;
}

/* Centered card - matches React CookiePreferences Box (maxWidth ContentWidths.Small, padding LAYOUT_SPACERS.SMALL) */
.destination-cookie-banner-content {
  background-color: var(--color-bg-container-default);
  border-radius: 16px; /* BORDERS.LARGE */
  padding: 16px; /* LAYOUT_SPACERS.SMALL */
  max-width: 480px; /* ContentWidths.Small */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.destination-cookie-text {
  font-weight: 400;
  font-size: 14px; /* body2 */
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-fg-subtle);
  margin: 0 0 32px 0; /* React: mb={LAYOUT_SPACERS.LARGE} then mb={2} mt={2} on inner Box */
}

.destination-cookie-link {
  color: var(--color-fg-subtle);
  text-decoration: underline;
}

.destination-cookie-link:hover {
  opacity: 0.8;
}

/* Button row - matches React: justifyContent space-between, Cookie Settings left, Allow All right; mobile column-reverse */
.destination-cookie-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px; /* LAYOUT_SPACERS.SMALL between buttons */
}

/* Secondary Button - matches React SecondaryButton (Cookie Settings) */
.destination-cookie-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px; /* size="small" */
  background: var(--color-bg-action-secondary);
  border: none;
  border-radius: 8px; /* BORDERS.SMALL */
  padding: 0 16px;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-action-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.destination-cookie-btn-secondary:hover {
  background: linear-gradient(0deg, var(--color-state-neutral-hover) 0%, var(--color-state-neutral-hover) 100%), var(--color-bg-action-secondary);
}

.destination-cookie-btn-secondary:focus {
  outline: 2px solid var(--color-fg-action-primary);
  outline-offset: 2px;
}

/* Primary Button - matches React PrimaryButton (Allow All) */
.destination-cookie-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--color-bg-action-primary);
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-on-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.destination-cookie-btn-primary:hover {
  background: linear-gradient(0deg, var(--color-state-primary-hover) 0%, var(--color-state-primary-hover) 100%), var(--color-bg-action-primary);
}

.destination-cookie-btn-primary:focus {
  outline: 2px solid var(--color-fg-action-primary);
  outline-offset: 2px;
}

/* Mobile: Stack buttons column-reverse (Allow All on top, Cookie Settings below) - matches React flexDirection={isMobile ? 'column-reverse' : 'row'} */
@media (max-width: 567px) {
  .destination-cookie-banner-overlay {
    padding: 32px 16px;
  }

  .destination-cookie-buttons {
    flex-direction: column-reverse;
    width: 100%;
  }

  .destination-cookie-btn-secondary,
  .destination-cookie-btn-primary {
    width: 100%;
  }
}


/**
 * Cookie Settings Modal
 * Cookie preferences management modal
 *
 * Source: destination-styles.css lines 2296-2466
 */

.destination-cookie-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.destination-cookie-modal-overlay.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

.destination-cookie-modal-content {
  background-color: var(--color-bg-container-default); /* React: bg.container.default = #FFFFFF */
  border-radius: 16px;
  padding: 24px; /* React: modalPaperStyles padding */
  max-width: 544px; /* React: maxWidth: '544px' */
  width: 100%;
  margin: 32px; /* React: margin: isMobile ? '0px' : '32px' */
  margin-left: 16px; /* React: marginLeft: LAYOUT_SPACERS.SMALL */
  margin-right: 16px; /* React: marginRight: LAYOUT_SPACERS.SMALL */
  position: relative;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2),
              0 24px 38px 3px rgba(0,0,0,0.14),
              0 9px 46px 8px rgba(0,0,0,0.12);
}

.destination-cookie-modal-title {
  font-weight: 700;
  font-size: 20px; /* React: title1 = 20px */
  line-height: 24px; /* React: title1 line-height */
  letter-spacing: 0;
  color: var(--color-fg-default);
  margin: 0 0 32px 0; /* React: mb={LAYOUT_SPACERS.LARGE} = 32px */
}

.destination-cookie-modal-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  margin: 0 0 32px 0; /* React: mb={LAYOUT_SPACERS.LARGE} = 32px */
}

/* Cookie Category Section */
.destination-cookie-category {
  margin-bottom: 32px; /* React: mb={LAYOUT_SPACERS.LARGE} = 32px */
}

.destination-cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px; /* React: mb={1} = 4px */
}

.destination-cookie-category-title {
  font-weight: 600; /* React: emphasis2 */
  font-size: 16px;
  line-height: 24px;
  color: var(--color-fg-default);
}

.destination-cookie-always-active {
  font-weight: 700; /* React: label2 */
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-action-primary);
  min-width: 100px;
  text-align: right;
}

.destination-cookie-category-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-subtle);
  margin: 0;
}

/* Toggle Switch - matches React RadioSwitch */
.destination-cookie-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.destination-cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.destination-cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-fg-subtle);
  border-radius: 24px;
  transition: background-color 0.3s ease;
}

.destination-cookie-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.destination-cookie-switch input:checked + .destination-cookie-slider {
  background-color: var(--color-bg-action-primary);
}

.destination-cookie-switch input:checked + .destination-cookie-slider::before {
  transform: translateX(24px);
}

.destination-cookie-switch input:focus + .destination-cookie-slider {
  outline: 2px solid var(--color-fg-action-primary);
  outline-offset: 2px;
}

/* Modal Buttons - matches React CookieSettingsModal: Reset (left), Save (right); mt={4} = 32px */
.destination-cookie-modal-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px; /* React: mt={4} = 32px */
}

/* Reset Settings - text button (matches React InlineTextButton) */
.destination-cookie-modal-buttons .destination-cookie-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  height: auto;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-fg-action-primary);
  cursor: pointer;
}

.destination-cookie-modal-buttons .destination-cookie-btn-text:hover {
  background: transparent;
}

.destination-cookie-modal-buttons .destination-cookie-btn-text:focus {
  outline: 2px solid var(--color-fg-action-primary);
  outline-offset: 2px;
}

/* Save button in modal uses secondary style (matches React CookieSettingsModal: SecondaryButton for Save) */
.destination-cookie-modal-buttons .destination-cookie-btn-primary {
  background: var(--color-bg-action-secondary);
  color: var(--color-fg-action-primary);
}

.destination-cookie-modal-buttons .destination-cookie-btn-primary:hover {
  background: linear-gradient(0deg, var(--color-state-neutral-hover) 0%, var(--color-state-neutral-hover) 100%), var(--color-bg-action-secondary);
}

/* Mobile: Stack modal buttons - matches React flexDirection={isMobile ? 'column-reverse' : 'row'} */
@media (max-width: 567px) {
  .destination-cookie-modal-content {
    margin: 0;
    margin-left: 16px;
    margin-right: 16px;
    max-width: calc(100% - 32px);
  }

  .destination-cookie-modal-buttons {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .destination-cookie-modal-buttons .destination-cookie-btn-text,
  .destination-cookie-modal-buttons .destination-cookie-btn-primary {
    width: 100%;
  }
}