/* ================================================================
   QuestLog Travel Co. — Main Stylesheet

   TABLE OF CONTENTS
   -----------------
     1.  Preloader
     2.  CSS Variables & Design Tokens
     3.  Global Reset & Base Styles
     4.  Global Navbar
     5.  Hero Section & Slideshow
     6.  Quest Board (Offerings)
     7.  Interactive Atlas
         7a. Search Bar & Filter
         7b. Filter Buttons
         7c. Map Canvas & Zoom Controls
         7d. Waypoint Pins
         7e. Tooltip Popup
     8.  The Guild Section
     9.  Quote Transition Section
    10.  Contact / Booking Section
    11.  Footer
    12.  QuestLog Cart (FAB + Drawer)
    13.  Inspire Me Button
   ================================================================ */

/* ================================================================
   1. PRELOADER
   ================================================================ */
#preloader {
    position: fixed; inset: 0; z-index: 99999;
    background-color: #08171d;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.fade-out { opacity: 0; visibility: hidden; }
.preloader-compass {
    width: 90px; opacity: 0.95;
    animation: preloader-spin 2.5s ease-in-out infinite;
}
.preloader-text {
    font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 600;
    color: var(--accent-gold); letter-spacing: 3px; text-transform: uppercase;
    opacity: 0.7;
}
@keyframes preloader-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ================================================================
   2. CSS VARIABLES & DESIGN TOKENS
   ================================================================ */
:root {
    --bg-light: #fbfaf8;
    --bg-white: #ffffff;
    --primary-teal: #08171d;
    --secondary-teal: #122c36;
    --accent-gold: #c3984d;
    --accent-gold-hover: #e8bd6c;
    --text-dark: #2c363a;
    --text-muted: #6b7c85;
    --transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    --slideshow-transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

/* ================================================================
   3. GLOBAL RESET & BASE STYLES
   ================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 0.95rem;
}

h1, h2, h3 { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 1px; text-wrap: balance; line-height: 1.15; }
p { text-wrap: pretty; }
a { text-decoration: none; transition: var(--transition); }
.section-anchor { color: inherit; text-decoration: none; cursor: pointer; }

/* ================================================================
   4. GLOBAL NAVBAR
   ================================================================ */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 5%; background: var(--primary-teal);
    position: fixed; width: 100%; top: 0; z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(195, 152, 77, 0.2);
}
.logo img { height: 40px; width: auto; }

.nav-journey { list-style: none; display: flex; gap: 2.5rem; align-items: center; margin: 0; padding: 0; }

.journey-step {
    font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--bg-white);
    transition: var(--transition);
    display: inline-block; white-space: nowrap; text-decoration: none;
    position: relative;
}
.journey-step:hover {
    color: var(--accent-gold);
    transform: translateY(-2px);
}
.btn-gold, .btn-ghost { position: relative; }

#cursor-tooltip {
    position: fixed; pointer-events: none; z-index: 9999;
    background: var(--primary-teal); color: var(--accent-gold);
    font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.04em; padding: 4px 9px; border-radius: 3px;
    white-space: nowrap; border: 1px solid rgba(195, 152, 77, 0.3);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    transform: translateX(-50%);
    opacity: 0; transition: opacity 0.15s ease;
}
#cursor-tooltip.visible { opacity: 1; }

/* --- Hamburger Button --- */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--bg-white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    nav { flex-direction: row; gap: 0; padding: 0.8rem 4%; }
    .hamburger-btn { display: flex; }
    .nav-journey {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--primary-teal);
        border-top: 1px solid rgba(195, 152, 77, 0.2);
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        padding: 0.5rem 0;
    }
    .nav-journey.open { display: flex; }
    .nav-journey li { width: 100%; }
    .journey-step { display: block; padding: 14px 5%; font-size: 0.75rem; white-space: normal; }
    .nav-journey .journey-step::after {
        content: attr(data-tooltip);
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.05em;
        color: rgba(195, 152, 77, 0.55);
        text-transform: none;
        margin-top: 3px;
    }
    .hero { margin-top: 62px; }
}

/* --- Mobile Only (≤768px) --- */
@media (max-width: 768px) {
    nav { padding: 0.8rem 5%; }
    #cursor-tooltip { display: none; }
}

.btn-gold {
    background-color: var(--accent-gold); color: var(--bg-white) !important;
    padding: 10px 24px; font-size: 0.85rem; font-family: 'Cinzel', serif;
    font-weight: 600; border: 1px solid var(--accent-gold); border-radius: 2px;
    text-transform: uppercase; letter-spacing: 2px; transition: var(--transition);
    display: inline-block; cursor: pointer; white-space: nowrap;
}
.btn-gold:hover { background-color: transparent; color: var(--accent-gold) !important; }
.btn-gold:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }
.btn-gold.added { background: #2c363a; border-color: #2c363a; color: var(--accent-gold) !important; cursor: pointer; }

.btn-ghost {
    background-color: transparent; color: var(--bg-white) !important;
    padding: 10px 24px; font-size: 0.85rem; font-family: 'Cinzel', serif;
    font-weight: 600; border: 1px solid rgba(255,255,255,0.5); border-radius: 2px;
    text-transform: uppercase; letter-spacing: 2px; transition: var(--transition);
    display: inline-block; cursor: pointer; white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--accent-gold); color: var(--accent-gold) !important; }
.btn-ghost:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 3px; }

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-gold, .hero-actions .btn-ghost { width: 210px; display: flex; justify-content: center; align-items: center; }

/* ================================================================
   5. HERO SECTION & SLIDESHOW
   ================================================================ */
.hero {
    position: relative; height: calc(100vh - 60px); display: flex; align-items: center;
    justify-content: center; text-align: center; padding: 0 5%;
    margin-top: 60px; overflow: hidden; background-color: var(--primary-teal);
}
.hero-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0;
    z-index: 1; transition: var(--slideshow-transition); transform: scale(1.03);
}
.slide.active { opacity: 1; z-index: 2; transform: scale(1); }
.slide::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(8, 23, 29, 0.2), rgba(8, 23, 29, 0.6));
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.slide:nth-child(1)  { background-image: url('home_images/bg-image-1-kalen-emsleyjpg.jpg'); }
.slide:nth-child(2)  { background-image: url('home_images/bg-image-2-fernando-jorge.jpg'); }
.slide:nth-child(3)  { background-image: url('home_images/bg-image-3-orva-studio.jpg'); }
.slide:nth-child(4)  { background-image: url('home_images/bg-image-4-mohd-elle.jpg'); }
.slide:nth-child(5)  { background-image: url('home_images/bg-image-5-hu-chen.jpg'); }
.slide:nth-child(6)  { background-image: url('home_images/bg-image-6-sorasak.jpg'); }
.slide:nth-child(7)  { background-image: url('home_images/bg-image-7-denys-nevozhai.jpg'); }
.slide:nth-child(8)  { background-image: url('home_images/bg-image-8-felix-rostig.jpg'); }
.slide:nth-child(9)  { background-image: url('home_images/bg-image-9-ganapathy-kumar.jpg'); }
.slide:nth-child(10) { background-image: url('home_images/bg-image-10-anders-jilden.jpg'); }
.slide:nth-child(11) { background-image: url('home_images/bg-image-11-fabio-comparelli.jpg'); }

.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--accent-gold);
    font-size: 2rem; padding: 20px 10px; cursor: pointer;
    z-index: 10; opacity: 0.3; transition: opacity 0.3s ease, color 0.3s ease; outline: none;
}
.slider-arrow:hover { opacity: 1; color: var(--accent-gold-hover); }
.slider-arrow.prev { left: 2%; }
.slider-arrow.next { right: 2%; }

.hero-content {
    position: relative; z-index: 3; max-width: 800px;
    display: flex; flex-direction: column; align-items: center; color: var(--bg-white);
}
.hero h1 {
    color: var(--accent-gold); font-size: clamp(1.3rem, 7.5vw, 3.4rem); line-height: 1.15;
    white-space: nowrap;
    margin-bottom: 2rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 15px rgba(0,0,0,0.6);
}
.hero-graphic {
    width: 130px; height: 130px; object-fit: cover; border-radius: 50%;
    border: 2px solid rgba(195, 152, 77, 0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    margin-bottom: 2rem; transition: transform 0.5s ease;
}
.hero-graphic:hover { transform: scale(1.05); }
.hero p {
    font-size: 1rem; font-weight: 300; margin-bottom: 2rem;
    letter-spacing: 0.5px; max-width: 650px; text-shadow: 0 2px 5px rgba(0,0,0,0.4); line-height: 1.8;
}

/* --- Hero Mobile Overrides (must be after base hero rules) --- */
@media (max-width: 768px) {
    .hero { margin-top: 65px; height: calc(100dvh - 65px); padding: 0 3%; }
    .hero h1 { margin-bottom: 0.7rem; white-space: normal; }
    .hero-graphic { width: 100px; height: 100px; margin-bottom: 0.7rem; }
    .hero p { font-size: 0.90rem; max-width: 88%; margin-bottom: 2rem; letter-spacing: 0; line-height: 1.6; }
    .hero-actions { gap: 0.6rem; flex-direction: column; align-items: center; }
    .hero-actions .btn-gold,
    .hero-actions .btn-ghost { width: 200px; padding: 9px 20px; }
    .slider-arrow { display: none; }
}

/* ================================================================
   6. QUEST BOARD (OFFERINGS)
   ================================================================ */
.offerings { padding: 5rem 5%; background-color: var(--bg-light); text-align: center; }
.offerings .section-header { margin-bottom: 2.5rem; }
.offerings .section-header h2 { color: var(--primary-teal); font-size: 2.2rem; margin-bottom: 1rem; }
.offerings .section-header p { color: var(--text-muted); max-width: 650px; margin: 0 auto; font-size: 0.95rem; }

.compact-quests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.quest-card {
    position: relative;
    height: 240px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-decoration: none;
}

.qc-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.qc-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(8, 23, 29, 0.95) 0%, rgba(8, 23, 29, 0.5) 50%, rgba(8, 23, 29, 0.1) 100%);
    transition: background 0.4s ease;
}

