/* Starry Dark Theme */
:root {
    --bg-color: #0b0d17;
    --card-bg: #15192b;
    --text-color: #e0e0e0;
    --accent-color: #0d6efd;
    --border-color: #2c3040;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Global Container Override */
.container {
    max-width: 95% !important;
}

/* Navbar */
/* Navbar */
.navbar {
    background-color: rgba(10, 12, 16, 0.3) !important;
    /* Semi-transparent dark (User req 0.3) */
    backdrop-filter: blur(12px);
    /* Blur effect */
    -webkit-backdrop-filter: blur(12px);
    /* Safari support */
    position: fixed;
    /* Force fixed to ensure overlay effect */
    top: 0;
    width: 100%;
    /* Ensure full width when fixed */
    z-index: 1050;
    /* Above everything */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle edge */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Navbar Search */
.navbar-search-form {
    width: 100%;
    max-width: 500px;
    /* Default for mobile (stacking) */
    margin: 10px 0;
}

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

.navbar-search-input {
    background-color: transparent !important;
    /* Force transparency */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50px;
    /* Pill shape */
    padding-left: 20px;
    padding-right: 50px;
    /* Space for icon */
    height: 40px;
    /* Define height for vertical centering consistency */
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
}

.navbar-search-input:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: none;
}

.navbar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* Internal Search Button */
.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 5px 10px;
    border-radius: 50%;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    color: #fff;
}

/* Header Layout Structure */
.header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 0 1rem;
}

@media (min-width: 992px) {
    .header-left {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 500px;
        margin: 0 20px;
    }

    .header-right {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    /* Override Desktop Centering on the form itself, let the wrapper handle it */
    .navbar-search-form {
        position: static;
        transform: none;
        left: auto;
        margin: 0;
        width: 100%;
    }
}

/* Medium screens (tablets, narrow desktop windows) */
@media (min-width: 768px) and (max-width: 991px) {
    .header-flex-container {
        flex-wrap: nowrap;
    }

    .header-left {
        flex: 0 0 auto;
    }

    .header-center {
        flex: 1;
        max-width: 300px;
        margin: 0 15px;
    }

    .header-right {
        flex: 0 0 auto;
    }

    .navbar-search-form {
        width: 100%;
        margin: 0;
    }

    /* Collapse nav links into hamburger at this width */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 12, 16, 0.95);
        backdrop-filter: blur(12px);
        padding: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 767px) {
    .header-flex-container {
        flex-wrap: wrap;
    }

    .header-left {
        flex: 1;
    }

    .header-right {
        /* On mobile, this contains the toggler */
        flex: 0 0 auto;
    }

    .header-center {
        /* Search bar on new line below logo */
        width: 100%;
        order: 3;
        margin-top: 10px;
    }

    /* Ensure collapsible menu takes full width when open */
    .navbar-collapse {
        flex-basis: 100%;
    }
}

.navbar-brand,
.nav-link {
    color: #fff !important;
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    line-height: 1.2;
    padding: 0;
    /* Tight spacing in nav */
}

.nav-link:hover {
    color: var(--accent-color) !important;
}

.nav-logo {
    height: 38px;
    width: auto;
    margin-bottom: 2px;
    /* Small gap between logo and text */
    margin-right: 0;
    /* Reset margin from previous side-by-side layout */
    vertical-align: middle;
    /* User requested original color (White), removing invert filter */
    filter: none;
    /* Nuclear option for transparency */
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.brand-text {
    font-size: 13px;
    /* Smaller, sophisticated text */
    font-weight: 600;
    /* Semi-bold */
    letter-spacing: 1px;
    /* Add breathing room */
    text-transform: uppercase;
    /* Optional: makes small text look better */
}

/* Failsafe for any image in navbar-brand */
.navbar-brand img {
    height: 38px !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    vertical-align: middle;
    margin-bottom: 2px;
    /* Ensure spacing applies here too if class missing */
}



/* User Dropdown Hover & Flicker Fix */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    /* Remove Bootstrap default margin that causes gap */
}

.dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: #fff;
}

