:root {
    --primary-color: #A8BFA8; /* Swapped from #3D405B */
    --primary-rgb: 168, 191, 168; /* RGB for #A8BFA8 */
    --secondary-color: #3D405B; /* Swapped from #A8BFA8 */
    --bg-color: #F6F7F4;
    --section-color: #E0E6E1;
    --accent-color: #e0e6e1;
    --accent-hover: #E76F51;
    --text-main: #2C2C2C;
    --text-muted: #666666;
    --text-light: #888888;
    --star-color: #FFB800;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --white: #ffffff;
    --card-radius: 24px;
    --btn-radius: 12px;
    --input-radius: 12px;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.15);
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --header-height: 60px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* RESET & BODY SETUP */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* height: 100%; REMOVED to prevent scroll locking */
    /* overflow-x: hidden; REMOVED from HTML to prevent scroll issues */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh !important; 
    min-height: 100dvh !important; 
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    background-color: var(--bg-color);
    
    /* FLEXBOX STICKY FOOTER - Robust Method */
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden; /* Handle horizontal overflow here */
    /* overflow-y: auto; REMOVED to let viewport handle scrolling naturally */
}

/* GLOBAL ENFORCEMENT of Black Text and Inter Font */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, button, input, select, textarea, label {
    font-family: 'Inter', sans-serif !important;
    color: #000000; /* Removed !important to allow overrides */
}

/* EXCEPTION: Korenine Page Overrides */
.korenine-page h1, .korenine-page h2, .korenine-page h3, 
.korenine-page .header-meta span, .korenine-page .divider-text,
.korenine-page .newspaper-title a {
    color: #ffffff !important;
}

/* Korenine Card Specific Overrides - FORCE BLACK TEXT */
.story-card.korenine-card .story-title,
.story-card.korenine-card .subheadline,
.story-card.korenine-card .story-text,
.story-card.korenine-card .date,
.story-card.korenine-card .author {
    color: #000000 !important;
}

/* NUCLEAR OPTION: Force ALL text inside Korenine cards to be black */
.korenine-page .story-card,
.korenine-page .story-card * {
    color: #000000 !important;
}

/* Re-apply lighter text for specific metadata if needed, but keep main text black */
.korenine-page .story-card .story-subtitle {
    color: #666 !important;
}
.korenine-page .story-card .read-more-btn i {
    color: inherit !important;
}

/* EXCEPTION: Footer Text (Must remain light) - REMOVED per user request for all-black text */
.site-footer, .site-footer p, .site-footer a, .site-footer span, .site-footer div, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
    color: #000000 !important;
}
.site-footer a:hover {
    color: #333333 !important;
}

/* EXCEPTION: Status Badges (Keep their specific text colors) */
.badge-item.open { color: #1e7e34 !important; }
.badge-item.closed { color: #c62828 !important; }
.badge-item.rating { color: #333333 !important; } /* Dark grey for rating on gold */

/* EXCEPTION: Icons inside badges (Keep primary color or specific) */
.badge-item i, .badge-uniform i {
    color: inherit !important;
}

h1 { font-size: 2.5rem; line-height: 1.1; margin-bottom: 50px; }
.hero-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    white-space: nowrap;
    text-align: center;
}
h2 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-color); }
h3 { font-size: 1.3rem; margin-bottom: 10px; }

a { color: var(--primary-color); text-decoration: none; transition: 0.2s; }
a:hover { opacity: 0.8; }

p { margin-bottom: 15px; }

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 60px 20px; /* Removed header-height calc since sticky */
    width: 100%;
    flex: 1 0 auto; /* Grow to fill space */
    position: relative;
    z-index: 1;
    display: block; 
}

#results, #results-display {
    width: 100%;
    display: block; /* Ensure it takes space */
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/assets/img/food-prijatelji.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(0.3);
    opacity: 1;
    z-index: -1;
    pointer-events: none;
}

/* Mobile-specific background image */
@media (max-width: 768px) {
    .bg-overlay {
        background-image: url('/assets/img/food-mobile.jpg') !important;
        background-position: center center !important;
    }
}

header.sticky-header, .site-header {
    position: sticky; /* Changed from fixed to sticky for safety */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #e8ecea !important;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    height: 60px !important;
    max-height: 60px !important;
    overflow: visible;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-content, .header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Optimized Header Navigation */
.nav-left, .nav-right, .header-actions { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    min-width: 0; 
}
.nav-right, .header-actions { justify-content: flex-end; }

.nav-center {
    flex: 2; /* Give logo more space */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    max-width: 100%;
}

/* Responsive Logo Styles */
.main-logo, .site-logo {
    height: auto !important; /* Allow height to adjust for aspect ratio */
    max-height: 28px !important; /* Cap the height */
    width: auto !important; /* Use intrinsic width */
    max-width: 100% !important; /* Prevent overflowing container */
    object-fit: contain;
    display: block;
}

/* User Profile Icon Styles (Moved from header.php) */
.user-icon-link {
    font-size: 1.5rem;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: color 0.2s;
}
.user-icon-link:hover {
    color: #2C2F45;
}

/* Mobile Resizing Fixes */
@media (max-width: 768px) {
    .main-logo, .site-logo {
        height: 32px !important; /* Smaller on mobile */
    }
    .nav-left, .nav-right {
        flex: 0 0 50px; /* Fixed width for icons on small screens */
    }
}

.header-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

.header-link:hover {
    opacity: 1 !important;
    color: #333 !important;
}

.location-btn {
    background: #f1f1f1;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #555;
    transition: all 0.3s ease;
    margin-right: 10px;
}

/* .location-btn:hover removed per user request */
.location-btn:hover { background: #f1f1f1; }

.location-btn.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.location-btn.active i { color: #2e7d32; }

.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
    z-index: 1001;
}

.bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: 0.3s;
}

.nav-auth-link {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid transparent;
}

/* .nav-auth-link:hover removed per user request */
.nav-auth-link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-main);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.menu-overlay.active { opacity: 1; visibility: visible; }

.dropdown-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--white);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--section-color);
}

.dropdown-menu.active { transform: translateX(0); }

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--section-color);
    background-color: #fcfcfc;
}

.menu-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    color: #000000;
    text-transform: uppercase;
}

.menu-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-main);
    padding: 0 5px;
}

/* .menu-close-btn:hover removed per user request */
.menu-close-btn:hover { color: var(--text-main); }

.dropdown-links {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    overflow-y: auto;
}

.dropdown-links a {
    padding: 16px 25px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    color: var(--text-main);
    display: block;
    transition: 0.2s;
    text-transform: uppercase !important;
}

/* .dropdown-links a:hover removed per user request */
.dropdown-links a:hover {
    background-color: transparent;
    color: var(--text-main);
    padding-left: 25px;
}

.dropdown-links .divider {
    height: 1px;
    background: var(--section-color);
    margin: 10px 20px;
}

.search-container { 
    margin-bottom: 30px; 
    position: relative; 
    width: 90%; /* Leaves breathing room on mobile */
    max-width: 600px; /* Perfect medium size for desktop (between 450px and 850px) */
    margin-left: auto; 
    margin-right: auto; 
}

#search-input {
    width: 100%;
    padding: 20px 20px; /* Increased vertical padding to make it fatter */
    font-size: 18px;    /* Restored original large font size */
    border-radius: 20px; /* Softer, larger rounding for the fatter input */
    border: 3px solid #f6f7f6;
    background-color: #f6f7f6;
    outline: none;
    transition: none; /* Removed transition for static feel */
    font-family: var(--font-main);
}

#search-input.has-text, #search-input:focus {
    border-width: 3px; /* Keep same border width */
    border-color: #f6f7f6; /* Keep same border color */
    background-color: #f6f7f6; /* Keep same background */
    box-shadow: none; /* Remove shadow effect */
}

#search-loader {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    display: none;
}

.filter-container {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
}

.filter-label { font-size: 13px; font-weight: 600; color: var(--primary-color); }

.filter-container {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Refined Search Filters */
.filter-bracket-refined {
    border: none;
    box-shadow: none;
    padding: 0 15px; /* Added strict side padding to prevent touching edges */
    gap: 8px; /* Slightly reduced gap to fit more on narrow screens */
    display: flex;
    flex-wrap: nowrap; /* Force 3 items to stay on one row */
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 5;
    touch-action: pan-y !important;
    width: 100%; /* Take full width, constrained by padding */
    box-sizing: border-box; /* Ensure padding is calculated inward */
    margin-left: auto;
    margin-right: auto;
}

.filter-bracket-refined * {
    touch-action: pan-y !important; /* Propagate scroll permission */
}

.filter-btn-refined, .filter-input-refined, #radius-select {
    touch-action: manipulation !important; /* Better for clickable/selectable items */
}

.filter-btn-refined, .filter-input-refined {
    border-radius: 12px;
    border: 1px solid #ddd;
    height: 40px;
    padding: 0 10px; /* Adjust padding to balance 3 items */
    background-color: white;
    color: black;
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* Slightly smaller font to ensure fit */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Center content for button */
    gap: 6px;
    outline: none; /* Remove focus outline */
    flex: 1 1 auto; /* Allow buttons to scale evenly to fill space */
    white-space: nowrap; /* Prevent text wrapping inside buttons */
}

