/* --------- Base Styles --------- */
:root {
    --bg: #fff7f0;
    --bg-alt: #f3e5e0;
    --bg-card: #ffffff;
    --primary: #5d4037;
    --primary-dark: #3e2723;
    --accent: #d7a86e;
    --accent-soft: #f7d9aa;
    --text: #3e2723;
    --muted: #8d6e63;
    --border: #d7ccc8;
    --danger: #c62828;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #ffe3c4 0, #fff7f0 45%, #fdf5ef 100%);
    color: var(--text);
    line-height: 1.4;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3 {
    margin-top: 0;
}

/* Layout wrapper for sticky footer */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0rem 1rem; /* top padding 0 to remove gap under nav */
}

.hidden {
    display: none !important;
}

.small {
    font-size: 0.8rem;
}

/* --------- Header / Nav --------- */
/* Header / Nav */
header {
    background: linear-gradient(120deg, #4e342e, #6d4c41);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
    /* Header nav: links on left, logo on right */
    header .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Move logo to the right side */
    header .logo {
        order: 1;
    }

    /* Move the nav (menu links) to the left side */
    header nav {
        order: 2;
    }



    /* Sirf header ke andar container ke liye – height yahin se control hogi */
    header .container-nav {
        padding: 0.7rem 1rem; /* top & bottom 0.7rem → header visibly mota */
    }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.15rem;
    text-transform: uppercase;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    align-items: center;
}

nav a {
    padding: 0.45rem 1rem; /* pehle 0.35rem 0.75rem tha */
    border-radius: 999px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

    nav a:hover {
        background: rgba(255,255,255,0.16);
    }

    nav a.active {
        background: #f7d9aa;
        color: #3e2723;
    }

.badge {
    background: var(--accent-soft);
    color: #3e2723;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    margin-left: 0.2rem;
    font-weight: 600;
}

/* ================= HERO FULL-WIDTH SLIDER ================= */

#home {
    margin-top: 0;
}

.hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0; /* YAHAN 0 hi rehne do (koi negative nahi) */
    margin-bottom: 2.5rem;
}

.hero-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    height: calc(100vh - 64px); /* full screen minus header */
    min-height: 480px;
    background: #3e2723;
}
.hero-bg {
    position: absolute;
    inset: 0; /* makes it fill .hero-card */
    background-image: url('https://images.pexels.com/photos/373888/pexels-photo-373888.jpeg?auto=compress&cs=tinysrgb&w=1500');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.7);
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(35,20,16,0.9), rgba(109,76,65,0.6));
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 5rem 3rem 3.5rem;
    color: #ffe9c4;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hero-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 236, 179, 0.18);
    border-radius: 999px;
    padding: 0.3rem 1.1rem;
    font-size: 0.85rem;
    margin-bottom: 1.3rem;
    border: 1px solid rgba(255,236,179,0.7);
    letter-spacing: 0.03em;
}

.hero-slides {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

    .hero-slide.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

.hero-title {
    font-size: 3.4rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.hero-subtitle {
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.hero-text {
    margin-bottom: 1.6rem;
    color: #ffecb3;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
}

/* Extra highlights row */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.4rem;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: rgba(255, 236, 179, 0.9);
}

    .hero-meta span::before {
        content: "• ";
        opacity: 0.75;
    }

/* Hero buttons slightly bigger */
.hero .form-actions .btn {
    padding: 0.7rem 1.6rem;
    font-size: 0.95rem;
}

.hero .form-actions .btn-primary {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.hero .form-actions .btn-outline {
    border-width: 1.5px;
}

/* Dots */
.hero-dots {
    position: absolute;
    left: 2rem;
    bottom: 1.8rem;
    display: flex;
    gap: 0.45rem;
    z-index: 2;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

    .hero-dot.active {
        background: #fff8e1;
        border-color: #fff8e1;
        width: 18px;
    }

/* Responsive hero */
@media (max-width: 992px) {
    .hero-card {
        height: calc(100vh - 56px);
        min-height: 420px;
    }

    .hero-inner {
        padding: 3.5rem 1.8rem 2.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-card {
        height: 75vh;
        min-height: 380px;
    }

    .hero-inner {
        padding: 2.8rem 1.3rem 2.1rem;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 1.7rem;
    }

    .hero-text {
        max-width: none;
        font-size: 0.95rem;
    }

    .hero-dots {
        left: 1.4rem;
        bottom: 1.4rem;
    }
}

/* --------- Buttons --------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.1s, box-shadow 0.15s;
    text-align: center;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: #3e2723;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

    .btn-primary:hover {
        background: #f0b878;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.8);
    color: #fff;
}

    .btn-outline:hover {
        background: rgba(255,255,255,0.15);
    }

.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--primary-dark);
}

    .btn-outline-dark:hover {
        background: var(--bg-alt);
    }

.btn-danger {
    background: var(--danger);
    color: #fff;
}

    .btn-danger:hover {
        background: #b71c1c;
    }

.btn-sm {
    padding: 0.28rem 0.75rem;
    font-size: 0.82rem;
}

/* --------- Cards / Grids --------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
}

.card {
    background: var(--bg-card);
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.14);
    }

    .card img {
        border-radius: 0.9rem;
        width: 100%;
        height: 190px;
        object-fit: cover;
        margin-bottom: 0.8rem;
    }

.card-title {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.1rem;
}

.card-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.card-price {
    font-weight: 700;
    color: var(--primary-dark);
    margin-right: 0.4rem;
    font-size: 0.95rem;
}

.card-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
}

.chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
    background: var(--bg-alt);
    color: var(--muted);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

/* --------- Forms --------- */
form {
    max-width: 520px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.form-group {
    margin-bottom: 0.75rem;
}

label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    background: #fff;
}

textarea {
    min-height: 70px;
    resize: vertical;
}

    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 1px rgba(215,168,110,0.4);
    }

.form-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.hint {
    font-size: 0.8rem;
    color: var(--muted);
}

.error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.success {
    color: #2e7d32;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* --------- Tables --------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border);
}

th, td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    text-align: left;
    background: var(--bg-alt);
    font-weight: 600;
    font-size: 0.8rem;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* --------- Layout Helpers --------- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin: 2.3rem 0 1.2rem;
    flex-wrap: wrap;
}

    .section-header h2 {
        font-size: 1.4rem;
    }

    .section-header p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--muted);
    }

.two-col {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
    gap: 1.6rem;
    align-items: flex-start;
    margin-top: 2.5rem;
}

@media (max-width: 768px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* --------- Discount Banner --------- */
.discount-banner {
    margin-top: 2.2rem;
    border-radius: 1rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(120deg, #5d4037, #d7a86e);
    color: #fff8e1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.discount-text h3 {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
}

.discount-text p {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.discount-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    font-size: 0.78rem;
}

/* --------- Quantity Stepper --------- */
.quantity-stepper {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: #fff;
}

    .quantity-stepper.is-small {
        transform: scale(0.92);
        transform-origin: left center;
    }

    .quantity-stepper button.qty-btn {
        background: transparent;
        border: none;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        color: var(--primary-dark);
    }

        .quantity-stepper button.qty-btn:hover {
            background: var(--bg-alt);
        }

    .quantity-stepper input.qty-input {
        width: 46px;
        border: none;
        text-align: center;
        font-size: 0.85rem;
        padding: 0;
        outline: none;
    }

/* --------- Toast Notification --------- */
#toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #323232;
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    #toast.success {
        background: #2e7d32;
    }

    #toast.error {
        background: #c62828;
    }

/* --------- Admin Layout --------- */

.admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 1rem;
    align-items: flex-start;
}

