@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Suez+One&display=swap');

/*===========================
   Global Theme Variables
===========================*/

/* Default Light Theme */
:root {
    /* Header, Main, Footer palette light mode */
    --color-header-bg: #7d8a01;
    --color-header-link: #e0dd82;
    --color-header-link-light: #FFF;
    --color-submenubg: rgba(220,220,220,0.6);
    --color-main-bg: #F1F1F1;
    --color-footerbg: #7d8a01;
    --body-bg: #f1f1f1;
    --theme-menu-icons: #e0dd82;
    /* Box elements palette light mode */
    --color-outer: #F1F1F1;
    --color-inner: #FEFEFE;
    --color-middle: #DCDCDC;
    --color-text: #21211e;
    --border-color: #DEDEDE;
    --border-highlight: #7d8a01;
    /* Color palette light mode */
    --color-primary: #7d8a01;
    --color-primary-light: #e0dd82;
    --color-secondary: #e0dd82;
    --color-grey: #494949;
    --color-grey-light: #DDD;
    --color-highlight: #ff4c68;
    --color-comment-text: rgba(255,255,255,0.3);
    --nav-ttl: #F1F1F1;
    --recipe-box: #F3F3F3;
    /* Lightbox light mode */
    --color-lightbox-bg-light: rgba(125,138,1,0.7);
    --input-button: linear-gradient(180deg, #F1F1F1, #DFDFDF, #DEDEDE);
    --input-button-hover: linear-gradient(180deg, #DFDFDF, #DFDFDF, #CECECE);
    --header-h: 10px;
    /*main menu light mode */
    --menu-bg: rgba(5,5,0,0.9);
    /*user page cover overlay light mode */
    --cover-overlay: rgba(0,0,0,0.7);
    --leaf-mask: url("/images/user-leaf.svg");
    /* Grid */
    --gap: clamp(8px, 2vw, 12px); /* one knob to tune spacing  */
    --col-border: var(--border-color,#3332); /* fallback */
    --radius-lg: 42px;
    --app-top-clearance: 110px;
}

/* Color palette dark mode */
[data-theme="dark"] {
    /* Header, Main, Footer palette dark mode */
    --color-header-bg: #1b1b1b;
    --color-header-link: #999;
    --color-header-link-light: #7d8a01;
    --color-submenubg: rgba(0,0,0,0.6);
    --body-bg: #080b00;
    --color-main-bg: #080b00;
    --color-footer: #7d8a01;
    --theme-menu-icons: #e0dd82;
    --nav-ttl: #EEE;
    /* Box elements palette dark mode */
    --color-outer: #26272c;
    --color-inner: #1e1e1e;
    --color-middle: #3d3d3d;
    --color-text: #CCC;
    --border-color: #2d2d2d;
    --border-highlight: #e0dd82;
    /* Color palette dark mode */
    --color-primary: #7d8a01;
    --color-primary-light: #e0dd82;
    --color-secondary: #e0dd82;
    --color-highlight: #ff4c68;
    --color-grey-light: #DDD;
    --color-grey: #999;
    --color-comment-text: rgba(0,0,0,0.3);
    --recipe-box: #000;
    /*user page cover overlay dark mode */
    --cover-overlay: rgba(0,0,0,0.7);
    /* Lightbox dark mode */
    --color-lightbox-bg-light: rgba(125,138,1,0.7);
    --input-button: linear-gradient(180deg, #333, #111, #333);
    --input-button-hover: linear-gradient(180deg, #DFDFDF, #DFDFDF, #CECECE);
    /*main menu light mode */
    --menu-bg: rgba(5,5,0,0.9);
}


/*------------------------------------------------*/
/* html block STYLES */
/*------------------------------------------------*/

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-main-bg); /* fallback */
    background-attachment: fixed;
    background-size: cover;
    transition: background 0.6s ease;
}

html {
    font-size: 14px;
}

html, body {
    overscroll-behavior-y: none;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}




.no-scroll {
    overflow: hidden;
}

.lightbox-active {
    overflow: hidden;
}

a, a:link, a:visited, a:active {
    color: var(--color-grey);
    text-decoration: none;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    font-weight: 600;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    font-weight: 600;
}


h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    margin: 0 0 10px 0;
}

h1 {
    font-size:2rem;
    color: var(--color-text);
    font-family: 'Suez One';
    font-weight: 600;
}

h2 {
    font-size: 30px;
    color: var(--color-grey);
    font-weight: 400;
    font-family: "Gabarito", sans-serif;
}

h3 {
    font-size: 22px;
    color: var(--color-primary);
    font-weight: 400;
    font-family: "Gabarito", sans-serif;
}

h4 {
    font-size: 18px;
    color: var(--color-grey);
    font-family: "Gabarito", sans-serif;
}

h5 {
    font-size: 14px;
    color: var(--color-text);
}

h6 {
    font-size: 13px;
    color: var(--color-text);
}

p {
    margin: 0 0 25px 0;
    overflow-wrap: break-word; /* modern */
    word-wrap: break-word; /* legacy */
    word-break: break-word; /* safety net */
}

hr {
    clear: both;
    height: 0;
    border: solid #c0c0c0;
    border-width: 1px 0 0;
    margin: 20px 0 20px 0;
}

div, p {
    line-height: 24px;
    font-size: 17px;
    color: var(--color-text);
    font-family: "Gabarito", sans-serif;
    overflow-wrap: break-word; /* modern */
    word-wrap: break-word; /* legacy */
    word-break: break-word; /* safety net */
}

.table {
    table-layout: auto; /* Allow dynamic resizing */
}

.table td {
    vertical-align: top;
    word-break: break-word;
}

td {
    color: #222;
    padding: 5px;
    line-height: 18px;
    font-size: 16px;
    font-family: "Gabarito", sans-serif;
}

ul li {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 8px;
}

ol li {
    list-style-type: decimal;
    margin-bottom: 8px;
    font-size: 16px;
}

ol ol {
    margin-top: 8px;
    margin-left: 30px;
}

ol ol li {
    list-style-type: lower-roman;
}

ol ol ol li {
    list-style-type: lower-alpha;
}

ol ul li {
    list-style-type: lower-roman;
}

body {
    background: var(--body-bg);
    min-height: 100vh; /* 2. never shorter than the viewport   */
    display: flex;
    flex-direction: column; /* 3. so footer can “stick” if desired  */
}

/* main → grow; footer → stay at bottom even if little content */
main {
    flex: 1 0 auto; /* fill remaining vertical space        */
}


/* mobile / tablet first */
.feed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    z-index: 1;
    margin-top: var(--app-top-clearance);
}

/* desktop 3-column layout only at xl+ */
@media (min-width: 1200px) {
    .feed-grid {
        grid-template-columns: 1fr minmax(0, 720px) 1fr;
        margin-top: var(--app-top-clearance);
    }

    .feed-grid > :nth-child(1) {
        border-right: none;
    }

    .feed-grid > :nth-child(2) {
        border-left: none;
        border-right: none;
    }

    .feed-grid > :nth-child(3) {
        border-left: none;
    }
}

/* every direct child column */
.feed-grid > * {
    padding: var(--gap);
}

@media (max-width: 1199.98px) {
    .feed-grid > footer,
    .feed-grid > .footer {
        order: 99;
    }
}

/* ===========================
   Feed Skeleton Loader
=========================== */


.skeleton-card {
    background: var(--color-main-bg);
    padding: 1.7rem;
    box-shadow: 0 0 19px 1px rgba(125,138,1,0.2),inset 0 0 0 1px var(--color-middle);
    transition: opacity 0.5s ease-in-out;
    border-radius: 7px;
    transition: all 0.5s ease-in-out;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    opacity: .5;
    width: 100%;
}

.skeleton-card:hover {
    background: var(--color-inner);
    transition: all 0.5s ease-in-out;
}

/* shimmer animation */


@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* header */

.skeleton-header .skeleton-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient( 90deg, var(--color-inner) 25%, var(--color-middle) 50%, var(--color-inner) 75% );
    background-size: 300% 100%;
    animation: skeleton-loading 2.2s linear infinite;
    margin-bottom:7px;
}



/* media block */

.skeleton-media {
    height: 260px;
    border-radius: 12px;
    background: linear-gradient( 90deg, var(--color-inner) 25%, var(--color-middle) 50%, var(--color-inner) 75% );
    background-size: 300% 100%;
    animation: skeleton-loading 2.2s linear infinite;
}

/* footer */

.skeleton-footer {
    display: flex;
    gap: 16px;
    margin-top: 27px;
}

.skeleton-card .skeleton-btn {
    background: linear-gradient( 90deg, var(--color-inner) 25%, var(--color-middle) 50%, var(--color-inner) 75% );
    background-size: 300% 100%;
    color: var(--color-grey-light);
    display: inline-block;
    padding: 3px;
    font-size: 18px;
    border-radius: 42px;
    border: 1px solid var(--border-color);
    width: 50%;
    cursor: pointer;
    height: 62px;
    animation: skeleton-loading 2.2s linear infinite;
}

.skeleton-btn.pass {
    width: 50%;
}


/* ===========================
   Search Skeleton Layout
=========================== */

.search-skeleton-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 1.5rem;
}

/* left image */

.search-skeleton-media {
    width: 140px;
    height: 180px;
    flex-shrink: 0;
}

/* right column */

.search-skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* title line */

.search-skeleton-title {
    height: 22px;
    width: 45%;
    border-radius: 8px;
}

/* description line */

.search-skeleton-text {
    height: 14px;
    width: 80%;
    border-radius: 8px;
}



/* Main Identity Page Styles */
.header .tooltip-container img {
    border-radius: 50%;
    background: radial-gradient(...);
}

/* Main Layout Page Styles */

.header {
    background: var(--color-header-bg) !important;
    color: var(--color-header-link);
    font-size: 1.8rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
}

/* File: site.css */

.header-auth-links {
    font-size: 0.9rem;
}

.header-auth-link,
.header-auth-link:link,
.header-auth-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9rem !important;
    line-height: 1;
    color: var(--color-header-link);
    text-decoration: none;
}

.header-auth-link i {
    font-size: 0.95rem !important;
    line-height: 1;
}

.header-auth-link:hover,
.header-auth-link:active {
    color: var(--color-header-link-light);
    text-decoration: none;
}


.header a:link, .header a:visited {
    color: var(--color-header-link);
    font-size: 1.8rem;
}

.header a:hover, .header a:active {
    color: var(--color-header-link-light);
    font-size: 1.8rem;
}


.submenu button {
    color: var(--color-text);
    background: none;
    font-size: 24px;
}




/* submenu ---------------------------------------------------- */

/* ─── floating submenu bar ─────────────────────────────────── */
.submenu {
    position: fixed; /* ⬅ sits on top of the grid  */
    left: 0;
    right: 0;
    top: 80px; /* right under the header     */
    z-index: 950;
    background: var(--color-submenubg);
    backdrop-filter: blur(4px); /* “frosted-glass” look       */
    border-bottom: 1px solid var(--border-color);
    transition: transform .25s ease; /* slide up / down            */
    backdrop-filter: blur(4px); /* stronger or weaker blur          */
    transition: .2s ease; /* faster / slower animation        */
    padding: 0;
}

/* slide completely out of view */
.submenu--hide {
    transform: translateY(-110%);
}

.feed-refresh-btn {
    display: flex;
    align-items: center;
    font-size: 13px;
    opacity: 0.55;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feed-refresh-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.feed-refresh-btn i {
    transition: transform 0.3s ease;
}

.feed-refresh-btn.loading i {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.menu button:hover {
    background: none;
}


.mainwrap {
    padding-top: var(--header-h);
}


.home-welcome h1 {
    color:var(--color-text);
}

.home-welcome p {
    margin-bottom: 0;
}

.home-welcome img {
    width: 55%;
    height: auto;
}

.home-login {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 1rem 0;
    color: var(--color-primary);
}

/* Button base */
.home-login a {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1; /* 🔑 kill baseline shifts */
    padding: 12px 42px;
    border-radius: 42px;
    border: 1px solid var(--border-highlight); /* same width always */
    background: transparent;
    color: var(--color-primary);
    text-decoration: none;
    box-sizing: border-box; /* 🔑 lock dimensions */
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;

}

/* Hover / active */
.home-login a:hover,
.home-login a:active {
    background: var(--color-highlight);
    color: var(--color-grey-light);
    border-color: var(--border-color);
}


/* Sidebar base */
.sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    min-width: 0;

}

/* Sticky sidebars only on desktop */
@media (min-width: 1200px) {
    .sidebar {
        position: sticky;
        top: calc(var(--app-top-clearance) + var(--gap));
        max-height: calc(100vh - var(--app-top-clearance) - 80px);
        overflow-y: auto;
        padding-bottom: 60px;
    }
}

.tag-menu {
    position: fixed !important; /* leaves the sidebar altogether   */
    top: auto; /* Popper.js still sets left/top   */
    z-index: 1100; /* above almost everything else    */
}

/* FILE: site.css or BrowseContent.css */
@media (max-width:  991.98px) {
    .sidebar {
        position: initial; /* sticks *inside its column* */
        overflow: visible !important; /* let the menu spill over  */
        z-index: 1100; /* just above Bootstrap dropdowns (1000) */
    }
}


/* Optional: wider off-canvas on tablet/mobile */
@media (max-width: 1199.98px) {
    #sidebarCanvas {
        width: 80%;
        max-width: 320px;
        border-right: 1px solid var(--border-color);
        z-index: 1100;
    }
}

.offcanvas {
    background-color: rgb(255,255,255,0.8);
    border-left: 1px solid var(--border-color);
    color: var(--color-text);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .offcanvas {
    background-color: rgba(20, 20, 20, 0.95); /* Dark mode background */
    color: var(--color-text-dark, #fff); /* Optional: text color override */
    border-color: var(--border-color-dark, #333);
}

/* LIGHT THEME  ─ icon stays dark */
.offcanvas-header button {
    position: absolute;
    top: 7px;
    right: -15px;
    background: #e0dd82;
    font-size: 20px;
    text-align: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 10px 7px 7px 8px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #111;
    font-family: 'Suez One';
    z-index: 10;
}

/* DARK THEME  ─ icon flips to white */
[data-theme="dark"] .offcanvas-header button {
    position: absolute;
    top: 7px;
    right: -15px;
    background: #e0dd82;
    font-size: 20px;
    text-align: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 10px 7px 7px 8px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #111;
    font-family: 'Suez One';
    z-index: 10;
}

#sidebarCanvas {
    /*  color variables that already match your sidebar  */
    --bs-offcanvas-bg: var(--color-outer); /* panel background   */
    --bs-offcanvas-color: var(--color-text); /* text / icons       */
}


/* Optional: wider off-canvas on tablet/mobile */
@media (max-width: 1199.98px) {
    #sidebarCanvas {
        width: 80%;
        max-width: 320px;
        border-right: 1px solid var(--border-color);
        z-index: 1100;
    }
}




/* ============================
   Ultra-thin sidebar scrollbars
============================ */

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(140,140,140,.35) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(140,140,140,.35);
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(140,140,140,.6);
}

/* ==========================================================
   TABLET / MOBILE LAYOUT – hide column, show hamburger, style off canvas
   ========================================================== */

@media (max-width: 1199.98px) {
    #sidebarCanvas {
        --bs-offcanvas-bg: var(--color-outer);
        --bs-offcanvas-color: var(--color-text);
    }

    .sidebar-column {
        display: none !important;
    }

    .sidebar-hamburger {
        border: 1px solid var(--border-color);
        background: var(--color-inner);
        padding: .1rem 1.25rem;
        border-radius: 8px;
        font-size: 1.6rem;
        color: var(--color-text);
    }

    .sidebar-hamburger:hover,
    .sidebar-hamburger:focus {
        background: var(--color-primary);
        color: #fff;
    }

    #sidebarCanvas .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-inline: 0;
    }
}


.settingslink {
    width: 100%;
}

.settingslink button {
    background: none;
    color: var(--color-text);
}


