/*!
 * Explorio V10000+ Application CSS
 * File: public_html/assets/app.css
 * Responsibility: application shell, navigation, search, discovery, planner,
 * destination pages, comparisons, account, reports, commercial, admin,
 * async states and responsive component presentation.
 * Version: 10000.27.0
 */

@layer components, pages, states, responsive, print;

@layer components {
  /* Application shell */
  .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--color-canvas);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    border-block-end: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(18px);
  }

  .site-header__inner {
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-weight: var(--font-weight-extrabold);
    text-decoration: none;
  }

  .brand__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(135deg, var(--color-brand-600), var(--color-accent-400));
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
  }

  .brand__text {
    display: grid;
    line-height: 1;
  }

  .brand__eyebrow {
    color: var(--color-text-subtle);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .site-nav__link,
  .site-nav__trigger {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    padding-inline: var(--space-4);
    text-decoration: none;
  }

  .site-nav__link:hover,
  .site-nav__trigger:hover,
  .site-nav__link[aria-current="page"] {
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .mega-menu {
    position: absolute;
    inset-inline: var(--page-gutter);
    inset-block-start: calc(100% + var(--space-2));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-elevated);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
  }

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

  .mega-menu__group {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }

  .mega-menu__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .icon-button {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .icon-button:hover {
    background: var(--color-surface-muted);
  }

  .mobile-nav-trigger {
    display: none;
  }

  /* Buttons and calls to action */
  .button,
  .cta {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.75rem 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  .button:hover,
  .cta:hover {
    transform: translateY(-1px);
  }

  .button--primary,
  .cta--primary {
    background: var(--color-brand-600);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
  }

  .button--primary:hover,
  .cta--primary:hover {
    background: var(--color-brand-700);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
  }

  .button--secondary,
  .cta--secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .button--ghost {
    background: transparent;
    color: var(--color-text-muted);
  }

  .button--danger {
    background: var(--color-danger-500);
    color: var(--color-white);
  }

  .button--wide {
    width: 100%;
  }

  /* Hero and search */
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  }

  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.3;
  }

  .hero::before {
    inline-size: 28rem;
    block-size: 28rem;
    inset-inline-end: -8rem;
    inset-block-start: -10rem;
    background: var(--color-brand-300);
  }

  .hero::after {
    inline-size: 20rem;
    block-size: 20rem;
    inset-inline-start: -8rem;
    inset-block-end: -8rem;
    background: var(--color-accent-300);
  }

  .hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    align-items: center;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
  }

  .hero__content {
    display: grid;
    gap: var(--space-6);
  }

  .hero__eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-brand-100);
    color: var(--color-brand-900);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  .hero__title {
    max-width: 13ch;
  }

  .hero__summary {
    max-width: 60ch;
    color: var(--color-text-muted);
    font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .hero__media {
    position: relative;
    min-height: 28rem;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow-lg);
  }

  .hero__media img,
  .hero__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-search {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-elevated);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
  }

  .search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
  }

  .search-field {
    position: relative;
  }

  .search-field__input {
    padding-inline-start: 3rem;
  }

  .search-field__icon {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    color: var(--color-text-subtle);
    pointer-events: none;
  }

  .search-suggestions {
    position: absolute;
    z-index: var(--z-dropdown);
    inset-inline: 0;
    inset-block-start: calc(100% + var(--space-2));
    max-height: min(60vh, 30rem);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .search-suggestion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }

  .search-suggestion[aria-selected="true"],
  .search-suggestion:hover {
    background: var(--color-surface-muted);
  }

  .search-chip-list,
  .filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .chip,
  .filter-chip {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    padding-inline: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .chip[aria-pressed="true"],
  .filter-chip.is-active {
    border-color: var(--color-brand-600);
    background: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  /* Cards */
  .card {
    position: relative;
    display: grid;
    gap: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
    transition:
      transform var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard),
      border-color var(--duration-normal) var(--ease-standard);
  }

  .card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }

  .card__media {
    margin: calc(-1 * var(--space-5));
    margin-block-end: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-muted);
  }

  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .card__title {
    font-size: var(--font-size-xl);
  }

  .card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .destination-card__score,
  .suitability-score {
    display: inline-grid;
    place-items: center;
    min-inline-size: 3rem;
    min-block-size: 3rem;
    border-radius: 50%;
    background: var(--color-brand-50);
    color: var(--color-brand-800);
    font-weight: var(--font-weight-bold);
  }

  .trust-badge,
  .status-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .status-badge--success {
    background: var(--color-success-50);
    color: var(--color-success-700);
  }

  .status-badge--warning {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
  }

  .status-badge--danger {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
  }

  /* Section header */
  .section-header {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--space-8);
  }

  .section-header--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .section-header__eyebrow {
    color: var(--color-brand-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .section-header__summary {
    color: var(--color-text-muted);
  }

  /* Filters and discovery */
  .discovery-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .filter-panel {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    display: grid;
    gap: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .filter-group {
    display: grid;
    gap: var(--space-3);
  }

  .filter-group__title {
    font-size: var(--font-size-md);
  }

  .results-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: center;
    margin-block-end: var(--space-5);
  }

  .results-count {
    color: var(--color-text-muted);
  }

  .results-grid {
    --grid-min: 17rem;
  }

  .map-panel {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
  }

  /* Planner */
  .planner-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: var(--space-8);
    align-items: start;
  }

  .planner-main,
  .planner-sidebar {
    display: grid;
    gap: var(--space-5);
  }

  .planner-sidebar {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
  }

  .planner-progress {
    display: grid;
    gap: var(--space-2);
  }

  .progress-track {
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
  }

  .progress-track__value {
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand-600), var(--color-accent-400));
    transition: width var(--duration-slow) var(--ease-emphasized);
  }

  .planner-step {
    display: grid;
    gap: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    padding: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .planner-step__header {
    display: grid;
    gap: var(--space-2);
  }

  .planner-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-3);
  }

  .planner-option {
    position: relative;
    min-height: 7rem;
    display: grid;
    align-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-4);
    cursor: pointer;
  }

  .planner-option:hover,
  .planner-option:has(input:checked),
  .planner-option.is-selected {
    border-color: var(--color-brand-600);
    background: var(--color-brand-50);
    box-shadow: var(--shadow-sm);
  }

  .planner-option input {
    position: absolute;
    inset: var(--space-3) var(--space-3) auto auto;
    width: auto;
    min-height: auto;
  }

  .planner-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .planner-summary {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  /* Itinerary */
  .itinerary {
    display: grid;
    gap: var(--space-8);
  }

  .itinerary-day {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-5);
  }

  .itinerary-day__marker {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    align-self: start;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-brand-600);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
  }

  .itinerary-timeline {
    display: grid;
    gap: var(--space-4);
  }

  .itinerary-item {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-4);
    border-inline-start: 2px solid var(--color-border);
    padding-inline-start: var(--space-5);
  }

  .itinerary-item::before {
    content: "";
    position: absolute;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    inset-inline-start: -0.4375rem;
    inset-block-start: 0.5rem;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-brand-500);
    box-shadow: 0 0 0 2px var(--color-brand-500);
  }

  .itinerary-item__time {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  .itinerary-item__content {
    display: grid;
    gap: var(--space-2);
    padding-block-end: var(--space-5);
  }

  /* Destination detail */
  .destination-hero {
    position: relative;
    min-height: 34rem;
    display: grid;
    align-items: end;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--color-surface-muted);
    color: var(--color-white);
  }

  .destination-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(2 6 23 / 0.88), rgb(2 6 23 / 0.08));
  }

  .destination-hero__media {
    position: absolute;
    inset: 0;
  }

  .destination-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .destination-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 6vw, var(--space-12));
  }

  .destination-hero__content :is(h1, h2, p) {
    color: inherit;
  }

  .quick-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
  }

  .quick-fact {
    display: grid;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4);
  }

  .quick-fact__label {
    color: var(--color-text-subtle);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  .page-toc {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    display: grid;
    gap: var(--space-2);
    border-inline-start: 2px solid var(--color-border);
    padding-inline-start: var(--space-4);
  }

  .page-toc a {
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .page-toc a[aria-current="true"] {
    color: var(--color-brand-700);
  }

  .trust-panel {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    padding: var(--space-5);
  }

  .trust-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
  }

  /* Comparison */
  .comparison-shell {
    overflow-x: auto;
  }

  .comparison-table {
    min-width: 52rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .comparison-table th:first-child,
  .comparison-table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-surface);
  }

  .comparison-highlight {
    background: var(--color-brand-50);
  }

  .score-bar {
    display: grid;
    gap: var(--space-2);
  }

  .score-bar__track {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
  }

  .score-bar__value {
    width: var(--score, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand-600);
  }

  /* Account and authentication */
  .auth-shell {
    width: min(100% - (2 * var(--page-gutter)), 32rem);
    margin-inline: auto;
    padding-block: clamp(var(--space-12), 10vw, var(--space-24));
  }

  .auth-card {
    display: grid;
    gap: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    padding: clamp(var(--space-5), 5vw, var(--space-8));
    box-shadow: var(--shadow-md);
  }

  .form-grid {
    display: grid;
    gap: var(--space-4);
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .form-field {
    display: grid;
    gap: var(--space-2);
  }

  .form-help {
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
  }

  .form-error {
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
  }

  .otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(2.5rem, 1fr));
    gap: var(--space-2);
  }

  .otp-inputs input {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
  }

  .account-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-8);
  }

  .account-nav {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .account-nav a {
    display: flex;
    min-height: var(--touch-target);
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    padding-inline: var(--space-4);
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .account-nav a[aria-current="page"] {
    background: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  /* Reports */
  .report-shell {
    display: grid;
    gap: var(--space-8);
  }

  .report-cover {
    display: grid;
    min-height: 30rem;
    align-content: end;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(135deg, var(--color-brand-800), var(--color-brand-500));
    color: var(--color-white);
    padding: clamp(var(--space-8), 7vw, var(--space-16));
  }

  .report-cover :is(h1, h2, p) {
    color: inherit;
  }

  .report-section {
    display: grid;
    gap: var(--space-5);
    break-inside: avoid;
  }

  .report-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-4);
  }

  .report-stat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .report-actions {
    position: sticky;
    inset-block-end: var(--space-4);
    z-index: var(--z-raised);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    width: fit-content;
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
  }

  /* Commercial and disclosure */
  .commercial-slot {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .commercial-slot::before {
    content: attr(data-disclosure);
    display: block;
    margin-block-end: var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .offer-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
  }

  .offer-card__price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
  }

  .disclosure {
    border-inline-start: 0.25rem solid var(--color-accent-400);
    background: var(--color-accent-50);
    color: var(--color-gray-800);
    padding: var(--space-4);
  }

  /* FAQ and content */
  .faq-list {
    display: grid;
    gap: var(--space-3);
  }

  .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 0;
  }

  .faq-item summary {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-weight-semibold);
  }

  .faq-item__content {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
  }

  .source-list {
    display: grid;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .freshness-note,
  .uncertainty-note {
    display: flex;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }

  .freshness-note {
    background: var(--color-info-50);
    color: var(--color-info-700);
  }

  .uncertainty-note {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
  }

  /* Notifications, modal and toast */
  .toast-region {
    position: fixed;
    z-index: var(--z-toast);
    inset-inline-end: var(--space-4);
    inset-block-end: var(--space-4);
    display: grid;
    gap: var(--space-3);
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
  }

  .toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
  }

  .modal-shell {
    width: min(92vw, 48rem);
    max-height: 90vh;
    overflow: auto;
    padding: 0;
  }

  .modal-header,
  .modal-footer {
    position: sticky;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .modal-header {
    inset-block-start: 0;
    border-block-end: 1px solid var(--color-border);
  }

  .modal-footer {
    inset-block-end: 0;
    border-block-start: 1px solid var(--color-border);
  }

  .modal-body {
    padding: var(--space-5);
  }

  /* Footer */
  .site-footer {
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
    padding-block: var(--space-16) var(--space-8);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .footer-group {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }

  .footer-group a {
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-6);
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
  }

  /* Admin */
  .admin-shell {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    min-height: 100vh;
  }

  .admin-sidebar {
    position: sticky;
    inset-block-start: 0;
    height: 100vh;
    overflow: auto;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .admin-main {
    min-width: 0;
    padding: clamp(var(--space-5), 4vw, var(--space-10));
  }

  .admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
  }

  .metric-card {
    display: grid;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5);
  }

  .metric-card__value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
  }

  .data-table-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
  }
}