/* The Bridge: Invisible pseudo-element to span gap between link and menu */
.nav-item.dropdown .nav-link::after {
    /* Bootstrap uses ::after for the caret, so we target the link itself or container */
    /* Wait, Bootstrap .dropdown-toggle::after IS the caret. We can use ::before or padding. */
    /* Safer approach: Padding on the menu container or menu itself? */
}

/* BETTER FLICKER FIX: Add transparent border/padding to top of menu */
.dropdown-menu {
    border-top: 5px solid transparent !important;
    /* Invisible bridge area */
    background-clip: padding-box;
    /* Ensures background doesn't show under border */
    margin-top: -2px !important;
    /* Pull it up slightly to overlap/touch */
}

/* Ensure the background color applies to the content, not the transparent border area */
.dropdown-menu>li {
    position: relative;
    z-index: 2;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.card-title {
    color: #fff;
}

.text-muted {
    color: #a0a0a0 !important;
}

/* Inputs & Forms */
.form-control,
.form-select {
    background-color: #1f243d;
    border: 1px solid var(--border-color);
    color: #fff;
}

.form-control:focus,
.form-control:focus,
.form-select:focus {
    background-color: #1f243d;
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Disabled/Readonly Inputs */
.form-control:disabled,
.form-control[readonly] {
    background-color: #2c3040;
    /* Slightly lighter/greyer than normal bg */
    color: #a0a0a0;
    /* Dimmed text */
    opacity: 1;
    /* Override bootstrap opacity */
    border-color: #3d4255;
}

/* Buttons */
.btn-outline-dark {
    color: #fff;
    border-color: #fff;
}

.btn-outline-dark:hover {
    background-color: #fff;
    color: #000;
}

/* About Section Image Hover Effect */
.about-image {
    width: 100%;
    border-radius: 8px;
    filter: grayscale(100%);
    will-change: filter;
    transition: filter 0.4s ease-in-out;
}

.about-image:hover {
    filter: grayscale(0%);
}

/* About Section Background */
.bg-white {
    background-color: var(--bg-color) !important;
    /* Override white bg to transparent/dark for dark theme consistency */
    border-top: 1px solid var(--border-color) !important;
}

/* Hero Section Adjustments */
.hero-content {
    background: transparent;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);

    /* Hero Content Refinement (Global) */
    bottom: 15% !important;
    /* Lift up significantly */
    left: 5% !important;
}

/* Vertical Stacking for Hero Meta */
.hero-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.hero-meta>span {
    display: inline-block;
    margin-right: 0 !important;
    /* Reset existing margins */
}

.hero-meta .btn {
    margin-top: 15px !important;
    /* Separate button */
    margin-left: 0 !important;
}

/* Pagination / Loader */
.spinner-border {
    color: var(--accent-color) !important;
}

/* Modal */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Recent Works Section */
.recent-work-img-wrapper {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.recent-work-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Force fill */
    object-position: center center !important;
    /* Center focus */
    display: block !important;
}

.recent-work-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    pointer-events: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    color: white;
    opacity: 1;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* Gradient backdrop */
    z-index: 2;
    text-align: left;
    /* Ensure left alignment */
}

.recent-work-info .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    /* Spacing for author */
    display: block;
}

.recent-work-card:hover .recent-work-info {
    opacity: 0;
}

/* Gallery Page Specific Styles (Mirroring Recent Works but with specific tweaks if needed) */
.gallery-img-wrapper {
    aspect-ratio: 4 / 3;
    /* Keep consistency or 16/9, let's stick to user request "keep thumbnail dimensions" which were previously auto but usually square-ish or landscape. 
                            Wait, user said "Keep dimensions... do not shrink". 
                            The previous code used `style="height: 200px; object-fit: cover;"` on img. 
                            Let's use a ratio to be modern, maybe 16/9 or 4/3. 
                            User didn't specify ratio, just "Keep dimensions". 
                            Actually, 4:3 is safer and looks better generally. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.gallery-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Force fill */
    object-position: center center !important;
    /* Center focus */
    display: block !important;
}

.gallery-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    pointer-events: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    color: white;
    opacity: 1;
    /* Visible by default */
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* Gradient backdrop */
    z-index: 2;
    text-align: left;
}

.gallery-info .card-title,
.gallery-info h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    display: block;
}

