/* =====================
       CSS VARIABLES
    ===================== */
    :root {
      --primary: #003580;
      --primary-hover: #002a66;
      --primary-light: rgba(0,53,128,0.08);
      --bg-page: #f8fafc;
      --bg-white: #ffffff;
      --border: #e2e8f0;
      --border-light: #f1f5f9;
      --text-dark: #1e293b;
      --text-body: #64748b;
      --text-muted: #94a3b8;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
      --shadow-primary: 0 6px 20px rgba(0,53,128,0.22);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-xl: 1rem;
      --radius-full: 9999px;
      --font: 'Inter', sans-serif;
    }

    /* =====================
       RESET & BASE
    ===================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font);
      background: var(--bg-page);
      color: var(--text-dark);
      min-height: 100vh;
      line-height: 1.5;
    }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    input, select, button, textarea { font-family: inherit; }
    img { display: block; object-fit: cover; }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    /* =====================
       CONTAINER
    ===================== */
    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* =====================
       HEADER
    ===================== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg-white);
      border-bottom: 1px solid var(--border);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--primary);
    }
    .logo svg { width: 2rem; height: 2rem; }
    .logo-text {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: var(--text-dark);
    }
    .main-nav { display: none; align-items: center; gap: 2rem; }
    .main-nav a { font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
    .main-nav a:hover { color: var(--primary); }
    .header-actions { display: flex; align-items: center; gap: 1rem; }
    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: var(--radius-md);
      display: flex;
      transition: background 0.2s;
    }
    .icon-btn:hover { background: #f1f5f9; }

    /* =====================
       MAIN
    ===================== */
    .main-content { padding: 2rem 0; }

    /* =====================
       PROGRESS TRACKER
    ===================== */
    .progress-wrap { margin-bottom: 2.5rem; }
    .progress-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    .progress-step-info { display: flex; align-items: center; gap: 0.75rem; }
    .progress-step-info .step-count { color: var(--text-body); font-weight: 500; font-size: 0.875rem; }
    .progress-step-info .divider { color: #cbd5e1; }
    .progress-step-info .step-name { color: var(--primary); font-weight: 700; font-size: 0.875rem; }

    .progress-steps { display: none; align-items: center; gap: 2rem; }
    .progress-step {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--text-muted);
    }
    .progress-step .material-symbols-outlined { font-size: 0.875rem; }
    .progress-step.done { color: var(--text-muted); }
    .progress-step.active { color: var(--primary); font-weight: 600; }

    .progress-bar-track {
      width: 100%;
      background: #e2e8f0;
      height: 6px;
      border-radius: var(--radius-full);
      overflow: hidden;
    }
    .progress-bar-fill {
      background: var(--primary);
      height: 100%;
      width: 66%;
      border-radius: var(--radius-full);
    }

    /* =====================
       PAGE LAYOUT
    ===================== */
    .page-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: start;
    }

    /* =====================
       LEFT COLUMN
    ===================== */
    .detail-column { display: flex; flex-direction: column; gap: 1.5rem; }

    /* Common section card */
    .review-card {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.5rem;
      box-shadow: var(--shadow-sm);
    }
    .review-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .review-card-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.125rem;
      font-weight: 700;
    }
    .review-card-title .material-symbols-outlined { color: var(--primary); }
    .edit-btn {
      background: none;
      border: none;
      color: var(--primary);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: text-decoration 0.1s;
    }
    .edit-btn:hover { text-decoration: underline; }

    /* Tour Recap */
    .tour-recap-card {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .tour-recap-inner { display: flex; flex-direction: column; }
    .tour-recap-img {
      width: 100%;
      height: 12rem;
      background-size: cover;
      background-position: center;
      background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDAFmUFW_YRicWXLbToXnrVqBmoQS6AZAb4KTWa2Ij_q9sB8pJjy6Mp0HqSUfY-2oUe0QOGXpJI5fp3FOgocRFVC66KxUK1jJ4Dka3Q6mMPnT5BfFExc-TjexxUX7yDG7xhhQVfql2R8bFHZU38VE_16Wu1OoVkkKglEBjjIQDfB0L66rp4btC_l4cH7ggKUIS6zU80TeB1we7dmRBlP9dCJUd88JP6tlcaZAy_IAepjetbCCDXK37WflxtJNTOYLVLXHS2FXS4bQA');
      flex-shrink: 0;
    }
    .tour-recap-body { padding: 1.5rem; flex: 1; }
    .tour-recap-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
    }
    .tour-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 0.75rem;
      font-weight: 700;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 0.5rem;
    }
    .tour-recap-title {
      font-size: 1.5rem;
      font-weight: 900;
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }
    .tour-recap-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: 0.875rem;
      color: var(--text-body);
    }
    .tour-meta-item {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .tour-meta-item .material-symbols-outlined { font-size: 1rem; }

    /* Traveler Details */
    .traveler-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .traveler-card {
      padding: 1rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-light);
      background: rgba(248,250,252,0.5);
    }
    .traveler-role {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 0.5rem;
    }
    .traveler-name { font-weight: 700; font-size: 1.125rem; }
    .traveler-contact { font-size: 0.875rem; color: var(--text-body); margin-top: 0.25rem; }

    /* Special Requirements */
    .dietary-notice {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      border-radius: var(--radius-md);
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }
    .dietary-notice .material-symbols-outlined { color: #f97316; flex-shrink: 0; }
    .dietary-notice-title { font-weight: 600; color: #7c2d12; margin-bottom: 0.25rem; }
    .dietary-notice-text { font-size: 0.875rem; color: #9a3412; line-height: 1.6; }

    /* Important Info */
    .info-list { display: flex; flex-direction: column; gap: 1rem; }
    .info-item { display: flex; gap: 1rem; }
    .info-icon {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info-icon.green { background: #dcfce7; color: #16a34a; }
    .info-icon.blue { background: #dbeafe; color: #2563eb; }
    .info-icon .material-symbols-outlined { font-size: 1.125rem; }
    .info-title { font-weight: 700; margin-bottom: 0.25rem; }
    .info-text { font-size: 0.875rem; color: var(--text-body); line-height: 1.6; }
    .terms-note {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border-light);
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .terms-note a { color: var(--primary); transition: text-decoration 0.1s; }
    .terms-note a:hover { text-decoration: underline; }

    /* =====================
       SIDEBAR
    ===================== */
    .sidebar-sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.5rem; }

    /* Price Summary */
    .price-card {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.5rem;
      box-shadow: var(--shadow-sm);
    }
    .price-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border-light);
    }
    .price-lines { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
    .price-line {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
    }
    .price-line span:first-child { color: var(--text-body); }
    .price-line span:last-child { font-weight: 500; }
    .price-line.sub-line { padding-left: 1rem; font-style: italic; }
    .price-line.sub-line span { color: var(--text-muted); }
    .price-line.discount span { color: #16a34a; }
    .price-line.discount .discount-inner {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .price-line.discount .material-symbols-outlined { font-size: 0.875rem; }

    .price-total-row {
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 2rem;
    }
    .price-total-row .label { font-size: 1.125rem; font-weight: 700; }
    .price-total-right { text-align: right; }
    .price-total-amount { font-size: 1.875rem; font-weight: 900; color: var(--primary); display: block; }
    .price-total-note {
      font-size: 0.625rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 700;
    }

    .btn-payment {
      width: 100%;
      background: var(--primary);
      color: white;
      border: none;
      padding: 1rem;
      border-radius: var(--radius-lg);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      box-shadow: var(--shadow-primary);
      transition: background 0.2s, transform 0.1s;
      margin-bottom: 1.5rem;
    }
    .btn-payment:hover { background: var(--primary-hover); }
    .btn-payment:active { transform: scale(0.98); }
    .btn-payment .material-symbols-outlined { font-size: 1.125rem; transition: transform 0.2s; }
    .btn-payment:hover .material-symbols-outlined { transform: translateX(3px); }

    .trust-signals { display: flex; flex-direction: column; gap: 1rem; }
    .ssl-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: #f0fdf4;
      color: #15803d;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 0.5rem;
      border-radius: var(--radius-md);
    }
    .ssl-badge .material-symbols-outlined { font-size: 1.125rem; }

    .payment-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      opacity: 0.5;
      filter: grayscale(1);
      transition: all 0.3s;
    }
    .payment-logos:hover { opacity: 1; filter: grayscale(0); }
    .payment-logos img { height: 1.5rem; width: auto; display: block; }

    /* Help Card */
    .help-card {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.5rem;
      box-shadow: var(--shadow-sm);
    }
    .help-card h3 { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.5rem; }
    .help-card p { font-size: 0.75rem; color: var(--text-body); margin-bottom: 1rem; line-height: 1.6; }
    .help-phone {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--primary);
      font-size: 0.875rem;
      font-weight: 700;
      padding: 0.25rem 0.5rem;
      margin-left: -0.5rem;
      border-radius: var(--radius-sm);
      transition: background 0.2s;
    }
    .help-phone:hover { background: var(--primary-light); }
    .help-phone .material-symbols-outlined { font-size: 1.125rem; }

    /* =====================
       FOOTER
    ===================== */
    .site-footer {
      margin-top: 5rem;
      border-top: 1px solid var(--border);
      background: var(--bg-white);
      padding: 3rem 0 2rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 3rem;
    }
    .footer-brand { display: flex; flex-direction: column; gap: 1.5rem; }
    .footer-brand-logo { display: flex; align-items: center; gap: 0.75rem; color: var(--primary); }
    .footer-brand-logo svg { width: 1.5rem; height: 1.5rem; }
    .footer-brand-logo span { font-size: 1.125rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-dark); }
    .footer-brand p { font-size: 0.875rem; color: var(--text-body); line-height: 1.7; max-width: 24rem; }
    .footer-col h4 { font-weight: 700; margin-bottom: 1rem; }
    .footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
    .footer-col ul li a { font-size: 0.875rem; color: var(--text-body); transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--primary); }
    .footer-bottom {
      padding-top: 2rem;
      border-top: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .footer-bottom p { font-size: 0.75rem; color: var(--text-muted); }
    .footer-legal { display: flex; gap: 1.5rem; }
    .footer-legal a { font-size: 0.75rem; color: var(--text-muted); transition: color 0.2s; }
    .footer-legal a:hover { color: #475569; }

    /* =====================
       RESPONSIVE
    ===================== */
    @media (min-width: 640px) {
      .progress-steps { display: flex; }
      .traveler-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 768px) {
      .main-nav { display: flex; }
      .tour-recap-inner { flex-direction: row; }
      .tour-recap-img { width: 33.333%; height: auto; }
      .tour-recap-body { width: 66.666%; }
      .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
      .footer-bottom { flex-direction: row; justify-content: space-between; }
    }
    @media (min-width: 1024px) {
      .page-layout { grid-template-columns: 8fr 4fr; }
    }