@layer pages {
  .page-home .section:nth-of-type(even),
  .page-destination .section:nth-of-type(even),
  .page-intent .section:nth-of-type(even) {
    background: var(--color-surface);
  }

  .page-discover .results-grid {
    --grid-min: 18rem;
  }

  .page-compare .comparison-shell {
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
  }

  .page-report {
    background: var(--color-gray-100);
  }

  .page-admin {
    background: var(--color-gray-50);
  }
}

@layer states {
  .is-loading {
    cursor: progress;
    pointer-events: none;
  }

  .is-disabled {
    pointer-events: none;
    opacity: 0.56;
  }

  .is-selected {
    border-color: var(--color-brand-600) !important;
    background: var(--color-brand-50) !important;
  }

  .is-stale {
    opacity: 0.78;
  }

  .is-empty,
  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-8), 8vw, var(--space-16));
    text-align: center;
  }

  .error-state {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--color-danger-500);
    border-radius: var(--radius-lg);
    background: var(--color-danger-50);
    color: var(--color-danger-700);
    padding: var(--space-5);
  }

  .success-state {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--color-success-500);
    border-radius: var(--radius-lg);
    background: var(--color-success-50);
    color: var(--color-success-700);
    padding: var(--space-5);
  }

  .skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: transparent !important;
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background:
      linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--color-white) 50%, transparent),
        transparent
      );
    animation: skeleton-shimmer 1.25s infinite;
  }

  @keyframes skeleton-shimmer {
    to {
      translate: 100% 0;
    }
  }

  [data-network="offline"] .online-only {
    display: none !important;
  }

  [data-network="online"] .offline-only {
    display: none !important;
  }

  .offline-banner {
    display: none;
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    padding: var(--space-3) var(--page-gutter);
    text-align: center;
  }

  [data-network="offline"] .offline-banner {
    display: block;
  }

  [aria-busy="true"] .busy-hide {
    visibility: hidden;
  }

  [aria-busy="true"] .busy-show {
    display: inline-flex;
  }

  .busy-show {
    display: none;
  }
}

