/* itinerary.ejs style block 1 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    :root {
      --gold: #c8a96e;
      --gold-light: #e8d5b0;
      --dark: #1a1a2e;
      --text: #3d3d5c;
      --text-light: #8888aa;
      --bg: #f7f5f2;
    }
    
    body {
      font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--dark);
      color: rgba(255,255,255,0.8);
      line-height: 1.6;
    }

    /* Dark theme overrides for detail page */
    .site-nav {
      background: rgba(26,26,46,0.95) !important;
      border-bottom-color: rgba(255,255,255,0.06) !important;
    }
    .site-nav a {
      color: rgba(255,255,255,0.7) !important;
    }
    .site-nav a:hover {
      color: var(--gold) !important;
    }
    
    /* ===== TOP BAR ===== */
    .top-bar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(26,26,46,0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .top-bar a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s;
    }
    .top-bar .download-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--gold);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border: 1px solid var(--gold);
      border-radius: 6px;
      transition: all 0.2s;
    }
    .top-bar .download-btn:hover {
      background: var(--gold);
      color: #fff;
    }
    .top-bar .title {
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      max-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    /* ===== METADATA BAR ===== */
    <% if (itinerary) { %>
    .meta-bar {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 20px;
    }
    .meta-bar .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text-light);
    }
    .meta-bar .meta-item strong {
      color: var(--text);
      font-weight: 600;
    }
    .meta-bar .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .meta-bar .tag {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 12px;
      background: rgba(200,169,110,0.10);
      color: var(--gold);
      border: 1px solid rgba(200,169,110,0.20);
    }
    <% } %>
    
    /* ===== BROCHURE FRAME ===== */
    .brochure-wrapper {
      max-width: 820px;
      margin: 0 auto;
      padding: 24px 16px 60px;
    }
    
    <% if (brochureContent) { %>
    .brochure-frame {
      width: 100%;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .brochure-content .cover,
    .brochure-content .page {
      width: 100% !important;
      max-width: 820px !important;
      margin: 0 auto !important;
    }
    .brochure-content .cover {
      height: auto !important;
      min-height: 400px;
    }
    <% } else { %>
    .not-found {
      text-align: center;
      padding: 80px 20px;
    }
    .not-found h2 {
      font-size: 24px;
      color: #fff;
      margin-bottom: 8px;
    }
    .not-found p {
      color: rgba(255,255,255,0.5);
      font-size: 14px;
    }
    .not-found a {
      display: inline-block;
      margin-top: 20px;
      color: var(--gold);
      text-decoration: none;
      font-weight: 600;
    }
    <% } %>
    
    /* ===== LANG TOGGLE ===== */
    .lang-toggle {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 1000;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(0,0,0,0.08);
      color: #333;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      font-family: 'Inter', system-ui, sans-serif;
    }
    .lang-toggle:hover {
      background: #c8a96e;
      color: #fff;
      border-color: #c8a96e;
    }

    /* ===== FOOTER ===== */
    .footer {
      text-align: center;
      padding: 32px 24px;
      color: rgba(255,255,255,0.4);
      font-size: 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    
    /* ===== RELATED TRIPS ===== */
    .related-trips {
      max-width: 860px;
      margin: 48px auto 0;
      padding: 0 16px;
    }
    .related-heading {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 20px;
      font-weight: 500;
      color: rgba(255,255,255,0.9);
      margin-bottom: 20px;
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .related-card {
      text-decoration: none;
      color: inherit;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0,0,0,0.3);
      transition: transform 0.2s, box-shadow 0.2s;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .related-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    }
    .related-card img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }
    .related-body {
      padding: 12px 14px;
    }
    .related-title {
      font-size: 14px;
      font-weight: 600;
      margin: 0;
      color: rgba(255,255,255,0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .related-days {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      margin: 4px 0 0;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 640px) {
      .top-bar { padding: 10px 16px; }
      .top-bar .title { font-size: 12px; max-width: 40%; }
      .meta-bar { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
      .brochure-wrapper { padding: 0 0 40px; max-width: 100%; }
      .brochure-frame { border-radius: 0; }
      .brochure-content .cover { min-height: 300px; }
    }