/* Override for distance select specifically */
select#radius-select.filter-input-refined {
    padding: 0 5px !important;
    width: auto !important;
}

/* Active State - Only change colors, keep layout locked */
.filter-btn-refined.active, .filter-input-refined.active, 
#radius-select.active {
    background-color: #a8bfa8 !important;
    color: #000000 !important;
    border-color: #98af98 !important;
}

.filter-btn-refined:hover, .filter-input-refined:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

/* Ensure Selects match Buttons exactly */
#radius-select {
    border-radius: 12px !important;
    height: 40px !important;
    font-size: 13px !important;
    border: 1px solid #ddd;
    background-color: white;
    color: black;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Desktop overrides for search filters */
@media (min-width: 768px) {
    .filter-btn-refined, .filter-input-refined {
        flex: 0 0 auto; /* Stop stretching on large screens */
        padding: 0 20px; /* Use fixed, comfortable padding instead */
        font-size: 14px; /* Slightly larger text on desktop */
    }
    
    /* Ensure the select dropdown also respects the normal width */
    select#radius-select.filter-input-refined {
        padding: 0 15px !important; 
    }
}

.btn-filter-style:hover {
    border-color: var(--primary-color);
    background: #f9f9f9;
}

.btn-filter-style.active {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-color: #2e7d32;
}

.btn-filter-style.active i {
    color: #2e7d32;
}

#radius-select:disabled { opacity: 0.5; cursor: not-allowed; }

.search-row {
    display: flex;
    align-items: center;
    background: #f6f7f6; /* Updated to #f6f7f6 */
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 16px;
    border: 1px solid transparent; /* Hidden border by default */
    transition: transform 0.2s ease, background 0.2s ease;
    gap: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.search-row:hover { 
    transform: translateX(5px); 
    background: #ffffff !important; /* Brighter (White) on hover */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle lift */
    opacity: 1 !important;
}
.search-row.is-closed { opacity: 0.7; }

.row-name { 
    flex: 2; 
    font-weight: 800; 
    font-family: var(--font-main); 
    font-size: 16px; 
    text-transform: uppercase; 
    display: block; 
    word-wrap: break-word; 
}
.row-status { flex: 0 0 80px; text-align: center; }
.row-icons { flex: 1; display: flex; gap: 8px; justify-content: center; align-items: center; }
.food-mini-icon { width: 22px; height: 22px; object-fit: contain; position: relative; }

/* STRICT SVG CONSTRAINTS FOR SEARCH RESULTS */
.food-mini-icon svg, 
.food-mini-icon-wrapper svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 22px !important;
    max-height: 22px !important;
    position: static !important; /* Prevent internal positioning from breaking layout */
    display: block !important;
}
.row-location { flex: 1; font-size: 13px; color: var(--text-muted); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.row-rating { flex: 0 0 90px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-weight: 800; font-size: 13px; }

.restaurant-card {
    padding: 20px;
    border-radius: var(--card-radius);
    background-color: #ffffff; /* Updated to #ffffff */
    border: 1px solid var(--section-color);
    height: 525px !important; /* Reverted to original */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Lock content inside */
    position: relative;
    box-shadow: var(--shadow-sm);
}

.restaurant-card-dynamic {
    /* Removed aggressive overrides */
}

.card-header-uniform {
    padding: 15px 15px 0 15px; 
    border-bottom: none; 
    background: #ffffff !important; 
    border-radius: 24px 24px 0 0; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    gap: 0; /* Removed gap, handled by margins */
    text-align: center;
    margin: -20px -20px 0 -20px; 
    width: calc(100% + 40px); 
    min-height: 110px;
    height: auto;
    overflow: hidden;
}

.card-header-uniform h3 {
    margin: 0;
    font-size: 1.25rem; 
    line-height: 1.2;
    color: #0f1712; 
    font-family: 'Inter', sans-serif; 
    text-transform: uppercase !important; /* Enforce uppercase for Gostilna */
    word-wrap: break-word;
    max-width: 100%;
    border-bottom: none; /* Remove underline from H3 */
    padding-bottom: 0; 
    margin-bottom: 0; 
    width: 100%;
    background: transparent;
    text-align: center;
    height: auto !important; 
    min-height: 34px; 
}

.header-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px; 
    border-bottom: 1px solid #0f1712; /* Thinner line (1px) */
    padding-bottom: 6px; /* Space between badges and line */
    width: 100%;
    margin-top: 4px; /* Revert to 4px */
}

.badge-item {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: lowercase; /* Changed from uppercase to lowercase */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    background-color: transparent; /* Default to transparent for text badges */
}

/* Ensure SVGs in badges don't explode layout due to internal width/height attrs */
.badge-item svg,
.badge-item.feature svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* UPDATED: Feature Badges to match Refined Search Tags (Clean White Look) */
.badge-item.feature {
    background-color: #ffffff !important; /* Explicit White */
    color: var(--text-main) !important;
    border: 1px solid var(--section-color) !important; /* Matches refined tags */
    font-size: 12px !important; /* Slightly larger than 11px */
    font-weight: 600 !important; /* Cleaner weight */
    padding: 0 12px !important; /* Horizontal padding */
    height: 30px !important; /* Increased height */
    border-radius: 10px !important; /* Softer radius */
    text-transform: lowercase !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* Subtle lift */
}



/* Remove old top-location-badge styles if they exist */
.top-location-badge { display: none; }

/* SETTING 4: Location Badges (City, Distance) - #eeeeee */
.zacimba-badge.city {
    background-color: #eeeeee !important;
    color: #000000 !important; /* Explicit Black */
    border: 1px solid #dcdcdc !important;
    text-transform: none !important; /* Allow Capitalized City Names from DB */
}

.badge-item.open { 
    background-color: #e6f4ea !important; /* Subtle Green */
    color: #1e7e34 !important; /* Dark Green Text */
    border: 1px solid #c3e6cb !important;
}