.qc-content {
    position: absolute; bottom: 0; width: 100%; padding: 1.5rem; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
}

.qc-content h3 {
    color: var(--accent-gold); font-size: 1.15rem; margin-bottom: 0;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: transform 0.4s ease;
}

.qc-details {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.qc-details p {
    font-size: 0.85rem; line-height: 1.5; color: #d1d8dc;
    margin: 0.8rem 0;
}

.qc-btn {
    font-family: 'Cinzel', serif; color: var(--accent-gold);
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; display: inline-block; transition: color 0.3s ease, text-shadow 0.3s ease;
}
.qc-btn:hover {
    color: #e8b96a;
    text-shadow: 0 0 12px rgba(195, 152, 77, 0.7);
}

/* Hover / Active Dynamics */
.quest-card:hover .qc-img,
.quest-card.active .qc-img { transform: scale(1.08); }
.quest-card:hover .qc-overlay,
.quest-card.active .qc-overlay { background: rgba(8, 23, 29, 0.85); }
.quest-card:hover .qc-details,
.quest-card.active .qc-details { max-height: 150px; opacity: 1; }
.quest-card:hover .qc-content h3,
.quest-card.active .qc-content h3 { transform: translateY(-2px); }

.view-atlas-link { display: none; }

@media (max-width: 1024px) {
    .view-atlas-link {
        display: block; text-align: center;
        font-family: 'Montserrat', sans-serif; font-size: 0.8rem;
        color: var(--accent-gold); margin-top: -1.6rem; margin-bottom: 1.8rem;
        transition: color 0.3s ease;
    }
    .view-atlas-link:hover { color: var(--accent-gold); }
}

@media (max-width: 768px) {
    .quest-card { height: 130px; transition: height 0.4s ease; }
    .quest-card.active { height: 220px; }
    .qc-details { display: none; }
    .quest-card.active .qc-details { display: block; }
    .qc-content { padding: 1.2rem; }
    .compact-quests { gap: 1rem; }
    .offerings { padding: 5rem 5% 6rem; }
    .offerings .section-header h2 { font-size: clamp(1.3rem, 7.5vw, 2.2rem); }
    .offerings .section-header p { font-size: 0.90rem; }
}

/* ================================================================
   7. INTERACTIVE ATLAS
   ================================================================ */
.atlas-section { padding: 5rem 5% 8rem; background-color: var(--secondary-teal); color: var(--bg-white); position: relative; }

@media (min-width: 769px) and (max-width: 1024px) {
    .atlas-section { padding-bottom: 12rem; }
}

.atlas-header { text-align: center; margin-bottom: 1rem; position: relative; z-index: 2; }
.atlas-header h2 { color: var(--accent-gold); font-size: 2.2rem; margin-bottom: 0.5rem; }
.atlas-disclaimer { font-size: 0.78rem; color: #8e9a9f; font-style: italic; margin: -0.2rem 0 0.8rem; }
.atlas-disclaimer-link { color: var(--accent-gold); text-decoration: none; }
.atlas-disclaimer-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .atlas-header h2 { font-size: clamp(1.3rem, 5.5vw, 2.2rem); }
    .waypoint-popup { max-width: min(400px, 92vw); }
    .zoom-btn { width: 38px; height: 38px; }
}

@media (max-width: 768px) {
    .atlas-section { padding: 7rem 5% 12rem; }
    .atlas-header h2 { font-size: clamp(1.3rem, 7.5vw, 2.2rem); }
    .zoom-btn { width: 42px; height: 42px; font-size: 1.3rem; }
    .filter-btn { padding: 7px 13px; font-size: 0.65rem; }
    /* Map breaks out of section padding — full viewport width, bleeds edge to edge */
    .map-wrapper {
        width: 100vw;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        /* Strip side fades — edges bleed naturally on mobile */
        mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
    }
}

/* --- Atlas Fullscreen Mode --- */
.atlas-fs-btn { display: none !important; }
.atlas-fs-exit {
    display: none;
    position: absolute; top: 12px; right: 12px; z-index: 10;
    background: rgba(8,23,29,0.85); color: var(--accent-gold);
    border: 1px solid rgba(195,152,77,0.5); border-radius: 6px;
    padding: 8px 16px; cursor: pointer;
    font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}

/* Show tip + fullscreen button on touch devices only */
@media (pointer: coarse) and (max-width: 1024px) {
    .atlas-fs-btn { display: flex !important; }
}

/* Fullscreen active state */
.atlas-section.atlas-fullscreen {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    z-index: 9999; padding: 0 !important;
    display: flex; flex-direction: column; overflow: hidden;
}
/* Hide everything except the map in fullscreen */
.atlas-section.atlas-fullscreen .atlas-header { display: none; }
/* Portrait fullscreen: show search + filter row above map, hide title */
.atlas-fs-exit-portrait { display: none !important; }
@media (orientation: portrait) {
    .atlas-section.atlas-fullscreen .atlas-header { display: block; padding: 8px 12px 4px; }
    .atlas-section.atlas-fullscreen .atlas-header h2 { display: none !important; }
    /* Map: flush below header, SVG sets natural height — no aspect-ratio clip, no auto gap */
    .atlas-section.atlas-fullscreen .map-wrapper {
        aspect-ratio: unset !important;
        max-height: none !important;
        margin: 0 auto !important;
        align-self: flex-start;
    }
    /* Swap exit buttons: hide absolute one, show inline portrait one */
    .atlas-section.atlas-fullscreen .atlas-fs-exit:not(.atlas-fs-exit-portrait) { display: none !important; }
    .atlas-section.atlas-fullscreen .atlas-fs-exit-portrait { display: block !important; position: static !important; }
    /* filter-toggle-row: space exit button to the right of filter toggle */
    .atlas-section.atlas-fullscreen .filter-toggle-row { display: flex; justify-content: space-between; align-items: center; }
}
.atlas-section.atlas-fullscreen .map-wrapper {
    /* aspect-ratio matches the world SVG (2058×1029 = exactly 2:1)
       max-height ensures it never overflows the screen height —
       browser then solves width = height × 2, so full map is visible at zoom 1 */
    flex: 0 0 auto;
    align-self: center;
    margin: auto !important;
    aspect-ratio: 2 / 1;
    max-height: 100dvh;
    width: 100% !important; max-width: 100% !important;
    position: relative !important; left: 0 !important;
    transform: none !important;
    mask-image: none !important; -webkit-mask-image: none !important;
}
.atlas-section.atlas-fullscreen .atlas-fs-exit { display: block; }
.atlas-section.atlas-fullscreen .atlas-fs-btn  { display: none !important; }

/* Keep popup and drawer above fullscreen atlas */
body.atlas-fs-active #atlas-popup  { z-index: 10000; }
body.atlas-fs-active .cart-overlay,
body.atlas-fs-active .cart-drawer  { z-index: 10001; }
body.atlas-fs-active .fab-wrapper  { display: none; }

/* --- 7a. Search Bar & Filter --- */
.search-wrapper {
    display: flex; gap: 10px; max-width: 700px; margin: 0 auto 1rem; position: relative; z-index: 5;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
}

.quest-search {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 45px 14px 24px;
    border: 1px solid rgba(195, 152, 77, 0.5);
    background-color: var(--primary-teal);
    color: var(--bg-white);
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.quest-search::placeholder { color: #8e9a9f; }
.quest-search:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 5px 20px rgba(195, 152, 77, 0.4);
}

.clear-search-btn {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    font-size: 1.5rem; cursor: pointer;
    opacity: 0; visibility: hidden; transition: var(--transition);
    line-height: 1; padding: 0; outline: none; z-index: 10;
}
.clear-search-btn.visible { opacity: 1; visibility: visible; }
.clear-search-btn:hover { color: var(--accent-gold); transform: translateY(-50%) scale(1.2); }

/* --- 7b. Filter Buttons --- */
.filter-container {
    display: flex; justify-content: center; gap: 0.8rem;
    flex-wrap: wrap; position: relative; z-index: 5;
}

/* Filter dropdown wrapper */
.filter-dropdown-wrap { position: relative; z-index: 20; margin-bottom: 3rem; }

/* Filter toggle pill — mobile/tablet only */
.filter-toggle-row {
    display: none;
    justify-content: center;
    margin-bottom: 0.8rem;
    position: relative; z-index: 20;
}
.filter-toggle-btn {
    background: transparent; border: 1px solid var(--accent-gold);
    color: var(--accent-gold); padding: 9px 20px; border-radius: 20px;
    font-family: 'Cinzel', serif; font-size: 0.7rem; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-toggle-btn.active { background: var(--accent-gold); color: #fff; }
.filter-toggle-arrow { font-size: 0.75rem; transition: transform 0.2s ease; }
.filter-toggle-btn[aria-expanded="true"] .filter-toggle-arrow { transform: rotate(180deg); }

@media (max-width: 1024px) {
    .quest-search { font-size: 0.8rem; }
    .filter-toggle-row { display: flex; }
    .filter-container {
        display: none; flex-direction: column; align-items: stretch;
        position: absolute; z-index: 30;
        background: var(--secondary-teal);
        border: 1px solid rgba(195,152,77,0.35);
        border-radius: 12px; padding: 10px;
        gap: 6px; width: 200px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        left: 50%; transform: translateX(-50%);
        margin-bottom: 0;
    }
    .filter-container.open { display: flex; }
    .filter-btn {
        flex-shrink: 0; width: 100%; text-align: center;
        padding: 9px 16px; font-size: 0.68rem;
    }
    /* Globe button — same size as text pills in dropdown */
    .filter-btn-globe { padding: 9px 16px; justify-content: center; display: flex; align-items: center; gap: 6px; }
}
.filter-btn {
    background: transparent; border: 1px solid var(--accent-gold);
    color: var(--accent-gold); padding: 8px 18px; border-radius: 20px;
    font-family: 'Cinzel', serif; font-size: 0.7rem; cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease; text-transform: uppercase; letter-spacing: 1px;
}
.filter-btn.active { background: var(--accent-gold); color: var(--bg-white); }
.filter-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.filter-btn-globe { padding: 6px 10px; position: relative; }
.filter-btn-globe svg { width: 16px; height: 16px; }
.globe-label-mobile { display: none; }
@media (max-width: 768px) {
    .filter-btn-globe svg { display: none; }
    .globe-label-mobile { display: inline; }
    .filter-btn-globe { padding: 7px 13px; }
}

.map-wrapper {
    position: relative; width: 100%; max-width: 900px; margin: 0 auto;
    overflow: hidden;
    user-select: none; -webkit-user-select: none;
    transition: max-width 0.35s ease-in-out;
    mask-image:
        linear-gradient(to right,  transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-composite: source-in;
}

/* Shared floating popup — lives outside map-wrapper so overflow:hidden can't clip it */
#atlas-popup {
    position: absolute; bottom: auto; z-index: 500;
    transform: translateX(-50%) translateY(calc(-100% + 8px));
    pointer-events: none; opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#atlas-popup.visible {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(calc(-100% - 12px));
}
/* Flipped: pin is near the top — popup drops below instead */
#atlas-popup.flipped { transform: translateX(-50%) translateY(-8px); }
#atlas-popup.flipped.visible { transform: translateX(-50%) translateY(12px); }
/* Pop-left: popup appears to the left of the pin */
#atlas-popup.pop-left { transform: translateX(8px) translateY(-50%); }
#atlas-popup.pop-left.visible { transform: translateX(0) translateY(-50%); }
/* Pop-right: popup appears to the right of the pin */
#atlas-popup.pop-right { transform: translateX(-8px) translateY(-50%); }
#atlas-popup.pop-right.visible { transform: translateX(0) translateY(-50%); }

/* Atlas scroll/zoom hint — fades in once per session, then gone */
.atlas-hint {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: rgba(8, 23, 29, 0.82); border: 1px solid rgba(195, 152, 77, 0.35);
    color: var(--accent-gold); font-family: 'Cinzel', serif; font-size: 0.62rem;
    letter-spacing: 0.1em; white-space: nowrap;
    padding: 0.45rem 1.1rem; border-radius: 2px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    pointer-events: none; z-index: 40;
    opacity: 0; transition: opacity 0.5s ease;
}
.atlas-hint.visible { opacity: 1; }

/* --- 7c. Map Canvas & Zoom Controls --- */
.map-canvas {
    position: relative; width: 100%;
    transform-origin: center center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Zoom Controls */
.map-zoom-controls {
    position: absolute; bottom: 12px; right: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    z-index: 30;
}
.zoom-btn {
    width: 30px; height: 30px;
    background: rgba(8, 23, 29, 0.88); border: 1px solid rgba(195, 152, 77, 0.45);
    color: var(--accent-gold); font-size: 1.1rem; line-height: 1; cursor: pointer;
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    font-family: 'Cinzel', serif;
}
.zoom-btn:hover:not(:disabled) { background: rgba(195, 152, 77, 0.18); border-color: var(--accent-gold); }
.zoom-btn:disabled { opacity: 0.3; cursor: default; }
.zoom-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.zoom-reset-btn { font-size: 0.85rem; }
.zoom-label {
    color: var(--accent-gold); font-family: 'Cinzel', serif; font-size: 0.55rem;
    text-align: center; opacity: 0.65; user-select: none; letter-spacing: 0.05em;
}


.world-map-img {
    width: 100%; height: auto; display: block; position: relative; z-index: 1;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) invert(72%) sepia(21%) saturate(1131%) hue-rotate(349deg) brightness(95%) contrast(90%);
    pointer-events: none; opacity: 0.9;
}

/* Empty Radar Message */
.empty-radar-msg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(8, 23, 29, 0.85); border: 1px solid rgba(195, 152, 77, 0.4);
    color: var(--accent-gold); font-family: 'Cinzel', serif; font-size: 1.1rem;
    text-align: center; padding: 1.5rem 2rem; border-radius: 4px; line-height: 1.5;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 20;
    opacity: 0; visibility: hidden; transition: var(--transition);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.empty-radar-msg.active { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
    .empty-radar-msg { font-size: 0.62rem; padding: 0.45rem 0.7rem; max-width: calc(100% - 48px); white-space: nowrap; }
}

/* --- 7d. Waypoint Pins --- */
.waypoint {
    position: absolute; width: 14px; height: 14px; background-color: var(--accent-gold);
    border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%) scale(var(--wp-s, 1));
    z-index: 10; transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.4s ease; box-shadow: 0 0 10px rgba(195, 152, 77, 0.8);
    touch-action: manipulation;
}
.waypoint.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0); }

/* Invisible hover bridge */
.waypoint::before {
    content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px;
    border-radius: 50%; z-index: -1; pointer-events: none;
}
.waypoint:hover::before { pointer-events: auto; }
/* Slightly larger pins on mobile for easier tapping */
@media (max-width: 768px) {
    .waypoint { width: 18px; height: 18px; }
    .waypoint.specific { width: 16px; height: 16px; }
    .waypoint::before { pointer-events: auto; } /* always-on touch target (~48px hit area) */
}

.waypoint::after {
    content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px;
    border-radius: 50%; border: 2px solid var(--accent-gold); animation: pulse 2s infinite;
    opacity: 0; pointer-events: none;
}
.waypoint:hover { background-color: var(--bg-white); z-index: 500; transform: translate(-50%, -50%) scale(var(--wp-sh, 1.1)); }

/* Continent Pins */
.waypoint.continent {
    width: 16px; height: 16px; background-color: #d6a64a;
    outline: 1px solid rgba(195, 152, 77, 0.8);
    outline-offset: 3px;
}

/* Specific Destination Pins */
.waypoint.specific { width: 10px; height: 10px; background-color: #e8bd6c; }
.waypoint.specific::after { top: -4px; left: -4px; right: -4px; bottom: -4px; }

@keyframes pulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }

/* --- 7e. Tooltip Popup --- */
.waypoint-popup {
    position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%) translateY(15px);
    width: max-content; min-width: 300px; max-width: 400px;
    background-color: var(--primary-teal); border: 1px solid rgba(195, 152, 77, 0.3);
    border-top: 3px solid var(--accent-gold); border-radius: 4px; padding: 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.7); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; text-align: left; cursor: default;
    overflow: hidden;
}

