/* ═══════════════════════════════════════════
   TOURISM STYLES — Southern Africa Explorer
═══════════════════════════════════════════ */

/* ── Map Page ── */
.map-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.map-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--site-bg, #000);
    overflow: hidden;
}
#leafletMap {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
    min-height: 0;
    background: #0a1628;
}
.leaflet-control-zoom a {
    background: #1a1a1a !important;
    color: #008080 !important;
    border-color: rgba(0,128,128,0.2) !important;
}
.leaflet-control-zoom a:hover { background: #222 !important; }
.leaflet-control-attribution {
    background: rgba(0,0,0,0.6) !important;
    color: #555 !important;
    font-size: 9px !important;
}
.leaflet-control-attribution a { color: #777 !important; }
.leaflet-control-scale-line {
    background: rgba(0,0,0,0.6) !important;
    color: #aaa !important;
    border-color: #008080 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding: 2px 6px !important;
}

/* ── Safari Custom Markers ── */
.safari-marker {
    background: none !important;
    border: none !important;
}
.safari-marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #008080;
    border: 2px solid rgba(0,128,128,0.5);
    box-shadow: 0 0 8px rgba(0,128,128,0.5);
    position: absolute;
    top: 3px; left: 3px;
    transition: all 0.2s;
}
.safari-marker-pulse {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #008080;
    position: absolute;
    top: 0; left: 0;
    animation: safariPulse 2s infinite;
}
@keyframes safariPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}
.safari-marker:hover .safari-marker-dot,
.active .safari-marker-dot {
    background: #00b3b3;
    border-color: rgba(0,179,179,0.6);
    box-shadow: 0 0 14px rgba(0,179,179,0.7);
}

/* ── Safari Tooltips (dest names) ── */
.safari-tooltip {
    background: rgba(0,0,0,0.75) !important;
    border: 1px solid rgba(0,128,128,0.3) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    white-space: nowrap !important;
}
.safari-tooltip::before { border-bottom-color: rgba(0,128,128,0.3) !important; }

/* ── Custom Layer Panel ── */
.safari-layers-ctrl {
    position: relative;
}
.slc-toggle {
    width: 36px; height: 36px; border-radius: 8px;
    background: #1a1a1a; border: 1px solid rgba(0,128,128,0.2);
    color: #008080; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    line-height: 1;
}
.slc-toggle:hover, .slc-toggle.open { background: #222; }
.slc-panel {
    position: absolute; top: 42px; right: 0;
    background: rgba(18,18,18,0.97); border: 1px solid rgba(0,128,128,0.25);
    border-radius: 12px; padding: 12px 14px 10px; min-width: 220px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
}
.slc-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: var(--sb-accent,#008080); margin-bottom: 8px;
}
.slc-divider {
    border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0;
}
.slc-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 2px; cursor: pointer; border-radius: 6px;
    transition: background .12s;
}
.slc-row:hover { background: rgba(255,255,255,0.04); }
.slc-cb {
    width: 16px; height: 16px; accent-color: var(--sb-accent,#008080);
    cursor: pointer; flex-shrink: 0;
}
.slc-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.slc-label { font-size: 13px; color: #ccc; font-weight: 500; }

/* Opacity sliders */
.slc-slider-row {
    display: flex; align-items: center; gap: 6px; padding: 4px 2px;
}
.slc-slider-name {
    font-size: 11px; color: #888; width: 60px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slc-slider {
    flex: 1; height: 3px; -webkit-appearance: none; appearance: none;
    background: #333; border-radius: 2px; outline: none; cursor: pointer;
}
.slc-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--sb-accent,#008080); cursor: pointer;
}
.slc-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--sb-accent,#008080); cursor: pointer; border: none;
}
.slc-slider-val {
    font-size: 10px; color: #666; width: 30px; text-align: right; flex-shrink: 0;
}

/* ── Download Map Button ── */
.safari-dl-btn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: #1a1a1a !important;
    color: #008080 !important;
    border-color: rgba(0,128,128,0.2) !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}
.safari-dl-btn a:hover { background: #222 !important; }

/* ── Print styles (map download fallback) ── */
@media print {
    .site-sidebar, .mobile-topbar, .sb-overlay, .dash-header,
    .map-controls, .dest-panel, .booking-overlay,
    .leaflet-control { display: none !important; }
    #site-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    #leafletMap { width: 100% !important; height: 100vh !important; }
    body { margin: 0 !important; }
}

/* ── Download Map Dialog ── */
.dl-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.dl-dialog {
    background: #141414; border: 1px solid rgba(0,128,128,0.25);
    border-radius: 16px; padding: 26px 24px 22px; width: 340px; max-width: 92vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6); position: relative;
}
.dl-close {
    position: absolute; top: 12px; right: 14px; background: none; border: none;
    color: #666; font-size: 22px; cursor: pointer; line-height: 1;
}
.dl-close:hover { color: #fff; }
.dl-title { margin: 0 0 4px; font-size: 18px; color: #fff; font-weight: 800; }
.dl-desc  { margin: 0 0 18px; font-size: 12px; color: #888; line-height: 1.4; }
.dl-row   { margin-bottom: 14px; }
.dl-label { display: block; font-size: 11px; color: var(--sb-accent,#008080); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-bottom: 7px; }
.dl-options { display: flex; gap: 6px; }
.dl-opt {
    flex: 1; background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
    color: #aaa; font-size: 12px; font-weight: 600; padding: 8px 4px 6px;
    cursor: pointer; text-align: center; transition: all .15s;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.dl-opt:hover { border-color: #555; color: #ddd; }
.dl-opt.active {
    border-color: var(--sb-accent,#008080); color: #fff;
    background: color-mix(in srgb, var(--sb-accent,#008080) 12%, #1e1e1e);
}
.dl-opt-sub { font-size: 10px; color: #666; font-weight: 400; }
.dl-opt.active .dl-opt-sub { color: var(--sb-accent,#008080); }
.dl-est {
    text-align: center; font-size: 12px; color: #777;
    margin: 6px 0 16px; padding: 6px; border-radius: 6px;
    background: rgba(0,128,128,0.06); border: 1px solid rgba(0,128,128,0.1);
}
.dl-go {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: var(--sb-accent,#008080); color: #000; font-size: 14px;
    font-weight: 800; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px; transition: opacity .15s;
}
.dl-go:hover { opacity: 0.9; }
.dl-go:disabled { opacity: 0.5; cursor: wait; }
.dl-spinner {
    width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.3);
    border-top-color: #000; border-radius: 50%; animation: dlSpin .6s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }

/* ── Auth dialog tabs, eye toggle, strength meter, errors ── */
.auth-tab {
    flex: 1; padding: 10px; background: none; border: none; border-bottom: 2px solid transparent;
    color: #888; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.auth-tab.active { color: var(--sb-accent,#008080); border-bottom-color: var(--sb-accent,#008080); }
.auth-tab:hover:not(.active) { color: #ccc; }
.auth-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px; color: #888; padding: 4px;
}
.auth-err {
    color: #e74c3c; font-size: 12px; min-height: 18px; margin-bottom: 6px; line-height: 1.4;
}
.pw-meter {
    font-size: 11px; font-weight: 700; margin-top: 4px; min-height: 16px; transition: color .2s;
}
.pw-weak   { color: #e74c3c; }
.pw-fair   { color: #f39c12; }
.pw-good   { color: #3498db; }
.pw-strong { color: #2ecc71; }

/* ── Google Sign-In button ── */
.g-signin-wrap { margin-bottom: 4px; }
.g-signin-btn {
    width: 100%; padding: 11px 16px; border: 1px solid #444; border-radius: 10px;
    background: #fff; color: #3c4043; font-size: 14px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background .15s, box-shadow .15s;
}
.g-signin-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.g-signin-btn:active { background: #eee; }
.g-logo { flex-shrink: 0; }
.dl-divider {
    display: flex; align-items: center; gap: 10px;
    color: #666; font-size: 11px; margin: 12px 0;
}
.dl-divider::before, .dl-divider::after {
    content: ''; flex: 1; height: 1px; background: #333;
}

/* ── Sidebar user card (logged in) ── */
.sb-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin: 4px 8px; border-radius: 10px;
    background: rgba(0,128,128,0.08); border: 1px solid rgba(0,128,128,0.15);
}
.sb-user-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--sb-accent,#008080);
}
.sb-user-initials {
    width: 36px; height: 36px; border-radius: 50%;
    min-width: 36px; min-height: 36px;
    max-width: 36px; max-height: 36px;
    background: var(--sb-accent,#008080); color: #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; flex-shrink: 0;
    overflow: hidden;
}
.sb-user-initials svg { width: 100%; height: 100%; display: block; }
.sb-user-initials img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
    display: block; color: #fff; font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-email {
    display: block; color: #888; font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-signout {
    background: none; border: none; color: #666; font-size: 14px;
    cursor: pointer; padding: 4px; transition: color .15s; flex-shrink: 0;
}
.sb-user-signout:hover { color: #e74c3c; }

/* ── Right-click Context Menu ── */
.ctx-menu {
    position: fixed; z-index: 8000;
    background: rgba(18,18,18,0.97); border: 1px solid rgba(0,128,128,0.25);
    border-radius: 10px; padding: 6px 0; min-width: 180px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.ctx-item {
    display: block; width: 100%; text-align: left; background: none; border: none;
    color: #ddd; font-size: 13px; padding: 9px 16px; cursor: pointer;
    transition: background .12s;
}
.ctx-item:hover { background: rgba(0,128,128,0.12); color: #fff; }
.transport-mode-icon { background: none !important; border: none !important; box-shadow: none !important; }

/* ── Add Marker Dialog ── */
.pin-input {
    width: 100%; background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
    color: #fff; font-size: 14px; padding: 10px 12px; outline: none;
    transition: border-color .15s;
}
.pin-input:focus { border-color: var(--sb-accent,#008080); }
.pin-colors, .pin-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-color-btn {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform .12s, border-color .12s;
}
.pin-color-btn:hover { transform: scale(1.15); }
.pin-color-btn.active {
    border-color: #fff; transform: scale(1.1);
    box-shadow: 0 0 0 2px #0d0d0d, 0 0 0 4px #fff;
}
.pin-icon-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid #333;
    background: #1e1e1e; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .12s, transform .12s;
}
.pin-icon-btn:hover { border-color: #555; transform: scale(1.08); }
.pin-icon-btn.active {
    border-color: var(--sb-accent,#008080);
    background: color-mix(in srgb, var(--sb-accent,#008080) 12%, #1e1e1e);
}

/* ── Custom Pin Markers on Map ── */
.custom-pin { background: none !important; border: none !important; }
.custom-pin-bg {
    width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.3);
}
.custom-pin-bg > * { transform: rotate(45deg); }
.custom-pin-tooltip {
    background: rgba(0,0,0,0.8) !important; border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important; font-size: 11px !important; font-weight: 600 !important;
    padding: 2px 7px !important; border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.custom-pin-tooltip::before { border-bottom-color: rgba(255,255,255,0.15) !important; }

/* Pin popup (click) */
.pin-popup { text-align: center; }
.pin-popup strong { color: #fff; font-size: 13px; }
.pin-delete-btn {
    margin-top: 8px; background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c; font-size: 12px; padding: 5px 12px; border-radius: 6px;
    cursor: pointer; transition: background .15s;
}
.pin-delete-btn:hover { background: rgba(231,76,60,0.3); }

/* Dark Leaflet popup override */
.leaflet-popup-content-wrapper {
    background: rgba(20,20,20,0.95) !important; color: #ddd !important;
    border-radius: 10px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: rgba(20,20,20,0.95) !important; }
.leaflet-popup-close-button { color: #666 !important; }
.leaflet-popup-close-button:hover { color: #fff !important; }

/* ── Destination Detail Panel ── */
.dest-panel {
    position: fixed;
    right: -450px;
    top: 0; bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: var(--site-panel-bg, #111);
    border-left: 1px solid rgba(0,128,128,0.2);
    z-index: 250;
    display: flex;
    flex-direction: column;
    transition: right 0.38s cubic-bezier(0.34,1.4,0.64,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.7);
    overflow: hidden;
}
.dest-panel.open { right: 0; }

.dp-close {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.dp-close:hover { background: rgba(255,0,0,0.3); }

/* Panel image carousel */
.dp-images {
    height: 200px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.dp-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s;
}
.dp-img.active { opacity: 1; }
.dp-img-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5;
}
.dp-img-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.dp-img-dot.active { background: var(--sb-accent, #008080); transform: scale(1.4); }

/* Panel content */
.dp-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 80px;
}
.dp-name {
    font-size: 22px;
    font-weight: 800;
    color: #4DD0E1;
    margin-bottom: 2px;
}
.dp-country {
    font-size: 12px;
    color: var(--sb-accent, #008080);
    font-weight: 600;
    margin-bottom: 4px;
}
.dp-tagline {
    font-size: 13px;
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
}
.dp-desc {
    font-size: 13px;
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 16px;
}
.dp-days {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,128,128,0.12);
    color: var(--sb-accent, #008080);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Section headers in panel */
.dp-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #4DD0E1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Activity cards */
.dp-activity {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.dp-activity:hover {
    border-color: rgba(0,128,128,0.35);
    background: rgba(0,128,128,0.06);
}
.dp-activity-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.dp-activity-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.dp-activity-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-accent, #008080);
}
.dp-activity-meta {
    display: flex;
    gap: 10px;
    font-size: 10.5px;
    color: #777;
    margin-bottom: 4px;
}
.dp-activity-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    display: none;
}
.dp-activity.expanded .dp-activity-desc { display: block; }
.dp-activity-book {
    display: none;
    margin-top: 8px;
    padding: 6px 16px;
    background: var(--sb-accent, #008080);
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.dp-activity-book:hover { background: #00b3b3; }
.dp-activity.expanded .dp-activity-book { display: inline-block; }

/* Transport options */
.dp-transport {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.dp-transport-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #ccc;
    flex: 1;
    min-width: 140px;
}
.dp-transport-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.dp-transport-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dp-transport-route { font-weight: 600; color: #fff; font-size: 11px; }
.dp-transport-info { color: #888; font-size: 10px; }
.dp-transport-price { color: var(--sb-accent, #008080); font-weight: 700; font-size: 11px; }

/* Guide cards */
.dp-guide {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: border-color 0.2s;
}
.dp-guide:hover { border-color: rgba(0,128,128,0.35); }
.dp-guide-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0,128,128,0.15);
    color: var(--sb-accent, #008080);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.dp-guide-info { flex: 1; min-width: 0; }
.dp-guide-name { font-size: 13px; font-weight: 600; color: #fff; }
.dp-guide-specialty { font-size: 11px; color: #888; }
.dp-guide-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: #777;
    margin-top: 2px;
}
.dp-guide-rating { color: #4DD0E1; }
.dp-guide-price { color: var(--sb-accent, #008080); font-weight: 700; }
.dp-guide-book {
    padding: 5px 14px;
    background: var(--sb-accent, #008080);
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.dp-guide-book:hover { background: #00b3b3; }

/* Add to Trip button */
.dp-add-trip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 20px;
    background: linear-gradient(transparent, #111 30%);
    z-index: 5;
}
.dp-add-trip-btn {
    width: 100%;
    padding: 12px;
    background: var(--sb-accent, #008080);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dp-add-trip-btn:hover { background: #00b3b3; transform: translateY(-1px); }


/* ═══════════════════════════════════════════
   TRIP PLANNER PAGE
═══════════════════════════════════════════ */
.trip-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
}

.trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
}
.trip-header h2 {
    font-size: 18px;
    color: #4DD0E1;
    font-weight: 800;
}
.trip-total {
    font-size: 14px;
    color: var(--sb-accent, #008080);
    font-weight: 700;
}
.trip-total span { font-size: 20px; }

.trip-content {
    display: flex;
    flex: 1;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
}

/* Left: itinerary timeline */
.trip-itinerary {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.trip-stop {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
}
/* Timeline line */
.trip-stop::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 24px;
    bottom: -16px;
    width: 2px;
    background: rgba(0,128,128,0.2);
}
.trip-stop:last-child::before { display: none; }

/* Stop number dot */
.trip-stop-dot {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--sb-accent, #008080);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-stop-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.trip-stop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
}
.trip-stop-name {
    font-size: 15px;
    font-weight: 700;
    color: #4DD0E1;
}
a.trip-stop-poi-link {
    color: #4DD0E1;
    text-decoration: none;
    cursor: pointer;
}
a.trip-stop-poi-link:hover {
    text-decoration: underline;
    color: #008080;
}
.trip-stop-days {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sb-accent, #008080);
}
.trip-stop-days input {
    width: 40px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 3px;
    outline: none;
}
.trip-stop-days input:focus { border-color: var(--sb-accent, #008080); }

.trip-stop-remove {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.trip-stop-remove:hover { color: #f44336; background: rgba(244,67,54,0.1); }

.trip-stop-body { padding: 8px 12px 10px; }

/* Booked items inside stop */
.trip-booked-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    font-size: 12px;
    color: #ccc;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    margin-bottom: 3px;
}
.trip-booked-item .tbi-name { flex: 1; }
.trip-booked-item .tbi-price { color: var(--sb-accent, #008080); font-weight: 600; margin: 0 8px; }
.trip-booked-item .tbi-remove {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
}
.trip-booked-item .tbi-remove:hover { color: #f44336; }

.trip-stop-subtotal {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-accent, #008080);
    padding: 4px 8px 0;
}

/* Transport between stops */
.trip-transport-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: -8px 0 8px 30px;
    font-size: 11px;
    color: #888;
}
.trip-transport-link select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    outline: none;
}

/* Right: summary panel */
.trip-summary {
    width: 280px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.trip-summary h3 {
    font-size: 14px;
    color: #4DD0E1;
    margin-bottom: 10px;
}
.trip-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #aaa;
    padding: 3px 0;
}
.trip-summary-row.total {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-accent, #008080);
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
    padding-top: 8px;
}
.trip-summary-row .label { flex: 1; }
.trip-summary-row .value { font-weight: 600; color: #fff; }
.trip-summary-row.total .value { color: var(--sb-accent, #008080); font-size: 18px; }

.trip-book-btn {
    margin-top: 12px;
    padding: 12px;
    background: var(--sb-accent, #008080);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.trip-book-btn:hover { background: #00b3b3; }
.trip-book-btn:disabled { opacity: 0.5; cursor: default; }

.trip-empty {
    text-align: center;
    padding: 40px 20px;
    color: #555;
    font-size: 14px;
}
.trip-empty svg { width: 50px; height: 50px; color: #333; margin-bottom: 10px; }


/* ═══════════════════════════════════════════
   BOOKING MODAL
═══════════════════════════════════════════ */
.booking-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}
.booking-overlay.open { display: flex; }

.booking-modal {
    background: #1a1a1a;
    border: 1px solid rgba(0,128,128,0.2);
    border-radius: 16px;
    width: 720px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.booking-modal h3 {
    font-size: 18px;
    color: #4DD0E1;
    margin-bottom: 4px;
}
.booking-modal .bm-sub {
    font-size: 12px;
    color: #777;
    margin-bottom: 14px;
}
.bm-field {
    margin-bottom: 10px;
}
.bm-field label {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 3px;
    font-weight: 600;
}
.bm-field input, .bm-field select, .bm-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    transition: border-color 0.2s;
}
.bm-field input:focus, .bm-field select:focus, .bm-field textarea:focus {
    border-color: var(--sb-accent, #008080);
}
.bm-price-summary {
    background: rgba(0,128,128,0.08);
    border-radius: 10px;
    padding: 10px;
    margin: 12px 0;
}
.bm-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #aaa;
    padding: 2px 0;
}
.bm-price-row.total {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-accent, #008080);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 6px;
    margin-top: 4px;
}
.bm-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.bm-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.bm-btn-primary {
    background: var(--sb-accent, #008080);
    color: #000;
}
.bm-btn-primary:hover { background: #00b3b3; }
.bm-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #ccc;
}
.bm-btn-secondary:hover { background: rgba(255,255,255,0.14); }


/* ═══════════════════════════════════════════
   HOMEPAGE — Hero with map teaser
═══════════════════════════════════════════ */
.tourism-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(0,128,128,0.05) 0%, transparent 70%);
}
.tourism-hero h1 {
    font-size: clamp(22px, 4vw, 42px);
    font-weight: 900;
    color: #4DD0E1;
    margin-bottom: 6px;
    line-height: 1.2;
}
.tourism-hero .hero-tagline {
    font-size: clamp(13px, 1.8vw, 18px);
    color: rgba(255,255,255,0.7);
    max-width: 500px;
    margin-bottom: 16px;
}

.hero-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.hero-stat {
    text-align: center;
    flex: 1;
    min-width: 0;
}
.hero-stat-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--sb-accent, #008080);
    line-height: 1;
}
.hero-stat-label {
    font-size: 10px;
    color: #777;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-btn {
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}
.hero-btn-primary {
    background: var(--sb-accent, #008080);
    color: #000;
}
.hero-btn-primary:hover { background: #00b3b3; transform: translateY(-1px); }
.hero-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.15); border-color: rgba(0,128,128,0.4); }


/* ── Featured Destinations Grid ── */
.featured-section {
    padding: 4px 16px 12px;
    flex-shrink: 0;
}
.featured-section h2 {
    font-size: 14px;
    color: #4DD0E1;
    text-align: center;
    margin-bottom: 8px;
}
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.featured-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/10;
    background: #1a1a1a;
    transition: transform 0.2s, box-shadow 0.2s;
}
.featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,128,128,0.2);
}
.featured-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
}
.featured-card:hover .featured-card-img { transform: scale(1.05); }
.featured-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.85));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
}
.featured-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.featured-card-country {
    font-size: 10px;
    color: var(--sb-accent, #008080);
    font-weight: 600;
}
.featured-card-price {
    font-size: 10px;
    color: #bbb;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════
   Admin POI Full-Page Panels
═══════════════════════════════════════════ */
.apoi-page {
    background: var(--site-bg, #000);
    display: none; flex-direction: column;
    flex: 1; min-height: 0;
    overflow: hidden;
}
.apoi-page.apoi-open {
    display: flex;
}
.apoi-page-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.apoi-back {
    background: none; border: none;
    color: var(--sb-accent, #008080); font-size: 28px;
    cursor: pointer; padding: 0 8px 0 0; line-height: 1;
}
.apoi-back:hover { opacity: 0.75; }
.apoi-page-title {
    flex: 1; font-size: 18px; font-weight: 800; color: #fff; margin: 0;
}
.apoi-save-btn {
    padding: 10px 32px !important; font-size: 14px !important;
    white-space: nowrap; flex-shrink: 0;
}
.apoi-footer {
    display: flex; justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
}

/* 3-column grid for editor */
.apoi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}
@media (max-width: 900px) {
    .apoi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .apoi-grid { grid-template-columns: 1fr; }
}

.apoi-col {
    display: flex; flex-direction: column; gap: 0;
}
.apoi-section-title {
    font-size: 11px; font-weight: 700;
    color: var(--sb-accent, #008080);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.apoi-card {
    background: var(--site-card-bg, #1a1a1a);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px;
}
.apoi-field-label {
    display: block; font-size: 11px; color: #888;
    text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 600; margin: 10px 0 5px;
}
.apoi-field-label:first-child { margin-top: 0; }

/* List panel body — 3-column masonry-like grid */
.apoi-list-body {
    flex: 1; padding: 16px 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-content: start;
}
@media (max-width: 900px) {
    .apoi-list-body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .apoi-list-body { grid-template-columns: 1fr; }
}
.apoi-list-body .apoi-country-group {
    break-inside: avoid;
}
.apoi-list-body > div:last-child {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════
   POI Location Picker (search, coords, map)
═══════════════════════════════════════════ */
.apoi-loc-tabs {
    display: flex; gap: 4px; margin-bottom: 8px;
}
.apoi-loc-tab {
    flex: 1; padding: 6px 8px; font-size: 11px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #aaa; border-radius: 6px; cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.apoi-loc-tab:hover { background: rgba(0,128,128,0.1); color: #fff; }
.apoi-loc-tab.active {
    background: var(--sb-accent, #008080); color: #000;
    border-color: var(--sb-accent, #008080); font-weight: 600;
}
.apoi-loc-panel { margin-bottom: 6px; }
.apoi-loc-results {
    max-height: 180px; overflow-y: auto;
    border-radius: 8px;
}
.apoi-loc-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.apoi-loc-item:hover { background: rgba(0,128,128,0.1); }
.apoi-loc-item:last-child { border-bottom: none; }
.apoi-loc-apply {
    width: 100%; padding: 8px; margin-top: 6px;
    background: rgba(0,128,128,0.12); color: #008080;
    border: 1px dashed rgba(0,128,128,0.3); border-radius: 6px;
    cursor: pointer; font-size: 12px; text-align: center;
    transition: background 0.2s;
}
.apoi-loc-apply:hover { background: rgba(0,128,128,0.2); }
.apoi-loc-current {
    font-size: 12px; padding: 6px 8px;
    border-radius: 6px; margin-top: 6px;
    background: rgba(255,255,255,0.03);
}

/* ═══════════════════════════════════════════
   POI Marker Icon & Background Picker
═══════════════════════════════════════════ */
.apoi-marker-pick { margin-top: 4px; }
.apoi-icon-grid, .apoi-bg-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.apoi-icon-opt {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 2px solid transparent;
    transition: all 0.15s;
}
.apoi-icon-opt:hover { background: rgba(255,255,255,0.1); }
.apoi-icon-opt.active { border-color: var(--sb-accent, #008080); background: rgba(0,128,128,0.1); }
.apoi-bg-opt {
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.apoi-bg-opt:hover { transform: scale(1.15); }
.apoi-bg-opt.active { border-color: #fff; box-shadow: 0 0 0 2px var(--sb-accent, #008080); }
.apoi-marker-preview {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 8px;
    background: rgba(255,255,255,0.03); border-radius: 8px;
}

/* ═══════════════════════════════════════════
   POI (Must-See) Markers
═══════════════════════════════════════════ */
.poi-marker-wrap { background: none !important; border: none !important; }

.poi-marker {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; animation: poiFadeIn 0.5s ease;
}
@keyframes poiFadeIn { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }

.poi-icon {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 18px; line-height: 1;
    width: 36px; height: 36px;
    border: 2px solid rgba(255,255,255,0.3);
    position: relative; z-index: 3;
}

/* Ripple rings radiating from icon */
.poi-ripple {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    border: 2px solid currentColor;
    opacity: 0.7;
    animation: poiRippleOut 2.2s ease-out infinite;
    pointer-events: none;
}
.poi-ripple:nth-child(2) { animation-delay: 0s; }
.poi-ripple:nth-child(3) { animation-delay: 0.7s; }
.poi-ripple:nth-child(4) { animation-delay: 1.4s; }
@keyframes poiRippleOut {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* --- Rating 5 — Gold (Must See) --- */
.poi-rating-5 .poi-icon {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 0 14px rgba(255,215,0,0.7), 0 0 30px rgba(255,165,0,0.3);
    width: 40px; height: 40px; font-size: 20px;
    border: 2px solid #FFD700;
}
.poi-rating-5 .poi-ripple { color: #FFD700; width: 40px; height: 40px; }

/* --- Rating 4 — Silver (Recommended) --- */
.poi-rating-4 .poi-icon {
    background: linear-gradient(135deg, #C0C0C0, #8a8a8a);
    box-shadow: 0 0 10px rgba(192,192,192,0.5);
    width: 34px; height: 34px; font-size: 17px;
    border: 2px solid #C0C0C0;
}
.poi-rating-4 .poi-ripple { color: #C0C0C0; width: 34px; height: 34px; }

/* --- Rating 3 — Bronze (Worth a Visit) --- */
.poi-rating-3 .poi-icon {
    background: linear-gradient(135deg, #CD7F32, #8B5A2B);
    box-shadow: 0 0 8px rgba(205,127,50,0.4);
    width: 28px; height: 28px; font-size: 14px;
    border: 2px solid #CD7F32;
}
.poi-rating-3 .poi-ripple { color: #CD7F32; width: 28px; height: 28px; }

/* --- Rating 2 & 1 fallback --- */
.poi-rating-2 .poi-icon,
.poi-rating-1 .poi-icon {
    background: #333; border: 2px solid #555;
    box-shadow: 0 0 4px rgba(100,100,100,0.3);
    width: 24px; height: 24px; font-size: 12px;
}
.poi-rating-2 .poi-ripple,
.poi-rating-1 .poi-ripple { color: #555; width: 24px; height: 24px; }

/* POI rating stars badge */
.poi-stars {
    position: absolute;
    bottom: -12px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px; line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.6);
    z-index: 4;
    pointer-events: none;
}
.poi-rating-5 .poi-stars { color: #FFD700; font-size: 12px; }
.poi-rating-4 .poi-stars { color: #C0C0C0; font-size: 11px; }
.poi-rating-3 .poi-stars { color: #CD7F32; font-size: 10px; }
.poi-rating-2 .poi-stars,
.poi-rating-1 .poi-stars { color: #888; font-size: 9px; }

/* POI tooltip */
.poi-tooltip {
    background: #111 !important; color: #fff !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    border-radius: 6px !important; font-size: 11px !important;
    padding: 3px 8px !important; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
.poi-tooltip::before { border-top-color: rgba(255,215,0,0.3) !important; }

/* POI popup rating badge */
.poi-popup { max-width: 240px; }
.poi-popup-rating { font-size: 12px; margin-bottom: 6px; }
.poi-popup-label { font-size: 11px; font-weight: 600; }
.poi-popup-r5 { color: #FFD700; }
.poi-popup-r4 { color: #C0C0C0; }
.poi-popup-r3 { color: #CD7F32; }

/* ═══════════════════════════════════════════
   POI Detail Panel – 4 independent panels
   4 panels around POI, fly-in animation
═══════════════════════════════════════════ */
.pp-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.3s ease;
}
.pp-overlay.pp-open { opacity: 1; }

/* ── Each card: absolutely positioned around POI ── */
.pp-card {
    position: absolute;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.55);
    display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-open .pp-card { opacity: 1; transform: scale(1); }
/* Info & Activities: auto height, scroll if needed */
.pp-card-info { width: 280px; max-height: 400px; }
.pp-card-acts { width: 280px; max-height: 440px; }
/* Images & Videos: enlarged */
.pp-card-images, .pp-card-videos { width: 440px; max-height: 440px; }

/* Card header strip */
.pp-card-head {
    padding: 11px 14px 9px;
    font-size: 13px; font-weight: 700; color: #fff;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
/* Scrollable body */
.pp-card-body {
    flex: 1; overflow-y: auto; padding: 12px 14px 14px;
    min-height: 0;
}

/* Floating × button */
.pp-close {
    position: fixed; top: 64px; right: 12px; z-index: 999999;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); color: #fff;
    font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.pp-close:hover { background: #c0392b; transform: scale(1.08); }

/* Back to admin link */
.pp-back-admin {
    position: fixed; z-index: 999998;
    top: 64px; left: 12px;
    background: #008080; color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 7px 16px; border-radius: 20px;
    text-decoration: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.pp-back-admin:hover { background: #006666; transform: translateY(-1px); }

/* ── Info panel content ── */
.pp-header { padding: 0 0 8px; }
.pp-rating { font-size: 14px; margin-bottom: 4px; }
.pp-rating span { font-size: 11px; font-weight: 600; }
.pp-title { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }
.pp-country { font-size: 12px; color: #999; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.pp-badge {
    display: inline-block; font-size: 10px;
    background: var(--sb-accent, #008080); color: #000;
    padding: 1px 5px; border-radius: 8px;
    font-weight: 700; vertical-align: middle;
}
.pp-desc { color: #ccc; font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.pp-meta { display: flex; flex-direction: column; gap: 5px; }
.pp-meta-row { color: #aaa; font-size: 12px; }
.pp-meta-row strong { color: #ddd; }
.pp-admin { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.pp-protected { font-size: 12px; color: #888; }
.pp-empty {
    color: #555; font-size: 13px; text-align: center;
    padding: 20px 8px; font-style: italic;
}

/* ── Carousel (shared by Images & Videos panels) ── */
.pp-carousel { position: relative; user-select: none; }
.pp-carousel-viewport {
    position: relative; width: 100%;
    aspect-ratio: 4/3; border-radius: 8px;
    overflow: hidden; background: #111;
}
.pp-carousel-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
}
.pp-carousel-slide.pp-slide-active { opacity: 1; pointer-events: auto; }
.pp-carousel-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pp-vid-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    font-size: 38px; color: #fff; pointer-events: none;
    transition: background 0.2s;
}
.pp-carousel-slide[onclick]:hover .pp-vid-overlay { background: rgba(0,128,128,0.35); }
.pp-carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2; background: rgba(0,0,0,0.5); border: none;
    color: #fff; font-size: 22px; width: 30px; height: 44px;
    cursor: pointer; transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.pp-carousel-btn:hover { background: rgba(0,128,128,0.5); }
.pp-carousel-left  { left: 0; border-radius: 0 6px 6px 0; }
.pp-carousel-right { right: 0; border-radius: 6px 0 0 6px; }
.pp-carousel-dots {
    display: flex; justify-content: center; gap: 5px;
    padding: 6px 0 2px;
}
.pp-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,0.25); cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.pp-dot:hover { background: rgba(255,255,255,0.5); }
.pp-dot.pp-dot-active {
    background: var(--sb-accent, #008080);
    transform: scale(1.3);
}
.pp-carousel-counter { text-align: center; font-size: 11px; color: #666; }
.pp-counter-cur { color: #fff; font-weight: 700; }

/* ── Activities list (now inside Info panel) ── */
.pp-info-acts {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pp-info-acts strong { color: #ccc; font-size: 12px; }
.pp-act-list {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 2px 12px;
}
.pp-act-list li {
    color: #ddd; font-size: 12px; line-height: 1.7;
    white-space: nowrap;
}
.pp-act-list li::before {
    content: '●'; color: var(--sb-accent, #008080);
    margin-right: 5px; font-size: 8px; vertical-align: middle;
}

/* ── Community panel ── */
.uc-section { margin-bottom: 12px; }
.uc-section:last-child { margin-bottom: 0; }
.uc-label {
    font-size: 11px; font-weight: 700; color: #888;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.uc-stars { display: flex; gap: 2px; }
.uc-star {
    font-size: 22px; color: #444; cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.uc-star:hover, .uc-star-on { color: #f5b731; }
.uc-star:hover { transform: scale(1.2); }
.uc-avg { font-size: 12px; color: #888; margin-top: 4px; }
.uc-avg span { color: #666; }
.uc-comments {
    max-height: 120px; overflow-y: auto;
}
.uc-comment {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.uc-comment:last-child { border-bottom: none; }
.uc-comment-head {
    display: flex; align-items: baseline; gap: 6px;
}
.uc-comment-head strong { font-size: 12px; color: #ddd; }
.uc-comment-date { font-size: 10px; color: #555; }
.uc-own-btns { margin-left: auto; display: flex; gap: 2px; flex-shrink: 0; }
.uc-edit-btn, .uc-del-btn {
    background: none; border: none; cursor: pointer;
    font-size: 11px; padding: 0 2px; opacity: 0.4;
    transition: opacity 0.15s;
}
.uc-edit-btn:hover, .uc-del-btn:hover { opacity: 1; }
.uc-comment p { margin: 3px 0 0; font-size: 12px; color: #bbb; line-height: 1.4; }
.uc-add-comment { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.uc-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: #ddd;
    font-size: 12px; padding: 6px 8px;
    outline: none; transition: border-color 0.2s;
    font-family: inherit;
}
.uc-input:focus { border-color: var(--sb-accent, #008080); }
.uc-textarea { resize: none; min-height: 38px; }
.uc-btn {
    align-self: flex-end;
    background: var(--sb-accent, #008080); color: #000;
    border: none; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    padding: 5px 14px; cursor: pointer;
    transition: opacity 0.2s;
}
.uc-btn:hover { opacity: 0.85; }
.uc-upload-btn {
    align-self: flex-start; display: inline-flex;
    align-items: center; gap: 4px; cursor: pointer;
    margin-top: 4px;
}
.uc-photo-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.uc-photo-thumb {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: 6px; cursor: zoom-in;
    transition: transform 0.15s;
}
.uc-photo-thumb:hover { transform: scale(1.1); }
.uc-photo-wrap { position: relative; display: inline-block; }
.uc-photo-del {
    position: absolute; top: -4px; right: -4px;
    background: rgba(0,0,0,0.75); border: none;
    color: #e74c3c; font-size: 13px; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; line-height: 1;
    opacity: 0; transition: opacity 0.15s;
}
.uc-photo-wrap:hover .uc-photo-del { opacity: 1; }
.uc-disabled .uc-star { cursor: default; pointer-events: none; }
.uc-role-badge {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.5px;
    line-height: 1.4; vertical-align: middle;
}
.uc-badge-traveller {
    background: rgba(76,175,80,0.18); color: #66bb6a;
}
.uc-badge-staff {
    background: rgba(255,193,7,0.18); color: #ffc107;
}
.uc-reviewer-label {
    font-size: 11px; color: #888; padding: 4px 0 2px;
}
.uc-reviewer-label strong { color: #ccc; }
.uc-login-prompt {
    text-align: center; padding: 8px 0 2px;
    font-size: 12px; color: #777;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
}
.uc-login-prompt a {
    color: var(--sb-accent, #008080);
    text-decoration: none; font-weight: 700;
}
.uc-login-prompt a:hover { text-decoration: underline; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .pp-card-info { width: 220px !important; max-height: 320px; }
    .pp-card-acts { width: 220px !important; max-height: 300px; }
    .pp-card-images, .pp-card-videos { width: 260px !important; max-height: 280px; }
    .pp-card { border-radius: 10px; }
    .pp-card-head { padding: 7px 9px 6px; font-size: 11px; }
    .pp-card-body { padding: 7px 9px 9px; }
    .pp-title { font-size: 13px; }
    .pp-desc { font-size: 11px; }
    .pp-carousel-btn { width: 22px; height: 34px; font-size: 16px; }
    .pp-close { width: 28px; height: 28px; font-size: 18px; }
}

/* ═══════════════════════════════════════════
   POI Map Labels (permanent, with leader lines)
═══════════════════════════════════════════ */
.poi-label-wrap { background: none !important; border: none !important; }
.poi-label {
    position: relative;
    pointer-events: none;
    white-space: nowrap;
}
.poi-label-text {
    display: inline-block;
    padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,0.65);
    color: #ddd;
    border: 1px solid rgba(255,255,255,0.12);
    line-height: 14px;
    text-shadow: 0 1px 2px #000;
}
.poi-lbl-5 .poi-label-text { color: #FFD700; border-color: rgba(255,215,0,0.3); }
.poi-lbl-4 .poi-label-text { color: #C0C0C0; border-color: rgba(192,192,192,0.25); }
.poi-lbl-3 .poi-label-text { color: #CD7F32; border-color: rgba(205,127,50,0.2); }
.poi-leader-svg { position: absolute; left: 0; top: 0; overflow: visible; }

/* ═══════════════════════════════════════════
   POI Name Tag (below icon, replaces tiny stars)
═══════════════════════════════════════════ */
.poi-name-tag {
    position: absolute;
    bottom: -22px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 9px; font-weight: 700;
    line-height: 1; letter-spacing: 0.2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0px 8px rgba(0,0,0,0.7);
    z-index: 4; pointer-events: none;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}

/* Hide name tags when floating labels are visible (avoids duplication) */
.poi-labels-on .poi-name-tag { display: none; }

/* ═══════════════════════════════════════════
   POI Hover Mini-Panel (4 cards near marker)
═══════════════════════════════════════════ */
.ph-wrap {
    position: fixed; z-index: 9990;
    display: grid;
    grid-template-columns: 280px 280px;
    grid-template-rows: auto auto;
    gap: 5px;
    pointer-events: auto;
    animation: phFadeIn 0.15s ease;
}
@keyframes phFadeIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
.ph-card {
    background: #1c1c1c;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ph-head {
    padding: 6px 9px 5px;
    font-size: 11px; font-weight: 700; color: #fff;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; gap: 4px;
}
.ph-body {
    padding: 7px 9px 9px;
    max-height: 280px; overflow-y: auto;
}

/* ═══════════════════════════════════════════
   Admin POI List + Rating Picker
═══════════════════════════════════════════ */
.admin-poi-list { display: flex; flex-direction: column; gap: 4px; }
.admin-poi-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); cursor: default;
    transition: background 0.2s;
}
.admin-poi-item:hover { background: rgba(0,128,128,0.08); }
.admin-poi-info { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #ddd; flex: 1; min-width: 0; }
.admin-poi-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-poi-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.admin-poi-edit {
    background: none; border: none; cursor: pointer;
    font-size: 14px; padding: 4px 6px; border-radius: 6px;
    transition: background 0.2s;
}
.admin-poi-edit:hover { background: rgba(0,128,128,0.2); }
.admin-poi-del {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: 4px 6px; border-radius: 6px;
    transition: background 0.2s;
}
.admin-poi-del:hover { background: rgba(231,76,60,0.2); }

.poi-rating-pick { display: flex; gap: 4px; }
.poi-rate-star {
    font-size: 24px; cursor: pointer; color: #444;
    transition: color 0.15s, transform 0.15s;
}
.poi-rate-star:hover { transform: scale(1.2); }
.poi-rate-star.active { color: #FFD700; }

/* --- User login dialog extras --- */
.dl-go-outline {
    background: transparent !important;
    border: 1px solid var(--sb-accent, #008080) !important;
    color: var(--sb-accent, #008080) !important;
}
.dl-go-outline:hover {
    background: rgba(0,128,128,0.1) !important;
}

/* ═══════════════════════════════════════════
   Country Accordion (POI List)
═══════════════════════════════════════════ */

/* Country group wrapper */
.apoi-country-group { margin-bottom: 6px; }

/* Clickable country header */
.apoi-country-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--sb-accent, #008080);
    cursor: pointer; user-select: none;
    transition: background 0.2s;
}
.apoi-country-header:hover { background: rgba(0,128,128,0.08); }

/* Arrow indicator */
.apoi-arrow { font-size: 12px; color: #888; width: 12px; text-align: center; flex-shrink: 0; }

/* Flag (slightly larger) */
.apoi-flag { font-size: 16px; flex-shrink: 0; }

/* Count badge */
.apoi-count { color: #666; font-size: 11px; font-weight: 400; margin-left: auto; }

/* Delete country ✕ button (only on empty countries) */
.apoi-del-country {
    background: none; border: none; cursor: pointer;
    color: #ff5555; font-size: 13px; padding: 2px 6px;
    border-radius: 4px; margin-left: 4px; opacity: 0.6;
    transition: opacity 0.2s, background 0.2s;
}
.apoi-del-country:hover { opacity: 1; background: rgba(231,76,60,0.15); }

/* Empty country message */
.apoi-empty {
    color: #555; font-size: 12px; font-style: italic;
    text-align: center; padding: 8px 12px;
}

/* Add Country button override */
.apoi-add-country-btn:hover { background: rgba(0,128,128,0.2) !important; }

/* ═══════════════════════════════════════════
   World Country Picker (searchable)
═══════════════════════════════════════════ */
.wc-results {
    flex: 1; overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; background: rgba(0,0,0,0.3);
    max-height: 50vh;
}
.wc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer;
    font-size: 13px; color: #ddd;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.wc-item:last-child { border-bottom: none; }
.wc-item:hover { background: rgba(0,128,128,0.1); }
.wc-item.wc-disabled {
    opacity: 0.45; cursor: default;
    pointer-events: none;
}
.wc-added {
    margin-left: auto; font-size: 10px;
    color: var(--sb-accent, #008080); font-weight: 600;
}

/* Media badge on list items */
.apoi-badge {
    font-size: 10px; color: #888; margin-left: 6px;
    background: rgba(255,255,255,0.06); padding: 2px 6px;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════
   Media Upload (POI Editor)
═══════════════════════════════════════════ */
.apoi-media-wrap {
    margin-top: 4px;
}
.apoi-media-preview {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px; min-height: 40px;
}
.apoi-media-thumb {
    position: relative; width: 72px; height: 54px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
}
.apoi-media-thumb:hover { border-color: var(--sb-accent, #008080); }
.apoi-media-del {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,0.7); color: #ff5555;
    border: none; font-size: 12px; line-height: 18px;
    text-align: center; cursor: pointer;
    opacity: 0; transition: opacity 0.15s;
}
.apoi-media-thumb:hover .apoi-media-del { opacity: 1; }
.apoi-media-vid-badge {
    position: absolute; bottom: 3px; left: 3px;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: 10px; padding: 1px 5px; border-radius: 4px;
}
.apoi-media-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: rgba(0,128,128,0.08); border: 1px dashed rgba(0,128,128,0.3);
    color: var(--sb-accent, #008080); font-size: 12px; font-weight: 600;
    transition: background 0.2s;
}
.apoi-media-add:hover { background: rgba(0,128,128,0.15); }

/* Activities & Accommodation row editor */
.apoi-list-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.apoi-row {
    display: flex; gap: 4px; align-items: center;
    background: rgba(255,255,255,0.03); padding: 6px 8px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.apoi-row input, .apoi-row select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #eee; border-radius: 6px; padding: 6px 8px; font-size: 12px;
    font-family: inherit;
}
.apoi-row input:focus, .apoi-row select:focus {
    outline: none; border-color: var(--sb-accent, #008080);
}
.apoi-row input::placeholder { color: #666; }
.apoi-row .apoi-row-name { flex: 2; min-width: 0; }
.apoi-row .apoi-row-price { width: 70px; text-align: right; }
.apoi-row .apoi-row-dur { width: 80px; }
.apoi-row .apoi-row-cat { width: 90px; }
.apoi-row .apoi-row-type { flex: 1; min-width: 0; }
.apoi-row-del {
    background: none; border: none; color: #ff5555; cursor: pointer;
    font-size: 16px; padding: 2px 4px; opacity: 0.5; transition: opacity 0.15s;
    flex-shrink: 0;
}
.apoi-row-del:hover { opacity: 1; }
.apoi-add-row-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    background: rgba(0,128,128,0.08); border: 1px dashed rgba(0,128,128,0.3);
    color: var(--sb-accent, #008080); font-size: 11px; font-weight: 600;
    transition: background 0.2s;
}
.apoi-add-row-btn:hover { background: rgba(0,128,128,0.15); }

/* Custom dropdowns (standardised booking-style) */
.apoi-drop-wrap { position: relative; flex: 1; min-width: 0; }
.apoi-drop-sel {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 10px;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.15s; font-size: 12px; color: #eee;
}
.apoi-drop-sel.open { border-color: var(--sb-accent, #008080); }
.apoi-drop-sel .apoi-drop-val { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apoi-drop-sel .apoi-drop-chev { font-size: 10px; color: #555; margin-left: 4px; flex-shrink: 0; }
.apoi-drop-sel.open .apoi-drop-chev { color: var(--sb-accent, #008080); }
.apoi-drop-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: rgba(20,20,20,0.98); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    margin-top: 2px; max-height: 200px; overflow-y: auto;

}
.apoi-drop-item {
    padding: 8px 12px; cursor: pointer; font-size: 12px; color: #ccc;
    border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s;
}
.apoi-drop-item:last-child { border-bottom: none; }
.apoi-drop-item:hover { background: rgba(255,255,255,0.06); }
.apoi-drop-item.sel { background: rgba(0,128,128,0.08); color: #008080; }

/* ═══════════════════════════════════════════
   POI Popup Media Gallery
═══════════════════════════════════════════ */
.poi-popup-gallery {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 6px 0;
}
.poi-popup-img {
    width: 60px; height: 45px; object-fit: cover;
    border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.15s, transform 0.15s;
}
.poi-popup-img:hover {
    border-color: var(--sb-accent, #008080);
    transform: scale(1.05);
}

/* Lightbox media viewer */
.poi-media-viewer {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.92); display: flex;
    align-items: center; justify-content: center;
    cursor: zoom-out; animation: poiFadeIn 0.2s ease;
}
.poi-media-viewer-img {
    max-width: 90vw; max-height: 90vh;
    border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Tourism pages
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .dest-panel { width: 100%; max-width: 100%; }
    .trip-content { flex-direction: column; }
    .trip-summary { width: 100%; }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .featured-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 16px; }
    .hero-stat-val { font-size: 20px; }
}

/* Category tags */
.cat-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cat-safari { background: rgba(255,165,0,0.15); color: #ffa500; }
.cat-adventure { background: rgba(244,67,54,0.15); color: #f44336; }
.cat-sightseeing { background: rgba(33,150,243,0.15); color: #2196F3; }
.cat-cultural { background: rgba(156,39,176,0.15); color: #9C27B0; }
.cat-boat { background: rgba(0,188,212,0.15); color: #00BCD4; }
.cat-air { background: rgba(121,85,72,0.15); color: #8D6E63; }
.cat-food { background: rgba(255,87,34,0.15); color: #FF5722; }
.cat-nature { background: rgba(76,175,80,0.15); color: #4CAF50; }

/* Trip badge on sidebar */
.sb-trip-badge {
    background: #f44336;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    margin-left: auto;
}
.sb-trip-badge.visible { display: flex; }

/* Directions line animation */
.route-animated {
    stroke-dasharray: 6, 4;
    animation: routeFlow 1s linear infinite;
}
@keyframes routeFlow { to { stroke-dashoffset: -10; } }

/* ═══════════════════════════════════════════
   Shared Settings Row Buttons (used on settings + admin settings)
═══════════════════════════════════════════ */
.st-row-btn { display: flex; align-items: center; gap: 14px; background: var(--site-card-bg, #1a1a1a); padding: 16px; border-radius: 12px; margin-bottom: 10px; cursor: pointer; box-shadow: 0 0 12px color-mix(in srgb, var(--sb-accent, #008080) 15%, transparent); transition: transform .12s, box-shadow .12s; user-select: none; }
.st-row-btn:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--sb-accent, #008080) 25%, transparent); }
.st-row-btn:active { transform: scale(0.96); box-shadow: 0 4px 15px color-mix(in srgb, var(--sb-accent, #008080) 35%, transparent); }
.st-row-icon { width: 38px; height: 38px; border-radius: 19px; background: var(--site-panel-bg, #111); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.st-row-text { flex: 1; min-width: 0; }
.st-row-title { font-size: 15px; font-weight: 600; color: #fff; }
.st-row-sub   { font-size: 12px; color: #777; margin-top: 2px; }
.st-row-chev  { color: #555; font-size: 18px; flex-shrink: 0; }

/* Sub-page header (back + title) */
.st-subpage-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 16px; }
.st-back-btn { background: none; border: none; color: var(--sb-accent, #008080); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 8px 0 0; width: 38px; text-align: left; }

/* ═══════════════════════════════════════════
   Application System (Supplier / Guide)
═══════════════════════════════════════════ */
/* Registration role hint */
#regRoleHint { font-size:11px; color:var(--sb-accent,#008080); opacity:.85; padding:2px 0 4px; display:none; }

/* Application form overlay */
#appFormOverlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; padding:16px; }
.app-form-dialog { width:100%; max-width:440px; max-height:88vh; overflow-y:auto; background:var(--site-panel-bg,#111); border-radius:18px; padding:28px 22px; box-shadow:0 10px 40px rgba(0,0,0,.6); position:relative; }
.app-form-dialog h3 { font-size:20px; margin:0 0 4px; color:#fff; }
.app-form-dialog .app-form-desc { font-size:12px; color:#888; margin-bottom:18px; }
.app-form-close { position:absolute; top:12px; right:12px; background:none; border:none; color:#666; font-size:22px; cursor:pointer; }
.app-form-close:hover { color:#fff; }
#appFormBody .dl-row { margin-bottom:12px; }
#appFormBody .dl-label { display:block; font-size:12px; color:#999; margin-bottom:4px; }
#appFormBody .pin-input { width:100%; }
#appFormBody textarea.pin-input { font-family:inherit; }
#appFormErr { color:#ff5e5e; font-size:12px; min-height:16px; margin:8px 0; }
.app-form-submit { width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px;
  background:linear-gradient(135deg,var(--sb-accent,#008080),color-mix(in srgb,var(--sb-accent,#008080) 70%,#006400));
  color:#fff; transition:opacity .16s; }
.app-form-submit:hover { opacity:.88; }

/* Filter bar */
.app-filter-bar { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.app-filter-btn { padding:6px 14px; border:1px solid rgba(0,128,128,.25); background:rgba(0,128,128,.06); border-radius:20px; color:#bbb; font-size:12px; cursor:pointer; transition:all .16s; }
.app-filter-btn:hover { border-color:rgba(0,128,128,.5); color:#fff; }
.app-filter-btn.active { background:var(--sb-accent,#008080); color:#000; border-color:var(--sb-accent,#008080); font-weight:600; }

/* Queue cards */
.app-queue-card { background:var(--site-card-bg,#1a1a1a); border-radius:14px; padding:16px; margin-bottom:12px;
  box-shadow:0 0 12px color-mix(in srgb,var(--sb-accent,#008080) 8%,transparent); }
.app-queue-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.app-queue-role { font-size:13px; color:#ccc; }
.app-queue-status { font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; }
.app-status-pending  { background:rgba(255,193,7,.15); color:#ffc107; }
.app-status-approved { background:rgba(76,175,80,.15); color:#4caf50; }
.app-status-rejected { background:rgba(244,67,54,.15); color:#f44336; }
.app-status-traveller { background:rgba(33,150,243,.12); color:#42a5f5; }
.app-status-supplier { background:rgba(255,152,0,.12); color:#ffa726; }
.app-status-guide    { background:rgba(171,71,188,.12); color:#ce93d8; }
.app-queue-name { font-size:15px; font-weight:600; color:#fff; }
.app-queue-meta { font-size:11px; color:#777; margin:2px 0 6px; }
.app-queue-desc { font-size:12px; color:#aaa; line-height:1.45; margin-bottom:6px; }
.app-queue-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.app-queue-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.app-approve-btn { padding:7px 16px; border:none; border-radius:8px; cursor:pointer; font-weight:600; font-size:12px;
  background:linear-gradient(135deg,#4caf50,#2e7d32); color:#fff; transition:opacity .16s; }
.app-approve-btn:hover { opacity:.85; }
.app-reject-btn  { padding:7px 16px; border:1px solid rgba(244,67,54,.3); border-radius:8px; cursor:pointer; font-size:12px; background:transparent; color:#f44336; transition:all .16s; }
.app-reject-btn:hover  { background:rgba(244,67,54,.12); }

/* Role select in manage users */
.app-role-select { padding:5px 10px; border-radius:8px; background:var(--site-panel-bg,#111); color:#ccc; border:1px solid rgba(0,128,128,.2); font-size:12px; cursor:pointer; }
.st-back-btn:hover { opacity: .75; }
.st-subpage-title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .3px; flex: 1; text-align: center; }

/* Swatches (shared) */
.st-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.st-swatch     { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s; }
.st-swatch:hover  { transform: scale(1.12); }
.st-swatch.active { border-color: var(--sb-accent); transform: scale(1.1); box-shadow: 0 0 0 2px #0d0d0d, 0 0 0 4px var(--sb-accent); }
.st-swatch-name   { font-size: 11px; color: #666; margin-top: 5px; min-height: 14px; }
.st-custom-swatch { background: var(--site-card-bg, #1a1a1a); border: 2px dashed #444; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-custom-swatch.active { border-style: solid; border-color: var(--sb-accent); }

/* Section title */
.section-title { font-size: 13px; font-weight: 700; color: var(--sb-accent, #008080); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }

/* Card wrap */
.st-card-wrap { background: var(--site-card-bg, #1a1a1a); border-radius: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.07); }

/* Reset button */
.st-reset-btn { margin-top: 12px; background: transparent; border: 1px solid var(--sb-border, #2a2a2a); border-radius: 8px; color: #666; font-size: 12px; padding: 6px 14px; cursor: pointer; }
.st-reset-btn:hover { color: #aaa; border-color: #555; }

/* ═══════════════════════════════════════════
   Price List — Service item cards
═══════════════════════════════════════════ */
.pl-items { display: flex; flex-direction: column; gap: 8px; }
.pl-card {
    background: var(--site-card-bg, #1a1a1a); border-radius: 12px; padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.15s;
}
.pl-card:hover { border-color: rgba(0,128,128,0.2); }
.pl-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pl-card-name { font-size: 14px; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-price { font-size: 14px; font-weight: 700; color: var(--sb-accent, #008080); white-space: nowrap; }
.pl-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.pl-card-btn {
    background: none; border: none; font-size: 14px; cursor: pointer; padding: 4px 6px;
    border-radius: 6px; transition: background 0.15s; opacity: 0.5;
}
.pl-card-btn:hover { opacity: 1; }
.pl-card-btn.edit:hover { background: rgba(0,128,128,0.15); }
.pl-card-btn.del:hover { background: rgba(231,76,60,0.15); }
.pl-card-details {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px;
}
.pl-card-tag {
    font-size: 11px; color: #888;
}
.pl-card-tag span { color: #bbb; }
.pl-card-img {
    width: 48px; height: 36px; border-radius: 6px; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.pl-empty { text-align: center; color: #555; font-size: 13px; padding: 30px 10px; }

/* Price list edit form */
.pl-form { display: flex; flex-direction: column; gap: 8px; }
.pl-form-row { display: flex; gap: 8px; }
.pl-form-row > * { flex: 1; min-width: 0; }
.pl-form label { display: block; color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
.pl-form input, .pl-form textarea, .pl-form select {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
    color: #eee; font-size: 13px; outline: none; font-family: inherit;
}
.pl-form input:focus, .pl-form textarea:focus, .pl-form select:focus { border-color: var(--sb-accent, #008080); }
.pl-form textarea { resize: vertical; min-height: 50px; }
.pl-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.pl-form-cancel {
    padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: none; color: #aaa; font-size: 12px; cursor: pointer;
}
.pl-form-cancel:hover { color: #fff; border-color: rgba(255,255,255,0.25); }

/* Price List — Image gallery strip on cards */
.pl-gallery-strip {
    display: flex; gap: 6px; padding: 8px 0 2px; overflow-x: auto;

}
.pl-gallery-thumb {
    width: 56px; height: 42px; border-radius: 6px; object-fit: cover; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; transition: border-color 0.15s, transform 0.15s;
}
.pl-gallery-thumb:hover { border-color: var(--sb-accent, #008080); transform: scale(1.08); }

/* Price List — Multi-image upload in form */
.pl-images-field { margin-top: 2px; }
.pl-img-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.pl-img-thumb-wrap { position: relative; display: inline-block; }
.pl-img-thumb-preview {
    width: 60px; height: 45px; object-fit: cover; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}
.pl-img-remove {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
    border-radius: 50%; background: rgba(231,76,60,0.9); color: #fff;
    font-size: 13px; line-height: 16px; text-align: center;
    border: none; cursor: pointer; padding: 0;
}
.pl-img-remove:hover { background: #e74c3c; }

/* Price List — User star ratings */
.pl-rating-wrap {
    display: flex; align-items: center; gap: 2px; margin-top: 6px;
}
.pl-star {
    font-size: 16px; color: #444; cursor: default; transition: color 0.12s; line-height: 1;
}
.pl-star[onclick] { cursor: pointer; }
.pl-star[onclick]:hover { color: #FFD700 !important; transform: scale(1.15); }
.pl-star.avg { color: #b8860b; }
.pl-star.filled { color: #FFD700; }
.pl-rating-info {
    font-size: 11px; color: #888; margin-left: 6px;
}

/* ============================================
   SUGGESTED POI SYSTEM
============================================ */

/* ── Suggest-a-Place Dialog extras ── */
.sug-upload-label {
    display: inline-block; padding: 8px 14px; background: rgba(0,128,128,0.12);
    color: #008080; border-radius: 8px; cursor: pointer; font-size: 12px;
    font-weight: 600; transition: background 0.2s;
}
.sug-upload-label:hover { background: rgba(0,128,128,0.22); }

/* ── Map control: Suggested Places dropdown ── */
.sug-map-ctrl {
    background: rgba(20,20,20,0.92) !important; border-radius: 10px !important;
    border: 1px solid rgba(0,128,128,0.25) !important; overflow: visible; position: relative;
}
.sug-ctrl-btn {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px;
    cursor: pointer; color: #ccc; font-size: 13px; font-weight: 600;
    white-space: nowrap; user-select: none;
}
.sug-ctrl-btn:hover { color: #008080; }
.sug-ctrl-icon { font-size: 16px; }
.sug-ctrl-chev { font-size: 10px; opacity: 0.7; }
.sug-ctrl-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    background: rgba(20,20,20,0.96); border: 1px solid rgba(0,128,128,0.2);
    border-radius: 10px; overflow: hidden; min-width: 170px; z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.sug-dd-item {
    display: block; width: 100%; padding: 10px 14px; border: none;
    background: none; color: #ccc; font-size: 13px; text-align: left;
    cursor: pointer; transition: background 0.15s;
}
.sug-dd-item:hover { background: rgba(0,128,128,0.1); color: #fff; }
.sug-dd-item.active { color: #008080; background: rgba(0,128,128,0.08); font-weight: 600; }

/* ── Suggested POI Marker ── */
.sug-marker-wrap { background: none !important; border: none !important; }
.sug-marker {
    position: relative; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: transform 0.2s;
}
.sug-marker:hover { transform: scale(1.12); }
.sug-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #444, #222);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; border: 2px solid rgba(255,255,255,0.15);
    position: relative; z-index: 2;
}
.sug-name-tag {
    font-size: 9px; font-weight: 700; color: #aaa; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); margin-top: 2px;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}
.sug-stars {
    font-size: 8px; color: #888; white-space: nowrap;
}
.sug-rev-count { font-size: 7px; color: #666; }

/* New status (proximity only) — subtle pulse */
.sug-pulse {
    position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
    margin-top: -14px; margin-left: -14px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.2);
    animation: sugPulse 2s ease-out infinite; z-index: 1;
}
@keyframes sugPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Discovered status — RED ripple rings */
.sug-discovered .sug-icon {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    border-color: rgba(231,76,60,0.4);
}
.sug-discovered .sug-name-tag { color: #E74C3C; }
.sug-discovered .sug-stars { color: #E74C3C; }
.sug-ripple-red {
    position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
    margin-top: -14px; margin-left: -14px;
    border-radius: 50%; border: 2px solid rgba(231,76,60,0.5);
    animation: sugRippleRed 2s ease-out infinite; z-index: 1;
}
@keyframes sugRippleRed {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Promoted status — green glow like main POIs */
.sug-promoted .sug-icon {
    background: linear-gradient(135deg, #008080, #5a9e1e);
    border-color: rgba(0,128,128,0.5);
}
.sug-promoted .sug-name-tag { color: #008080; }

/* Owner's own marker border */
.sug-mine .sug-icon { border-color: rgba(74,144,217,0.6); }

/* ── Suggested POI Detail Overlay ── */
.sug-detail-overlay {
    position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.sug-detail-overlay.sug-open { opacity: 1; }
.sug-detail-panel {
    background: #1a1a1a; border: 1px solid rgba(0,128,128,0.2);
    border-radius: 16px; width: 420px; max-width: 95vw; max-height: 85vh;
    overflow-y: auto; padding: 24px; position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    transform: translateY(20px); transition: transform 0.3s;
}
.sug-open .sug-detail-panel { transform: translateY(0); }
.sug-close {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 20px; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background 0.2s;
}
.sug-close:hover { background: #c0392b; }
.sug-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sug-detail-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #333, #1a1a1a);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; border: 2px solid rgba(0,128,128,0.3); flex-shrink: 0;
}
.sug-detail-name { font-size: 18px; font-weight: 700; color: #fff; }
.sug-detail-meta { font-size: 12px; color: #888; margin-top: 2px; }
.sug-detail-desc { color: #bbb; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.sug-detail-info { font-size: 11px; color: #666; margin-bottom: 12px; }
.sug-detail-info > div { margin-bottom: 3px; }
.sug-detail-photo { margin-bottom: 14px; }
.sug-detail-photo img {
    width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; cursor: pointer;
}
.sug-detail-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid #333;
}

/* Status badges */
.sug-status-new { color: #aaa; }
.sug-status-discovered { color: #E74C3C; font-weight: 600; }
.sug-status-promoted { color: #008080; font-weight: 600; }

/* ── Admin Suggested POI Section ── */
.sug-admin-section { margin-bottom: 16px; }
.sug-admin-label {
    font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.sug-admin-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px;
}
.sug-admin-row-main { flex: 1; min-width: 0; }
.sug-admin-row-name { font-size: 13px; font-weight: 600; color: #fff; }
.sug-admin-row-meta { font-size: 11px; color: #888; margin-top: 2px; }
.sug-admin-row-btns { display: flex; gap: 4px; flex-shrink: 0; }
.sug-badge-promoted { color: #008080; font-weight: 600; }
.sug-badge-discovered { color: #E74C3C; font-weight: 600; }
.sug-badge-new { color: #888; }

/* ── Dropdown divider ── */
.sug-dd-divider {
    height: 1px; background: rgba(255,255,255,0.08); margin: 4px 10px;
}

/* ── Suggested POI Labels (zoom-aware like main POIs) ── */
.sug-label-wrap { background: none !important; border: none !important; }
.sug-label {
    position: relative; white-space: nowrap; font-size: 10px;
    font-weight: 600; padding: 1px 6px; border-radius: 4px;
    pointer-events: none;
}
.sug-label-text { position: relative; z-index: 1; }
.sug-label-stats { font-size: 9px; opacity: 0.7; margin-left: 4px; }
.sug-lbl-new       { color: #aaa; }
.sug-lbl-discovered { color: #E74C3C; text-shadow: 0 0 6px rgba(231,76,60,0.4); }
.sug-lbl-promoted   { color: #008080; text-shadow: 0 0 6px rgba(0,128,128,0.4); }

/* ── Suggested POI tooltip (hover) ── */
.sug-tooltip {
    background: rgba(20,20,20,0.95) !important; color: #fff !important;
    border: 1px solid rgba(0,128,128,0.2) !important; border-radius: 8px !important;
    font-size: 12px; padding: 6px 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.sug-tooltip::before { border-top-color: rgba(20,20,20,0.95) !important; }

/* ── Suggested POI Detail: Review stats bar ── */
.sug-detail-stats {
    display: flex; gap: 0; margin: 0 0 14px; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.sug-stat {
    flex: 1; text-align: center; padding: 10px 6px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sug-stat:last-child { border-right: none; }
.sug-stat-val {
    display: block; font-size: 18px; font-weight: 700; color: #fff;
}
.sug-stat-lbl {
    display: block; font-size: 10px; color: #888; margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   TOURS & SAFARI MARKETPLACE
══════════════════════════════════════════════════════════ */

/* ── Section Container (full-page panel) ── */
.tours-section {
    background: var(--site-bg, #0a0a0a);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Section Header ── */
.tours-header {
    background: linear-gradient(135deg, rgba(0,128,128,0.12) 0%, rgba(0,0,0,0) 60%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 14px 24px 20px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}
.tours-back-btn {
    position: absolute; left: 18px; top: 16px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #ccc; font-size: 13px; padding: 7px 16px; border-radius: 8px;
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
.tours-back-btn:hover { background: rgba(0,128,128,0.15); color: #8dc63f; border-color: rgba(0,128,128,0.3); }
.tours-header-inner { max-width: 800px; margin: 0 auto; }
.tours-title {
    font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.tours-subtitle {
    font-size: 15px; color: #999; margin: 0 0 16px; line-height: 1.5;
}
.tours-header-stats {
    display: flex; justify-content: center; gap: 12px;
    font-size: 14px; color: #aaa;
}
.tours-header-stats strong { color: #8dc63f; font-weight: 700; }
.ths-sep { color: #444; }

/* ── Body: Filters + Grid ── */
.tours-body {
    display: flex; gap: 0;
    max-width: 1440px; margin: 0 auto;
    flex: 1;
    overflow: hidden;
    width: 100%;
}

/* ── Filter Sidebar ── */
.tours-filters {
    width: 340px; min-width: 340px; flex-shrink: 0;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    position: sticky;
    top: 0;
    transition: width .3s ease, min-width .3s ease, padding .3s ease, opacity .25s ease;
}
.tours-filters.collapsed {
    width: 0; min-width: 0; padding: 0;
    overflow: hidden; opacity: 0;
    border-right: none;
    pointer-events: none;
}
/* Collapse / Expand buttons */
.tf-collapse-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: #aaa; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.tf-collapse-btn:hover { background: rgba(0,128,128,0.2); color: #8dc63f; }
.tf-expand-btn {
    display: none;
    position: sticky; top: 0;
    align-self: stretch; order: -1;
    width: 18px; min-width: 18px;
    background: #0a0a0a;
    color: rgba(255,255,255,.7); border: none; border-right: 2px solid rgba(0,128,128,0.3); border-radius: 0 4px 4px 0;
    padding: 0; font-size: 11px;
    cursor: pointer; z-index: 10;
    align-items: center; justify-content: center;
    box-shadow: 1px 0 6px rgba(0,0,0,.25);
    transition: background .2s, width .2s, border-color .2s;
}
.tf-expand-btn:hover { background: #555; width: 22px; color: #8dc63f; border-right-color: rgba(0,128,128,0.5); }
.tours-filters.collapsed ~ .tf-expand-btn { display: flex; }
.tf-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px;
}
.tf-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.tf-clear {
    font-size: 12px; color: #8dc63f; background: none; border: none;
    cursor: pointer; text-decoration: underline;
}
.tf-clear:hover { color: #a8e063; }

/* ── Filter Groups ── */
.tf-group { margin-bottom: 18px; }
.tf-label {
    display: block; font-size: 12px; font-weight: 600; color: #aaa;
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.tf-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 9px 12px; color: #fff; font-size: 13px;
    outline: none; transition: border-color 0.2s;
}
.tf-input:focus { border-color: #8dc63f; }
.tf-input::placeholder { color: #555; }

/* Date Row */
.tf-date-row { display: flex; gap: 8px; align-items: center; }
.tf-date {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 10px; color: #fff; font-size: 12px;
    outline: none; color-scheme: dark;
}
.tf-date:focus { border-color: #8dc63f; }
.tf-date-sep { color: #555; font-size: 14px; }

/* Traveller Counter */
.tf-travellers { display: flex; flex-direction: column; gap: 6px; }
.tf-trav-row {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 12px;
    color: #ccc; font-size: 13px;
}
.tf-counter { display: flex; align-items: center; gap: 10px; }
.tf-cnt-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,128,128,0.15); border: 1px solid rgba(0,128,128,0.3);
    color: #8dc63f; font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; line-height: 1;
    transition: background 0.2s;
}
.tf-cnt-btn:hover { background: rgba(0,128,128,0.25); }
.tf-cnt-val { font-size: 15px; font-weight: 700; color: #fff; min-width: 20px; text-align: center; }

/* Dual Range Slider */
.tf-range-wrap { padding: 0; }
.tf-range-labels {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #8dc63f; font-weight: 600; margin-bottom: 2px;
}
.tf-dual-range { position: relative; height: 30px; }
.tf-range {
    position: absolute; top: 0; left: 0; width: 100%; height: 30px;
    -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none;
}
.tf-range::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: all;
    width: 16px; height: 16px; border-radius: 50%;
    background: #8dc63f; border: 2px solid #0a0a0a;
    cursor: pointer; position: relative; z-index: 2;
}
.tf-range::-moz-range-thumb {
    pointer-events: all;
    width: 16px; height: 16px; border-radius: 50%;
    background: #8dc63f; border: 2px solid #0a0a0a;
    cursor: pointer;
}
.tf-range::-webkit-slider-runnable-track {
    height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;
}
.tf-range::-moz-range-track {
    height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;
}

/* Checkbox Filters */
.tf-checks { display: flex; flex-direction: column; gap: 4px; }
.tf-checks-scroll { max-height: 200px; overflow-y: auto; padding-right: 4px; }
.tf-check {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 6px; cursor: pointer;
    transition: background 0.15s; font-size: 13px; color: #ccc;
}
.tf-check:hover { background: rgba(255,255,255,0.04); }
.tf-check input[type=checkbox] {
    accent-color: #8dc63f; width: 15px; height: 15px;
    cursor: pointer; flex-shrink: 0;
}

/* Rating Bar */
.tf-rating-bar { display: flex; gap: 4px; }
.tf-star {
    padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: #aaa; cursor: pointer; transition: all 0.2s;
}
.tf-star:hover, .tf-star.active {
    background: rgba(0,128,128,0.15); border-color: rgba(0,128,128,0.3);
    color: #8dc63f;
}

/* Search Button */
.tf-search-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #8dc63f, #6ba02e);
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    margin: 16px 0 12px; transition: transform 0.15s, box-shadow 0.15s;
}
.tf-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,128,128,0.3);
}

/* Provider CTA */
.tf-provider-cta {
    margin-top: 20px; padding: 16px;
    background: rgba(0,128,128,0.06); border: 1px solid rgba(0,128,128,0.15);
    border-radius: 10px; text-align: center;
}
.tf-provider-cta p {
    color: #999; font-size: 13px; margin: 0 0 10px;
}
.tf-provider-btn {
    padding: 8px 16px; border: 1px solid rgba(0,128,128,0.3);
    border-radius: 8px; background: rgba(0,128,128,0.1);
    color: #8dc63f; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.tf-provider-btn:hover { background: rgba(0,128,128,0.2); }

/* ── Tour Cards Grid Area ── */
.tours-grid-area { flex: 1; padding: 20px; min-width: 0; overflow-y: auto; }

/* Sort Bar */
.tours-sort-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding: 0 4px;
}
.tours-result-count { font-size: 13px; color: #888; }
.tours-sort-right { display: flex; align-items: center; gap: 8px; }
.tours-sort-lbl { font-size: 12px; color: #888; }
.tours-sort-sel {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 6px 10px; color: #fff; font-size: 12px;
    outline: none; cursor: pointer;
}

/* Cards Grid */
.tours-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

/* ── Empty State ── */
.tours-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px;
    color: #777;
}
.tours-empty-icon { font-size: 48px; margin-bottom: 12px; }
.tours-empty h3 { color: #aaa; font-size: 18px; margin: 0 0 8px; }
.tours-empty p { font-size: 14px; }
.tours-empty a { color: #8dc63f; }

/* ── Tour Card ── */
.tour-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; overflow: hidden;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.tour-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    border-color: rgba(0,128,128,0.2);
}
.tc-featured {
    border-color: rgba(255,193,7,0.25);
    background: linear-gradient(135deg, rgba(255,193,7,0.04) 0%, rgba(255,255,255,0.03) 100%);
}
.tc-featured:hover { border-color: rgba(255,193,7,0.4); }

/* Owner card — premium purple glow */
.tc-owner {
    border-color: rgba(156,39,176,0.3);
    background: linear-gradient(135deg, rgba(156,39,176,0.06) 0%, rgba(255,215,0,0.03) 100%);
}
.tc-owner:hover { border-color: rgba(156,39,176,0.5); }

/* Directory card — subtle muted style */
.tc-directory {
    border-color: rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.015);
    border-style: dashed;
}
.tc-directory:hover { border-color: rgba(108,180,238,0.25); border-style: solid; }

/* Source Badges (card level) */
.tc-source-badge {
    position: absolute; bottom: 12px; left: 12px; z-index: 5;
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.tc-badge-featured { background: rgba(255,193,7,0.9); color: #000; }
.tc-badge-owner { background: rgba(156,39,176,0.9); color: #fff; }
.tc-badge-registered { background: rgba(0,128,128,0.85); color: #fff; }
.tc-badge-directory { background: rgba(108,180,238,0.8); color: #fff; }

/* Board source text */
.tc-op-source { font-size: 11px; color: #6cb4ee; font-style: italic; }

/* Claim This Listing button */
.tc-claim-btn {
    flex-shrink: 0; padding: 8px 16px; border: 1px dashed rgba(108,180,238,0.5);
    border-radius: 8px; background: rgba(108,180,238,0.1);
    color: #6cb4ee; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.tc-claim-btn:hover {
    background: rgba(108,180,238,0.2); border-style: solid;
    transform: scale(1.04);
}

/* Old featured badge – kept for backward compat */
.tc-featured-badge {
    position: absolute; top: 12px; left: 12px; z-index: 5;
    background: rgba(255,193,7,0.9); color: #000; font-size: 11px;
    font-weight: 700; padding: 3px 10px; border-radius: 20px;
}

/* Card Image / Carousel */
.tc-image-wrap {
    position: relative; height: 200px; overflow: hidden;
    background: #111;
}
.tc-img-scroll {
    position: relative; width: 100%; height: 100%;
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: manipulation;
    user-select: none; -webkit-user-select: none;
}
.tc-img-scroll::-webkit-scrollbar { display: none; }
.tc-img-scroll img,
.tc-video-slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    object-fit: cover; scroll-snap-align: start;
    background: #000;
}
.tc-video-slide { position: relative; display: flex; align-items: center; justify-content: center; }
.tc-video-slide video { width: 100%; height: 100%; object-fit: cover; }
.tc-video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); border: none; cursor: pointer; font-size: 36px; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: opacity 0.2s;
}
.tc-video-play:hover { background: rgba(0,0,0,0.45); }
.tc-video-slide.playing .tc-video-play { opacity: 0; pointer-events: none; }
.tc-dots {
    position: absolute; bottom: 8px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 4px;
    pointer-events: none;
}
.tc-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.2);
}
.tc-dots span.on { background: #fff; }
.tc-img-scroll.has-nav { cursor: pointer; }
.tc-img-scroll.has-nav::before,
.tc-img-scroll.has-nav::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 30%; max-width: 60px;
    pointer-events: none; display: flex; align-items: center; opacity: 0;
    transition: opacity 0.18s ease; z-index: 2;
}
.tc-img-scroll.has-nav::before {
    left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z'/></svg>"), linear-gradient(90deg, rgba(0,0,0,0.35), transparent);
    background-repeat: no-repeat; background-position: 8px center, left center; background-size: 22px 22px, auto;
}
.tc-img-scroll.has-nav::after {
    right: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='m8.59 16.59 4.58-4.59-4.58-4.59L10 6l6 6-6 6z'/></svg>"), linear-gradient(270deg, rgba(0,0,0,0.35), transparent);
    background-repeat: no-repeat; background-position: calc(100% - 8px) center, right center; background-size: 22px 22px, auto;
}
.tour-card:hover .tc-img-scroll.has-nav::before,
.tour-card:hover .tc-img-scroll.has-nav::after { opacity: 1; }
.tc-image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s;
}
.tour-card:hover .tc-image { transform: scale(1.05); }
.tc-duration {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.75); color: #fff;
    font-size: 12px; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; backdrop-filter: blur(4px);
    z-index: 3;
}

/* Card Body */
.tc-body { padding: 16px; }
.tc-title {
    font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 6px;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-price {
    font-size: 18px; font-weight: 700; color: #8dc63f; margin: 0 0 10px;
}

/* Tags */
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tc-tag {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.05); color: #aaa;
    border: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.tc-tag-comfort { color: #e8b84b; border-color: rgba(232,184,75,0.2); }
.tc-tag-accom { color: #6cb4ee; border-color: rgba(108,180,238,0.2); }

/* Route */
.tc-route {
    font-size: 12px; color: #888; margin-bottom: 10px; line-height: 1.6;
    padding: 8px 10px; background: rgba(255,255,255,0.02);
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.04);
}
.tc-route-label { color: #aaa; font-weight: 600; display: block; margin-bottom: 4px; }
.tc-route-stop { color: #ccc; }
.tc-route-end { color: #8dc63f; font-weight: 600; }
a.tc-route-poi { color: #8dc63f; text-decoration: none; cursor: pointer; }
a.tc-route-poi:hover { text-decoration: underline; color: #4DD0E1; }
.tc-route-arrow { color: #444; margin: 0 3px; }
.tc-poi-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tc-poi-badge { font-size: 11px; background: rgba(0,128,128,0.1); color: #008080; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(0,128,128,0.2); }
.tc-poi-badge a { color: #008080; text-decoration: none; }
.tc-poi-badge a:hover { text-decoration: underline; }
.tc-poi-single { background: rgba(141,198,63,0.1); color: #8dc63f; border-color: rgba(141,198,63,0.2); }
.tc-poi-single a { color: #8dc63f; }

/* Inclusions */
.tc-inclusions {
    list-style: none; padding: 0; margin: 0 0 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
}
.tc-inclusions li {
    font-size: 11px; color: #999; padding: 2px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Operator Row */
.tc-operator {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
    gap: 10px;
}
.tc-op-info { flex: 1; min-width: 0; }
.tc-op-name {
    display: block; font-size: 13px; font-weight: 600; color: #ddd;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-op-rating { font-size: 12px; color: #999; }
.tc-stars { color: #e8b84b; letter-spacing: 1px; }

/* View Button */
.tc-view-btn {
    flex-shrink: 0; padding: 8px 16px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #8dc63f, #6ba02e);
    color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: transform 0.15s;
    white-space: nowrap;
}
.tc-view-btn:hover { transform: scale(1.04); }

/* Pagination */
.tours-pagination { text-align: center; padding: 30px 0; }
.tours-load-more {
    padding: 12px 30px; border: 1px solid rgba(0,128,128,0.3);
    border-radius: 10px; background: rgba(0,128,128,0.08);
    color: #8dc63f; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.tours-load-more:hover { background: rgba(0,128,128,0.15); }

/* ══════════════════════════════════════════════
   PROVIDER SUBMISSION DIALOG
══════════════════════════════════════════════ */
.provider-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.provider-dialog {
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; width: 100%; max-width: 640px;
    max-height: 90vh; overflow-y: auto;
    padding: 28px;
    position: relative;
}
.provider-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: #888; font-size: 24px; cursor: pointer;
}
.provider-close:hover { color: #fff; }
.provider-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.provider-desc { font-size: 13px; color: #888; margin: 0 0 22px; line-height: 1.5; }

/* Provider Form */
.pf-row { margin-bottom: 14px; }
.pf-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-label { display: block; font-size: 12px; font-weight: 600; color: #aaa; margin-bottom: 4px; }
.pf-input, .pf-select, .pf-textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 9px 12px; color: #fff; font-size: 13px;
    outline: none; font-family: inherit;
}
.pf-input:focus, .pf-select:focus, .pf-textarea:focus { border-color: #8dc63f; }
.pf-select { cursor: pointer; }
.pf-select option { background: #1a1a1a; }
.pf-textarea { resize: vertical; min-height: 60px; }
.pf-check-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
    font-size: 13px; color: #ccc;
}
.pf-check-grid label {
    display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer;
}
.pf-check-grid input[type=checkbox] { accent-color: #8dc63f; }
.pf-submit-btn {
    width: 100%; padding: 14px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #8dc63f, #6ba02e);
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    margin-top: 8px; transition: transform 0.15s;
}
.pf-submit-btn:hover { transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   TOUR DETAIL MODAL
══════════════════════════════════════════════ */
.tour-detail-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.tour-detail-modal {
    background: #141414; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px; width: 100%; max-width: 700px;
    max-height: 90vh; overflow-y: auto;
    position: relative;
}
.td-close {
    position: absolute; top: 14px; right: 16px; z-index: 5;
    background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 26px;
    cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.td-close:hover { background: rgba(0,0,0,0.8); }

/* Detail Hero / Carousel */
.td-hero { position: relative; height: 280px; overflow: hidden; }
.td-hero img { width: 100%; height: 100%; object-fit: cover; }
.td-img-box {
    position: relative; width: 100%; height: 100%;
    background: #0d0d0d; overflow: hidden;
}
.td-img-blur-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    filter: blur(22px) brightness(0.32) saturate(1.6);
    transform: scale(1.18);
    transition: background-image 0.25s ease;
}
.td-img-scroll {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.td-img-scroll::-webkit-scrollbar { display: none; }
.td-img-scroll img,
.td-video-slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    object-fit: contain; scroll-snap-align: start;
    background: #000;
}
.td-video-slide { position: relative; display: flex; align-items: center; justify-content: center; }
.td-video-slide video { width: 100%; height: 100%; object-fit: contain; }
.td-video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); border: none; cursor: pointer; font-size: 48px; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: opacity 0.2s;
}
.td-video-play:hover { background: rgba(0,0,0,0.45); }
.td-video-slide.playing .td-video-play { opacity: 0; pointer-events: none; }
.td-dots {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 5px;
    pointer-events: none; z-index: 3;
}
.td-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,0.45); border: 1px solid rgba(0,0,0,0.2);
}
.td-dots span.on { background: #fff; }
.td-img-scroll.has-nav { cursor: pointer; }
.td-img-scroll.has-nav::before,
.td-img-scroll.has-nav::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 30%; max-width: 60px;
    pointer-events: none; display: flex; align-items: center; opacity: 0;
    transition: opacity 0.18s ease; z-index: 2;
}
.td-img-scroll.has-nav::before {
    left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z'/></svg>"), linear-gradient(90deg, rgba(0,0,0,0.35), transparent);
    background-repeat: no-repeat; background-position: 8px center, left center; background-size: 22px 22px, auto;
}
.td-img-scroll.has-nav::after {
    right: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='m8.59 16.59 4.58-4.59-4.58-4.59L10 6l6 6-6 6z'/></svg>"), linear-gradient(270deg, rgba(0,0,0,0.35), transparent);
    background-repeat: no-repeat; background-position: calc(100% - 8px) center, right center; background-size: 22px 22px, auto;
}
.td-hero:hover .td-img-scroll.has-nav::before,
.td-hero:hover .td-img-scroll.has-nav::after { opacity: 1; }
.td-thumbs {
    display: flex; gap: 6px; padding: 10px 18px;
    overflow-x: auto; scrollbar-width: none;
    background: #0d0d0d; border-top: 1px solid #222;
}
.td-thumbs::-webkit-scrollbar { display: none; }
.td-thumbs img {
    width: 60px; height: 60px; border-radius: 6px;
    object-fit: cover; border: 2px solid transparent;
    cursor: pointer; flex-shrink: 0;
}
.td-thumbs img.on { border-color: #008080; }
.td-thumb {
    width: 60px; height: 60px; border-radius: 6px;
    background: #222; border: 2px solid transparent;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
}
.td-thumb.on { border-color: #008080; }
.td-featured-badge {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,193,7,0.9); color: #000; font-size: 12px;
    font-weight: 700; padding: 4px 14px; border-radius: 20px;
}

/* Detail modal source badges */
.td-source-badge {
    position: absolute; top: 14px; left: 14px;
    font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px;
}
.td-badge-featured { background: rgba(255,193,7,0.9); color: #000; }
.td-badge-owner { background: rgba(156,39,176,0.9); color: #fff; }
.td-badge-registered { background: rgba(0,128,128,0.85); color: #fff; }
.td-badge-directory { background: rgba(108,180,238,0.8); color: #fff; }

/* Board source line in detail */
.td-op-source { font-size: 12px; color: #6cb4ee; font-style: italic; margin-top: 4px; }

/* Claim box in detail modal */
.td-claim-box {
    margin-top: 20px; padding: 20px;
    background: rgba(108,180,238,0.06);
    border: 1px dashed rgba(108,180,238,0.3);
    border-radius: 12px; text-align: center;
}
.td-claim-box h4 { font-size: 16px; color: #6cb4ee; margin: 0 0 8px; }
.td-claim-box p { font-size: 13px; color: #aaa; margin: 0 0 16px; line-height: 1.5; }
.td-claim-btn {
    display: inline-block; padding: 12px 28px;
    background: linear-gradient(135deg, #3a99e0, #2574b5);
    color: #fff; font-size: 14px; font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    transition: transform 0.15s;
}
.td-claim-btn:hover { transform: scale(1.04); }

/* Detail Content */
.td-content { padding: 24px 28px 30px; }
.td-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.3; }
.td-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.td-meta {
    font-size: 12px; padding: 4px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.05); color: #aaa;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Price Box */
.td-price-box {
    background: rgba(0,128,128,0.08); border: 1px solid rgba(0,128,128,0.2);
    border-radius: 12px; padding: 16px 20px; margin-bottom: 18px;
    text-align: center;
}
.td-price { font-size: 26px; font-weight: 700; color: #8dc63f; }
.td-price-sub { font-size: 13px; color: #888; margin-top: 2px; }

.td-desc { font-size: 14px; color: #bbb; line-height: 1.7; margin: 0 0 20px; }

/* Detail Route */
.td-route { margin-bottom: 20px; }
.td-route h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.td-route-stops { display: flex; flex-direction: column; gap: 0; padding-left: 10px; }
.td-stop {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; position: relative; color: #ccc; font-size: 13px;
}
.td-stop::before {
    content: ''; position: absolute; left: 5px; top: 24px;
    width: 1px; height: calc(100%); background: rgba(0,128,128,0.2);
}
.td-stop:last-child::before { display: none; }
.td-stop-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    background: rgba(0,128,128,0.2); border: 2px solid rgba(0,128,128,0.4);
}
.td-stop-end .td-stop-dot {
    background: rgba(0,128,128,0.4); border-color: #8dc63f;
}
.td-stop-end { color: #8dc63f; font-weight: 600; }
a.td-stop-poi { text-decoration: none; cursor: pointer; }
a.td-stop-poi span { color: #8dc63f; }
a.td-stop-poi:hover span { text-decoration: underline; color: #4DD0E1; }

/* Detail Inclusions */
.td-inclusions { margin-bottom: 20px; }
.td-inclusions h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.td-inclusions ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.td-inclusions li { font-size: 13px; color: #bbb; padding: 3px 0; }

/* Detail Operator */
.td-operator-box {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 16px; margin-bottom: 20px;
}
.td-operator-box h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.td-op-name { font-size: 16px; font-weight: 600; color: #ddd; margin-bottom: 4px; }
.td-op-rating { font-size: 13px; color: #999; margin-bottom: 6px; }
.td-avail { font-size: 12px; color: #aaa; }

/* Action Buttons */
.td-actions { display: flex; gap: 12px; }
.td-book-btn {
    flex: 1; padding: 14px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #8dc63f, #6ba02e);
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: transform 0.15s;
}
.td-book-btn:hover { transform: translateY(-1px); }
.td-enquire-btn {
    flex: 1; padding: 14px; border: 1px solid rgba(0,128,128,0.3);
    border-radius: 10px; background: rgba(0,128,128,0.08);
    color: #8dc63f; font-size: 15px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: background 0.2s;
}
.td-enquire-btn:hover { background: rgba(0,128,128,0.15); }
.td-map-btn {
    flex: 1; padding: 14px; border: 1px solid rgba(108,180,238,0.3);
    border-radius: 10px; background: rgba(108,180,238,0.08);
    color: #6cb4ee; font-size: 15px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: background 0.2s;
}
.td-map-btn:hover { background: rgba(108,180,238,0.15); }
.td-add-trip-btn {
    flex: 1; padding: 14px; border: 1px solid rgba(0,128,128,0.3);
    border-radius: 10px; background: rgba(0,128,128,0.08);
    color: #8dc63f; font-size: 15px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: background 0.2s;
}
.td-add-trip-btn:hover { background: rgba(0,128,128,0.15); }
.td-share-btn {
    flex: 1; padding: 14px; border: 1px solid rgba(200,200,200,0.2);
    border-radius: 10px; background: rgba(255,255,255,0.04);
    color: #aaa; font-size: 15px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: background 0.2s;
}
.td-share-btn:hover { background: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════
   TOURS RESPONSIVE
═══════════════════════════════════ */

/* Mobile filter toggle button (shown < 768px) */
.tf-mobile-toggle {
    display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 100; padding: 12px 24px; border: none; border-radius: 25px;
    background: linear-gradient(135deg, #8dc63f, #6ba02e);
    color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

@media (max-width: 900px) {
    .tours-body { flex-direction: column; }
    .tours-filters {
        width: 100%; min-width: 0; max-height: none;
        position: relative; border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .tours-filters.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; opacity: 0; border-bottom: none; }
    .tf-expand-btn { order: 0; border-radius: 4px; writing-mode: horizontal-tb; padding: 8px 14px; width: auto; min-width: auto; margin: 0 auto 8px; }
    .tf-collapse-btn { display: flex; }
    .tours-cards {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
@media (max-width: 600px) {
    .tours-header { padding: 28px 16px 22px; }
    .tours-title { font-size: 22px; }
    .tours-grid-area { padding: 12px; }
    .tours-cards {
        grid-template-columns: 1fr;
    }
    .tc-inclusions { grid-template-columns: 1fr; }
    .td-content { padding: 18px 16px 24px; }
    .td-hero { height: 200px; }
    .td-inclusions ul { grid-template-columns: 1fr; }
    .td-actions { flex-direction: column; }
    .pf-row-2col { grid-template-columns: 1fr; }
    .provider-dialog { padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY DRAWER — Full 5-tab community experience
   Feed | Topics | Chat | Q&A | Inbox
   Adapted from dental shop, styled for SARAFI dark theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer structure ── */
.comm-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9500;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.comm-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.comm-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: var(--site-bg, #0a0a0a);
    border-left: 1px solid var(--sb-border, rgba(0,128,128,.18));
    z-index: 9501;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,.6);
}
.comm-drawer.open { transform: translateX(0); }

.drawer-wide { width: min(560px, 100vw) !important; }
@media (max-width: 720px) {
    .drawer-wide { width: 100vw !important; }
    .comm-drawer { width: 100vw; max-width: none; }
}

.comm-drawer-hd {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sb-border, rgba(0,128,128,.18));
    display: flex; align-items: center; justify-content: space-between;
    background: var(--sb-bg, #0d0d0d);
    flex-shrink: 0;
}
.comm-drawer-hd h3 {
    margin: 0; font-size: 15px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px;
}
.comm-drawer-close {
    background: none; border: none; color: #9ca3af;
    font-size: 24px; cursor: pointer; padding: 2px 6px; line-height: 1;
    border-radius: 8px; transition: color .15s, background .15s;
}
.comm-drawer-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Tabs */
.comm-tabs {
    display: inline-flex; gap: 4px;
    background: #1a1a1a; padding: 4px; border-radius: 999px;
    margin: 10px 14px 0; flex-shrink: 0;
}
.comm-tab {
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #888;
    background: none; border: none; cursor: pointer;
    transition: all .15s;
}
.comm-tab.active { background: #008080; color: #fff; }
.comm-tab:hover:not(.active) { background: #2a2a2a; color: #ccc; }

.comm-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 10px 0;
    min-height: 0;
}
.comm-drawer-footer {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--sb-border, rgba(0,128,128,.18));
    background: var(--sb-bg, #0d0d0d);
    flex-shrink: 0;
}

/* Feed */
.comm-feed { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.feed-post {
    background: var(--card-bg, #141414);
    border: 1px solid var(--sb-border, rgba(0,128,128,.12));
    border-radius: 12px; padding: 12px;
}
.feed-post-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.feed-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 13px;
    flex-shrink: 0;
}
.feed-post-meta { flex: 1; min-width: 0; }
.feed-post-name { font-size: 13px; font-weight: 700; color: #fff; }
.feed-post-time { font-size: 11px; color: var(--sb-muted, #666); }
.feed-post-body {
    font-size: 14px; color: #ccc; line-height: 1.45;
    margin-bottom: 8px; word-break: break-word;
}
.feed-post-actions {
    display: flex; gap: 16px;
    padding-top: 6px; border-top: 1px solid var(--sb-border, rgba(0,128,128,.12));
}
.feed-action {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: #888;
    background: none; border: none; cursor: pointer;
}
.feed-action.liked { color: #f44336; }
.feed-action:hover { color: #fff; }

/* Reactions */
.comm-rx-bar {
    display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px;
}
.comm-rx-btn {
    display: inline-flex; align-items: center; gap: 3px;
    background: #1a1a1a; border: 1px solid rgba(0,128,128,.2);
    border-radius: 999px; padding: 2px 8px; font-size: 13px; cursor: pointer;
    transition: background .15s, border-color .15s; color: #ccc;
}
.comm-rx-btn.reacted {
    background: rgba(0,128,128,.18); border-color: #008080; color: #4DD0E1;
}
.comm-rx-count { font-size: 11px; font-weight: 700; }

/* Chat */
.chat-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.chat-msg {
    max-width: 80%; padding: 8px 12px;
    border-radius: 14px; font-size: 14px; line-height: 1.4;
    word-break: break-word; position: relative;
}
.chat-msg.them {
    align-self: flex-start;
    background: #1a1a1a; color: #ccc;
    border-bottom-left-radius: 4px;
}
.chat-msg.me {
    align-self: flex-end;
    background: #008080; color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-time {
    font-size: 10px; opacity: .7;
    display: block; margin-top: 2px; text-align: right;
}

/* Q&A */
.qa-item {
    background: var(--card-bg, #141414);
    border: 1px solid var(--sb-border, rgba(0,128,128,.12));
    border-radius: 10px; padding: 12px; margin: 0 14px 10px;
}
.qa-q {
    font-size: 14px; font-weight: 700; color: #fff;
    display: flex; align-items: flex-start; gap: 6px;
}
.qa-q-icon {
    background: #1565C0; color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.qa-a {
    margin-top: 8px; padding: 8px 10px;
    background: rgba(0,128,128,.08);
    border-left: 3px solid #008080;
    border-radius: 6px;
    font-size: 13px; color: #ccc;
    display: flex; align-items: flex-start; gap: 6px;
}
.qa-a-icon {
    background: #008080; color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.qa-meta {
    font-size: 11px; color: var(--sb-muted, #666);
    margin-top: 6px;
}

/* Toolbar / Search */
.comm-toolbox {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sb-border, rgba(0,128,128,.12));
    background: var(--sb-bg, #0d0d0d);
    position: sticky; top: 0; z-index: 3;
}
.comm-search-wrap {
    position: relative; flex: 1;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 10px; padding: 6px 10px;
    background: #141414;
}
.comm-search-input {
    border: 0; outline: 0; flex: 1; min-width: 0;
    background: transparent; color: #ccc; font-size: 13px;
}
.comm-search-input::placeholder { color: #555; }
.comm-search-clear,
.comm-settings-btn,
.comm-mini-action {
    border: 0; background: transparent; color: #888;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
}
.comm-settings-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 10px; background: #141414;
}
.comm-settings-btn:hover { background: #1a1a1a; color: #fff; }
.comm-search-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    background: #141414; border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    box-shadow: 0 10px 24px rgba(0,0,0,.4);
    border-radius: 10px; padding: 6px; z-index: 20;
}
.comm-search-pick {
    width: 100%; border: 0; background: transparent;
    color: #ccc; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px; text-align: left;
    font-size: 13px;
}
.comm-search-pick:hover { background: #1a1a1a; }

/* Mini actions */
.comm-mini-actions {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: auto; flex-shrink: 0;
}
.comm-mini-action {
    width: 26px; height: 26px; border-radius: 8px;
    font-size: 16px; color: #888;
}
.comm-mini-action:hover,
.comm-mini-action.active {
    background: rgba(0,128,128,.16); color: #008080;
}
.comm-mini-

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY DRAWER — Full 5-tab community experience
   Feed | Topics | Chat | Q&A | Inbox
   Adapted from dental shop, styled for SARAFI dark theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer structure ── */
.comm-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9500;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.comm-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.comm-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: var(--site-bg, #0a0a0a);
    border-left: 1px solid var(--sb-border, rgba(0,128,128,.18));
    z-index: 9501;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,.6);
}
.comm-drawer.open { transform: translateX(0); }

.drawer-wide { width: min(560px, 100vw) !important; }
@media (max-width: 720px) {
    .drawer-wide { width: 100vw !important; }
    .comm-drawer { width: 100vw; max-width: none; }
}

.comm-drawer-hd {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sb-border, rgba(0,128,128,.18));
    display: flex; align-items: center; justify-content: space-between;
    background: var(--sb-bg, #0d0d0d);
    flex-shrink: 0;
}
.comm-drawer-hd h3 {
    margin: 0; font-size: 15px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px;
}
.comm-drawer-close {
    background: none; border: none; color: #9ca3af;
    font-size: 24px; cursor: pointer; padding: 2px 6px; line-height: 1;
    border-radius: 8px; transition: color .15s, background .15s;
}
.comm-drawer-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Tabs */
.comm-tabs {
    display: inline-flex; gap: 4px;
    background: #1a1a1a; padding: 4px; border-radius: 999px;
    margin: 10px 14px 0; flex-shrink: 0;
}
.comm-tab {
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #888;
    background: none; border: none; cursor: pointer;
    transition: all .15s;
}
.comm-tab.active { background: #008080; color: #fff; }
.comm-tab:hover:not(.active) { background: #2a2a2a; color: #ccc; }

.comm-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 10px 0;
    min-height: 0;
}
.comm-drawer-footer {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--sb-border, rgba(0,128,128,.18));
    background: var(--sb-bg, #0d0d0d);
    flex-shrink: 0;
}

/* Feed */
.comm-feed { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.feed-post {
    background: var(--card-bg, #141414);
    border: 1px solid var(--sb-border, rgba(0,128,128,.12));
    border-radius: 12px; padding: 12px;
}
.feed-post-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.feed-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 13px;
    flex-shrink: 0;
}
.feed-post-meta { flex: 1; min-width: 0; }
.feed-post-name { font-size: 13px; font-weight: 700; color: #fff; }
.feed-post-time { font-size: 11px; color: var(--sb-muted, #666); }
.feed-post-body {
    font-size: 14px; color: #ccc; line-height: 1.45;
    margin-bottom: 8px; word-break: break-word;
}
.feed-post-actions {
    display: flex; gap: 16px;
    padding-top: 6px; border-top: 1px solid var(--sb-border, rgba(0,128,128,.12));
}
.feed-action {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: #888;
    background: none; border: none; cursor: pointer;
}
.feed-action.liked { color: #f44336; }
.feed-action:hover { color: #fff; }

/* Reactions */
.comm-rx-bar {
    display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px;
}
.comm-rx-btn {
    display: inline-flex; align-items: center; gap: 3px;
    background: #1a1a1a; border: 1px solid rgba(0,128,128,.2);
    border-radius: 999px; padding: 2px 8px; font-size: 13px; cursor: pointer;
    transition: background .15s, border-color .15s; color: #ccc;
}
.comm-rx-btn.reacted {
    background: rgba(0,128,128,.18); border-color: #008080; color: #4DD0E1;
}
.comm-rx-count { font-size: 11px; font-weight: 700; }

/* Chat */
.chat-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.chat-msg {
    max-width: 80%; padding: 8px 12px;
    border-radius: 14px; font-size: 14px; line-height: 1.4;
    word-break: break-word; position: relative;
}
.chat-msg.them {
    align-self: flex-start;
    background: #1a1a1a; color: #ccc;
    border-bottom-left-radius: 4px;
}
.chat-msg.me {
    align-self: flex-end;
    background: #008080; color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-time {
    font-size: 10px; opacity: .7;
    display: block; margin-top: 2px; text-align: right;
}

/* Q&A */
.qa-item {
    background: var(--card-bg, #141414);
    border: 1px solid var(--sb-border, rgba(0,128,128,.12));
    border-radius: 10px; padding: 12px; margin: 0 14px 10px;
}
.qa-q {
    font-size: 14px; font-weight: 700; color: #fff;
    display: flex; align-items: flex-start; gap: 6px;
}
.qa-q-icon {
    background: #1565C0; color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.qa-a {
    margin-top: 8px; padding: 8px 10px;
    background: rgba(0,128,128,.08);
    border-left: 3px solid #008080;
    border-radius: 6px;
    font-size: 13px; color: #ccc;
    display: flex; align-items: flex-start; gap: 6px;
}
.qa-a-icon {
    background: #008080; color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.qa-meta {
    font-size: 11px; color: var(--sb-muted, #666);
    margin-top: 6px;
}

/* Toolbar / Search */
.comm-toolbox {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sb-border, rgba(0,128,128,.12));
    background: var(--sb-bg, #0d0d0d);
    position: sticky; top: 0; z-index: 3;
}
.comm-search-wrap {
    position: relative; flex: 1;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 10px; padding: 6px 10px;
    background: #141414;
}
.comm-search-input {
    border: 0; outline: 0; flex: 1; min-width: 0;
    background: transparent; color: #ccc; font-size: 13px;
}
.comm-search-input::placeholder { color: #555; }
.comm-search-clear,
.comm-settings-btn,
.comm-mini-action {
    border: 0; background: transparent; color: #888;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
}
.comm-settings-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 10px; background: #141414;
}
.comm-settings-btn:hover { background: #1a1a1a; color: #fff; }
.comm-search-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    background: #141414; border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    box-shadow: 0 10px 24px rgba(0,0,0,.4);
    border-radius: 10px; padding: 6px; z-index: 20;
}
.comm-search-pick {
    width: 100%; border: 0; background: transparent;
    color: #ccc; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px; text-align: left;
    font-size: 13px;
}
.comm-search-pick:hover { background: #1a1a1a; }

/* Mini actions */
.comm-mini-actions {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: auto; flex-shrink: 0;
}
.comm-mini-action {
    width: 26px; height: 26px; border-radius: 8px;
    font-size: 16px; color: #888;
}
.comm-mini-action:hover,
.comm-mini-action.active {
    background: rgba(0,128,128,.16); color: #008080;
}
.comm-mini-action.danger:hover { background: rgba(244,67,54,.12); color: #f44336; }
.chat-msg .comm-mini-actions,
.qa-item > .comm-mini-actions {
    float: right; margin-left: 8px;
}

/* Topics */
.comm-cat-pills {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px 14px 4px;
}
.comm-cat-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    background: #141414; color: #ccc;
    cursor: pointer; transition: all .15s;
}
.comm-cat-pill.active, .comm-cat-pill:hover {
    background: #008080; border-color: #008080; color: #fff;
}
.comm-topic-card {
    border: 1px solid var(--sb-border, rgba(0,128,128,.12));
    border-radius: 10px; margin: 6px 14px 0; padding: 12px;
    cursor: pointer; transition: box-shadow .15s, background .15s, border-color .15s;
    background: var(--card-bg, #141414);
}
.comm-topic-card:hover {
    box-shadow: 0 2px 12px rgba(0,128,128,.1);
    background: #1a1a1a; border-color: rgba(0,128,128,.3);
}
.comm-topic-head { display: flex; align-items: center; gap: 10px; }
.comm-topic-title {
    font-size: 14px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-topic-meta { font-size: 11px; color: var(--sb-muted, #666); margin-top: 2px; }
.comm-topic-replies {
    font-size: 12px; color: #888; flex-shrink: 0;
    display: flex; align-items: center; gap: 2px;
}
.comm-cat-tag {
    background: rgba(0,128,128,.15); color: #4DD0E1;
    border-radius: 999px; padding: 1px 7px;
    font-size: 10px; font-weight: 700;
}
.comm-topic-compose {
    display: flex; gap: 6px; width: 100%;
}
.comm-topic-cat-select {
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 8px; padding: 6px 8px; font-size: 12px;
    background: #141414; color: #ccc;
    flex-shrink: 0; max-width: 130px;
}
.comm-thread-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; flex-wrap: wrap;
}
.comm-back-btn {
    background: none; border: none; color: #008080;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.comm-back-btn:hover { color: #00b3b3; }
.comm-thread-title { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.comm-thread-body { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }
.comm-thread-op, .comm-thread-reply {
    display: flex; gap: 10px; align-items: flex-start;
}

/* Inbox / DM */
.comm-inbox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--sb-border, rgba(0,128,128,.1));
    cursor: pointer; transition: background .15s;
}
.comm-inbox-row:hover { background: #141414; }
.comm-inbox-name { font-size: 14px; font-weight: 600; color: #fff; }
.comm-inbox-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.comm-inbox-time { font-size: 11px; color: #666; flex-shrink: 0; }
.comm-dm-list {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px; max-height: 420px; overflow-y: auto;
}
.comm-dm-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 14px;
    font-size: 13px; line-height: 1.4; word-break: break-word;
    background: #1a1a1a; color: #ccc;
    border-bottom-left-radius: 4px; align-self: flex-start;
}
.comm-dm-bubble.me {
    background: #008080; color: #fff;
    border-bottom-left-radius: 14px; border-bottom-right-radius: 4px;
    align-self: flex-end;
}
.comm-dm-text { font-size: 13px; }
.comm-dm-time { font-size: 10px; opacity: .7; text-align: right; margin-top: 2px; }

/* Consent / Privacy */
.comm-consent-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin: 0 14px 10px;
    background: rgba(0,128,128,.1); border: 1px solid rgba(0,128,128,.2);
    border-radius: 8px; font-size: 12px; color: #4DD0E1;
}
.comm-dnd-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; margin: 0 14px 8px;
    background: rgba(106,27,154,.2); color: #CE93D8;
    border-radius: 8px; font-size: 12px; font-weight: 600;
}
.comm-requests-section {
    margin: 0 14px 10px;
    background: #141414; border-radius: 10px; padding: 10px;
}
.comm-requests-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.comm-request-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; background: #1a1a1a; border-radius: 8px; margin-bottom: 6px;
}
.comm-request-btn {
    padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
    border: none; cursor: pointer;
}
.comm-request-btn.accept { background: #008080; color: #fff; }
.comm-request-btn.decline { background: rgba(244,67,54,.15); color: #f44336; }

/* Privacy / Settings panels */
.comm-privacy-panel-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    z-index: 9600; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.comm-privacy-panel {
    background: #141414; border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 14px; padding: 18px; max-width: 400px; width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.comm-privacy-section { margin-bottom: 16px; }
.comm-privacy-notice {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px; background: rgba(0,128,128,.08);
    border-radius: 8px; font-size: 12px; color: #888; line-height: 1.5;
    margin-bottom: 12px;
}
.comm-privacy-notice strong { color: #fff; }
.comm-dm-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 10px; margin-bottom: 6px; cursor: pointer;
    transition: all .15s; color: #ccc;
}
.comm-dm-opt.selected, .comm-dm-opt:has(input:checked) {
    border-color: #008080; background: rgba(0,128,128,.08);
}
.comm-dm-opt input[type="radio"] { accent-color: #008080; }

.comm-toggle {
    position: relative; display: inline-block; width: 44px; height: 24px;
}
.comm-toggle input { opacity: 0; width: 0; height: 0; }
.comm-toggle-track {
    position: absolute; cursor: pointer; inset: 0;
    background: #444; border-radius: 24px; transition: .3s;
}
.comm-toggle-track::before {
    position: absolute; content: "";
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .3s;
}
.comm-toggle input:checked + .comm-toggle-track { background: #008080; }
.comm-toggle input:checked + .comm-toggle-track::before { transform: translateX(20px); }

/* Send button / footer inputs */
.comm-footer textarea, .comm-footer input {
    flex: 1; padding: 10px 14px;
    border: 1px solid var(--sb-border, rgba(0,128,128,.18));
    border-radius: 999px; font-size: 14px; outline: none;
    resize: none; font-family: inherit;
    background: #141414; color: #ccc;
}
.comm-footer textarea:focus, .comm-footer input:focus { border-color: #008080; }
.comm-footer textarea::placeholder, .comm-footer input::placeholder { color: #555; }
.comm-send {
    width: 42px; height: 42px; border-radius: 50%;
    background: #008080; color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: background .15s;
}
.comm-send:hover { background: #00b3b3; }
.comm-send:disabled { opacity: .4; cursor: not-allowed; }

/* Empty state */
.comm-empty {
    text-align: center; padding: 40px 20px;
    color: var(--sb-muted, #666);
}
.comm-empty svg, .comm-empty .btn-icon { font-size: 48px; color: #333; }
.comm-empty p { margin: 10px 0 0; font-size: 14px; }

/* Signin note */
.comm-signin-note {
    text-align: center; color: #888; font-size: 13px;
    padding: 10px 0; width: 100%;
}

/* Spin */
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Comm avatar (generic) */
.comm-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}