/* --------------------------------------------------
   Home Featured component
-------------------------------------------------- */

.featuredttl h5 {color:var(--color-text);font-size:.9rem;text-align:left;margin:12px 0 12px 0;}

.featured-wrapper {
    overflow: hidden; /* clip translateX overflow   */
    max-width: 100%; /* never exceed column width  */
    border-radius: var(--radius-lg);
}
/* --- featured stories --- */

/* keep anything inside the track from enlarging the grid column */
.stories-swiper {
    overflow: hidden; /* hides the -6px arrows & scaling */
    padding: 8px;
    position: relative;
}

/* keep the track the same width as its column even when scaled */
.stories-swiper .swiper-slide {
    width: auto !important;
}

.story-card {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    cursor: pointer;
}

.story-overlay .author-top {
font-size:.75rem;
font-weight:400;
}

.story-overlay .author-top a:link, .story-overlay .author-top a:visited {
    top: 0;
    left: 28px;
    position: absolute;
    color: var(--color-text);
    text-shadow: 0 0 1px #000,0 0 3px #000,0 0 1px #000;
}

.story-overlay .author-top a:hover, .story-overlay .author-top a:active {
    top: 0;
    left: 28px;
    position: absolute;
    color: var(--color-primary-light);
    text-shadow: 0 0 1px #000,0 0 3px #000,0 0 1px #000;
}


.story-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 42.0px;
    box-shadow: 0 0 19px 1px rgba(125,138,1,0.2),inset 0 0 0 2px var(--color-middle),inset 0 0 0 1px var(--color-middle);
}

.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(200,255,0,.2) 20%,rgba(0,0,0,.4) 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .5rem;
    border-radius: 42.0px;
    color: var(--color-text);
}

.story-overlay .pill {
    align-self: flex-start;
    font-size: .65rem;
    padding: .1rem .4rem;
    border-radius: 9999px;
    background: rgba(255,255,255,.25);
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}



.story-overlay .rating i {
    font-size: .7rem;
    margin-right: 1px;
}



/* --- new bottom caption bar --- */
.story-overlay .meta {
    /* stick to the bottom & inherit radius */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;
    /* dark translucent backdrop */
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(1px); /* subtle frosting */
    /* layout */
    padding: .4rem .6rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem; /* space between rating/tags/title */
}

/* let the title sit flush left & never overflow */
.story-overlay .card-title {
    margin: 0 0 .5rem .5rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 300;
    display: -webkit-box;
    font-size: .95rem;
    line-height: 1;
    color: var(--color-grey-light); /* brighter on dark bg */
    text-shadow: -1 1px 2px #000;
}

/* optional: shrink pills & stars inside the bar */
.story-overlay .pill {
    font-size: .6rem;
    background: rgba(255,255,255,.2);
}

.story-overlay .rating i {
    font-size: .65rem;
    color: #ffce3d;
}


/* ----------- slider arrows stay centred --------- */
.stories-swiper .swiper-button-prev,
.stories-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #fff;
    filter: drop-shadow(0 0 4px #000);
    z-index: 10;
}

.stories-swiper .swiper-button-prev {
    left: 12px;
}

.stories-swiper .swiper-button-next {
    right: 12px;
}



@media (min-width: 1200px) {
    .stories-swiper .swiper-slide {
        width: 20% !important; /* 5 across */
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .stories-swiper .swiper-slide {
        width: 25% !important; /* 4 across */
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .stories-swiper .swiper-slide {
        width: 25% !important; /* 3 across */
    }
}

@media (max-width: 575px) {
    .stories-swiper .swiper-slide {
        width: 33% !important; /* 2 across */
    }

    .stories-swiper {
        padding-inline: 4px;
    }
}

.story-card:hover {
    transform: scale(1.01);
    transition: transform .2s;
}


.stories-swiper .swiper-button-disabled {
    opacity: 1; /* Swiper sets 0.35 */
    pointer-events: auto; /* Swiper sets none  */
    cursor: pointer;
}



/* tiny badge */
.story-overlay .badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    z-index: 3;
}

/* author strip */
.story-overlay .author {
    gap: .35rem;
    font-size: 4rem;
    top: 10px;
    left: 100px;
}


.story-overlay .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;

    top: -5px;
    left: -5px;
    position: absolute;
}






.notificationuserimg {
    width: 42px;
    display: block;
}

.notifcationusername {
    text-align: left;
    font-size: 1.2rem;
}

.notifcationblock a:link, .notifcationblock a:visited {
    font-size: 1.2rem;
    -webkit-transition: all ease .8s;
    transition: all ease .8s;
    color: var(--color-primary);
}

.notifcationblock a:hover, .notifcationblock a:active {
    font-size: 1.2rem;
    -webkit-transition: all ease .8s;
    transition: all ease .8s;
    color: var(--color-primary-light);
}

.notifcationblock p {
    font-size: 1rem;
    text-align: left !important;
    color: var(--color-grey) !important;
    border-left: 1px solid var(--border-color);
    padding-left: 10px;
}

.notifcationblock small {
    font-size: .7rem;
    text-align: left !important;
    color: var(--color-grey) !important;
    padding-left: 10px;
}

.notification-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

#emojiBtn .bi {
    pointer-events: none;
}
/* ───────────  notification row  ─────────── */
.avatar-col {
    flex: 0 0 48px;
}
/* never grow / shrink   */
.notification-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.notifcationblock {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
}

.notificationdate {
    font-size: .6rem;
    font-style: italic;
}

.ghost-btn {
    flex: 0 0 auto;
}
/* fixed, right-aligned  */


.tooltip-container {
    position: relative;
    display: inline-block; /* Keep container only as large as the image */
    background: #e0dd82;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Tooltip styles */
.tooltip-bubble {
    position: absolute;
    bottom: 50%; /* Position above the container (at the top of image) */
    left: 95%;
    transform: translateX(-5%); /* Center horizontally relative to the image */
    background-color: #333; /* Dark background for contrast (customize as needed) */
    color: #fff; /* White text for readability on dark background */
    padding: 4px 3px;
    border-radius: 6px; /* Rounded corners for bubble look */
    font-size: 14px;
    font-family: Arial, sans-serif; /* Clean, readable font */
    white-space: nowrap; /* Keep text on one line (remove if you want text to wrap) */
    z-index: 1000; /* Ensure the tooltip appears above other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Tooltip arrow using a pseudo-element */
.tooltip-bubble::after {
    content: "";
    position: absolute;
    top: 100%; /* Position at the bottom of the tooltip  */
    left: 10%;
    transform: translateX(-90%);
    border-width: 6px;
    border-style: solid;
    /* The top border is colored (matches tooltip background), other borders are transparent */
    border-color: #333 transparent transparent transparent;
}

/* Show the tooltip bubble on hover */
.tooltip-container:hover .tooltip-bubble {
    opacity: 1;
    visibility: visible;
}

.logo-link:hover .tooltip-bubble,
.tooltip-bubble.show {
    opacity: 1;
}

/* When hidden, simply set display to none */
.hidden {
    display: none;
}


/*------------------------------------------------*/
/* Content Tagging Input STYLES */
/*------------------------------------------------*/
.tag-input-container {
    position: relative;
}

/* Tag suggestions dropdown styling */
.tag-suggestions {
    top: 100%;
    left: 0;
    z-index: 10;
    max-height: 150px; /* Limit height; add scroll if needed */
    overflow-y: auto;
    background-color: var(--color-inner);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Style for each suggestion */
.tag-suggestions li {
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease;
    color: var(--color-text);
    background: var(--color-outer);
    border: none;
    margin: 0;
}

/* Hover state for suggestions */
.tag-suggestions li:hover {
    background-color: var(--color-outer);
    color: var(--color-text);
    border: none;
}


/* Custom chip styling using flexbox for alignment */
.tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem; /* Space between text and close button */
    background-color: var(--color-middle) !important;
    color: var(--color-grey) !important;
    border-radius: 16px;
    font-size: 0.875rem;
    padding: 0.3rem 1em;
    margin: 0.25rem;
    font-weight: 300;
}

/* Dark mode override (if you want different values in dark mode, update here) */
[data-theme="dark"] .tag-chip {
    background-color: var(--color-text); /* Use dark-mode variable if different */
    color: var(--color-grey-light);
}

/* Style the close button inside the chip */
.tag-chip .btn-close {
    /* You can adjust this background-color for dark/light if needed */
    background-color: transparent;
    border: none;
    color: var(--color-text);
    padding: 0;
    /* Use flex to center the icon inside the button */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* logo Icon STYLES */

.logo img {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.main {
    background: var(--color-main-bg);
}

/*=========================================
   RECIPE PAGE — CLEAN OVERLAP SYSTEM
=========================================*/

.recipe-layout {
    max-width: 820px;
    margin: 0 auto 4rem auto;
    position: relative;
}

/* ========================================
   HERO CARD (Natural position)
======================================== */

.recipe-hero-card {
    position: relative;
    z-index: 3;
}

.recipe-hero-card .universal-card,
.recipe-hero-card .postcard {
    width: 90%;
    margin: 0 auto;
}


/* Constrain UniversalCard nicely */
.recipe-hero-card .universal-card,
.recipe-hero-card .postcard {
    width: 90%;
    margin: 0 auto;
}

/* ========================================
   DETAILS PANEL
======================================== */

.recipe-details-panel {
    background: var(--recipe-box);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    /* THIS is the overlap */
    margin-top: -120px;
    /* THIS buffers text below the card */
    padding: 140px 3rem 3rem 3rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    position: relative;
    z-index: 1;
}

.details-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Content styling */
.recipe-details-panel p,
.recipe-details-panel li {
    color: var(--color-text);
    font-size: 1.05rem;
}

/* Keep list spacing clean */
.recipe-details-panel ul {
    margin: 0 0 2.5rem 4%;
    padding: 0;
}

/* Write Review Button */
.recipe-details-panel button {
    border-radius: 42px;
    background: var(--color-main-bg);
    color: var(--color-text);
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    transition: all .2s ease;
}

.recipe-details-panel button:hover {
    background: var(--color-middle);
}

/* Directions content */
.recipe-details-panel p,
.recipe-details-panel li {
    color: var(--color-text);
    font-size: 1.05rem;
}

.recipe-details-panel ul {
    margin: 0 0 60px 4.2%;
    padding: 0;
}

/* ========================================
   HERO BACKGROUND (If Used)
======================================== */
.recipe-hero {
    position: relative;
    padding: 3rem 1rem;
    color: var(--color-text);
    text-align: center;
    overflow: hidden;
}

.recipe-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 0;
}

.recipe-hero > * {
    position: relative;
    z-index: 1;
}

.recipe-hero img {
    max-height: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    object-fit: cover;
}

/* ========================================
   META ROW
======================================== */
.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}


/* ========================================
   STABILITY FIX FOR ACCORDION
======================================== */

/* Prevent layout shock when ingredients expand */
.ing-collapse summary {
    list-style: none;
    cursor: pointer;
}

.ing-collapse ul {
    transition: none;
}

/*===========================
   Recipe Creation Image PReview
===========================*/
.image-preview-wrapper {
    position: relative;
    text-align: center;
    margin-top: 1rem;
    max-width: 100%;
}

.preview-image {
    max-width: 100%;
    max-height: 400px; /* Adjust this value as needed */
    object-fit: contain;
}

.reset-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    padding: 0;
    /* Remove extra margins if any */
}



/*===========================
   Base Form Field Styles (Light Mode)
===========================*/

.filesubmitbtn {
    background: var(--color-inner);
}

/* Base styles for all form controls */

input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--color-inner);
    color: var(--color-text);
    font-family: "Gabarito", sans-serif;
    font-size: 1.25rem;
    /* Remove any transitions to prevent bouncing */
    transition: none;
}

/* Override hover and focus so nothing changes */
input:hover,
input:focus,
textarea:hover,
textarea:focus,
input[type="file"]:hover,
input[type="file"]:focus {
    background-color: var(--input-button);
    color: var(--color-text);
    box-shadow: none;
    outline: none;
}

/* Ensure the native arrow for select elements remains visible */
select.form-select {
    /* Remove native appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-grey);
    /* Set a custom caret icon (single caret) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' transform='rotate(180 2 2.5)' d='M2 0L0 2h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.65em auto;
    /* Add padding so the text doesn't overlap the icon */
    padding-right: 2.5rem;
    /* Add some right padding so the text doesn’t cover the icon */
    padding-right: 2.5rem;
}

select {
    color: var(--color-grey);
}

select option {
    color: inherit;
    background: inherit;
}

select option:hover, select option:focus, select option:checked {
    color: inherit;
    background: inherit;
    outline: none;
}

.form-select:focus-visible {
    background: var(--color-primary); /* olive */
}

[data-theme='dark'] .form-select:focus-visible {
    background: var(--color-primary); /* olive */
}


/* Remove blue outline and box-shadow on buttons */
button:focus,
.btn:focus,
button:active,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
}
/* Optionally, override input and select focus styles */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}
/*===========================
Dark Mode Overrides
===========================*/

[data-theme="dark"] input, [data-theme="dark"] input[type="submit"], [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] input[type="file"] {
    background-color: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}


/* And override hover/focus in dark mode similarly */
[data-theme="dark"] input:hover,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:hover,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:hover,
[data-theme="dark"] select:focus,
[data-theme="dark"] input[type="file"]:hover,
[data-theme="dark"] input[type="file"]:focus {
    border: 1px solid var(--border-color);
    background-color: var(--color-inner);
    color: var(--color-text);
    box-shadow: none;
    outline: none;
}

/* Optional: Adjust placeholder color */
::placeholder {
    color: var(--color-grey);
}

/*===========================
   File Input Customization
===========================*/

/* Some browsers style file inputs differently.
/* Override Bootstrap file input styling */

input[type="file"].form-control {
    background-color: var(--input-button) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Dark mode override */
[data-theme="dark"] input[type="file"].form-control {
    background-color: var(--color-inner) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem !important;
    box-shadow: none !important;
}


/*-------------------------------
   Buttons (Bootstrap-style)
-------------------------------*/
button,
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-family: "Gabarito", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button.primary,
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-header-link-light);
}

button.primary:hover,
.btn-primary:hover {
    background-color: var(--color-primary);
}


/*-------------------------------
  Adblocks
-------------------------------*/

.ad-placeholder {
    min-height: 60px;
    background: repeating-linear-gradient(45deg,#f6f6f6,#f6f6f6 10px,#efefef 10px,#efefef 20px);
}

.topadblock {
    padding-bottom: 1rem;
}

.bottomadblock, .leftadblock, .rightadblock {
    padding-top: 1rem;
}

/*-------------------------------
   Utility Styles: Remove focus outline
-------------------------------*/

button:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}


img {
    max-width: 100%;
    height: auto;
}


.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*Utility classes */

.imglg {
    transition: all .2s ease-in-out;
}

.imglg:hover {
    transform: scale(1.02);
}


/*------------------------------------------------*/
/* Notification Lightbox STYLES */
/*------------------------------------------------*/


.notification-item {
    background-color: var(--color-surface);
    color: var(--notification-text);
    padding: 0.75rem 1rem;
    border-bottom: var(--border-color);
}

.notification-item a {
    color: var(--notification-link);
    text-decoration: none;
}

.notification-item a:hover {
    text-decoration: underline;
}

/* Profile image styling */
.notification-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

/* Date/time styling */
.notification-item small {
    font-size: 0.8rem;
    color: var(--notification-text);
    margin-top: 0.25rem;
    display: block;
}


.inline-toast > .toast {
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: .0
    }

    to {
        opacity: 1
    }
}


/*------------------------------------------------*/
/* Munchies List Lightbox STYLES                  */
/*------------------------------------------------*/

.lightboxouter.status-message {
    max-width: 280px;
    border-radius: 12px;
    background: rgba(0,0,0,.8);
    color: #fff;
}

.munchieslist img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 42.0px;
    height: 42.0px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0;
}

/* ─────────  Recipe Page ───────── */