.ideja-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0px 10px 20px 10px !important; /* Force 0 top padding to eliminate white gap */
}
.ideja-hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    background-color: #111;
    display: flex;
    flex-direction: column;
}
.ideja-hero-bg {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.ideja-hero-content {
    position: relative;
    margin-top: -120px;
    padding: 70px 20px 30px 20px;
    background: linear-gradient(to bottom, transparent 0%, rgba(17,17,17,0.8) 70px, #111 120px, #111 100%);
    text-align: center;
    z-index: 2;
}
.ideja-title {
    font-size: 2.2rem;
    color: #fff;
    margin: 0;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.4);
    line-height: 1.3;
}
.ideja-seo-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #f8f9fa;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

@media (max-width: 768px) {
    .ideja-hero-bg {
        height: 300px;
    }
    .ideja-title {
        font-size: 1.8rem;
    }
    .ideja-hero-content {
        margin-top: -100px;
        padding: 60px 15px 30px 15px;
        background: linear-gradient(to bottom, transparent 0%, rgba(17,17,17,0.8) 60px, #111 100px, #111 100%);
    }
}

.listicle-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}
.listicle-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #fdfbfb;
}
.listicle-h2 {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    color: #333;
}
.listicle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}
.listicle-info {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.listicle-info i { color: #888; margin-right: 5px; }

.listicle-gallery {
    width: 100%;
    position: relative;
    background: #f0f0f0;
}
.listicle-swiper {
    width: 100%;
    height: 350px;
}
.listicle-swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.listicle-text {
    padding: 20px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
}
.listicle-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: center;
    background: #fafafa;
}
.btn-cta {
    display: inline-block;
    background: #ffc107;
    color: #000;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-cta:hover { background: #e0a800; }

.share-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 30px 0;
    border-top: 2px solid #eee;
    margin-top: 40px;
}
.share-btn {
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}
.share-btn:hover { background: #e2e6ea; }
.badge-item.closed { 
    background-color: #fdecea !important; /* Subtle Red */
    color: #c62828 !important; /* Dark Red Text */
    border: 1px solid #f5c6cb !important;
}

/* Rating Badge - Modern Gold Style */
.badge-item.rating {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important; /* Gold Gradient */
    color: #333 !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3); /* Soft Gold Glow */
    font-weight: 800;
}
.badge-item.rating i { color: #000 !important; } /* Black star for contrast */

.card-body { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; /* Enable scroll depth */
    padding-right: 5px; 
    height: 0; /* Flex trick to force scrolling */
    padding-top: 0 !important; /* Force tight top padding */
}
.card-body::-webkit-scrollbar { width: 4px; }
.card-body::-webkit-scrollbar-thumb { background: var(--section-color); border-radius: 10px; }

/* LOCKED OVERVIEW CARD LAYOUT - Switched to Flex for dynamic content */
.card-body-overview {
    display: flex !important;
    flex-direction: column;
    gap: 15px; /* Consistent spacing between Dishes and Gallery */
    overflow-y: auto !important; /* Allow scrolling if content overflows */
    padding-top: 10px !important; 
    margin-top: 0 !important; /* Reset negative margin */
}

/* Ensure children fit the flex layout */
.card-body-overview .badges-grid { 
    overflow: visible;
    margin: 0 !important; /* Remove fixed margins */
    flex-shrink: 0; /* Don't shrink dishes */
    width: 100%;
}

/* AI Gallery Container (Specific to Overview) */
.card-body-overview .ai-gallery-container {
    flex-shrink: 0;
    width: 100%;
    margin-top: auto; /* Push to bottom if space permits */
}

/* Legacy overrides clean up */
.card-body-overview .description-badge {
    display: none; /* Hide description in overview if it exists */
}

.card-body-overview .dishes-grid-2lines { 
    overflow: visible;
    margin: 0 !important;
    width: 100%;
}

/* End Locked Layout */



.badge-container { display: flex; gap: 8px; justify-content: center; align-items: center; border-top: 1px solid var(--section-color); padding: 12px 0; flex-wrap: wrap; flex-shrink: 0; }

.badge {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 26px;
}



/* Grids - Force row layout */
.badges-grid, .dishes-grid-2lines {
    display: flex !important;
    flex-direction: row !important; /* Force row direction */
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Contact Grid Unified - Layout Control */
.contact-grid-unified {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns meeting in the center */
    gap: 8px 24px; /* 8px vertical, 24px horizontal gap */
    width: 100%;
    padding: 20px 0; /* Padding before and after the whole grid */
}

/* Left Column: Align to the right (towards center spine) */
.contact-grid-unified > :nth-child(odd) {
    justify-self: end;
}

/* Right Column: Align to the left (towards center spine) */
.contact-grid-unified > :nth-child(even) {
    justify-self: start;
}

/* Center the last item if it is the only one in the row (odd count) */
.contact-grid-unified > :last-child:nth-child(odd) {
    grid-column: span 2;
    justify-self: center; /* Override 'end' alignment */
}

/* Ensure badges inside the grid hug content (revert 100% width) */
.contact-grid-unified .badge-cat-2 {
    width: fit-content;
    display: flex; /* Ensure icon and text align properly */
    align-items: center;
}

/* Map Preview (Rounded) */
.map-preview-box {
    width: 100%;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid var(--section-color);
    position: relative;
}
.map-preview-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none; /* Disable map interaction to allow swiping */
}

/* Sections */
.card-section {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.card-section:last-child { border-bottom: none; }
.section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: block;
    text-align: center;
    letter-spacing: 1px;
}

/* Badge Address - Centered & Flexible */
div.badge-cat-2.badge-address {
    display: flex !important; /* Override inline-flex from badge-cat-2 */
    width: fit-content !important;
    max-width: 90% !important; /* Prevent touching edges */
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: normal !important; /* Allow text wrapping */
    height: auto !important; /* Allow growth */
    padding: 8px 12px !important; /* More breathing room */
    line-height: 1.4 !important; /* Better readability for multi-line */
}

/* 
   BADGE CAT 3 - Status & Action Badges 
   (Status, Rating, Time Remaining, Review Button)
*/
.badge-cat-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px !important; /* Force 13px */
    font-weight: 600 !important;
    text-transform: uppercase !important; /* Force Uppercase */
    border: none;
    cursor: default;
    gap: 5px;
    line-height: 1;
}

/* Modifiers for Cat 3 */
.badge-cat-3.rating {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important; /* Gold Gradient */
    color: #333 !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3); /* Soft Gold Glow */
    font-weight: 800;
}

/* Like Button Custom Style (Matches badge-cat-3 shape) */
.like-gostilna-btn {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important; /* Override border:none */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.like-gostilna-btn:hover {
    background-color: #f9f9f9 !important;
    transform: translateY(-1px);
}
.like-gostilna-btn.liked {
    background-color: #ffebee !important; /* Light Red bg */
    border-color: #ef9a9a !important;
    color: #c62828 !important;
}
.like-gostilna-btn.liked i {
    color: #d32f2f !important;
}

.badge-cat-3.large {
    height: 44px;
    padding: 0 30px;
    font-size: 15px !important;
    border-radius: 22px;
    transition: transform 0.1s, box-shadow 0.1s;
}

button.badge-cat-3:active {
    transform: translateY(2px);
}

button.badge-cat-3:disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.badge-cat-3.open {
    background-color: #e6f4ea; /* Light Green */
    color: #1e7e34 !important; /* Dark Green - Forced */
}

.badge-cat-3.closed {
    background-color: #fce8e6; /* Light Red */
    color: #c53030 !important; /* Dark Red - Forced */
}

/* Specific overrides for Buttons */
button.badge-cat-3 {
    cursor: pointer;
}

/* Gallery Adjustment */
.card-gallery-large {
    width: 100%;
    flex-grow: 1;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 5px;
    min-height: 200px;
}

.wrapper { position: relative; width: 100%; box-sizing: border-box; }
@media (min-width: 600px) { .wrapper { max-width: 580px; margin: 0 auto; } }

.swiper-button-next, .swiper-button-prev { color: var(--primary-color) !important; width: 30px !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 20px !important; font-weight: bold; }
.main-scrollbar { background: rgba(var(--primary-rgb), 0.15) !important; height: 4px !important; bottom: 10px !important; left: 20px !important; width: calc(100% - 40px) !important; border-radius: 10px; }
.swiper-scrollbar-drag { background: var(--primary-color) !important; border-radius: 10px; }

.hours-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 10px 12px; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 13px; 
    color: var(--text-main); 
    align-items: center;
}
.hours-row.today { 
    font-weight: 800; 
    background: rgba(var(--primary-rgb), 0.08); 
    border-radius: 8px; 
    color: #000000 !important; 
    border-bottom: none; 
}

.input-field {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--section-color);
    border-radius: var(--input-radius);
    margin-bottom: 15px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--text-main);
    background: var(--white);
    outline: none;
}
.input-field:focus { border-color: var(--primary-color); }
.textarea-field { height: 100px; resize: none; margin-bottom: 5px; }

.btn-primary, .btn-review {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 20px;
    border-radius: var(--btn-radius);
    font-weight: 700;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 15px;
    transition: 0.2s;
    text-align: center;
    display: inline-block;
}
.btn-primary:hover, .btn-review:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 25px;
    border-radius: var(--btn-radius);
    font-weight: 700;
    background: transparent;
    cursor: pointer;
}
.btn-outline:hover { background: var(--primary-color); color: var(--white); }

.comment-item { padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.comment-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.comment-name { font-weight: 800; font-size: 13px; color: var(--primary-color); }
.comment-stars { color: var(--star-color); font-size: 12px; }
.comment-date { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.comment-text { font-size: 13px; font-style: italic; color: #444; }

.rating-input { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-direction: row-reverse; }
.rating-input label { font-size: 28px; color: #ddd; cursor: pointer; transition: 0.2s; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { 
    color: #FFB800 !important; /* Force Gold */
    text-shadow: 0 0 2px rgba(255, 184, 0, 0.4);
}
.rating-input input { display: none; }

/* Zgodbe & Ideje Hero Elements */
.hero-title {
    text-align: center;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-main);
}
.hero-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.5;
    font-family: var(--font-main);
}

.zgodbe-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 30px; 
    justify-content: center; /* Center the grid itself */
    margin: 0 auto; /* Ensure grid is centered in container */
    max-width: 1200px; /* Optional: Constrain max width for large screens */
}

@media (max-width: 768px) {
    .zgodbe-grid {
        display: flex; /* Switch to flex on mobile for better centering control */
        flex-direction: column;
        align-items: center; /* Center items horizontally */
    }
    
    .story-card {
        max-width: 400px; /* Ensure cards don't get too wide */
        width: 100%;
        margin: 0 auto; /* Center the card */
    }
}

/* STORY CARD - Expandable Design */
.story-card {
    background-color: #ffffff;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--section-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0; /* Grid handles gap */
    transition: transform 0.2s, box-shadow 0.2s;
    /* No fixed height - grows with content */
}

.story-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.story-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 24px 24px 0 0; /* Matches card radius */
    display: block;
}

/* Override for single page image if needed */
.article-container-single .story-img {
    margin-bottom: 0 !important; /* Ensure no extra margin */
}

.story-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.story-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.story-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f1712;
    text-transform: none !important; /* Force NO transform */
    line-height: 1.2;
    margin: 0;
}

.story-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.story-text-container {
    position: relative;
    max-height: 80px; /* Limits to approx 3-4 lines */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.story-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    text-align: inherit; /* Allow inner HTML alignment (e.g. text-align: center) to work */
}

/* Ensure inner paragraphs inside story-text behave correctly */
.story-text p, .story-text div {
    margin-bottom: 0; /* Remove extra margins that might break card layout */
}

/* Story Card - Expanded/Detail View Typography Overrides */
.story-card.expanded .story-title,
.korenine-page .story-card.expanded .story-title {
    font-size: 1.1rem !important; /* Smaller than preview (1.25rem) */
}

