/*
 * Rosevilla Bar — Tropical Lagoon theme
 *
 * A fresh, light, premium tropical direction based on the selected concept:
 *   - sunset resort header
 *   - soft sea-glass/aqua page background
 *   - warm ivory cocktail cards
 *   - restrained sand/gold borders
 *   - coral call-to-action buttons
 *   - subtle botanical texture
 *
 * This file is designed to be loaded AFTER the shared style.css.
 *
 * Expected assets:
 *   /static/themes/tropical/navbar.png
 *   /static/themes/tropical/tile.png   (optional card texture / foliage artwork)
 */

.theme-tropical {
    color-scheme: light;

    /* Page and general surfaces */
    --bg: #9bcfce;
    --panel: rgba(250, 248, 239, 0.96);
    --panel-soft: rgba(232, 244, 241, 0.96);
    --text: #173f40;
    --muted: #617b78;

    /* Fine sand / champagne borders */
    --border: #cdbb91;
    --border-soft: rgba(184, 164, 119, 0.58);
    --border-faint: rgba(91, 126, 124, 0.18);

    /* Lagoon teal */
    --primary: #397f80;
    --primary-light: #74b5b4;
    --primary-soft: rgba(57, 127, 128, 0.14);

    /* Sunset coral */
    --accent: #ed745f;
    --accent-soft: rgba(237, 116, 95, 0.15);
    --accent-border: rgba(218, 96, 78, 0.52);

    /* Status colours */
    --danger: #c94f50;
    --danger-dark: #f5d7d4;
    --success: #71a76e;
    --success-light: #2f754d;

    --warning-bg: rgba(255, 243, 207, 0.96);
    --warning-border: #d8ad54;
    --warning-text: #72551f;

    /*
     * Soft sea-glass background.
     * No large page image is required; the layered gradients create a
     * lightly mottled resort / watercolour finish at every screen size.
     */
    --page-background-image:
        radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.44), transparent 31%),
        radial-gradient(circle at 86% 78%, rgba(47, 119, 122, 0.17), transparent 38%),
        radial-gradient(circle at 48% 48%, rgba(255, 255, 255, 0.12), transparent 42%),
        repeating-linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 6px
        ),
        linear-gradient(180deg, #bfe2de 0%, #a7d7d4 43%, #8fc9c9 100%);

    /* Sunset resort navbar */
    --topbar-background:
        linear-gradient(
            90deg,
            rgba(16, 41, 43, 0.42) 0%,
            rgba(16, 41, 43, 0.08) 34%,
            rgba(16, 41, 43, 0.06) 63%,
            rgba(16, 41, 43, 0.48) 100%
        ),
        url("/static/themes/tropical/navbar.png") center 52% / cover no-repeat;
    --topbar-link: #fffdf6;

    /* Warm ivory cards; texture is added below with ::before */
    --card-background:
        linear-gradient(180deg, #fffdf7 0%, #fbf7ec 58%, #f5eddd 100%);
    --card-border: #d8c8a3;
    --card-text: #234c4d;
    --card-muted: #6d7972;
    --card-inner-glow: rgba(255, 255, 255, 0.72);

    /* Form controls */
    --input-background: rgba(255, 253, 247, 0.94);
    --button-background: linear-gradient(135deg, #f08a6c, #e85e4d);
    --button-text: #fffdf8;

    /* Filter pills */
    --filter-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 241, 229, 0.96));
    --filter-text: #285f60;
    --filter-border: rgba(164, 151, 118, 0.46);

    --filter-hover-background:
        linear-gradient(180deg, #f8fbf7, #e8f2ed);
    --filter-hover-text: #1e5556;
    --filter-hover-border: #7fa6a1;

    --active-filter-background:
        linear-gradient(135deg, #397f80, #4b9998);
    --active-filter-text: #fffdf7;
    --active-filter-border: #d7c18b;

    /* Custom drink and main call-to-action */
    --custom-button-background:
        linear-gradient(135deg, #f39a73, #eb6856);
    --custom-button-text: #fffdf8;
    --custom-button-border: rgba(196, 96, 72, 0.50);

    --custom-button-hover-background:
        linear-gradient(135deg, #f5a782, #e95c4e);
    --custom-button-hover-text: #ffffff;
    --custom-button-hover-border: #cf765e;

    /* Badges */
    --badge-background: #397f80;
    --badge-text: #fffdf7;
    --badge-alcohol-background: #d5a33a;
    --badge-alcohol-text: #fffdf7;
    --badge-mocktail-background: #5c9680;
    --badge-mocktail-text: #fffdf7;

    /* Supporting UI */
    --rating-text: #b98b2d;
    --modal-overlay: rgba(18, 56, 58, 0.72);
    --details-image-background: #f5f0e3;
    --details-description: #455f5d;
    --star-unselected: #a48e62;

    --icon-button-background:
        linear-gradient(180deg, #fffdf7, #f2ebdb);
    --icon-button-border: #d5c49f;

    --ready-background: rgba(113, 167, 110, 0.22);
    --ready-card-background:
        linear-gradient(135deg, rgba(171, 216, 164, 0.72), rgba(168, 218, 213, 0.66));
    --stock-out-text: #a33f42;

    --unavailable-background: #d5d1c5;
    --unavailable-text: #807c73;

    /* Soft, elegant glows rather than neon */
    --glow-primary: rgba(44, 103, 105, 0.20);
    --glow-accent: rgba(224, 100, 79, 0.22);
    --primary-glow-strong: rgba(57, 127, 128, 0.58);
    --accent-glow-strong: rgba(232, 94, 77, 0.66);
    --success-glow: rgba(113, 167, 110, 0.26);
    --success-glow-soft: rgba(113, 167, 110, 0.18);
    --success-glow-strong: rgba(78, 139, 86, 0.48);

    /* Tom Select / enhanced selects */
    --select-background: rgba(255, 253, 247, 0.98);
    --select-border: rgba(164, 151, 118, 0.52);
    --select-placeholder: #82928e;
    --select-focus-border: #5d9290;
    --select-focus-shadow: rgba(57, 127, 128, 0.17);
    --select-hover: rgba(57, 127, 128, 0.12);
    --select-selected: rgba(237, 116, 95, 0.16);

    --mobile-ingredient-background: rgba(255, 253, 247, 0.54);

    font-family: "Segoe UI", Arial, sans-serif;
}


body.theme-tropical {
    background:
        linear-gradient(
            rgba(102, 188, 190, 0.62),
            rgba(75, 166, 170, 0.62)
        ),
        url("/static/themes/tropical/background.png")
        center top / cover fixed no-repeat;

    background-color: #63b9bb;
}

/* ================================================================
   Resort-style sunset topbar
   ================================================================ */

.theme-tropical .topbar {
    position: relative;
    min-height: 112px;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(214, 190, 132, 0.92);
    box-shadow:
        0 8px 24px rgba(32, 87, 89, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.24);
}

.theme-tropical .topbar::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: -16px;
    left: 0;
    height: 16px;
    background: linear-gradient(to bottom, rgba(71, 137, 137, 0.20), transparent);
    pointer-events: none;
}

.theme-tropical .topbar > * {
    position: relative;
    z-index: 1;
}

.theme-tropical .logo img {
    height: clamp(66px, 6vw, 90px);
    filter: drop-shadow(0 2px 8px rgba(15, 43, 44, 0.30));
}

.theme-tropical .topbar a {
    color: #fffdf5;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow:
        0 1px 3px rgba(13, 35, 36, 0.90),
        0 0 7px rgba(13, 35, 36, 0.48);
}

.theme-tropical .topbar a:hover {
    color: #fff3d5;
    opacity: 1;
}


/* ================================================================
   Filters and search
   ================================================================ */

.theme-tropical .menu-top-row {
    margin: 16px 0 14px;
    padding: 13px 18px;
    background: rgba(229, 245, 242, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 18px;
    box-shadow:
        0 7px 22px rgba(48, 101, 103, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.theme-tropical .cat-btn,
.theme-tropical .filter-toggle-btn,
.theme-tropical .custom-drink-btn {
    min-height: 44px;
    padding: 10px 17px;
    box-shadow:
        0 4px 10px rgba(50, 82, 81, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.theme-tropical .cat-btn:hover,
.theme-tropical .filter-toggle-btn:hover,
.theme-tropical .custom-drink-btn:hover {
    transform: translateY(-1px);
}

.theme-tropical .cat-btn.active,
.theme-tropical .filter-toggle-btn.active {
    box-shadow:
        0 7px 16px rgba(41, 100, 102, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.theme-tropical .custom-drink-btn {
    box-shadow:
        0 7px 16px rgba(194, 83, 66, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.theme-tropical .search-bar {
    width: min(1080px, 100%);
    margin: 16px auto 20px;
}

.theme-tropical .search-bar input {
    min-height: 52px;
    padding: 13px 56px 13px 20px;
    color: #244c4d;
    font-size: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 237, 0.97));
    border: 1px solid rgba(188, 169, 124, 0.62);
    border-radius: 999px;
    box-shadow:
        0 8px 22px rgba(42, 94, 96, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.theme-tropical .search-bar input:focus {
    outline: none;
    border-color: #5f9998;
    box-shadow:
        0 0 0 3px rgba(57, 127, 128, 0.13),
        0 8px 22px rgba(42, 94, 96, 0.12);
}

.theme-tropical .search-bar input::placeholder {
    color: #84928e;
    opacity: 1;
}

.theme-tropical .search-bar::after {
    content: "✿";
    position: absolute;
    top: 50%;
    right: 19px;
    color: #c69e54;
    font-size: 24px;
    line-height: 1;
    text-shadow: none;
    pointer-events: none;
    transform: translateY(-50%);
}


/* ================================================================
   Premium ivory cocktail cards
   ================================================================ */

.theme-tropical .cocktail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: none;
    justify-content: stretch;
}

.theme-tropical .cocktail-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(180px, 43%) minmax(0, 57%);
    flex-direction: column;
    overflow: hidden;
    padding: 14px;
    border-width: 1px;
    border-radius: 16px;
    box-shadow:
        0 9px 23px rgba(44, 87, 87, 0.15),
        0 1px 2px rgba(73, 61, 40, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/*
 * Optional subtle paper/botanical texture. The white wash prevents a strong
 * tile image from becoming too busy. Remove this block if tile.png is not used.
 */
.theme-tropical .cocktail-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 242, 0.54)),
        url("/static/themes/tropical/tile.png") bottom center / cover no-repeat;
    opacity: 0.38;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.theme-tropical .cocktail-card > * {
    position: relative;
    z-index: 1;
}

.theme-tropical .cocktail-card:hover {
    transform: translateY(-4px);
    border-color: #c7ae73;
    box-shadow:
        0 14px 30px rgba(44, 87, 87, 0.20),
        0 3px 7px rgba(73, 61, 40, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.theme-tropical .cocktail-card .cocktail-image {
    border: 1px solid rgba(179, 163, 124, 0.24);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(54, 67, 63, 0.10);
}

/* Backward compatibility if a card image has not yet received the class */
.theme-tropical .cocktail-card > img:first-child {
    border: 1px solid rgba(179, 163, 124, 0.24);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(54, 67, 63, 0.10);
}

.theme-tropical .cocktail-card h3 {
    margin: 12px 0 7px;
    color: #28595a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.24rem;
    font-weight: 600;
    line-height: 1.15;
}

.theme-tropical .cocktail-card p {
    color: #4f5e59;
    line-height: 1.36;
}

.theme-tropical .cocktail-card .notes {
    color: #b85d56;
}

.theme-tropical .badge {
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19);
}

.theme-tropical .rating-display {
    color: #b98b2d;
}

.theme-tropical .card-actions-stacked {
    margin-top: auto;
    padding-top: 10px;
}

.theme-tropical .request-btn {
    min-height: 40px;
    color: #fffdf8;
    background: linear-gradient(135deg, #f08a6c, #e75f4e);
    border: 1px solid rgba(190, 78, 62, 0.42);
    border-radius: 9px;
    box-shadow:
        0 5px 12px rgba(180, 76, 60, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-tropical .request-btn:hover {
    background: linear-gradient(135deg, #f39a7b, #e45849);
    box-shadow:
        0 7px 15px rgba(180, 76, 60, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.29);
}

.theme-tropical .rate-btn,
.theme-tropical .fav-btn {
    color: #315f5f;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 239, 224, 0.97));
    border-color: #d5c49f;
    border-radius: 9px;
    box-shadow:
        0 4px 10px rgba(63, 80, 76, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.theme-tropical .rate-btn:hover,
.theme-tropical .fav-btn:hover,
.theme-tropical .fav-btn.active {
    color: #d85e52;
    background: #fffaf0;
    border-color: #cf9c80;
}

.theme-tropical .rate-btn img,
.theme-tropical .fav-btn img {
    opacity: 0.86;
}

.theme-tropical .rate-btn:hover img,
.theme-tropical .fav-btn:hover img,
.theme-tropical .fav-btn.active img {
    opacity: 1;
}
/* new */
/* Favourite selected */
.theme-tropical .fav-btn.active {
    background: linear-gradient(
        135deg,
        #ff6685,
        #e83f5f
    );

    border-color: #c92f4d;

    box-shadow:
        0 0 0 2px rgba(255, 102, 133, 0.22),
        0 4px 10px rgba(170, 42, 67, 0.30);

    transform: scale(1.03);
}


/* White heart when selected */
.theme-tropical .fav-btn.active img {
    opacity: 1;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));

    transform: scale(1.12);
}

/* ================================================================
   General panels, modals and utility pages
   ================================================================ */

.theme-tropical .modal-box,
.theme-tropical .success-box,
.theme-tropical .stock-tile,
.theme-tropical .tv-panel,
.theme-tropical .showcase-card,
.theme-tropical .bartender-item,
.theme-tropical .bartender-card {
    box-shadow:
        0 10px 28px rgba(35, 81, 82, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.theme-tropical input,
.theme-tropical textarea,
.theme-tropical select {
    color: #234849;
}

.theme-tropical input::placeholder,
.theme-tropical textarea::placeholder {
    color: #84928e;
    opacity: 1;
}

.theme-tropical button.secondary,
.theme-tropical .button-link.secondary {
    color: #28595a;
    background: linear-gradient(180deg, #fffdf7, #ede9dc);
}

.theme-tropical .admin-stats span,
.theme-tropical .total-volume-box {
    background: rgba(255, 253, 247, 0.76);
    border-color: rgba(164, 151, 118, 0.42);
}

.theme-tropical .history-row,
.theme-tropical .usage-row,
.theme-tropical .guest-row {
    border-bottom-color: rgba(55, 112, 113, 0.20);
}

.theme-tropical .compact-list::-webkit-scrollbar-thumb {
    background: #6ba4a3;
}


/* ================================================================
   Tom Select
   ================================================================ */

.theme-tropical .ts-wrapper.single .ts-control,
.theme-tropical .ts-control {
    color: #234849 !important;
    background: rgba(255, 253, 247, 0.98) !important;
    border-color: rgba(164, 151, 118, 0.52) !important;
}

.theme-tropical .ts-control input {
    color: #234849 !important;
}

.theme-tropical .ts-control input::placeholder {
    color: #84928e !important;
}

.theme-tropical .ts-dropdown {
    color: #234849 !important;
    background: #fffdf7 !important;
    border-color: rgba(164, 151, 118, 0.52) !important;
    box-shadow: 0 10px 26px rgba(36, 73, 73, 0.16);
}

.theme-tropical .ts-dropdown .option {
    color: #234849;
}

.theme-tropical .ts-dropdown .option:hover,
.theme-tropical .ts-dropdown .active {
    color: #204f50 !important;
    background: rgba(57, 127, 128, 0.12) !important;
}

.theme-tropical .ts-dropdown .selected {
    background: rgba(237, 116, 95, 0.15) !important;
}


/* ================================================================
   Mobile refinement
   ================================================================ */

@media (max-width: 768px) {
    .theme-tropical .topbar {
        min-height: 94px;
        padding: 9px 14px;
    }

    .theme-tropical .logo img {
        height: 62px;
    }

    .theme-tropical .topbar nav,
    .theme-tropical .topbar .nav-links {
        gap: 10px;
    }

    .theme-tropical .topbar a {
        font-size: 0.88rem;
    }

    .theme-tropical .menu-top-row {
        margin-top: 12px;
        padding: 8px;
        background: rgba(229, 245, 242, 0.34);
        border-radius: 14px;
    }

    .theme-tropical .mobile-top-actions {
        gap: 10px;
    }

    .theme-tropical .mobile-top-actions .filter-toggle-btn,
    .theme-tropical .mobile-top-actions .custom-drink-btn {
        min-height: 54px;
        font-size: 1rem;
    }

    .theme-tropical .search-bar {
        margin: 14px 0 18px;
    }

    .theme-tropical .search-bar input {
        min-height: 56px;
        padding-right: 52px;
        font-size: 16px;
    }

    .theme-tropical .search-bar::after {
        right: 16px;
        font-size: 22px;
    }

    .theme-tropical .cocktail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .theme-tropical .cocktail-card {
        padding: 14px;
        border-radius: 17px;
        grid-template-columns: minmax(125px, 42%) minmax(0, 58%);
        box-shadow:
            0 8px 20px rgba(44, 87, 87, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .theme-tropical .cocktail-card h3 {
        font-size: 1.35rem;
    }

    .theme-tropical .request-btn.full {
        min-height: 48px;
    }

    .theme-tropical .rate-btn,
    .theme-tropical .fav-btn {
        min-height: 46px;
    }
}

@media (max-width: 430px) {
    .theme-tropical .topbar {
        min-height: 88px;
        background-position: center 55%;
    }

    .theme-tropical .logo img {
        height: 56px;
    }

    .theme-tropical .topbar a {
        font-size: 0.82rem;
    }

    .theme-tropical .cocktail-card::before {
        opacity: 0.30;
    }
}


/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .theme-tropical .cat-btn,
    .theme-tropical .filter-toggle-btn,
    .theme-tropical .custom-drink-btn,
    .theme-tropical .cocktail-card {
        transition: none;
    }
}


/* Cocktail layout is shared by style.css.
   These two rules prevent an older cached/layout rule winning. */

.theme-tropical .cocktail-card {
    display: grid;
    grid-template-columns: minmax(180px, 43%) minmax(0, 57%);
}

@media (max-width: 768px) {
    .theme-tropical .cocktail-card {
        display: grid;
        grid-template-columns: minmax(125px, 42%) minmax(0, 58%);
    }
}