/* Foodit v10.2 - Public Stylesheet */
:root {
    --color-bg-food: #F4ECE6;
    --color-bg-coffee: #3D2C2A;
    --color-bg-cold-drink: #E0F7FA;
    --color-primary-dark: #3E2723;
    --color-primary-medium: #6D4C41;
    --color-primary-light: #BDBDBD;
    --color-text-light: #F4ECE6;
    --color-text-dark: #3D2C2A;
    --color-accent: #FFA726;
    --color-accent-dark: #FB8C00;
    --color-white: #FFFFFF;
    --color-error: #ef4444;
    --font-primary: 'Poppins', 'Vazirmatn', sans-serif;
}

body {
    font-family: var(--font-primary);
    transition: background-color .7s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--c-bg, var(--color-bg-food));
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}

#app-container::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(20px) saturate(1.2);
    transform: scale(1.15);
    opacity: var(--bg-opacity, 0);
    background-image: var(--bg-image);
    transition: opacity .7s ease-in-out;
}

.theme-food {
    --c-bg: var(--color-bg-food);
    --c-text: var(--color-text-dark);
    --c-text-secondary: var(--color-primary-medium);
    --bg-image: url('/assets/images/blur-food.png');
}

.theme-coffee {
    --c-bg: var(--color-bg-coffee);
    --c-text: var(--color-text-light);
    --c-text-secondary: var(--color-primary-light);
    --bg-image: url('/assets/images/blur-coffee.png');
}

.theme-cold-drink {
    --c-bg: var(--color-bg-cold-drink);
    --c-text: #004D40;
    --c-text-secondary: #00796B;
    --bg-image: url('/assets/images/blur-cold-drink.png');
}

#app-container {
    color: var(--c-text);
    opacity: 0;
    background-color: transparent;
}

#app-container.bg-active::before {
    --bg-opacity: .7;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent-dark);
    border-radius: .75rem;
}

.glass-card:focus-visible {
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent-dark), 0 8px 32px -12px rgba(0, 0, 0, .15);
}

.glass-card {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .15);
}

.theme-food .glass-card,
.theme-cold-drink .glass-card {
    background: radial-gradient(circle, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .4) 100%);
    border: 1px solid rgba(255, 255, 255, .3);
}

.theme-coffee .glass-card {
    background: radial-gradient(circle, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .2);
}

/* Food Party badge on product cards */
.party-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--color-primary-dark);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}

.btn {
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px -5px var(--color-accent);
}

.btn-secondary {
    background: rgba(0, 0, 0, .05);
    color: var(--c-text);
    border: 1px solid rgba(0, 0, 0, .1);
}

.theme-coffee .btn-secondary {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}

#overlay {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s;
}

#overlay.is-visible {
    opacity: .6;
    visibility: visible;
    transition-delay: 0s;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s .3s;
    --modal-transition-duration: .4s;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.modal-card {
    transition: transform var(--modal-transition-duration) cubic-bezier(.16, 1, .3, 1), opacity var(--modal-transition-duration);
    transform: scale(.95) translateY(20px);
    opacity: 0;
    will-change: transform, opacity;
    background: var(--c-bg);
    color: var(--c-text);
    border-radius: 1rem;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.35);
}

.modal.is-open .modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    z-index: 40;
    transform: translateX(100%);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    background-color: var(--c-bg);
    color: var(--c-text);
}

#cart-panel.is-open {
    transform: translateX(0);
}

#global-nav,
#mobile-nav {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    transition: background-color .7s, border-color .7s;
}

#global-nav {
    background-color: rgba(255, 255, 255, .7);
    border-color: rgba(0, 0, 0, .1);
}

.theme-coffee #global-nav {
    background-color: rgba(40, 29, 27, .7);
    border-color: rgba(255, 255, 255, .1);
}

/* Empty state */
.empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    color: var(--c-text-secondary);
}
.empty-state .title { font-weight: 800; letter-spacing: .02em; }
.empty-state .desc { opacity: .9; }

/* Utilities */
.shadow-soft { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.rounded-xl { border-radius: 1rem; }
.rounded-2xl { border-radius: 1.25rem; }
.backdrop-blur { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Responsive tweaks */
@media (max-width: 640px) {
    .btn { padding: .65rem 1rem; }
    .glass-card { border-radius: .9rem; }
}

.theme-cold-drink #global-nav {
    background-color: rgba(224, 247, 250, .7);
    border-color: rgba(0, 0, 0, .1);
}

#mobile-nav {
    background-color: rgba(255, 255, 255, .8);
    border-color: rgba(0, 0, 0, .1);
    z-index: 51;
}