/* ─────────  Munchies light-box polish  ───────── */
.recipe-group {
    border: 1px solid var(--border-color);
    border-radius: 22px; /* one single rounded card */
    overflow: hidden; /* cuts off inner radius */
}

.recipe-header {
    background: var(--color-inner);
    padding: .9rem 1.1rem;
    cursor: pointer;
    user-select: none;
}

.recipe-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.btn-remove-group i {
    font-size: 1.25rem;
}

.ingredient-list { /* UL inside the collapse  */
    padding: .6rem 1.1rem;
}

.ingredient-list li {
    border-bottom: 1px solid var(--border-color);
    padding: .35rem 0;
}

/* remove bottom border on last li */
.ingredient-list li:last-child {
    border-bottom: none;
}

.ingredient-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}



.browsecontent {
    margin-top: .3rem;
}

.topcontent {
    margin-top: .3rem;
}

.topcontent {
    margin-top: .3rem;
}
/* ─── desktop header row ─── */

.browse-header {
    color: var(--color-text);
    font-size: 1.1rem;
    border-bottom: 2px solid var(--border-color);
    padding: .6rem 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    user-select: none;
    font-weight: 400
}

.browse-header i {
    color: var(--color-text);
    font-size: 1.4rem;
    padding-right: 3px;
    cursor: pointer;
    user-select: none;
}





/* collapse helper – no Bootstrap JS needed */

.c-collapse {
    overflow: hidden; /* hide content while sliding */
    max-height: 0; /* collapsed */
    opacity: 0;
    transition: max-height .35s ease, /* slide */
    opacity .25s ease-out; /* fade  */
}

.c-collapse.show {
    /* big enough for the tallest panel on your page.
       (If it’s ever too small you’ll just see a clipped panel,
       so err on the generous side.)                                */
    max-height: 600px;
    opacity: 1;
}

/* Smooth accordion for ingredient list */
.collapse {
    transition: max-height .35s ease, opacity .35s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.collapse.show {
    max-height: 600px; /* tall enough for any normal list */
    opacity: 1;
}


/* ============ Animated “Add to Munchies” pill ============ */

.munchieslistbtn {
    --pill-h: 42px; /* height & roundness */
    --pill-pad: 14px; /* icon padding       */
    position: absolute;
    top: 20px;
    right: 20px;
    height: var(--pill-h);
    padding: 0 var(--pill-pad); /* icon is centered   */
    border-radius: var(--pill-h); /* perfect circle     */
    background: var(--color-highlight);
    color: var(--color-grey-light);
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: width .25s ease, background .25s ease;
    overflow: hidden; /* hide sliding text  */
    white-space: nowrap;
}

/* start small (icon only) */
.munchieslistbtn {
    width: var(--pill-h);
    color: var(--color-text);
}

/* text hidden initially */
.munchieslistbtn .btn-label {
    opacity: 0; /* fully transparent  */
    transform: translateX(-10px); /* slide left a bit   */
    transition: opacity .2s ease .15s, transform .25s ease;
    pointer-events: none;
    font-size: .9rem;
    color: var(--color-highlight);
}

/* ---- Hover / focus states ---- */
.munchieslistbtn:hover,
.munchieslistbtn:focus-visible {
    width: 145px; /* enough for text    */
    background: var(--color-highlight);
    color: var(--color-highlight);
}

/* reveal the label */
.munchieslistbtn:hover .btn-label,
.munchieslistbtn:focus-visible .btn-label {
    opacity: 1;
    transform: translateX(0);
}




/* ---------- Trending tag “link-buttons” ---------- */
.browselinks {
    /* reset the button look */
    background: none;
    border: 0;
    padding: 0.2rem 0.4rem;
    margin: 0.2rem 0.3rem;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

/* hover / focus */
.browselinks:hover,
.browselinks:focus {
    color: var(--color-primary);
    text-decoration: none;
    outline: none;
}

/* active (mouse-down) */
.browselinks:active {
    color: var(--bs-primary);
}

/* optional: make the tag section behave like a flex-wrap list */
#tagCollapse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


.browse-chip {
    margin: 2px;
    padding: 4px 10px;
    font-size: 1.1rem;
    border: none;
    border-radius: 9999px;
    background: var(--color-middle);
    color: var(--color-text);
}

button.browse-chip {
    color: var(--color-text);
}

button.browse-chip:hover {
    background: var(--color-primary-light);
    color: var(--color-text);
}

[data-theme='dark'] button.browse-chip {
    color: var(--color-text);
}

[data-theme='dark'] button.browse-chip:hover {
    background: var(--color-primary-light);
    color: var(--color-middle);
}

.tag-menu {
    max-height: 45vh;
    overflow-y: auto;
    border-radius: 12px;
}

.tag-menu .dropdown-item {
    border-radius: 9999px;
    font-size: .9rem;
    z-index: 9999;
}

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


/*  chip appearance (works for both desktop & mobile)  ------------- */
.browse-chip {
    margin: 2px;
    padding: 4px 10px;
    font-size: .85rem;
    border: none;
    border-radius: 9999px;
    background: var(--color-middle);
}

.browse-chip:hover {
    background: var(--color-primary);
}


.app-footer {
    text-align: left;
    gap: 0.25rem;
    padding: 3rem 0 0 0;
    font-size: .9rem;
    color: var(--color-text);
    background: transparent; /* or your preferred shade */
    max-width:420px;
    margin:0 auto;
}

/* desktop: put links on the same line */
@media (min-width:768px) {
    .app-footer {
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem;
    }
}

/* --- inline link list ---------------------------------------------------- */

.footer-links {
    color: var(--color-grey);
}

/* Make buttons behave exactly like footer <a> links */
.footer-links li button.footer-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    font-weight: 400;
    color: var(--color-grey);
    cursor: pointer;
    text-decoration: none;
    display: inline;
}


/* Base state — matches <a> exactly */
.footer-links li button.footer-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-grey);
    cursor: pointer;
    text-decoration: none;
    display: inline;
    /* 👇 THIS is the missing piece */
    font-weight: 600;
    text-transform: capitalize;
}

/* Hover / active — color only */
.footer-links li button.footer-link:hover,
.footer-links li button.footer-link:active {
    color: var(--color-primary);
}

/* Focus cleanup */
.footer-links li button.footer-link:focus {
    outline: none;
    box-shadow: none;
}



ul.footer-links {
    margin: 20px 0;
    padding: 50px 0 0 0;
    list-style: none;
    background: var(--body-bg);
    border-radius: 15px;
    padding: 12px 7px 7px 7px;
    box-shadow: 0 0 10px 1px var(--color-outer);
}

ul.footer-links li {
    color: var(--color-grey);
    padding: 0 .75rem;
    display: inline-block;
    text-align: left;
}

.footer-links li a:link, .footer-links a:visited {
    color: var(--color-grey);
    text-decoration: none;
    text-align: left;
}

.footer-links li a:hover, .footer-links a:active {
    text-decoration: none;
    text-align: left;
    color: var(--color-primary);
}

.footer-links li:last-child {
    color: var(--color-grey);
}



/* Make buttons look exactly like footer/menu links */
.footer-links button.footer-link-btn {
    all: unset; /* 🔥 removes browser button styles */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-grey);
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Hover / active matches anchors */
.footer-links button.footer-link-btn:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* Keyboard focus (accessible but invisible visually) */
.footer-links button.footer-link-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


.tag-chip {
    margin: 2px;
    padding: 4px 8px;
    font-size: .85rem;
    border: none;
    background: #f0f0f0;
    border-radius: 9999px;
}

.tag-chip:hover {
    background: #e2e2e2;
}


.top-content {
    padding: 10px;
}

.top-content h5 {
    color: var(--color-text);
    font-size: 1rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 7px;
    margin: 1.5rem 0 2rem 0;
}

.top-content h5 i {
    color: var(--color-text);
    font-size: 2rem;
}



ul.top-content {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.top-content > li {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.top-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-content li {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}

.top-content li a:link, .top-content li a:visited {
    color: var(--color-grey);
    font-size: 1.3rem;
    width: 100%;
}

.top-content li a:hover, .top-content li a:active {
    color: var(--color-primary);
    width: 100%;
}

.top-content button {
    background: none;
    color: var(--color-text);
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}

.top-content button:hover {
    background: none;
    color: var(--color-primary);
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}


.trending-tags h5, .recipe-categories h5 {
    margin: 20px;
}

.creator-stats {
    color: var(--color-text);
    padding: 3px 0;
}



.creator-stats span {
    color: var(--color-text);
    padding: 12px 0;
}

.latest-content {
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--color-text);
}

.latest-link {
    text-decoration: none;
    font-size: 1rem !important;
    color: var(--color-text) !important;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: inline-block;
    margin: 1px 0;
}

.latest-link:hover {
    background-color: var(--color-highlight);
    color: white;
}

.collapse {
    transition: height 1s ease;
}




/*------------------------------------------------*/
/* UniversalCard STYLES */
/*------------------------------------------------*/

.universal-card {
    background: var(--color-main-bg);
    margin: 0 0 1.1rem 0;
    padding: 0;
    box-shadow: 0 0 19px 1px rgba(125,138,1,0.2),inset 0 0 0 1px var(--color-middle);
    transition: opacity 0.5s ease-in-out;
    border-radius:7px;
    transition: all 0.5s ease-in-out;
    position: relative;
    z-index: 1;
}

.universal-card:hover {
    background: var(--color-inner);
    transition: all 0.5s ease-in-out;
}

.universal-card.fade-in {
    opacity: 1;
}

/* Card Header */
.cardheader {
    padding: 1.0rem 1.2rem 0 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 42.0px;
    border-top-right-radius: 42.0px;
}

/* User Thumbnail Section */
.userthumbnaildisplay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.userthumbnaildisplay li {
    margin-right: 0.8rem;
}

.userthumbnaildisplay li a {
    color: var(--color-text);
    transition: all 0.3s ease;
}

.userthumbnaildisplay li a:hover {
    color: var(--color-primary-light);
    transition: all 0.3s ease;
}

.userthumbnaildisplay img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.creation-date {
    font-size: 0.95rem;
    color: var(--color-grey);
    margin-top: 0.25rem;
    font-style: italic;
}



/* Card Controls */
.cardcontrols ul {
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Align li items to the right */
    list-style: none;
}

/* Style the li as a flex container to center its content */
.cardcontrols li {
    height: 42.0px;
    width: 42.0px;
    color: var(--color-text);
    margin: 0 2px;
    cursor: pointer;
}

/* Button styling remains similar */
.cardcontrols button {
    border: none;
    background: none;
    font-size: 1.3rem;
    color: var(--color-grey);
    transition: all 0.3s ease;
}

.universal-card .cardcontrols button:hover {
    border: none;
    background: none;
    color: var(--color-highlight);
    transition: all 0.3s ease;
}

/* Card Body */
.url-meta h5 {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: .25rem
}

.url-meta img {
    width: 90px;
    height: 50px;
    object-fit: cover
}

.url-meta-card,
.url-preview-card {
    display: block;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.88));
    box-shadow: 0 14px 28px rgba(0,0,0,0.08);
    text-decoration: none;
}

.url-meta-card:hover,
.url-preview-card:hover {
    border-color: var(--border-highlight);
    box-shadow: 0 18px 36px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.url-meta-card-image,
.url-preview-card-image {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    display: block;
    background: var(--color-middle);
}

.url-meta-card-body,
.url-preview-card-body {
    padding: 1rem 1.1rem 1.15rem;
}

.url-meta-card-host,
.url-preview-card-host {
    display: inline-block;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.url-meta-card-title,
.url-preview-card-title {
    margin: 0 0 .55rem;
    color: var(--color-text);
    font-size: 1.18rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
}

.url-meta-card-description,
.url-preview-card-description {
    margin: 0;
    color: var(--color-grey);
    font-size: .92rem;
    line-height: 1.55;
    font-weight: 400;
}

.lightboxinner .url-preview-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.lightboxinner .url-preview-card-image {
    width: 100%;
    display: block;
}

.lightboxinner .url-preview-card-body {
    display: grid;
    gap: 0.45rem;
    text-align: left;
    align-items: start;
    justify-items: start;
}

.lightboxinner .url-preview-card-host,
.lightboxinner .url-preview-card-title,
.lightboxinner .url-preview-card-description {
    width: 100%;
    text-align: left;
}

.lightboxinner .url-preview-card-title {
    margin-right: 1.75rem;
}

.innercard h5 {
    color: var(--color-text);
}

.innercard p {
    margin: 1rem 0;
    font-size: 1rem;
    line-height: 1.4;
}

.universalimgbox {
    border-radius: 21px;
}

.universalimgblur {
    /* This layer is behind the main image */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(15px);
    z-index: 0;
}

.universal-card .universalbox {
    /* This layer is above the blurred background */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
}

.universal-card .universalbox img {
    border-radius: 0;
}


.universalbox img {
    width: 70%;
    height: 70%; /* Initial height */
    object-fit: cover;
    transition: max-height 0.5s ease, transform 0.3s ease; /* Adjusts only max-height and scale */
    cursor: pointer;
    border-radius: 22px;
    margin: 0 auto;
}



.universalbox img {
    transition: transform 0.2s ease;
}

/* When expanded, you might want a class to remove any blur or add a border, etc. */
.universalbox img.expanded {
    /* Additional styles if needed */
    transform: scale(1.5rem);
    cursor: grab;
}


/*  Universal Card Body STYLES */

.cardbody {
    margin: 0 auto;
    padding: 0 1.2rem;
    color: var(--color-text);
    border-radius: 20px;
}

.cardbody p {
    color: var(--color-text);
}

.cardbody h3 {
    margin: 1rem 0 .3rem 0;
    font-size: 1.5rem;
    font-family: 'Suez One';
    letter-spacing: .1rem;
    text-transform: capitalize;
}

.recipecontent {
    box-shadow: inset 0 0 0 1px var(--color-middle);
    padding: .9rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    margin: .75rem 0 .25rem;
    display: block;
    position: relative;
}

.recipe-card-title {
    margin: .9rem 0 .55rem;
}

.recipe-card-title a {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.28;
    font-weight: 600;
    
}

.recipe-summary-section {
    padding: 1.3rem 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: .9rem;
}

.content-tag-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .8rem 0 .35rem;
}

.recipe-tag-rail {
    margin: -.1rem 0 .85rem;
}

.content-tag-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .34rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(125, 138, 1, 0.28);
    background: rgba(125, 138, 1, 0.08);
    color: var(--color-grey-light);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
}

