:root {
    /* Typography system (client feedback 25-10-2026): only two families on the whole platform.
       Headings, section titles, navigation, buttons, badges, small labels -> Barlow Condensed.
       Body text, descriptions, form fields, card titles, smaller headings -> Inter.
       Do not add any other font family. */
    --font-heading: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;
    /* Legacy aliases kept only so that untouched rules keep resolving to the two families. */
    --font1: var(--font-body);
    --font2: var(--font-heading);
    --font3: var(--font-heading);
    --font4: var(--font-body);
    --font-5: var(--font-body);
    --font5: var(--font-body);
    --font6: var(--font-heading);
    --font7: var(--font-body);
    --font8: var(--font-body);
    --font9: var(--font-body);
    --fontt7: var(--font-body);
    --yellow: #FFC94F;
    --dark: #1E1334;
}

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


body {
    font-family: var(--font-body);
}

p{
    margin-bottom: 0;
}

/* Fonts: only the two typography tokens defined in :root (see top of file). */

/* global css */

/* .container {
    max-width: 1377px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
} */

@media only screen and (min-width: 320px){
    #hero-section .container{
        max-width: 100%;
        padding-left: 40px;
    }
}

#header .container{
    max-width: 1282px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 991px){
    #header .container{
        padding-right: 18px;
    }
}

#header.not-home .container{
    max-width: 1210.78px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto; 
}

#hero-section.breadCumb .container{
    max-width: 1210.78px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px){
    #hero-section.breadCumb .container{
        padding-left: 21.5px;
    }
}

#about--us .container{
    max-width: 1243px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}



#events .container{
    max-width: 1215px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#e-stalls .container{
    max-width: 1335px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#testmonial {
    max-width: 1250px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#testmonial .container{
    max-width: 100%;
}

.section-title {
    line-height: 53.36px;
    text-transform: uppercase;
}

.section-title h1 {
    font-family: var(--font-heading);
    font-size: 64px;
    letter-spacing: 0.58px;
    font-weight: 800;
    margin-bottom: 0;
}

#events .section-title h1{
    margin-bottom: 7px;
}

#events .section-title p{
    margin-bottom: 0;
}

#wekart .container{
    max-width: 1213px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section-title span {
    font-family: var(--font-heading);
    font-size: 64px;
    letter-spacing: 0.58px;
    background: linear-gradient(to left, );
    font-weight: 800;
    color: rgba(232, 132, 26, 1);
}

.section-title span.brown{
    color: rgba(147, 46, 127, 1);
}

.section-title p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0%;
    color: rgba(16, 10, 28, 1);
    text-transform: none;
}

.section-title2 {
    text-align: center;
}

.section-title2 h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0%;
    color: rgba(147, 46, 127, 1);
    text-transform: uppercase;
}

.section-title2 span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0%;
    color: rgba(15, 23, 42, 1);
    text-transform: uppercase;
}


.sectionTopTag {
    border-radius: 100px;
    background: rgba(232, 132, 26, 1);
    border: 1px solid rgba(230, 163, 48, 1);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 5.5px 25px;
    margin-bottom: 21px !important;
}

.sectionTopTag p {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 10%;
}

/* global css */

/* ======== top carousel css start ======== */

.topCarousel {
    width: 100%;
    overflow: hidden;

    background: linear-gradient(to left,
            #F1DCED 0%,
            #F5E6E0 50%,
            #F5E6E0 50%);
    padding: 11px 0;
    border-bottom: 1px solid #F4EDFF;
}

/* marquee track: N identical groups, animated by one group width (100% / N) for a seamless loop */
.topCarousel__track {
    display: flex;
    width: max-content;
    animation: topCarouselScroll var(--ticker-duration, 30s) linear infinite;
    will-change: transform;
}

.topCarousel:hover .topCarousel__track {
    animation-play-state: paused;
}

.topCarousel__group {
    display: flex;
    align-items: center;
    gap: 48px;
    padding-right: 48px;
    flex-shrink: 0;
}

.topCarousel__slide {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@keyframes topCarouselScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
    .topCarousel__track { animation: none; }
}

.topCarousel__item {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2.08px;
    color: #000;
}

.topCarousel__item p,
.topCarousel__item a,
.topCarousel__item span {
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 20.8px;
    font-weight: 600;
    letter-spacing: 2.08px;
    color: rgba(0, 0, 0, 1) !important;
}

.topCarousel__item p {
    margin-bottom: 0 !important;
    font-family: var(--font-heading);
    font-weight: 600;
}

.topCarousel .topCarousel__slide:has(.tcdot.live) .topCarousel__item p {
    color: var(--yellow) !important; /* mockup: #FFC950 – must beat the black !important above */
}

.topCarousel .tcdot {
    --size: 7px;
    width: var(--size);
    height: var(--size);
    margin-right: 12px;
    border-radius: 50%;
    background-color: #F6A91F;
    flex-shrink: 0;
}

.topCarousel .tcdot.live {
    background-color: #FF3F6E; /* mockup live dot (pink-red) with soft halo */
    animation: livePulse 1.4s ease-in-out infinite;
}

.liveDetector {
    background-color: #FF3F6E;
    animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(255, 63, 110, 0.25);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 7px rgba(255, 63, 110, 0);
    }
}

/* ======== top carousel css end ======== */

/* navabar modification for homepage start */



.navbar-brand{
    padding: 0;
}




/* #header .navbar{
    padding-top: 16.2px;
    padding-bottom: 4.8px;
} */

/* #header.not-home .navbar{
    padding-top: 22px;
} */

#header.not-home .menu--link{
    padding: 0 27.5px;
    letter-spacing: 0.01em;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    text-transform: none;
}

#header.not-home{
    .navbar-brand img{
        width: 64.78px !important;
        height: 70px !important;
    }

    .inloggenBtn{
        font-size: 20px;
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0.01em;
        text-transform: none;
    }
}
/* Same header on every page: desktop navbar height / Inloggen button of the events & over-ons mockup */
@media (min-width: 992px) {
    #header.not-home .navbar { --bs-navbar-padding-y: 20px; }
    #header.not-home .inloggenBtn { height: 56px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Every page: the same header on a solid bar (#31333F = average colour of the strip of the old events / over-ons
   hero photo that sat behind the navbar), white links, orange button. After 50px of scrolling .shadow turns it
   into the light bar. */
#header.header--solid:not(.shadow) {
    background-color: #31333F;
}

#hero-section.breadCumb{
    h2.lead{
        margin-bottom: 9px;
    }
}

/* navabar modification for homepage end */

/* home page css start  */

.heroSmallTag {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #241239;
    font-size: 14.16px;
    letter-spacing: 3.97px;
    text-transform: uppercase;
    padding-left: 50px;
    position: relative;
    margin-bottom: 5px;
}

.heroSmallTag p {
    font-weight: 600;
    font-family: var(--font-heading) !important;
    margin-bottom: 0;
    letter-spacing: 3.97px;
    font-size: 14.16px;
    line-height: 22.66px;
}

.heroSmallTag span {
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    background-color: #241239;
    height: 2.8px;
    width: 32.68px;
    transform: translateY(-50%);
}

.hero-content{
    margin-top: 114px;
    max-width: 499px;
    width: 100%;
    .hero-para{
        font-size: 22px !important;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 0%;
        color: rgba(16, 10, 28, 1);
    }
}

.homeHeroTitle {
    font-size: 60px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #1D1233;
    font-weight: 800;
    line-height: 70px;
    font-family: var(--font-heading) !important;
    margin-bottom: 10px;
}

.homeHeroTitle span {
    background: linear-gradient(93.03deg, #D12FB2 0%, #A857DB 100%);
    font-size: 60px;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-weight: 800;
    font-family: var(--font-heading);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-para {
    all: unset;
    display: block;
    width: 100%;
    font-size: 22px !important;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: 0%;
    color: #100A1C;
}

.homeHeroFeature {
    color: #100A1C;
    margin-top: 34px;
    margin-bottom: 48px;
    padding-left: 15px;
}

@media only screen and (min-width: 992px) {
    .homeHeroFeature>div:first-child {
        padding-left: 0;
    }
}

.homeHeroFeature .icon {
    --size: 53.76px;
    height: var(--size);
    width: var(--size);
    border: 3px solid #932E7F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeHeroFeature .h4 {
    margin-bottom: 0;
    margin-top: 9.6px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0%;
    line-height: 100%;
}

.homeHeroFeature p {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0%;
    line-height: 100%;
}


.homeHeroBtns {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 242.64px;
}

.homeHeroBtns a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16.34px;
    letter-spacing: 0.98px;
    /* margin-bottom: 200px; */
    font-family: var(--font-heading);
}

.homeHeroBtns a:first-child {
    color: #2A1402;
    background: linear-gradient(to right, #FFC94F, #E8841A);
    transition: 0.5s;
    padding: 18px 32.68px 18px 32.68px;
    box-shadow: 0px 1.09px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 10.89px 32.68px -8.71px rgba(246, 169, 31, 0.6);

}

.homeHeroBtns a:last-child {
    color: #1E1334;
    background-color: rgba(255, 235, 251, 1);
    border-radius: 1088.21px;
    border: 1.09px solid rgba(190, 160, 230, 0.88);
    padding: 16.43px 34px 16.46px 31.68px;
    display: flex;
    align-items: center;
}

.homeHeroBtns a:last-child span{
    font-family: var(--font-heading) !important;
    font-weight: 700;
    font-size: 16.34px;
    letter-spacing: 0.98px;
    line-height: 100%;
}

.homeHeroBtns a:last-child img {
    height: 26.14px;
    margin-right: 8px;
}

.homeHeroBtns a:last-child:hover {
    background-color: rgba(255, 235, 251, 1) !important;
}

.homeHeroFeature>div {
    position: relative;
}

/* .homeHeroFeature>div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--yellow);
    width: 1.55px;
    height: 80%;
    display: block;
} */


@media only screen and (min-width: 768px){

    .homeHeroFeature>div:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--yellow);
        width: 1.55px;
        height: 80%;
        display: block;
    }

    .homeHeroFeature>div:nth-child(1)::after{
        width: 1.55px;
    }

}

/* Hero USP row: each title stays on one line, each description is exactly two lines (the break is a <br> in the
   markup, as in the mockup). The three columns take the width of their own content and spread over the row. */
@media only screen and (min-width: 768px) {
    .homeHeroFeature {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }
    .homeHeroFeature > [class*="col-"] {
        /* equal growth + symmetric padding: the extra space is split equally around every centred column, so the
           divider on the column edge (::after, right: 0) sits exactly halfway between two neighbouring texts */
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .homeHeroFeature .h4,
    .homeHeroFeature p {
        white-space: nowrap;
    }
}

/* about us section */

#about--us {
    padding-top: 66px;
    padding-bottom: 100px !important;
}

.about-us-card-common{
    
    .icon{
        --size: 68px;
        height: var(--size);
        width: var(--size);
        border-radius: 12px;
        background-color: rgba(233, 224, 254, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.about-us-card-common:nth-child(1) .icon{
    padding: 13px 12px 12px 13px;
}

.about-us-card-common:nth-child(2) .icon, .about-us-card-common:nth-child(3) .icon{
    padding: 10px 9px 9px 10px;
}

.about-us-card-common:nth-child(4) .icon{
    padding: 9.5px;
}

.about-us-card-01,
.about-us-card-03 {
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(to bottom,
            rgba(255, 201, 79, 0.7) 0.95%,
            rgba(255, 201, 79, 0.5) 0.95%,
            rgba(255, 255, 255, 0.97) 70%) border-box !important;
}



.about-us-card-02,
.about-us-card-04 {
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(to bottom,
            rgba(147, 46, 127, 0.5) 0%,
            rgba(147, 46, 127, 0.3) 30%,
            rgba(255, 255, 255, 0) 70%) border-box !important;
}

.upcomingAllEvBtn {
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: rgba(29, 18, 51, 1);
    padding: 12px 22px;
    border: 1px solid rgba(190, 160, 230, 0.28);
    border-radius: 999px;
    background-color: rgba(168, 87, 219, 0.08);
    box-shadow: 0 4px 4px 0 rgba(190, 160, 230, 0.28);
}

.upcomingEvCard {
    border: 1px solid rgba(190, 160, 230, 0.28);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    margin-top: 33px;
    background: url('../images/event-up.png');
}

.event-date{
    font-family: var(--font-body) !important;
}

.event-date span{
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 20px;
    line-height: 23.26px;
    letter-spacing: 0%;
}


.upcomingEvCard .contentTag {
    background: linear-gradient(to right, rgba(124, 47, 174, 1), rgba(209, 47, 178, 1));
    max-width: fit-content;
    color: #fff;
    text-transform: uppercase;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 8px 15.63px 8px 16px;
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: 1.68px;
    box-shadow: 0px 8px 24px -8px rgba(209, 47, 178, 0.7);
    .fa-star{
        height: 14px;
        width: 14px;
        ::before{
            height: 100%;
            width: 100%;
        }
    }
}

.upcomingEvCard .contentSide {
    padding-top: 46px;
    padding-left: 50px;
    background-color: #120A20;
    padding-bottom: 49.65px;
    padding-right: 40px;
}

.upcomingEvCard .time span {
    font-size: 16px;
    font-family: var(--font-body);
    letter-spacing: 0%;
    font-weight: 400;
    color: rgba(188, 171, 210, 1);
}

.upcomingEvCard .time span i,
.upcomingEvCard .time span svg {
    color: rgba(255, 201, 79, 1);
}

.upcomingEvCard .contentSide .time img{
    margin-right: 8px;
}

.upcomingEvCard .contentSide .title {
    /* margin-top: 10px; */
    color: rgba(245, 238, 252, 1);
    font-family: var(--font-heading);
    font-size: 62px;
    letter-spacing: 0%;
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: 800;
}

.upcomingEvCard .contentSide .eventSd {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0%;
    color: rgba(255, 255, 255, 1);
    margin-top: 14.72px;
    margin-bottom: 26.66px;
    line-height: 25.6px;
}

.eventCountDown{
    margin-bottom: 37.35px;
}

.eventCountDown .countdown-section{
    max-width: 66px;
}



.evCountd .countdown-row {
    display: flex;
    gap: 12px;
}

.evCountd .countdown-row .countdown-section {
    color: rgba(245, 238, 252, 1);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid rgba(190, 160, 230, 0.28);
    border-radius: 14px;
    padding: 12px;
    flex: 1;
    background: rgba(0, 0, 0, 0.34);
}

.evCountd .countdown-row .countdown-section .countdown-amount {
    font-family: var(--font-heading);
    font-weight: 700;
}

.evCountd .countdown-row .countdown-section .countdown-period {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.upcomngEvTicketBtn {
    margin-top: 26.35px;
    background: linear-gradient(to right, rgba(255, 201, 79, 1), rgba(232, 132, 26, 1));
    border-radius: 999px;
    padding: 11px 71.95px 11.29px 73px;
    width: fit-content;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.9px;
    font-weight: 700;
}

.upcomngEvTicketBtn span{
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(42, 20, 2, 1);
    font-family: var(--font-heading) !important;
}

.upcomngEvTicketBtn img {
    --size: 24px;
    height: var(--size) !important;
    width: var(--size) !important;
    object-fit: cover;
}

.eventBtnTwo{
    padding: 16.86px 49.38px 17.14px 50.42px;
    border-radius: 999px;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 10px 30px -8px rgba(246, 169, 31, 0.6);
    width: fit-content;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(42, 20, 2, 1);
    background: linear-gradient(93.82deg, #FFC94F 0%, #E8841A 100%);
}



.upcomingEvCard .imageSide {
    /* background:
        linear-gradient(103.65deg,
            rgba(29, 18, 51, 1) 0%,
            rgba(22, 12, 40, 0.75) 30%,
            rgba(22, 12, 40, 0) 70%),
        url('../images/event-up.png'); */
    background: linear-gradient(103.65deg, rgba(29, 18, 51, 1) 0%, rgba(22, 12, 40, 0.75) 30%, rgba(22, 12, 40, 0) 70%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* min-height: 470px; */
    height: 100%;
    position: relative;
}

.liveEvReminder {
    border: 1px solid rgba(190, 160, 230, 0.28);
    border-radius: 999px;
    padding: 8px 10px 9px 15px;
    background: rgba(11, 7, 18, 0.6);
    text-transform: uppercase;
    width: fit-content;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36.5%;
    margin-top: 26.17px;
    margin-right: calc(12% + 20px);
}

.liveEvReminder p {
    margin-bottom: 0 !important;
    color: #fff;
    font-family: var(--font-heading) !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.liveEvReminder .liveDetector {
    height: 8px;
    width: 8px;
    margin-right: 2px;
    border-radius: 50%;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.liveEvReminder span {
    color: var(--yellow);
    font-family: var(--font-heading) !important;
    font-weight: 700;
}

.event-card-container{
    max-width: 1177px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 19px;
    margin-top: 34.17px;
}


/* event card */
#events .card--01 p,
#events .card--02 p,
#events .card--03 p {
    font-size: 20px;
    line-height: 23.26px;
    letter-spacing: 0%;
    font-weight: 500;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-family: var(--font-body);
}

#events .card--01 p span i,
#events .card--01 p span i,
#events .card--01 p span i {
    font-size: 20px;
    color: rgba(147, 46, 127, 1);
}

.btn--gesloten {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 163px;
    height: 45px;
    /* padding: 12px 33px; */
    border-radius: 31px;
    background: rgba(229, 229, 229, 1);
    border: 1px solid rgba(190, 160, 230, 0.28);
    color: rgba(29, 18, 51, 1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.78;
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    text-transform: uppercase;
}


/* ── Ticket button ── */
#events .btn--semi-warning--sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 163px;
    height: 45px;
    padding: 15px 33px;
    border-radius: 31px;
    background: rgba(168, 87, 219, 0.08);
    border: 1px solid rgba(190, 160, 230, 0.28);
    color: rgba(29, 18, 51, 1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.78px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
}

#events .btn--semi-warning--sm:hover {
    background: rgba(190, 160, 230, 0.38);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(190, 160, 230, 0.38);
    color: #ffffff;
    text-decoration: none;
}

.btn--uitverkocht {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 163px;
    height: 45px;
    padding: 15px 33px;
    border-radius: 31px;
    background: rgba(168, 87, 219, 0.08);
    border: 1px solid rgba(190, 160, 230, 0.28);
    color: rgba(29, 18, 51, 1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.78px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
}


#wekart .wekart h1 {
    --size: 82px;
    height: var(--size);
    width: var(--size);
    background-color: #932E7F;
    margin-left: auto;
    margin-right: auto;
    /* display: inline-block; */
    color: white;
    border-radius: 18.27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 10px;
}

#wekart .wekart .icon {
    height: 56px;
    width: 56px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#wekart .wekart .icon img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#events{
    padding-bottom: 100.17px !important;
}

#wekart .wekart h4 {
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    font-weight: 600;
    margin-bottom: 0;
    font-family: var(--font-body);
    color: rgba(0, 0, 0, 1);
}

#wekart .wekart p {
    font-size: 16px;
    line-height: 23.76px;
    letter-spacing: 0;
    font-weight: 400;
}

#e-stalls svg {
    width: 100%;
}

#e-stalls {
    padding-top: 100px;
}

/* cta card css start */

#cta .container{
    max-width: 1250px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cta {
    margin-top: 100px;
    margin-bottom: 56px;
    background: linear-gradient(to left, rgba(12, 3, 33, 1), rgba(17, 8, 35, 1));
    padding: 68px 99.86px 67px 114px;
    border-radius: 26px;
    border: 1px solid rgba(190, 160, 230, 0.28);
    overflow: hidden;
}

.cta h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 44.16px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: rgba(245, 238, 252, 1);
    margin-bottom: 0;
}