.gallery-card:hover .gallery-info {
    opacity: 0;
    /* Hide on hover */
}

/* Edit button for own photos in gallery */
.gallery-edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.gallery-img-wrapper:hover .gallery-edit-btn {
    opacity: 1;
}

.gallery-edit-btn:hover {
    background: rgba(255, 193, 7, 0.9);
    color: #000;
    transform: scale(1.1);
}

/* Creator Link Styling */
.creator-link .creator-text {
    color: var(--accent-color) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.creator-link:hover .creator-text {
    color: #fff !important;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(13, 110, 253, 0.6);
}

/* Detail Page Image Constraint */
.detail-image-container img {
    max-height: 75vh;
    width: 100%;
    object-fit: contain;
    cursor: zoom-in;
    background-color: #000;
    /* Optional, for letterboxing */
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* Important: prevents scrollbars when panning */
    z-index: 9999;
    /* Ensure it's on top */
    background: rgba(0, 0, 0, 0.9);
    /* Dark background */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-modal.show {
    opacity: 1;
}

.lightbox-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Important for panzoom */
}

.lightbox-image {
    /* Reset standard responsive rules */
    max-width: none !important;
    max-height: none !important;
    /* Optional: Set a reasonable initial size, e.g., based on height, let width auto-scale */
    height: 80vh;
    width: auto;
    /* Ensure no margins are offsetting it */
    margin: 0;
    /* Smooth out Panzoom transformations */
    transform-origin: center center;
    /* Ensure pointer events work for dragging */
    touch-action: none;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    z-index: 1060;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background: transparent;
    border: none;
}

/* Tabs Styling Override */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: #a0a0a0 !important;
    /* Dimmed for inactive */
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.nav-tabs .nav-link.active {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border: none;
    border-radius: 4px 4px 0 0;
}

/* About Slogan Overlay */
.about-image-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    /* Ensure overlay stays within image bounds */
}

.about-slogan-overlay {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    z-index: 10;
    width: 100%;
    text-align: center;
}