.story-card.expanded .story-subtitle,
.korenine-page .story-card.expanded .story-subtitle {
    font-size: 11px !important; /* Smaller than preview (13px) */
}

.story-card.expanded .story-text,
.korenine-page .story-card.expanded .story-text {
    font-size: 14px !important; /* Smaller than preview (15px) */
}

/* Expanded Card Spacing Reductions */
.story-card.expanded .story-body {
    padding: 15px !important; /* Reduced from 20px */
    gap: 10px !important; /* Reduced from 15px */
}

.story-card.expanded .story-interactions {
    margin-top: 5px !important; /* Reduced from 10px (Space Last Sentence to Line) */
    padding-top: 15px !important; /* Reduced from 20px */
}

.story-text-container.expanded {
    max-height: 2000px; /* Large enough to fit 800 chars */
}

.story-text-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.3s;
}

.story-text-container.expanded::after {
    opacity: 0;
}

.story-footer {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.read-more-btn {
    /* Layout & Sizing Only */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
}

.read-more-btn:hover {
    background: #f9f9f9;
}

.roots-title {
    font-family: var(--font-serif, 'Georgia'), serif;
    color: #2C2C2C;
}

.roots-meta {
    font-family: var(--font-serif, 'Georgia'), serif;
    font-style: italic;
    color: #8B5E3C;
}

.roots-card {
    background: #FDFCF8;
    border: 1px solid #EAE7DC;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roots-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.roots-card img {
    /* filter: grayscale(100%) sepia(20%); */ /* Removed filter */
    transition: filter 0.5s ease;
}

.roots-card:hover img {
    /* filter: grayscale(0%) sepia(0%); */ /* Removed filter */
}

.roots-card-link { display: block; height: 100%; }

/* Začimbe (Oneliners) Styles */
.zacimbe-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zacimba-box {
    background-color: #a8bfa8;
    border: 1px solid #98af98;
    border-radius: 16px; /* Matched to .search-row radius */
    padding: 20px 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    font-style: italic;
}

.zacimba-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #d1d9d2;
}

.zacimba-content {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
}

.zacimba-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.zacimba-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f6f7f6;
    border-radius: 50%;
    border: 1px solid #eee;
    transition: 0.2s;
}
.zacimba-tag:hover { background-color: #e8ecea; }

.zacimba-tag span { display: none; } /* Hide text for icons */

.zacimba-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.zacimba-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: lowercase; /* Changed from uppercase to lowercase */
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}