.cta h2 span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 44.16px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    background: linear-gradient(92.9deg, #FFC94F 0%, #E8841A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cta p {
    color: rgba(255, 255, 255, 1);
    font-family: var(--font-body);
    letter-spacing: 0%;
    line-height: 27.2px;
    font-size: 17px;
    font-weight: 400;
}

.cta .btn {
    font-weight: 600;
    width: fit-content;
}

.cta .btn:not(.cta .btn.alt) {
    background: linear-gradient(92.22deg, #FFC94F 0%, #E8841A 100%);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset , 0px 10px 30px -8px rgba(246, 169, 31, 0.6);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 15px;
    /* line-height: 100%; */
    letter-spacing: 0.9px;
    padding: 16px 29px 16px 29px;
    border-radius: 999px;
    font-weight: 700;
}

.cta .btn.alt {
    color: #fff;
    opacity: 1;
    border: 0.97px solid rgba(249, 115, 22, 1);
    border-radius: 30.14px;
    padding: 15px 22.16px;
    display: flex;
    align-items: center;
    gap: 9.72px;
    img{
        height: 24px;
        width: auto;
    }
    span{
        font-size: 19.44px;
        letter-spacing: -1%;
    }
}

.giftbox {
    font-size: 90px;
    z-index: 1;
}

.giftbox.yellow {
    top: -9px;
    left: 9px;
}

.giftbox.pink {
    bottom: -9px;
    right: 9px;
}

.cta .dot {
    --size: 403px;
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
}

.cta .dot.yellow {
    background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(246, 169, 31, 0.3) 0%, rgba(246, 169, 31, 0) 60%);
    right: -110px;
    top: -125px;
}

.cta .dot.pink {
    background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(209, 47, 178, 0.28) 0%, rgba(209, 47, 178, 0) 60%);
    left: -61.32px;
    top: 60%;
    transform: translateY(-40%);
}



/* cta card css end */

/* footer design start  */

#footer {
    background: rgba(12, 3, 33, 1);
    padding-top: 76px;
    padding-bottom: 47.25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_link_header {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0%;
    color: rgba(207, 164, 70, 1);
    margin-bottom: 16px;
    line-height: 28px;
}

#footer ul {
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

footer img {
    width: 64.78px;
    height: 70px;
}

footer ul {
    padding: 0;
}

footer ul li {
    list-style: none;
    font-family: var(--font-body);
    font-weight: 400;
    color: #FFFFFF;
    font-size: 15.1px;
}

footer ul li a {
    color: #FFFFFF;
    font-family: var(--font-body);
    letter-spacing: 0%;
    font-size: 15.1px;
    font-weight: 400;
    line-height: 24px;
}

footer .first-col ul {
    gap: 0;
}

.first-col ul li {
    padding: 0px 0px !important;
    /* Waar online events tot leven komen KVK: 81552653Btw: NL003577058B75 */
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    /* or 97% */
    display: flex;
    align-items: center;
    color: #FFFFFF;
}


footer h2 {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    
    font-family: var(--font-body);
}

.social-icons img {
    width: 40px;
    height: 40px;
}

.social-media p {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #FFFFFF;
}

#footer .container{
    max-width: 1308px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#footer-decription {
    background-color: rgba(33, 5, 57, 1);
    overflow: hidden;
    padding: 28.85px 0;
    bottom: 0;
    width: 100%;

}


#footer-decription h1 {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 600;
    font-size: 11.3539px;
    line-height: 14px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.5;
    width: 100%;
}

#footer-decription img {
    margin: 0px 4px;
}

#footer-decription p {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 11.35px;
    line-height: 13.62px;
    /* identical to box height, or 120% */
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

/* footer design end */

.forgotPassLink {
    font-family: var(--font-body);
    color: rgba(230, 163, 48, 1);
    font-size: 16px;
    text-decoration: underline !important;
}

#exampleModalToggle .login-modal-footer-text {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(151, 148, 170, 1);
    text-align: start;
}

#exampleModalToggle .login-modal-footer-text a {
    color: #E6A330;
    font-weight: 400;
    text-decoration: underline !important;
}

/* about page css start */

#header.not_home {
    margin-top: 21px;

    .menu--link {
        font-weight: 600;
        letter-spacing: 0.01em;
    }
}

/* ============================================
                           #HERO-SECTION RESPONSIVE
============================================ */
#hero-section h2.lead {
    font-size: 64px;
    line-height: 1.05;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 1%;
    color: rgba(230, 163, 48, 1);
    text-transform: uppercase;
}

#hero-section.breadCumb p {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    /* or 133% */
    letter-spacing: 1%;
    color: #FFFFFF;
}

#hoe-het-werkt .section-title2 h1,
#hoe-het-werkt .section-title2 span {
    font-size: 35px;
    letter-spacing: 0%;
}

#hoe-het-werkt .section-title2 .werkt-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0%;
    line-height: 28px;
    text-align: center;
    color: #D97706;
}

#kernwaarden .section-title2 h1,
#kernwaarden .section-title2 span {
    font-weight: 400;
    font-size: 45.95px;
    letter-spacing: 0%;
}

/* about page css end */

/* forgot password page start */

.forgotpassMainDiv {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.bgellipse {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    --size: 917px;
    width: var(--size);
    height: var(--size);
    background: rgba(166, 105, 249, 0.3);
    filter: blur(150px);
    border-radius: 50%;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.bgellipse.one {
    left: 0;
}

.bgellipse.two {
    right: 0;
}

.login-form-area {
    max-width: 448px;
    width: 98%;
    margin-bottom: 80px;
    margin-top: 90px;

    form {
        width: 100%;
        background-color: #fff;
        border-radius: 16px;
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 32px;
        margin-top: 32px;
        margin-bottom: 24px;

        .icon {
            --size: 56px;
            height: var(--size);
            width: var(--size);
            background-color: rgba(243, 232, 255, 1);
            padding: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: rgba(152, 16, 250, 1);
            font-size: 23px;
            margin-bottom: 24px;
        }

        .icon .fa-lock {
            color: rgba(245, 166, 35, 1);
        }

        .icon:has(.fa-lock) {
            background-color: rgba(255, 237, 212, 1);
        }

        .form-header {
            margin-bottom: 32px;

            p {
                font-family: var(--font-body);
                font-weight: 400;
                font-size: 14px;
                line-height: 100%;
                letter-spacing: 0px;
                color: rgba(74, 85, 101, 1);
            }
        }

        .form-header h1 {
            font-family: var(--font-heading);
            text-align: center;
            margin-bottom: 5px;
            font-weight: 800;
            font-size: 30px;
            letter-spacing: 0px;
            color: rgba(30, 41, 57, 1);
        }

        .form-group {
            label {
                font-family: var(--font-body);
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: 0px;
                color: rgba(54, 65, 83, 1);
                margin-bottom: 8px;
            }

            .text-field {
                opacity: 1;
                padding-top: 12px;
                padding-right: 16px;
                padding-bottom: 12px;
                padding-left: 44px;
                outline: none;
                border: 1px solid rgba(209, 213, 220, 1)
            }

            input {
                width: 100%;
                border-radius: 14px;
            }

            input[type=submit] {
                background: linear-gradient(90deg, #FDC700 0%, #FF8904 100%);
                border-radius: 14px;
                box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
                margin-top: 24px;
                padding: 14px 20px;
                outline: none;
                border: none;
                font-family: var(--font-heading);
                font-weight: 700;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: 0px;
                text-align: center;
                color: rgba(30, 41, 57, 1);
            }

            .input-wrapper {
                position: relative;
            }

            .input-wrapper .fa-envelope,
            .input-wrapper .fa-unlock-keyhole {
                position: absolute;
                left: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: #999;
                z-index: 2;
                pointer-events: none;
            }

            .input-wrapper .passShowToggleBtn {
                position: absolute;
                right: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: #999;
                z-index: 2;
                outline: none;
                border: none;
                background-color: transparent;
            }

            .input-wrapper .text-field {
                padding-left: 45px;
            }

            .input-wrapper textarea{
                width: 100%;
                resize: none;
                min-height: 120px;
            }
        }

        .short_info {
            margin-top: 12px;
            font-family: var(--font-body);
            font-size: 12px;
            text-align: center;
            letter-spacing: 0px;
            color: rgba(106, 114, 130, 1);
        }

        .help_link {
            margin-top: 24px;
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 0px;
            text-align: center;
            color: rgba(74, 85, 101, 1);
        }

        .help_link a {
            color: rgba(152, 16, 250, 1) !important;
            font-weight: 600;
        }
    }
}

.reset-pass-div {
    .form-header {
        h1 {
            font-size: 24px !important;
            margin-bottom: 10px !important;
        }

        p {
            font-size: 16px !important;
        }
    }
}

.sweetAlertPassResetLink {
    margin-top: 50px;
    max-width: 410px;
    background-color: #fff;
    /* box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); */
    border-radius: 16px;
    padding: 32px;
    font-family: var(--font-body);
    margin-left: auto;
    margin-right: auto;

    .icon {
        --size: 56px;
        height: var(--size);
        width: var(--size);
        background-color: rgba(220, 252, 231, 1);
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: rgba(0, 166, 62, 1);
        font-size: 23px;
        margin-bottom: 24px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
    }

    .form-header {
        margin-bottom: 32px;

        p {
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(74, 85, 101, 1);
        }
    }

    .form-header h1 {
        font-family: var(--font-heading);
        text-align: center;
        margin-bottom: 5px;
        font-weight: 800;
        font-size: 24px;
        letter-spacing: 0px;
        color: rgba(30, 41, 57, 1);
    }

    .messageAlert {
        padding: 17px;
        background: rgba(250, 245, 255, 1);
        border: 1px solid rgba(233, 212, 255, 1);
        border-radius: 14px;
        font-size: 14px;
    }

    .loginReturn {
    font-family: var(--font-heading);   /* button-style link on the password-reset success page */
    letter-spacing: 0.01em;
        background: linear-gradient(90deg, #FDC700 0%, #FF8904 100%);
        padding: 14px;
        border-radius: 14px;
        margin-top: 24px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0px;
        color: rgba(30, 41, 57, 1);
    }
}

/* forgot password page end */

.contactPageMainDiv {
    .wp-btn {
        box-shadow: 0px 1.09px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 10.89px 32.68px -8.71px #00E676;
        padding: 17px 32px;
        border-radius: 999px;
        background: linear-gradient(45deg, #1EBEA5, #00E676);
        border: 1px solid rgba(255, 255, 255, 0);
        font-family: var(--font-heading);
        letter-spacing: 0.98px;
        font-size: 16.34px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mhbtn {
        box-shadow: 0px 1.09px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 10.89px 32.68px -8.71px rgba(246, 169, 31, 0.6);
        padding: 17px 32px;
        border-radius: 999px;
        background: linear-gradient(92.14deg, #FFC94F 0%, #E8841A 100%);
        border: 1px solid rgba(255, 255, 255, 0);
        font-family: var(--font-heading);
        letter-spacing: 0.98px;
        font-size: 16.34px;
        font-weight: 700;
        text-transform: uppercase;
    }
}

#testmonial .section-title{
    margin-bottom: 25px !important;
}

#testmonial .content-wrapper p{
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 20.87px;
    letter-spacing: 0px;
}

.subscribe-box .email-input{
    padding: 12px 10px;
    color: rgba(255, 255, 255, 1);
}

.subscribe-box .email-input:focus{
    background-color: transparent;
    box-shadow: none;
}

.subscribe-btn{
    font-family: var(--font-heading);
    font-weight: 600;
}

.subscribe-box .email-input::placeholder{
    color: rgba(255, 255, 255, 1);
}

/* events page css start */

#hero-section.breadCumb{
    padding-top: 174px;
    padding-bottom: 160.93px;
}

#hero-section.breadCumb .hero-para{
    font-size: 24px !important;
    line-height: 32px;
    letter-spacing: 1%;
}

/* events page css end */

/* my order page css start */

.dash-bg-design{
    position: relative;
}

.dash-bg-design .ellipsis{
    position: absolute;
    z-index: 1;
}

.dash-bg-design .ellipsis.one{
    --size: 917px;
    height: var(--size);
    width: var(--size);
    background-color: rgba(166, 105, 249, 0.5);
    border-radius: 50%;
    filter: blur(971.3649291992188px);
    opacity: 0.8;
    top: 69px;
    left: -50%;
    transform: translateX(50%);
}

.dash-bg-design .ellipsis.two{
    --size: 917px;
    height: var(--size);
    width: var(--size);
    background-color: rgba(166, 105, 249, 0.5);
    filter: blur(971.3649291992188px);
    opacity: 0.8;
    right: -232px;
    top: -50px;
    z-index: 1;
    border-radius: 50%;
}

.dash-bg-design .ellipsis.three{
    --size: 391px;
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    background: rgba(196, 190, 215, 1);
    filter: blur(211.65965270996094px);
    left: 50%;
    top: -200px;
}

#myOrderPage{
    margin-top: 75px;
    padding-top: 53px;
    overflow: hidden;
}

#myOrderPage .container{
    max-width: 1092px;
    width: 100%;
    position: relative;
    z-index: 2;
}

#myOrderPage .backDashBtn a{
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(122, 30, 230, 1);
    margin-bottom: 18px;
}

#myOrderPage .header{
    margin-bottom: 28px;
    h2{
        margin-bottom: 8px;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 30px;
        line-height: 34.5px;
        letter-spacing: 0px;
        color: rgba(31, 41, 55, 1);
    }
    p{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(102, 112, 133, 1);
    }
}

#myOrderPage .orderCards{
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(228, 216, 244, 1);
    box-shadow: 0px 8px 20px 0px rgba(128, 66, 194, 0.22);
    padding: 28px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 45.25px;
}

#myOrderPage .orderCards .orderCard{
    padding: 19px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(236, 228, 247, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#myOrderPage .orderCards .orderCard .infos h4{
    margin-bottom: 5px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(31, 41, 55, 1);
}

#myOrderPage .orderCards .orderCard .infos p{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 23.2px;
    letter-spacing: 0px;
    color: rgba(102, 112, 133, 1);
}

