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

    img{
        max-width:100%;
    }

    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:'Segoe UI',sans-serif;
    }

    body{
        background:#f8f6f4;
        color:#222;
    }

    html{
        scroll-behavior:smooth;
    }

    a{
        text-decoration:none;
    }

    .container{
        width:90%;
        max-width:1400px;
        margin:auto;
    }

    /* ===========================
    NAVBAR
    =========================== */

    .navbar{
        background:linear-gradient(135deg,#6d0019,#a0002e);

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

        padding:18px 50px;

        position:sticky;
        top:0;

        z-index:999;

        box-shadow:0 5px 20px rgba(0,0,0,.20);
    }

    .logo{
        color:white;
        font-size:38px;
        font-weight:700;
    }

    .navbar a{
        color:white;
        margin-left:15px;
        padding:10px 15px;
        border-radius:10px;
        transition:.3s;
    }

    .navbar a:hover{
        background:rgba(255,255,255,.15);
    }

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

    .hero{

        height:500px;
        background:
        linear-gradient(
        rgba(109,0,25,.70),
        rgba(109,0,25,.70)
        ),
        url("https://images.unsplash.com/photo-1445205170230-053b83016050");

        background-size:cover;
        background-position:center;

        display:flex;
        flex-direction:column;

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

        color:white;
        text-align:center;
    }

    .hero h1{
        font-size:70px;
        margin-bottom:15px;
    }

    .hero p{
        font-size:24px;
    }

    .hero-btn{

        background:gold;

        color:black;

        padding:15px 30px;

        border-radius:50px;

        margin-top:20px;

        font-weight:bold;

        transition:.3s;
    }

    .hero-btn:hover{
        transform:scale(1.05);
    }

    /* ===========================
    SEARCH
    =========================== */

    .search-box{

        max-width:600px;

        margin:30px auto;

        display:flex;

        gap:10px;
    }

    .search-box input{

        flex:1;

        padding:15px;

        border-radius:12px;

        border:none;

        box-shadow:
        0 3px 10px rgba(0,0,0,.1);
    }

    /* ===========================
    CATEGORY FILTERS
    =========================== */

    .filters{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:10px;

        margin-bottom:30px;
    }

    .filter-btn{

        padding:12px 20px;

        border:none;

        border-radius:30px;

        background:white;

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

        cursor:pointer;
    }

    .filter-btn:hover{

        background:#6d0019;
        color:white;
    }

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

    .title{

        text-align:center;

        margin:40px 0;

        color:#6d0019;

        font-size:42px;
    }

    /* ===========================
    PRODUCTS GRID
    =========================== */

    .products{

        max-width:1500px;

        margin:auto;

        padding:20px;

        display:grid;

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

        gap:30px;
    }

    /* ===========================
    PRODUCT CARD
    =========================== */

    .card{

        background:white;

        border-radius:20px;

        overflow:hidden;

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

        transition:.4s;
    }

    .card:hover{

        transform:translateY(-12px);

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

    .card img{

        width:100%;

        aspect-ratio:3/4;

        object-fit:cover;

        transition:.5s;
    }

    .card:hover img{
        transform:scale(1.05);
    }

    .info{
        padding:20px;
    }

    .info h3{
        color:#6d0019;
        margin-bottom:10px;
        word-wrap:break-word;
        overflow-wrap:break-word;
    }

    .price{

        color:green;

        font-size:28px;

        font-weight:bold;

        margin-bottom:10px;
    }

    .info p{

        margin-bottom:6px;
    }

    /* ===========================
    PRODUCT BADGES
    =========================== */

    .badge{

        display:inline-block;

        padding:6px 10px;

        margin-bottom:10px;

        border-radius:20px;

        background:#6d0019;

        color:white;

        font-size:12px;
    }

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

    .whatsapp{

        display:inline-block;

        margin-top:12px;

        background:#25d366;

        color:white;

        padding:12px 18px;

        border-radius:10px;

        transition:.3s;
    }

    .whatsapp:hover{
        background:#1caa52;
    }

    .delete-btn{

        display:inline-block;

        margin-top:12px;

        margin-left:20px;

        background:red;

        color:white;

        padding:12px 18px;

        border-radius:10px;
    }

    /* ===========================
    LOGIN PAGE
    =========================== */

    .login-page{

        height:100vh;

        background:
        linear-gradient(
        135deg,
        #6d0019,
        #a0002e
        );

        display:flex;

        justify-content:center;

        align-items:center;
    }

    .login-box{

        width:420px;

        background:white;

        padding:40px;

        border-radius:25px;

        text-align:center;

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

        animation:fadeIn .6s ease;
    }

    .login-box h2{

        margin-bottom:20px;

        color:#6d0019;
    }

    .login-box input{

        width:100%;

        padding:15px;

        margin-bottom:15px;

        border:none;

        background:#f3f3f3;

        border-radius:10px;
    }

    .login-box button{

        width:100%;

        padding:15px;

        border:none;

        border-radius:10px;

        background:#6d0019;

        color:white;

        cursor:pointer;
    }

    .login-box button:hover{
        background:#8d0129;
    }

    /* ===========================
    ADMIN PAGE
    =========================== */

    .form-box{
        width:900px;
        margin:50px auto;
        background:white;
        padding:40px;
        border-radius:25px;
        box-shadow:0 15px 30px rgba(0,0,0,.15);
        height:auto;
    }

    .form-box h1{

        color:#6d0019;

        margin-bottom:20px;
    }

    .form-box form{

        display:grid;

        grid-template-columns:
        1fr 1fr;

        gap:15px;
    }

    .form-box textarea{

        grid-column:1/3;

        height:120px;
    }

    .form-box button{

        grid-column:1/3;
    }

    .form-box input,
    .form-box textarea{

        padding:15px;

        border:none;

        background:#f3f3f3;

        border-radius:12px;
    }

    .form-box button{

        padding:15px;

        background:#6d0019;

        color:white;

        border:none;

        border-radius:12px;

        font-size:18px;

        cursor:pointer;
    }

    /* ===========================
    HOME BUTTON
    =========================== */

    .home-btn{

        display:inline-block;

        padding:12px 22px;

        background:gold;

        color:black;

        border-radius:12px;

        margin-bottom:20px;

        font-weight:bold;
    }

    /* ===========================
    DASHBOARD CARDS
    =========================== */

    .dashboard{

        display:grid;

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

        gap:20px;
    }

    .dashboard-card{

        background:white;

        padding:25px;

        border-radius:15px;

        text-align:center;

        box-shadow:
        0 5px 15px rgba(0,0,0,.1);
    }

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

    .footer{

        margin-top:50px;

        background:#6d0019;

        color:white;

        text-align:center;

        padding:40px;
    }

    /* ===========================
    FLOATING WHATSAPP
    =========================== */

    .floating-whatsapp{

        position:fixed;

        right:20px;

        bottom:20px;

        width:65px;

        height:65px;

        background:#25d366;

        color:white;

        border-radius:50%;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:32px;

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

        z-index:9999;
    }

    /* ===========================
    ANIMATIONS
    =========================== */

    @keyframes fadeIn{

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

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

    /* ===========================
    RESPONSIVE
    =========================== */

    @media(max-width:1200px){

        .products{
            grid-template-columns:
            repeat(2,1fr);
        }

        .dashboard{
            grid-template-columns:
            repeat(2,1fr);
        }
    }

    /* Mobile */
    @media(max-width:768px){

        .navbar{
            flex-direction:column;
            gap:15px;
            padding:15px;
            text-align:center;
        }

        .nav-links{
            justify-content:center;
            flex-wrap:wrap;
            gap:10px;
        }

        .nav-links a{
            margin:0;
        }

        .hero{
            height:400px;
            padding:20px;
        }

        .hero h1{
            font-size:38px;
        }

        .hero p{
            font-size:18px;
        }

        .products{
            grid-template-columns:1fr;
            padding:15px;
            gap:20px;
        }

        .dashboard{
            grid-template-columns:1fr;
        }

        .form-box{
            width:95%;
            padding:25px;
        }

        .login-box{
            width:95%;
        }

        .form-box form{
            grid-template-columns:1fr;
        }

        .form-box textarea{
            grid-column:auto;
        }

        .form-box button{
            grid-column:auto;
        }

        .product-gallery img{
            width:90px;
            height:120px;
            flex-shrink:0;
        }

        .whatsapp,
        .edit-btn,
        .delete-btn{
            display:block;
            width:100%;
            text-align:center;
            margin:10px 0;
        }

        .floating-whatsapp{
            width:55px;
            height:55px;
            right:15px;
            bottom:15px;
            font-size:28px;
        }

        .navbar{
            padding:15px;
        }

        .logo{
            font-size:26px;
        }
    }

    .nav-links{
        display:flex;
        align-items:center;
        gap:20px;
    }

    .nav-links a{
        color:white;
        text-decoration:none;
        padding:10px 20px;
        background:rgba(255,255,255,0.08);
        border:1px solid rgba(255,255,255,0.15);
        border-radius:12px;
        transition:0.3s;
    }

    .nav-links a:hover{
        background:white;
        color:#8b0028;
    }

    .back-home-btn{
        display:inline-block;
        margin-top:20px;
        padding:12px 25px;
        background:gold;
        color:#000;
        border-radius:12px;
        font-weight:600;
        transition:0.3s;
    }

    .back-home-btn:hover{
        background:#ffd700;
        transform:translateY(-2px);
    }

    .admin-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:25px;
    }

    .admin-header h1{
        margin-bottom:8px;
    }

    .admin-header p{
        margin:0;
    }

    .home-btn{
        margin:0;
        white-space:nowrap;
    }

    .flash-container{
        position:fixed;
        top:20px;
        right:20px;
        z-index:99999;
    }

    .flash{
        padding:15px 20px;
        margin-bottom:10px;
        border-radius:10px;
        color:white;
        font-weight:600;
        box-shadow:0 5px 15px rgba(0,0,0,.2);
        animation:slideIn .4s ease;
        transition:opacity .5s ease;
    }

    .flash.success{
        background:#28a745;
    }

    .flash.info{
        background:#007bff;
    }

    .flash.danger{
        background:#dc3545;
    }

    @keyframes slideIn{
        from{
            opacity:0;
            transform:translateX(100%);
        }
        to{
            opacity:1;
            transform:translateX(0);
        }
    }

    .stock-good{
        color:green;
        font-weight:bold;
    }

    .stock-low{
        color:orange;
        font-weight:bold;
    }

    .stock-out{
        color:red;
        font-weight:bold;
    }

    .edit-btn{
        display:inline-block;
        margin-top:12px;
        margin-left:15px;
        background:#007bff;
        color:white;
        padding:12px 18px;
        border-radius:10px;
    }

    .edit-btn:hover{
        background:#0056b3;
    }

    .product-gallery{
        display:flex;
        gap:10px;
        overflow-x:auto;
    }

    .product-gallery img{
        width:120px;
        height:160px;
        object-fit:cover;
        border-radius:10px;
    }

    .image-modal{
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.9);
        z-index:99999;
    }

    .image-modal img{
        max-width:90%;
        max-height:90%;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }

    .close-modal{
        position:absolute;
        top:20px;
        right:30px;
        color:white;
        font-size:40px;
        cursor:pointer;
    }

    .zoomable{
        cursor:pointer;
    }

    .logout-btn{
        color:white;
    }