.about-text {
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Fade In Animation for Infinite Scroll */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-image {
    animation: fadeIn 0.8s ease-in-out forwards;
    opacity: 0;
    /* Start invisible to avoid flicker */
}

/* =========================================
   Mobile Responsive Styles (Max-width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. Global Layout & Container Safety (Rule 3) */
    body {
        /* overflow-x: hidden; */
        width: 100%;
        position: relative;
    }

    body {
        font-size: 15px;
        /* Slightly smaller base */
        padding-top: 60px;
    }

    /* Navbar Flex Container Redesign */
    .header-flex-container {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 5px !important;
    }

    .header-left {
        flex: 0 0 auto !important;
        /* Grow 0 */
        order: 1 !important;
        margin-right: 10px !important;
        /* Gap */
    }

    .header-center {
        flex: 1 1 auto !important;
        /* Grow 1, take space */
        order: 2 !important;
        width: auto !important;
        /* Not fixed */
        margin-top: 0 !important;
        display: flex;
        justify-content: center;
    }

    .header-right {
        flex: 0 0 auto !important;
        /* Grow 0 */
        order: 3 !important;
        margin-left: 10px !important;
        /* Gap */
    }

    /* Logo - Hide Text, Keep Icon */
    .brand-text {
        display: none !important;
    }

    .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-logo,
    .navbar-brand img {
        height: 30px !important;
        width: auto !important;
        max-width: 40px !important;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 5px !important;
        padding-right: 5px !important;
        overflow-x: hidden;
        /* Safety */
    }

    /* 2. Fluid Typography (Rule 1) */
    h1,
    .hero-title,
    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.2;
    }

    h2,
    .h2 {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
    }

    h3,
    .h3 {
        font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
    }

    p.lead,
    .about-text {
        font-size: clamp(1rem, 2vw, 1.15rem) !important;
        line-height: 1.5;
    }

    /* 3. Compact Spacing (Rule 2) */
    .py-5,
    .pt-5,
    .pb-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .my-5,
    .mt-5,
    .mb-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .g-5,
    .gx-5,
    .gy-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .p-5 {
        padding: 1.5rem !important;
    }

    /* 4. Navbar & Navigation */
    /* 4. Navbar & Navigation */
    .navbar {
        padding: 0.5rem 1rem;
        position: fixed;
        /* Ensures it's a positioning context */
        overflow: visible !important;
        /* FIX 1: Allow menu to overflow */
        height: 60px !important;
        /* Force explicit height */
        max-height: none !important;
        /* Disable any constraints */
    }

    .container-fluid,
    .header-flex-container,
    .header-right {
        overflow: visible !important;
        /* Allow children to escape */
        position: static !important;

        /* Glassmorphism Caption for Manage Works */
        /* Allow positioning context to be the navbar */
    }

    .navbar-brand img {
        height: 32px !important;
    }

    /* Remove outline/border from toggler */
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        /* Ensure border doesn't flicker either if any */
    }

    .navbar-search-form {
        width: 100% !important;
        max-width: none !important;
        margin: 0 10px !important;
    }

    .navbar-search-input {
        width: 100% !important;
        height: 36px !important;
        font-size: 14px !important;
        padding-left: 15px !important;
        padding-right: 35px !important;
        padding-right: 35px !important;
        /* Adjust for smaller icon space */
    }

    /* Mobile Search Placeholder Styling */
    .navbar-search-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 13px !important;
        opacity: 1 !important;
    }

    .navbar-search-input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 13px !important;
        opacity: 1 !important;
    }

    .navbar-search-input::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 13px !important;
        opacity: 1 !important;
    }

    .search-btn {
        right: 8px !important;
    }

    .navbar-search-input::placeholder {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        /* Ensure specific width isn't needed for ellipsis to work in flex child if min-width issue, but input defaults are usually ok */
    }

    .navbar-collapse {
        display: none;
        /* Hidden by default */
        position: absolute;
        top: 60px !important;
        /* Force explicit pixel value */
        bottom: auto !important;
        /* Prevent upward */
        right: 0;
        width: max-content;
        /* Shrink wrap to content */
        min-width: 120px;
        /* Safety net */
        background: #15192b;
        /* Card background color */
        backdrop-filter: none;
        /* Remove blur if using solid bg, or keep if transparent. User asked for opaque. */
        padding: 10px 15px;
        /* Compact padding */
        text-align: left;
        /* Ensure text alignment */
        border-radius: 0 0 0 10px;
        /* Rounded bottom-left only? or uniform. Let's do bottom-left/right or just box */
        border: 1px solid var(--border-color);
        border-top: none;
        margin-top: 0;
        z-index: 9999 !important;
        /* FIX 2: High Z-Index */
        box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
        transform: none !important;
        /* Reset any transforms */
    }

    .navbar-collapse.show-menu {
        display: block !important;
        /* FIX 3: Custom toggle class */
    }

    /* 5. Hero Section Adaptation */
    .hero-section {
        height: auto;
        min-height: 50vh;
        padding: 4rem 0 2rem;
        /* Adjusted for fixed nav */
    }

    .hero-content {
        position: relative;
        inset: auto;
        /* Reset absolute positioning features if needed */
        width: 100%;
        padding-left: 20px !important;
        /* Add left padding */
        padding-right: 15px;
        text-align: left !important;
        /* Align left */
        margin-top: 2rem;
    }

    /* 6. Grid & Gallery (Rule 4) */
    /* Force 2 Columns for Gallery Grid using CSS Grid override */
    #photo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        /* Prevent JS from checking improper height */
    }

    #photo-grid>* {
        position: static !important;
        /* Kill absolute positioning */
        transform: none !important;
        /* Ensure no off-screen transforms */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        /* Force visibility */
        visibility: visible !important;
        display: block !important;
    }

    /* Recent Works - likely better as 1 column due to details */
    .recent-work-card {
        margin-bottom: 20px;
        width: 100%;
        /* Force 1 column */
    }

    /* 7. Components & Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .card {
        margin-bottom: 1rem;
    }

    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
        font-size: 2rem;
    }

    /* About Slogan */
    .about-slogan-overlay {
        width: 95% !important;
        /* Ensure container fits */
        max-width: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0 !important;
    }

    .about-slogan-overlay h3 {
        font-size: clamp(14px, 4.0vw, 22px) !important;
        /* Fluid typography */
        white-space: nowrap !important;
        /* Force single line */
        padding: 0 5px !important;
        width: 100%;
        text-align: center;
        display: block;
    }
}

