/* =====================================================
   THE CUP AND THE CONE
   Cozy Handcrafted Hometown Café Theme
===================================================== */


/* ===============================
   GLOBAL
================================ */


* {
    box-sizing:border-box;
}


body {

    margin:0;

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

    color:#263238;

    overflow-x:hidden;

    background-attachment:

        scroll,
        scroll,
        scroll;


    background-image:

        url("../images/doodles/left.svg"),

        url("../images/doodles/right.svg"),

        linear-gradient(
            135deg,
            #fff0d5,
            #d6e8f4
        );


    background-repeat:

        no-repeat,
        no-repeat,
        no-repeat;


    background-position:

        left -120px top 250px,

        right -120px top 850px,

        center;


    background-size:

        650px auto,

        650px auto,

        cover;

}



/* ===============================
   HERO
================================ */


.hero-banner {

    height:620px;

    background-image:

    linear-gradient(
        rgba(25,25,25,.62),
        rgba(35,30,25,.55)
    ),

    url("../images/hero/coffee-shop.jpg");


    background-size:cover;

    background-position:center;


    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    border-radius:0 0 50px 50px;


    border-bottom:

    6px solid #9fc8df;

}


.hero-content h1 {

    font-size:72px;

    color:white;

    margin:0 0 15px;


    text-shadow:

    0 5px 20px #000;

}



.hero-content p {

    font-size:28px;

    color:#dceeff;

    font-weight:600;

}



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


button {

    background:

    linear-gradient(
        135deg,
        #c96b45,
        #477da5
    );


    color:white;

    border:none;


    padding:

    16px 35px;


    border-radius:40px;


    font-size:18px;

    font-weight:bold;


    cursor:pointer;


    box-shadow:

    0 10px 25px rgba(30,50,70,.25);


    transition:.3s;

}



button:hover {

    transform:translateY(-5px);


    background:

    linear-gradient(
        135deg,
        #e28b5d,
        #659bc4
    );

}



/* ===============================
   NAVIGATION
================================ */


nav {

    background:

    linear-gradient(
        90deg,
        #23394f,
        #477da5
    );


    padding:22px;


    text-align:center;


    box-shadow:

    0 5px 15px rgba(0,0,0,.15);

}



nav a {

    color:white;

    text-decoration:none;


    font-size:19px;

    font-weight:bold;


    margin:0 25px;


    transition:.2s;

}



nav a:hover {

    color:#ffd166;

}



/* ===============================
   MAIN AREA
================================ */


main {

    max-width:1200px;

    margin:auto;


    padding:

    75px 35px;


    position:relative;

}


/* background color bubbles */


main::before {

    content:"";

    position:absolute;


    width:350px;

    height:350px;


    background:#9fcce5;


    border-radius:50%;


    left:-180px;

    top:100px;


    opacity:.45;


    z-index:0;

}



main::after {

    content:"";

    position:absolute;


    width:330px;

    height:330px;


    background:#f3cda5;


    border-radius:50%;


    right:-170px;

    bottom:100px;


    opacity:.55;


    z-index:0;

}



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


section {


    background:

    linear-gradient(
        135deg,
        rgba(255,250,240,.92),
        rgba(255,241,220,.92)
    );


    padding:50px;


    margin-bottom:45px;


    border-radius:30px;


    border:

    3px solid #b7d8ee;


    box-shadow:

    0 20px 45px rgba(35,50,60,.15);


    position:relative;


    overflow:hidden;

}



/* remove old colored bars */

section::before {

    display:none;

}

/* ===============================
   TEXT
================================ */


h1,
h2,
h3 {

    color:#243447;

}



h2 {

    font-size:38px;

    margin-top:15px;

}



h3 {

    font-size:26px;

}



p {

    line-height:1.7;

    font-size:17px;

}



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


.menu-section {

    background:

    linear-gradient(
        135deg,
        rgba(229,241,248,.95),
        rgba(255,227,195,.95)
    );

}



.menu-section h2 {

    color:#c96b45;

}



.menu-section strong {

    color:#6b3d28;

}



/* ===============================
   PHOTO GALLERY
================================ */


.gallery {

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:28px;

}



.gallery img {


    width:100%;


    height:260px;


    object-fit:cover;


    border-radius:22px;


    border:

    5px solid #fff4df;


    box-shadow:


    0 12px 30px rgba(0,0,0,.2);


    transition:.3s;

}



.gallery img:hover {

    transform:scale(1.04);

}



/* ===============================
   HOURS
================================ */


.hours {


    background:

    linear-gradient(
        135deg,
        rgba(255,241,201,.95),
        rgba(245,217,170,.95)
    );


    border-left:

    10px solid #c96b45;

}



.hours p {

    display:flex;


    justify-content:space-between;


    padding:14px;


    border-bottom:


    2px dashed #cfa879;

}



.hours strong {

    color:#c96b45;

}



/* ===============================
   CONTACT
================================ */


.contact-card {


    border-left:

    10px solid #477da5;


}



/* ===============================
   HOMEPAGE FAVORITES
================================ */


.favorite-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;

}



.favorite-grid div {


    padding:30px;


    border-radius:22px;


    background:


    linear-gradient(
        135deg,
        #eef7fc,
        #ffe6cb
    );


    border:

    2px solid #b7d8ee;


    box-shadow:

    0 10px 25px rgba(30,50,70,.12);


    transition:.3s;

}



.favorite-grid div:hover {


    transform:translateY(-8px);

}



.favorite-grid h3 {

    color:#c96b45;

}



.visit-card {


    background:

    linear-gradient(
        135deg,
        #e5f1f8,
        #ffe0ba
    );

}



/* ===============================
   UNIVERSAL FOOTER
=============================== */


footer {

    width:100%;

    background:
    linear-gradient(
        135deg,
        #17202a,
        #304b63
    );


    color:white;

    padding:50px 20px;

    text-align:center;

    margin-top:70px;


    border-top:

    6px solid #c96b45;


    box-shadow:

    0 -8px 25px rgba(0,0,0,.12);

}



footer strong {

    display:block;

    color:#ffd166;

    font-size:26px;

    margin-bottom:15px;

}



footer p {

    color:white;

    font-size:16px;

    margin:10px 0;

    line-height:1.6;

}



footer a {

    color:white;

    text-decoration:none;

}



footer a:hover {

    color:#ffd166;

}



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

@media(min-width:701px){

.mobile-menu-button {

    display:none;

}

.hamburger {

    display:none;

}

.nav-links {

    display:block;

}

}

@media(max-width:700px){


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


html,
body {

    width:100%;

    overflow-x:hidden;

}


/* remove doodles on phones */

body {

    background-image:

        linear-gradient(
            135deg,
            #fff0d5,
            #d6e8f4
        );

}



/* ===============================
   HERO
================================ */


.hero-banner {

    width:100%;

    height:560px;

    border-radius:

    0 0 35px 35px;

}



.hero-content {

    width:100%;

    padding:20px;

    text-align:center;

}



.hero-content h1 {

    font-size:38px;

    line-height:1.15;

}



.hero-content p {

    font-size:19px;

    padding:0 15px;

}



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


button {

    display:block;

    width:90%;

    max-width:260px;

    margin:12px auto;

    padding:14px 20px;

    font-size:16px;

}



/* ===============================
   NAVIGATION
================================ */


nav {

    width:100%;

    padding:18px 0;

    text-align:center;

}

.mobile-menu-button {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:15px;

}


.mobile-menu-button > span {

    color:white;

    font-size:24px;

    font-weight:bold;

    letter-spacing:2px;

}

.hamburger {

    display:block;

    margin:0;

    width:45px;

    height:40px;

    padding:5px;

    background:none;

    border:none;

    box-shadow:none;

    cursor:pointer;

}


.hamburger span {

    display:block;

    height:4px;

    width:32px;

    margin:6px auto;

    background:white;

    border-radius:10px;

    transition:.3s;

}


.nav-links {

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:.35s ease;

}


.nav-links.show {

    max-height:400px;

    opacity:1;

    padding:15px;

    background:rgba(35,57,79,.95);

    border-radius:0 0 25px 25px;

}


nav a {

    display:block;

    margin:14px auto;

    font-size:18px;

}

.hamburger.active span:nth-child(1){

    transform:

    rotate(45deg)

    translate(7px,7px);

}


.hamburger.active span:nth-child(2){

    opacity:0;

}


.hamburger.active span:nth-child(3){

    transform:

    rotate(-45deg)

    translate(7px,-7px);

}



/* ===============================
   MAIN CONTENT
================================ */


main {

    width:100%;

    padding:

    35px 12px;

}



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


section {

    width:100%;

    padding:28px 20px;

    margin-left:auto;

    margin-right:auto;

    border-radius:24px;

}

.menu-category {

    padding:25px 18px;

}


.menu-category h3 {

    font-size:25px;

}



/* ===============================
   TEXT
================================ */


h2 {

    font-size:30px;

    text-align:center;

}



h3 {

    font-size:23px;

}



p {

    font-size:16px;

}



/* ===============================
   FAVORITE CARDS
================================ */


.favorite-grid {

    grid-template-columns:

    1fr;

    gap:20px;

}



.favorite-grid div {

    padding:25px;

}



/* ===============================
   GALLERY
================================ */


.gallery {

    grid-template-columns:

    1fr;

    gap:20px;

}



.gallery img {

    height:230px;

}



/* ===============================
   HOURS
================================ */


.hours p {

    display:block;

}



/* ===============================
   CONTACT
================================ */


.contact-card {

    border-left:

    6px solid #477da5;

}



/* ===============================
   FOOTER
================================ */


footer {

    width:100%;

    padding:

    40px 15px;

    margin-top:40px;

}



footer strong {

    font-size:22px;

}



}



/* ===============================
   DOODLE LAYER NOTES
================================ */


/*
Your SVG files should be:

images/doodles/left.svg
images/doodles/right.svg


They now:

- scale cleanly
- scroll with the page
- stay behind content
- frame the website
- disappear less abruptly on desktop
*/





/* ===============================
   HERO LOGO
=============================== */


.hero-content {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:45px;

    max-width:1100px;

    padding:35px;

}


.hero-logo {

    width:425px;
    height:425px;

    object-fit:contain;

    position:relative;

    left:-300px;

    filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.35));

}


.hero-text {

    text-align:center;

    position:relative;

    top:-17px;

    left:-200px;

}


/* MOBILE HERO LOGO */

@media(max-width:700px){


.hero-content {

    flex-direction:column;

    width:100%;

    padding:20px;

    gap:10px;

}


.hero-logo {

    width:160px;

    height:160px;

    left:0;

    position:relative;

}


.hero-text {

    left:0;

    top:0;

    width:100%;

}


.hero-text h1 {

    font-size:36px;

    line-height:1.15;

}


.hero-text p {

    font-size:18px;

}


}

/* Clickable homepage cards */

.card-link {

    text-decoration:none;

    color:inherit;

    display:block;

}


.card-link:hover {

    transform:translateY(-5px);

}


.favorite-grid > .card-link {

    transition:0.3s ease;

}


/* ===============================
   MENU CATEGORY CARDS
=============================== */




.menu-category:visited {

    color:#263238;

}


