body {
}

<style >
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #EEF4ED;
    color: #2b2f36;
}

#header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 50;
}

#header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}

#header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a1a1a;
}

#header img {
    height: 28px;
    width: 28px;
    object-fit: contain;
}

.menu-toggle {
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    color: #6b7280;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .menu-toggle:hover {
        background-color: #EEF4ED;
        color: #ff6B35;
    }


#countaner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "Fpanel Fpanel Fpanel Fpanel Fpanel Fpanel"
        "Tpanel Tpanel Tpanel Tpanel Tpanel Tpanel"
        "check check  check check  check check"
        "mahsolat1 mahsolat1 mahsolat1 mahsolat1 mahsolat1 mahsolat1"
        "mahsolat2 mahsolat2 mahsolat2 mahsolat2 mahsolat2 mahsolat2"
        "footer footer footer footer footer footer";
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#Fpanel {
    grid-area: Fpanel;
    text-align: center;
}

#Tpanel {
    grid-area: Tpanel;
    text-align: center;
}

#check {
    grid-area: check;
    text-align: center;
}

#footer {
    grid-area: footer;
    text-align: center;
    padding: 24px 20px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #e2eee0;
    color: #6b7280;
    font-size: 13px;
}

#footer-title {
    font-size: 13px;
    font-weight: bold;
    color: #2b2f36;
    margin-bottom: 14px;
}

#footer-contacts {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

    #footer-contacts p {
        margin: 0;
        color: #6b7280;
    }

    #footer-contacts span {
        color: #2b2f36;
        font-weight: bold;
    }

#mahsolat {
    grid-area: footer;
}

#mahsolat2 {
    grid-area: mahsolat2;
    text-align: right;
    margin-bottom: 25px;
    /*margin-right: 25px;*/
}

#mahsolat1 {
    grid-area: mahsolat1;
    text-align: right;
    margin-bottom: 25px;
    /*margin-right: 25px;*/
}

#mahsolat2 .carousel {
    --nav-marker-bg-active: #4169E1; /* قبلاً #ff6B35 بود */
}

    #mahsolat2 .carousel::scroll-button(*):not(:disabled):where(:hover, :focus-visible) {
        color: #4169E1;
        border-color: #4169E1;
    }



.cart-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.login-box {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 20px;
}

    .login-box h2 {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 15px 0;
        color: #2b2f36;
    }

.form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    text-align: right;
}

    .form-group label {
        margin-bottom: 5px;
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .form-group input {
        padding: 8px;
        border: 1px solid #e2e2e2;
        border-radius: 6px;
        outline: none;
        transition: border-color 0.15s ease;
    }

        .form-group input:focus {
            border-color: #4169E1;
        }


.login-box button {
    width: 100%;
    padding: 9px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background-color: #4169E1;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .login-box button:hover {
        background-color: #35569c;
    }



.cart {
    width: calc((100% - 15px) / 2);
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

    .cart img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }

    .cart p {
        margin: 0;
        padding: 12px;
        text-align: center;
        font-size: 13px;
        color: #2b2f36;
    }

/* ===================== SELLER / SUPPLIER TOGGLE BUTTONS ===================== */
#change_panel {
    display: inline-flex;
    background-color: #EEF4ED;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 16px;
    gap: 4px;
}

    #change_panel button {
        border: none;
        background: transparent;
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        #change_panel button:hover {
            color: #ff6b35;
        }

        #change_panel button.active {
            background-color: #ffffff;
            color: #4169E1;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

            #change_panel button.active:hover {
                color: #4169E1;
            }

#check {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.radio-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border: 1px solid #e2eee0;
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
    position: relative;
}

.radio-count {
    font-size: 26px;
    font-weight: 700;
    color: #ff6b35;
    margin: 0;
    line-height: 1;
    transition: transform 0.1s ease;
}

    .radio-count.pulse {
        transform: scale(1.08);
    }

.radio-text {
    color: #9aa0a8;
    margin: 2px 0 0 0;
    font-size: 12px;
    line-height: 1;
}
/* casual  */
/* casual  */
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer demo;

