/* =====================================================
   ROYAL CAFE
   DRINKS MENU
   Brand Theme: Royal Blue + Gold + Black
   ===================================================== */


/* =====================================================
   COLORS
   ===================================================== */

:root {

    /* Background */
    --bg-dark: #050608;
    --bg-main: #090b0f;
    --bg-secondary: #10141a;
    --card-bg: #141922;

    /* Royal Blue - inspired by logo */
    --royal-blue: #124f86;
    --royal-blue-light: #1768a8;
    --royal-blue-dark: #0b355c;

    /* Gold - inspired by logo */
    --gold: #c6921a;
    --gold-light: #e0ad32;
    --gold-bright: #f0c451;
    --gold-dark: #8c6511;

    /* Text */
    --white: #ffffff;
    --text: #f4f4f4;
    --text-soft: #d4d7dc;
    --muted: #858d98;

    /* Borders */
    --border: rgba(255, 255, 255, 0.065);
    --blue-border: rgba(23, 104, 168, 0.35);
    --gold-border: rgba(198, 146, 26, 0.35);
}


/* =====================================================
   RESET
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

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

html {
    scroll-behavior: smooth;
}

body.sub-page {

    min-height: 100vh;

    color: var(--white);

    direction: rtl;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(18, 79, 134, 0.16),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 40%,
            rgba(198, 146, 26, 0.035),
            transparent 30%
        ),
        var(--bg-dark);

    -webkit-tap-highlight-color: transparent;
}


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

.page-header {

    width: 100%;
    height: 78px;

    position: relative;
    z-index: 200;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 20px;

    background:
        linear-gradient(
            180deg,
            #07090c 0%,
            #090b0f 100%
        );

    border-bottom: 1px solid var(--border);
}


/* =====================================================
   BACK BUTTON
   ===================================================== */

.back-btn {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            #151b24,
            #0e1218
        );

    border: 1px solid var(--blue-border);

    text-decoration: none;

    font-size: 15px;

    transition: all 0.25s ease;
}

.back-btn:hover {

    color: var(--gold-bright);

    border-color: var(--gold-border);

    background:
        rgba(18, 79, 134, 0.18);

    transform: translateX(3px);
}


/* =====================================================
   HEADER TITLE
   ===================================================== */

.page-header h1 {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    color: var(--gold-light);

    font-size: 20px;
    font-weight: 700;

    white-space: nowrap;

    letter-spacing: -0.3px;
}


/* =====================================================
   HEADER ICON
   ===================================================== */

.header-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--royal-blue-light);

    background:
        rgba(18, 79, 134, 0.12);

    border: 1px solid var(--blue-border);

    font-size: 18px;

    transition: all 0.25s ease;
}

.header-icon:hover {

    color: var(--gold-bright);

    border-color: var(--gold-border);

    background:
        rgba(198, 146, 26, 0.08);
}


/* =====================================================
   CATEGORY TABS
   ===================================================== */

.category-tabs {

    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    gap: 9px;

    overflow-x: auto;

    padding: 13px 18px;

    background:
        rgba(7, 9, 12, 0.94);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid var(--border);

    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   TAB
   ===================================================== */

.tab {

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 9px 16px;

    border-radius: 25px;

    color: #9aa2ad;

    background:
        #131820;

    border: 1px solid rgba(255, 255, 255, 0.06);

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tab i {

    font-size: 13px;

    transition: color 0.25s ease;
}


/* =====================================================
   TAB HOVER
   ===================================================== */

.tab:hover {

    color: var(--white);

    border-color: var(--blue-border);

    background:
        rgba(18, 79, 134, 0.12);
}


/* =====================================================
   ACTIVE TAB
   ===================================================== */

.tab.active {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--royal-blue-light),
            var(--royal-blue)
        );

    border-color:
        rgba(23, 104, 168, 0.75);

    box-shadow:
        0 5px 18px rgba(18, 79, 134, 0.30);

    transform: translateY(-1px);
}

.tab.active i {

    color: var(--gold-bright);
}


/* =====================================================
   MAIN CONTAINER
   ===================================================== */

.menu-list-container {

    width: 100%;

    max-width: 650px;

    margin: 0 auto;

    padding: 18px 16px 50px;
}


/* =====================================================
   NOTE / SYRUP MESSAGE
   ===================================================== */