#myOrderPage .orderCards .orderCard .actions{
    display: flex;
    gap: 2px;
    .bekijkenBtn{
        background-color: rgba(235, 226, 255, 1);
        padding: 14px 22px;
        border-radius: 8px;
        color: rgba(109, 36, 191, 1);
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        display: block;
        width: fit-content;
    }

    .onderwegBtn{
        background: rgba(255, 243, 215, 1);
        padding: 6.92px 11px;
        border-radius: 999px;
        color: rgba(155, 98, 0, 1);
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 13px;
        line-height: 18.85px;
        letter-spacing: 0px;
    }

    .afgeleverd{
        padding: 6.92px 11px;
        border-radius: 999px;
        background: rgba(234, 250, 241, 1) !important;
        color: rgba(7, 130, 71, 1) !important;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 13px;
        line-height: 18.85px;
        letter-spacing: 0px;
        display: block;
        width: fit-content;
    }

    .betalingBtn{
        background-color: rgba(237, 164, 33, 1);
        padding: 14px 22px;
        border-radius: 8px;
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(23, 23, 23, 1);
        outline: none;
        border: none;
    }

    .beschikbaarBtn{
        background-color: rgba(232, 250, 239, 1);
        padding: 6.92px 11px;
        border-radius: 999px;
        font-family: var(--font-heading);
        font-weight: 700;
        color: rgba(102, 112, 133, 1);
        letter-spacing: 0px;
        font-size: 13px;
    }
}

#myOrderPage .filter{
    display: flex;
    flex-wrap: wrap;
    gap: 9.55px;
    margin-bottom: 18px;
}

#myOrderPage .filter .filterBtn{
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(228, 216, 244, 1);
    background: rgba(255, 255, 255, 1);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(52, 64, 84, 1);
}

#myOrderPage .filter .filterBtn.active{
    border: 1px solid rgba(237, 164, 33, 1);
    background: rgba(255, 247, 230, 1);
    color: rgba(154, 97, 0, 1);
}

/* my order page css end */

/* cancel requests page css start */

#returnRequestsPage{
    margin-top: 87px;
    padding-top: 53px;
    padding-bottom: 29.44px;
}

#returnRequestsPage .backDashBtn a{
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(122, 30, 230, 1);
    margin-bottom: 19px;
}

#returnRequestsPage .header{
    margin-bottom: 16px;
    h2{
        margin-bottom: 8px;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 30px;
        line-height: 34.5px;
        letter-spacing: 0px;
        color: rgba(31, 41, 55, 1);
    }
    p{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(102, 112, 133, 1);
    }
}

#returnRequestsPage .container{
    max-width: 1129px;
    width: 98%;
    position: relative;
    z-index: 2;
}

#returnRequestsPage .returnRequestWrapper{
    background-color: #fff;
    padding: 30px;
    border: 1px solid rgba(229, 231, 235, 1);
    box-shadow: 0px 4px 12px 0px rgba(31, 41, 55, 0.14);
    border-radius: 13px;
}

#returnRequestsPage .returnRequestWrapper .wrapperTitle{
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(31, 41, 55, 1);
    margin-bottom: 22px;
}

#returnRequestsPage .returnRequestWrapper .wrapInstructionBar{
    padding: 16px 18px;
    background: rgba(251, 246, 255, 1);
    border: 1px solid rgba(223, 201, 255, 1);
    border-radius: 10px;
    margin-bottom: 20px;
    p{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(95, 84, 117, 1);
    }
}

#returnRequestsPage .returnRequestWrapper .returnTypeSelector{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

#returnRequestsPage .returnRequestWrapper .returnTypeSelector label{
    flex: 1;
    display: flex;
    gap: 18px;
    border: 1px solid rgba(229, 231, 235, 1);
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 18px 18px 25px 18px;
    font-family: var(--font-body);
    h5{
        font-weight: 700;
        font-size: 17px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(31, 41, 55, 1);
        margin-bottom: 7px;
    }
    p{
        font-weight: 400;
        font-size: 15px;
        line-height: 22.5px;
        letter-spacing: 0px;
        color: rgba(102, 112, 132, 1);
    }
}

.radio-markInput {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

#returnRequestsPage .returnRequestWrapper .returnTypeSelector{
    margin-bottom: 20px;
}

#returnRequestsPage .returnRequestWrapper .returnTypeSelector .radio-mark {
    --size: 18px;
    position: relative;
    width: var(--size);
    height: var(--size);

    flex-shrink: 0;

    border-radius: 50%;
    border: 2px solid rgba(201, 206, 216, 1);

    display: block;
    cursor: pointer;

    transition: all 0.2s ease;
}

/* Selected */
.radio-markInput:checked + .radio-mark::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid rgba(237, 168, 40, 1);
    border-radius: 50%;
}

#returnRequestsPage .returnRequestWrapper
.returnTypeSelector label:has(.radio-markInput:checked) {
    background: rgba(255, 247, 231, 1);
    border: 1px solid rgba(237, 168, 40, 1);
}

#returnRequestsPage .returnRequestWrapper .wrapInstructionBarTwo{
    display: flex;
    gap: 14px;
    justify-content: center;
    background: rgba(239, 253, 245, 1);
    border: 1px solid rgba(184, 239, 204, 1);
    border-radius: 10px;
    padding: 16px 18px;
    p{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(7, 130, 71, 1);
    }
}

#returnRequestsPage .returnRequestWrapper .wrapInstructionBarTwo .icon{
    background: rgba(244, 244, 246, 1);
    border-radius: 8px;
    --size: 32px;
    height: var(--size);
    width: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}

#returnRequestsPage .returnRequestWrapper .all-inputs{
    padding-top: 20px;
}

#returnRequestsPage .returnRequestWrapper .all-inputs label{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(81, 96, 112, 1);
}

#returnRequestsPage .returnRequestWrapper .all-inputs textarea , #returnRequestsPage .returnRequestWrapper .all-inputs input{
    width: 100%;
    margin-top: 8px;
    background: rgba(244, 244, 246, 1);
    border-radius: 7px;
    border: none;
    outline: none;
}

#returnRequestsPage .returnRequestWrapper .all-inputs input{
    padding: 10px 20px 9px 20px;
    margin-bottom: 18px;
}

#returnRequestsPage .returnRequestWrapper .all-inputs textarea {
    height: 132px;
    resize: none;
    padding: 20px;
}

#returnRequestsPage .returnRequestWrapper .all-inputs button{
    padding: 13.5px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(237, 168, 40, 1);
    outline: none;
    border: none;
    border-radius: 999px;
    margin-top: 24px;
}

.returnRequestWrapperTwo .items{
    background: #fff;
    border-radius: 13px;
    padding: 28px 30px;
    border-radius: 13px;
    border: 1px solid rgba(229, 231, 235, 1);
    box-shadow: 0px 4px 12px 0px rgba(31, 41, 55, 0.14);
    h4{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(31, 41, 55, 1);
        margin-bottom: 20px;
    }
}

.returnRequestWrapperTwo .items .itemCard:last-child{
    margin-bottom: 0px;
}

.returnRequestWrapperTwo .items .itemCard{
    border: 1px solid rgba(234, 223, 248, 1);
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.returnRequestWrapperTwo .items .itemCard .info{
    font-family: var(--font-body);
    h3{
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(31, 41, 55, 1);
        margin-bottom: 7px;
    }
    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 23.2px;
        letter-spacing: 0px;
        color: rgba(115, 125, 145, 1);
    }
}

.returnRequestWrapperTwo .items .itemCard .badge{
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.2px;
    letter-spacing: 0px;
    padding: 7px 11.07px 6.19px 12px;
    border-radius: 999px;
}

.returnRequestWrapperTwo .items .itemCard .badge.process{
    background: rgba(255, 243, 231, 1);
    color: rgba(255, 122, 26, 1);
}

.returnRequestWrapperTwo .items .itemCard .badge.approve{
    background: rgba(234, 250, 241, 1);
    color: rgba(7, 130, 71, 1);
}

.returnRequestWrapperTwo .items .refNotice{
    background-color: rgba(239, 253, 245, 1);
    border: 1px solid rgba(184, 239, 204, 1);
    padding: 14px 16px;
    border-radius: 10px;
    p{
        font-weight: 900;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(7, 130, 71, 1);
    }
}

/* cancel requests page css end */

/* product details page css start */

    #productDetailsPage{
        margin-top: 88px;
        padding-top: 49px;
        padding-bottom: 63.27px;
        font-family: var(--font-body);
        position: relative;
        z-index: 2;
    }

    #productDetailsPage .container{
        max-width: 1053.31px;
        width: 100%;
    }

    .dashBackBtn a{
        font-weight: 600;
        font-size: 16.26px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(101, 71, 255, 1);
        display: block;
        width: fit-content;
    }

    #productDetailsPage .productMainSection{
        background-color: rgba(255, 255, 255, 1);
        padding: 38.78px 40.03px 36.28px 40.03px;
        border-radius: 21.27px;
        box-shadow: 0px 10.01px 27.52px 0px rgba(57, 26, 105, 0.14);
    }

    #productDetailsPage .productInfos{
        padding-top: 31.27px;
    }

    .productMainSwiper {
        width: 100%;
        height: 397px;
        border-radius: 12px;
        overflow: hidden;
    }

    .productMainSwiper .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
    }

    .productMainSwiper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* Thumbnails */

    .productThumbSwiper {
        margin-top: 15px;
        height: 90px;
    }

    .productThumbSwiper .swiper-slide {
        width: 89.56px !important;
        height: 87.57px;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 10.01px;
        overflow: hidden;
        opacity: 0.5;
        padding: 7.51px;
        background: rgba(238, 242, 240, 1);
    }

    .productThumbSwiper .swiper-slide-thumb-active {
        border-color: rgba(258, 252, 250, 1);
        opacity: 1;
    }

    .productThumbSwiper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* Navigation */

    .productMainSwiper .swiper-button-prev,
    .productMainSwiper .swiper-button-next {
        width: 37.53px;
        height: 37.53px;
        background: #fff;
        border-radius: 18.76px;
        box-shadow: 0px 2.5px 10.01px 0px rgba(0, 0, 0, 0.16);
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 20.02px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(105, 99, 117, 1);
    }

    .productMainSwiper .swiper-button-prev svg,
    .productMainSwiper .swiper-button-next svg{
        display: none;
    }

    .productMainSwiper .swiper-button-prev::after,
    .productMainSwiper .swiper-button-next::after {
        font-size: 16px;
        font-weight: bold;
        color: #222;
    }

    .product-image {
        position: relative;
        width: 100%;
        height: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
        overflow: hidden;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


    /* Zoom button */

    .product-zoom-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 37.53px;
        height: 37.53px;
        border: none;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        z-index: 10;
        transform: rotateY(180deg);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(105, 99, 117, 1);
    }

    .product-zoom-btn:hover {
        background: #222;
        color: #fff;
    }

    #productDetailsPage .infoSide{
        font-family: var(--font-body);
    }

    #productDetailsPage .infoSide .product_name{
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 30.02px;
        line-height: 33.03px;
        letter-spacing: 0px;
        color: rgba(33, 28, 50, 1);
        margin-bottom: 5px;
    }

    #productDetailsPage .infoSide .product_price{
        font-family: var(--font-body);
        margin-bottom: 10.01px;
        .price_num{
            font-weight: 800;
            font-size: 23.77px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(101, 71, 255, 1);
            margin-right: 5.63px;
        }
        .vatInc{
            font-weight: 500;
            font-size: 15.01px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(107, 107, 123, 1);
        }
    }

    #productDetailsPage .infoSide .product_description{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 16.26px;
        line-height: 24.39px;
        letter-spacing: 0px;
        color: rgba(116, 109, 130, 1);
        margin-bottom: 22px;
    }

    .productInfosForm{
        margin-top: 22.52px;
        h5{
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 15.01px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(33, 28, 50, 1);
            margin-bottom: 10.01px;
        }
    }

    .productInfosForm .product-colors .colors{
        display: flex;
        flex-wrap: wrap;
        gap: 22.52px;
        label{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        span.cName{
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 12.51px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(137, 130, 148, 1);
            margin-top: 5px;
        }
        input{
            position: absolute;
            opacity: 0;
        }
        span.radioSelect{
            display: block;
            height: 27.52px;
            width: 27.52px;
            border: 1.25px solid rgba(215, 209, 224, 1);
            border-radius: 50%;
        }
    }

    .productInfosForm .product-colors .colors label:nth-child(1) span.radioSelect{
        background: rgba(231, 221, 189, 1);
    }

    .productInfosForm .product-colors .colors label:nth-child(2) span.radioSelect{
        background: rgba(66, 65, 70, 1);
    }

    .productInfosForm .product-colors .colors label:nth-child(3) span.radioSelect{
        background: rgba(173, 81, 46, 1);
    }

    .productInfosForm .product-colors .colors label:nth-child(4) span.radioSelect{
        background: rgba(125, 139, 76, 1);
    }

    .product-colors .colors label:has(input:checked) .radioSelect {
        border-color: rgba(33, 28, 50, 1);
        border-width: 3px;
    }

    .productInfosForm .sizesField{
        margin-top: 22.52px;

        .sizes{
            display: flex;
            gap: 10.01px;
        }

        .sizes label{
            height: 45.03px;
            width: 45.03px;
            border-radius: 7.51px;
            border: 1.25px solid rgba(227, 222, 234, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 15.01px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(33, 28, 50, 1);
            text-transform: uppercase;
            cursor: pointer;
            input{
                opacity: 0;
                position: absolute;
            }
        }
    }

    .productInfosForm .sizesField .sizes label:has(input:checked) {
        background: rgba(247, 244, 255, 1);
        border: 1.25px solid rgba(101, 71, 255, 1);
        color: rgba(101, 71, 255, 1);
    }

    .productInfosForm .quantitySelector{
        margin-top: 23.28px;
    }

    .productInfosForm .quantitySelector .quantityControls{
        display: flex;
        .quantityMinus, .quantityPlus, .quantityInput{
            --size: 37.53px;
            width: var(--size);
            height: var(--size);
            border: 1.25px solid rgba(227, 222, 234, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .quantityMinus{
            border-top-left-radius: 6.25px;
            border-bottom-left-radius: 6.25px;
            background-color: transparent;
        }
        .quantityPlus{
            border-top-right-radius: 6.25px;
            border-bottom-right-radius: 6.25px;
            background-color: transparent;
        }
        .quantityInput {
            text-align: center;
            padding: 0;
            line-height: 37.53px;
        }

        .quantityInput::-webkit-inner-spin-button,
        .quantityInput::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .quantityInput {
            appearance: textfield;
        }
    }

    .productInfosForm .quantitySelector .wrap{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
        align-items: end;
        .quantityShower{
            p{
                font-family: var(--font-body);
                font-weight: 600;
                font-size: 15.01px;
                line-height: 100%;
                letter-spacing: 0px;
                color: rgba(23, 181, 91, 1);
            }
        }
    }

    .productInfosForm .addOnCartBtn{
        margin-top: 20px;
        padding: 15.5px 70px 15.5px 70px;
        outline: none;
        border: none;
        border-radius: 8.76px;
        background-color: rgba(239, 170, 40, 1);
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 16.26px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 1);
        width: 100%;
    }

    #productDetailsPage .infoSide .moreProductsLink{
        margin-top: 12.51px;
        border: 1.25px solid rgba(235, 230, 243, 1);
        border-radius: 12.51px;
        padding: 15.01px 16.26px 15.01px 16.26px;
    }

    #productDetailsPage .infoSide .moreProductsLink .vendorInfo{
        display: flex;
        gap: 12.51px;
        align-items: center;
        margin-bottom: 12.51px;
        .icon{
            --size: 37.53px;
            height: var(--size);
            width: var(--size);
            border-radius: 18.76px;
            background: rgba(26, 25, 57, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 13.76px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
        }
        .vendInfo{
            flex: 1;
        }
    }

    #productDetailsPage .infoSide .moreProductsLink .vendorInfo {
        h5{
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 15.01px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(33, 28, 50, 1);
            margin-bottom: 5px;
        }
        p{
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 11.26px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(153, 146, 165, 1);
        }
    }

    #productDetailsPage .infoSide .moreProductsLink a{
        border: 1.25px solid rgba(101, 71, 255, 1);
        padding: 12.51px 71px;
        border-radius: 7.51px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 13.76px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(101, 71, 255, 1);
        text-align: center;
        display: block;
    }

    #productDetailsPage .productDetails{
        margin-top: 35px;
        border-top: 1.25px solid rgba(235, 230, 241, 1);
        padding-top: 25px;
    }

    #productDetailsPage .productDetails{
        h5{
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 16.26px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(33, 28, 50, 1);
            margin-bottom: 12.51px;
        }
    }

    #productDetailsPage .productDetails .descriptionSide{
        p{
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 14.39px;
            line-height: 22.3px;
            letter-spacing: 0px;
            color: rgba(113, 106, 128, 1);
            max-width: 447.84px;
            width: 99%;
        }
    }

    #productDetailsPage .productDetails .productFeatureSide .featureLists{
        display: flex;
        flex-direction: column;
        gap: 8.76px;
    }

    #productDetailsPage .productDetails .productFeatureSide .featureLists div p:first-child{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 13.76px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(153, 146, 164, 1);
    }

    #productDetailsPage .productDetails .productFeatureSide .featureLists div p:last-child{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 13.76px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(33, 28, 50, 1);
    }

    .bg-prod-ellipse{
        position: relative;
    }

    .bg-prod-ellipse .ellipse{
        position: absolute;
        z-index: 1;
        --size: 917px;
        height: var(--size);
        width: var(--size);
        border-radius: 50%;
        background: rgba(166, 105, 249, 0.5);
        opacity: 0.8;
        filter: blur(971.3649291992188px)
    }

    .bg-prod-ellipse .ellipse.one{
        top: 165px;
        left: -366px;
    }

    .bg-prod-ellipse .ellipse.two{
        top: 22px;
        right: -232px;
    }

    .bg-prod-ellipse .ellipse.three{
        --size: 391px;
        height: var(--size);
        width: var(--size);
        background: rgba(196, 190, 215, 1);
        backdrop-filter: blur(211.65965270996094px);
        top: -31px;
        left: -97px;
    }