.theme-coffee #mobile-nav {
    background-color: rgba(40, 29, 27, .8);
    border-color: rgba(255, 255, 255, .1);
}

.theme-cold-drink #mobile-nav {
    background-color: rgba(224, 247, 250, .8);
    border-color: rgba(0, 0, 0, .1);
}

.nav-link {
    color: var(--c-text-secondary);
}

.nav-link.active {
    color: var(--c-text);
    font-weight: 700;
}

.mobile-nav-btn {
    color: var(--c-text-secondary);
}

.mobile-nav-btn.active {
    color: var(--color-accent-dark);
}

.mobile-nav-btn.active span {
    color: var(--c-text);
    font-weight: 700;
}

.site-footer {
    padding: 2rem 1rem;
    margin-top: 4rem;
    border-top: 1px solid;
    border-color: rgba(0, 0, 0, .1);
}

.theme-coffee .site-footer {
    border-color: rgba(255, 255, 255, .1);
}

.swiper-pagination-bullet-active {
    background-color: var(--color-accent) !important;
}

.product-swiper {
    width: 100%;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.product-swiper .swiper-slide {
    width: 320px;
    transition: transform .4s ease, opacity .4s ease;
}

.product-swiper .swiper-slide:not(.swiper-slide-active) {
    transform: scale(.85);
    opacity: .7;
}

.builder-swiper {
    width: 100%;
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.builder-swiper .swiper-slide {
    transition: transform .5s ease, opacity .5s ease;
    opacity: .5;
    transform: scale(.8);
}

.builder-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.blog-swiper {
    width: 100%;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.blog-swiper .swiper-slide {
    width: 320px;
    transition: transform .4s ease, opacity .4s ease;
}

.blog-swiper .swiper-slide:not(.swiper-slide-active) {
    transform: scale(.85);
    opacity: .7;
}

.blog-post-swiper .swiper-pagination-bullet-active,
.blog-content-swiper .swiper-pagination-bullet-active {
    background-color: var(--c-text) !important;
}

.blog-post-swiper .swiper-slide,
.blog-content-swiper .swiper-slide {
    aspect-ratio: 1 / 1;
}

.blog-post-swiper .swiper-slide img,
.blog-content-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton loaders */
.skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.08), rgba(0,0,0,.06)); }
.theme-coffee .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.1), rgba(255,255,255,.06)); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-text { height: 1rem; border-radius: .5rem; }
.skeleton-avatar { width: 3rem; height: 3rem; border-radius: 9999px; }
.skeleton-card { border-radius: 1rem; height: 200px; }

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid;
    background-color: transparent;
    transition: border-color .3s, box-shadow .3s;
    border-color: var(--c-text-secondary);
    color: var(--c-text);
}

select.form-select option {
    background: var(--c-bg);
    color: var(--c-text);
}

.form-textarea {
    min-height: 120px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent);
}

.form-input.invalid,
.form-textarea.invalid,
.form-select.invalid {
    border-color: var(--color-error);
}

.form-error-msg {
    color: var(--color-error);
    font-size: .875rem;
    margin-top: .25rem;
    display: none;
}

.option-btn {
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .7);
    background-color: transparent;
    transition: all .3s ease;
    cursor: pointer;
}

#product-options-form input:checked+.option-btn {
    background-color: var(--color-accent-dark);
    color: var(--color-white);
    border-color: var(--color-accent-dark);
}

.ingredient-checkbox:checked+label {
    background-color: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

.subcategory-filters {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.subcategory-filters::-webkit-scrollbar {
    display: none;
}

.subcategory-filter-btn {
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    border: 2px solid;
    border-color: var(--c-text-secondary);
    color: var(--c-text-secondary);
    transition: all .3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.subcategory-filter-btn.active {
    background-color: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

.blog-category-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

#address-map,
#track-order-map,
#address-modal-map {
    height: 300px;
    border-radius: 1rem;
    margin-top: 1rem;
    z-index: 0;
}

#page-loader {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg-food);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-tab-btn {
    transition: background-color .2s ease;
}

.profile-tab-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, .05);
}

.profile-tab-btn.active {
    background-color: rgba(0, 0, 0, .1);
}

.theme-coffee .profile-tab-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, .05);
}

.theme-coffee .profile-tab-btn.active {
    background-color: rgba(255, 255, 255, .1);
}

.prose-themed a {
    color: var(--color-accent-dark);
    text-decoration: none;
    font-weight: 600;
}

.prose-themed a:hover {
    text-decoration: underline;
}

.prose-themed h1,
.prose-themed h2,
.prose-themed h3 {
    color: var(--c-text);
}