.content-tag-overflow {
    color: var(--color-grey);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.munchieslistbtn {
    position: absolute;
    right: 20px;
    top: 12px;
    border-radius: 42.0px;
    background: var(--color-highlight);
    color: var(--color-grey-light);
}

.munchieslistbtn:hover {
    position: absolute;
    right: 20px;
    top: 12px;
    border-radius: 42.0px;
    background: var(--color-grey-light);
    color: var(--color-highlight);
}

.universalingredientsbtn {
    background: transparent;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    padding: .2rem 0;
    font-size: .97rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.recipecontent h4 {
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-grey);
    margin: 0 0 .55rem;
    padding: 0;
}

.recipecontent p {
    color: var(--color-grey);
    font-size: .96rem;
    line-height: 1.6;
    padding: 0 0 .9rem;
    margin: 0;
    border-bottom: 0;
}

.recipe-ingredients-section {
    padding-top: .1rem;
}

.recipe-ingredients-section .ingredient-scroll {
    margin-top: .55rem;
    padding-top: .2rem;
}

.post-card-content {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-grey-light);
    font-weight: 400;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* RecipeDetails page keep glow + border for universal-card */

.recipe-meta {
    font-size: 0.9rem;
    color: var(--color-text);
}

.recipe-meta li {
    margin: 0 0.75rem;
}

.universal-card.recipe-header-card {
    margin-bottom: 2rem;
}

.recipe-header-card h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.recipe-header-card p.lead {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.universal-card .cardbody h3 a:link, .universal-card .cardbody h3 a:visited {
    color: var(--color-primary);
}

.universal-card .cardbody h3 a:hover, .universal-card .cardbody h3 a:active {
    color: var(--color-primary-light);
}

.cardbody ul {
    list-style: none;
    margin: 15px 0 5PX 0;
    padding: .2rem 0;
    overflow-y: auto;
}

.cardbody li {
    padding: .2rem 1.0rem;
    display: inline-block;
    background: transparent;
    border-radius: 42px;
}

.cardbody li:last-child {
    border: none;
}

.cardbody .cardcategory {
    font-size: 11px;
    padding-left: 20px;
    font-style: italic;
    color: var(--color-grey);
}



/* Card Footer */
.cardfooter {
    text-align: center;
    padding: .6rem 0 1rem 0;
}

.cardfooter button {
    border-radius: 42px;
}

[data-theme='dark'] .cardrating {
    background: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    display: inline-block;
    padding: 8px;
    font-size: 18px;
    width: 100%;
}

.cardrating {
    background: var(--color-inner);
    color: var(--color-text);
    display: inline-block;
    border:1px solid var(--border-color);
    padding: 8px;
    font-size: 18px;
    width: 100%;
}

.cardpuff {
    background: var(--color-primary);
    color: var(--color-grey-light);
    display: inline-block;
    padding: 3px;
    font-size: 18px;
    border-radius: 42.0px;
    border: 1px solid var(--border-color);
    width: 100%;
    cursor: pointer;
}

.cardpuff:hover {
    color: var(--color-grey-light);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.cardpass {
    background: var(--color-highlight);
    color: var(--color-grey-light);
    display: inline-block;
    padding: 3px;
    font-size: 18px;
    border-radius: 42.0px;
    border: 1px solid var(--border-color);
    width: 100%;
    cursor: pointer;
}

.cardpass:hover {
    color: var(--color-grey-light);
    border: 1px solid var(--border-color);
    cursor: pointer;
}


.postpreview {
    text-align: center;
}

.postpreview p {
    text-align: left;
    color: var(--color-middle);
}

.postpreview-card {
    text-align: left;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-inner) 96%, var(--color-middle) 4%), color-mix(in srgb, var(--color-outer) 88%, var(--color-inner) 12%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.08);
}

.postpreview-card .postpreview-copy {
    display: grid;
    gap: 0.55rem;
    padding-right: 1.75rem;
}

.postpreview-card .postpreview-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.postpreview-card .postpreview-body {
    margin: 0;
    white-space: pre-line;
    color: var(--color-grey);
    line-height: 1.55;
    font-weight: 400;
}

.postpreview-card .postpreview-image {
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: var(--color-outer);
}

.postpreview-card.postpreview-text-only {
    min-height: 8.5rem;
    align-content: start;
}


/*UniversalCard Recipe Mode Styles*/
.recipecategory {
    font-size: 0.90rem;
    color: var(--color-grey);
}

.recipecuisine {
    font-size: 0.90rem;
    color: var(--color-grey)
}

.rating-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds spacing between stars and text */
    background: none;
    border-radius: 0;
    color: var(--color-grey);
}

.rating-text {
    font-size: 16px; /* Text size for the rating label */
    color: var(--color-grey); /* Customize the color */
    font-weight: 600;
}
/*Ingredient UL and image list style*/

.ingredientlist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ingredientlist ul li {
    margin: 0;
}

.ingredientlist li {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px 20px 15px;
    width: 55px;
    border-radius: 50%;
}

.ingredientlist img {
    width: auto;
    height: 30px;
}

.ingredientlist li img {
    width: 30px;
    height: 30px;
}

.ingredientlist li .img-wrapper {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.ingredientlabel {
    font-size: .8rem;
    margin-top: 6px;
    text-align: center;
    color: var(--color-text);
}

.ingredient-scroll {
    max-height: 260px; /* adjust to taste */
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;
}

.ingredient-scroll::-webkit-scrollbar {
    width: 6px;
}

.ingredient-scroll::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}

/* Container styling for the share options */
/* Container for share buttons */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* Base style for share buttons */
.share-buttons a.btn {
    background-color: transparent; /* No background initially */
    color: var(--color-text); /* Use your text color */
    border: 1px solid transparent; /* No visible border initially */
    border-radius: 9999px; /* Fully rounded (pill shape) */
    padding: 0.5rem 1rem;
    transition: all 0.3s ease; /* Smooth transition on hover */
    text-decoration: none; /* Remove underline */
    display: inline-flex;
    align-items: center;
}

/* Optional: spacing between icon and text */
.share-buttons a.btn i {
    margin-right: 0.5rem;
}

/* Hover state for share buttons */
.share-buttons a.btn:hover {
    background-color: var(--color-inner); /* Subtle background on hover */
    border-color: var(--color-primary-light); /* Light green border */
    color: var(--color-text);
}

/* Dark mode overrides if needed */
[data-theme="dark"] .share-buttons a.btn {
    /* In dark mode you might adjust the hover background slightly */
    background-color: transparent;
    color: var(--color-text);
}

[data-theme="dark"] .share-buttons a.btn:hover {
    background-color: var(--color-outer);
    border-color: var(--color-primary-light);
    color: var(--color-text);
}


/* Post Comment Nested Styles */

.comments-header {
    /* Styling for the header container here */
}

.comment-count h5 {
    /* Adjust font size, color, etc. */
    font-size: 1.2rem;
    color: var(--color-text);
}

.comment-toggle button {
    /* For a smooth transition and a pill shape effect */
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.comment-toggle button:hover {
    background: transparent;
    color: var(--color-primary);
}

.comment-item {
    border-left: 1px solid var(--color-highlight);
    padding-left: 10px;
    margin-bottom: 42px;
    border-bottom-left-radius: 10px;
}

.comment-text {
    padding: 0 0 0 1rem;
    margin-top: -4.20px;
    border-radius: 12px;
    color: var(--color-grey);
}

[data-theme='dark'] .comment-text {
    padding: 0 0 0 1rem;
    margin-top: -4.20px;
    border-radius: 12px;
    color: var(--color-grey);
}

/* If you want a highlight on hover */
.comment-item:hover {
    background-color: transparent;
}

.commentuserimg {
    margin-left: -28px;
}

.inputbtn textarea.form-control {
    border-radius: 12px;
    background: var(--color-outer);
}

.inputbtn button {
    background: var(--input-button);
    border: 1px solid var(--border-color);
    color: var(--color-text);
    border-radius: 12px;
}


/* Universal Card Post Mode STYLES */
.postcardrating {
    background: #f3f3f3;
    color: #1a1a1a;
    display: inline-block;
    padding: 8px;
    font-size: 18px;
    width: 100%;
}

.postcommentbtns button {
    color: var(--color-grey);
    background: none;
    font-size: 1rem;
    padding: 0;
}

.postcommentbtns button:hover {
    color: var(--color-primary);
    background: none;
    font-size: 1rem;
}





/* Universal Card Review Mode STYLES */

.reviewbox {
    padding: 20px;
    font-style: italic;
    border: 1px solid var(--border-color);
    border-radius: 22px;
}

.reviewbox span {
    font-size: 20px;
    font-family: 'Suez One';
}



/* ───────────────────────────────────────────────
   SEARCH CARD — USER THUMBNAIL FIX
─────────────────────────────────────────────── */

.search-card .userthumbnaildisplay ul {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
}

.search-card .userthumbnaildisplay li {
    list-style: none;
    border: none !important;
    background: transparent !important;
    padding: 0;
}

/* avatar */
.search-card .userthumbnaildisplay img.user-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: none !important;
    background: transparent;
}



.search-card {
    display: flex; /* side-by-side thumb + body  */
    align-items: stretch;
    gap: .5rem;
    margin: 0 0 2rem;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    box-shadow: 0 0 12px 2px rgba(0,0,0,.10),inset 0 0 0 1px var(--color-middle);
    overflow: hidden;
    transition: background .25s ease;
}

.search-card.post-result {
    gap: .9rem;
}

.searchcardbody {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    padding: 20px 15px 15px 15px;
}

.search-card.no-thumb .searchcardbody {
    width: 100%;
}

.search-card.no-thumb .innercard,
.search-card.no-thumb .title,
.search-card.no-thumb .summary,
.search-card.no-thumb .hashtag-row,
.search-card.no-thumb .recipe-meta-list {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.search-card.no-thumb .summary {
    align-self: stretch;
}

.search-card.text-result .summary {
    margin-top: .35rem !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-text);
    opacity: .92;
}

.search-card .innercard {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.searchcardbody li {
    padding: .2rem 1.0rem;
    display: inline-block;
    background: transparent;
    border: 1px solid var(--color-middle);
    border-radius: 42px;
    margin: 0 3px;
}

.search-card:hover {
    background: var(--color-outer);
}
/* subtle hover */

.search-card .thumb {
    flex: 0 0 120px; /* fixed width thumbnail      */
    min-height: 120px;
    background-size: cover;
    background-position: center;
}

.search-card.post-result .thumb {
    flex: 0 0 150px;
    min-height: 150px;
    border-radius: 7px 0 0 7px;
}

.media-open-btn,
.search-media-open-btn {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
    background: transparent;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.search-review-link {
    text-decoration: none;
}

.media-open-btn:focus,
.search-media-open-btn:focus {
    outline: none;
}

.search-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.search-card .body {
    flex: 1 1 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}


SearchFeed
/* ───────── title link inside the compact search card ───────── */
.search-card .title {
    display: block; /* makes full card-width tappable */
    text-decoration: none;
    color: var(--color-primary); /* inherits theme */
    transition: color .15s ease, text-decoration-color .15s ease;
}

.search-card .title h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-primary);
    text-transform: capitalize;
    margin: 20px 0 10px 0;
    font-family: 'Suez One';
}

.search-card.post-result .title h3 {
    margin: .35rem 0 .55rem;
    font-size: 1.05rem;
    line-height: 1.35;
    font-family: var(--font-copy, inherit);
    font-weight: 600;
    text-transform: none;
    color: var(--color-text);
}

/* hover / focus state */
.search-card .title:hover,
.search-card .title:focus {
    color: var(--color-primary); /* theme primary */
    text-decoration: none;
}

/* dark-mode tweak (optional – adjust if your palette differs) */
[data-theme='dark'] .search-card .title:hover,
[data-theme='dark'] .search-card .title:focus {
    color: var(--color-text);
}

.search-card .meta {
    font-size: .85rem;
    color: var(--color-grey);
}

.search-card .summary {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    font-size: .90rem;
    line-height: 1.2;
    color: var(--color-grey);
    border: 2px solid var(--border-color);
    padding: 1rem;
    border-radius: 18px;
}

.search-card.post-result .summary {
    margin-top: .25rem !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-text);
    opacity: .9;
}


.search-card .tag-chip {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .75rem;
    opacity: .85;
}

.search-card .meta i {
    opacity: .6;
}

.search-card .userthumbnaildisplay ul {
    margin-bottom: 0;
}

.recipe-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recipe-meta-list li {
    list-style: none;
    white-space: nowrap;
}

.recipe-meta-chips {
    display: flex;
    gap: .5rem;
    margin: .35rem 0 .25rem;
    flex-wrap: wrap;
}

.recipe-meta-chips .chip.subtle {
    font-size: .7rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    color: var(--color-grey);
    text-transform: capitalize;
}


/* collapsible ingredients (recipe only) */
.ing-collapse summary {
    list-style: none;
    cursor: pointer;
    font-size: .85rem;
    color: var(--color-text);
    margin: .5rem 0;
}

.ing-collapse ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(60px,1fr));
    gap: .35rem;
    margin: 0;
    padding: 0;
}

.ing-collapse li {
    list-style: none;
    text-align: center;
}

.ing-collapse img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ing-collapse .ingredientlabel {
    font-size: .7rem;
    color: var(--color-text);
}

/* lighten the border in dark-mode */
[data-theme='dark'] .search-card {
    box-shadow: 0 0 12px 2px rgba(0,0,0,.40),inset 0 0 0 1px var(--color-middle);
}



/*===========================
   Logout Header Styles
===========================*/

.logout-container {
    background: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.logout-container h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #343a40;
}

.logout-container p {
    font-size: 1.1rem;
    color: #6c757d;
}

.logout-btn {
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
    width: 100%;
}



/*////// OLD CARD STYLES ///////*/



/* Post Card STYLES */
.postbox {
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.postbox img {
    max-width: 100%;
    object-fit: contain;
}

.postcard {
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    margin: 12px 0 12px 0;
    background: #FFF;
    border-radius: 7px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}



.postheader {
    background: #eee;
    padding: 6px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-top: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
}


/* Post Details Page STYLES */
.postbox {
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.postbox img {
    max-width: 100%;
    object-fit: contain;
}


/*  Post Card Body STYLES */
.postbody {
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.postbody h3 {
    color: #111;
    font-family: 'Suez One';
    font-size: 26px;
    padding: 17px 12px 0 20px;
    margin-bottom: 0;
}

.postcategory {
    font-size: 13px;
    padding-left: 20px;
    font-style: italic;
}

.postbody h4 {
    color: #666;
    font-family: "Gabarito", sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 10px 0 0 12px;
}

.postbody p {
    color: #111;
    font-family: "Gabarito", sans-serif;
    padding: 5px 20px 0 20px;
    margin-bottom: 4px;
}

.postbtn {
    text-align: left;
    margin-bottom: 12px;
    display: block;
    padding-left: 9px;
}

.postbtn a:link, .postbtn a:visited {
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #666;
    padding-left: 9px;
    -webkit-transition: padding ease .3s;
    transition: padding ease .3s;
}

.postbtn a:hover, .postbtn a:active {
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #999;
    padding-left: 11px;
    -webkit-transition: padding ease .3s;
    transition: padding ease .3s;
}


.postimage {
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 10px solid #7d8a01;
    box-shadow: 0 0 25px 0px rgba(0,0,0,0.1);
    margin: 0 auto;
    background: #DDD;
}

.postimage img {
    max-width: 100%;
    object-fit: contain;
}


.postcardfooter {
    text-align: center;
    font-size: 20px;
    padding: 0 17px 17px 17px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.postcardrating {
    background: #f3f3f3;
    color: #1a1a1a;
    display: inline-block;
    padding: 8px;
    font-size: 18px;
    width: 100%;
}

.postcardpuff {
    background: #7d8a01;
    color: #FFF;
    display: inline-block;
    padding: 8px;
    font-size: 18px;
    width: 100%;
    border: 1px solid #f1f1f1;
}

.postcardpuff:hover {
    color: #FFF;
    border: 1px solid #f1f1f1;
}

.postcardpass {
    background: #ff4c68;
    color: #FFF;
    display: inline-block;
    padding: 8px;
    font-size: 18px;
    width: 100%;
    border: 1px solid #f1f1f1;
}

.postcardpass:hover {
    color: #FFF;
    border: 1px solid #f1f1f1;
}



/* Post Card STYLES */

/*.reviewbox {
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reviewbox img {
    max-width: 100%;
    object-fit: contain;
}*/

/* Styles for review column expansion on recipe page */




.review-text {
    max-height: 5rem; /* Default truncated height */
    overflow: hidden;
    white-space: normal; /* Enable text wrapping */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
    transition: max-height 0.5s ease-in-out, padding 0.3s ease; /* Smooth expansion effect */
    padding: 15px; /* Default padding */
}

.review-text.expanded {
    max-height: 20rem; /* Adjust this value to fit your expanded height */
    padding: 15px; /* Optional: Add more padding when expanded */
}



.reviewcard {
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    margin: 12px 0 12px 0;
    background: #FFF;
    border-radius: 7px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in {
    opacity: 1;
}

.visible {
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Ensure the transition happens over time */
}

.reviewheader {
    background: #eee;
    padding: 6px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-top: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
}


/* User Details Page Session List STYLES */


.sesh-pill {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--body-bg);
    font-size: 1rem;
    transition: all .2s ease;
    color: var(--color-text);
}

.sesh-pill.active {
    background: var(--body-bg);
    color: var(--color-primary);
    border-color: var(--border-color);
}


.sessionlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .65rem;
}

.sessionlist-item {
    padding: .35rem .25rem;
    border-radius: 10px;
    transition: background .2s ease;
    text-decoration: none;
    color: var(--color-text);
    font-size: .8rem;
    letter-spacing: 1px;
}

.sessionlist-item:hover {
    background: var(--color-inner);
}

.sessionlist-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* Full lightbox version */
.full-session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.full-session-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: 12px;
    transition: background .2s ease;
    text-decoration: none;
    color: var(--color-text);
}

.full-session-item:hover {
    background: var(--color-middle);
}

.full-session-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.full-session-scroll {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.full-session-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    text-decoration: none;
    border-radius: 10px;
    transition: background .2s ease;
    color: var(--color-text);
}

.full-session-item:hover {
    background: var(--color-middle);
}

.full-session-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}




/* Review Card Header Controls STYLES */
.reviewcontrols {
    text-align: right;
}


.reviewcontrols button {
    border: none;
    background: none;
    color: #999;
    -webkit-transition: all ease .3s;
}

.reviewcontrols button:hover {
    border: none;
    background: none;
    color: #7d8a01;
    -webkit-transition: all ease .3s;
}

.reviewcontrols ul {
    padding: 0;
    margin: 0;
    display: inline-block;
}

.reviewcontrols li {
    background: #f3f3f3;
    height: 42px;
    width: 42px;
    display: inline-block;
    font-size: 22px;
    padding: 7px 0 0 0;
    color: #666;
    border-radius: 4px;
    text-align: center;
    margin: 0 2px 0 2px;
    border: 1px solid #ddd;
    cursor: pointer;
}

/*  ReviewsCard Body STYLES */
.reviewbody {
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 20px;
}

.reviewbody h3 a:link, .reviewbody h3 a:visited {
    color: #333;
    margin-bottom: 15px;
    line-height: 18px;
    font-size: 16px;
    font-weight: bold;
}

.reviewbody h3 a:link, .reviewbody h3 a:visited {
    color: #7d8a01;
    margin-bottom: 15px;
    line-height: 18px;
    font-size: 16px;
    font-weight: bold;
}

.reviewbody p {
    color: #333;
    margin-bottom: 15px;
    font-style: italic;
    line-height: 22px;
    font-size: 16px;
}

.reviewbody p span {
    color: #999;
    font-family: 'Suez One';
    margin-bottom: 15px;
    font-style: italic;
    line-height: 17px;
    font-size: 20px;
}


.reviewbtn {
    text-align: left;
    margin-bottom: 12px;
    display: block;
    padding-left: 9px;
}

.reviewbtn a:link, .reviewbtn a:visited {
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #666;
    padding-left: 9px;
    -webkit-transition: padding ease .3s;
    transition: padding ease .3s;
}

.reviewbtn a:hover, .reviewbtn a:active {
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #999;
    padding-left: 11px;
    -webkit-transition: padding ease .3s;
    transition: padding ease .3s;
}


.reviewimage {
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 10px solid #7d8a01;
    box-shadow: 0 0 25px 0px rgba(0,0,0,0.1);
    margin: 0 auto;
    background: #DDD;
}

.reviewimage img {
    max-width: 100%;
    object-fit: contain;
}


.reviewcardfooter {
    text-align: center;
    font-size: 20px;
    padding: 0 17px 17px 17px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}




/*  Post Creation Lightbox Image Preview STYLES*/

.url-preview img {
    width: 100%;
    height: auto;
    max-height: 420px;
    border-radius: 4px;
}

.url-preview .card-title {
    font-weight: bold;
}

.url-preview .card-text {
    color: #555;
}

.usersessionlist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Add some space between thumbnails */
}