/* product details page css end */

/* new product add page css start */

#vendorAddNewProduct{
    margin-top: 88px;
    padding-top: 98px;
    overflow: hidden;
    padding-bottom: 70px;
}

#vendorAddNewProduct .container{
    max-width: 1178px;
    width: 100%;
}

#vendorAddNewProduct .dashBackBtn{
    margin-bottom: 20px;
}

#vendorAddNewProduct .productNav{
    border-radius: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    max-width: 221px;
    width: 98%;
    height: fit-content;
}

#vendorAddNewProduct .productNav .header{
    padding: 8px 4px;
    margin-bottom: 16px;
}

#vendorAddNewProduct .productNav .header .icon{
    background: rgba(244, 241, 254, 1);
    --size: 34px;
    height: var(--size);
    width: var(--size);
    border-radius: 8px;
}

#vendorAddNewProduct .productNav .header .headContents{
    h4{
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(26, 26, 46, 1);
        font-family: var(--font-body);
        margin-bottom: 3px;
    }
    p{
        font-weight: 400;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(154, 154, 171, 1);
        font-family: var(--font-body);
    }
}

#vendorAddNewProduct .productNav .links{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
    a{
        display: block;
        padding: 10.5px 9px;
        border-radius: 8px;
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(91, 91, 107, 1);
        transition: 0.3s ease-in-out;
    }
}

#vendorAddNewProduct .productNav .links a:hover{
    background-color: rgba(244, 241, 254, 1);
    transition: 0.3s ease-in-out;
    color: rgba(109, 79, 240, 1);
    font-weight: 600;
}

#vendorAddNewProduct .productNav .links a.active{
    background-color: rgba(244, 241, 254, 1);
    transition: 0.3s ease-in-out;
    color: rgba(109, 79, 240, 1);
    font-weight: 600;
}

#vendorAddNewProduct .productNav .productTips{
    border-radius: 14px;
    padding: 16px 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(236, 238, 241, 1);
    h5{
        font-family: var(--font-body);
        color: rgba(26, 26, 46, 1);
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        margin-bottom: 10px;
    }
}

#vendorAddNewProduct .productNav .productTips ul{
    padding: 10px 0px 10px 19px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
    gap: 8px;
    li{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0px;
        color: rgba(107, 107, 123, 1);
    }
}

#vendorAddNewProduct .productNav .helpLinks{
    border: 1px solid rgba(236, 238, 241, 1);
    border-radius: 14px;
    padding: 16px 13px;
    h5{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(26, 26, 46, 1);
        margin-bottom: 10px;
    }
    a{
        border: 1px solid rgba(226, 228, 233, 1);
        border-radius: 8px;
        padding: 9px;
        display: block;
        color: rgba(58, 58, 69, 1);
        font-weight: 400;
        font-family: var(--font-body);
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        text-align: center;
        transition: 0.3s;
        &:hover{
            background-color: rgba(230, 163, 48, 1);
            color: rgba(0, 0, 0, 1);
            transition: 0.3s;
        }
    }
    a + a{
        margin-top: 8px;
    }
}

#vendorAddNewProduct .productUploadSection{
    padding: 28px 36px 24px 36px;
    box-shadow: 0px 2px 10px 0px rgba(55, 28, 94, 0.04);
    border-radius: 14px;
    background: rgba(255, 255, 255, 1);
    max-width: 611px;
    width: 99%;
    height: fit-content;
}

#vendorAddNewProduct .productUploadSection .header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    h2{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 22px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(32, 30, 45, 1);
        margin-bottom: 0px;
    }    
    .message p{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 100%;
        color: rgba(24, 169, 87, 1);
    }
}

#vendorAddNewProduct .productUploadSection .subHeader{
    margin-bottom: 15px;
    h3{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(32, 30, 45, 1);
    }
}

#vendorAddNewProduct .productUploadSection .input-group .label-group{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    label{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(32, 30, 45, 1);
    }
    .countletter{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(176, 169, 186, 1);
    }
}

#vendorAddNewProduct .productUploadSection .input-group{
    margin-bottom: 16px;
    input, textarea, select{
        border: 1px solid rgba(222, 216, 232, 1);
        background: rgba(255, 255, 255, 1);
        padding: 10px 12px;
        border-radius: 6px;
        width: 100%;
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(51, 46, 61, 1);
        outline: none;    
    }
    textarea{
        height: 84px;
        resize: none;
    }
    .insmessage{
        margin-top: 7px;
    }
    .insmessage p{
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 11px;
        line-height: 15.95px;
        letter-spacing: 0px;
        color: rgba(170, 163, 180, 1);
    }
}

.productlivePreviewSide{
    max-width: 312.453125px;
    width: 99%;
    height: fit-content;
}

.productLivePrevWrap{
    background: var(--color-white-solid, rgba(255, 255, 255, 1));
    box-shadow: 0px 12px 32px 0px rgba(20, 20, 43, 0.06);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

#vendorAddNewProduct .productUploadSection .hr-one{
    margin-top: 21px;
    margin-bottom: 58px;
}

#vendorAddNewProduct .productUploadSection .subHeaderTwo{
    margin-bottom: 14.9px;
    h3{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 14.9px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(32, 30, 45, 1);
    }
}

/* image place holder  */
#vendorAddNewProduct {
    .productImagesField {
        width: 100%;
    }

    .productImagesField h5 {
        margin-bottom: 6.38px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 11.7px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(107, 107, 123, 1);
    }


    /* =========================
    IMAGE CONTAINER
    ========================= */

    .imageUploadContainer {
        width: 100%;
        display: flex;
        gap: 21.28px;
    }

    .extraImagePlace {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10.64px;
    }


    /* =========================
    IMAGE ITEM
    ========================= */

    .imageUploadItem {
        position: relative;
        width: 89.3835px;
        height: 89.3835px;
        flex: 0 0 89.3835px;
    }


    /* =========================
    UPLOAD BOX
    ========================= */

    .imageUploadBox {
        position: relative;
        width: 89.3835px;
        height: 89.3835px;

        box-sizing: border-box;

        border-radius: 10.64px;
        background: #fafafa;

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

        overflow: hidden;
        cursor: pointer;

        transition:
            border-color 0.2s ease,
            background 0.2s ease;
    }


    /* Exact SVG dashed border */

    .dashedBorder {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        pointer-events: none;

        transition: opacity 0.2s ease;
    }


    /* Hide dashed border when image exists */

    .imageUploadBox.has-image .dashedBorder {
        opacity: 0;
    }


    /* Hover */

    .imageUploadBox:hover {
        background: #f5f5f5;
    }


    /* =========================
    FILE INPUT
    ========================= */

    .imageInput {
        display: none;
    }

    .hr-three{
        margin-top: 20px;
        margin-bottom: 34px;
    }

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

    .uploadPlaceholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 8px;

        color: #777;
        padding: 5px;
        pointer-events: none;
    }

    .uploadPlaceholder span {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 11px;
        line-height: 17.98px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
    }


    /* =========================
    IMAGE PREVIEW
    ========================= */

    .imagePreview {
        display: none;

        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: inherit;
    }

    .imageUploadBox.has-image .imagePreview {
        display: block;
    }

    .imageUploadBox.has-image .uploadPlaceholder {
        display: none;
    }


    /* =========================
    REMOVE BUTTON
    ========================= */

    .removeImageBtn {
        position: absolute;

        top: -6.38px;
        right: -6.38px;

        width: 19.15px;
        height: 19.15px;

        padding: 0;

        border: none;
        border-radius: 50%;

        background: #fff;
        color: rgba(107, 107, 123, 1);

        display: none;

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

        cursor: pointer;

        z-index: 20;

        font-size: 16px;
        line-height: 1;

        transition: 0.2s ease;

        box-shadow:
            0px 1.06px 4.26px 0px rgba(0, 0, 0, 0.2);
    }

    .removeImageBtn:hover {
        background: #d32f2f;
        color: #fff;
    }


    /* =========================
    ADD MORE WRAPPER
    ========================= */

    .addMoreImageWrapper {
        width: 89.3835px;
        height: 89.3835px;

        flex: 0 0 89.3835px;

        position: relative;

        border: 1.0641px dashed rgba(221, 221, 221, 0.65);
        border-radius: 10.64px;

        box-sizing: border-box;

        button, button span{
            font-family: var(--font-heading);
            font-size: 9.58px;
            font-weight: 600;
        }
    }


    /* =========================
    ADD MORE BUTTON
    ========================= */

    .addMoreImage {
        width: 100%;
        height: 100%;

        padding: 6.19px;

        border: none;
        border-radius: 10.64px;

        background: #fff;

        color: rgba(109, 79, 240, 1);

        font-family: var(--font-body);
        font-size: 9.58px;
        font-weight: 600;

        cursor: pointer;

        display: flex;
        flex-direction: column;

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

        gap: 7px;

        transition: 0.2s ease;
    }

    .addMoreImage i {
        font-size: 15px;
    }

    .addMoreImage:hover {
        background: #222;
        color: #fff;
    }


    /* =========================
    UPLOAD LOADER
    ========================= */

    .uploadLoader {
        position: absolute;

        left: 12px;
        right: 12px;
        bottom: 12px;

        height: 5px;

        background: rgba(255, 255, 255, 0.65);

        border-radius: 10px;

        overflow: hidden;

        display: none;

        z-index: 5;
    }

    .uploadLoaderBar {
        width: 0;
        height: 100%;

        background: #222;

        border-radius: inherit;
    }


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

    @media (max-width: 576px) {

        .extraImagePlace {
            gap: 10px;
        }

        .imageUploadItem,
        .imageUploadBox,
        .addMoreImageWrapper {
            width: 89.3835px;
            height: 89.3835px;

            flex: 0 0 89.3835px;
        }

    }
}

/* product variant  */
#vendorAddNewProduct {
    .variantAccordion {
        width: 100%;
        border-bottom: 1px solid rgba(232, 227, 238, 1);
    }


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

    .variantAccordionHeader {
        width: 100%;
        padding-bottom: 12px;

        border: none;
        background: transparent;

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

        cursor: pointer;

        font-family: var(--font-body);
        text-align: left;
    }


    /* Left side */

    .variantTitle {
        display: flex;
        align-items: center;
        gap: 3px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        color: rgba(32, 30, 45, 1);
    }


    /* Arrow */

    .variantArrow {
        display: inline-flex;
        font-size: 12px;
        line-height: 1;
        margin-bottom: 4px;
        transition: transform 0.25s ease;
    }


    /* Right side */

    .variantOptional {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 400;
        color: rgba(170, 162, 181, 1);
        line-height: 100%;
        letter-spacing: 0px;
    }


    /* =========================
    CONTENT
    ========================= */

    .variantAccordionContent {
        display: grid;
        grid-template-rows: 0fr;

        transition:
            grid-template-rows 0.3s ease;
    }

    .variantAccordionInner {
        overflow: hidden;

        padding: 0;
        opacity: 0;

        transition:
            padding 0.3s ease,
            opacity 0.2s ease;
    }


    /* =========================
    OPEN STATE
    ========================= */

    .variantAccordion.is-open
    .variantAccordionContent {
        grid-template-rows: 1fr;
    }

    .variantAccordion.is-open
    .variantAccordionInner {
        padding: 0 0 20px;
        opacity: 1;
    }

    .variantAccordion.is-open
    .variantArrow {
        transform: rotate(180deg);
    }


    .variant-mgr-container {
        font-family: var(--font-body) "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #1a1a1a;
        max-width: 600px;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .variant-mgr-section {
        margin-bottom: 12px;
    }

    .variant-mgr-label {
        font-family: var(--font-body);
        display: block;
        font-weight: 600;
        line-height: 100%;
        font-size: 12px;
        color: rgba(32, 30, 45, 1);
        margin-bottom: 7px;
    }

    .variant-mgr-pills-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .variant-mgr-pill {
        background-color: #ffffff;
        border: 1px solid rgba(221, 215, 231, 1);
        border-radius: 6px;
        min-width: 44px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(32, 30, 45, 1);
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: var(--font-heading);
        font-weight: 600;
    }

    .variant-mgr-pill:hover {
        border-color: #b2bec3;
    }

    .variant-mgr-pill.active {
        border-color: #0984e3;
        color: #0984e3;
    }

    .variant-mgr-pill-dashed {
        border-style: dashed;
        color: rgba(109, 79, 240, 1);
        border-top: 1px dashed rgba(221, 215, 231, 1);
        background-color: rgba(255, 255, 255, 1);
        font-weight: 600;
    }

    .variant-mgr-purple-text {
        color: #6c5ce7;
    }

    /* Table Design */
    .variant-mgr-table {
        border: 1px solid rgba(236, 231, 243, 1);
        border-radius: 8px;
        overflow: hidden;
        background-color: #ffffff;
    }

    .variant-mgr-table-header {
        display: flex;
        /* justify-content: space-between; */
        padding: 9px 10px;
        background-color: rgba(250, 248, 253, 1);
        font-size: 10px;
        font-family: var(--font-body);
        letter-spacing: 0px;
        line-height: 100%;
        font-weight: 600;
        color: #636e72;
    }

    .variant-mgr-th:first-child{
        width: 86%;
    }

    .variant-mgr-th-right {
        text-align: right;
    }

    .variant-mgr-table-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 10px;
        border-bottom: 1px solid #f1f2f6;
    }

    .variant-mgr-table-row:last-child {
        border-bottom: none;
    }

    .variant-mgr-td-name {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 12px;
        color: rgba(32, 30, 45, 1);
        line-height: 100%;
        letter-spacing: 0px;
    }

    /* Chrome, Safari, Edge, Opera */
    .variant-mgr-input::-webkit-inner-spin-button,
    .variant-mgr-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .variant-mgr-input {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .variant-mgr-input {
        width: 70px;
        padding: 5px 8px;
        text-align: center;
        border: 1px solid rgba(222, 216, 232, 1);
        border-radius: 6px;
        font-size: 12px;
        font-family: var(--font-body);
        color: rgba(51, 46, 61, 1);
        font-weight: 400;
        outline: none;
        background-color: #fff;
        transition: border-color 0.2s;
    }

    .variant-mgr-input:focus {
        border-color: #0984e3;
    }

    .variant-mgr-footer-note {
        font-size: 11px;
        font-weight: 400;
        color: #b2bec3;
        margin-top: 8px;
        line-height: 15.95px;
        letter-spacing: 0px;
        color: rgba(155, 148, 167, 1);
        font-family: var(--font-body);
        margin-bottom: 19px;
    }
}