/* -----------------------------------------------------------
   8. Manage Works & Minimalist Buttons (Global)
----------------------------------------------------------- */
.btn-icon-minimal {
    background: transparent;
    border: none;
    padding: 10px;
    /* Touch friendly padding */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
}

.btn-icon-minimal:active {
    transform: scale(0.9);
    opacity: 0.7;
}

.btn-icon-minimal:hover {
    opacity: 0.8;
}

/* Ensure icons are large enough */
.btn-icon-minimal i {
    font-size: 1.2rem;
}

/* Manage Info Area */
.manage-info {
    flex: 1;
    min-width: 0;
    /* Enable truncation in flex item */
}

/* Manage Works Desktop Overlay */
.manage-card {
    position: relative;
    overflow: hidden;
    /* Clean rounding */
}

.manage-card .card-body {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border: none !important;
    padding: 20px 15px 15px 15px !important;
    /* Top padding for gradient fade */
    z-index: 10;
}

/* Ensure text is readable on overlay */
.manage-card .card-body small.text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* -----------------------------------------------------------
   9. Photo Details Page Redesign
----------------------------------------------------------- */

/* Pill Badges */
.badge-pill-soft {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 50px;
    /* Fully rounded */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    border: 1px solid transparent;
    /* Baseline */
}

.badge-outline-warning {
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
    background: rgba(255, 193, 7, 0.05);
}

.badge-outline-info {
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.3);
    background: rgba(13, 202, 240, 0.05);
}

.badge-outline-success {
    color: #198754;
    border-color: rgba(25, 135, 84, 0.3);
    background: rgba(25, 135, 84, 0.05);
}

/* Detail Headers */
.detail-section-title {
    font-size: 0.85rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* -----------------------------------------------------------
   10. Mobile Gallery Typography Refinement
----------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* Refine Gallery & Recent Works Text Overlay */
    .gallery-info,
    .recent-work-info {
        padding: 10px !important;
    }

    .gallery-info .card-title,
    .gallery-info h5,
    .recent-work-info .card-title,
    .recent-work-info h5 {
        font-size: 14px !important;
        line-height: 1.3 !important;

        /* Enable Multi-line with Ellipsis */
        white-space: normal !important;
        /* Allow wrapping */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        /* Max 2 lines */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        margin-bottom: 4px !important;
        /* Tighter spacing */
    }

    .gallery-info small,
    .recent-work-info small {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        display: block;
        /* Ensure it's on new line */
    }
}

display: block;
/* Ensure it's on new line */
}

/* -----------------------------------------------------------
   11. Viewer.js Integration (Overrides if needed)
----------------------------------------------------------- */
.viewer-backdrop {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* -----------------------------------------------------------
   12. Annotation Toggle Button
----------------------------------------------------------- */
.annotation-toggle-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20;
    /* Above overlay (10), below lightbox (10000) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.annotation-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: scale(1.05);
}

.annotation-toggle-btn.active {
    background: rgba(40, 167, 69, 0.2);
    /* Semi-transparent green */
    color: #28a745;
    /* Green icon */
    border: 1px solid rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

/* -----------------------------------------------------------
   13. Mobile Grid Redesign (Latest & Manage)
----------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* Tighter Grid Gap */
    .row.g-5 {
        --bs-gutter-x: 0.5rem !important;
        /* g-2 equivalent */
        --bs-gutter-y: 0.5rem !important;
    }

    /* Common Card Styles for Overlay */
    /* Target Recent Works, EXCLUDE Gallery Page (and now Manage Page) */
    .recent-work-card .d-block {
        position: relative !important;
        overflow: hidden !important;
        aspect-ratio: 4 / 3 !important;
        /* Force 4:3 Landscape */
        border-radius: 8px !important;
    }

    /* Image Wrapper fills card (Absolute only for Recent) */
    .recent-work-img-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    /* Images cover area */
    .recent-work-img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* No black bars */
        border-radius: 0 !important;
    }

    /* Info Overlay - Common (Recent uses .recent-work-info) */
    /* REMOVED .gallery-info and .manage-card .card-body to let them use Desktop styles */
    .recent-work-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%) !important;
        padding: 20px 8px 8px 8px !important;
        /* Top padding for gradient fade */
        z-index: 2 !important;
        border: none !important;
        border-radius: 0 0 8px 8px !important;
    }



    .btn-icon-minimal {
        padding: 5px !important;
    }

    .btn-icon-minimal i {
        font-size: 1rem !important;
    }
}