.menu-category:hover {

    transform:translateY(-8px);

    text-decoration:none;

}


.menu-category h3,
.menu-category h2 {

    color:#c96b45;

    font-size:32px;

    font-weight:700;

}


.menu-category p {

    color:#263238;

    font-size:16px;

    text-decoration:none;

}

/* ===============================
   MENU CATEGORY GRID
=============================== */

.menu-category-grid {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:30px;

    margin-top:40px;

}


/* Make cards match homepage style */

.menu-category {

    min-height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.menu-category h3 {

    margin-top:0;

    margin-bottom:15px;

}


/* MOBILE MENU GRID */

@media(max-width:700px){

    .menu-category-grid {

        grid-template-columns:1fr;

        gap:20px;

    }


    .menu-category {

        min-height:150px;

        padding:25px 18px;

    }


    .menu-category h3 {

        font-size:25px;

    }

}

/* ===============================
   MENU PAGE LOGO
=============================== */

.menu-logo {

    width:175px;

    height:175px;

    object-fit:contain;

    display:block;

    margin:0 auto 25px auto;

}


@media(max-width:700px){

    .menu-logo {

        width:150px;

        height:150px;

    }

}

/* ===============================
   MENU ITEM PRICE ALIGNMENT
   =============================== */


.item {

    position: relative;
    padding-right: 120px;

}





.item p {

    margin-bottom: 8px;

}







@media(max-width:700px){


.item {

    padding-right:25px;

}


.item span {

    position:static;
    margin-top:12px;

}


}

/* ===============================
   MENU PRICE GUIDE LINES
   =============================== */


.item h3 {

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

}


.item h3::after {

    content:"";
    flex:1;
    border-bottom:3px dotted #b7dcf5;
    margin-top:8px;

}


.item span {

    background:rgba(255,255,255,0.4);
    padding-left:10px;

}

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




.back-button:hover {

    transform:translateY(-5px);

    text-decoration:none;

}

/* Menu item price alignment */

.menu-item h3 {

    display:flex;

    align-items:center;

    gap:10px;

}


.menu-item h3::after {

    content:"";

    flex:1;

    border-bottom:3px dotted #9fd4f5;

    margin-left:10px;

    order:1;

}


.menu-item h3 span {

    order:2;

    margin-left:auto;

    white-space:nowrap;

}

/* ===============================
   FEATURED MENU ITEMS
=============================== */


.featured-items {

    margin-top:50px;

}


.featured-items h2 {

    color:#243447;

    text-align:center;

    margin-bottom:35px;

}



.featured-grid {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:30px;

}



.featured-card {

    display:block;

    text-decoration:none;

    color:#263238;

    background:
    linear-gradient(
        135deg,
        #eef7fc,
        #ffe6cb
    );


    border:3px solid #b7d8ee;

    border-radius:30px;

    padding:30px;

    box-shadow:

    0 10px 25px rgba(30,50,70,.12);


    transition:.3s ease;

}



.featured-card:hover {

    transform:translateY(-8px);

}



.featured-card h3 {

    color:#c96b45;

    font-size:26px;

    margin-bottom:12px;

}



.featured-card p {

    color:#263238;

    font-size:16px;

}





@media(max-width:700px){


    .featured-grid {

        grid-template-columns:1fr;

        gap:20px;

    }


    .featured-card {

        padding:25px;

    }


}

/* ================================
   MENU MANAGER PROFESSIONAL STYLE
================================ */


/* Main Layout */

.menu-manager {

    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;

}



.admin-header {

    margin-bottom: 30px;

}



.admin-header h1 {

    font-size: 42px;
    margin-bottom: 8px;

}



.admin-header p {

    color: #58738f;
    font-size: 18px;

}





/* Dashboard Cards */

.manager-card {

    background: rgba(255,255,255,0.65);

    border: 2px solid rgba(180,220,245,0.8);

    border-radius: 28px;

    padding: 35px;

    margin-bottom: 35px;

    backdrop-filter: blur(12px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

}



.section-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



.section-header h2 {

    margin:0;

    font-size:32px;

}






/* Buttons */


.primary-button,
.secondary-button {

    border:none;

    border-radius:30px;

    padding:12px 24px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}



.primary-button {

    background:
    linear-gradient(135deg,#c36f52,#587fa5);

    color:white;

}



.primary-button:hover {

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,.2);

}



.secondary-button {

    background:#eeeeee;

    color:#333;

}



.secondary-button:hover {

    background:#ddd;

}





/* Category Cards */


.category-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}



.category-card {

    position:relative;

    min-height:120px;

    border:none;

    border-radius:25px;

    background:
    linear-gradient(135deg,#c36f52,#587fa5);

    color:white;

    padding:20px;

    cursor:pointer;

    box-shadow:
    0 10px 20px rgba(0,0,0,.15);

    transition:.25s;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


.category-card:hover {

    transform:translateY(-5px);

}


.category-title {

    font-size:20px;

    font-weight:bold;

}


.category-actions {

    display:flex;

    gap:10px;

    margin-top:15px;

}




/* Small Edit/Delete Buttons */


.small-btn {

    width:38px;

    height:38px;

    border-radius:50%;

    border:none;

    margin:10px 5px 0;

    cursor:pointer;

    background:white;

    color:#333;

    font-size:16px;

}





/* Forms */


.editor-card {

    max-width:800px;

}



.form-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}



label {

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}



input,
textarea {

    width:100%;

    padding:14px;

    border-radius:15px;

    border:2px solid #c9ddec;

    font-size:16px;

    background:white;

}



textarea {

    min-height:120px;

    resize:vertical;

}



.form-buttons {

    display:flex;

    gap:15px;

    margin-top:25px;

}





/* Selected Menu */


.selected-menu h2 {

    display:flex;

    align-items:center;

    gap:12px;

}



#categoryDescription {

    color:#58738f;

}







/* Individual Menu Items */





.menu-admin-item h3 {

    font-size:24px;

    margin-top:0;

}



.menu-admin-item strong {

    display:inline-block;

    margin-top:15px;

    padding:8px 18px;

    background:#f3dfc5;

    border-radius:20px;

    font-size:18px;

}




/* Mobile */


@media(max-width:700px){


.section-header {

    flex-direction:column;

    align-items:flex-start;

}


.manager-card {

    padding:25px;

}


.admin-header h1 {

    font-size:32px;

}


}

/* Center category edit/delete bubbles */

.category-grid .small-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    vertical-align: middle;

    padding: 0;

    line-height: 1;

    text-align: center;

}


