/*==================================================
    ERRANDS - AL RAFFA
    Part 1
    Base Styles
==================================================*/

:root{

    --primary:#147D45;
    --primary-dark:#0E5E34;

    --accent:#F5B942;

    --bg:#F4F6F8;
    --surface:#FFFFFF;

    --text:#1E1E1E;
    --text-light:#666666;

    --border:#E4E6E8;

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

    --radius:18px;

    --header-height:72px;

    --transition:.25s ease;

}


/*==============================*/

body.dark{

    --bg:#141414;

    --surface:#202020;

    --text:#F5F5F5;

    --text-light:#BBBBBB;

    --border:#323232;

    --shadow:
        0 8px 28px rgba(0,0,0,.35);

}


/*==============================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    -webkit-tap-highlight-color:transparent;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:

        Inter,

        Segoe UI,

        Arial,

        sans-serif;

    transition:

        background .3s,

        color .3s;

    min-height:100vh;

    padding-bottom:120px;

}


/*==============================*/

button{

    cursor:pointer;

    border:none;

    outline:none;

    font-family:inherit;

}

input,

select{

    outline:none;

    border:none;

    font-family:inherit;

}


/*==============================*/

.hidden{

    display:none!important;

}


/*==================================================
HEADER
==================================================*/

header{

    position:sticky;

    top:0;

    z-index:100;

    height:var(--header-height);

    background:

        rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px;

    border-bottom:

        1px solid rgba(0,0,0,.06);

}

body.dark header{

    background:

        rgba(20,20,20,.72);

    border-bottom:

        1px solid rgba(255,255,255,.06);

}


/*==============================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:44px;

    height:44px;

    object-fit:contain;

}

.logo h2{

    font-size:20px;

    font-weight:700;

    line-height:1.1;

}

.logo small{

    color:var(--text-light);

    font-size:13px;

}


/*==============================*/

.headerButtons{

    display:flex;

    gap:10px;

}

.headerButtons button{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    box-shadow:var(--shadow);

    font-size:18px;

    transition:var(--transition);

}

.headerButtons button:hover{

    transform:translateY(-2px);

}

.headerButtons button:active{

    transform:scale(.94);

}


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

.searchSection{

    padding:

        18px

        16px

        10px;

}

.searchSection input{

    width:100%;

    height:52px;

    border-radius:16px;

    background:var(--surface);

    padding:0 18px;

    font-size:16px;

    color:var(--text);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.searchSection input::placeholder{

    color:var(--text-light);

}

.searchSection input:focus{

    border-color:var(--primary);

}


/*==================================================
DELIVERY
==================================================*/

.delivery{

    padding:

        4px

        16px

        18px;

}

.delivery label{

    display:block;

    margin-bottom:8px;

    color:var(--text-light);

    font-size:13px;

}

.delivery select{

    width:100%;

    height:52px;

    border-radius:16px;

    background:var(--surface);

    color:var(--text);

    padding:0 16px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    appearance:none;

}


/*==================================================
CATALOGUE
==================================================*/

#products{

    padding:

        0

        16px

        40px;

}


/*==============================*/

#products.grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:16px;

}


/*==============================*/

#products.list{

    display:flex;

    flex-direction:column;

    gap:14px;

}


/*==================================================
LOADING PLACEHOLDER
==================================================*/

.skeleton{

    height:260px;

    border-radius:18px;

    background:

        linear-gradient(

            90deg,

            #ececec 0%,

            #f8f8f8 50%,

            #ececec 100%

        );

    background-size:200%;

    animation:

        shimmer 1.2s infinite;

}

body.dark .skeleton{

    background:

        linear-gradient(

            90deg,

            #242424 0%,

            #323232 50%,

            #242424 100%

        );

    background-size:200%;

}

@keyframes shimmer{

    from{

        background-position:200%;

    }

    to{

        background-position:-200%;

    }

}