.user-thumbnail-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.user-thumbnail {
    text-align: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    margin: 0 2px;
}

.user-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%; /* Ensures the image is circular */
}

.user-thumbnail p {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    text-align: center;
    font-family: "Gabarito", sans-serif;
}

/* Utility class to align content if needed */
.center-align {
    display: flex;
    align-items: center;
    justify-content: center;
}





/* Award Accolades Thumbnail Display */

.accolades-section {
    padding: 14px;
    text-align: center;
}

.accolades-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* Ensures icons stay in one row or wrap on small screens */
    gap: 7px;
    margin: 0 auto;
    max-width: 100%; /* Responsive container */
}

.accolade {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px; /* Ensures equal width for each accolade */
}

.accolade-icon {
    width: 75px;
    height: 75px;
    object-fit: contain; /* Ensures the icon maintains aspect ratio */
    margin-bottom: 5px; /* Space between icon and text */
    border: 1px solid #999;
    border-radius: 50%;
}

.accolade-text {
    font-size: 12px; /* Small text for mobile */
    text-align: center;
    line-height: 1.2;
}

.accolade-link {
    text-decoration: none;
}


/* Pill Container for Slide-Out Effect */
.pill-container {
    position: absolute;
    top: 50%;
    left: 100%; /* Start hidden to the right */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    width: 60px;
    background: #7d8a01;
    height: 44px;
    padding: 0 10px;
    border-radius: 15px;
    transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: 1066;
}

.pill-container button {
    background: none;
    border: none;
    box-shadow: none;
    width: 100px;
    height: 100px;
    padding: 15px;
}

.pill-button {
    border: none;
    background: none;
    padding: 0;
    color: white; /* Adjust color as needed */
}


/* Hover and Click Effects for Thumbnail */

.thumbnail-container:hover .pill-container,
.thumbnail-container.touch-active .pill-container {
    left: -18px; /* Adjust as needed to slide out */
    opacity: 1;
    visibility: visible;
    z-index: 20;
}

/* Utility Classes */

.hidden {
    display: none;
}

.visible {
    display: block;
}

/* =========================================
   USER DETAILS – PROFILE OFFSET FIX
========================================= */

.user-profile-header + .feed-grid {
    margin-top: 60px; /* adjust to match avatar overlap */
}

.editlink {
    cursor: pointer;
    color: var(--color-text);
}

.editlink:hover {
    cursor: pointer;
    color: var(--color-text);
}

.user-profile-header {
    position: relative;
    width: 100%;
}




/* -------------------------------------------------------------
   User Tabs
------------------------------------------------------------- */
.user-tabs-header .nav-pills .nav-link {
    padding: 0.4rem 0.85rem;
}

.user-tabs-header .badge {
    font-size: 0.7rem;
}

.user-tabs-header select.form-select-sm {
    min-width: 140px;
}

/* ================================
      USER TOOLBAR WRAPPER
   ================================ */
.user-toolbar {
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ================================
      CREATE BAR
   ================================ */
.create-bar {
    background: var(--color-middle);
    border: 1px solid var(--border-color);
    padding: .55rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-text);
    transition: background 0.2s;
}

.create-bar:hover {
    background: var(--color-primary-light);
}

.create-bar i {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.create-text {
    color: var(--color-text);
}

/* Only show text on desktop */
@media (max-width: 768px) {
    .create-bar .create-text {
        display: none;
    }
}

/* ================================
      FILTER TABS
   ================================ */
.filter-tabs {
    display: flex;
    gap: .5rem;
}

.filter-pill {
    padding: .45rem .75rem;
    border-radius: 12px;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.filter-pill.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pill-count {
    background: var(--color-primary-light);
    border-radius: 20px;
    padding: 0 .4rem;
    color: #333;
    font-weight: 600;
}

/* ================================
      SORT + DATE BUTTONS
   ================================ */
.filter-actions {
    display: flex;
    gap: .5rem;
}

.filter-pill-light {
    padding: .45rem .65rem;
    border-radius: 12px;
    background: var(--color-middle);
    color: var(--color-text);
    border: 1px solid var(--border-color);
}

.filter-pill-light:hover {
    background: var(--color-primary-light);
}

.search-review-jump {
    display: flex;
    align-items: center;
}

.search-review-jump-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
}

.search-review-jump-link:hover,
.search-review-jump-link:focus {
    color: var(--color-text);
    text-decoration: none;
}

.feed-load-more,
.userfeed-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--color-inner);
    color: var(--color-text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.feed-load-more:hover,
.feed-load-more:focus-visible,
.userfeed-load-more:hover,
.userfeed-load-more:focus-visible {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-text);
    transform: translateY(-1px);
}

.feed-scroll-sentinel,
.userfeed-scroll-sentinel {
    width: 100%;
    height: 2px;
}

/* Dark mode support for dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--color-inner);
    color: var(--color-text);
    border-color: var(--border-color);
}

/* ============================================
   SIDEBAR CARD — MATCHES UNIVERSAL CARD STYLE
   ============================================ */


.user-sidecard,
.userquote-panel {
    background: var(--color-main-bg);
    margin: 0 0 1.1rem 0;
    padding: 1.3rem;
    box-shadow: 0 0 19px 1px rgba(125,138,1,0.2),inset 0 0 0 1px var(--color-middle);
    transition: opacity 0.5s ease-in-out;
    border-radius:7px;
    transition: all 0.5s ease-in-out;
}

/* Hover: more glow + slightly brighter background */
.user-sidecard:hover,
.userquote-panel:hover {
    background: var(--color-inner);
    margin: 0 0 1.1rem 0;
    padding: 1.3rem;
    box-shadow: 0 0 19px 1px rgba(125,138,1,0.2),inset 0 0 0 1px var(--color-middle);
    transition: opacity 0.5s ease-in-out;
    border-radius: 7px;
    transition: all 0.5s ease-in-out;
}

/* Headings with bottom border divider */
.user-sidecard h4,
.userquote-panel h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: capitalize;
    color: var(--color-text);
    border-bottom: 1px solid var(--border-color);
}

/* Icon inside the h4 */
.user-sidecard h4 i,
.userquote-panel h4 i {
    font-size: 1.1rem;
    margin: 0;
}

/* Text body */
.user-sidecard p,
.userquote-panel p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0 0 0.6rem 0;
    font-style: italic;
    white-space: pre-line;
}

/* Action rows — bio/quote buttons etc. */
.user-sidecard .bio-actions,
.user-sidecard .quote-actions,
.userquote-panel .quote-actions,
.user-sidecard .side-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0 0.65rem 0;
}

/* Keep icon buttons tight and consistent */
.user-sidecard .icon-btn i,
.userquote-panel .icon-btn i,
.panel-tools .icon-btn i {
    font-size: 1.1rem !important;
    color: var(--color-grey);
}

/* Optional generic header class if used elsewhere */
.panel-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}


/* -------------------------------------------------------------
   COVER IMAGE
------------------------------------------------------------- */
.coverimage {
    width: 100%;
    padding: 22rem 0;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cover-overlay-icons {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    display: flex;
    justify-content: flex-start; /* LEFT */
    align-items: flex-end; /* BOTTOM */
    gap: 1rem;
    border-radius: 0;
    background: rgba(0,0,0,0.420);
    opacity: 0;
    transition: all .420s ease;
    z-index: 12;
    pointer-events: none;
}


.cover-overlay-icons.active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(3px);
}

.cover-overlay-icons .icon-btn {
    opacity: 0;
    transform: translateY(8px) scale(.8);
    transition: transform .2s ease, opacity .2s ease;
}

.cover-overlay-icons.active .icon-btn {
    opacity: 1;
    transform: translateY(0) scale(1.1);
}

.cover-overlay-icons.active .icon-btn:nth-child(1) {
    animation: popIn .2s ease forwards;
}

.cover-overlay-icons.active .icon-btn:nth-child(2) {
    animation: popIn .3s ease forwards;
}

.cover-overlay-icons.active .icon-btn:nth-child(3) {
    animation: popIn .4s ease forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1.2);
    }
}


/* -------------------------------------------------------------
   PROFILE IMAGE LAYOUT
------------------------------------------------------------- */
.profile-image-container {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    pointer-events: none; /* container shouldn't intercept clicks */
}

@media (max-width:768px) {
    .profile-image-container {
        bottom: -60px;
    }
}

.profile-wrapper {
    position: relative;
    width: clamp(150px, 30vw, 420px); /* responsive range */
    aspect-ratio: 1 / 1; /* FORCE perfect square */
    border-radius: 50%;
    overflow: hidden;
    pointer-events: auto;
    box-shadow: 0 0 15px 1px rgba(0,0,0,0.7);
    background: #FFF;
}

.profile-wrapper,
.profile-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}


/* -------------------------------------------------------------
   PROFILE IMAGE OVERLAY
------------------------------------------------------------- */
.profile-overlay-icons {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.420);
    opacity: 0;
    transition: all .420s ease;
    z-index: 10;
    pointer-events: none; /* default off */
}

.profile-overlay-icons.active {
    opacity: 1;
    pointer-events: auto; /* active = clickable */
    backdrop-filter: blur(3px);
}




/* -------------------------------------------------------------
   SHARED ICON BUTTON STYLING UserDetails bio/quote
------------------------------------------------------------- */

.quote-actions, .bio-actions {
    margin: 0;
    padding: 0;
}


.icon-btn {
    background: none;
    border: none;
    padding: .5rem .5rem 0 .5rem;
    margin: 0 .2rem;
    cursor: pointer;
    z-index: 500;
    position: relative;
    color: var(--color-text);
}

.icon-btn i {
    color: var(--color-grey-light);
    font-size: 1.5rem;
    opacity: .9;
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
}

.icon-btn:hover i {
    transform: scale(1.2);
    color: var(--color-highlight);
    opacity: 1;
}

/* UNIVERSAL FLOAT-UP ICON ANIMATION */
.pop-icons .icon-btn {
    opacity: 0;
    transform: translateY(6px) scale(.85);
    transition: opacity .25s ease, transform .3s ease;
}

.pop-icons.active .icon-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* optional stagger */
.pop-icons.active .icon-btn:nth-child(1) {
    transition-delay: .05s;
}

.pop-icons.active .icon-btn:nth-child(2) {
    transition-delay: .10s;
}

.pop-icons.active .icon-btn:nth-child(3) {
    transition-delay: .15s;
}






/* ============================
   Userpage MODERN CREATE BAR
   ============================ */
.create-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 1.1rem;
    border-radius: 42px;
    font-style: italic;
    letter-spacing: 1px;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    color: var(--color-grey-light);
    cursor: pointer;
    pointer-events: auto; /* IMPORTANT fix */
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.create-bar:hover {
    background: var(--color-inner);
    border-color: var(--border-highlight);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.create-bar-icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-right: .75rem;
    display: flex;
    align-items: center;
}

.create-bar-text {
    font-size: .95rem;
    color: var(--color-text);
    opacity: .8;
    user-select: none;
}

/* Slight press-down animation */
.create-bar:active {
    transform: scale(.98);
}

/* ============================
   MOBILE MODE
   ============================ */
@media (max-width: 768px) {

    /* Collapse text, keep icon */
    .create-bar {
        padding: .75rem .9rem;
        border-radius: 28px;
        justify-content: center;
    }

    .create-bar-text {
        display: none;
    }

    .create-bar-icon {
        margin-right: 0;
    }
}

/* ───────────────────────────────
   Drag & Drop Upload Zone
──────────────────────────────── */
#dropZone,
#postDropZone,
#recipeDropZone {
    --drop-accent: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --drop-border: color-mix(in srgb, var(--color-text) 14%, transparent);
    --drop-surface: linear-gradient( 180deg, color-mix(in srgb, var(--color-inner) 94%, var(--color-middle) 6%), color-mix(in srgb, var(--color-outer) 88%, var(--color-inner) 12%) );
    border: 2px dashed var(--drop-border);
    border-radius: 1rem;
    background: var(--drop-surface);
    color: var(--color-text);
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    cursor: pointer;
    user-select: none;
    min-height: 120px;
    padding: 1.1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.45rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.06);
}

#dropZone:hover,
#dropZone.dragover,
#postDropZone:hover,
#postDropZone.dragover,
#recipeDropZone:hover,
#recipeDropZone.dragover {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--drop-border) 42%);
    background: linear-gradient( 180deg, color-mix(in srgb, var(--color-inner) 88%, var(--color-primary-light) 12%), color-mix(in srgb, var(--color-outer) 82%, var(--color-primary-light) 18%) );
    transform: translateY(-1px);
}