.category-grid .small-btn:hover {

    transform: scale(1.1);

}

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


.menu-item-grid {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.menu-admin-item {


background:
rgba(255,255,255,.8);


border-radius:25px;


padding:25px;


box-shadow:
0 10px 25px rgba(0,0,0,.12);


transition:.25s;


}



.menu-admin-item:hover {


transform:translateY(-5px);


box-shadow:
0 15px 35px rgba(0,0,0,.18);


}




.menu-item-header {


display:flex;


justify-content:space-between;


align-items:center;


gap:15px;


}



.menu-item-header h3 {


margin:0;


font-size:22px;


}



.price-tag {


background:#f3dfc5;


padding:8px 16px;


border-radius:20px;


font-weight:bold;


white-space:nowrap;


}



.menu-item-actions {


display:flex;


gap:12px;


margin-top:20px;


}



.menu-item-actions button {


border:none;


border-radius:20px;


padding:10px 18px;


cursor:pointer;


font-weight:bold;


background:
linear-gradient(135deg,#c36f52,#587fa5);


color:white;


}



.menu-item-actions button:hover {


transform:scale(1.05);


}

/* ===========================
   MENU MANAGER MODALS
=========================== */


.modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(20,30,40,0.35);

    backdrop-filter: blur(6px);

    justify-content: center;

    align-items: center;

    z-index: 9999;

}



.modal.active {

    display: flex;

}



.modal-card {

    width: min(700px, 90%);

    max-height: 85vh;

    overflow-y: auto;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255,248,235,0.95);

    border: 2px solid #b9dcff;

    box-shadow: 0 20px 50px rgba(0,0,0,0.2);

}


/* ===============================
   CLEAN SITE NAVIGATION
================================ */

.site-nav {
    width:100%;
    background:#243746;
    padding:18px 40px;
    box-sizing:border-box;
    position:relative;
    z-index:100;
    box-shadow:0 5px 18px rgba(0,0,0,.25);
}

.nav-container {
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.nav-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:45px;
}

.nav-links a {
    color:white;
    font-weight:700;
    text-decoration:none;
    font-size:18px;
    transition:.2s;
}

.nav-links a:hover {
    color:#f5d8a8;
}

.login-button {
    background:linear-gradient(135deg,#c96b45,#477da5);
    color:white !important;
    padding:10px 24px;
    border-radius:30px;
}


/* MOBILE HAMBURGER */

.mobile-menu-button {
    display:none;
}

.hamburger {
    display:none;
}


@media(max-width:700px){

    .site-nav {
        padding:12px 18px;
    }

    .nav-container {
        display:block;
    }

    .mobile-menu-button {
        display:flex;
        width:90%;
        margin:auto;
        justify-content:space-between;
        align-items:center;
        background:linear-gradient(135deg,#c96b45,#477da5);
        color:white;
        border:none;
        border-radius:20px;
        padding:12px 22px;
        font-size:20px;
        font-weight:bold;
    }

    .hamburger {
        display:block;
        width:45px;
        height:40px;
        padding:5px;
        background:none;
        border:none;
        box-shadow:none;
    }

    .hamburger span {
        display:block;
        height:4px;
        width:32px;
        margin:6px auto;
        background:white;
        border-radius:10px;
        transition:.3s;
    }

    .nav-links {
        display:none;
        position:absolute;
        top:100%;
        left:5%;
        width:90%;
        flex-direction:column;
        gap:18px;
        background:#243746;
        padding:25px;
        border-radius:0 0 25px 25px;
        box-shadow:0 15px 35px rgba(0,0,0,.3);
    }

    .nav-links.open {
        display:flex;
    }

    .nav-links a {
        color:white !important;
        text-align:center;
        width:100%;
        padding:10px;
        font-size:20px;
    }

    .hamburger.active span:nth-child(1){
        transform:rotate(45deg) translate(7px,7px);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:rotate(-45deg) translate(7px,-7px);
    }

}


@media(min-width:701px){

    .mobile-menu-button,
    .hamburger {
        display:none;
    }

    .nav-links {
        display:flex;
    }

}


/* FINAL MOBILE NAV FIX - overrides old hamburger CSS */
@media (max-width:700px){
 #navbar{position:relative; z-index:99999;}
 .site-nav{position:relative; z-index:99999;}
 .mobile-menu-button{
   display:flex !important;
   position:relative;
   z-index:100001;
   pointer-events:auto !important;
   cursor:pointer;
 }
 .nav-container{
   position:relative;
   z-index:100000;
 }
 .nav-links{
    display:flex !important;
    position:absolute !important;
    top:100% !important;
    left:5% !important;
    width:90% !important;
    flex-direction:column !important;
    background:#243746 !important;
    padding:25px !important;
    border-radius:0 0 25px 25px !important;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-15px);

    transition:
        max-height .35s ease,
        opacity .25s ease,
        transform .35s ease;
}
.nav-links.open{
    display:flex !important;
    opacity:1 !important;
    max-height:500px !important;
    overflow:hidden !important;
    transform:translateY(0);
}

.site-nav:has(.nav-links.open){
    margin-bottom:260px;
}
 .nav-links a{
   display:block !important;
   color:white !important;
   visibility:visible !important;
 }
}

/* ===============================
   ADMIN LOGIN PAGE STYLE
=============================== */
















.login-card input:focus {

    border-color:#477da5;

    box-shadow:
    0 0 10px rgba(71,125,165,.25);

}









@media(max-width:700px){

    .login-page {

        padding:25px 15px;

    }


    .login-card {

        padding:35px 25px;

        border-radius:28px;

    }


    .login-card h1 {

        font-size:30px;

    }


    .login-logo {

        width:130px;

        height:130px;

    }

}

/* ======================================
   ADMIN LOGIN PAGE FINAL DESIGN
====================================== */


body:has(.login-card){

    overflow-x:hidden;

}


/* Main login area */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}