/* -----------------------------------------------------------
   14. Mobile Spacing Optimization
----------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* Navbar Tightening */
    .navbar {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .container-fluid.header-flex-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-search-form {
        margin: 0 5px !important;
    }

    .header-left {
        margin-right: 5px !important;
    }

    .header-right {
        margin-left: 5px !important;
    }

    /* -----------------------------------------------------------
       15. Manage Works Mobile Fixes (Critical Scroll & Layout)
       ----------------------------------------------------------- */

    /* Reset Global Scroll Containers to prevent trapping */
    html,
    body {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
    }

    /* Ensure Main Container flow - SMASH SCROLL TRAP */
    .container,
    .container-fluid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        padding-bottom: 60px !important;
        /* Space for bottom content */
    }

    /* 16. Mobile Home Button Refinement */
    .btn-outline-dark.btn-lg {
        padding: 6px 20px !important;
        font-size: 14px !important;
        width: auto !important;
        max-width: 60% !important;
        margin: 20px auto !important;
        border-width: 1px !important;
        display: block;
        /* Ensure centering works */
    }

    /* 17. Compact Mobile Manage Card Internals */
    .manage-card .card-body {
        padding: 8px !important;
    }

    .manage-info h6 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .manage-info small {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .manage-actions i {
        font-size: 14px !important;
    }

    .manage-actions {
        gap: 5px !important;
    }

    /* Fix image fill for manage cards */
    .manage-card .gallery-img-wrapper img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Fix About Us Image Color on Mobile */
    .about-image {
        filter: none !important;
        transition: none !important;
    }
}

/* Glassmorphism Caption for Manage Works (Global) */
.manage-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    /* No background box */
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    /* Ensure bottom corners match the card/image wrapper */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    /* Text Shadow for Float Effect */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Datui Fun Features */
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shake-animation {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.king-aura {
    border: 2px solid gold !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.king-aura:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
}

/* Planner Page Grid Layout */
.planner-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
    /* Equal height for both cards */
}

.planner-grid-container>.card {
    display: flex;
    flex-direction: column;
}

.planner-grid-container>.card>.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .planner-grid-container {
        grid-template-columns: 1fr 1fr;
        /* 1:1 Ratio */
    }
}

/* Preset Button Highlight Styles */
.location-btn.active,
.telescope-btn.active,
.camera-btn.active {
    background: rgba(13, 202, 240, 0.25) !important;
    border-color: #0dcaf0 !important;
    color: #0dcaf0 !important;
    opacity: 1 !important;
}

/* Lightbox Styles */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: grab;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    /* Smooth pan/zoom */
}

.lightbox-image:active {
    cursor: grabbing;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transition: background 0.3s;

}

/* Flying Emoji Effect */
.flying-emoji {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    width: auto;
    height: 50px;
    animation: flyRotateFade 3s ease-out forwards;
    /* Slower 3s */
}

@keyframes flyRotateFade {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
        /* Initial small pop */
        transform: translate(-50%, -60%) rotate(10deg) scale(1.2);
    }

    100% {
        /* Random destination */
        transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) rotate(var(--fly-r)) scale(0.8);
        opacity: 0;
    }
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile adjustments for Datui card footer */
@media (max-width: 767px) {

    /* Shrink mock emoji on mobile */
    .mock-emoji {
        height: 22px !important;
    }

    /* Shrink mock button text and padding */
    .mock-form .btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Prevent date wrapping */
    .card-footer span {
        white-space: nowrap;
        font-size: 0.7rem;
    }

    /* Constrain badge size */
    .mock-count {
        font-size: 0.65rem !important;
        padding: 0.2em 0.5em !important;
    }

    /* Shrink flying emoji animation on mobile */
    .flying-emoji {
        height: 28px !important;
    }
}