/* Optional icon / helper text inside */
#dropZone .drop-title,
#postDropZone .drop-title,
#recipeDropZone .drop-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
}

#dropZone .drop-subtitle,
#postDropZone .drop-subtitle,
#recipeDropZone .drop-subtitle {
    font-size: 0.92rem;
    color: var(--color-grey);
    line-height: 1.35;
    margin: 0;
    max-width: 28rem;
}

/* Link inside the drop zone */
#dropZone a,
#postDropZone a,
#recipeDropZone a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

#dropZone a:hover,
#postDropZone a:hover,
#recipeDropZone a:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

.url-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
}





.validation-message {
    color: var(--color-highlight);
    list-style: none;
    font-size: 12px;
    font-style: italic;
    text-align: left;
}


.validation-message::before {
    content: "* ";
    list-style: none;
    font-size: 12px;
    font-style: italic;
}




/* -------------------------------------------
   CHIP ICON for Ingredient picker (20 px)
   -------------------------------------------*/

.chip-icon {
    width: 20px;
    height: 20px;
    object-fit: contain; /* keeps SVG sharp */
    vertical-align: text-bottom;
    flex: 0 0 20px; /* stops it stretching */
    pointer-events: none; /* click goes to chip */
}

/* a hair larger inside the suggestion list */
.ingredient-suggestion .chip-icon {
    width: 24px;
    height: 24px;
}

/* Ingredient select chips in recipecreation lightbox */
.ingredient-suggestion {
    cursor: pointer;
}

.ingredient-suggestion:hover {
    background: var(--color-inner);
    color: var(--color-accent);
}

.ingredient-chip {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: .85rem;
}








/* Switch styling */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.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: 24px;
}

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

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

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


/* Notification item container */
.notification-item {
    padding: 0.75rem 1rem;
    background-color: var(--color-surface);
    border-bottom: var(--border-color);
}

/* Ensure the flex container aligns items at the top */
.notification-item,
.notification-item .d-flex {
    align-items: flex-start;
}

/* User thumbnail styling */
.user-thumbnail {
    /* By default, the thumbnail will align to the top */
}

.notification-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Text elements */
.notification-item a {
    color: var(--color-text);
    text-decoration: none;
}

.notification-item a:hover {
    text-decoration: underline;
}

.notification-item p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    background: var(--color-inner);
    padding: 8px;
    margin-bottom: 3px;
    border-left: 1px dotted var(--color-highlight);
}


.notification-item small {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text);
    border-top: 1px solid var(--color-outer);
}

/* Block button: ensure it is aligned to top */
.notification-item > div:last-child {
    align-self: flex-start;
}


.magcursor:hover {
    cursor: zoom-in;
}

.rating span {
    color: #7d8a01;
}

.rating span:hover {
    color: #e0dd82 !important;
    mix-blend-mode: multiply;
}



/* Style for sticky Admin Datatable header */
.sticky-header thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10; /* Ensure the header is above other content */
}



/* Style for HomeFeed Sliders */
.form-range {
    background: linear-gradient(to right, #4caf50, #2196f3);
    border-radius: 8px;
    height: 10px;
    appearance: none;
}

.form-range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2196f3;
    cursor: pointer;
}

.form-range::-webkit-slider-thumb:hover {
    background: var(--color-highlight);
}

.settings-panel ul {
    margin: 0;
    padding: 0;
}

.settings-panel ul li {
    margin: 0;
    padding: 0;
}


.settings-panel li {
    font-size: 13px;
    font-weight: 300;
    padding: 5px 0;
}

.settings-panel li span {
    font-size: 10px;
    font-weight: 800;
    color: #7d8a01;
}

.settings-panel .badge {
    font-size: 12px;
}

.settings-panel input[type="range"] {
    width: 100%;
}

#feed-sentinel {
    height: 2px;
}
/*───────────────────────────────────────────────────────────────
  UNIFIED CHIP STYLES  –  tags & ingredients
────────────────────────────────────────────────────────────────*/

/* base pill ---------------------------------------------------*/
.tag-chip,
.ingredient-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem; /* space between icon/text/x */
    padding: .35rem .65rem;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: 9999px; /* fully rounded */
    font-size: .85rem;
    line-height: 1rem;
    max-width: 100%;
    text-wrap: nowrap;
}

/* optional ingredient icon (20 px) ---------------------------*/
.tag-chip img.chip-icon,
.ingredient-chip img.chip-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
    pointer-events: none;
}

/* close (x) button -------------------------------------------*/
.tag-chip .chip-close,
.ingredient-chip .chip-close {
    appearance: none;
    border: none;
    background: transparent;
    font-size: .8rem;
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit; /* inherits white/black text */
    opacity: .6;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}

.tag-chip .chip-close:hover,
.ingredient-chip .chip-close:hover {
    opacity: 1;
    transform: scale(1.15); /* small grow on hover */
}

.tag-chip .chip-close:focus-visible,
.ingredient-chip .chip-close:focus-visible {
    outline: 2px solid var(--color-accent-contrast);
    outline-offset: 2px;
}



/* --- Bootstrap-5 breakpoint helpers ---------------------------------- */
/* xs-only  ( <576 px ) ------------------------------------------------ */
@media (max-width:575.98px) {
}

/* sm-only  ( 576 – 767.98 px ) ---------------------------------------- */
@media (min-width:576px) and (max-width:767.98px) {
}

/* md-only  ( 768 – 991.98 px ) ---------------------------------------- */
@media (min-width:768px) and (max-width:991.98px) {
}

/* lg-only  ( 992 – 1199.98 px ) --------------------------------------- */
@media (min-width:992px) and (max-width:1199.98px) {
}

/* xl-only  ( 1200 – 1399.98 px ) -------------------------------------- */
@media (min-width:1200px) and (max-width:1399.98px) {
}

/* xxl-only ( ≥1400 px ) ---------------------------------------------- */
@media (min-width:1400px) {
}





/* ----------------------------------------- */
/* Layout Shell / Identity / Admin Normalization */
/* ----------------------------------------- */

#logoWithTooltip {
    position: relative;
    display: inline-block;
}

#420countdown-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #3aff6f;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: .85rem;
    white-space: nowrap;
    z-index: 1000;
}

.hidden {
    display: none;
}

/* ============================
   Identity & Settings System
============================ */

.identity-shell-main {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
    padding-top: var(--app-top-clearance);
    padding-bottom: 3rem;
}


/* ---------- AUTH (Login / Register / Reset) ---------- */

.auth-shell {
    max-width: 420px;
    margin: 0 auto;
    padding:12px;
}

.auth-frame {
    padding: 2rem 1.75rem 1.5rem;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.auth-title {
    font-family: 'Suez One';
    text-align: center;
    margin: 1.4rem 0;
    font-size:1.6rem;
}

.auth-links {
    list-style: none;
    padding: 0;
    margin-top: 1.25rem;
    text-align: center;
}

.auth-links li {
    margin: .35rem 0;
}

.auth-links a {
    color: var(--color-text);
    text-decoration: none;
}

.auth-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Buttons */
.btn-auth,
.btn-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    padding: .85rem 1.45rem;
    border-radius: var(--radius-lg);
    border: none;
    color: #111;
    background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-light) );
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease;
}

.btn-auth:hover,
.btn-settings:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-auth i,
.btn-settings i {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---------- SETTINGS (Manage Pages) ---------- */

.settings-shell {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    padding: 0 0 3rem;
}

@media (max-width: 991.98px) {
    .identity-shell-main {
        width: min(100%, calc(100% - 1.25rem));
    }

    .settings-shell {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.settings-nav {
    background: var(--color-middle);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--radius-lg) * .6);
    padding: 1.4rem;
}

.settings-nav a {
    display: block;
    padding: .55rem .75rem;
    border-radius: 12px;
    color: var(--color-text);
    text-decoration: none;
    font-size: .9rem;
}

.settings-nav a:hover {
    background: var(--color-outer);
}

.settings-nav a.active {
    background: var(--color-primary);
    color: #111;
    font-weight: 600;
}

.settings-content {
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.2rem 2.5rem;
}

.settings-title {
    font-family: 'Suez One';
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
}

.settings-form {
    max-width: 520px;
}

.settings-form .form-control {
    background: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
}


/* Mobile */
@media (max-width: 900px) {
    .settings-shell {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
    }

    .settings-nav a {
        white-space: nowrap;
    }
}


/*------------------------------------------------*/
/* MENU LIGHTBOX MASTER STYLE */
/*------------------------------------------------*/
.menu-lightbox-container {
    padding: 2rem;
    border: none;
    border-radius: 12px;
    background: var(--menu-bg);
    text-align: center;
}
.menu-lightbox-container button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


/* ---------------------------------------------- */
/* IDENTICAL STYLE for <a> and <button> */
/* ---------------------------------------------- */
.menu-lightbox-container a,
.menu-lightbox-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 1.4rem !important;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary);
    text-decoration: none;
    margin: .420rem 0;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.25s ease;
}

/* Explicit override to prevent global button rules leaking */
.lightboxouter .lightboxinner .menu-lightbox-container button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--color-primary);
    padding: 0.5rem 0;
}

/* ---------------------------------------------- */
/* Hover */
/* ---------------------------------------------- */

.menu-lightbox-container a:hover,
.menu-lightbox-container button:hover {
    color: var(--color-primary-light);
    background: transparent;
    border: none;
    font-size: 1.4rem;
}

/* ---------------------------------------------- */
/* Icons */
/* ---------------------------------------------- */

.menu-lightbox-container a i,
.menu-lightbox-container button i {
    margin-right: 12px;
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: color 0.25s ease;
    background: transparent;
    border: none;
}

.menu-lightbox-container a:hover i,
.menu-lightbox-container button:hover i {
    color: var(--color-primary-light);
    background: transparent;
    border: none;
}


i.navlinks-icon {
    font-size: 2rem;
    color: var(--theme-menu-icons);
}


/* ---------------------------------------------- */
/* DARK MODE IDENTICAL STYLE for <a> and <button> */
/* ---------------------------------------------- */
[data-theme='dark'] .menu-lightbox-container a,
[data-theme='dark'] .menu-lightbox-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary);
    text-decoration: none;
    margin: .420rem 0;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.25s ease;
}

/* Explicit override to prevent global button rules leaking */
[data-theme='dark'] .lightboxouter .lightboxinner .menu-lightbox-container button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--color-primary);
    padding: 0.5rem 0;
}

/* ---------------------------------------------- */
/* Hover */
/* ---------------------------------------------- */

[data-theme='dark'] .menu-lightbox-container a,
[data-theme='dark'] .menu-lightbox-container button {
    color: var(--color-primary);
    background: transparent;
    border: none;
}

/* ---------------------------------------------- */
/* Icons */
/* ---------------------------------------------- */

[data-theme='dark'] .menu-lightbox-container a i,
[data-theme='dark'] .menu-lightbox-container button i {
    margin-right: 12px;
    font-size: 1.5rem;
    color: var(--color-primary-light);
    transition: color 0.25s ease;
    background: transparent;
    border: none;
}

[data-theme='dark'] .menu-lightbox-container a:hover i,
[data-theme='dark'] .menu-lightbox-container button:hover i {
    color: var(--color-primary-light);
    background: transparent;
    border: none;
}


[data-theme='dark'] i.navlinks-icon {
    font-size: 2rem;
    color: var(--theme-menu-icons);
}


.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-middle);
    border-radius: 20px;
    margin: 4px;
    font-size: .85rem;
}

.chip-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.chip-remove {
    cursor: pointer;
    font-weight: bold;
    margin-left: 6px;
}

.autocomplete-dropdown {
    position: absolute;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.autocomplete-item:hover {
    background: var(--color-middle);
}

.dropdown-img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}



/* ============================================================
   ADMIN UI SYSTEM
   ============================================================ */

.admin-header {
    background: var(--color-header-bg) !important;
    color: var(--color-header-link);
    font-size: 1.8rem;
    text-align: center;
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
}

/* ===============================
   HEADER NAV
================================ */

.admin-header-nav {

    display: flex;
    align-items: center;
    gap: 18px;

}


/* nav link */

.admin-header-link {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-weight: 600;
    font-size: .95rem;

    text-decoration: none;

    padding: 8px 14px;

    border-radius: 8px;

    color: var(--color-text);

    transition: all .18s ease;

}

.admin-header-link:hover {

    background: var(--color-inner);
    color: var(--primary-green);

}

.admin-header-link i {
    font-size: 1rem;
}

.admin-shell {
    min-height: 100vh;
}

/* ================= ADMIN CONTENT PANEL ================= */

.admin-content {
    border: 1px solid var(--border-color);
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ================= STAT CARDS ================= */

.admin-content .card,
.admin-content .admin-stat-card {
    border: 1px solid var(--border-color);
    color: var(--color-text);
    border-radius: 14px;
    transition: all .2s ease;
}

.admin-content .card:hover {
    background: var(--color-inner);
}
/* ================= TABLE WRAPPER ================= */

.admin-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.adminpanelbg {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 17px;
    padding: 1.5rem
}
/* ================= TABLE ================= */
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-inner);
    color: var(--color-text);
}

.admin-table thead {
    background: var(--color-middle);
    position: sticky;
    top: 0;
    z-index: 5;
}

.admin-table th,
.admin-table td {
    padding: .75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: .85rem;
}

.admin-table tbody tr:hover {
    background: var(--color-outer);
}

/* ================= SUMMARY CELL ================= */

.admin-summary-cell {
    max-width: 300px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.3;
}

/* ================= ICON COLORS (Theme Controlled) ================= */

.admin-table .bi-star-fill {
    color: var(--color-primary);
}

.admin-table .bi-check-circle {
    color: var(--color-primary-light);
}

.admin-table .bi-flag-fill {
    color: var(--color-highlight);
}

.admin-table .bi-x-circle {
    opacity: .5;
}

/* ================= ACTION BUTTONS ================= */

.admin-view-btn {
    border: 1px solid var(--border-color);
    padding: .35rem .6rem;
    border-radius: 8px;
    background: var(--color-middle);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.admin-view-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-table .btn {
    border-radius: 8px;
    background: var(--color-middle);
    border: 1px solid var(--border-color);
    color: var(--color-text);
}
/* ================= BUTTON NORMALIZATION ================= */

.admin-content .btn {
    border-radius: 10px;
}

/* ================= BADGES ================= */

.admin-badge {
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.admin-badge-success {
    background: var(--color-primary-light);
    color: #111;
}

.admin-badge-danger {
    background: var(--color-highlight);
    color: #111;
}

/* ============================================================
   DARK MODE SAFETY (optional override layer)
   ------------------------------------------------------------
   Not required if variables are correct.
   Only use if needed.
   ============================================================ */

/*
[data-theme='dark'] .admin-shell {
    background: var(--color-outer);
}
*/
.admin-summary-content {
    color: var(--color-text);
}

.admin-summary-content p,
.admin-summary-content span,
.admin-summary-content div {
    color: var(--color-text);
}
/* Inline stat row for grouped metrics */

.admin-stat-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: .5rem;
}

.admin-stat-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 500;
    opacity: .85;
    white-space: nowrap;
}

/* ================= STAT CARD INTERNALS ================= */

/* Equal height stat cards */

.admin-stat-card {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.admin-stat-card:hover {
    background: var(--color-outer);
}


.admin-table .bi-star-fill {
    color: var(--color-primary);
}

.admin-table .bi-check-circle {
    color: var(--color-primary-light);
}

.admin-table .bi-flag-fill {
    color: var(--color-highlight);
}

.admin-table .bi-x-circle {
    opacity: .5;
}

.admin-stat-title {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
    margin-bottom: .75rem;
}

.admin-stat-main {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.admin-stat-sub {
    font-size: 1rem;
    opacity: .75;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
}


.admin-stat-warning {
    color: var(--color-highlight);
}
/* ================= ADMIN QUICK NAV ================= */

.admin-quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.2rem;
}

.admin-nav-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

.admin-nav-label {
    font-size: 1.1rem;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .5rem;
    letter-spacing: 1px;
}

.admin-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .4rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    background: var(--body-bg);
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
}

