/*
==================================================
HAPPY MISTHAN
GLOBAL STYLES
==================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ======================================
   CSS VARIABLES
====================================== */

:root{

    --primary:#ff7a00;
    --primary-dark:#f26b00;

    --white:#ffffff;

    --black:#1f1f1f;

    --text:#555555;

    --border:#ececec;

    --bg:#f7f7f7;

    --card:#ffffff;

    --radius:22px;

    --shadow:0 8px 30px rgba(0,0,0,.08);

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--black);

    overflow-x:hidden;

}

/* ======================================
   COMMON ELEMENTS
====================================== */

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    border:none;

    outline:none;

    font-family:inherit;

    resize:none;

}

ul{

    list-style:none;

}

/* ======================================
   MAIN APP
====================================== */

.app{

    width:100%;

    min-height:100vh;

    background:var(--bg);

}

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

.container{

    width:100%;

    max-width:420px;

    margin:auto;

    padding-left:16px;

    padding-right:16px;

}

/* ======================================
   SECTION SPACING
====================================== */

section{

    width:100%;

    margin-bottom:24px;

}

/* ======================================
   PAGE TITLE
====================================== */

.section-title{

    margin-bottom:18px;

}

.section-title h2{

    font-size:22px;

    font-weight:700;

    color:var(--black);

}

/* ======================================
   EMPTY PRODUCTS
====================================== */

.no-products{

    padding:60px 20px;

    text-align:center;

}

.no-products h3{

    font-size:22px;

    margin-bottom:8px;

}

.no-products p{

    color:var(--text);

}

/* ======================================
   HIDE
====================================== */

.hidden{

    display:none !important;

}

/* ======================================
   SCROLLBAR
====================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#d0d0d0;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

/* ======================================
   SELECTION
====================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

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

button,
input,
.category,
.product-card{

    transition:.25s ease;

}

/* ======================================
   TABLET
====================================== */

@media (min-width:768px){

    .container{

        max-width:720px;

    }

}

/* ======================================
   LAPTOP
====================================== */

@media (min-width:1024px){

    .container{

        max-width:1100px;

    }

}

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

@media (min-width:1400px){

    .container{

        max-width:1280px;

    }

}
/*====================================
HAPPY MISTHAN PREMIUM LOADER
====================================*/

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    overflow:hidden;

    transition:opacity .8s ease,visibility .8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    position:relative;

}

.loader-content::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:220px;

    height:220px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(rgba(255,122,0,.18),transparent 70%);

    animation:glow 2s infinite;

}

.loader-logo{

    width:260px;

    position:relative;

    z-index:2;

    opacity:0;

    transform:scale(.85);

    animation:logoShow 1s forwards;

}

.loader-name{

    position:relative;

    z-index:2;

    margin-top:16px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:var(--black,#1c1c1c);

    opacity:0;

    transform:translateY(6px);

    animation:nameShow 1s .15s forwards;

}

.loader-progress{

    width:260px;

    height:5px;

    background:#eee;

    border-radius:20px;

    margin-top:40px;

    overflow:hidden;

}

.loader-bar{

    width:0;

    height:100%;

    border-radius:20px;

    background:linear-gradient(90deg,var(--primary),#ffb347);

    animation:progress 2.1s forwards;

}

@keyframes logoShow{

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes nameShow{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes progress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes glow{

    0%{

        transform:translate(-50%,-50%) scale(.9);

        opacity:.35;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.05);

        opacity:.7;

    }

    100%{

        transform:translate(-50%,-50%) scale(.9);

        opacity:.35;

    }

}

@media(max-width:768px){

.loader-logo{

    width:180px;

}

.loader-progress{

    width:180px;

}

.loader-content::before{

    width:160px;

    height:160px;

}

.loader-name{

    font-size:18px;

}

}
/*==========================================
APP LIKE TOUCH
==========================================*/

html,
body{

    touch-action: manipulation;

    -webkit-text-size-adjust:100%;

}