.menu-note {

    margin-bottom: 25px;

    padding: 12px 15px;

    border-radius: 13px;

    color: #d9c690;

    background:
        linear-gradient(
            135deg,
            rgba(198, 146, 26, 0.09),
            rgba(198, 146, 26, 0.025)
        );

    border: 1px solid var(--gold-border);

    text-align: center;

    font-size: 11px;

    line-height: 1.9;
}

.menu-note p {
    margin: 0;
}

.menu-note i {

    margin-left: 5px;

    color: var(--gold-bright);
}


/* =====================================================
   MENU SECTIONS
   ===================================================== */

.menu-section {

    display: none;

    animation:
        sectionFade 0.35s ease;
}

.menu-section.active {
    display: block;
}


/* =====================================================
   SECTION TITLE
   ===================================================== */

.section-title {

    position: relative;

    display: flex;
    align-items: baseline;

    gap: 9px;

    margin-bottom: 18px;

    padding-bottom: 11px;

    color: var(--gold-light);

    font-size: 19px;
    font-weight: 700;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}


/* Blue line under title */

.section-title::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;

    width: 58px;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--royal-blue-light),
            var(--gold)
        );
}


/* English title */

.section-title span {

    color: var(--royal-blue-light);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1px;

    direction: ltr;
}


/* =====================================================
   MENU ITEM
   ===================================================== */

.menu-item {

    width: 100%;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 16px;

    margin-bottom: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid var(--border);

    border-radius: 14px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

    animation:
        itemFade 0.45s ease both;
}


/* =====================================================
   ITEM HOVER
   ===================================================== */

.menu-item:hover {

    transform: translateX(-4px);

    border-color:
        rgba(23, 104, 168, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(18, 79, 134, 0.11),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   ITEM INFO
   ===================================================== */

.item-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


/* Persian name */

.item-info h3 {

    color: var(--text);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;
}


/* English name */

.en-name {

    color: #727b87;

    font-size: 10px;

    letter-spacing: 0.7px;

    direction: ltr;

    text-align: right;
}


/* =====================================================
   PRICE
   ===================================================== */

.item-price {

    flex-shrink: 0;

    min-width: 48px;

    padding: 6px 9px;

    border-radius: 8px;

    color: var(--gold-bright);

    background:
        rgba(198, 146, 26, 0.07);

    border:
        1px solid rgba(198, 146, 26, 0.17);

    font-size: 13px;

    font-weight: 700;

    text-align: center;

    direction: ltr;
}


/* =====================================================
   ANIMATION
   ===================================================== */

@keyframes sectionFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


@keyframes itemFade {

    from {
        opacity: 0;
        transform: translateY(7px);
    }

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


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 480px) {

    .page-header {

        height: 72px;

        padding:
            12px 14px;
    }


    .page-header h1 {

        font-size: 18px;
    }


    .back-btn,
    .header-icon {

        width: 38px;
        height: 38px;

        font-size: 14px;
    }


    .category-tabs {

        padding:
            11px 13px;

        gap: 7px;
    }


    .tab {

        padding:
            8px 13px;

        font-size: 12px;
    }


    .tab i {

        font-size: 11px;
    }


    .menu-list-container {

        padding:
            16px 13px 40px;
    }


    .menu-note {

        padding:
            10px 11px;

        font-size: 10.5px;
    }


    .section-title {

        font-size: 17px;

        margin-bottom: 15px;
    }


    .section-title span {

        font-size: 9px;
    }


    .menu-item {

        min-height: 67px;

        padding:
            11px 13px;

        border-radius: 12px;
    }


    .item-info h3 {

        font-size: 14px;
    }


    .en-name {

        font-size: 9px;
    }


    .item-price {

        min-width: 43px;

        padding:
            6px 7px;

        font-size: 11px;
    }
}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 350px) {

    .page-header h1 {
        font-size: 16px;
    }


    .tab {

        padding:
            7px 10px;
    }


    .tab i {
        display: none;
    }


    .menu-item {

        padding:
            10px 11px;
    }


    .item-info h3 {

        font-size: 13px;
    }
}


/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 768px) {

    .page-header {

        padding-left: 30px;
        padding-right: 30px;
    }


    .category-tabs {

        justify-content: center;
    }


    .menu-list-container {

        padding-top: 25px;
    }


    .menu-item {

        min-height: 76px;
    }


    .item-info h3 {

        font-size: 16px;
    }


    .item-price {

        font-size: 14px;
    }
}