/* Login card */





/* LOGO FIX */

.login-logo{

    display:block;

    width:160px;

    height:160px;

    object-fit:contain;

    margin:0 auto 25px auto;

    border-radius:50%;

    background:white;

    padding:12px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}



/* Title */

.login-card h1{

    font-size:36px;

    margin-bottom:10px;

    color:#243447;

}



/* Subtitle */

.login-card p{

    color:#58738f;

    margin-bottom:30px;

}



/* Inputs */

.login-card input{

    width:100%;

    box-sizing:border-box;

    padding:15px;

    margin-bottom:15px;

    border-radius:18px;

    border:2px solid #b7d8ee;

    background:white;

    font-size:16px;

}



/* Login button */

.login-card button{

    width:100%;

    padding:15px;

    margin-top:15px;

    font-size:18px;

}



/* Mobile */

@media(max-width:700px){


.login-card{

    padding:30px 20px;

}


.login-logo{

    width:120px;

    height:120px;

}


.login-card h1{

    font-size:28px;

}


}

/* ======================================
   ADMIN LOGIN FINAL POSITION FIX
   Moves card closer to logo
====================================== */

body:has(.admin-login),
body:has(.login-card) {
    overflow-x: hidden;
}

.admin-login,
.login-page {
    padding-top: 0;
}

/* Move the login card upward toward the logo */
.login-card {
    transform: translateY(-90px);
}

/* Make logo spacing tighter */




@media(max-width:700px){

    .login-card {
        transform: translateY(-55px);
        width: 92%;
    }

    .admin-logo-link {
        margin-bottom: -45px;
    }

    .admin-logo-link img {
        width: 115px;
        height: 115px;
    }

}

/* ======================================
   ADMIN LOGIN MOBILE BUBBLE FIX
   Keep background bubbles behind content
====================================== */

body:has(.admin-login) main::before,
body:has(.admin-login) main::after,
body:has(.login-card) main::before,
body:has(.login-card) main::after {
    display:none;
}


@media(max-width:700px){

    body:has(.admin-login),
    body:has(.login-card){
        background-image:
        linear-gradient(
            135deg,
            #fff0d5,
            #d6e8f4
        );
    }

}

/* =========================================
   ADMIN DASHBOARD PROFESSIONAL DESIGN
========================================= */


/* Remove normal website decorations */
body:has(.admin-dashboard) main::before,
body:has(.admin-dashboard) main::after,
body:has(.dashboard-container)::before,
body:has(.dashboard-container)::after {
    display:none;
}


body:has(.admin-dashboard),
body:has(.dashboard-container) {
    background:
    linear-gradient(
        135deg,
        #fff2dc,
        #dcecf4
    );

    min-height:100vh;
}


/* Logo */







/* Main dashboard box */





/* Header */




.admin-dashboard p,
.dashboard-container p {

    text-align:center;

    color:#526777;

}



/* Logout */

.logout,
button.logout {

    display:block;

    margin:25px auto 45px;


    background:
    linear-gradient(
    135deg,
    #cf7450,
    #557fa8
    );


    color:white;

    border:none;

    padding:14px 45px;

    border-radius:40px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
    0 8px 20px rgba(0,0,0,.18);

}



/* Cards */





.dashboard-card {


    background:white;

    border-radius:25px;

    padding:30px;

    text-align:center;


    box-shadow:
    0 12px 30px rgba(0,0,0,.12);


    transition:.3s ease;


}



.dashboard-card:hover {

    transform:translateY(-6px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.18);

}



.dashboard-card h2 {

    color:#243b53;

    font-size:28px;

}



.dashboard-card a {

    display:inline-block;

    margin-top:15px;

    padding:12px 25px;


    border-radius:30px;


    background:
    linear-gradient(
    135deg,
    #cf7450,
    #557fa8
    );


    color:white;

    text-decoration:none;

    font-weight:bold;

}




/* MOBILE */

@media(max-width:700px){


.admin-logo-link img {

    width:100px;
    height:100px;

}



.admin-dashboard,
.dashboard-container {

    margin:25px 15px;

    padding:25px;

    border-radius:25px;

}



.admin-dashboard h1,
.dashboard-container h1 {

    font-size:30px;

}



.dashboard-links {

    grid-template-columns:1fr;

}



.dashboard-card {

    padding:25px;

}



}

/* ======================================
   ADMIN DASHBOARD V2
   Professional card layout
====================================== */


.admin-dashboard,
.dashboard-container {

    max-width:1000px;

    margin:40px auto;

    padding:45px;

    border-radius:35px;

    background:
    rgba(255,255,255,.82);

    backdrop-filter:blur(15px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);

}