/* product specification css */
#vendorAddNewProduct{

    .productInfoAccordion {
        width: 100%;
    }


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

    .productInfoAccordionHeader {
        width: 100%;
        padding: 16px 0;

        border: none;
        background: transparent;

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

        cursor: pointer;

        font-family: var(--font-body);
        text-align: left;
    }


    /* Title */

    .productInfoTitle {
        display: flex;
        align-items: center;
        gap: 3px;
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        color: rgba(32, 30, 45, 1);
    }


    /* Arrow */

    .productInfoArrow {
        display: inline-flex;
        font-size: 12px;
        line-height: 1;
        margin-bottom: 4px;
        transition: transform 0.25s ease;
    }


    /* =========================
    CONTENT
    ========================= */

    .productInfoAccordionContent {
        display: grid;
        grid-template-rows: 0fr;

        transition: grid-template-rows 0.3s ease;
    }

    .productInfoAccordionInner {
        overflow: hidden;

        padding: 0;
        opacity: 0;

        transition:
            padding 0.3s ease,
            opacity 0.2s ease;
    }


    /* =========================
    OPEN
    ========================= */

    .productInfoAccordion.is-open
    .productInfoAccordionContent {
        grid-template-rows: 1fr;
    }

    .productInfoAccordion.is-open
    .productInfoAccordionInner {
        padding: 0 0 20px;
        opacity: 1;
    }

    .productInfoAccordion.is-open
    .productInfoArrow {
        transform: rotate(180deg);
    }


    .prod-spec-container {
        font-family: var(--font-body) "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #1a1a1a;
        max-width: 750px;
        background-color: #ffffff;
        padding-top: 4px;
        box-sizing: border-box;
    }

    .prod-spec-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .prod-spec-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    }

    .prod-spec-arrow {
    font-size: 10px;
    color: #333333;
    }

    .prod-spec-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #111111;
    }

    .prod-spec-optional {
    font-size: 13px;
    color: #8c8c8c;
    }

    .prod-spec-labels-row {
        display: grid;
        grid-template-columns: 1fr 1fr 30px;
        gap: 12px;
        margin-bottom: 6px;
        padding-right: 12px;
    }

    .prod-spec-column-label {
        font-weight: 400;
        font-family: var(--font-body);
        font-size: 11px;
        color: rgba(158, 151, 170, 1);
        line-height: 100%;
        letter-spacing: 0px;
        margin-bottom: 6px;
    }

    .prod-spec-rows-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .prod-spec-row {
    display: grid;
    grid-template-columns: 1fr 1fr 30px;
    gap: 12px;
    align-items: center;
    }

    /* Custom Select Styling */
    .prod-spec-select-wrapper {
    position: relative;
    width: 100%;
    }

    .prod-spec-select, .prod-spec-input, .prod-spec-footer-select {
        width: 100%;
        background: rgba(252, 251, 254, 1);
        border: 1px solid rgba(222, 216, 232, 1);
        border-radius: 6px;
        padding: 11px 12px;
        font-size: 14px;
        color: rgba(51, 46, 61, 1);
        outline: none;
        cursor: pointer;
        box-sizing: border-box;
        transition: border-color 0.2s;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0px;
    }

    .prod-spec-footer-select{
        max-width: 150px;
        margin-left: auto;
    }

    .prod-spec-select:focus {
    border-color: #6c5ce7;
    }

    .prod-spec-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: #636e72;
        pointer-events: none;
    }

    /* Input Styling */
    .prod-spec-input-wrapper {
    width: 100%;
    }



    .prod-spec-input:focus {
    border-color: #6c5ce7;
    }

    /* Delete Button */
    .prod-spec-delete-btn {
        background: none;
        border: 1px solid transparent;
        color: #b2bec3;
        cursor: pointer;
        font-size: 14px;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: color 0.2s, border-color 0.2s;
    }

    .prod-spec-delete-btn:hover {
    color: #d63031;
    border-color: #fab1a0;
    }

    /* Footer Section */
    .prod-spec-footer-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding-top: 14px;
    }

    .prod-spec-add-link {
        background: none;
        border: none;
        color: rgba(109, 79, 240, 1);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        padding: 0;
        font-family: var(--font-body);
    }

    .prod-spec-add-link:hover {
    text-decoration: underline;
    }

    .prod-spec-footer-text {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(170, 163, 179, 1);
    }

    .prod-spec-dropdown-wrapper {
        position: relative;
        width: 150px;
        margin-left: auto;
    }
 
}


/* product form btn design */
#vendorAddNewProduct{
    .formbtns{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
    }

    .formbtns .cancelBtn{
        border: 1px solid rgba(226, 228, 233, 1);
        padding: 11px 20px;
        border-radius: 8px;
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(91, 91, 107, 1);
        background-color: transparent;
    }

    .formbtns .susscessPart{
        display: flex;
        align-items: center;
        gap: 16px;
        button{
            background: rgba(230, 163, 48, 1);
            padding: 11px 22px;
            border-radius: 8px;
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 13px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(0, 0, 0, 1);
            outline: none;
            border: none;
        }
    }

    .formbtns .draftMessage{
        p{
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0px;
            color: rgba(46, 168, 107, 1);
        }
    }
}

/* product live preview side */

#vendorAddNewProduct .productlivePreviewSide .liveTitle{
    margin-bottom: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    p{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(79, 74, 89, 1);
    }
    .dot{
        --size: 8px;
        height: var(--size);
        width: var(--size);
        background-color: rgba(79, 74, 89, 1);
        border-radius: 50%;
        position: relative;
    }

    .dot::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 150%;
        width: 150%;
        border-radius: 50%;
        border: 0.5px solid rgba(79, 74, 89, 1);
    }
}

#vendorAddNewProduct .productlivePreviewSide .subhead1{
    display: flex;
    align-items: center;
    gap: 6px;
    p{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(159, 159, 172, 1);
    }
}

#vendorAddNewProduct{


    /* Header Banner Styles */
    .prod-preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding: 0 4px;
    }

    .prod-preview-section-title {
        font-size: 15px;
        font-weight: 600;
        color: #2d3436;
        margin: 0;
    }

    .prod-preview-badge {
        background-color: #e17055;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Card Container Styles */
    .prod-preview-card {
        padding-top: 12px;
    }

    /* Gallery Styles */
    .prod-preview-gallery {
    margin-bottom: 16px;
    }

    .prod-preview-main-image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 14.76px;
        overflow: hidden;
        background-color: #f5f6f8;
        margin-bottom: 7.44px;
    }

    .prod-preview-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }

    .prod-preview-thumbs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    }

    .prod-preview-thumb {
        background: none;
        border: 2px solid transparent;
        border-radius: 8px;
        padding: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        cursor: pointer;
        background-color: #f5f6f8;
        transition: border-color 0.2s ease;
        padding: 6.98px;
    }

    .prod-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }

    .prod-preview-thumb.active {
    border-color: #f0ad4e;
    }

    /* Details Styles */
    .prod-preview-details {
    display: flex;
    flex-direction: column;
    }

    .prod-preview-title {
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        color: rgba(26, 26, 46, 1);
        margin: 0 0 6px 0;
        line-height: 100%;
        letter-spacing: 0px;
    }

    .prod-preview-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    }

    .prod-preview-price {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 100%;
        font-weight: 600;
        color: rgba(109, 79, 240, 1);
        letter-spacing: 0px;
    }

    .prod-preview-tax {
        font-family: var(--font-body);
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 11px;
        color: rgba(154, 154, 171, 1);
    }

    .prod-preview-description {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 400;
        color: rgba(107, 107, 123, 1);
        line-height: 18px;
        letter-spacing: 0px;
        margin: 0 0 12px 0;
    }

    .prod-preview-stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    }

    .prod-preview-stock-indicator {
        width: 6px;
        height: 6px;
        background-color: rgba(46, 168, 107, 1);
        border-radius: 50%;
    }

    .prod-preview-stock-text {
        font-family: var(--font-body);
        font-size: 12px;
        color: rgba(46, 168, 107, 1);
        letter-spacing: 0px;
        font-weight: 600;
        line-height: 100%;
    }

    /* CTA Button */
    .prod-preview-cta-btn {
        width: 100%;
        background: rgba(230, 163, 48, 1);
        color: rgba(0, 0, 0, 1);
        border: none;
        border-radius: 8px;
        padding: 12px;
        font-family: var(--font-heading);
        line-height: 100%;
        letter-spacing: 0px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .prod-preview-cta-btn:hover {
        background-color: #ec971f;
    }

    .prod-alert-container {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        background: rgba(244, 241, 254, 1); /* Soft grayish-purple background matching the image tint */
        border-radius: 14px;
        padding: 14px 16px;
        max-width: 260px;
        box-sizing: border-box;
    }

    .prod-alert-icon-wrapper {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
    }

    .prod-alert-icon {
        width: 16px;
        height: 17px;
        stroke: rgba(109, 79, 240, 1); /* Distinct purple outline color */
    }

    .prod-alert-content {
    display: flex;
    flex-direction: column;
    }

    .prod-alert-title {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(26, 26, 46, 1);
        margin: 0 0 2px 0;
    }

    .prod-alert-text {
        font-family: var(--font-body);
        font-size: 11px;
        color: rgba(107, 107, 123, 1);
        margin: 0;
        line-height: 16.5px;
        letter-spacing: 0px;
    }
}

/* new product add page css end */

/* vendor goodiebag submission page css start */



#goodiebagRequestPage{
    margin-top: 86px;
    padding-top: 39px;
    padding-bottom: 24.41px;
}

#goodiebagRequestPage .container{
    max-width: 1118px;
    width: 99%;
    padding-left: 0px;
    padding-right: 0px;
}

.goodie-form-container {
  color: #1a1a1a;
  background-color: #ffffff;
  padding: 42px 48px 36.85px 48px;
  box-sizing: border-box;
  margin-top: 20px;
  border-radius: 14px;
}

.goodie-form-header {
  margin-bottom: 24px;
}

.goodie-form-title {
    font-family: var(--font-body);
    font-size: 29px;
    font-weight: 600;
    color: rgba(27, 23, 32, 1);
    line-height: 34.8px;
    letter-spacing: -0.35px;
    margin: 0 0 6px 0;
}

.goodie-form-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(95, 89, 104, 1);
    line-height: 20.15px;
    margin: 0;
    letter-spacing: 0px;
}

.goodie-form-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.goodie-form-card {
  background-color: #fafbfc;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  padding: 18px;
  border: 1px solid rgba(238, 232, 251, 1);
}

.goodie-form-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.goodie-form-card-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: rgba(27, 23, 32, 1);
    margin: 0;
    line-height: 22.5px;
    letter-spacing: 0px;
}

.goodie-form-delete-btn {
    font-family: var(--font-heading);
    background: none;
    border: none;
    color: rgba(91, 34, 255, 1);
    font-size: 12px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.goodie-form-delete-btn:hover {
  text-decoration: underline;
}

.goodie-form-trash-icon {
  width: 14px;
  height: 14px;
}

.goodie-form-group {
  margin-bottom: 15px;
}

.goodie-form-group:last-child {
  margin-bottom: 0;
}

.goodie-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.goodie-form-label {
    font-family: var(--font-body);
    font-weight: 500;
    display: block;
    font-size: 13px;
    line-height: 18.2px;
    letter-spacing: 0px;
    color: rgba(27, 23, 32, 1);
    margin-bottom: 7px;
}

.goodie-form-input,
.goodie-form-textarea {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(217, 210, 234, 1);
  border-radius: 5px;
  padding: 11px 12px;
  font-size: 13px;
  color: rgba(42, 37, 48, 1);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 18.85px;
  letter-spacing: 0px;
}

.goodie-form-textarea {
    height: 76px !important;
    resize: none !important;
}

.goodie-form-input:focus,
.goodie-form-textarea:focus {
  border-color: #6c5ce7;
}

.goodie-form-textarea {
  resize: vertical;
}

.goodie-form-add-btn {
  width: 100%;
  background-color: #ffffff;
  border: 1px dashed rgba(122, 85, 255, 1);
  color: rgba(91, 34, 255, 1);
  border-radius: 5px;
  font-family: var(--font-heading);
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  margin-bottom: 18px;
  transition: background-color 0.2s ease;
}

.goodie-form-add-btn:hover {
  background-color: #f8f7ff;
}

.goodie-form-note-section {
  margin-bottom: 18px;
}

.goodie-form-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.goodie-form-btn {
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: background-color 0.2s ease;
}

.goodie-form-btn-secondary {
  background-color: rgba(243, 239, 255, 1);
  color: rgba(90, 33, 255, 1);
  padding: 14.5px 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
}

.goodie-form-btn-secondary:hover {
  background-color: #e4e7eb;
}

.goodie-form-btn-primary {
  background: linear-gradient(90deg, #6531FF 0%, #4B13EC 100%);
  color: rgba(255, 255, 255, 1);
  padding: 13px 14px;
  border-radius: 5px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
}

.goodie-form-btn-primary:hover {
  background-color: #4c1d95;
}

/* Responsive layout adjustments for small screens */
@media (max-width: 580px) {
  .goodie-form-row,
  .goodie-form-footer {
    grid-template-columns: 1fr;
  }
}

/* vendor goodiebag submission page css end */


/* Vendor sample page add css start ===== */

#couponAddPage{
    position: relative;
    z-index: 2;
    margin-top: 85px;
    padding-top: 69px;
    padding-bottom: 23px;
}

#couponAddPage .container{
    max-width: 1180px;
    padding-left: 0px;
    padding-right: 0px;
    width: 99%;
}

.sample-mgr-container {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  /* border-radius: 14px; */
  overflow: hidden;
}

.sample-mgr-page-header {
  background: linear-gradient(90deg, #F4EFFF 0%, #FBF9FF 100%);
  padding: 10px 14px;
}

.sample-mgr-main-title {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    color: rgba(75, 28, 207, 1);
    line-height: 27.5px;
    letter-spacing: 0px;
    margin: 0 0 2px 0;
}

.sample-mgr-main-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: rgba(107, 96, 130, 1);
    line-height: 19.5px;
}

/* Layout Grid */
.sample-mgr-workspace {
    background: rgba(250, 248, 255, 1);
    display: grid;
    grid-template-columns: 245px 1fr 315px;
    gap: 16px;
    align-items: start;
    padding: 16px;
}

@media (max-width: 1200px) {
  .sample-mgr-workspace {
    grid-template-columns: 1fr;
  }
}

/* Sidebar */
.sample-mgr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.sample-mgr-sidebar-box {
    margin-bottom: 12px;
  .icon{
    width: 31px;
    height: 30px;
    border-radius: 7px;
    background-color: rgba(241, 233, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    svg{
        height: 20px;
        width: 20px;
    }
  }
}

.sample-mgr-box-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 19, 31, 1);
    margin-bottom: 4px;
}

.sample-mgr-box-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(108, 102, 116, 1);
    margin-bottom: 6px;
}

.sample-mgr-btn-orange {
  width: 100%;
  background-color: rgba(255, 177, 27, 1);
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sample-mgr-btn-orange span{
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
}

.sample-mgr-btn-orange:hover {
  background-color: #e59400;
}

.sample-mgr-list-section {
  background-color: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  height: 100%;
}

.sample-mgr-list-label {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0px;
    font-weight: 500;
    color: rgba(119, 112, 127, 1);
    margin-bottom: 7px;
}

.sample-mgr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(238, 233, 245, 1);
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.sample-mgr-item.active {
  border-color: #d8b4fe;
  background-color: #fdfcff;
}

.sample-mgr-item-icon {
    background-color: #f3e8ff;
    padding: 6px;
    border-radius: 6px;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sample-mgr-item-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.sample-mgr-item-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 19, 31, 1);
    margin-bottom: 2px;
}

.sample-mgr-item-meta {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    font-size: 10.5px;
    color: rgba(113, 106, 120, 1);
}

.sample-mgr-badge {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0px;
  padding: 4px 7px;
  border-radius: 999px;
  text-transform: capitalize;
}

.sample-mgr-badge-active {
  background-color: rgba(232, 248, 239, 1);
  color: rgba(19, 152, 89, 1);
}

.sample-mgr-badge-concept {
  background-color: rgba(243, 234, 255, 1);
  color: rgba(106, 43, 215, 1);
}

.sample-mgr-badge-pending {
  background-color: rgba(255, 244, 217, 1);
  color: rgba(177, 107, 0, 1);
}

/* Main Form Area */
.sample-mgr-main-form {
  background-color: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  padding: 18px;
}

.sample-mgr-form-title {
    font-family: var(--font-body);
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0px;
    font-weight: 600;
    color: rgba(24, 19, 31, 1);
    margin: 0 0 20px 0;
}

.sample-mgr-group {
  margin-bottom: 16px;
}

.sample-mgr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sample-mgr-label {
    font-family: var(--font-body);
    display: block;
    line-height: 18.9px;
    letter-spacing: 0px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(24, 19, 31, 1);
    margin-bottom: 7px;
    span{
        font-size: 18.5px;
        font-weight: 500;
        color: rgba(95, 39, 255, 1);
    }
}

.sample-mgr-input,
.sample-mgr-textarea,
.sample-mgr-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(221, 215, 232, 1);
  border-radius: 6px;
  padding: 11px 12px;
  font-size: 13.5px;
  line-height: 18.9px;
  letter-spacing: 0px;
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.sample-mgr-textarea{
    height: 76px !important;
    resize: none !important;
}

.sample-mgr-input:focus,
.sample-mgr-textarea:focus,
.sample-mgr-select:focus {
  border-color: #7c3aed;
}

.sample-mgr-textarea {
  resize: vertical;
}

.sample-mgr-select-wrap {
  position: relative;
}

.sample-mgr-select {
  /* appearance: none; */
  padding-right: 30px;
}

.sample-mgr-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #636e72;
  pointer-events: none;
}

.sample-mgr-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}

.sample-mgr-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  input{
    accent-color: rgba(95, 39, 255, 1);
  }
}

.sample-mgr-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  /* padding-top: 16px; */
}

.sample-mgr-btn-subtle {
    background-color: #ffffff;
    border: 1px solid rgba(228, 222, 236, 1);
    color: #374151;
    padding: 11px 12px;
    border-radius: 5px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 100%;
    cursor: pointer;
    width: 146.46875px;
}