@layer responsive {
  @media (max-width: 75rem) {
    .site-nav {
      display: none;
    }

    .mobile-nav-trigger {
      display: inline-grid;
    }

    .footer-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 64rem) {
    .hero__layout,
    .planner-shell,
    .discovery-layout,
    .account-layout {
      grid-template-columns: 1fr;
    }

    .hero__media {
      min-height: 22rem;
    }

    .filter-panel,
    .planner-sidebar,
    .page-toc,
    .map-panel {
      position: static;
    }

    .admin-shell {
      grid-template-columns: 1fr;
    }

    .admin-sidebar {
      position: static;
      width: 100%;
      height: auto;
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-border);
    }

    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 48rem) {
    .site-header__inner {
      grid-template-columns: auto 1fr auto;
      gap: var(--space-3);
    }

    .header-actions .button {
      display: none;
    }

    .hero {
      padding-block: var(--space-12);
    }

    .hero__media {
      min-height: 18rem;
    }

    .search-bar {
      grid-template-columns: 1fr;
    }

    .section-header--split {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .form-row,
    .footer-grid {
      grid-template-columns: 1fr;
    }

    .itinerary-day {
      grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .itinerary-item {
      grid-template-columns: 1fr;
    }

    .offer-card {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .report-actions {
      width: calc(100% - 2 * var(--space-4));
      border-radius: var(--radius-lg);
    }
  }

  @media (max-width: 36rem) {
    .hero__actions,
    .planner-actions,
    .results-toolbar,
    .footer-meta,
    .admin-toolbar {
      align-items: stretch;
      flex-direction: column;
    }

    .hero__actions .button,
    .planner-actions .button,
    .report-actions .button {
      width: 100%;
    }

    .otp-inputs {
      grid-template-columns: repeat(3, minmax(2.5rem, 1fr));
    }

    .card,
    .planner-step,
    .auth-card {
      border-radius: var(--radius-md);
    }
  }

  @media (hover: none) {
    .card:hover,
    .button:hover,
    .cta:hover {
      transform: none;
    }
  }
}

@layer print {
  @media print {
    .site-header,
    .site-footer,
    .filter-panel,
    .planner-sidebar,
    .report-actions,
    .toast-region,
    .commercial-slot,
    .admin-sidebar,
    .button,
    .cta,
    .no-print {
      display: none !important;
    }

    .hero,
    .destination-hero,
    .report-cover {
      min-height: auto;
      color: #000000 !important;
      background: #ffffff !important;
      padding: 0 0 1rem !important;
    }

    .hero::before,
    .hero::after,
    .destination-hero::after {
      display: none;
    }

    .destination-hero__media,
    .hero__media {
      position: static;
      max-height: 12rem;
      margin-block-end: 1rem;
    }

    .report-shell,
    .itinerary,
    .report-section {
      gap: 1rem;
    }

    .card,
    .quick-fact,
    .report-stat,
    .planner-step,
    .itinerary-item,
    .trust-panel {
      break-inside: avoid;
      border-color: #999999 !important;
      box-shadow: none !important;
    }

    .comparison-shell {
      overflow: visible;
    }

    .comparison-table {
      min-width: 0;
      font-size: 8pt;
    }

    .admin-shell,
    .account-layout,
    .planner-shell,
    .discovery-layout {
      display: block;
    }
  }
}