.admin-nav-btn:hover {
    color: var(--color-primary);
}

/* ================= ADMIN TOOLBAR ================= */

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    background: var(--color-middle);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.admin-toolbar-section {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ================= SELECT ================= */



.admin-select {
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .35rem .5rem;
    color: var(--color-text);
}

/* ================= PAGINATION ================= */

.admin-page-btn {
    padding: .4rem .8rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--color-inner);
    color: var(--color-text);
    text-decoration: none;
    transition: all .15s ease;
}

.admin-page-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-page-btn.disabled {
    opacity: .4;
    pointer-events: none;
}

.admin-page-info {
    font-size: .85rem;
    opacity: .7;
}

/* ================= ACTION BUTTONS ================= */

.admin-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--color-inner);
    color: var(--color-text);
    font-size: .85rem;
    font-weight: 500;
    transition: all .15s ease;
}

.admin-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-action-btn.danger {
    border-color: var(--color-highlight);
}

.admin-action-btn.danger:hover {
    background: var(--color-highlight);
    color: #111;
}

/* ============================================================
   ADMIN LIGHT/DARK SKIN LAYER
   Minimal override — preserves layout
   ============================================================ */

/* Card backgrounds */
.admin-shell .card,
.admin-content .card,
.area-admin .card,
body .admin-card,
body .card-admin {
    background: var(--color-inner) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* Card headers */
.admin-shell .card-header,
.admin-content .card-header {
    background: var(--color-middle) !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Card footers */
.admin-shell .card-footer,
.admin-content .card-footer {
    background: var(--color-middle) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Generic headings inside admin */
.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell h4,
.admin-shell h5 {
    color: var(--color-text) !important;
}

.admin-shell label {
    color: var(--color-text) !important;
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: bold !important;
}
/* Links */
.admin-shell a {
    color: var(--color-primary);
}

.admin-shell a:hover {
    color: var(--color-primary-light);
}

/* Inputs + Textareas only */
.admin-shell input:not([type="checkbox"]):not([type="radio"]),
.admin-shell textarea {
    background: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
}

/* Input focus */
.admin-shell input:focus,
.admin-shell textarea:focus,
.admin-shell select:focus {
    border-color: var(--border-highlight) !important;
    box-shadow: none !important;
}

/* =====================================
   Admin Form Controls (Clean Version)
   ===================================== */

.admin-shell .form-control,
.admin-shell textarea {
    background: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.admin-shell .form-select {
    background-color: var(--color-inner);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background-image: none;
    padding-right: 0.75rem;
}

.admin-shell select option,
.admin-shell .form-select option,
.admin-shell .admin-role-select option {
    font: inherit;
}
/* File inputs */
.admin-shell input[type="file"] {
    background: var(--color-inner);
}

/* Validation text */
.admin-shell .text-danger,
.admin-shell .validation-summary-errors {
    color: #ff6b6b !important;
}

/* Tables inside admin edit pages */
.admin-shell table {
    background: var(--color-inner);
    color: var(--color-text);
}

.admin-shell th,
.admin-shell td {
    color: var(--color-text) !important;
    font-weight:600;
    border-color: var(--border-color) !important;
}
.admin-table tbody td {
    color: var(--color-text) !important;
    font-weight:400;
}

.admin-table tbody tr {
    color: var(--color-text) !important;
}
/* Bootstrap switches */
.admin-shell .form-check-input {
    background-color: var(--color-inner);
    border-color: var(--border-color);
}

.admin-shell .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.admin-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.stat-label {
    color: var(--color-grey);
    font-size: 1rem;
}

.stat-value {
    font-weight: 300;
    color: var(--color-grey);
}

/* =====================================
   ADMIN SPACING SYSTEM
   ===================================== */

.admin-panel {
    padding: 1.75rem;
}

.admin-section {
    margin-bottom: 2rem;
}

.admin-section-header {
    font-size: 1.5rem;
    text-transform: capitalize;
    margin-bottom: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:var(--color-text);
    font-weight:500;
}

.admin-section-body {
    padding-top: 1rem;
    padding-bottom: .5rem;
}

.admin-section-body.collapsed {
    display: none;
}


/* Admin form spacing */
.admin-form-group {
    margin-bottom: 1.5rem;
}

.admin-form-row {
    display: flex;
    gap: 1.5rem;
}

.admin-form-row > div {
    flex: 1;
}

/* Tight card padding */
.admin-card {
    padding: 1.5rem;
    border-radius: 16px;
}

/* ================= IMAGE BLOCK ================= */

.admin-image-block {
    margin-bottom: 1.75rem;
}

.admin-recipe-image {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

/* ================= SECTION SPACING ================= */

.admin-section {
    margin-bottom: 1.75rem;
}

.admin-section:last-child {
    margin-bottom: 0;
}

/* ================= TOGGLE SPACING ================= */

.admin-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.admin-toggle:last-child {
    margin-bottom: 0;
}

.admin-title-block {
    margin-bottom: 2rem;
}

.admin-title a {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.admin-title a:hover {
    color: var(--color-primary);
}

.admin-title i {
    font-size: .9rem;
    opacity: .7;
}

/* ================= ADMIN SWITCH ================= */

.admin-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.admin-toggle:last-child {
    margin-bottom: 0;
}

.admin-toggle-label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-text);
}

/* Switch wrapper */
.admin-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

/* Hide default checkbox */
.admin-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider background */
.admin-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-middle);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    transition: all .2s ease;
}

/* Slider knob */
.admin-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 2px;
    background: var(--color-text);
    border-radius: 50%;
    transition: all .2s ease;
}

/* Checked state */
.admin-switch input:checked + .admin-slider {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.admin-switch input:checked + .admin-slider::before {
    transform: translateX(22px);
    background: #fff;
}

/* Focus state */
.admin-switch input:focus + .admin-slider {
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}



/*===========================
   Admin Buttons
===========================*/

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    background: var(--color-outer) !important;
    color: var(--color-text);
    transition: all .18s ease;
}

.admin-btn:hover {
    background: var(--color-inner) !important;
    transform: translateY(-1px);
    color: var(--color-text);
    filter: brightness(1.08);
}

.admin-btn-primary {
    background: var(--color-main-bg) !important;
    color: var(--color-text);
    border-color: var(--color-primary);
}

.admin-btn-primary:hover {
    filter: brightness(1.08);
}

.admin-btn-secondary {
    background: var(--color-main-bg) !important;
    color: var(--color-text);
    border-color: var(--color-primary);
}


.admin-btn-secondary:hover {
    background: var(--color-main-bg) !important;
    color: var(--color-primary) !important;
    ;
}

.admin-btn-danger {
    background: var(--color-highlight);
    color: #fff;
    border-color: var(--color-highlight);
}

.admin-btn-danger:hover {
    filter: brightness(1.1);
}

/*====================================
    Admin File Input 
====================================*/


.admin-shell input[type="file"].form-control {
    padding: 0 !important;
    height: 46px;
    display: flex;
    align-items: center;
    background: var(--color-inner) !important;
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}


/* Upload button */

.admin-shell input[type="file"]::file-selector-button {
    margin: 0 12px 0 0;
    border: none;
    height: 100%;
    padding: 0 22px;
    font-weight: 600;
    border-right: 1px solid var(--border-color);
    background: linear-gradient( 180deg, var(--color-primary-light), var(--color-primary) );
    color: white;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 12px 0 0 12px;
}


/* Hover */

.admin-shell input[type="file"]::file-selector-button:hover {
    filter: brightness(1.08);
}


/* filename area */

.admin-shell input[type="file"] {
    font-size: .95rem;
    color: var(--color-grey);
    background: var(--color-inner);
}


/* =========================================
   ADMIN TABLE
========================================= */

.admin-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th {
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 2px solid #e9ecef;
}

.admin-table tbody tr {
    transition: background .15s ease;
}

.admin-table tbody tr:hover {
    background: rgba(0,0,0,.03);
}


/* =========================================
   INGREDIENT ICON
========================================= */

.ingredient-icon-wrapper {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-icon-wrapper img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}


.ingredient-preview {
    width: 120px;
    height: 120px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ingredient-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   ADMIN ACTION BUTTONS
========================================= */

.admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #495057;
    transition: all .15s ease;
}

.admin-action:hover {
    background: rgba(0,0,0,.06);
}

.admin-action.edit:hover {
    color: #0d6efd;
}

.admin-action.details:hover {
    color: #198754;
}

.admin-action.delete:hover {
    color: #dc3545;
}

/* =========================================
   ADMIN PAGE HEADER
========================================= */

.admin-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary-green);
}

.admin-page-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}


/* =========================================
   ADMIN BUTTONS
========================================= */

.btn-admin-primary {
    background: var(--body-bg);
    border: 2px solid var(--border-highlight);
    color: var(--color-text);
    border-radius:35px;
    font-weight: 300;
    padding: 8px 16px;
    margin-bottom:10px;
}

.btn-admin-primary:hover {
    background: var(--color-inner);
    border: 2px solid var(--border-highlight);
}


/* =========================================
   TABLE STYLING
========================================= */

.admin-table {
    margin-bottom: 0;
}

.admin-table thead th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    border-bottom: 2px solid #e3e3e3;
}

.admin-table tbody tr {
    border-bottom: 1px solid #ececec;
}

.admin-table tbody tr:hover {
    background: rgba(0,0,0,.025);
}


/* =========================================
   INGREDIENT TEXT
========================================= */

.ingredient-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
}


/* =========================================
   INGREDIENT ICON
========================================= */

.ingredient-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}


/* =========================================
   EDIT BUTTON
========================================= */

.btn-admin-edit {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #495057;
}

.btn-admin-edit:hover {
    background: rgba(0,0,0,.05);
    color: var(--primary-green);
}



/* =========================================
   ADMIN FORM WRAPPER
========================================= */

.admin-form-wrapper {
    max-width: 900px;
    width: 70%;
    margin: 40px auto;
}

/* =========================================
   ADMIN FORM GRID
========================================= */

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* =========================================
   ADMIN FORM LABEL
========================================= */

.admin-form-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}

/* =========================================
   ADMIN FORM INPUT
========================================= */

.admin-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

/* =========================================
   ADMIN IMAGE PREVIEW
========================================= */

.admin-image-preview {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fafafa;
}

.admin-image-preview img {
    max-width: 50px;
    max-height: 50px;
}

/* =========================================f
   ADMIN FORM ACTIONS
========================================= */

.admin-form-actions {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}

/* force uppercase admin buttons */

.admin-btn {
    text-transform: uppercase;
    letter-spacing: .04em;
}





/* =========================================
   LIGHTBOX THEME + LAYOUT
========================================= */

/* light mode / dark mode empty preview text */
.lightboxouter .empty-preview p {
    color: var(--color-grey);
}

[data-theme="dark"] .lightboxouter .empty-preview p {
    color: var(--color-grey-light);
}

/* dark theme URL meta block */
[data-theme="dark"] .url-meta {
    background: #1e1e1e;
    border-radius: 4px;
    padding: 4px;
}

[data-theme="dark"] .url-meta-card,
[data-theme="dark"] .url-preview-card {
    background: linear-gradient(180deg, rgba(38,39,44,0.92), rgba(30,30,30,0.98));
    border-color: rgba(224,221,130,0.18);
    box-shadow: 0 16px 32px rgba(0,0,0,0.34);
}

[data-theme="dark"] .url-meta-card-description,
[data-theme="dark"] .url-preview-card-description {
    color: var(--color-grey-light);
}

/* list group styling inside lightbox */
.lightboxouter .list-group {
    border: none;
    color: var(--color-grey);
}

.lightboxouter .list-group span {
    color: var(--color-grey);
    font-size: .9rem;
}

.lightboxouter .list-group .list-group-item i {
    color: var(--color-grey);
    font-size: 1.5rem;
}

.lightboxouter .list-group-item {
    background: var(--color-inner);
    color: var(--color-highlight);
    padding: 5px 13px 13px 13px;
    border: none;
}

/* lightbox shell */
.lightboxouter {
    background: var(--color-outer);
    color: var(--color-text);
    padding: 12px;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.lightboxinner {
    color: var(--color-text);
    padding: 7px 0 7px 7px;
    border-radius: 9px;
    box-sizing: border-box;
    min-height: 0;
    max-height: calc(90vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(140,140,140,.35) transparent;
}

/* scoped text only inside lightbox */
.lightboxinner p,
.lightboxinner h1,
.lightboxinner h2,
.lightboxinner h3,
.lightboxinner h4,
.lightboxinner li {
    color: var(--color-text);
}

/* Menu logout <button> */


.lightboxinner button,
.lightboxouter button {
    color: var(--color-primary-light) !important;
    border-radius: 9px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}

.lightboxinner button:hover,
.lightboxouter button:hover {
    color: var(--color-primary-light) !important;
    border-radius: 9px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}


[data-theme='dark'] .lightboxinner button,
[data-theme='dark'] .lightboxouter button {
    color: var(--color-primary) !important;
    border-radius: 9px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}

[data-theme='dark'] .lightboxinner button:hover,
[data-theme='dark'] .lightboxouter button:hover {
    color: var(--color-primary) !important;
    border-radius: 9px;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}

.lightboxinner h3 {
    font-family: 'Suez One';
    font-size: 24px;
    text-align: center;
    color: var(--color-primary);
}

/* headings / copy inside lightbox */
.lightboxouter h3 {
    font-family: 'Suez One';
    font-size: 24px;
    text-align: center;
    color: var(--color-text);
}

.lightboxouter p {
    text-align: center;
    font-family: "Gabarito", sans-serif;
    color: var(--color-text);
    margin-bottom: 15px;
    font-size: 17px;
    line-height: 25px;
}

body.lightbox-active {
    overflow: hidden;
}

#lightbox-image {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* =========================================
   LIGHTBOX LAYOUT
========================================= */

.lightbox {
    overflow: hidden !important;
}

.lightbox-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100vh;
    padding: 16px;
    overflow: visible !important;
    box-sizing: border-box;
}

.lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 820px);
    max-height: 90vh;
    overflow: visible !important;
    box-sizing: border-box;
}

/* =========================================
   LIGHTBOX INNER SCROLLBAR
========================================= */

.lightboxinner::-webkit-scrollbar {
    width: 6px;
}

.lightboxinner::-webkit-scrollbar-track {
    background: transparent;
}

.lightboxinner::-webkit-scrollbar-thumb {
    background: rgba(140,140,140,.35);
    border-radius: 999px;
}

.lightboxinner::-webkit-scrollbar-thumb:hover {
    background: rgba(140,140,140,.6);
}

.lightboxinner::-webkit-scrollbar-corner {
    background: transparent;
}

/* =========================================
   LIGHTBOX CLOSE BUTTON
========================================= */

.lightbox-close,
#lightboxout {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 200;
    background: #e0dd82;
    font-size: 20px;
    text-align: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #111;
    font-family: 'Suez One';
}

#lightboxout:hover,
.lightbox-close:hover {
    color: var(--color-highlight);
}

/* =========================================
   LIGHTBOX FORM CONTROLS
========================================= */

.lightboxinner .form-control,
.lightboxinner .form-select,
.lightboxinner .form-check-input,
.lightboxinner .btn,
.lightboxinner input[type='file'] {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: .375rem !important;
    padding: .9rem .9rem !important;
    color: var(--color-text) !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    transition: none !important;
    outline: none;
    background: var(--color-inner);
}

.lightboxinner .form-control input {
    background: var(--color-inner);
}

.lightboxinner .form-control:focus,
.lightboxinner .form-select:focus,
.lightboxinner .form-check-input:focus-visible,
.lightboxinner .btn:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* select arrow */
.lightboxinner .form-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' \
             viewBox='0 0 24 24' fill='none' stroke='%23d1d1d1' \
             stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
             <polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px 14px;
}