/* Header */

.admin-dashboard h1,
.dashboard-container h1 {

    text-align:center;

    font-size:42px;

    margin-bottom:10px;

}


.admin-dashboard > p,
.dashboard-container > p {

    text-align:center;

    font-size:18px;

}



/* Logout */

.logout {

    margin:20px 0 40px auto !important;

}



/* Create dashboard grid */

.dashboard-links {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:30px;

}



/* Individual sections */

.dashboard-links > div,
.dashboard-card {


    background:white;

    padding:30px;


    border-radius:25px;


    box-shadow:
    0 10px 30px rgba(0,0,0,.12);


    text-align:center;


    transition:.25s;


}



.dashboard-links > div:hover,
.dashboard-card:hover {


    transform:translateY(-8px);


    box-shadow:
    0 20px 45px rgba(0,0,0,.18);


}




.dashboard-links h2,
.dashboard-card h2 {


    font-size:30px;

    color:#243b53;

    margin-bottom:15px;


}



.dashboard-links a,
.dashboard-card a {


    display:inline-block;


    margin-top:15px;


    padding:12px 30px;


    border-radius:30px;


    background:
    linear-gradient(
    135deg,
    #cf7450,
    #557fa8
    );


    color:white;

    text-decoration:none;

    font-weight:bold;


}



/* Mobile */

@media(max-width:700px){


.admin-dashboard,
.dashboard-container {

    margin:20px;

    padding:25px;

}



.admin-dashboard h1,
.dashboard-container h1 {

    font-size:30px;

}



.dashboard-links {

    grid-template-columns:1fr;

}


}

/* ======================================
   ADMIN DASHBOARD PROFESSIONAL CARDS
====================================== */


.admin-dashboard {

    max-width:1000px;

    margin:40px auto;

    padding:45px;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(15px);

    border-radius:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);

}


/* Header */

.admin-dashboard h1 {

    text-align:center;

    font-size:42px;

    color:#243b53;

    margin-bottom:10px;

}


.admin-dashboard > p {

    text-align:center;

    color:#526777;

    font-size:18px;

}



/* Logout button */

#logoutButton {

    display:block;

    margin:30px auto 45px;


    padding:14px 45px;


    border:none;

    border-radius:40px;


    background:
    linear-gradient(
    135deg,
    #cf7450,
    #557fa8
    );


    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;


    box-shadow:
    0 10px 25px rgba(0,0,0,.18);

}



/* Card layout */





/* Individual cards */

















/* Mobile */

@media(max-width:700px){


.admin-dashboard {

    margin:20px;

    padding:25px;

}


.admin-dashboard h1 {

    font-size:30px;

}



.admin-card-grid {

    grid-template-columns:1fr;

}



.admin-card {

    padding:25px;

}

@media(max-width:700px){

.back-button{

    display:block;

    width:80%;

    text-align:center;

    margin:20px auto;

}

}
}

/* ======================================
   DASHBOARD CARD GRADIENT
====================================== */












/* =========================================
   DASHBOARD CARD IMPROVEMENTS
========================================= */

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 40px;
}


/* Make cards cleaner */

.admin-card {

    min-height: 160px;

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

    text-align: center;

    border-radius: 24px;

    background: linear-gradient(
        90deg,
        #9fc9dc 0%,
        #243b53 100%
    );

    color: white;

    text-decoration: none;

    box-shadow:
        0 12px 25px rgba(0,0,0,0.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/* Hover animation */

.admin-card:hover {

    transform: translateY(-8px) scale(1.02);

    background: linear-gradient(
        90deg,
        #b8dceb 0%,
        #304d68 100%
    );

    box-shadow:
        0 20px 35px rgba(0,0,0,0.22);

}


/* Card text */

.admin-card h2 {

    margin: 12px 0 8px;

    color:white;

    font-size: 28px;

}


.admin-card p {

    color:rgba(255,255,255,.85);

    margin:0;

}



/* =========================================
   DASHBOARD FOOTER
========================================= */

.admin-dashboard::after {

    content:
    "────────────────────\A "
    "The Cup and the Cone\A "
    "Website Manager v1.0";

    white-space: pre;

    display:block;

    text-align:center;

    margin-top:60px;

    padding-bottom:35px;

    color:#607d96;

    font-size:14px;

    line-height:1.8;

}



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

@media (max-width:700px){


.admin-dashboard {

    width:90%;

    padding:25px 18px;

}


.admin-card-grid {

    grid-template-columns:1fr;

    gap:20px;

    margin-top:30px;

}


.admin-card {

    min-height:130px;

    border-radius:22px;

}


.admin-card h2 {

    font-size:24px;

}


.admin-card p {

    font-size:14px;

}


/* better mobile spacing */

#logoutButton {

    margin-top:20px;

    margin-bottom:20px;

}


}

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

.admin-back-button {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin:25px auto;

    padding:12px 24px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #9fc9dc,
        #243b53
    );

    color:white;

    text-decoration:none;

    font-weight:600;

    box-shadow:
        0 8px 18px rgba(0,0,0,.15);

    transition:.3s ease;

}


.admin-back-button:hover {

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.2);

}

/* ======================================
   ADMIN LOGO LINK SIZE FIX
   Only make the image clickable
====================================== */

.admin-logo-link {

    display:table;

    margin:30px auto 15px auto;

    width:auto;

    height:auto;

}


.admin-logo-link img {

    display:block;

}



/* Move back button slightly lower */

.back-button {

    margin-top:35px;

}

/* ======================================
   MENU IMAGE PREVIEW
====================================== */