.waypoint-popup::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0; border-style: solid; border-color: var(--primary-teal) transparent transparent transparent; z-index: 2; }
.waypoint-popup::before { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-width: 9px 9px 0; border-style: solid; border-color: rgba(195, 152, 77, 0.3) transparent transparent transparent; z-index: 1; }
/* Flipped state — arrow moves to top, points upward */
#atlas-popup.flipped::after  { bottom: auto; top: -8px;  border-width: 0 8px 8px; border-color: transparent transparent var(--primary-teal) transparent; }
#atlas-popup.flipped::before { bottom: auto; top: -10px; border-width: 0 9px 9px; border-color: transparent transparent rgba(195,152,77,0.3) transparent; }
/* Pop-left — arrow on right side, points right toward pin */
#atlas-popup.pop-left::after  { bottom: auto; top: 50%; left: auto; right: -8px;  transform: translateY(-50%); border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--primary-teal); }
#atlas-popup.pop-left::before { bottom: auto; top: 50%; left: auto; right: -10px; transform: translateY(-50%); border-width: 9px 0 9px 9px; border-color: transparent transparent transparent rgba(195,152,77,0.3); }
/* Pop-right — arrow on left side, points left toward pin */
#atlas-popup.pop-right::after  { bottom: auto; top: 50%; left: -8px;  transform: translateY(-50%); border-width: 8px 8px 8px 0; border-color: transparent var(--primary-teal) transparent transparent; }
#atlas-popup.pop-right::before { bottom: auto; top: 50%; left: -10px; transform: translateY(-50%); border-width: 9px 9px 9px 0; border-color: transparent rgba(195,152,77,0.3) transparent transparent; }