[data-theme='dark'] .lightboxinner .form-select {
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' \
             viewBox='0 0 24 24' fill='none' stroke='%23e4e6eb' \
             stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
             <polyline points='6 9 12 15 18 9'/></svg>");
}

/* file inputs */
.lightboxinner input[type='file'],
.lightboxinner .form-control[type='file'] {
    background-color: var(--color-inner) !important;
    color: var(--color-text) !important;
}

.lightboxinner input[type='file']::file-selector-button {
    padding: .6rem 1rem;
    margin-right: 1rem;
    border: none;
    border-radius: .3rem 0 0 .3rem;
    background: var(--color-outer);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lightboxinner input[type='file']:hover::file-selector-button,
.lightboxinner .form-control[type='file']::file-selector-button:hover {
    background: var(--color-primary) !important;
    color: var(--color-text) !important;
}

.lightboxinner input[type='file']:focus-visible::file-selector-button {
    outline: 2px solid pink;
    outline-offset: 2px;
    background: var(--color-primary);
    color: var(--color-text);
}

.lightboxinner input[type='file']:active::file-selector-button {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    background: var(--color-middle);
}

[data-theme='dark'] .lightboxinner input[type='file']::file-selector-button,
[data-theme='dark'] .lightboxinner input[type='file']::-moz-file-upload-button {
    background: var(--color-outer);
    color: var(--color-text);
}

[data-theme='dark'] .lightboxinner input[type='file']:hover::file-selector-button,
[data-theme='dark'] .lightboxinner input[type='file']:hover::-moz-file-upload-button,
[data-theme='dark'] .lightboxinner input[type='file']:focus-visible::file-selector-button,
[data-theme='dark'] .lightboxinner input[type='file']:focus-visible::-moz-file-upload-button {
    background: var(--color-middle);
    color: var(--color-text);
}

[data-theme='dark'] .lightboxinner input[type='file']:active::file-selector-button,
[data-theme='dark'] .lightboxinner input[type='file']:active::-moz-file-upload-button {
    background: var(--color-middle);
}

/* checkboxes / radios */
.lightboxinner .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.lightboxinner .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-accent);
}

/* button theming */
.lightboxinner .btn,
.lightboxouter [type="submit"] {
    background: var(--color-inner);
    color: var(--color-text);
    font-weight: 600;
}

.lightboxinner .btn:hover,
.lightboxouter [type="submit"]:hover {
    background: var(--color-outer);
}

.upload-progress-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        color-mix(in srgb, var(--color-inner) 88%, black 12%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 24px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
    padding-top: .2rem;
}

.upload-progress-bar {
    height: 3px;
    width: 34%;
    margin: 0 .35rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-highlight) 60%, var(--color-primary-light));
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-highlight) 35%, transparent);
    animation: upload-progress-slide 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

.upload-progress-label {
    padding: .55rem .85rem .62rem;
    font-size: .79rem;
    font-weight: 600;
    letter-spacing: .035em;
    color: color-mix(in srgb, var(--color-text) 78%, var(--color-grey) 22%);
    text-align: left;
    text-transform: uppercase;
}

@keyframes upload-progress-slide {
    0% {
        transform: translateX(-120%);
        opacity: .45;
    }

    20% {
        opacity: .85;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translateX(250%);
        opacity: .45;
    }
}

[data-theme='dark'] .lightboxinner .btn,
[data-theme='dark'] .lightboxouter [type="submit"] {
    background: var(--color-inner);
    color: var(--color-text);
}

[data-theme='dark'] .lightboxinner .btn:hover,
[data-theme='dark'] .lightboxouter [type="submit"]:hover {
    background: var(--color-outer);
}

/* kill old Chromium scrollbar corner/button artifacts */
.lightboxinner::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.lightboxinner::-webkit-scrollbar-corner {
    background: transparent;
    width: 0;
    height: 0;
}

.lightboxinner {
    scrollbar-gutter: auto;
}







/* ===============================
   SUPPORT Cards – POLISHED UI
================================ */
.support-cards {
    margin-top: 15px;
}

.support-card {
    background: var(--body-bg);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    height: 100%;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.support-card i {
    font-size: 32px;
    margin-bottom: 10px;
    color:var(--color-grey);
}

.support-card h6 {
    margin-bottom: 6px;
    padding-top:10px;
    font-weight: 600;
    color: var(--color-primary);
}

.support-card p {
    font-size: 0.85rem;
    color:var(--color-text);
    margin: 0;
}




/* ===============================
   SUPPORT FORM – POLISHED UI
================================ */

.support-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding: 1.5rem;
    border-radius: 18px;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
}

/* labels */
.support-form label {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-grey);
    margin-bottom: 0.25rem;
}

/* inputs */
.support-form .form-control,
.support-form .form-select {
    background: var(--color-outer);
    border: 1px solid var(--border-color);
    color: var(--color-text);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.support-form .form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d8ddb4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
    padding-right: 2.9rem;
}

.support-form .form-select option {
    color: var(--color-text);
    background: var(--color-inner);
}

/* focus state (this is the magic) */
.support-form .form-control:focus,
.support-form .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(125,138,1,0.25);
    background: var(--color-inner);
    outline: none;
}

/* textarea specifically */
.support-form textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* button */
.support-form .btn {
    border-radius: 42px;
    padding: 0.72rem 1.5rem;
    font-weight: 600;
    letter-spacing: .05em;
    align-self: flex-start;
    color: #f8f6e7;
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--color-primary) 58%, #f3efc8 42%);
    box-shadow: 0 14px 30px rgba(13, 18, 14, 0.18);
    transition: all 0.2s ease;
}

/* button hover */
.support-form .btn:hover {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-light) 82%, #f3efc8 18%), color-mix(in srgb, var(--color-primary) 88%, #dbe8a8 12%));
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(13, 18, 14, 0.24);
}

.support-form .btn:focus,
.support-form .btn:focus-visible {
    color: #fff;
    box-shadow: 0 0 0 3px rgba(125, 138, 1, 0.28), 0 18px 36px rgba(13, 18, 14, 0.24);
}

/* subtle section list */
.support-list {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1rem;
}

.support-list li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

/* ===============================d
   SUPPORT HERO (Chef Block)
================================ */

.support-hero {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--color-inner);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
    margin-bottom: 1.5rem;
}

/* chef image */
.support-chef img {
    width: 100%;
    max-width: 120px;
    border-radius: 16px;
}

/* text */
.support-copy h3 {
    font-family: 'Suez One';
    margin-bottom: 0.5rem;
}

.support-copy p {
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

/* list spacing */
.support-list {
    margin: 0.5rem 0;
    padding-left: 1rem;
}

.support-list li {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

/* ===============================
   Standards Page – FIXED GRID SYSTEM
   

/* ========================= */
/* PAGE LAYOUT */
/* ========================= */
.stoner-standards {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px 80px;
}

/* ========================= */
/* HEADER */
/* ========================= */
.standards-page header {
    margin: 0px 0;
    text-align:center;
}

.standards-header h1 {
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.standards-header p {
    color:var(--color-text);
    font-size: 1rem;
    line-spacing:1.3;sDEW
}

.standards-mission {
    padding: 1.8rem 1.4rem 1.4rem 1.4rem;
    margin: 1rem 0;
    border-radius: 42.0px;
    border: 1px solid var(--border-color);
}

.standards-mission h2 {
   color:var(--color-primary);
}

.standards-mission blockquote {
    margin: 32px auto;
    max-width: 700px;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text);
    padding: 40px 20px 30px;
    position: relative;
    font-style: italic;
}

/* TOP QUOTE */
.standards-mission blockquote::before {
    content: "“";
    position: absolute;
    top: 0;
    left: 0;
    font-size:60px;
    line-height: 1.2;
    font-weight:bolder;
    color: var(--color-primary);
    font-family:'Times New Roman', Times, serif;
}

/* BOTTOM QUOTE */
.standards-mission blockquote::after {
    content: "”";
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 60px;
    line-height: .2;
    font-weight: bolder;
    color: var(--color-primary);
    font-family: 'Times New Roman', Times, serif;

}
/* SECTION SPACING */
/* ========================= */


.standards-block{
    margin: 42.0px 0;
    padding: 1.8rem 1.4rem 1.4rem 1.4rem;
    border-bottom:1px solid var(--border-highlight);
}


.standards-block h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-text);
}

.standards-block h3 {ffffffffffffffffffffffffffffffffffffffffffffffffff
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 42.0px;
    margin-bottom: 5px;
    color: var(--color-text);
}

.standards-block p {
    margin-bottom: 12px;
    line-height: 1.5;
    color: var(--color-text);
}

/* ========================= */
/* LISTS */
/* ========================= */
.standards-section ul {
    padding-left: 18px;
    margin-bottom: 15px;
}

.standards-section li {
    margin-bottom: 6px;
    opacity: 0.9;
}

/* ========================= */
/* BLOCKQUOTE */
/* ========================= */
blockquote {
    margin-top: 15px;
    padding-left: 15px;
    border-left: 3px solid var(--primary-green);
    font-style: italic;
    width:75%;
}

/* ========================= */
/* SIDEBAR (MINIMAL) */
/* ========================= */
.standards-sidebar {
    position: relative; 
    padding: 10px 0;
}

.sidebar-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* ========================= */
/* SIDEBAR NAV */
/* ========================= */
 

.standards-nav {
    position: relative; /* 🔥 FIX */
    max-height: none;
    overflow: visible;
    padding-bottom: 20px;
}

/* each item */
.standards-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* link */
.standards-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    opacity: 0.7;
    transition: all 0.25s ease;
}

/* hover */
.standards-nav a:hover {
    opacity: 1;
    padding-left: 10px;
}

/* ========================= */
/* ARROW */
/* ========================= */
.standards-nav a::after {
    content: "→";
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.25s ease;
}

/* show arrow on hover */
.standards-nav a:hover::after {
    opacity: 0.7;
    transform: translateX(0);
}

/* ========================= */
/* FEATURED BLOCK CONTAINER */
/* ========================= */
.highlight-block {
    margin: 60px 0;
    padding: 40px 30px;
    border: 1px solid var(--border-color);
    border-radius: 42px; /* your signature */
}

/* ========================= */
/* GRID */
/* ========================= */
.what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 25px;
}

/* ========================= */
/* COLUMN */
/* ========================= */
.what-col {
    text-align: left;
}

/* ========================= */
/* ICON (BIG + CENTERED) */
/* ========================= */
.what-header {
    text-align: center;
    margin-bottom: 20px;
}

.what-header i {
    font-size: 90px; /* 👈 BIG ICON */
    line-height: 1;
}

/* COLORS */
.we-are i {
    color: #4caf50;
}

.we-are-not i {
    color: #ff4d4d;
}

/* ========================= */
/* TEXT */
/* ========================= */
.what-col h3 {
    margin-bottom: 10px;
    font-weight: 600;
}

.what-col ul {
    padding-left: 18px;
}

.what-col li {
    margin-bottom: 8px;
    line-height: 1.5;
    opacity: 0.9;
}

/* ========================= */
/* FEATURE ROW LAYOUT */
/* ========================= */
.feature-row {
    display: flex;
    align-items: start;  
    gap: 20px;
    margin-bottom: 30px;
}

/* ========================= */
/* ICON */
/* ========================= */
.feature-icon i {
    font-size: 48px;
    color: var(--primary-green);
    line-height: 1;

}

/* ========================= */
/* CONTENT */
/* ========================= */
.feature-content h3 {
    margin-bottom: 6px;
    font-weight: 600;
    margin-top:0px;
}

.feature-content p {
    margin-bottom: 8px;
    padding-bottom:8px;

}

.feature-content ul {
    padding-left: 18px;
}

.feature-content li {
    margin-bottom: 6px;
}


/* ========================= */
/* MOBILE */
/* ========================= */
@media (max-width: 768px) {
    .what-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}


/* ===================================== */
/* LEGAL / TERMS / STANDARDS STYLING     */
/* ===================================== */

.legal-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* Header */
.legal-header h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
}
.legal-header  {
    text-align:left;
}
.legal-header p {
    font-size: 0.9rem;
    color: var(--color-text);
    text-align: left;
}

/* Section spacing */
.legal-section {
    margin-bottom: 30px;
}

/* Section titles */
.legal-section h2 {
    font-size: 1.4rem; /* 👈 smaller than default */
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;

}

/* Paragraphs */
.legal-section p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--color-text);
}

/* Lists */
.legal-section ul {
    padding-left: 18px;
    margin-bottom: 12px;
}

.legal-section li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 9px;
}

/* Links */
.legal-section a {
    color:var(--color-primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
    color: var(--color-primary-light);
}

/* =========================================
   MEDIA VIEWER OVERLAY
========================================= */
.media-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001 !important;
    background: rgba(10, 22, 16, 0.98);
    background-image: radial-gradient(circle at top, rgba(64, 110, 74, 0.18), rgba(68, 16, 26, 0.26) 42%, rgba(8, 16, 12, 0.98) 78%);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: auto;
}

.media-viewer-shell {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    color: #f4f7f2;
    isolation: isolate;
    pointer-events: auto;
}

.media-viewer-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0dd82;
    color: #111 !important;
    font-family: 'Suez One';
    font-size: 20px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1000010 !important;
    pointer-events: auto;
}

.media-viewer-close-btn:hover {
    color: var(--color-highlight) !important;
}

.media-viewer-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 3.5rem 1rem 0;
}

.media-viewer-grid-header h3,
.media-viewer-grid-header p {
    margin: 0;
    color: #f4f7f2;
}

.media-viewer-grid-header p {
    opacity: 0.75;
    font-size: 0.95rem;
}

.media-viewer-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    padding-right: 0.25rem;
    position: relative;
    z-index: 1000002;
    pointer-events: auto;
}

.media-viewer-grid-item {
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
    border-radius: 18px;
    position: relative;
    z-index: 1000003;
    pointer-events: auto;
}

.media-viewer-grid-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.media-viewer-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(56px, 88px) 1fr minmax(56px, 88px);
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1000002;
    pointer-events: auto;
}

.media-viewer-media-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1000002;
}

.media-viewer-arrow {
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
    z-index: 1000010;
    pointer-events: auto;
}

.media-viewer-arrow:disabled {
    opacity: 0.28;
}

.media-viewer-actions {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.55rem;
    z-index: 1000010;
    pointer-events: auto;
}

.media-viewer-action-btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(0,0,0,0.32);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.media-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 0.5rem;
    position: relative;
    z-index: 1000010;
    pointer-events: auto;
}

.media-viewer-link {
    border: none;
    background: transparent;
    color: #d7f7d7 !important;
    padding: 0;
    font-weight: 600;
}

.media-viewer-count {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
}

.media-viewer-filmstrip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    position: relative;
    z-index: 1000010;
    pointer-events: auto;
}

.media-viewer-thumb {
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 auto;
    pointer-events: auto;
}

.media-viewer-thumb.active {
    border-color: #d7f7d7;
}

.media-viewer-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 767.98px) {
    .media-viewer-shell {
        padding: 0.75rem;
    }

    .media-viewer-stage {
        grid-template-columns: 44px 1fr 44px;
        gap: 0.5rem;
    }

    .media-viewer-arrow {
        width: 42px;
        height: 42px;
    }

    .media-viewer-image {
        max-height: calc(100vh - 220px);
    }

    .media-viewer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.user-gallery-card {
    padding: 1.2rem;
}

.user-gallery-header {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: .7rem;
    margin-bottom: 1rem;
}

.user-gallery-title {
    color: var(--color-text);
    font-size: 1.15rem;
    margin: 0 0 .35rem 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.user-gallery-title i {
    font-size: 1.35rem;
    color: var(--color-text);
}

.user-gallery-grid {
    margin-bottom: .4rem;
}

.user-gallery-empty {
    min-height: 60px;
    display: flex;
    align-items: center;
}

.user-gallery-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.user-gallery-action-btn {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    padding: .45rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    transition: all ease .25s;
}

.user-gallery-action-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(255,255,255,.05);
}

.user-gallery-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.user-gallery-primary:hover {
    color: #fff;
    filter: brightness(.96);
}