.prose-themed p,
.prose-themed li {
    color: var(--c-text-secondary);
}

.blog-category-badge {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    font-size: .75rem;
    font-weight: 700;
    padding: .125rem .625rem;
    border-radius: 999px;
    display: inline-block;
}

.chat-bubble {
    max-width: 80%;
    padding: .75rem 1rem;
    border-radius: 1rem;
}

.chat-bubble.user {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    border-bottom-right-radius: .25rem;
    margin-left: auto;
}

.chat-bubble.support {
    background-color: rgba(0, 0, 0, .1);
    border-bottom-left-radius: .25rem;
    margin-right: auto;
}

.theme-coffee .chat-bubble.support {
    background-color: rgba(255, 255, 255, .1);
}

.faq-answer {
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-question.open+.faq-answer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-height: 500px;
}

.faq-question i {
    transition: transform 0.3s ease-in-out;
}

.faq-question.open i {
    transform: rotate(180deg);
}

.rating-stars i {
    cursor: pointer;
    color: var(--c-text-secondary);
    transition: color .2s ease, transform .2s ease;
}

.rating-stars:hover i {
    color: var(--color-accent-dark);
}

.rating-stars i:hover~i {
    color: var(--c-text-secondary);
}

.rating-stars i.rated {
    color: var(--color-accent-dark);
}

.rating-stars i:hover {
    transform: scale(1.2);
}

#ticket-detail-modal .modal-card {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

#ticket-conversation-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem .5rem;
}

#ticket-reply-area {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-coffee #ticket-reply-area {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.order-progress-bar .step .circle {
    transition: background-color 0.4s, border-color 0.4s;
}

.order-progress-bar .step .line {
    transition: background-color 0.4s;
    height: 2px;
    flex-grow: 1;
}

.order-progress-bar .step.active .circle,
.order-progress-bar .step.completed .circle {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
}

.order-progress-bar .step.completed .line {
    background-color: var(--color-accent-dark);
}

@media (max-width:640px) {
    .modal {
        padding: 0;
    }
    #builder-modal,
    #login-modal,
    #ticket-modal,
    #rate-order-modal,
    #top-up-modal,
    #address-modal,
    #card-modal {
        padding: 1rem;
        align-items: center;
        justify-content: center;
    }
    #builder-modal .modal-card,
    #login-modal .modal-card,
    #ticket-modal .modal-card,
    #rate-order-modal .modal-card,
    #top-up-modal .modal-card,
    #address-modal .modal-card,
    #card-modal .modal-card {
        width: 100%;
        height: auto;
        max-width: 28rem;
        max-height: 95vh;
        border-radius: 1.5rem;
    }
    .modal .modal-card {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    #cart-panel.is-open {
        padding-bottom: 120px;
    }
    #product-modal .modal-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: var(--c-bg);
    }
    #product-modal .modal-card>.relative.flex-shrink-0 {
        height: 35vh;
        background-color: #000;
    }
    #product-modal .modal-card .product-modal-content {
        flex-grow: 1;
        overflow-y: auto;
        color: var(--c-text);
        padding: 1rem;
        padding-bottom: 160px;
    }
    #product-modal .modal-card .product-modal-content #product-modal-title {
        text-shadow: none;
        margin-bottom: 1rem;
    }
    #product-modal .modal-card .product-modal-footer {
        position: absolute;
        bottom: 62px;
        left: 0;
        right: 0;
        height: auto;
        padding: 1.5rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, var(--c-bg) 60%, transparent);
        display: flex;
        align-items: center;
        z-index: 10;
    }
    #product-modal .product-modal-content .flex.gap-2>div {
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.1);
        background-color: rgba(0, 0, 0, 0.02);
        color: var(--c-text-secondary);
    }
    #product-modal .product-modal-content .flex.gap-2>div .text-accent,
    #product-modal .product-modal-content .flex.gap-2>div .text-yellow-400 {
        color: var(--color-accent-dark) !important;
    }
    #product-modal .product-modal-content .option-btn {
        border-color: var(--c-text-secondary);
        color: var(--c-text-secondary);
    }
    #product-modal .product-modal-content input:checked+.option-btn {
        background-color: var(--color-accent-dark);
        color: var(--color-white);
        border-color: var(--color-accent-dark);
    }
    #product-modal .product-modal-content .text-white\/80,
    #product-modal .product-modal-content .text-white\/70,
    #product-modal .product-modal-content .text-white\/90 {
        color: var(--c-text-secondary) !important;
    }
    #product-modal .product-modal-footer {
        color: var(--c-text);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .theme-coffee #product-modal .product-modal-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}