/* ===== DEMO LAYER (carousel component) ===== */
@layer demo {

    .carousel {
        /* prev & next buttons */
        --nav-btn-size: 36px;
        --nav-btn-bg: #ffffff;
        --nav-btn-txt: #2b2f36;
        /* item markers */
        --nav-marker-bg: #d8dadd;
        --nav-marker-bg-active: #4169E1;
        --item-width: 250px; /* keep in sync with grid-auto-columns below */

        width: min(calc(100% - 2rem), 700px);
        list-style: none;
        padding-block: 2rem; /* create space for drop shadows */
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--item-width);
        gap: 0;

        @supports not selector(::scroll-marker-group) {
            /* add gap for browsers that don't support ::scroll-* */
            gap: 1rem;
        }
        /* anchor-scope keeps this carousel's anchor visible only to
             itself, so two .carousel instances on the same page
             (mahsolat1 and mahsolat2) never fight over the same
             anchor name -- this is what fixes the misplaced buttons
             and the missing dots on the first carousel */
        anchor-name: --carousel;
        anchor-scope: --carousel;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;
        /* empty pseudo elements to push first and last items to the middle */
        &::before, &::after

{
    content: '';
}


/**************** MARKERS GROUP *******************/
/* the item markers will be dynamically placed within this element */
scroll-marker-group: after; /* place after elements*/
&::scroll-marker-group {
    position: absolute;
    position-anchor: --carousel;
    inline-size: min(90cqi, 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: .25rem;
    padding-block-start: 1rem;
    top: anchor( bottom );
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
}
/* carousel item*/
> div {
    position: relative;
    scroll-snap-align: center; /* centers snap */
    scroll-snap-stop: always; /* ensures that the scroll stops at each element */
    container-type: scroll-state; /* define container for child animations */

    display: grid;
    grid-template-areas: 'img' 'title' 'desc';
    text-align: center;
    /* scroll to this item on load */
    &.scroll-start

{
    scroll-initial-target: nearest;
}

/* item title/name */
& > h2 {
    grid-area: title;
    margin: 1rem 0 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    color: #2b2f36;
    transition: all 300ms ease-in-out;
}

& > p {
    grid-area: desc;
    margin: 0;
    white-space: nowrap;
    color: #9aa0a8;
    font-size: 0.85rem;
    transition: all 300ms ease-in-out;
}

& > .img {
    grid-area: img;
    width: 100%;
    aspect-ratio: 3/4;
    transition: all 300ms ease-in-out;
    transform-origin: center center;
    & > img

{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}

}

/* not current item: one consolidated @container instead of
               three separate ones mixed into each child's declaration list */
@container not scroll-state(snapped: inline) {
    & > h2 {
        scale: .5;
        opacity: .5;
        translate: 0 -100px;
    }

    & > p {
        scale: .5;
        opacity: 0;
    }

    & > .img {
        scale: .5;
        opacity: .5;
    }
}


/************** MARKERS **************/
&::scroll-marker {
    content: ' ';
    height: 7px;
    aspect-ratio: 1;
    background-color: var(--nav-marker-bg);
    border-radius: 50%;
    transition: 150ms ease-in-out;
    scale: 1;
    opacity: 1;
}
    /* current item marker */
    &::scroll-marker:target-current {
        background-color: var(--nav-marker-bg-active);
        scale: 1.2;
    }
    /* hover and keyboard focus */
    &::scroll-marker:where(:hover, :focus-visible) {
        background-color: #b7bac0;
    }
    /* keyboard focus */
    &::scroll-marker:focus-visible {
        outline: 1px dashed var(--nav-marker-bg-active);
        outline-offset: 4px;
    }

}


/************* NAV BUTTONS (left and right) ************/
&::scroll-button(*) {
    position: absolute;
    position-anchor: --carousel;
    width: var(--nav-btn-size);
    aspect-ratio: 1/1;
    font: inherit;
    font-size: 14px;
    background-color: var(--nav-btn-bg);
    display: grid;
    place-content: center;
    color: var(--nav-btn-txt);
    border: 1px solid #ececec;
    border-radius: 50%;
    opacity: 0.9;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: all 150ms ease-in-out;
    outline: 1px dashed transparent;
    outline-offset: 0px;
    /* vertically center on the image, not the whole card:
               top padding (2rem) + half the image height
               (image height = item width * 4/3, from aspect-ratio: 3/4) */
    top: calc(anchor(top) + 2rem + (var(--item-width) * 4 / 3 / 2));
    translate: 0 -50%;
}
/* button - prev */
&::scroll-button(inline-start) {
    content: '❮';
    left: calc(anchor(left) - var(--nav-btn-size));
}
/* button - next */
&::scroll-button(inline-end) {
    content: '❯';
    right: calc(anchor(right) - var(--nav-btn-size));
}
/* hover and keyboard focus */
&::scroll-button(*):not(:disabled):where(:hover, :focus-visible) {
    opacity: 1;
    color: #4169E1;
    border-color: #4169E1;
}
/* keyboard focus */
&::scroll-button(*):focus-visible {
    outline: 1px dashed var(--nav-btn-txt);
    outline-offset: 4px;
}
/* disabled */
&::scroll-button(*):disabled {
    opacity: .25;
    cursor: unset;
}

}
} /* end @layer demo */

.msg-supports {
    font-size: 0.8rem;
    color: #9aa0a8;
}

@supports selector(::scroll-marker-group) {
    .msg-supports {
        display: none;
    }
}

.icon {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    fill: none;
    stroke: #6b7280;
    stroke-width: 1.6;
    transition: 0.2s;
}

    .icon:hover {
        stroke: #2b2f36;
    }

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #2b2f36;
}

#login_error {
    display: none;
    color: #ff6B35;
    font-size: 13px;
    margin: 10px 0 0 0;
    text-align: center;
}