.sample-mgr-btn-purple-light {
  background-color: #f3e8ff;
  border: none;
  color: rgba(95, 39, 255, 1);
  padding: 11px 12px;
  border-radius: 5px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0px;
  line-height: 100%;
  font-weight: 600;
  cursor: pointer;
  width: 161.109375px;
}

.sample-mgr-btn-purple-dark {
  background: linear-gradient(90deg, #6230FF 0%, #4B13EC 100%);
  border: 1px solid rgba(75, 19, 236, 1);
  color: #ffffff;
  padding: 11px 12px;
  border-radius: 5px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  width: 190.421875px;
}

.sample-mgr-btn-purple-dark:hover {
  background-color: #6d28d9;
}

/* Right Preview Pane */
.sample-mgr-preview-pane {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.sample-mgr-preview-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.sample-mgr-checkbox-label {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: rgba(24, 19, 31, 1);
    cursor: pointer;
    span.dot{
        background-color: rgba(95, 39, 255, 1);
        height: 13px;
        width: 13px;
        border-radius: 50%;
        position: relative;
        margin-top: 8px;
        &::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            height: 158%;
            width: 158%;
            border: 2px solid rgba(95, 39, 255, 1);
        }
    }
}

.sample-mgr-preview-hint {
    font-family: var(--font-body);
    font-weight: 400;
  font-size: 12px;
  color: rgba(108, 102, 116, 1);
  line-height: 16.8px;
  letter-spacing: 0px;
  padding-left: 22px;
}

.sample-mgr-card-preview {
    border: 1px solid rgba(236, 231, 245, 1);
    /* background-color: #ffffff; */
    border-radius: 7px;
    padding: 10px;
}

.sample-mgr-card-icon-box {
  width: 100%;
  background-color: rgba(241, 233, 255, 1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 12px;
  padding: 12px;
}

.sample-mgr-card-title {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    color: rgba(24, 19, 31, 1);
    margin: 0 0 3px 0;
    line-height: 100%;
    letter-spacing: 0px;
}

.sample-mgr-card-tag {
    font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: rgba(95, 39, 255, 1);
  letter-spacing: 0px;
  line-height: 100%;
  display: inline-block;
  margin-bottom: 6px;
}

.sample-mgr-card-text {
    font-family: var(--font-body);
    font-weight: 400;
  font-size: 13px;
  color: rgba(81, 75, 89, 1);
  line-height: 19.5px;
  letter-spacing: 0px;
  margin: 0 0 10px 0;
}

.sample-mgr-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

.sample-mgr-card-features li {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 18.13px;
    letter-spacing: 0px;
    color: rgba(24, 19, 31, 1);
}

.sample-mgr-card-btn {
  width: 100%;
  background: linear-gradient(180deg, #FFBD2D 0%, #FFA900 100%);
  color: rgba(73, 45, 0, 1);
  border: none;
  border-radius: 5px;
  padding: 12px;
  font-family: var(--font-heading);
  line-height: 100%;
  letter-spacing: 0px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sample-mgr-card-btn:hover {
  background-color: #e59400;
}

/* Vendor sample page add css end ===== */

/* vendor sample coupon page css start */

#sampleCouponPage{
    margin-top: 88px;
    padding-top: 69px;
    padding-bottom: 148px;
}

.sample-modal-view-wrapper {
    color: #1a1a1a;
    background-color: #ffffff;
    border-radius: 14px;
    padding: 65.95px 47.5px;
    max-width: 525px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.sample-modal-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.sample-modal-view-title {
    font-family: var(--font-heading);
    line-height: 26.88px;
    letter-spacing: 0px;
    font-size: 24px;
    font-weight: 800;
    color: rgba(23, 22, 46, 1);
    margin: 0 0 6px 0;
}

.sample-modal-view-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 18.85px;
    letter-spacing: 0px;
    color: rgba(96, 90, 112, 1);
    margin: 0;
    max-width: 320px;
}

.sample-modal-view-close-main {
  background: none;
  border: none;
  color: #636e72;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.sample-modal-view-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6.46px;
}

.sample-modal-view-card {
    display: grid;
    align-items: center;
    grid-template-columns: 74px 280px 22px;
    gap: 12px;
    background-color: #ffffff;
    border: 1px solid rgba(236, 230, 245, 1);
    box-shadow: 0px 2px 10px 0px rgba(40, 22, 84, 0.03);
    border-radius: 12px;
    padding: 12px 14px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}



.sample-modal-view-card:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.08);
}

.sample-modal-view-icon-box {
  width: 74px;
  height: 62px;
  background-color: #f3e8ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}



.sample-modal-view-card-title {
    font-family: var(--font-body);
    line-height: 18.3px;
    letter-spacing: 0px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(21, 19, 39, 1);
    margin: 0 0 0px 0;
}

.sample-modal-view-card-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10.5px;
    color: rgba(101, 95, 115, 1);
    /* margin: 0 0 4px 0; */
    line-height: 14.91px;
    letter-spacing: 0px;
}

.sample-modal-view-card-badge {
    font-family: var(--font-heading);
    letter-spacing: 0px;
    line-height: 100%;
    font-size: 9.8px;
    font-weight: 700;
    color: rgba(35, 168, 95, 1);
}

.sample-modal-view-chevron {
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(27, 23, 56, 1);
}

/* Offcanvas Customizations */
.sample-modal-view-offcanvas {
  width: 420px !important;
}

.sample-modal-view-offcanvas-header {
    margin-top: 39.76px;
    padding: 20px 24px 0px 24px;
    border-bottom: none;
}

.sample-modal-view-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13.94px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(91, 34, 244, 1);
}

.sample-modal-view-offcanvas-body {
  padding: 13.94px 19.5px 24px 19.5px;
  display: flex;
  flex-direction: column;
}

.sample-modal-view-oc-banner {
    padding-top: 13.94px;
    padding-bottom: 26.72px;
    width: 100%;
    background-color: #f3e8ff;
    border-radius: 9.29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 16.26px;
    svg{
        height: 106.87px;
        width: 106.87px;
    }
}

.sample-modal-view-oc-title {
    font-family: var(--font-heading);
  font-size: 24.39px;
  font-weight: 800;
  line-height: 28.05px;
  letter-spacing: 0px;
  color: rgba(23, 21, 43, 1);
  margin: 0 0 3.48px 0;
}

.sample-modal-view-oc-tag {
    font-family: var(--font-heading);
  font-size: 12.78px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  color: #7c3aed;
  margin-bottom: 4.65px;
  display: inline-block;
}



.sample-modal-view-oc-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.2px;
    color: #4b5563;
    margin: 0 0 13.94px 0;
    line-height: 17.69px;
    letter-spacing: 0px;
}

.sample-modal-view-oc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 15.69px 0;
  display: flex;
  flex-direction: column;
  gap: 5.81px;
  font-size: 13px;
  color: #374151;
}

.sample-modal-view-oc-features li {
  display: flex;
  align-items: center;
  gap: 9.29px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11.96px;
  letter-spacing: 0px;
  line-height: 17.35px;
  color: rgba(79, 73, 92, 1);
}

.sample-modal-view-oc-cta {
    width: 100%;
    background: rgba(240, 168, 39, 1);
    border: none;
    border-radius: 9.29px;
    padding: 16.5px 10px 16.6px 10px;
    font-family: var(--font-heading);
    font-size: 13.36px;
    font-weight: 700;
    color: rgba(25, 21, 38, 1);
    line-height: 100%;
    letter-spacing: 0px;
    transition: background-color 0.2s;
}

.sample-modal-view-oc-cta:hover {
  background-color: #e59400;
}

@media screen and (max-width: 376px){
    .sample-modal-view-card{
        flex-wrap: wrap;
        /* text-align: center; */
        justify-content: center;
    }

    .sample-modal-view-icon-box{
        width: 100%;
    }

    .sample-modal-view-card-content{
        flex-grow: inherit;
        width: 88%;
    }
}

/* vendor sample coupon page css end */


/* vendor request stall page css start */

#requestStallPage{
    margin-top: 88px;
    padding-top: 98px;
    padding-bottom: 28.41px;
}

#requestStallPage .container{
    max-width: 1180px;
    width: 98%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    z-index: 2;
}

.stall-dash-container {
    margin-top: 20px;
    color: #1a1a1a;
    max-width: 100%;
    box-sizing: border-box;
}

/* Header */
.stall-dash-top-header {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.stall-dash-main-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    line-height: 34.5px;
    letter-spacing: -0.6px;
    color: rgba(29, 23, 52, 1);
    margin: 0 0 7px 0;
}

.stall-dash-main-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(99, 92, 125, 1);
    margin: 0;
}

.stall-dash-preview-btn {
  background-color: #ffffff;
  border: 1px solid rgba(122, 67, 255, 1);
  color: rgba(91, 18, 242, 1);
  border-radius: 7px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  line-height: 100%;
  letter-spacing: 0px;
  align-items: center;
  gap: 9px;
  transition: background-color 0.2s;
  font-family: var(--font-heading);
}

.stall-dash-preview-btn:hover {
  background-color: #fdfcff;
}

/* Layout Grid */
.stall-dash-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .stall-dash-grid {
    grid-template-columns: 1fr;
  }
}

.stall-dash-main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Common Card Style */
.stall-dash-card,
.stall-dash-module-card,
.stall-dash-alert-banner,
.stall-dash-side-box {
  background-color: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 10px;
}

.stall-dash-card{
    padding: 22px 22px 18px 22px;
}

.stall-dash-module-card{
    padding: 18px;
}

/* Progress Card */
.stall-dash-section-heading {
    font-family: var(--font-body);
    line-height: 100%;
    letter-spacing: 0px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(91, 18, 242, 1);
    margin: 0 0 20px 0;
}

.stall-dash-steps-indicator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.stall-dash-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.stall-dash-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
  z-index: 2;
}

.stall-dash-step-icon:not(.completed){
    border: 2px dotted rgba(91, 18, 242, 1);
}

.stall-dash-step.completed .stall-dash-step-icon {
  border-color: rgba(38, 170, 104, 1);
  background-color: rgba(38, 170, 104, 1);
  color: #ffffff;
}

.stall-dash-step-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(29, 23, 52, 1);
    margin-bottom: 2px;
}

.stall-dash-step-sub {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    font-size: 14px;
    color: rgba(38, 170, 104, 1);
}

.stall-dash-progress-bar-wrapper {
  width: 100%;
  height: 6px;
  background-color: rgba(241, 237, 249, 1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

.stall-dash-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6314F4 0%, #4F08E3 100%);
  border-radius: 10px;
}

.stall-dash-progress-status-text {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
  line-height: 1.4;
}

/* Modules Grid (2x2) */
.stall-dash-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .stall-dash-modules-grid {
    grid-template-columns: 1fr;
  }
}

.stall-dash-module-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stall-dash-mod-header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
}

.stall-dash-mod-icon-box {
  width: 34px;
  height: 40px;
  background-color: rgba(244, 238, 255, 1);
  border-radius: 18.44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #7c3aed;
  box-shadow: 0px 0px 0px 7px rgba(251, 249, 255, 1);
  flex-shrink: 0;
}

.stall-dash-mod-title {
    font-weight: 800;
    font-size: 16px;
    color: rgba(29, 23, 52, 1);
    line-height: 100%;
    letter-spacing: 0px;
    margin: 0 0 2px 0;
}

.stall-dash-mod-badge {
  font-size: 10px;
  font-weight: 600;
  /* padding: 2px 8px; */
  border-radius: 10px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.stall-dash-mod-badge.required {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(38, 170, 104, 1);
}

.stall-dash-mod-badge.optional {
  background-color: #f3f4f6;
  color: #6b7280;
}

.stall-dash-mod-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(113, 107, 135, 1);
    line-height: 20.3px;
    letter-spacing: 0px;
    margin: 0;
    flex-grow: 1;
}

.stall-dash-mod-footer-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.stall-dash-mod-footer-info.empty {
    display: flex;
    flex-direction: row;
    color: #9ca3af;
    font-size: 13px;
    align-items: center;
    span{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(109, 102, 130, 1);
    }
}

.stall-dash-check-icon {
  width: 14px;
  height: 14px;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(38, 170, 104, 1);
}

.stall-dash-done-text {
    font-family: var(--font-body);
    display: block;
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 100%;
    font-weight: 600;
    color: rgba(38, 170, 104, 1);
}

.stall-dash-date-text {
    font-family: var(--font-body);
    font-weight: 400;
    display: block;
    line-height: 100%;
    letter-spacing: 0px;
    font-size: 13px;
    color: rgba(130, 123, 150, 1);
}

.stall-dash-mod-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.stall-dash-btn {
  padding: 9px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: background-color 0.2s;
  font-family: var(--font-heading);
  letter-spacing: 0px;
  line-height: 100%;
}

.stall-dash-btn-outline {
  background-color: #ffffff;
  border: 1px solid rgba(230, 225, 241, 1);
  color: rgba(91, 18, 242, 1);
}

.stall-dash-btn-outline:hover {
  background-color: #f9fafb;
}

.stall-dash-btn-purple {
  background: linear-gradient(90deg, #6415F4 0%, #5010DD 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 1)
}

.stall-dash-btn-purple:hover {
  background-color: #6d28d9;
}

/* Alert Banner */
.stall-dash-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: #fdfcff;
  border-color: #f3e8ff;
  padding: 17px 18px;
}

.stall-dash-alert-icon {
  width: 22px;
  height: 22px;
  background-color: #f3e8ff;
  color: #7c3aed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

.stall-dash-alert-title {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 4px 0;
}

.stall-dash-alert-text {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
  line-height: 1.4;
}

/* Sidebar Column */
.stall-dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stall-dash-side-box {
  border-radius: 10px;
  padding: 20px 18px 18px 18px;
  border-top: 1px solid rgba(238, 233, 248, 1);
  box-shadow: 0px 1px 2px 0px rgba(38, 22, 78, 0.02);
}

.stall-dash-side-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(29, 23, 52, 1);
    margin-bottom: 17px;
}

.stall-dash-side-title.lst{
    margin-bottom: 8px;
}

.stall-dash-summary-row {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stall-dash-sum-value.opt{
    background: rgba(244, 242, 248, 1);
}

.stall-dash-sum-value.con{
    background: rgba(245, 240, 255, 1);
    color: rgba(91, 18, 242, 1);
}

.stall-dash-sum-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(29, 23, 52, 1);
}

.stall-dash-sum-value {
    font-family: var(--font-body);
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: 400;
}

.stall-dash-sum-value.success {
    color: rgba(31, 156, 94, 1);
    background-color: rgba(238, 250, 243, 1);
}

.stall-dash-sum-badge {
  background-color: #f3f4f6;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Steps Guide */
.stall-dash-steps-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stall-dash-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.stall-dash-guide-icon {
    --size: 36px;
    height: var(--size);
    width: var(--size);
    border-radius: 8px;
    background-color: rgba(244, 239, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stall-dash-guide-num {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(29, 23, 52, 1);
    margin-bottom: 3px;
}

.stall-dash-guide-desc {
    font-weight: 400;
    font-size: 13px;
    color: rgba(119, 112, 140, 1);
    margin: 0;
    line-height: 18.85px;
    letter-spacing: 0px;
}

/* Submission Box */
.stall-dash-sub-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(111, 104, 133, 1);
    margin: 0 0 14px 0;
    line-height: 20.3px;
    letter-spacing: 0px;
}

.stall-dash-submit-btn{
    font-family: var(--font-heading);
    width: 100%;
    border: none;
    border-radius: 5px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    margin-bottom: 13px;
}

.stall-dash-submit-btn:disabled {
  background-color: rgba(220, 221, 234, 1);
  color: rgba(255, 255, 255, 1);
  cursor: not-allowed;
}

.stall-dash-submit-btn{
    background-color: #E8841A;
}

.stall-dash-tiny-note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9.6px;
    line-height: 13.92px;
    letter-spacing: 0px;
    color: rgba(129, 122, 147, 1);
    padding-bottom: 14px;
}

/* vendor request stall page css end */

/* create stall page design css start */

#createStallPage{
    margin-top: 87px;
    padding-top: 82px;
    padding-bottom: 110px;
    position: relative;
    z-index: 2;
}

#createStallPage .container{
    max-width: 1190px;
    width: 98%;
}

.stall-info-page-wrapper {
  display: grid;
  grid-template-columns: 211px 1fr 269.49px;
  gap: 13px;
  box-sizing: border-box;
}

/* .stall-info-main-content {
    margin-right: -8.23px;
} */