/* Popup hero image — full-bleed banner, no negative margins needed (popup has padding:0) */
.wp-image {
    width: 100%; height: 130px;
    background-size: cover; background-position: center;
}
/* Popup body — padding lives here, not on the popup root */
.wp-body { padding: 1rem 1.2rem; width: 100%; box-sizing: border-box; }

/* Popup Typography */
.wp-title { font-family: 'Cinzel', serif; color: var(--accent-gold); font-size: 1.35rem; margin-bottom: 0.1rem; white-space: normal; line-height: 1; }
.wp-lore { display: block; font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--accent-gold); font-style: italic; margin-bottom: 0.5rem; opacity: 0.8; }
.wp-desc { color: #d1d8dc; font-size: 0.85rem; margin-bottom: 0.8rem; line-height: 1.5; }
.wp-ideas { list-style: none; padding: 0; margin-bottom: 0.8rem; }
.wp-ideas li { position: relative; padding-left: 18px; font-size: 0.8rem; color: var(--bg-white); margin-bottom: 0.4rem; line-height: 1.3; }
.wp-ideas li::before { content: '✦'; position: absolute; left: 0; top: 1px; color: var(--accent-gold); font-size: 0.75rem; }
.wp-cta { text-align: center; border-top: 1px solid rgba(195, 152, 77, 0.2); padding-top: 0.8rem; }
.wp-cta a { font-size: 0.75rem; padding: 8px 16px; width: 100%; }

/* Popup close button — mobile only, hidden on desktop */
.wp-close-btn {
    display: none;
    position: absolute; top: 7px; right: 8px;
    background: none; border: none; color: var(--accent-gold);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px 6px;
    opacity: 0.7; z-index: 10;
}
.wp-close-btn:active { opacity: 1; }
@media (max-width: 768px) { .wp-close-btn { display: block; } }

/* Mobile popup — whole popup scrolls, image slides away naturally */
@media (max-width: 768px) {
    #atlas-popup {
        min-width: 260px; max-width: calc(100vw - 32px);
        overflow-y: auto; max-height: 60dvh;
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: rgba(195,152,77,0.6) transparent;
        background:
            linear-gradient(to top, #08171d 0%, transparent 100%) bottom / 100% 48px no-repeat scroll,
            linear-gradient(#08171d, #08171d) bottom / 100% 48px no-repeat local,
            #08171d;
    }
    #atlas-popup::-webkit-scrollbar { width: 4px; }
    #atlas-popup::-webkit-scrollbar-track { background: transparent; }
    #atlas-popup::-webkit-scrollbar-thumb { background: rgba(195,152,77,0.6); border-radius: 2px; }
    #atlas-popup .wp-body { padding: 0.9rem 1.0rem; }
    #atlas-popup .wp-close-btn { position: sticky; top: 8px; float: right; z-index: 10; margin-right: 4px; }
}

/* Fullscreen popup — whole popup scrolls, image slides away naturally */
body.atlas-fs-active #atlas-popup {
    min-width: 260px; max-width: min(340px, calc(100vw - 48px));
    overflow-y: auto; max-height: 70dvh;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(195,152,77,0.6) transparent;
    background:
        linear-gradient(to top, #08171d 0%, transparent 100%) bottom / 100% 48px no-repeat scroll,
        linear-gradient(#08171d, #08171d) bottom / 100% 48px no-repeat local,
        #08171d;
}
body.atlas-fs-active #atlas-popup::-webkit-scrollbar { width: 4px; }
body.atlas-fs-active #atlas-popup::-webkit-scrollbar-thumb { background: rgba(195,152,77,0.6); border-radius: 2px; }
body.atlas-fs-active #atlas-popup .wp-body { padding: 0.8rem 1.0rem; }
body.atlas-fs-active #atlas-popup .wp-close-btn { position: sticky; top: 8px; float: right; z-index: 10; margin-right: 4px; }

/* Popup Badges */
.wp-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.wp-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 20px;
    font-size: 0.62rem; font-family: 'Montserrat', sans-serif; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.badge-wonder   { background: rgba(195, 152, 77, 0.12); color: #c3984d; border: 1px solid rgba(195, 152, 77, 0.35); }
.badge-park     { background: rgba(74,  148,  90, 0.12); color: #5aad70; border: 1px solid rgba(74,  148,  90, 0.35); }
.badge-historic { background: rgba(180, 110,  60, 0.12); color: #c87a45; border: 1px solid rgba(180, 110,  60, 0.35); }
.badge-popular  { background: rgba(88,  172, 210, 0.12); color: #55b0d8; border: 1px solid rgba(88,  172, 210, 0.35); }
.badge-reserve  { background: rgba(120, 190, 140, 0.12); color: #6dbf8a; border: 1px solid rgba(120, 190, 140, 0.35); }

/* ================================================================
   7f. WAYPOINT COORDINATE MAP
   ================================================================ */

/* --- Continent Pins --- */
.wp-africa     { top: 43%;   left: 53%;   }
.wp-antarctica { top: 92%;   left: 50%;   }
.wp-asia       { top: 22%;   left: 68%;   }
.wp-europe     { top: 19%;   left: 54%;   }
.wp-namerica   { top: 24%;   left: 21%;   }
.wp-oceania    { top: 65%;   left: 84%;   }
.wp-samerica   { top: 59%;   left: 31%;   }

/* --- North America --- */
.wp-alaska         { top: 12%;    left: 4%;    }
.wp-aruba          { top: 42.1%;  left: 27.9%; }
.wp-bahamas        { top: 35%;    left: 25.7%; }
.wp-banff          { top: 19.5%;  left: 16%;   }
.wp-barbados       { top: 41.6%;  left: 30.8%; }
.wp-belize         { top: 39.2%;  left: 22.8%; }
.wp-bermuda        { top: 31%;    left: 29.5%; }
.wp-california     { top: 27%;    left: 14%;   }
.wp-cancun         { top: 36.7%;  left: 23.3%; }
.wp-caribbean      { top: 37.4%;  left: 26.3%; }
.wp-cdmx           { top: 38%;    left: 20%;   }
.wp-costarica      { top: 43.4%;  left: 24%;   }
.wp-costamaya      { top: 38.5%;  left: 23.1%; }
.wp-cozumel        { top: 37.4%;  left: 23.4%; }
.wp-curacao        { top: 42.3%;  left: 28.3%; }
.wp-disneyland     { top: 28.9%;  left: 14.3%; }
.wp-dominican      { top: 38.3%;  left: 27.8%; }
.wp-grandcanyon    { top: 28.7%;  left: 16.3%; }
.wp-grandcayman    { top: 38%;    left: 24.8%; }
.wp-greenland      { top: 6%;     left: 36%;   }
.wp-havana         { top: 35.9%;  left: 24.6%; }
.wp-hawaii         { top: 38%;    left: 4.5%;  }
.wp-jamaica        { top: 38.7%;  left: 25.9%; }
.wp-lasvegas       { top: 28.5%;  left: 15.6%; }
.wp-legoland-ca    { top: 29.3%;  left: 14.6%; }
.wp-loscabos       { top: 35.7%;  left: 17%;   }
.wp-miami          { top: 34%;    left: 25.1%; }
.wp-montreal       { top: 22%;    left: 26%;   }
.wp-nola           { top: 32%;    left: 22.5%; }
.wp-nyc            { top: 26%;    left: 26%;   }
.wp-oaxaca         { top: 39.7%;  left: 20.7%; }
.wp-orlando        { top: 33%;    left: 24.8%; }
.wp-panama         { top: 44%;    left: 25.3%; }
.wp-pnw            { top: 23%;    left: 13.5%; }
.wp-puerto-rico    { top: 37.8%;  left: 28.8%; }
.wp-roatan         { top: 39.7%;  left: 23.4%; }
.wp-stlucia        { top: 40.9%;  left: 30.4%; }
.wp-tulum          { top: 37.6%;  left: 23.1%; }
.wp-vancouver      { top: 20.3%;  left: 13.4%; }
.wp-virgin-islands { top: 38.5%;  left: 29.8%; }
.wp-yellowstone    { top: 23%;    left: 17.5%; }
.wp-yukon          { top: 12%;    left: 10%;   }

/* --- South America --- */
.wp-amazon         { top: 51%;    left: 30%;   }
.wp-buenos-aires   { top: 70%;    left: 31.1%; }
.wp-colombia       { top: 45.5%;  left: 26.7%; }
.wp-galapagos      { top: 50%;    left: 23%;   }
.wp-machu          { top: 57%;    left: 27.5%; }
.wp-patagonia      { top: 76%;    left: 28%;   }
.wp-rio            { top: 63%;    left: 35.2%; }

/* --- Europe --- */
.wp-alps           { top: 21.7%;  left: 49.2%; }
.wp-amsterdam      { top: 18.5%;  left: 48.5%; }
.wp-athens         { top: 27.2%;  left: 53.6%; }
.wp-barcelona      { top: 25%;    left: 47.7%; }
.wp-berlin         { top: 18.5%;  left: 50.3%; }
.wp-budapest       { top: 21.5%;  left: 53%;   }
.wp-croatia        { top: 23.8%;  left: 51.8%; }
.wp-denmark        { top: 16.3%;  left: 49.7%; }
.wp-faroe          { top: 12.7%;  left: 45.2%; }
.wp-finland        { top: 13%;    left: 53.5%; }
.wp-fjords         { top: 14%;    left: 49.2%; }
.wp-greece         { top: 26.2%;  left: 53.4%; }
.wp-iceland        { top: 11%;    left: 42%;   }
.wp-ireland        { top: 18%;    left: 44.9%; }
.wp-lisbon         { top: 26.5%;  left: 44.6%; }
.wp-london         { top: 19%;    left: 47.1%; }
.wp-madrid         { top: 25.7%;  left: 46.2%; }
.wp-paris          { top: 20.7%;  left: 47.3%; }
.wp-prague         { top: 21%;    left: 51%;   }
.wp-rome           { top: 25%;    left: 50.7%; }
.wp-santorini      { top: 27.6%;  left: 54.1%; }
.wp-scotland       { top: 15.4%;  left: 45.8%; }
.wp-sweden         { top: 12%;    left: 51.5%; }
.wp-tuscany        { top: 24.1%;  left: 50.3%; }
.wp-venice         { top: 22.5%;  left: 50.5%; }

/* --- Africa --- */
.wp-cairo          { top: 31.8%;  left: 55.6%; }
.wp-capetown       { top: 69.5%;  left: 52.2%; }
.wp-ethiopia       { top: 45%;    left: 58%;   }
.wp-kilimanjaro    { top: 51%;    left: 57%;   }
.wp-madagascar     { top: 61%;    left: 60%;   }
.wp-marrakesh      { top: 30.5%;  left: 44.8%; }
.wp-mauritius      { top: 61.5%;  left: 62.9%; }
.wp-namibia        { top: 62%;    left: 51.3%; }
.wp-okavango       { top: 62%;    left: 53%;   }
.wp-rwanda         { top: 52%;    left: 55.3%; }
.wp-sahara         { top: 37%;    left: 51%;   }
.wp-seychelles     { top: 52.3%;  left: 62.3%; }
.wp-tunisia        { top: 28.7%;  left: 49.8%; }
.wp-vfalls         { top: 59.8%;  left: 54.5%; }
.wp-zanzibar       { top: 53%;    left: 58%;   }

/* --- Asia (incl. Middle East) --- */
.wp-angkor             { top: 41.5%;  left: 75.9%; }
.wp-bali               { top: 54.4%;  left: 78.7%; }
.wp-beijing            { top: 26%;    left: 79.1%; }
.wp-cappadocia         { top: 26.9%;  left: 56.6%; }
.wp-dubai              { top: 34.3%;  left: 62.5%; }
.wp-georgian-caucasus  { top: 25%;    left: 59%;   }
.wp-himalayas          { top: 34%;    left: 70%;   }
.wp-hongkong           { top: 36%;    left: 78.5%; }
.wp-istanbul           { top: 25.2%;  left: 55%;   }
.wp-jordan             { top: 31%;    left: 57%;   }
.wp-kerala             { top: 43.8%;  left: 68.2%; }
.wp-kyoto              { top: 28.5%;  left: 84.5%; }
.wp-maldives           { top: 48.2%;  left: 67.3%; }
.wp-mongolia           { top: 23%;    left: 76%;   }
.wp-myanmar            { top: 37%;    left: 74%;   }
.wp-oman               { top: 37.3%;  left: 62.6%; }
.wp-osaka              { top: 29%;    left: 84.2%; }
.wp-philippines        { top: 42.5%;  left: 80.7%; }
.wp-rajasthan          { top: 34%;    left: 67.4%; }
.wp-seoul              { top: 27.4%;  left: 82%;   }
.wp-shanghai           { top: 31%;    left: 80.4%; }
.wp-singapore          { top: 48.5%;  left: 75.6%; }
.wp-srilanka           { top: 45%;    left: 69.2%; }
.wp-taiwan             { top: 35.5%;  left: 80.25%;}
.wp-thai               { top: 40%;    left: 75%;   }
.wp-tokyo              { top: 28.4%;  left: 85.5%; }
.wp-uzbekistan         { top: 25%;    left: 64%;   }
.wp-vietnam            { top: 41%;    left: 77%;   }

/* --- Oceania --- */
.wp-borabora   { top: 60%;    left: 6%;    }
.wp-fiji       { top: 60%;    left: 95.9%; }
.wp-gbr        { top: 60%;    left: 88%;   }
.wp-nz         { top: 75%;    left: 94%;   }
.wp-sydney     { top: 69.6%;  left: 88.5%; }

/* ================================================================
   8. THE GUILD SECTION
   ================================================================ */
.guild-section {
    padding: 8rem 5%;
    position: relative;
    background-image: url('guild_images/guild-devana-jalalludin.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    text-align: center;
}

.guild-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 23, 29, 0.85);
    z-index: 1;
}

.guild-section .section-header { position: relative; z-index: 2; margin-bottom: 4rem; }

.guild-section .section-header h2,
.guild-section .testimonials h3 {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold) !important;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.guild-section .section-header p { color: #d1d8dc; max-width: 650px; margin: 0 auto; font-size: 0.95rem; }
.guild-section .testimonials h3 { margin-bottom: 2.5rem; }

.guild-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; }

.guildmaster-card {
    display: flex; align-items: center; gap: 3.5rem; background: var(--bg-white);
    padding: 3.5rem; border-radius: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    text-align: left; border-left: 4px solid var(--accent-gold);
    transition: var(--transition);
}
.guildmaster-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.6); }

.gm-avatar {
    width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary-teal); padding: 5px; flex-shrink: 0;
}

.gm-info h3 { color: var(--primary-teal); font-size: 2.2rem; margin-bottom: 0.2rem; }
.gm-title {
    font-family: 'Cinzel', serif; color: var(--accent-gold); font-size: 0.95rem;
    text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 0.9rem; letter-spacing: 1px;
}
.gm-badges { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.gm-verified, .gm-social-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; line-height: 1;
    background: rgba(195, 152, 77, 0.1); color: #a07830;
    border: 1px solid rgba(195, 152, 77, 0.35);
    text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease;
}
.gm-verified:hover, .gm-social-link:hover { background: rgba(195, 152, 77, 0.2); border-color: rgba(195, 152, 77, 0.6); }
.gm-verified svg { width: 13px; height: 13px; flex-shrink: 0; }
.gm-social-link svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.gm-verified, .gm-social-link { position: relative; }
.gm-info p { color: var(--text-muted); font-size: 1rem; line-height: 1.8; }
.review-verified { font-size: 0.7rem; font-weight: 700; color: #5aad70; margin-left: 6px; letter-spacing: 0.03em; }

/* --- Testimonials --- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
.test-card {
    background: var(--bg-white); padding: 3rem 2.5rem; border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); position: relative; text-align: left;
    transition: var(--transition);
}
.test-card:hover { transform: translateY(-5px); }
.test-card::before {
    content: '"'; position: absolute; top: 15px; left: 20px;
    font-family: 'Cinzel', serif; font-size: 5rem; color: rgba(195, 152, 77, 0.15);
    line-height: 1;
}
.quote { font-style: italic; color: var(--text-dark); margin-bottom: 1.5rem; font-size: 0.95rem; position: relative; z-index: 2; line-height: 1.7; }
.author { font-family: 'Cinzel', serif; color: var(--accent-gold); font-size: 0.85rem; font-weight: 700; display: block; letter-spacing: 0.5px; }

@media (max-width: 768px) {
    .guild-section { padding: 5rem 5% 7rem; }
    .guild-section .section-header h2,
    .guild-section .testimonials h3 { font-size: clamp(1.3rem, 7.5vw, 2.2rem); }
    .guild-section .section-header p { font-size: 0.90rem; }
    .guild-container { gap: 3rem; }
    .guildmaster-card { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1.2rem; }
    .gm-info { width: 100%; }
    .gm-badges { justify-content: center; }
    .gm-avatar { width: 130px; height: 130px; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .test-card { padding: 2rem 1.5rem; }
    .quote-text::before, .quote-text::after { font-size: 0.9rem; }
    .gm-info p { font-size: 0.78rem; line-height: 1.5; }
    .quote { font-size: 0.8rem; line-height: 1.6; }
    .author { font-size: 0.72rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .guild-section { padding: 6rem 5%; }
    .guild-section .section-header h2,
    .guild-section .testimonials h3 { font-size: clamp(1.3rem, 7.5vw, 2.2rem); }
    .guild-section .section-header p { font-size: 0.90rem; }
    .guild-container { gap: 4rem; }
    .guildmaster-card { flex-direction: column; text-align: center; padding: 2.5rem 2rem; gap: 1.5rem; }
    .gm-info { width: 100%; }
    .gm-badges { justify-content: center; }
    .gm-avatar { width: 150px; height: 150px; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .test-card { padding: 2.5rem 1.5rem; }
}

/* ================================================================
   9. QUOTE TRANSITION SECTION
   ================================================================ */
.quote-section { padding: 6rem 5%; background-color: var(--bg-white); text-align: center; }
.quote-container { max-width: 900px; margin: 0 auto; }

@media (max-width: 768px) {
    .quote-section { padding: 2.5rem 5%; }
}
.quote-text {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.8rem, 3.2vw, 2rem);
    color: var(--primary-teal);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    text-align: center;
}
.quote-text::before {
    content: '✦';
    color: var(--accent-gold);
    font-size: 1.2rem;
    display: block;
    text-align: center;
    opacity: 0.6;
    margin-bottom: 0.6rem;
}
.quote-author {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    display: block;
}
.quote-author::after {
    content: '✦';
    color: var(--accent-gold);
    font-size: 1.2rem;
    display: block;
    text-align: center;
    opacity: 0.6;
    margin-top: 0.9rem;
}

/* ================================================================
   10. CONTACT / BOOKING SECTION
   ================================================================ */
.contact-section { padding: 6rem 5%; background-color: var(--bg-white); color: var(--text-dark); }
.contact-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.contact-header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; align-items: center; }
.contact-header .contact-logo {
    width: 80px; height: 80px; margin-bottom: 1rem; border-radius: 50%;
    border: 2px solid rgba(195, 152, 77, 0.4); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.contact-header h2 { color: var(--primary-teal); font-size: 2.2rem; margin-bottom: 1rem; }
.contact-header p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.8; max-width: 580px; margin: 0 auto; text-wrap: balance; }

.contact-form-container {
    width: 95%; max-width: 1200px;
    background: linear-gradient(145deg, var(--secondary-teal) 0%, #081216 100%);
    padding: 3.5rem 3rem; border-radius: 6px;
    border: 1px solid rgba(195, 152, 77, 0.4);
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,255,255,0.03);
    margin-bottom: 3rem; position: relative;
}

/* Ornate Inner Border */
.contact-form-container::before {
    content: ''; position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid rgba(195, 152, 77, 0.15);
    pointer-events: none; border-radius: 3px;
}

.quest-form .form-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.quest-form .form-row .form-group { flex: 1; min-width: 200px; }
.quest-form .form-group { margin-bottom: 1.5rem; text-align: left; position: relative; z-index: 2; }
.quest-form label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-gold); margin-bottom: 0.5rem; font-weight: 600; }

/* Interactive Quest Builder UI */
.quest-build-section {
    background: rgba(8, 23, 29, 0.6);
    border: 1px dashed rgba(195, 152, 77, 0.4);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.build-title {
    color: var(--accent-gold);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(195, 152, 77, 0.2);
    padding-bottom: 0.5rem;
}
.quest-build-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.quest-build-tags:empty {
    display: none;
}
#contact-quest-summary:not(:empty) {
    margin-top: 10px;
}
.empty-log-msg {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}
.quest-tag {
    background: var(--accent-gold);
    color: var(--bg-white);
    padding: 6px 12px 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.quest-tag-remove {
    background: rgba(8, 23, 29, 0.3);
    border: none;
    border-radius: 50%;
    color: var(--bg-white);
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
    font-size: 0.65rem;
}
.quest-tag-remove:hover {
    background: var(--primary-teal);
    color: var(--accent-gold);
    transform: scale(1.1);
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Checkbox styling */
.quest-form .checkbox-group { display: flex; align-items: center; margin-top: -0.5rem; margin-bottom: 1.5rem; }
.quest-form .date-opt { margin: 0; }
.quest-form input[type="date"] { margin-bottom: 0.8rem; }
.quest-form .checkbox-group label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; text-transform: none; letter-spacing: normal; color: var(--bg-white); cursor: pointer; font-weight: 400; margin-bottom: 0; }
.quest-form .checkbox-group input[type="checkbox"] { width: auto; padding: 0; margin: 0; cursor: pointer; accent-color: var(--accent-gold); transform: scale(1.2); }

.quest-form input[type="text"], .quest-form input[type="email"], .quest-form input[type="tel"], .quest-form input[type="number"], .quest-form input[type="date"], .quest-form select, .quest-form textarea {
    width: 100%; padding: 12px 15px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(195, 152, 77, 0.3); border-radius: 2px;
    color: var(--bg-white); font-family: 'Montserrat', sans-serif; font-size: 0.9rem;
    transition: border-color 0.3s ease, background-color 0.3s ease; outline: none; color-scheme: dark;
}
.quest-form input:focus, .quest-form select:focus, .quest-form textarea:focus { border-color: var(--accent-gold); background: rgba(255,255,255,0.1); }
.quest-form select { appearance: none; cursor: pointer; }
.quest-form select option { background-color: var(--primary-teal); color: var(--bg-white); }

/* --- Budget Combo Input --- */
.budget-combo { position: relative; }
.budget-combo .budget-input { padding-right: 38px; }
.budget-arrow {
    position: absolute; right: 0; top: 0; height: 100%; width: 38px;
    background: transparent; border: none; color: rgba(195,152,77,0.7);
    font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: color 0.2s ease;
}
.budget-arrow:hover { color: var(--accent-gold); }
.budget-dropdown {
    display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 100;
    list-style: none; margin: 0; padding: 4px 0;
    background: var(--secondary-teal); border: 1px solid rgba(195,152,77,0.35); border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.budget-dropdown.open { display: block; }
.budget-dropdown li {
    padding: 10px 15px; font-family: 'Montserrat', sans-serif; font-size: 0.88rem;
    color: var(--bg-white); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.budget-dropdown li:hover, .budget-dropdown li.selected { background: rgba(195,152,77,0.15); color: var(--accent-gold); }
.quest-form input::placeholder, .quest-form textarea::placeholder { color: #8e9a9f; }

.form-disclaimer {
    text-align: center; font-size: 0.70rem; color: #8e9a9f;
    margin: 2rem auto 0; max-width: 750px; line-height: 1.6;
    position: relative; z-index: 2;
}
.form-disclaimer strong {
    color: var(--accent-gold); font-family: 'Cinzel', serif;
    letter-spacing: 1px; margin-right: 5px;
}

.form-quote {
    text-align: center; font-family: 'Cinzel', serif; color: var(--accent-gold);
    font-style: italic; font-size: 0.95rem; margin: 1.5rem 0 1rem; position: relative; z-index: 2;
}

.btn-submit {
    width: 25%; display: block; margin: 1rem auto 0;
    padding: 16px; font-size: 0.9rem; white-space: nowrap;
    background-color: var(--accent-gold); color: var(--bg-white);
    border: 1px solid var(--accent-gold); cursor: pointer;
    font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 2px;
    transition: var(--transition); border-radius: 2px; font-weight: 600;
    position: relative; z-index: 2;
}
.btn-submit:hover { background-color: transparent; color: var(--accent-gold); }
.form-status {
    margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 4px;
    font-size: 0.85rem; line-height: 1.5; text-align: center;
}
.form-status--success {
    background: rgba(195,152,77,0.12); border: 1px solid rgba(195,152,77,0.4);
    color: var(--accent-gold);
}
.form-status--error {
    background: rgba(180,60,60,0.12); border: 1px solid rgba(180,60,60,0.4);
    color: #e08080;
}

@media (min-width: 769px) and (max-width: 1200px) {
    .btn-submit { width: 55%; padding: 14px 32px; text-align: center; }
}

@media (max-width: 1200px) {
    .quest-form .form-row { flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; }
    .quest-form .form-row .form-group { margin-bottom: 0; }
    .quest-form input[type="date"] { margin-bottom: 0; -webkit-appearance: none; appearance: none; min-height: 46px; }
}

/* Contact Details Row */
.contact-details { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; width: 100%; }
.detail-item { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; }
.detail-item svg { width: 22px; height: 22px; fill: var(--accent-gold); flex-shrink: 0; }
.detail-item a, .detail-item span { color: var(--primary-teal); transition: color 0.3s ease; text-decoration: none; }
.detail-item a:hover { color: var(--accent-gold); }

@media (max-width: 768px) {
    .contact-section { padding: 5rem 5% 7rem; }
    .contact-form-container { width: 100%; padding: 2.5rem 1.5rem; }
    .quest-form .checkbox-group label { font-size: 0.75rem; }
    .quest-form input[type="date"] { margin-bottom: 0; -webkit-appearance: none; appearance: none; min-height: 46px; }
    .btn-submit { width: fit-content; padding: 14px 32px; white-space: nowrap; }
    .contact-details { gap: 1.5rem; flex-direction: column; align-items: center; text-align: center; }
    .contact-header h2 { font-size: clamp(1.3rem, 7.5vw, 2.2rem); }
    .contact-header p { font-size: 0.90rem; }
    .waypoint-popup { width: 260px; min-width: auto; max-width: 88vw; padding: 0; }
    .wp-title { white-space: normal; font-size: 1.2rem; }
    .wp-image { height: 90px; width: 100%; margin: 0; }
    .wp-desc { font-size: 0.72rem; margin-bottom: 0.6rem; line-height: 1.4; }
    .wp-ideas { margin-bottom: 0.6rem; }
    .wp-ideas li { font-size: 0.68rem; padding-left: 14px; margin-bottom: 0.3rem; }
    .wp-ideas li::before { font-size: 0.62rem; }
    .wp-cta { padding-top: 0.6rem; }
    .wp-cta .btn-gold { font-size: 0.6rem; padding: 6px 12px; letter-spacing: 0.05em; }
}

/* Utility */
.btn-full { width: 100%; }

/* ================================================================
   11. FOOTER
   ================================================================ */
footer { background-color: #040a0c; text-align: center; }
.footer-main { padding: 2.5rem 5%; }
.footer-main img { height: 35px; opacity: 0.8; margin-bottom: 1rem; }
.footer-main p { color: #6b7c85; font-size: 0.8rem; margin: 0; }
.footer-main a { color: var(--accent-gold); }
.footer-main a:hover { color: var(--bg-white) !important; }

.sub-footer .footer-legal { display: flex; gap: 1.2rem; }
.footer-legal-link { font-size: 0.75rem; color: #5a6b72; text-decoration: underline; transition: color 0.3s ease; letter-spacing: 0.5px; }
.footer-legal-link:hover { color: var(--bg-white); }

.sub-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 5%; border-top: 1px solid rgba(195, 152, 77, 0.15);
    background-color: #020506; font-size: 0.75rem; color: #5a6b72; letter-spacing: 0.5px;
}
.site-credit a {
    color: inherit; font-family: 'Cinzel', serif; font-weight: 700;
    letter-spacing: 1px; text-decoration: none; transition: var(--transition);
}
.site-credit a:hover { color: var(--bg-white); }

@media (min-width: 769px) and (max-width: 1024px) {
    .sub-footer {
        flex-direction: column; gap: 0.8rem; text-align: center;
        padding: 1.2rem 5%;
    }
    .sub-footer .footer-legal { justify-content: center; }
}

@media (max-width: 768px) {
    .footer-main { padding: 2rem 5%; }
    .sub-footer {
        flex-direction: column; gap: 0.8rem; text-align: center;
        padding: 1.2rem 5%;
    }
    .sub-footer .footer-legal { justify-content: center; }
}

/* ================================================================
   12. QUESTLOG CART (FAB + DRAWER)
   ================================================================ */
/* --- Floating Action Button --- */
@keyframes fabFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Wrapper is always fixed in the DOM — prevents iOS/Chrome first-paint position bug */
.fab-wrapper {
    position: fixed; bottom: 30px; right: 30px; z-index: 1000;
    pointer-events: none;
}
/* Desktop: always visible — icon-only in idle, full pill when items added */
.quest-cart-fab {
    display: flex; pointer-events: auto;
    background-color: var(--secondary-teal); color: var(--accent-gold);
    border: 1px solid rgba(195,152,77,0.3);
    padding: 8px; border-radius: 50px; font-family: 'Cinzel', serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
                padding 0.3s ease, border-color 0.3s ease;
    text-decoration: none; align-items: center; gap: 0;
}
.fab-logo { width: 42px; height: 42px; object-fit: contain; display: block; flex-shrink: 0; }
.fab-label { display: none; }
.cart-count {
    background: var(--bg-white); color: var(--primary-teal);
    border-radius: 50%; padding: 2px 8px; font-size: 0.9rem; font-weight: 700;
    display: none;
}
/* Visible state: items in log — expand to full pill */
.quest-cart-fab.visible {
    background-color: var(--accent-gold); color: var(--bg-white);
    border-color: transparent;
    padding: 12px 20px 12px 14px; gap: 10px;
    animation: fabFadeIn 0.3s ease forwards;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.quest-cart-fab.visible .fab-label { display: inline; }
.quest-cart-fab.visible .cart-count { display: inline; }
.quest-cart-fab.visible .fab-logo { width: 34px; height: 34px; }
.quest-cart-fab:hover {
    background-color: var(--primary-teal); color: var(--accent-gold);
    border-color: rgba(195,152,77,0.5);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}

@media (max-width: 768px) {
    .fab-wrapper { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 28px; }
    /* Mobile: hidden until items added — circular count-only button, no logo */
    .quest-cart-fab { display: none; width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; }
    .quest-cart-fab.visible { display: flex; padding: 0; gap: 0; border: none; }
    .quest-cart-fab:hover { transform: translateY(-3px); }
    .fab-logo, .quest-cart-fab.visible .fab-logo { display: none; }
    .fab-label, .quest-cart-fab.visible .fab-label { display: none; }
    .cart-count, .quest-cart-fab.visible .cart-count { display: inline; font-size: 1.2rem; padding: 0; background: none; color: var(--primary-teal); font-weight: 700; }
}

/* iPad portrait: hide the floating FAB, use static in-flow banner instead */
@media (pointer: coarse) and (min-width: 769px) and (orientation: portrait) {
    .fab-wrapper { display: none !important; }
}

.ipad-cart-banner {
    background-color: var(--accent-gold);
}
.ipad-cart-banner a {
    display: block;
    padding: 18px 24px;
    text-align: center;
    color: var(--primary-teal);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    text-decoration: none;
}
.ipad-cart-count {
    background: var(--primary-teal);
    color: var(--accent-gold);
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 0.85rem;
    margin-left: 8px;
}

/* --- Sliding Cart Drawer --- */
.cart-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 10, 12, 0.8); z-index: 1001;
    opacity: 0; visibility: hidden; transition: var(--transition);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
    position: fixed; top: 0; right: -450px; width: 100%; max-width: 400px; height: 100dvh;
    background-color: var(--secondary-teal); border-left: 2px solid var(--accent-gold);
    z-index: 1002; display: flex; flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5); transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cart-drawer.open { right: 0; }
.cart-drawer.closing { transition: right 0.75s cubic-bezier(0.4, 0, 0.85, 0.6), box-shadow 0.75s ease-in; box-shadow: none; }
.cart-drawer.no-transition { transition: none !important; }

.cart-drawer-header {
    padding: 2rem; border-bottom: 1px solid rgba(195, 152, 77, 0.2);
    display: flex; justify-content: space-between; align-items: center;
}
.cart-drawer-header h3 { color: var(--accent-gold); font-size: 1.5rem; margin: 0; }
.cart-drawer-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.clear-questlog-btn {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    font-size: 0.75rem; color: var(--text-muted); transition: var(--transition);
    border-radius: 2px; line-height: 1;
}
.clear-questlog-btn:hover { color: #c0392b; }
.clear-questlog-btn.confirm { color: #c0392b; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 1px; }
.close-cart-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; transition: var(--transition); padding: 4px; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.close-cart-btn:hover { color: var(--accent-gold); transform: translateY(2px); }
.close-cart-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; border-radius: 2px; }

.cart-drawer-items {
    display: flex; flex-wrap: wrap; gap: 10px;
    min-height: 40px; max-height: 250px; overflow-y: auto;
    flex-shrink: 0; padding-bottom: 0.5rem;
}
.cart-item {
    background: var(--accent-gold); color: var(--bg-white);
    border: 1px solid var(--accent-gold); padding: 6px 12px 6px 16px;
    border-radius: 20px; font-size: 0.8rem; font-family: 'Montserrat', sans-serif;
    font-weight: 600; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.remove-item-btn {
    background: rgba(8, 23, 29, 0.3); border: none; color: var(--bg-white);
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    transition: var(--transition); font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center; outline: none;
}
.remove-item-btn:hover { background: var(--primary-teal); color: var(--accent-gold); transform: scale(1.1); }

.empty-cart-msg { color: var(--text-muted); font-style: italic; text-align: center; margin-top: 2rem; font-size: 0.9rem; }
.empty-cart-link { color: var(--accent-gold); text-decoration: underline; font-style: normal; }
#add-waypoints-link { display: none; margin-top: 12px; font-size: 0.85rem; }
#add-waypoints-link:not(.hidden) { display: block; }

@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Drawer Layout */
.cart-drawer-scrollable {
    flex: 1; overflow-y: auto; padding: 2rem;
    display: flex; flex-direction: column; gap: 1.5rem;
    touch-action: pan-y; overscroll-behavior: contain;
}

.clear-waypoints-btn {
    background: none; border: none; padding: 0; margin-top: 0.5rem;
    color: var(--text-muted); font-size: 0.75rem; text-decoration: underline;
    cursor: pointer; text-align: left; font-family: 'Montserrat', sans-serif;
    transition: var(--transition); display: block; width: max-content;
}
.clear-waypoints-btn:hover { color: #ff6b6b; }
.clear-waypoints-btn.hidden { display: none; }

/* Custom Mod Input */
.custom-mod-container { display: flex; gap: 8px; margin-top: 12px; }
.custom-mod-container input {
    flex: 1; background: rgba(8, 23, 29, 0.6); border: 1px solid rgba(195, 152, 77, 0.3);
    color: var(--bg-white); padding: 8px 12px; border-radius: 20px; font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif; outline: none; transition: var(--transition);
}
.custom-mod-container input:focus { border-color: var(--accent-gold); }
.custom-mod-btn {
    background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold);
    padding: 0 16px; border-radius: 20px; cursor: pointer; font-family: 'Cinzel', serif;
    font-weight: 700; font-size: 0.75rem; transition: var(--transition); text-transform: uppercase;
}
.custom-mod-btn:hover { background: var(--accent-gold); color: var(--bg-white); }

.drawer-section-title {
    color: var(--accent-gold); font-family: 'Cinzel', serif; font-weight: 700;
    font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid rgba(195, 152, 77, 0.2); padding-bottom: 0.5rem;
    margin-top: 1rem; margin-bottom: -0.5rem;
}
.drawer-section-title:first-child { margin-top: 0; }

.drawer-subtext { color: var(--text-muted); font-size: 0.8rem; font-style: italic; margin-bottom: 0.5rem; }

.drawer-modifiers { display: flex; flex-wrap: wrap; gap: 10px; }
#drawer-modifiers { flex-direction: column; align-items: flex-start; }
.form-modifiers { margin-top: 12px; justify-content: center; }

.mod-tag {
    background: rgba(8, 23, 29, 0.6); border: 1px solid rgba(195, 152, 77, 0.3);
    color: #d1d8dc; padding: 6px 10px; border-radius: 20px; font-size: 0.72rem;
    font-family: 'Montserrat', sans-serif; cursor: pointer; transition: var(--transition);
}
.mod-tag:hover { border-color: var(--accent-gold); color: var(--bg-white); }
.mod-tag.active {
    background: var(--accent-gold); color: var(--bg-white);
    border-color: var(--accent-gold); box-shadow: 0 4px 10px rgba(195, 152, 77, 0.4);
    transform: translateY(-2px);
}

.drawer-textarea {
    width: 100%; background: rgba(8, 23, 29, 0.6); border: 1px solid rgba(195, 152, 77, 0.3);
    border-radius: 4px; color: var(--bg-white); padding: 12px; font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem; resize: vertical; min-height: 80px; outline: none; transition: var(--transition);
}
.drawer-textarea:focus { border-color: var(--accent-gold); background: rgba(8, 23, 29, 0.9); }

@media (max-width: 768px) {
    .cart-drawer { max-width: 100%; border-left: none; border-top: 2px solid var(--accent-gold); }
    .cart-drawer-header { padding: 1.2rem 1.5rem; }
    .cart-drawer-header h3 { font-size: 1.2rem; }
    .cart-drawer-scrollable { padding: 1.2rem 1.5rem; gap: 1.2rem; }
    #drawer-modifiers { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    /* Prevent auto-zoom on input focus (Chrome/iOS — triggers when font-size < 16px) */
    #custom-mod-input, #drawer-notes,
    .quest-search,
    .quest-form input[type="text"], .quest-form input[type="email"],
    .quest-form input[type="tel"], .quest-form input[type="number"],
    .quest-form input[type="date"], .quest-form select, .quest-form textarea { font-size: 16px; }
}
.drawer-textarea::placeholder { color: #5a6b72; }

/* ================================================================
   13. INSPIRE ME BUTTON
   ================================================================ */
.inspire-container { position: relative; display: flex; align-items: center; }

.inspire-icon-btn {
    background: var(--primary-teal); border: 1px solid rgba(195, 152, 77, 0.5);
    color: var(--accent-gold); width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); outline: none; flex-shrink: 0;
}
.inspire-icon-btn svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.4s ease; }
.inspire-icon-btn:hover { border-color: var(--accent-gold); box-shadow: 0 5px 20px rgba(195, 152, 77, 0.4); }
.inspire-icon-btn:hover svg { transform: rotate(72deg) scale(1.1); }

/* ================================================================
   14. MOBILE LANDSCAPE
   Targets phones rotated to landscape (short viewport, not tablets/desktops)
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {

    /* Nav — compact */
    nav { padding: 0.4rem 5%; }
    .nav-logo { font-size: 1rem; }
    .nav-links a { font-size: 0.65rem; }

    /* Hero — landscape needs aggressive downsizing */
    .hero { margin-top: 52px; height: calc(100dvh - 52px); padding: 0 3%; }
    .hero h1 { font-size: clamp(1rem, 4vw, 1.6rem); margin-bottom: 0.4rem; white-space: normal; }
    .hero-graphic { width: 70px; height: 70px; margin-bottom: 0.4rem; }
    .hero p { font-size: 0.78rem; margin-bottom: 0.8rem; line-height: 1.4; }
    .hero-actions { flex-direction: row; gap: 0.5rem; }
    .hero-actions .btn-gold,
    .hero-actions .btn-ghost { width: auto; padding: 8px 16px; font-size: 0.7rem; letter-spacing: 0.5px; }
    .view-atlas-link { font-size: 0.7rem; margin-top: -0.8rem; margin-bottom: 0.8rem; }

    /* Global section header scaling */
    h2 { font-size: clamp(1rem, 4vw, 1.6rem) !important; }
    h3 { font-size: clamp(0.9rem, 3vw, 1.3rem) !important; }
    .offerings .section-header p,
    .guild-section .section-header p,
    .contact-header p,
    .atlas-header p { font-size: 0.50rem !important; }

    /* Sections — trim vertical padding, screen height is limited */
    .offerings    { padding: 2.5rem 5%; }
    .atlas-section { padding: 2.5rem 5% 4rem; }
    .guild-section { padding: 2.5rem 5%; }
    .quote-section { padding: 1.5rem 5%; }
    .contact-section { padding: 2.5rem 5%; }

    /* Quest cards — single column, compact height */
    .compact-quests { grid-template-columns: 1fr; gap: 0.6rem; }
    .quest-card { height: 100px; }
    .quest-card.active { height: 175px; }
    .qc-content h3 { font-size: 0.85rem; }
    .qc-details p, .qc-details li { font-size: 0.72rem; }
    .qc-btn { font-size: 0.6rem; padding: 6px 12px; }

    /* Guild — stack, smaller */
    .guild-container { gap: 1.5rem; }
    .guildmaster-card { flex-direction: column; text-align: center; padding: 1.2rem; gap: 0.8rem; }
    .gm-info { width: 100%; }
    .gm-badges { justify-content: center; }
    .gm-avatar { width: 80px; height: 80px; }
    .gm-name { font-size: 1rem; }
    .gm-title { font-size: 0.7rem; }
    .gm-info p { font-size: 0.68rem; line-height: 1.4; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .test-card { padding: 1.2rem 1rem; }
    .quote { font-size: 0.78rem; }
    .author { font-size: 0.7rem; }

    /* Contact form — full width, compact inputs */
    .contact-form-container { width: 100%; padding: 1.2rem; }
    .quest-form input, .quest-form select, .quest-form textarea { padding: 9px 14px; font-size: 16px; }
    .quest-form label { font-size: 0.65rem; }
    .btn-submit { padding: 11px 24px; font-size: 0.75rem; }

    /* Atlas — filter dropdown (same as mobile portrait) */
    .filter-toggle-row { display: flex; }
    .filter-container {
        display: none; flex-direction: column; align-items: stretch;
        position: absolute; z-index: 30;
        background: var(--secondary-teal);
        border: 1px solid rgba(195,152,77,0.35);
        border-radius: 12px; padding: 10px; gap: 6px; width: 200px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        left: 50%; transform: translateX(-50%);
    }
    .filter-container.open { display: flex; }
    .filter-btn { width: 100%; text-align: center; padding: 8px 14px; font-size: 0.65rem; }

    /* Map — full width bleed same as portrait */
    .map-wrapper {
        width: 100vw; max-width: none;
        position: relative; left: 50%; transform: translateX(-50%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
    }

    /* FAB — circle, repositioned for landscape chrome */
    .fab-wrapper { bottom: 20px; right: 20px; }
    .quest-cart-fab {
        width: 52px; height: 52px; padding: 0;
        border-radius: 50%; justify-content: center; gap: 0;
    }
    .quest-cart-fab:hover { transform: translateY(-3px); }
    .fab-label { display: none; }
    .cart-count { font-size: 1.1rem; padding: 0; background: none; color: var(--primary-teal); font-weight: 700; }

    /* Quote strip — even slimmer in landscape */
    .quote-text { font-size: clamp(0.68rem, 2.5vw, 1rem); }

    /* Drawer — full width/height, same as portrait mobile (critical bug fix) */
    /* right: -100vw ensures fully off-screen regardless of drawer width */
    .cart-drawer { right: -100vw; max-width: 100%; border-left: none; border-top: 2px solid var(--accent-gold); height: 100dvh; }
    .cart-drawer.open { right: 0; }
    .cart-drawer-header { padding: 1rem 1.5rem; }
    .cart-drawer-header h3 { font-size: 1.1rem; }
    .cart-drawer-scrollable { padding: 1rem 1.5rem; gap: 1rem; }
    #drawer-modifiers { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

    /* Sub-footer — stack */
    .sub-footer { flex-direction: column; gap: 0.5rem; text-align: center; }
    .sub-footer .footer-legal { justify-content: center; }
}