.image-preview-container {

    width:320px;
    height:200px;

    margin:20px auto;

    border-radius:18px;

    border:2px solid #b7d8ee;

    background:#fffaf0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;

}


.image-preview {

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}


#imagePreviewText {

    color:#58738f;

    font-size:18px;

    font-weight:bold;

}

/* ==========================================
   FINAL VISUAL FIXES
   Menu Cards / Login Card / Admin Logos
   ========================================== */


/* =========================
   PUBLIC MENU CATEGORY CARDS
   ========================= */

.menu-category-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:40px;
}


.menu-category {

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

    min-height:190px;

    padding:35px;

    background:
    linear-gradient(
        135deg,
        rgba(255,250,240,.95),
        rgba(229,241,248,.95)
    );

    border:3px solid #b7d8ee;

    border-radius:30px;

    box-shadow:
    0 15px 35px rgba(30,50,70,.15);

    text-align:center;

    transition:.3s ease;

}


.menu-category:hover {

    transform:translateY(-8px);

    box-shadow:
    0 25px 45px rgba(30,50,70,.22);

}


.menu-category h3 {

    margin-bottom:15px;

    color:#c96b45;

    font-size:32px;

}


/* =========================
   LOGIN CARD FIX
   ========================= */

.login-card {

    width:min(500px,90%);

    padding:45px;

    background:
    rgba(255,250,240,.92);

    border:

    3px solid #b7d8ee;

    border-radius:35px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

    text-align:center;

}


.login-card form {

    width:100%;

}



/* =========================
   ADMIN PAGE LOGO SIZE
   ========================= */

/* All admin pages except dashboard */

body:has(.menu-manager) .admin-logo-link img,
body:has(.manager-card) .admin-logo-link img,
body:has(.login-card) .admin-logo-link img {

    width:120px;

    height:120px;

    object-fit:contain;

}


/* Keep dashboard logo larger */

body:has(.admin-dashboard) .admin-logo-link img {

    width:220px;

    height:220px;

}



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

.back-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 28px;

    margin:25px auto;

    background:

    linear-gradient(
        135deg,
        #c96b45,
        #477da5
    );

    color:white !important;

    border-radius:30px;

    text-decoration:none !important;

    font-weight:bold;

    box-shadow:

    0 10px 25px rgba(30,50,70,.2);

    transition:.3s ease;

}


.back-button:hover {

    transform:translateY(-4px);

}


/* MOBILE */

@media(max-width:700px){

    .menu-category-grid {

        grid-template-columns:1fr;

    }


    .login-card {

        padding:30px 20px;

    }


    body:has(.admin-dashboard) .admin-logo-link img {

        width:140px;

        height:140px;

    }

}