.zacimba-badge.feature {
    background-color: #ffffff !important; /* White */
    color: var(--text-main) !important;
    border: 1px solid var(--section-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    height: 30px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* Subtle lift */
}

@media (max-width: 600px) {
    .zacimba-box {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 24px; /* Less pill-like on mobile */
        padding: 20px;
    }
    .zacimba-tags {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }
}


.w-fit-center {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
}

.bg-sage { background-color: #cae0ca !important; color: #000000 !important; }
.bg-sage-hover:hover { background-color: #b8d4b8 !important; }

.bg-grey-light { background-color: #e0e6e1 !important; }

.bg-dark-green { background-color: #354f52 !important; }

.text-dark-header { color: #0f1712 !important; }

/* Hero Headline */
html body h1.hero-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800;
    color: #ffffff !important;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    /* Responsive Font Size */
    font-size: clamp(2rem, 5vw, 3.5rem); 
    line-height: 1.1;
    padding: 0 10px; /* Prevent touching edges on small screens */
}

/* Specific override for profile page to keep it black but match font/weight */
.profile-header-container h1.hero-title {
    /* Revert to default hero-title styles (white with shadow) */
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    font-size: clamp(1.5rem, 4vw, 2rem) !important; /* Cap size for profile to make it smaller */
}

.hero-subtitle {
    text-align: center;
    color: #ffffff !important;
    font-size: 1.2rem;
    margin-top: -10px;
    margin-bottom: 40px;
    font-weight: 500;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
    padding: 0 20px;
}
/* Reset Margins/Padding Helpers */
.no-margin-top { margin-top: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.w-100 { width: 100% !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.p-10 { padding: 10px !important; }
.no-border-bottom { border-bottom: none !important; }

/* Description Badge Style */
.description-badge {
    background-color: transparent;
    border-radius: 0; /* Rectangular shape */
    padding: 0;
    margin-bottom: 20px;
}

.address-badge-spacing {
    margin-bottom: 20px !important; /* Adjusted to 20px */
}

.timetable-badge-spacing {
    margin-bottom: 25px !important; /* 15px + 10px extra */
}

/* Rating Form Container - Default Hidden */
#rating-form-container {
    display: none;
    margin-bottom: 20px;
}

/* Review Title Container */
.review-action-area-center {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
}




/* Zgodbe Navigation */
.zgodbe-nav-container {
    max-width: 1100px;
    margin: 0 auto 30px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zgodbe-search {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.search-form {
    display: flex;
    gap: 10px;
}

.search-input-zgodbe {
    flex: 1;
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid var(--section-color);
    background: #fff;
    font-family: var(--font-main);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.search-input-zgodbe:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.search-btn-zgodbe {
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.search-btn-zgodbe:hover {
    background: #2a2d40;
    transform: scale(1.05);
}

/* UPDATED: Zgodbe Tags Scroll - Vertical Frame Layout (Restored) */
.zgodbe-tags-scroll {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Allows wrapping */
    justify-content: center; /* Centers tags */
    padding: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    max-height: 130px; /* Match Zgodbe exact height (cuts 3rd line) */
    overflow-y: auto; /* Enable vertical scroll */
    background-color: #f6f7f6; /* Light grey box */
    border: 1px solid #e0e6e1; /* Border */
    border-radius: 16px;
    align-content: flex-start;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.zgodbe-tags-scroll::-webkit-scrollbar { 
    display: block; 
    width: 4px; 
}
.zgodbe-tags-scroll::-webkit-scrollbar-thumb { 
    background: #ccc; 
    border-radius: 4px; 
}

/* Features Scroll Custom (Gostilna Card) - Cutoff at 1 line */
.features-scroll-custom {
    height: 85px !important; /* Fixed height to lock layout */
    max-height: 85px !important; /* Ensure it doesn't grow */
    margin-bottom: 20px !important; /* Spacing between features and description */
    margin-top: 10px !important; /* Push down 10px */
}

/* .tag-pill removed */

/* UPDATED: Strict Icon Sizing for Tags */
.tag-icon, .tag-icon-wrapper, .tag-icon-svg {
    width: 14px !important; /* Was 16px, reduced to match inline style */
    height: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0 !important; /* Removed to rely on parent gap */
}

/* Force SVGs to fit the container */
.tag-icon svg, .tag-icon-wrapper svg,
.tag-icon img, .tag-icon-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}


/* .tag-pill:hover/.active removed */

/* Story Tags Scroll (Moved from seznam_zgodb.php) */
.story-tags-scroll {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center; /* Centered by default */
    overflow: visible;
    max-height: none;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.story-tags-scroll::-webkit-scrollbar { display: none; }

/* Utilities */
.spacer-30 { height: 30px; width: 100%; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.text-white-force { color: white !important; }
.text-decoration-none { text-decoration: none !important; }
.justify-center { justify-content: center !important; }
.align-center { align-items: center !important; }
.text-center { text-align: center !important; }
.cursor-pointer { cursor: pointer !important; }
.block { display: block !important; }
.korenine-like-count { margin-left: 5px; font-weight: 700; color: #555; }
.mb-2px { margin-bottom: 2px !important; }

.zgodbe-search {
    width: 100%;
    max-width: 100%; /* Full width */
    margin: 0 auto;
}

.search-form {
    display: flex;
    gap: 0; /* No gap needed */
    width: 100%; /* Ensure form takes full width */
}

.search-input-zgodbe {
    flex: 1;
    width: 100%; /* Full width */
    padding: 20px 25px; /* Matched padding */
    border-radius: 15px; /* Matched radius */
    border: 3px solid #f6f7f6; /* Matched border */
    background: #f6f7f6; /* Matched background */
    font-family: var(--font-main);
    font-size: 18px; /* Matched font size */
    outline: none;
    transition: none; /* Matched transition */
    box-shadow: none; /* Removed shadow to match */
    text-align: left; /* Default left alignment */
}

.search-input-zgodbe:focus {
    border-width: 3px;
    border-color: #f6f7f6;
    background-color: #f6f7f6;
    box-shadow: none;
}
/* Footer Styles - Redesigned (2-Row Layout) */
.site-footer {
    background-color: #e8ecea;
    color: #000000 !important;
    padding: 15px 20px;
    margin-top: auto !important; /* Force push to bottom */
    border-top: 1px solid #e0e6e1;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    z-index: 10;
    clear: both;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Always column: Row 1 Logo, Row 2 Nav */
    align-items: center;
    gap: 10px; /* Reduced gap between Branding and Nav */
    text-align: center;
}

/* Row 1: Branding (Logo + Text) */
.footer-branding {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Reduced gap */
}

.footer-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-branding p {
    font-family: 'Inter', sans-serif !important;
    color: #000000 !important;
    opacity: 1 !important;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* Row 2: Navigation (Links with bullets) */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0; /* Gap handled by margins around bullets */
    width: 100%;
}

.footer-nav a {
    color: #000000 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.2s;
    display: flex;
    align-items: center;
    line-height: 1.5;
}

.footer-nav a:hover {
    color: #333333 !important;
    opacity: 0.7;
}

/* Bullet Separator */
.footer-nav a::after {
    content: "•";
    margin: 0 10px; /* Reduced spacing around bullet */
    color: #000000;
    font-weight: bold;
}

/* Remove bullet from last item */
.footer-nav a:last-child::after {
    display: none;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .footer-nav a {
        font-size: 12px; /* Increased to 12px per user request */
        letter-spacing: 0.5px; 
    }
    .footer-nav a::after {
        margin: 0 4px; /* Tighter spacing */
        font-size: 10px; 
    }
}

.back-link {
    /* Base badge properties */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    height: 24px; /* Match badge height */
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 25px; /* Keep existing margin */
    
    /* Setting 4 Colors (City/Distance Style) */
    background-color: #eeeeee !important;
    color: #000000 !important;
    border: 1px solid #dcdcdc !important;
    
    text-decoration: none !important;
}
.back-link:hover { 
    background-color: #e0e0e0 !important; /* Slightly darker on hover */
    color: #000000 !important;
    opacity: 1 !important;
}
.back-container { text-align: center; margin: 40px 0; }

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Explicit White */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 25px;
    display: none; /* JS handles this */
    border-top: 1px solid #e0e6e1;
    font-family: 'Inter', sans-serif;
}

.cookie-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cookie-header h3 {
    margin: 0;
    font-size: 16px;
    color: #000000 !important;
    font-weight: 800;
    text-transform: uppercase;
}

.cookie-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333 !important;
}

.cookie-body a {
    color: #000000 !important;
    text-decoration: underline;
    font-weight: 600;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-cookie-primary {
    background-color: #a8bfa8; /* Match filter-btn-refined.active */
    color: #000000;
    border: 1px solid #98af98;
    height: 40px;
    padding: 0 20px;
    border-radius: 12px; /* Match filter-btn-refined */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cookie-secondary {
    background-color: #ffffff; /* Match filter-btn-refined default */
    color: #000000;
    border: 1px solid #ddd;
    height: 40px;
    padding: 0 20px;
    border-radius: 12px; /* Match filter-btn-refined */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cookie-text {
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 15px;
    font-family: 'Inter', sans-serif;
}

.btn-cookie-primary:hover {
    background-color: #98af98;
    border-color: #89a089;
}

.btn-cookie-secondary:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

/* Verified Profile Badge */
.verified-badge {
    color: #256FDD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em; /* Make it slightly bigger than surrounding text */
    margin-left: 6px;
    vertical-align: -0.15em; /* Shift it down slightly to center it visually with the text */
}
.verified-badge .fa-stack {
    width: 1em;
    height: 1em;
    line-height: 1em;
}
.verified-badge .fa-certificate {
    color: #256FDD;
}
.verified-badge .fa-check {
    color: #ffffff;
    font-size: 0.5em; /* Scale the checkmark down to fit inside the rosette */
}

/* Toggle Switch Styles */
.cookie-option {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.option-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 22px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #000;
}

input:focus + .slider {
    box-shadow: 0 0 1px #000;
}

input:checked + .slider:before {
    transform: translateX(18px);
}

input:disabled + .slider {
    background-color: #999;
    cursor: not-allowed;
}

/* Story Interactions */
.story-interactions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 15px;
    clear: both; /* Ensure it drops below floated elements */
    width: 100%;
    box-sizing: border-box;
}

/* --- Responsive Interactions Fix --- */
@media (max-width: 768px) {
    /* Optimize Interactions for Mobile to stay in one row */
    .story-interactions {
        flex-wrap: nowrap; /* Force one row */
        gap: 5px; /* Reduced gap */
        padding-left: 0; /* Remove padding to maximize space */
        padding-right: 0; /* Remove padding to maximize space */
        margin-top: 20px; /* Reduced vertical spacing */
        padding-top: 15px;
    }

    .interaction-btn {
        padding: 5px 10px; /* Smaller button padding */
        font-size: 12px; /* Smaller font */
        height: 32px; /* Constrain height */
    }

    .share-buttons {
        gap: 4px; /* Tighter share buttons */
    }

    /* Hide "Deli:" text on mobile to save space */
    .share-label {
        display: none;
    }

    /* Smaller share icons */
    .share-btn {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
}

.interaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: white;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.interaction-btn:hover {
    background: #f9f9f9;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    color: var(--text-main);
}

.like-btn.active {
    color: #e0245e;
    border-color: #e0245e;
    background: #fff0f5;
}

.like-btn.active i {
    font-weight: 900; /* Solid heart */
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.share-btn {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* AI Gallery Styles (Restored) */
.ai-gallery-container {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--section-color);
}

/* --- STRICT BADGE SYSTEM (PHASE 1) --- */

/* Helper: Static Badge (No pointer events) */
.static-badge {
    pointer-events: none !important;
    cursor: default !important;
}

/* Category 4 Badge (Utility/Action) - Visuals Only */
.badge-cat-4 {
    background: #ffffff;
    color: #000000;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-weight: 700;
    cursor: pointer;
}

/* Load More Button Specifics - Sizing & Layout */
#load-more-btn {
    margin: 0 auto;
    padding: 12px 30px;
    font-size: 15px;
}

/* Category 1: Features / Content / Tags (Zgodbe Pill Style) */
.badge-cat-1 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #dcdcdc !important; /* Grey border */
    font-size: 13px !important; /* Larger font (was 11px) */
    font-weight: 500 !important; /* Medium weight (was 800) */
    text-transform: lowercase;
    padding: 0 16px !important; /* Wider padding */
    border-radius: 12px !important; /* More rounded */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Wider gap */
    height: 38px !important; /* Taller pill (was 24px) */
    white-space: nowrap;
    text-decoration: none !important; /* Ensure links have no underline */
    transition: all 0.2s ease;
    cursor: pointer;
}

.badge-cat-1:hover {
    background-color: #f9f9f9 !important;
    border-color: var(--primary-color) !important;
}

.badge-cat-1.active {
    background-color: #a8bfa8 !important; /* Active Green */
    color: #000000 !important;
    border-color: #98af98 !important;
}

/* Category 2: Info / Meta */
.badge-cat-2,
.badge-cat-2:hover,
.badge-cat-2:focus,
.badge-cat-2:active,
.badge-cat-2:visited {
    color: #000000;
    text-decoration: none;
    opacity: 1; /* Override global hover opacity */
    cursor: pointer; /* Keep pointer to indicate clickability */
}

/* Universal Icon Sizing */
.badge-cat-1 svg, .badge-cat-1 i, .badge-cat-1 img,
.badge-cat-2 svg, .badge-cat-2 i, .badge-cat-2 img,
.badge-cat-3 svg, .badge-cat-3 i, .badge-cat-3 img {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
    display: block;
}

.ai-gallery-slide-content {
    width: 100%;
    height: 220px; /* Matched to map-preview-box height */
    overflow: hidden;
    position: relative;
    pointer-events: none; /* Disable all interactions on the container */
}

.ai-gallery-slide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none !important; /* Disable all interactions */
    user-select: none; /* Prevent selection */
}

/* Removed hover effect to prevent interaction hints */
/* .ai-gallery-slide-content:hover img { transform: scale(1.05); } */

.aiGallerySwiper .swiper-pagination-bullet {
    background: #000;
    opacity: 0.2;
    pointer-events: none !important; /* Disable pagination clicks if needed, though usually harmless */
}

.aiGallerySwiper .swiper-pagination-bullet-active {
    background: #000;
    opacity: 0.8;
}

/* Character counter for rating comments */
.char-counter {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
}

/* Success message after submitting a rating */
.rating-success-msg {
    background-color: var(--success-bg);
    color: var(--success-text);
    padding: 15px;
    border-radius: var(--card-radius);
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
}

/* User Dropdown Menu Styles */
.user-dropdown-container {
    position: relative;
    display: inline-block;
}

.user-icon-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #000000; /* Changed from var(--primary-color) to black */
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.user-icon-btn:hover {
    /* color: #2C2F45; */ /* Removed hover color change */
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    background-color: #ffffff;
    border: 1px solid var(--section-color);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 1002;
    display: none;
    flex-direction: column;
    margin-top: 10px;
}

.user-dropdown-menu.active {
    display: flex;
}

/* --- IDEJE PILLAR NAVIGATION (PERSISTENT CARDS) --- */
.ideje-pillar-nav {
    display: flex;
    gap: 15px;
    margin: 30px auto 40px auto;
    max-width: 1200px;
    padding: 5px 20px 5px 20px; /* Added 5px top/bottom padding to prevent box-shadow clipping */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    justify-content: center; /* Center on desktop */
}

.ideje-pillar-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.pillar-card {
    display: flex;
    align-items: center;
    background: var(--bg-white);
    border-radius: var(--card-radius);
    padding: 8px 16px; /* Tighter padding */
    text-decoration: none;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--section-color); /* Thicker border */
    position: relative;
    overflow: hidden;
    min-width: 130px; /* Reduced min-width since text is shorter */
    flex-shrink: 0; /* Prevent shrinking when scrolling */
}

.pillar-card.active {
    border-color: transparent; /* Hide normal border so shadow ring takes over smoothly */
}

.pillar-card:hover {
    color: var(--text-main);
}

/* Subtle background accent colors for each pillar */
.top-pillar::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #ffd700; }
.kam-pillar::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #6c5ce7; }
.okusi-pillar::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #16a085; }
.vse-pillar::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #a8bfa8; } /* Added for 'Vse' */

/* Active Border Colors (Overrides the transparent border with colored shadow ring) */
.vse-pillar.active { box-shadow: 0 0 0 3px #a8bfa8; }
.top-pillar.active { box-shadow: 0 0 0 3px #ffd700; }
.kam-pillar.active { box-shadow: 0 0 0 3px #6c5ce7; }
.okusi-pillar.active { box-shadow: 0 0 0 3px #16a085; }

.pillar-icon {
    font-size: 16px; /* Reduced from 20px */
    width: 32px; /* Reduced from 40px */
    height: 32px; /* Reduced from 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px; /* Reduced from 12px */
    flex-shrink: 0;
}

.vse-pillar .pillar-icon { background: rgba(168, 191, 168, 0.15); color: #a8bfa8; }
.top-pillar .pillar-icon { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
.kam-pillar .pillar-icon { background: rgba(108, 92, 231, 0.15); color: #6c5ce7; }
.okusi-pillar .pillar-icon { background: rgba(78, 205, 196, 0.15); color: #16a085; }

.pillar-content h3 {
    margin: 0; /* Removed bottom margin */
    font-size: 14px; /* Reduced from 15px */
    font-weight: 700;
    font-family: var(--font-heading);
    color: #ffffff !important; /* Force white text over global black */
}

/* Removed .pillar-content p as the paragraph was removed from HTML */

/* --- IDEJE PILLAR HERO BADGES --- */
.pillar-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

.pillar-hero-badge i {
    font-size: 20px;
}

.vse-hero-badge { background: #a8bfa8; color: #2c2c2c; } /* Light green bg, dark text for contrast */
.top-hero-badge { background: #ffd700; color: #2c2c2c; } /* Yellow bg, dark text for contrast */
.kam-hero-badge { background: #6c5ce7; }
.okusi-hero-badge { background: #16a085; }

/* --- SWIPER DESKTOP ARROWS --- */
.desktop-only-arrow {
    display: none !important; /* Hidden by default (mobile) */
}

@media (min-width: 768px) {
    .desktop-only-arrow {
        display: flex !important; /* Show on desktop */
        background: rgba(255, 255, 255, 0.9);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        color: #000;
    }
    
    .desktop-only-arrow::after {
        font-size: 16px;
        font-weight: bold;
    }

    .swiper-button-prev.desktop-only-arrow {
        left: -10px;
    }

    .swiper-button-next.desktop-only-arrow {
        right: -10px;
    }
}

@media (max-width: 768px) {
    .pillar-hero-badge {
        font-size: 15px;
        padding: 8px 20px;
    }
    .pillar-hero-badge i {
        font-size: 16px;
    }
    
    .ideje-pillar-nav {
        justify-content: flex-start; /* Allow scrolling from left on mobile */
        padding: 5px 15px 10px 15px; /* Added 5px top padding to prevent box-shadow clipping */
        margin: 20px auto 30px auto;
        gap: 10px;
    }
    
    .pillar-card {
        padding: 8px 12px; /* Tighter mobile padding */
        min-width: 110px; /* Slightly smaller min-width on mobile */
    }
    
    .pillar-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-right: 8px;
    }
    
    .pillar-content h3 {
        font-size: 13px;
    }
}
.user-dropdown-menu a:hover {
    background-color: transparent !important;
    color: var(--text-main) !important;
}

.user-dropdown-menu a.text-danger:hover {
    background-color: transparent !important;
    color: #d32f2f !important;
}

/* Override for text-danger specifically in dropdown to kill hover */
.user-dropdown-menu a {
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    /* transition: background-color 0.2s; */ /* Removed transition */
    font-weight: 500;
}

.user-dropdown-menu a i {
    width: 20px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--section-color);
    margin: 5px 0;
}

.text-danger {
    color: #d32f2f !important;
}

.text-danger:hover {
    /* background-color: #fee2e2 !important; */ /* Removed hover background */
    color: #d32f2f !important; /* Keep text red, prevent color change */
}

/* Mobile Auth Links Styles */
.mobile-auth-link-black {
    color: #000000 !important;
    font-weight: 700;
}

.mobile-auth-link-danger {
    color: #d32f2f !important;
}

/* Active User Icon (Sage Green) */
.user-icon-active {
    color: #a8bfa8 !important;
}

.user-icon-active i {
    border: 2px solid #000000;
    border-radius: 50%;
}

/* User Tag Toggles (Profile) - Removed, now using standard .active style */

/* Ensure dropdown-links takes available space but doesn't overstretch */
.dropdown-links {
    flex: 1;
}

/* Zgodbe More Header */
.zgodbe-more-header {
    color: #ffffff !important;
    text-align: center;
}

/* Profile Card Styling (Matches Gostilna Card) */
.profile-card {
    background: #ffffff;
    border-radius: var(--card-radius); /* 24px */
    padding: 0; /* Handled by drill layout */
    box-shadow: var(--shadow-sm);
    margin-top: 20px;
    border: 1px solid var(--section-color);
    height: 525px !important; /* Fixed height matching restaurant-card */
    overflow: hidden;
    max-width: 600px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .profile-card {
        height: 525px !important; /* Keep fixed height on mobile too */
        border-radius: var(--card-radius) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    
    .hide-mobile {
        display: none;
    }
    
    #msg-toolbar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    #msg-toolbar > div {
        width: 100%;
        justify-content: space-between;
    }
}

/* Auth Pages */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Keep it centered vertically */
}

.auth-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--section-color);
    text-align: center;
    margin: 0 auto;
}

.auth-card h2 {
    margin-bottom: 30px;
    color: #000000;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--section-color);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    font-family: var(--font-main);
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: var(--primary-color);
}

.auth-links {
    margin-top: 25px;
    font-size: 14px;
    color: var(--text-muted);
}

.error-msg {
    background: #fee2e2;
    color: #991b1b;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* --- MOBILE SPECIFIC OVERRIDES --- */
/* This block MUST remain at the bottom to override desktop styles */
@media (max-width: 768px) {
    /* Mobile User Dropdown Optimization */
    .user-dropdown-menu {
        width: 160px !important;
        min-width: 160px !important; /* Force min width */
        max-width: 160px !important; /* Force max width */
        right: 0 !important;
        left: auto !important;
        padding: 15px !important;
        border-radius: 24px !important; /* Match gostilna card radius */
        top: 100% !important;
        margin-top: 10px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; /* Stronger shadow */
    }
    .user-dropdown-menu a {
        font-size: 13px !important;
        padding: 8px 0 !important; /* Slightly more touch space */
    }
}

/* --- NAVDIH / SLOT MACHINE STYLES --- */
.slot-machine-container {
    background: #ffffff; /* White background */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Standard card shadow */
    border: 1px solid #ddd; /* Clean border */
    /* max-width removed to match settings-panel width */
    margin-bottom: 40px; 
    position: relative;
    overflow: hidden;
}

/* Remove Gold Frame Effect */
.slot-machine-container::before {
    display: none;
}

.reels-wrapper {
    display: flex;
    gap: 15px;
    justify-content: center;
    background: #f9f9f9; /* Light grey background */
    padding: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.reel {
    flex: 1;
    height: 100px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    border: 3px solid #444;
}

/* The Strip inside the reel */
.reel-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0s linear; /* JS handles animation */
    /* Starting position */
}

.reel-item {
    height: 100px; /* Match reel height */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

.reel-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    margin-bottom: 8px;
}

.reel-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #333;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Blur effect during spin */
.reel.spinning .reel-strip {
    filter: blur(2px);
}

.spin-controls {
    text-align: center;
    position: relative;
    z-index: 20;
}

#spin-btn {
    width: auto !important;
    min-width: 250px;
    padding: 12px 40px !important;
}



/* Winner Card Reveal */
#winner-reveal {
    max-width: 600px;
    margin: 40px auto 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#winner-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* Settings Panel */
.settings-panel {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.tab-btn,
.profile-tab-btn {
    padding: 10px 20px;
    border-radius: 20px;
    border: 0px solid #ddd;
    background: #f9f9f9;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
    white-space: nowrap; /* Added from profile.php */
}

.tab-btn.active,
.profile-tab-btn.active {
    background: #A8BFA8; /* Matches style.css .tab-btn.active (was var(--primary-color) in profile.php) */
    color: #fff;
    border-color: #333;
}

.settings-content { display: none; }
.settings-content.active { display: block; animation: fadeIn 0.3s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Tag Grid */
.tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.tag-option {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s;
}

.tag-option:hover { background: #f0f0f0; }
.tag-option.selected {
    background: #a8bfa8;
    color: #000;
    border-color: #98af98;
    font-weight: 600;
}

/* Button Shape Modifier - Matches badge-cat-3 large */
.btn-shape-pill {
    border-radius: 22px !important;
    height: 44px !important;
    padding: 0 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 250px;
    margin: 0 auto; /* Attempt to center if block, otherwise parent needs text-align center */
}

@media (max-width: 768px) {
    .reels-wrapper { gap: 5px; padding: 10px; }
    .reel { height: 120px; border-width: 2px; }
    .reel-item { height: 120px; padding: 10px; }
    .reel-icon { width: 40px; height: 40px; margin-bottom: 5px; }
    .reel-text { font-size: 0.9rem; }
    .spin-btn { padding: 15px 30px; font-size: 1.4rem; }
}

/* --- RESTORED STYLES (LOCKED) --- */

/* Category 2: Uniform/Meta (Price, Distance, Address, Contact) - LOCKED */
.badge-cat-2 {
    background-color: #eeeeee !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 6px;
    padding: 0 10px;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: none !important;
}

/* Multiline variant for description boxes */
.badge-cat-2-multiline {
    background-color: #eeeeee !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 10px;
    margin: 0 auto;
    max-width: 85%;
    text-align: justify;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: block; /* Allows full width */
    white-space: normal; /* Allows text wrapping */
    text-transform: none; /* Keep natural text casing */
}

/* Hide distance badge by default until calculated */
.dist-badge-hidden {
    display: none;
}

/* Category 3: Rating/Status - Large Variant for Actions */
.badge-cat-3.large {
    font-size: 1.1rem;
    padding: 12px 24px;
    width: 100%;
    justify-content: center;
}

/* Hours Toggle Box - Styled as Badge Cat 2 */
.hours-toggle-box {
    background-color: #eeeeee !important;
    color: #000000;
    border: none;
    border-radius: 6px;
    padding: 0 10px;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    display: flex; /* Changed from inline-flex to flex */
    margin: 0 auto; /* Center it */
    width: fit-content; /* Ensure it doesn't stretch full width */
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.hours-toggle-box:hover {
    background: #e0e0e0 !important; /* Slightly darker on hover */
}

/* Comment Card Styling - Refined */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Better separation */
}

.comment-card-styled {
    background: #ffffff;
    border: 1px solid #f0f0f0; /* Subtle border */
    border-radius: 16px; /* Softer corners */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Soft float */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0; /* Let flex gap handle spacing */
}

.comment-card-styled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: #e0e6e1;
}

.comment-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 8px;
}

.comment-author-name {
    font-family: 'Inter', sans-serif; /* Reverted to Inter */
    font-weight: 800;
    font-size: 14px;
    color: #0f1712; /* Dark text */
    text-transform: capitalize;
}

.comment-rating-stars {
    display: flex;
    gap: 2px;
}

.comment-rating-stars i {
    color: #FFD700 !important; /* Gold */
    font-size: 13px;
    filter: drop-shadow(0 1px 2px rgba(255, 215, 0, 0.3)); /* Gold glow */
}

.comment-body-text {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    font-style: normal; /* Remove italic */
    margin-bottom: 10px;
}

.comment-date-text {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* --- REPORT ISSUE FORM STYLES --- */
.report-success-box {
    background-color: #d1fae5;
    color: #065f46;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #a7f3d0;
    scroll-margin-top: 100px; /* Helps with scroll positioning */
}

.report-success-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
    color: #059669;
}

.report-success-actions {
    margin-top: 25px;
}

.report-error-box {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    font-weight: 600;
}

.report-intro-text {
    margin-bottom: 20px;
    color: #666;
    font-size: 15px;
}

.report-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 16px;
    color: #1f2937;
}

.report-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f9fafb;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
}

.report-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
    color: #374151;
    transition: color 0.2s;
}

.report-checkbox-label:hover {
    color: #111827;
}

.report-checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.report-textarea-group {
    margin-top: 25px;
}

.report-buttons-row {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    align-items: center;
}

.report-link-cancel {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    color: #6b7280;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.2s;
}

.report-link-cancel:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.btn-report-back {
    text-decoration: none;
    display: inline-block;
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 12px;
    transition: opacity 0.2s;
}

.btn-report-back:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* Empty State */
.empty-state {
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 500;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
    padding: 20px;
}

/* Gostilna Prikaz Utilities */
.ai-gallery-container-custom {
    margin-bottom: 0;
}

.report-btn-custom {
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    background: #fff;
}

.rating-badge-custom {
    cursor: default;
    border-color: #f59e0b;
    color: #f59e0b;
}

.rating-badge-success {
    cursor: default;
    border-color: #28a745;
    color: #28a745;
}

.hours-today-text {
    font-weight: 700;
}

.hours-toggle-icon {
    font-size: 12px;
    transition: transform 0.3s;
}

.hours-expandable-content-custom {
    display: none;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.hours-row-custom {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px dashed #f0f0f0;
}

.day-name-active {
    font-weight: bold;
    color: #000000 !important;
}

.day-name-inactive {
    color: #555;
}

.time-range-active {
    font-weight: bold;
}

.time-range-inactive {
    color: #333;
}

.time-remaining-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Enhanced Time Remaining Badge */
.time-remaining-badge {
    font-size: 15px !important;
    padding: 8px 20px !important;
    height: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

/* STATIC / LEGAL PAGES EXTRACTED TO assets/css/pages/static.css */

/* Gostilna Social Links Card (Used in gostilna_prikaz.php) */
.gostilna-social-card {
    background-color: transparent;
    border: none;
    border-radius: 0; 
    overflow: visible;
    margin-bottom: 20px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Gostilna Social Icon Rows */
.gostilna-social-row-primary, 
.gostilna-social-row-secondary {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* Badge-Style Icon Buttons */
.gostilna-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #eeeeee;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}

.gostilna-social-btn:hover {
    background-color: #e0e0e0;
    color: #000000;
    transform: translateY(-2px);
}

.gostilna-social-btn i {
    color: #000000;
}

/* Custom Story Header (Card 5) */
.custom-story-header {
    background-size: cover;
    background-position: center;
    position: relative;
}

.custom-story-header .overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.custom-story-header .story-title {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.custom-story-header .story-subtitle {
    position: relative;
    z-index: 2;
    color: #eee;
    font-size: 13px;
    margin-top: 5px;
}

/* --- Profile Page Redesign (Swiper Card System) --- */

/* Breadcrumb Bar */
.profile-breadcrumb-bar {
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
    background: #fff;
    min-height: 50px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Horizontal Scrolling Container (Snap) */
.horizontal-scroll-snap {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.horizontal-scroll-snap::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-snap > * {
    flex: 0 0 auto;
    width: 280px; /* Default Card Width */
    scroll-snap-align: start;
}

/* --- Profile Redesign v3: Gallery Overlay --- */

/* The Full Screen Overlay */
.detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detail-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Blurred Backdrop */
.detail-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card Wrapper (Centers the Swiper) */
.detail-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 80vh;
    z-index: 2001;
    display: flex;
    flex-direction: column;
}

/* Close Button (Floating) */
.btn-close-overlay {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.2s;
}
.btn-close-overlay:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Swiper Container inside Overlay */
.detailSwiper {
    width: 100%;
    height: 100%;
}

.detail-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Padding for mobile edges */
}

/* The Actual Content Card */
.detail-content-card {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

/* Mobile Tweaks for Overlay */
@media (max-width: 768px) {
    .detail-card-wrapper {
        height: 85vh; /* Taller on mobile */
        max-width: 90%;
    }
    
    .btn-close-overlay {
        top: 10px;
        right: 10px;
        z-index: 2005;
        background: #f0f0f0;
        color: #333;
    }
    
    .detail-content-card {
        padding: 20px;
    }
}

/* Detail Typography */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.detail-date {
    font-size: 13px;
    color: #888;
}

.detail-body {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* Swiper Pagination Customization */
.detailSwiper .swiper-pagination-bullet {
    background: rgba(255,255,255,0.5);
    opacity: 1;
}
.detailSwiper .swiper-pagination-bullet-active {
    background: #fff;
}

.msg-card-new {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 15px;
}
.msg-card-new:active {
    transform: scale(0.98);
}
.msg-card-new.unread {
    border-left: 4px solid var(--primary-color);
    background: #fffafa;
}
.msg-card-new .msg-icon {
    font-size: 24px;
    color: var(--primary-color);
    width: 40px;
    text-align: center;
}
.msg-card-new .msg-info {
    flex: 1;
    min-width: 0; /* Text truncation fix */
}
.msg-card-new .msg-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-card-new .msg-date {
    font-size: 12px;
    color: #999;
}

/* Detail View Components */
.detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.btn-back {
    background: #f5f5f5;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 16px;
}
.detail-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.detail-body {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}
@media (max-width: 768px) {
    .mobile-top-spacer {
        margin-top: 5px !important;
        padding-top: 5px !important;
    }
}

/* Card 5 Height Fix (Matches .restaurant-card 525px on ALL devices) */
.story-card-slide {
    height: 525px !important;
}

/* Ensure image scales properly within fixed height */
.story-card-slide .story-img {
    height: 200px !important; /* Keep image height consistent */
    flex-shrink: 0;
}

/* Ensure body takes remaining space */
.story-card-slide .story-body {
    flex: 1;
    overflow-y: auto; /* Allow scrolling if content is too long */
}

/* --- DRILL-DOWN MENU SYSTEM (v4) --- */
.drill-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 60px;
}

.drill-back-btn {
    background-color: #eeeeee;
    color: #000000;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 15px;
    transition: background 0.2s;
}

.drill-back-btn:hover {
    background-color: #e0e0e0;
}

.drill-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drill-viewport {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    flex: 1; /* Take remaining height */
    background: #fff;
    /* Removed min-height: 600px to allow flex to work */
}

.drill-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 20px;
    overflow-y: auto;
    display: none; /* Hide by default */
}

.drill-level.active {
    display: block;
    transform: translateX(0);
    z-index: 5;
}

.drill-level.next {
    display: block;
    transform: translateX(100%);
    z-index: 6;
}

.drill-level.prev {
    display: block;
    transform: translateX(-30%); /* Parallax effect for previous level */
    z-index: 1;
    opacity: 0.5; /* Fade out slightly */
}

/* Level 1 Menu Grid */
.drill-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.drill-menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.drill-menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--primary-color);
}

.drill-icon {
    width: 40px;
    height: 40px;
    background: #f6f7f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000000;
    margin-right: 15px;
}

.drill-label {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.drill-arrow {
    color: #ccc;
    font-size: 14px;
}

/* Tab Navigation inside Drill Level 2 */
.drill-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.drill-tab-btn {
    padding: 8px 16px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #666;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.drill-tab-btn.active {
    background: var(--primary-color);
    color: #fff;
}

/* Vertical List Items (Profile - Loved Gostilne) */
.profile-loved-gostilne-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap, handled by border-bottom */
    width: 100%;
}

.loved-gostilna-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
    width: 100%;
}

.loved-gostilna-item:hover {
    background-color: #fcfcfc;
}

.loved-gostilna-item:last-child {
    border-bottom: none;
}

.loved-gostilna-img-small {
    width: 40px;
    height: 40px;
    border-radius: 8px; /* Slightly rounded square */
    object-fit: cover;
    background-color: #f6f7f6;
    margin-right: 15px;
    flex-shrink: 0;
}

.loved-gostilna-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Text truncation fix */
}

.loved-gostilna-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 2px 0;
    /* Allow multi-line */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

.loved-gostilna-city {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.loved-gostilna-arrow {
    color: #ddd;
    font-size: 12px;
    margin-left: 10px;
}
.drill-list-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
}
.drill-list-item:hover {
    background: #fcfcfc;
}

/* Search Result Item Styles */
.search-result-link {
    text-decoration: none !important;
    color: inherit !important;
}

.search-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.search-result-name {
    margin-bottom: 0 !important;
}

.search-result-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.search-result-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

#location-toggle {
    display: none;
}

#results-display {
    margin-top: 20px;
}

/* Like Count */
.like-count-span {
    margin-left: 5px;
    font-weight: 600;
}

/* Custom Story Card Styles */
.story-card-custom {
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

.story-link-block {
    display: block;
}

.story-img-custom {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.story-body-custom {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.story-header-custom {
    text-align: center;
}

.story-text-container-custom {
    flex: 1;
    margin-top: 15px;
}

.story-footer-custom {
    margin-top: auto;
    padding-top: 15px;
    text-align: center;
}

/* Load More Container */
.load-more-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* Modal Styles from seznam_zgodb.php */
.story-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98); /* Light overlay or white */
    z-index: 9999;
    overflow-y: auto;
    padding: 20px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}
.story-modal-overlay.open {
    opacity: 1;
    display: block !important;
}
.story-modal-content {
    max-width: 800px; /* Match article width */
    margin: 0 auto;
    position: relative;
    min-height: 100%;
}
/* Close button style matching the one in ajax response */
.close-story-btn {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #f1f1f1;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.close-story-btn:hover {
    background: #e1e1e1;
}
/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Card Zgodba Styles */
.story-card-link-block {
    text-decoration: none !important;
    display: block;
}

.story-header-centered {
    align-items: center;
    text-align: center;
}

.story-title-link {
    text-decoration: none !important;
}

/* Empty State Korenine */
.empty-state-korenine {
    grid-column: 1/-1;
    text-align: center;
    padding: 100px;
    color: #555;
    font-family: 'Merriweather', serif;
}

/* --- Profile Page Updates --- */
.profile-card h2 { color: #000; }
.profile-header-container { text-align: center; margin-bottom: 30px; }

/* Override profile-card default fixed height for report view */
.profile-card.report-view {
    padding: 20px;
    height: auto !important;
    overflow: visible !important;
}

/* Drill Down Specifics */
.drill-badge-notification {
    background: #ef4444; 
    color: white; 
    font-size: 11px; 
    padding: 2px 6px; 
    border-radius: 10px; 
    margin-right: 10px;
}

.drill-icon.danger { color: #d32f2f; }
.drill-label.danger { color: #d32f2f; }

.trash-btn-container { text-align: right; margin-bottom: 10px; }
.btn-trash-empty {
    color: #d32f2f; 
    background: none; 
    border: 1px solid #d32f2f; 
    border-radius: 4px; 
    padding: 5px 10px; 
    font-size: 12px; 
    cursor: pointer;
}

/* --- POSEBNOSTI LOCKDOWN (UNVERIFIED) --- */
.features-locked-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 25px 0; /* Removed negative horizontal margins that cause border bleed */
    padding: 10px 0;
    border-bottom: none !important; /* Explicitly prevent any inherited borders */
    background: transparent !important;
}

.features-blurred-content {
    filter: blur(5px);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    display: flex;
    gap: 8px;
    margin: 0 !important; /* Override original margin */
}

.features-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 10px 20px;
    text-align: center;
}

.features-lock-icon {
    font-size: 24px;
    color: #e11d48; /* Red */
    margin-bottom: 8px;
}

.features-lock-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.btn-claim-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 15px;
    padding: 0 15px;
    background-color: #000000;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-claim-profile:hover {
    background-color: #374151;
    color: #ffffff;
}

/* --- CLAIM BUSINESS PAGE --- */
.claim-container {
    max-width: 600px;
    margin: 40px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.claim-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.claim-header h2 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 24px;
    color: #1f2937;
}

.claim-restaurant-name {
    margin: 10px 0 0 0;
    color: var(--primary-color);
    font-size: 20px;
}

.claim-restaurant-address {
    color: #9ca3af;
    font-size: 14px;
}

.claim-form-group {
    margin-bottom: 20px;
}

.claim-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #4b5563;
}

.claim-form-group input[type="text"],
.claim-form-group input[type="email"],
.claim-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.claim-form-group input:focus,
.claim-form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.btn-claim-submit {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 16px 30px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-weight: 700;
    transition: background 0.2s;
    font-family: 'Inter', sans-serif;
}

.btn-claim-submit:hover {
    background: #374151;
}

.claim-success-message {
    background: #d1fae5;
    color: #065f46;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #a7f3d0;
}

.claim-error-message {
    background: #fee2e2;
    color: #991b1b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    font-weight: 600;
}

/* Drill List Item Styles */
.drill-item-subject { font-weight: 600; color: #333; }
.drill-item-subject.deleted { color: #666; text-decoration: line-through; }
.drill-item-date { font-size: 12px; color: #888; }
.drill-item-dot { width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; margin-right: 10px; }

/* Settings */
.settings-input-readonly { background-color: #f5f5f5; color: #888; cursor: not-allowed; }

/* ==========================================================================
   HOMEPAGE FEATURED CAROUSEL (Phase 3)
   ========================================================================== */
.featured-carousel-container {
    margin: 20px 0;
    padding: 0 15px;
}

.featured-swiper {
    width: 100%;
    padding-bottom: 30px; /* Space for pagination dots */
}

.featured-card {
    width: 160px;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.featured-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.featured-card-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
}

.featured-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.9) 100%);
}

.featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 0.5px;
    background: var(--primary); /* Default Fallback */
}

.featured-badge.badge-gostilna { background: #E65100; }
.featured-badge.badge-korenine { background: #4CAF50; }
.featured-badge.badge-zgodba { background: #9C27B0; }
.featured-badge.badge-custom { background: #1976D2; }

.featured-card-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px;
    z-index: 2;
    color: white;
}

.featured-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    color: #ffffff !important;
}

.featured-card-snippet {
    margin: 4px 0 0 0;
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    color: #ffffff !important;
}

.featured-pagination {
    bottom: 0px !important;
}