.admin-sidebar {
    background: var(--primary-dark);
    color: #fbe9e7;
    border-radius: 0.9rem;
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
}

    .admin-sidebar h3 {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .admin-sidebar nav a {
        display: block;
        padding: 0.35rem 0.5rem;
        border-radius: 0.6rem;
        margin-bottom: 0.2rem;
        cursor: pointer;
        color: #fbe9e7;
    }

        .admin-sidebar nav a:hover,
        .admin-sidebar nav a.active {
            background: rgba(215,168,110,0.35);
        }

/* Default admin-main is a card */
.admin-main {
    background: var(--bg-card);
    border-radius: 0.9rem;
    padding: 0.9rem 0.95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

    /* Flat admin-main: koi card look nahi, sirf inner card dikhayenge */
    .admin-main.admin-main--flat {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

.admin-panel {
    display: none;
}

    .admin-panel.active {
        display: block;
    }

.admin-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
}

.admin-stat-card {
    background: var(--bg);
    border-radius: 0.8rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
}

    .admin-stat-card .label {
        font-size: 0.75rem;
        color: var(--muted);
    }

    .admin-stat-card .value {
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 0.1rem;
    }
/* --------- Auth (Login / Register) Cards --------- */
/* --------- Auth (Login / Register) FULLSCREEN BG --------- */
.auth-section {
    /* poora viewport cover kare */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem 0; /* thoda breathing space, chaaho to 0 bhi kar sakte ho */
    overflow: hidden;
}

    /* FULL-SCREEN blur image – viewport ke hisab se, container ke nahi */
    .auth-section::before {
        content: "";
        position: fixed; /* IMPORTANT: viewport ko cover karega */
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background-image: url("https://images.pexels.com/photos/373888/pexels-photo-373888.jpeg?auto=compress&cs=tinysrgb&w=1920");
        background-size: cover;
        background-position: center center;
        filter: blur(4px);
        transform: scale(1.05); /* blur edges hide */
        opacity: 0.6;
        z-index: -1; /* content ke peeche */
    }

    /* halka dark overlay for contrast */
    .auth-section::after {
        content: "";
        position: fixed; /* same viewport overlay */
        inset: 0;
        background: linear-gradient( 135deg, rgba(35, 20, 16, 0.45), rgba(109, 76, 65, 0.25) );
        z-index: -1;
    }

/* Card ko prominent + upar rakhna */
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 1.1rem;
    padding: 1.9rem 1.7rem 2rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(215, 204, 200, 0.8);
    backdrop-filter: blur(3px);
}

@media (max-width: 768px) {
    .auth-section {
        min-height: 100vh; /* mobile par bhi full */
        padding: 1.5rem 0;
    }

    .auth-card {
        max-width: 95%;
        padding: 1.6rem 1.3rem 1.7rem;
    }
}
.auth-title {
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1.2rem;
}

@media (max-width: 768px) {
    .auth-section {
        min-height: calc(100vh - 70px);
        padding: 1.5rem 0;
    }

    .auth-card {
        max-width: 95%;
        padding: 1.6rem 1.3rem 1.7rem;
    }
}

@media (max-width: 800px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
}

/* --------- Footer --------- */
footer {
    margin-top: 2.5rem;
    border-top: none;
    /* header jaisa gradient */
    background: linear-gradient(120deg, #4e342e, #6d4c41);
    color: #fbe9e7;
    padding: 1.1rem 0;
    font-size: 0.85rem;
    text-align: center;
    /* upar halki shadow, taake footer thoda “raised” lage */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

    /* container ko center-align rakhne ke liye */
    footer .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }