/* Minimalist, Clean Monochrome Styles for WedTravel */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,400&display=swap');

:root {
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: 'Newsreader', Georgia, serif;
}

body {
    font-family: var(--font-sans);
    background-color: #ffffff;
    color: #1c1917; /* stone-900 */
    -webkit-font-smoothing: antialiased;
}

.font-serif {
    font-family: var(--font-serif);
}

/* Modern Card Styles with Subtle Depth & Warm Background */
.app-bg {
    background-color: #f6f4ef;
}

.catalog-item-card {
    background-color: #ffffff;
    border: 1px solid #e8e5df;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 18px -3px rgba(0, 0, 0, 0.03);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}
.catalog-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.05), 0 16px 30px -4px rgba(0, 0, 0, 0.07);
    border-color: #d6d1c7;
}

/* Category Accent Borders (Thicker 5px solid indicators) */
.cat-accent-1 { border-left: 5px solid #f59e0b !important; } /* Amber / Action */
.cat-accent-2 { border-left: 5px solid #059669 !important; } /* Pine / Wandern */
.cat-accent-3 { border-left: 5px solid #0284c7 !important; } /* Sky / Kultur */
.cat-accent-4 { border-left: 5px solid #e11d48 !important; } /* Rose / Kulinarik */
.cat-accent-5 { border-left: 5px solid #0d9488 !important; } /* Teal / Schlechtwetter */

.cat-header-1 { border-bottom: 2px solid #f59e0b !important; }
.cat-header-2 { border-bottom: 2px solid #059669 !important; }
.cat-header-3 { border-bottom: 2px solid #0284c7 !important; }
.cat-header-4 { border-bottom: 2px solid #e11d48 !important; }
.cat-header-5 { border-bottom: 2px solid #0d9488 !important; }

/* Voting Buttons – Neutral base, color only on hover/active */
.vote-btn {
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    /* Neutral idle state – no color tint */
    background-color: #fafaf9;
    border: 1px solid #e7e5e4;
    color: #44403c;
    min-height: 44px; /* Touch-target */
}
.vote-btn:hover {
    transform: translateY(-1px);
    background-color: #f5f5f4;
    border-color: #a8a29e;
}
.vote-btn:active {
    transform: translateY(0px) scale(0.97);
}

/* Score 5: hover hint Amber, active vivid Gold */
.vote-btn[data-score="5"]:hover {
    background-color: #fef9e7;
    border-color: #d97706;
    color: #92400e;
}
.vote-btn[data-score="5"].active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #b45309;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

/* Score 4: hover hint Emerald, active vivid Green */
.vote-btn[data-score="4"]:hover {
    background-color: #f0fdf4;
    border-color: #059669;
    color: #065f46;
}
.vote-btn[data-score="4"].active {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: #065f46;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
}

/* Score 3: hover hint Slate, active dark Slate */
.vote-btn[data-score="3"]:hover {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #334155;
}
.vote-btn[data-score="3"].active {
    background: #334155;
    border-color: #1e293b;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.25);
}

/* Score 2 & 1: hover hint Stone, active Stone */
.vote-btn[data-score="2"]:hover,
.vote-btn[data-score="1"]:hover {
    background-color: #f0efed;
    border-color: #a8a29e;
    color: #44403c;
}
.vote-btn[data-score="2"].active {
    background: #57534e;
    border-color: #44403c;
    color: #ffffff !important;
}
.vote-btn[data-score="1"].active {
    background: #78716c;
    border-color: #57534e;
    color: #ffffff !important;
}

/* Score 0 – Veto: subtle rose hint idle, vivid active */
.vote-btn[data-score="0"], .vote-btn.veto-btn {
    color: #9f1239;
}
.vote-btn[data-score="0"]:hover, .vote-btn.veto-btn:hover {
    background-color: #fff1f2;
    border-color: #fb7185;
    color: #be123c;
}
.vote-btn[data-score="0"].active, .vote-btn.veto-btn.active {
    background: linear-gradient(135deg, #e11d48, #be123c);
    border-color: #9f1239;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
}

/* ============================================================
   MOBILE SIDEBAR DRAWER
   ============================================================ */

/* Mobile top bar (shown only below md breakpoint) */
.mobile-top-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    height: 52px;
    background: #ffffff;
    border-bottom: 1px solid #e8e5df;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

@media (max-width: 767px) {
    .mobile-top-bar {
        display: flex;
    }
    /* Push app layout down to make room for top bar */
    #app-layout {
        padding-top: 52px;
    }
    /* Sidebar becomes a fixed drawer on mobile */
    #sidebar {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: calc(100vh - 52px) !important;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    #sidebar.drawer-open {
        transform: translateX(0);
    }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.35);
    z-index: 35;
    backdrop-filter: blur(1px);
}
.sidebar-overlay.active {
    display: block;
}

/* Scrollbar Minimalist */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e7e5e4;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a29e;
}

/* Leaflet Map Custom Marker Styles */
.hotel-map-marker-wrapper,
.activity-map-marker-wrapper {
    background: transparent !important;
    border: none !important;
}

.hotel-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #1c1917;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 7px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.hotel-map-marker:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    z-index: 1000 !important;
}

.activity-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: #1c1917;
    border: 1.5px solid #1c1917;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.activity-map-marker:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    z-index: 1000 !important;
}

.activity-map-marker-rating {
    background: #1c1917;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 9999px;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.activity-map-marker-title {
    font-size: 11px;
    font-weight: 700;
    color: #1c1917;
}

.activity-map-marker.done {
    background: #f5f5f4;
    color: #78716c;
    border-color: #a8a29e;
}

.activity-map-marker.done .activity-map-marker-rating {
    background: #78716c;
}

.activity-map-marker.done .activity-map-marker-title {
    text-decoration: line-through;
    color: #78716c;
}

/* Minimalist Leaflet Popup */
.leaflet-popup-content-wrapper {
    background: #ffffff;
    color: #1c1917;
    border-radius: 12px;
    border: 1px solid #e7e5e4;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    padding: 0;
    font-family: inherit;
}
.leaflet-popup-content {
    margin: 12px 14px;
    line-height: 1.4;
}
.leaflet-popup-tip {
    background: #ffffff;
}