.gallery-admin-card{

display:flex;

align-items:center;

gap:20px;

padding:20px;

margin-top:20px;

border-radius:20px;

background:white;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



.gallery-admin-card img{

width:180px;

height:120px;

object-fit:cover;

border-radius:15px;

}



.gallery-admin-card button{

margin-left:auto;

}

.menu-item-admin-image{

width:180px;

height:120px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.menu-item-image{

width:100%;

max-width:300px;

height:200px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.featured-image{

width:100%;

height:180px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.sold-out{

font-weight:bold;

margin-top:10px;

}

.drag-handle{

font-size:24px;

cursor:grab;

}


.menu-admin-item:active .drag-handle{

cursor:grabbing;

}

.highlight-item{

animation: highlightFlash 3s ease;

}



@keyframes highlightFlash{

0%{

transform:scale(1);

}


50%{

transform:scale(1.03);

}


100%{

transform:scale(1);

}

}

/* =====================================
   FINAL MOBILE EXPERIENCE UPGRADE
   The Cup and the Cone
===================================== */


@media(max-width:700px){


/* -----------------------------
   GENERAL MOBILE SPACING
----------------------------- */


main{

    padding:25px 12px;

}


section{

    padding:25px 15px;

    margin-bottom:25px;

    border-radius:22px;

}




/* -----------------------------
   HEADINGS
----------------------------- */


h1{

    font-size:32px;

    line-height:1.2;

}


h2{

    font-size:28px;

}


h3{

    font-size:21px;

}




/* -----------------------------
   MENU CATEGORY CARDS
----------------------------- */


.menu-category-grid{

    grid-template-columns:1fr;

    gap:18px;

}



.menu-category{

    min-height:140px;

    padding:22px 15px;

}



.menu-category h2,
.menu-category h3{

    font-size:25px;

}





/* -----------------------------
   FEATURED ITEMS
----------------------------- */


.featured-grid{

    grid-template-columns:1fr;

    gap:18px;

}



.featured-card{

    padding:18px;

    border-radius:22px;

}



.featured-card img{

    width:100%;

    height:auto;

    max-height:230px;

    object-fit:cover;

    border-radius:18px;

}




/* -----------------------------
   MENU ITEMS
----------------------------- */


.menu-item{

    width:100%;

    padding:20px;

}



.menu-item h3{

    flex-wrap:wrap;

    font-size:20px;

}



.menu-item h3 span{

    margin-left:auto;

}




.menu-item-image{

    width:100%;

    height:auto;

    max-height:240px;

    object-fit:cover;

    border-radius:18px;

}





/* -----------------------------
   BUTTONS
----------------------------- */


button,
.primary-button,
.secondary-button{

    width:100%;

    max-width:320px;

    margin:10px auto;

}




/* -----------------------------
   ADMIN MOBILE
----------------------------- */


.manager-card{

    padding:20px;

    border-radius:22px;

}



.category-grid{

    grid-template-columns:1fr;

}



.menu-item-grid{

    grid-template-columns:1fr;

}



.menu-admin-item{

    padding:20px;

}




/* -----------------------------
   FORMS
----------------------------- */


input,
textarea,
select{

    font-size:16px;

}



.form-buttons{

    flex-direction:column;

}





/* -----------------------------
   FOOTER
----------------------------- */


footer{

    padding:35px 15px;

}



footer strong{

    font-size:21px;

}


}

/* =====================================
   FINAL BUBBLE SAFETY FIX
   Keeps decorative bubbles behind content
===================================== */


/* Keep all page content above background bubbles */

main > * {

    position:relative;

    z-index:2;

}



/* Keep bubbles behind everything */

main::before,
main::after {

    z-index:0;

    pointer-events:none;

}



/* Desktop bubble spacing protection */

@media(min-width:701px){


main{

    overflow:hidden;

}


}



/* Mobile bubble protection */

@media(max-width:700px){


main{

    overflow:hidden;

}


main::before,
main::after{

    display:none;

}


}

/* =====================================
   FINAL ADMIN MOBILE IMPROVEMENTS
   The Cup and the Cone
===================================== */


@media(max-width:700px){



/* -----------------------------
   ADMIN DASHBOARD
----------------------------- */


.admin-dashboard{

    padding:20px 12px;

}



.admin-dashboard h1{

    font-size:30px;

}



.admin-card-grid{

    grid-template-columns:1fr;

    gap:18px;

}



.admin-card{

    padding:24px 18px;

    min-height:120px;

}



.admin-card h2{

    font-size:24px;

}





/* -----------------------------
   ADMIN MANAGER SECTIONS
----------------------------- */


.admin-container,
.manager-container{

    width:100%;

    padding:15px;

}




/* -----------------------------
   FORMS
----------------------------- */


input,
textarea,
select{

    width:100%;

    font-size:16px;

    padding:14px;

}



textarea{

    min-height:130px;

}





/* -----------------------------
   BUTTONS
----------------------------- */


button,
.primary-button,
.secondary-button,
.small-btn{

    min-height:46px;

    font-size:16px;

}




.small-btn{

    padding:12px;

}





/* -----------------------------
   MODALS
----------------------------- */


.modal{

    padding:12px;

}



.modal-content{

    width:95%;

    max-height:90vh;

    overflow-y:auto;

    padding:20px;

}





/* -----------------------------
   MENU MANAGER
----------------------------- */


.category-card,
.menu-admin-item{

    width:100%;

    padding:18px;

}



.menu-admin-item{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.drag-handle{

    font-size:28px;

}





/* -----------------------------
   GALLERY MANAGER
----------------------------- */


.gallery-admin-card{

    width:100%;

}



.gallery-image{

    width:100%;

    height:auto;

}




/* -----------------------------
   SAVE STATUS
----------------------------- */


#status{

    width:100%;

    margin-top:15px;

    word-wrap:break-word;

}




/* -----------------------------
   PREVENT SIDE SCROLLING
----------------------------- */


body{

    overflow-x:hidden;

}



}


/* =========================================
   LAPTOP OPTIMIZATION MODE
   Keeps desktop layout but adapts spacing
   ========================================= */


/* 13-15 inch laptops */
@media (min-width:1100px) and (max-width:1500px){


/* FULL WIDTH NAVBAR */

#navbar{

    width:100% !important;

}



#navbar > *{

    width:100% !important;

    max-width:none !important;

}



/* NAVBAR CONTENT */

#navbar nav{

    width:100% !important;

    max-width:none !important;

}





/* HERO SECTION */


.hero-content{

    gap:40px;

    padding-left:50px;

    padding-right:50px;

}



.hero-logo{

    width:260px;

}



.hero-text h1,
.hero h1{

    font-size:58px;

}



.hero-text p{

    font-size:22px;

}



.hero-buttons{

    gap:15px;

}





/* GENERAL PAGE WIDTH */


.container,
.page-container,
main{

    max-width:1200px;

    width:90%;

}



}





/* Smaller laptops */

@media (min-width:900px) and (max-width:1100px){



#navbar{

    width:100% !important;

}



#navbar > *{

    width:100% !important;

}



/* HERO */

.hero-content{

    gap:30px;

    padding:30px;

}



.hero-logo{

    width:220px;

}



.hero-text h1,
.hero h1{

    font-size:48px;

}



.hero-text p{

    font-size:20px;

}



.hero-buttons{

    flex-wrap:wrap;

}



.container,
.page-container,
main{

    width:92%;

}



}

/* =========================================
   LAPTOP OPTIMIZATION
   Keeps desktop style, fixes laptop sizing
========================================= */


@media (min-width:900px) and (max-width:1500px){


/* FULL WIDTH NAVBAR */

.site-nav{

    width:100vw !important;

    margin-left:calc(50% - 50vw) !important;

}



.nav-container{

    max-width:none !important;

    width:100% !important;

}



.nav-links{

    justify-content:center;

}





/* HERO FIX */

.hero-content{

    max-width:1200px;

    width:100%;

    gap:30px;

    padding:30px;

}



.hero-logo{

    width:300px;

    height:300px;

    left:0;

}



.hero-text{

    left:0;

    top:0;

}



.hero-content h1,
.hero-text h1{

    font-size:60px;

}



.hero-content p,
.hero-text p{

    font-size:24px;

}





}



/* Smaller laptops */

@media (min-width:900px) and (max-width:1100px){



.hero-logo{

    width:240px;

    height:240px;

}



.hero-content h1,
.hero-text h1{

    font-size:48px;

}



.hero-content p,
.hero-text p{

    font-size:20px;

}



.nav-links{

    gap:25px;

}


}