@media (max-width: 1300px) {
  .stall-info-page-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Left Navigation Sidebar */
.stall-info-nav-sidebar {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.stall-info-nav-sidebar .wrapperOne{
    height: calc(100% - 40px);
}

.stall-info-back-link {
  font-size: 11.43px;
  font-weight: 700;
  color: rgba(91, 18, 242, 1);
  text-decoration: none;
  line-height: 100%;
  letter-spacing: 0px;
  margin-bottom: 22.81px;
  display: block;
  svg{
    margin-right: 8.17px;
  }
}

.stall-info-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6.53px;
}

.stall-info-nav-item {
  display: flex;
  align-items: center;
  gap: 11.43px;
  padding: 9.8px;
  border-radius: 6.53px;
  text-decoration: none;
  color: #374151;
  background-color: transparent;
  transition: background-color 0.2s;
}

.stall-info-nav-item.active {
  background-color: rgba(246, 241, 255, 1);
}

.stall-info-nav-icon {
  width: 26.13px;
  height: 26.13px;
  background-color: rgba(247, 242, 255, 1);
  color: #7c3aed;
  border-radius: 13.07px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.stall-info-nav-title {
    font-family: var(--font-heading);
    display: block;
    font-size: 11.43px;
    line-height: 100%;
    letter-spacing: 0px;
    font-weight: 700;
    color: rgba(30, 25, 48, 1);
    margin-bottom: 1.63px;
}

.stall-info-nav-sub {
    font-family: var(--font-body);
    font-weight: 400;
    display: block;
    font-size: 9.8px;
    letter-spacing: 0px;
    color: rgba(123, 115, 143, 1);
}

.stall-info-help-box {
  background: linear-gradient(180deg, #FBF8FF 0%, #FFFFFF 100%);
  border: 0.82px solid rgba(236, 231, 244, 1);
  border-radius: 12px;
  padding: 13.7px;
}

.stall-info-help-title {
    font-family: var(--font-body);
    font-size: 11.43px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(91, 18, 242, 1);
}

.stall-info-help-text {
    font-family: var(--font-body);
    font-size: 10.62px;
    line-height: 15.92px;
    letter-spacing: 0px;
    color: rgba(115, 108, 134, 1);
    margin: 0 0 11.43px 0;
}

.stall-info-help-btn {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  font-size: 10.89px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  background-color: #ffffff;
  border: 0.82px solid rgba(74, 85, 101, 1);
  color: rgba(74, 85, 101, 1);
  font-family: var(--font-heading);
}

.stall-info-help-btn.orange{
    margin-bottom: 5.34px;
}

.stall-info-help-btn:hover {
  background-color: rgba(230, 163, 48, 1);
  color: rgba(0, 0, 0, 1);
  border: 0.82px solid rgba(230, 163, 48, 1);
}

/* .stall-info-help-btn.outline {
  background-color: #ffffff;
  border: 1px solid #dcdde1;
  color: #374151;
} */

/* Center Form Editor */
.stall-info-main-content {
  background-color: #ffffff;
  border: 1px solid #edf0f2;
  border-radius: 10px;
  padding: 20px;
}

.stall-info-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22.87px;
}

.stall-info-title{
    margin-bottom: 4.9px;
}

.stall-info-title .txt {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24.5px;
    line-height: 28.17px;
    letter-spacing: -0.49px;
}

.stall-info-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.43px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(112, 105, 129, 1);
    margin: 0;
}

.stall-info-status-badge {
    font-family: var(--font-heading);
    font-size: 10.62px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(40, 169, 102, 1);
}

.stall-info-section {
  margin-bottom: 22px;
}

.stall-info-radio-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.43px;
    line-height: 100%;
    letter-spacing: 0px;
    columns: rgba(81, 75, 97, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.radioSelector {
    width: 14.7px;
    height: 14.7px;
    border: 0.82px solid rgba(216, 209, 229, 1);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Selected radio */
.stall-info-radio-label:has(input[type="radio"]:checked) .radioSelector {
    border: 4.08px solid rgba(91, 18, 242, 1);
}

/* Inner circle when selected */
/* .stall-info-radio-label:has(input[type="radio"]:checked) .radioSelector::after {
   
} */

/* Hide the default radio button */
.stall-info-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stall-info-section-title {
    font-family: var(--font-body);
    font-size: 12.25px;
    line-height: 100%;
    letter-spacing: 0px;
    font-weight: 600;
    color: rgba(91, 18, 242, 1);
    margin: 0 0 11.43px 0;
}

.stall-info-grid-row-logo {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 20px;
  align-items: flex-start;
}

@media only screen and (max-width: 768px){
    .stall-info-grid-row-logo {
        grid-template-columns: 1fr;
    }

    .stall-info-logo-upload-box{
        margin-bottom: 20px;
    }

    .stall-info-row{
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 375px){
    .stall-info-radio-group{
        flex-direction: column;
        gap: 7px !important;
    }
}

.stall-info-fields-group {
  display: flex;
  flex-direction: column;
  /* gap: 16px; */
}

.stall-info-logo-upload-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  .stall-info-label{
    font-size: 10.62px;
    margin-bottom: 6.53px;
  }
}

.stall-info-label.labelopt span{
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10.62px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(141, 133, 157, 1);
}

.stall-info-logo-circle {
  width: 60px;
  height: 60px;
  background-color: #111111;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0 ;
}

.stall-info-logo-btn {
  background-color: #ffffff;
  border: 0.82px solid rgba(110, 36, 255, 1);
  color: rgba(91, 18, 242, 1);
  padding: 10px 12px;
  border-radius: 4.9px;
  font-family: var(--font-heading);
  font-size: 10.89px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  margin-bottom: 6px;
}

.stall-info-logo-hint {
    margin-top: 6.53px;
    font-weight: 400;
    font-size: 11px;
    color: rgba(138, 130, 155, 1);
    line-height: 100%;
    letter-spacing: 0px;
    font-family: var(--font-body);
}

.stall-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stall-info-group {
  margin-bottom: 13.07px;
}

.stall-info-label {
    font-family: var(--font-body);
    font-weight: 700;
    display: block;
    font-size: 10.62px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(30, 25, 48, 1);
    margin-bottom: 5.78px;
    span{
        color: rgba(214, 75, 98, 1);
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 10.62px;
    }
}

.stall-info-input,
.stall-info-textarea {
  width: 100%;
  background-color: #ffffff;
  border: 0.82px solid rgba(236, 231, 244, 1);
  border-radius: 4.08px;
  padding: 8.17px 9.8px;
  font-size: 14px;
  color: rgba(30, 25, 48, 1);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11.43px;
  letter-spacing: 0px;
}

.stall-info-input:focus,
.stall-info-textarea:focus {
  border-color: #7c3aed;
}

.stall-info-textarea {
  resize: none;
  height: 75.13px;
}

.stall-info-char-counter {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
  margin-top: 4px;
}

.stall-info-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}

.stall-info-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.stall-info-currency-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.stall-info-currency {
    font-family: var(--font-body);
    font-weight: 400;
    position: absolute;
    left: 12px;
    font-size: 11.43px;
    color: rgba(30, 25, 48, 1);
    line-height: 100%;
    letter-spacing: 0px;
}

.stall-info-input.currency {
  padding-left: 28px;
}

.stall-info-field-hint {
    font-family: var(--font-body);
    font-weight: 400;
    display: block;
    font-size: 9.8px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(140, 132, 156, 1);
    margin-top: 4.08px;
}

.stall-info-feature-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(90deg, #FBF8FF 0%, #FFFFFF 100%);
  border: 0.82px solid rgba(236, 231, 244, 1);
  border-radius: 10px;
  padding: 13.07px;
}

.stall-info-feature-icon {
    --size: 29.4px;
    height: var(--size);
    width: var(--size);
    border-radius: 6.53px;
    background-color: rgba(241, 233, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stall-info-feature-content strong {
    font-family: var(--font-body);
    display: block;
    margin-bottom: 3.27px;
}

.stall-info-feature-content p {
    font-family: var(--font-body);
    margin: 0;
    font-size: 10.62px;
    line-height: 15.39px;
    letter-spacing: 0px;
    color: rgba(113, 106, 131, 1);
}

.stall-info-form-footer {
  display: flex;
  gap: 9.8px;
  padding-top: 21px;
  flex-wrap: wrap;
}

.stall-info-btn {
  border-radius: 4.9px;
  font-size: 11.43px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-heading);
  padding: 7.5px 14px;
}

.stall-info-btn-subtle {
  background-color: #ffffff;
  border: 1px solid #dcdde1;
  color: rgba(0, 0, 0, 1);
  border: 0.82px solid rgba(236, 231, 244, 1);
}

.stall-info-btn-purple-light {
  background-color: #fff;
  border: 0.82px solid rgba(110, 36, 255, 1);
  color: rgba(91, 18, 242, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.stall-info-btn-purple-light span.dot{
    /* position: relative;
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: rgba(91, 18, 242, 1); */
    /* &::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(91, 18, 242, 1);
        height: 190%;
        width: 190%;
    } */
}

.stall-info-btn-disabled {
  background-color: #f3f4f6;
  border: none;
  color: #9ca3af;
  cursor: not-allowed;
  margin-left: auto;
  padding: 10.18px 6.18px;
}

.stall-info-form-note {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.8px;
    color: rgba(111, 104, 128, 1);
    margin-top: 12px;
}

/* Right Live Preview Sidebar */
.stall-info-preview-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stall-info-preview-toggle {
    font-family: var(--font-body);
    font-size: 11.43px;
    font-weight: 600;
    color: rgba(30, 25, 48, 1);
    padding-left: 4px;
    margin-bottom: 23px;
}

.stall-info-preview-card {
  background-color: #ffffff;
  border-left: 0.82px solid rgba(236, 231, 244, 1);
  border-radius: 10px;
  padding: 20px;
}

.stall-preview-logo-circle {
  width: 48px;
  height: 48px;
  background-color: #111111;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8.17px;
}

.stall-preview-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17.97px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(30, 25, 48, 1);
    margin: 0 0 16px 0;
}

.stall-preview-desc {
    font-family: var(--font-body);
    font-size: 10.62px;
    font-weight: 400;
    color: rgba(114, 107, 132, 1);
    line-height: 15.92px;
    letter-spacing: 0px;
    margin: 0 0 24px 0;
}

.stall-preview-contact-list {
    border-top: 0.82px solid rgba(236, 231, 244, 1);
    list-style: none;
    padding: 0;
    padding-top: 14px;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 9.8px;
    font-size: 12px;
    color: #374151;
}

.stall-preview-contact-list li {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10.62px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(95, 88, 111, 1);
    display: flex;
    align-items: center;
    gap: 9.8px;
}

.stall-preview-divider {
  height: 1px;
  background-color: #f3f4f6;
  margin: 24px 0 13px 0;
}

.stall-preview-section-title {
    font-family: var(--font-body);
    font-size: 12.25px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(30, 25, 48, 1);
    margin-bottom: 6.53px;
}

.stall-preview-shipping-cost {
    font-family: var(--font-body);
    font-size: 11.43px;
    font-weight: 600;
    color: rgba(30, 25, 48, 1);
    line-height: 100%;
    letter-spacing: 0px;
}

.stall-preview-shipping-free {
    font-family: var(--font-body);
    font-size: 10.62px;
    color: rgba(40, 169, 102, 1);
    font-weight: 600;
    margin-top: 2px;
}

.stall-preview-chat-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10.62px;
    color: #6b7280;
    margin: 0;
    line-height: 15.92px;
    letter-spacing: 0px;
}

/* create stall page design css end */


/* vendor coupon page css start  */

#vendorCouponDeal{
    margin-top: 87px;
    padding-top: 62px;
}

#vendorCouponDeal .container{
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 98%;
    padding-bottom: 34px;
}

.deal-mgr-container {
    border-radius: 14px;
    box-shadow: 0px 5px 20px 0px rgba(60, 30, 90, 0.05);
    color: #1a1a1a;
    background-color: rgba(255, 255, 255, 1);
    display: grid;
    grid-template-columns: 220px 1fr 330px;
    gap: 18px;
    padding: 22px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1300px) {
  .deal-mgr-container {
    grid-template-columns: 1fr;
  }
}

/* Left Sidebar */
.deal-mgr-sidebar {
  display: flex;
  flex-direction: column;
}

.deal-mgr-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.deal-mgr-sidebar-icon {
  width: 34px;
  height: 34px;
  background-color: rgba(243, 238, 255, 1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.deal-mgr-sidebar-title {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0px;
    line-height: 100%;
    font-weight: 600;
    color: rgba(24, 22, 43, 1);
    margin: 0 0 1px 0;
}

.deal-mgr-sidebar-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9.5px;
    color: rgba(154, 147, 164, 1);
    line-height: 100%;
    letter-spacing: 0px;
}

.deal-mgr-btn-orange {
  width: 100%;
  background-color: rgba(233, 165, 42, 1);
  color: rgba(0, 0, 0, 1);
  border: none;
  border-radius: 7px;
  padding: 12.5px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0px;
  line-height: 100%;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 16px;
}

.deal-mgr-btn-orange:hover {
  background-color: #e59400;
}

.deal-mgr-list-section {
  display: flex;
  flex-direction: column;
}

.deal-mgr-list-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(139, 131, 149, 1);
    margin-bottom: 8px;
}

.deal-mgr-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  border: 1px solid rgba(232, 226, 242, 1);
  margin-bottom: 8px;
}

.deal-mgr-item.active {
  border-color: #d8b4fe;
  background-color: #fdfcff;
}

.deal-mgr-item-info {
  display: flex;
  flex-direction: column;
}

.deal-mgr-item-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 161%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
}

.deal-mgr-item-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 8.5px;
    color: rgba(148, 141, 161, 1);
}

.deal-mgr-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 8.5px;
    line-height: 100%;
    letter-spacing: 0px;
    background-color: rgba(242, 237, 255, 1);
    color: rgba(148, 141, 161, 1);
}


/* .deal-mgr-badge-pending {
  background-color: #fef3c7;
  color: #92400e;
} */

/* Center Form Editor */

.deal-mgr-form-top-row {
  margin-bottom: 16px;
}

.deal-mgr-main-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
    margin: 0;
}

.deal-mgr-group {
  margin-bottom: 13px;
}

.deal-mgr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.deal-mgr-label {
    font-family: var(--font-body);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
    margin-bottom: 6px;
}

.deal-mgr-input,
.deal-mgr-textarea,
.deal-mgr-select {
    font-family: var(--font-body);
    font-weight: 400;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(222, 215, 232, 1);
    border-radius: 6px;
    padding: 10px 10px;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(53, 47, 64, 1);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.deal-mgr-select{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
    border: 1px solid rgba(222, 215, 232, 1);
}

.deal-mgr-input:focus,
.deal-mgr-textarea:focus,
.deal-mgr-select:focus {
  border-color: #7c3aed;
}

.deal-mgr-textarea {
  resize: none;
  min-height: 73px;
}

.deal-mgr-currency-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.deal-mgr-currency {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: #6b7280;
}

/* Container spacing */
.deal-mgr-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Radio Label Container */
.deal-mgr-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  user-select: none;
  position: relative;
}

/* Visually hide the native radio input but keep it accessible */
.deal-mgr-radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Custom Radio Span Design (Unselected State) */
.radio-select {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(200, 189, 225, 1);
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-block;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Hover Effect */
.deal-mgr-radio-label:hover .radio-select {
  border-color: #7c3aed;
}

/* Custom Radio Span (Checked State) */
.deal-mgr-radio-label input[type="radio"]:checked + .radio-select {
  border-color: #7c3aed;
  background-color: #ffffff;
}

/* Inner Dot for Checked State */
.deal-mgr-radio-label input[type="radio"]:checked + .radio-select::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #7c3aed;
}

/* Focus state for keyboard accessibility */
.deal-mgr-radio-label input[type="radio"]:focus-visible + .radio-select {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.deal-mgr-input.currency {
  padding-left: 28px;
}

.deal-mgr-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.deal-mgr-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.deal-mgr-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  padding-top: 16px;
  border-top: 1px solid #edf0f2;
  flex-wrap: wrap;
  justify-content: end;
}

.deal-mgr-btn-subtle {
    font-family: var(--font-heading);
    background-color: #ffffff;
    border: 1px solid rgba(221, 215, 230, 1);
    color: rgba(90, 83, 101, 1);
    padding: 11.75px 14.3px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    cursor: pointer;
}

.deal-mgr-btn-purple-light {
    background-color: #fff;
    border: 1px solid rgba(184, 167, 239, 1);
    color: #7c3aed;
    padding: 11.75px 14.33px;
    border-radius: 7px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    cursor: pointer;
}

.deal-mgr-btn-purple-dark {
    background-color: rgba(91, 34, 244, 1);
    border: none;
    color: #ffffff;
    padding: 11.75px 14.13px;
    border-radius: 7px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0px;
    cursor: pointer;
}

.deal-mgr-btn-purple-dark:hover {
  background-color: #6d28d9;
}

/* Right Live Preview Pane */
.deal-mgr-preview-pane {
  display: flex;
  flex-direction: column;
}

.deal-mgr-preview-toggle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.deal-mgr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: rgba(24, 22, 43, 1);
  line-height: 100%;
  letter-spacing: 0px;
  cursor: pointer;
  span{
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: rgba(24, 22, 43, 1);
    position: relative;
    &::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(24, 22, 43, 1);
        border-radius: 50%;
        height: 150%;
        width: 150%;
    }
  }
}

.deal-mgr-preview-hint {
    font-family: var(--font-body);
    font-size: 9px;
    color: rgba(141, 133, 152, 1);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
}

