/* =============================================================
Awestruck โ Experience Detail ยท DARK-MODE overrides
Load this AFTER awestruck-details-v2.css when the user is in dark mode.
Recommended toggle (Django-side or client-side):
โ conditionally add the link
OR add `.aw-v2[data-theme="dark"]` selectors below if you want
a single bundle. We keep it as a separate file so it's only
loaded when needed (zero bytes for light-mode users โ faster).
Load order:
{% if request.theme == 'dark' %}
{% endif %}
============================================================= */
.aw-v2 {
/* Theme variable overrides */
--aw-blue: #6f72ff;
--aw-blue-2: #8a8dff;
--aw-blue-soft: #1c1e3a;
--aw-cream: #2a2218;
--aw-peach-soft: #1a1410;
--aw-sky-soft: #0e1024;
--aw-green: #3ad57c;
--aw-ink: #f2f2f2;
--aw-gray: #9aa0a6;
--aw-line: rgba(255, 255, 255, 0.10);
/* Dark-only additions */
--aw-surface: #16161a;
--aw-surface-2: #1c1c22;
--aw-bg: #0c0c10;
background: var(--aw-bg);
color: var(--aw-ink);
color-scheme: dark;
}
/* Popup card */
.aw-v2 .aw-card { background: var(--aw-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.aw-v2 .card-crumb { border-bottom-color: rgba(255,255,255,0.08); }
.aw-v2 .breadcrumb a { color: var(--aw-gray); }
.aw-v2 .breadcrumb .current { color: var(--aw-ink); }
.aw-v2 .close-x { background: var(--aw-ink); color: var(--aw-bg); }
.aw-v2 .close-x:hover { background: var(--aw-blue); color: #fff; }
.aw-v2 .aw-checkout {color: var(--aw-bg); }
.aw-v2 .read-more {color: var(--aw-blue) !important; }
.aw-v2 .copy-btn{background-color: var(--aw-ink);}
/* Tabs / description / FAQ */
.aw-v2 .aw-tab { color: var(--aw-ink); }
.aw-v2 .included p { color: var(--aw-ink); }
.aw-v2 .aw-faq { background: var(--aw-surface-2); border-color: rgba(255,255,255,0.10); }
.aw-v2 .aw-faq[open] { border-color: var(--aw-blue); box-shadow: 0 6px 18px rgba(111, 114, 255, 0.15); }
.aw-v2 .q-text { color: var(--aw-ink); }
.aw-v2 .q-num { background: rgba(111, 114, 255, 0.18); color: #aab0ff; }
.aw-v2 .q-toggle { background: var(--aw-ink); color: var(--aw-bg); }
.aw-v2 .aw-faq:hover .q-toggle,
.aw-v2 .aw-faq[open] .q-toggle { background: var(--aw-blue); color: #fff; }
.aw-v2 .answer { color: rgba(255,255,255,0.7); }
.aw-v2 .answer::before { background: rgba(255,255,255,0.08); }
/* How to reach */
.aw-v2 .address-card { background: rgba(111, 114, 255, 0.10); border: 1px solid rgba(111, 114, 255, 0.18); color: var(--aw-ink); }
.aw-v2 .address-card b { color: #aab0ff; }
.aw-v2 .copy-btn { background: var(--aw-surface-2); border-color: #6f72ff; color: #aab0ff; }
.aw-v2 .copy-btn:hover { background: var(--aw-blue); color: #fff; }
.aw-v2 .map-thumb { background: linear-gradient(135deg, #1a1f2e 0%, #0e1024 100%); border-color: rgba(255,255,255,0.08); }
.aw-v2 .map-thumb::before {
background-image:
linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
background-size: 20px 20px;
}
.aw-v2 .map-open-hint { background: rgba(255, 255, 255, 0.95); }
/* Booking card */
.aw-v2 .booking-card { background: var(--aw-cream); }
.aw-v2 .booking-card h2 { color: #ffd87a; }
.aw-v2 .aw-field input,
.aw-v2 .aw-field select,
.aw-v2 .qty-control {
background: var(--aw-surface-2);
border-color: rgba(255,255,255,0.12);
color: var(--aw-ink);
}
.aw-v2 .aw-field input::placeholder { color: rgba(255,255,255,0.35); }
.aw-v2 .aw-field select option { background: var(--aw-surface-2); color: var(--aw-ink); }
.aw-v2 .aw-field input:focus,
.aw-v2 .aw-field select:focus { background: var(--aw-surface-2); border-color: var(--aw-blue); box-shadow: 0 0 0 3px rgba(111, 114, 255, 0.25); }
.aw-v2 .aw-field label { color: var(--aw-ink); }
.aw-v2 .total-amt { color: #fff; }
.nice-select{
background: var(--aw-surface-2) !important;
border-color: rgba(255,255,255,0.12);
color: #fff !important;
}
.aw-v2 .nice-select .current,
.aw-v2 .aw-field .nice-select .current,
.aw-v2 .aw-field .niceselect,
.aw-v2 .aw-field .niceselect .current {
color: #fff !important;
}
/* Trust strip */
.aw-v2 .trust-strip { background: var(--aw-surface); box-shadow: 0 8px 24px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
.aw-v2 .trust-item { border-right-color: rgba(255,255,255,0.07); }
.aw-v2 .trust-title { color: var(--aw-ink); }
.aw-v2 .trust-sub { color: var(--aw-gray); }
.aw-v2 .trust-contacts a { color: #aab0ff; }
.aw-v2 .trust-contacts a:hover { color: #fff; }
/* Rails */
.aw-v2 .rail-similar { background: #1a130f; --aw-blob1: rgba(255, 138, 90, 0.22); --aw-blob2: rgba(255, 209, 83, 0.12); }
.aw-v2 .rail-discover { background: #0e1024; --aw-blob1: rgba(56, 59, 241, 0.28); --aw-blob2: rgba(43, 194, 106, 0.18); }
.aw-v2 .rail-head h3 { color: var(--aw-ink); }
.aw-v2 .rail-head .sub { color: var(--aw-gray); }
.aw-v2 .exp-card-slot { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(4px); }
.aw-v2 .exp-card-slot:hover { background: rgba(255, 255, 255, 0.07); }
.aw-v2 .exp-card-slot::before {
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.18) 50%,
rgba(255, 255, 255, 0) 70%,
transparent 100%);
}
.aw-v2 .cat-chip { background: var(--aw-surface-2); color: var(--aw-ink); border-color: rgba(255,255,255,0.12); }
.aw-v2 .cat-chip.active { background: var(--aw-ink); color: var(--aw-bg); border-color: var(--aw-ink); }
.aw-v2 .cat-chip:hover:not(.active) { border-color: rgba(255,255,255,0.3); }
.aw-v2 .arrows button { background: var(--aw-surface-2); color: var(--aw-ink); border-color: rgba(255,255,255,0.12); }
.aw-v2 .arrows button:hover { background: var(--aw-ink); color: var(--aw-bg); border-color: var(--aw-ink); }
.aw-v2 .partner-form button{color: var(--aw-surface);}
.aw-v2 .reach-section select option {
background: var(--aw-ink);
color: var(--aw-surface);
}
/* Reach + Footer */
.aw-v2 .reach-section { background: #08080c; border: 1px solid rgba(255,255,255,0.05); }
.aw-v2 .aw-footer { background: #050507; border: 1px solid rgba(255,255,255,0.05); }
.aw-v2 .footer-copy { color: rgba(255,255,255,0.35); border-top-color: rgba(255,255,255,0.06); }
/* Fix: App Store / Play Store pills keep a white background, so we force
dark text + icon color on them in dark mode. */
.aw-v2 .footer-icons .ico.app { color: var(--aw-bg); }
.aw-v2 .footer-icons .ico.app svg { color: var(--aw-bg); }
/* Fix specificity for rail arrows: .rail-head .arrows beats plain .arrows */
.aw-v2 .rail-head .arrows button { background: var(--aw-surface-2); color: var(--aw-ink); border-color: rgba(255,255,255,0.12); }
.aw-v2 .rail-head .arrows button:hover { background: var(--aw-ink); color: var(--aw-bg); border-color: var(--aw-ink); }
/* FAQ "Show more" in dark */
.aw-v2 .faq-more-btn { color: #aab0ff; border-color: rgba(111, 114, 255, 0.55); }
.aw-v2 .faq-more-btn:hover { background: var(--aw-blue); color: #fff; }
[data-bs-theme=dark] .aw-v2 .meta-row .duration{
color: black;
}
.aw-v2 .booking-card {
overflow: visible;
}
@media (max-width: 768px) {
.aw-v2 .price-bar {
box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.aw-v2 .aw-checkout {
box-shadow: 0 -2px 12px rgba(246,184,0,0.2);
}
}
[data-bs-theme="dark"] .aw-v2 .map-open-hint{
color: black !important;
}
[data-bs-theme="dark"] .aw-navbar {
background:black !important;
}
/* =========== */
[data-bs-theme="dark"] .aw-v2 .captcha-row input {
color:White !important;
}