.deal-mgr-card-preview {
  background-color: #ffffff;
  border: 1px solid rgba(232, 226, 242, 1);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.deal-mgr-card-banner {
  width: 100%;
  background: linear-gradient(90deg, #F6F1FF 0%, #F2EBFF 100%);
  border-radius: 8px;
  padding: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 12px;
}

.deal-mgr-card-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
    margin: 0 0 4px 0;
}

.deal-mgr-card-price-row {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(91, 34, 244, 1);
    margin-bottom: 5px;
}

.deal-mgr-card-text {
    font-family: var(--font-body);
    font-size: 9.5px;
    color: rgba(110, 104, 120, 1);
    margin: 0 0 10px 0;
    line-height: 13.77px;
    letter-spacing: 0px;
}

.deal-mgr-discount-badge {
    font-family: var(--font-heading);
    background-color: rgba(255, 243, 200, 1);
    color: rgba(165, 75, 0, 1);
    font-size: 10px;
    font-weight: 700;
    padding: 5.5px 12px;
    border-radius: 6px;
    margin-bottom: 11px;
}

.deal-mgr-card-subtitle {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
    margin-bottom: 8px;
}

.deal-mgr-card-features,
.deal-mgr-card-meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #374151;
}

.deal-mgr-card-features{
    margin-bottom: 10px;
    gap: 4px !important;
}

.deal-mgr-card-meta-list{
    padding-top: 20px;
    border-top: 1px solid rgba(232, 226, 242, 1);

}

.deal-mgr-card-features li,
.deal-mgr-card-meta-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.deal-mgr-card-features li{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9.2px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(78, 72, 89, 1);
}

.deal-mgr-card-features li span{
    --size: 14px;
    height: var(--size);
    width: var(--size);
    background-color: rgba(91, 34, 244, 1);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
}

.deal-mgr-card-meta-list li{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9.2px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
}

.deal-mgr-card-meta-list li span svg{
    --size: 13px;
    height: var(--size);
    width: var(--size);
}

.deal-mgr-qty-selector-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-top: 1px solid rgba(232, 226, 242, 1);
  padding-top: 10px;
}

.deal-mgr-qty-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
}

.deal-mgr-select-wrap {
  position: relative;
  width: 90px;
}

.deal-mgr-select {
    text-align: center;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}

.deal-mgr-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #6b7280;
  pointer-events: none;
}

.deal-mgr-price-calc-box {
  background: rgba(250, 248, 254, 1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}

.deal-mgr-calc-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.deal-mgr-calc-row span:first-child{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9.5px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
}

.deal-mgr-calc-row span:last-child{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 9.5px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(24, 22, 43, 1);
}

.deal-mgr-calc-row.bold span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 9.5px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(165, 75, 0, 1);
}

.deal-mgr-calc-row:first-child{
    margin-top: 4.5px;
}

.deal-mgr-calc-row.bold{
    margin-bottom: 4px;
}

.deal-mgr-card-cta {
  width: 100%;
  background-color: rgba(91, 34, 244, 1);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 11.14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 1);
}

.deal-mgr-card-cta:hover {
  background-color: #6d28d9;
}

.deal-mgr-card-footer-note {
    font-family: var(--font-body);
    font-weight: 400;
    display: block;
    font-size: 8.2px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(142, 135, 153, 1);
    text-align: center;
}

/* vendor coupon page css end  */

/* coupon visitor list page css start */

#couponVisitorListPage{
    margin-top: 82px;
    padding-top: 69px;
    padding-bottom: 148px;
}

.stall-coupons-modal {
    background-color: #ffffff;
    border: 1px solid #edf0f2;
    border-radius: 16px;
    padding: 38px 32px 53px 32px;
    max-width: 527px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
}

/* Header */
.stall-coupons-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.stall-coupons-title {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 27.6px;
    letter-spacing: 0px;
    font-weight: 800;
    color: rgba(18, 17, 38, 1);
    margin: 0 0 6px 0;
}

.stall-coupons-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(83, 81, 109, 1);
    margin: 0;
    line-height: 18.85px;
    letter-spacing: 0px;
}

.stall-coupons-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    padding-top: 7px;
}

.stall-coupons-close-btn:hover {
  background-color: #f3f4f6;
  color: #111111;
}

/* Coupons List */
.stall-coupons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* Individual Coupon Card */
.stall-coupons-card {
    display: grid;
    align-items: center;
    gap: 14px;
    grid-template-columns: 72px 310px 24px;
    background-color: #ffffff;
    border: 1px solid rgba(238, 234, 244, 1);
    box-shadow: 0px 2px 8px 0px rgba(50, 20, 90, 0.03);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stall-coupons-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.05);
}

/* Card Icon Box */
.stall-coupons-card-icon {
  width: 100%;
  height: 62px;
  background-color: rgba(245, 240, 255, 1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
}

/* Content Details */
.stall-coupons-card-content {
  flex-grow: 1;
}

.stall-coupons-card-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(18, 17, 38, 1);
    margin: 0 0 4px 0;
}

.stall-coupons-card-info {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(99, 93, 122, 1);
    margin: 0 0 7px 0;
}

.stall-coupons-card-info .highlight-price {
    font-family: var(--font-body);
    color: rgba(103, 89, 200, 1);
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0px;
}

/* Yellow Badge */
.stall-coupons-badge {
  display: inline-block;
  background-color: rgba(255, 243, 204, 1);
  color: rgba(156, 74, 0, 1);
  font-size: 11px;
  padding: 6px 7.84px 7px 8px;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
}

/* Arrow indicator on the right */
.stall-coupons-arrow-box {
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.stall-coupons-card:hover .stall-coupons-arrow-box {
  transform: translateX(3px);
  color: #7c3aed;
}

.couponVisitorShowOffcanvas{
    width: 478px !important;
    padding: 28px 43.5px;
}

.couponVisitorShowOffcanvas .offcanvas-header{
    padding: 22.5px 0 0 0;
    margin-bottom: 7.5px;
}

.couponVisitorShowOffcanvas .offcanvas-body{
    padding: 0;
    padding-top: 14px;
}

.couponVisitorShowOffcanvas .backCouponBtn{
    a{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(87, 35, 244, 1);
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.couponOffCanvasBanner{
    background-color: rgba(243, 237, 255, 1);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 14px;
    svg{
        width: 64px;
        height: 45px;
    }
}

.couponVisitorShowOffcanvas .coupon-title{
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(18, 17, 38, 1);
    margin-bottom: 5px;
}

.couponVisitorShowOffcanvas .coupon-price-tag{
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(87, 35, 244, 1);
    margin-bottom: 3px;
}

.couponVisitorShowOffcanvas .coupon-normal-value{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(97, 91, 113, 1);
    margin-bottom: 10px;
}

.couponVisitorShowOffcanvas .coupon-benefit-badge{
    font-family: var(--font-heading);
    background-color: rgba(255, 243, 204, 1);
    padding: 9.5px 8px;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(164, 74, 0, 1);
    margin-bottom: 14px;
}

.couponVisitorShowOffcanvas .coupon-section-heading{
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(18, 17, 38, 1);
}

.couponVisitorShowOffcanvas .coupon-section-heading{
    font-size: 12px;
    margin-bottom: 7px;
}

.couponVisitorShowOffcanvas .coupon-checklist{
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 13px;
    margin-bottom: 0px;
}

.couponVisitorShowOffcanvas .coupon-checklist-item{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(85, 79, 98, 1);
    span{
        --size: 16px;
        height: var(--size);
        width: var(--size);
        border-radius: 50%;
        background-color: rgba(87, 35, 244, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.couponVisitorShowOffcanvas .coupon-meta-list{
    padding-left: 0px;
    padding-top: 23px;
    list-style-type: none;
    padding-bottom: 17px;
    border-top: 1px solid rgba(236, 232, 241, 1);
    border-bottom: 1px solid rgba(236, 232, 241, 1);
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 13px;
}

.couponVisitorShowOffcanvas .coupon-meta-item{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(18, 17, 38, 1);
    svg{
        height: 10px;
    }
    display: flex;
    gap: 4.5px;
    align-items: center;
}

.couponVisitorShowOffcanvas .coupon-quantity-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    .coupon-quantity-label{
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0px;
        color: rgba(18, 17, 38, 1);
    }
}

.couponVisitorShowOffcanvas .coupon-select-wrapper{
    select{
        width: 105px;
        height: 36px;
        text-align: center;
        font-family: var(--font-body);
        border-radius: 7px;
        color: rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(236, 232, 241, 1);
    }
}

.couponVisitorShowOffcanvas .coupon-calc-box{
    background-color: rgba(250, 248, 254, 1);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 6px;
    flex-direction: column;
    font-size: 10.5px;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(18, 17, 38, 1);
    .coupon-calc-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            font-family: var(--font-body);
        }
    }
    #calc-total-price, #calc-norm-value{
        font-family: var(--font-body);
        font-weight: 600;
        color: rgba(18, 17, 38, 1);
    }
    .coupon-calc-total-row{
        font-weight: 800;
        font-size: 11.5px;
        color: rgba(164, 74, 0, 1);
        margin-bottom: 5px;
    }
    .calc-total-saved{
        font-weight: 900;
    }
    .coupon-calc-row:first-child{
        margin-top: 5px;
    }
}

.couponVisitorShowOffcanvas .coupon-cta-button{
    width: 100%;
    background: linear-gradient(90deg, #5A20F4 0%, #6C26FF 100%);
    border-radius: 8px;
    margin-top: 12px;
    margin-bottom: 9px;
    padding: 15px;
    color: rgba(255, 255, 255, 1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
}

.couponVisitorShowOffcanvas .coupon-disclaimer{
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0px;
    text-align: center;
    color: rgba(136, 128, 147, 1);
    display: block;
}

/* coupon visitor list page css end */

/* ======== v2 mockup alignment – shared (ticker, nav, footer) ======== */
/* see docs/v2-home-design-report.md items 1.1, 1.2, 1.3, 10.1, 10.3 */

.topCarousel {
    padding: 11.5px 0;                 /* 1.3: ticker 44px high */
}

#footer ul {
    gap: 8px;                          /* 10.1: 32px link rows */
}

@media (min-width: 992px) {
    #footer-decription .row {
        position: relative;
        justify-content: flex-start !important;   /* payment block stays in the left half */
    }

    #footer-decription .row > .col-lg-6:last-child {
        position: absolute;            /* 10.3: copyright centred on the page */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }
}

/* Login / password pages (inloggen2, wachtwoord-vergeten2, reset-wachtwoord2): every submit button in Barlow Condensed
   Bold, whatever wrapper it sits in; fields, labels and texts stay Inter (client popup typography rule). */
.login-form-area input[type=submit],
.login-form-area .w-button,
.forgotpassMainDiv input[type=submit],
.forgotpassMainDiv .w-button {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.login-form-area .text-field,
.login-form-area .w-input,
.login-form-area label,
.forgotpassMainDiv p,
.forgotpassMainDiv label {
    font-family: var(--font-body);
}

/* =====================================================================
   Button hover (client feedback HOME-05: "when you stand on a button it moves").
   One shared effect for every call-to-action: a small lift, a touch brighter, a soft shadow; a slight press on
   click. Existing colours, backgrounds and box-shadows of the individual buttons are not touched (the shadow is a
   filter, so it stacks on top of them). Anchors that were still inline get inline-block, because transform has no
   effect on inline elements. transform/filter are !important so that no page rule or intro animation (e.g. the
   mobile fadeInUp with fill-mode both) can cancel the movement.
   ===================================================================== */
.homeHeroBtns a,
.btn--warning,
.btn--warning--sm,
.btn---warning---sm,
#header .inloggenBtn,
.upcomngEvTicketBtn,
.upcomingAllEvBtn,
.btn--semi-warning--sm,
.btn-voor,
.cta .btn,
#exampleModalToggle .login-modal-btn,
#registerModal .reg-modal-btn,
#registerModal .reg-vendor-btn,
.testimonial-cta,
#wekart .btn--light--warning--sm,
.btn--2nd--outline--primary,
.subscribe-btn,
.wp-btn,
.mhbtn,
.eventBtnTwo,
.dash-btn,
.dash-btn-sm,
.terug-dashboard-btn,
.menu-bottom .logout-btn {
    transition: transform 0.25s cubic-bezier(0.22, 0.68, 0, 1.2), filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

/* these <a> buttons had no display rule: inline elements cannot be transformed */
a.upcomingAllEvBtn,
a.upcomngEvTicketBtn,
a.eventBtnTwo,
a.btn--semi-warning--sm,
a.wp-btn,
a.mhbtn {
    display: inline-block;
}

/* the hero buttons had `transition: 0.5s` (all): keep their colour fade, make the movement snappy */
.homeHeroBtns a:first-child,
.homeHeroBtns a:last-child {
    transition: transform 0.25s cubic-bezier(0.22, 0.68, 0, 1.2), filter 0.25s ease, background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.homeHeroBtns a:hover,
.btn--warning:hover,
.btn--warning--sm:hover,
.btn---warning---sm:hover,
#header .inloggenBtn:hover,
.upcomngEvTicketBtn:hover,
.upcomingAllEvBtn:hover,
.btn--semi-warning--sm:hover,
.btn-voor:hover,
.cta .btn:hover,
#exampleModalToggle .login-modal-btn:hover,
#registerModal .reg-modal-btn:hover,
#registerModal .reg-vendor-btn:hover,
.testimonial-cta:hover,
#wekart .btn--light--warning--sm:hover,
.btn--2nd--outline--primary:hover,
.subscribe-btn:hover,
.wp-btn:hover,
.mhbtn:hover,
.eventBtnTwo:hover,
.dash-btn:hover,
.dash-btn-sm:hover,
.terug-dashboard-btn:hover,
.menu-bottom .logout-btn:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.05) drop-shadow(0 8px 12px rgba(16, 10, 28, 0.18)) !important;
}

.homeHeroBtns a:focus-visible,
.btn--warning:focus-visible,
.btn--warning--sm:focus-visible,
.btn---warning---sm:focus-visible,
#header .inloggenBtn:focus-visible,
.upcomngEvTicketBtn:focus-visible,
.upcomingAllEvBtn:focus-visible,
.btn--semi-warning--sm:focus-visible,
.btn-voor:focus-visible,
.cta .btn:focus-visible,
#exampleModalToggle .login-modal-btn:focus-visible,
#registerModal .reg-modal-btn:focus-visible,
#registerModal .reg-vendor-btn:focus-visible,
.testimonial-cta:focus-visible,
#wekart .btn--light--warning--sm:focus-visible,
.btn--2nd--outline--primary:focus-visible,
.subscribe-btn:focus-visible,
.wp-btn:focus-visible,
.mhbtn:focus-visible,
.eventBtnTwo:focus-visible,
.dash-btn:focus-visible,
.dash-btn-sm:focus-visible,
.terug-dashboard-btn:focus-visible,
.menu-bottom .logout-btn:focus-visible {
    transform: translateY(-3px) !important;
    filter: brightness(1.05) drop-shadow(0 8px 12px rgba(16, 10, 28, 0.18)) !important;
}

.homeHeroBtns a:active,
.btn--warning:active,
.btn--warning--sm:active,
.btn---warning---sm:active,
#header .inloggenBtn:active,
.upcomngEvTicketBtn:active,
.upcomingAllEvBtn:active,
.btn--semi-warning--sm:active,
.btn-voor:active,
.cta .btn:active,
#exampleModalToggle .login-modal-btn:active,
#registerModal .reg-modal-btn:active,
#registerModal .reg-vendor-btn:active,
.testimonial-cta:active,
#wekart .btn--light--warning--sm:active,
.btn--2nd--outline--primary:active,
.subscribe-btn:active,
.wp-btn:active,
.mhbtn:active,
.eventBtnTwo:active,
.dash-btn:active,
.dash-btn-sm:active,
.terug-dashboard-btn:active,
.menu-bottom .logout-btn:active {
    transform: translateY(-1px) scale(0.99) !important;
    filter: brightness(0.98) !important;
    transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .homeHeroBtns a:hover,
    .btn--warning:hover,
    .btn--warning--sm:hover,
    .btn---warning---sm:hover,
    #header .inloggenBtn:hover,
    .upcomngEvTicketBtn:hover,
    .upcomingAllEvBtn:hover,
    .btn--semi-warning--sm:hover,
    .btn-voor:hover,
    .cta .btn:hover,
    #exampleModalToggle .login-modal-btn:hover,
    #registerModal .reg-modal-btn:hover,
    #registerModal .reg-vendor-btn:hover,
    .testimonial-cta:hover,
    #wekart .btn--light--warning--sm:hover,
    .btn--2nd--outline--primary:hover,
    .subscribe-btn:hover,
    .wp-btn:hover,
    .mhbtn:hover,
    .eventBtnTwo:hover,
    .dash-btn:hover,
    .dash-btn-sm:hover,
    .terug-dashboard-btn:hover,
    .menu-bottom .logout-btn:hover {
        transform: none !important;
    }
}