@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

summary {
    display: list-item;
}

body,
html {
    height: 100%;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    line-height: 1.4;

    -webkit-overflow-scrolling: touch;

    -ms-overflow-style: scrollbar;

    background-color: #ffffff;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background-color: #e7e7e7;
}

body::-webkit-scrollbar-thumb {
    background-color: #9f6300;
    ;

    border: 1px solid #9f6300;

    border-radius: 10px;
}

p {
    font-size: 15px;
    color: #1c1c1c;
    line-height: 1.55;
    margin-bottom: 1rem;
    font-weight: 500;
}

a,
a:hover,
a:focus,
button:hover,
button:focus,
input:focus {
    outline: none !important;
    text-decoration: none !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
}

/*------Parallax Css----------*/
.parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}

.animation {
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes slide-up {
    from {
        opacity: 0;
        top: 100px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

.animation_slide-up {
    animation-name: slide-up;
}

@keyframes slide-down {
    from {
        opacity: 0;
        bottom: 100px;
    }

    to {
        opacity: 1;
        bottom: 0;
    }
}

.animation_slide-down {
    animation-name: slide-down;
}

@keyframes slide-left {
    from {
        opacity: 0;
        left: 100px;
    }

    to {
        opacity: 1;
        left: 0;
    }
}

.animation_slide-left {
    animation-name: slide-left;
}

@keyframes slide-right {
    from {
        opacity: 0;
        right: 100px;
    }

    to {
        opacity: 1;
        right: 0;
    }
}

.animation_slide-right {
    animation-name: slide-right;
}

@keyframes flip-x {
    from {
        opacity: 0;
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    }
}

.animation_flip-x {
    backface-visibility: visible;
    animation-name: flip-x;
}

@keyframes flip-y {
    from {
        opacity: 0;
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px);
    }
}

.animation_flip-y {
    backface-visibility: visible !important;
    animation-name: flip-y;
}

@keyframes zoom {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 1;
    }
}

.animation_zoom {
    animation-name: zoom;
}

/*-----Custome Css Area----*/

.sec_padding {
    padding: 30px 0
}

/*------Main Header--------*/

.main_header {
    position: relative;
    background-color: #fff;
}

.main_header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    /* -webkit-animation: smoothScroll 1s forwards;
animation: smoothScroll 1s forwards; */
    box-shadow: var(--bs-box-shadow) !important;
}

@-webkit-keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

.main_header .navbar-brand {

    margin-top: 0px;
    padding: 0px 10px 0;
    z-index: 0;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    display: flex;
}

.main_header .navbar-brand .logo-2 {
    display: none
}

.main_header.sticky .navbar-brand {
    padding: 5px 10px 0;
    background-color: inherit;
    z-index: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.main_header.sticky .navbar-brand .logo-1 {
    display: none
}

.main_header.sticky .navbar-brand .logo-2 {
    display: block
}

.main_header.sticky .navbar-brand::after {
    display: none;
}

.bg_blue {
    background: #00459E;
}

.topmain_section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0px;
}

.top_left {
    display: flex;
    align-items: center;
}

.top_right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.sell_avamartmain {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
}

.sell_avamartmain img {
    width: auto;
}

.sell_avamartmain p {
    margin: 0px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sell_avamartmain p span {
    color: #FFCC4B;
}

.link_button {
    gap: 20px;
    display: flex;
}

.link_button a {
    color: #00459E;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border-radius: 30px;
    padding: 8px 16px;
}

.google_tral {
    position: relative;
}

/* Default select styling */
.google_tral .form-select {
    width: 100%;
    padding: 12px 45px 12px 15px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 0px;
    background-color: transparent;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    box-shadow: none;
}

.google_tral .form-select:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: none;
}

.google_tral .form-select option {
    color: #000;
}

/* Custom arrow styles */
.google_tral::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
}


/* Arrow Style 4 - Modern Arrow */
.arrow-4::after {
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-70%) rotate(45deg);
}

/* header mid section start */
.header_mid_section {
    display: flex;
    justify-content: space-between;
    padding: 15px 0px;
}

.header_mid_right {
    display: flex;
    justify-content: space-around;
    gap: 40px;
}

.mid_cart_section {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    align-items: center;
}

.mid_cart_section a {
    position: relative;
}

.mid_cart_section a span {
    position: absolute;
    top: -5px;
    right: -14px;
    background: #DC2626;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    padding: 2px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.sign_main {
    display: flex;
    justify-content: space-around;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    background: #F0F0F0;
    border-radius: 32px;
    align-items: center;
}

.sign_main img {
    width: auto;
}

.sign_main p {
    margin: 0px;
    color: #242424;
    font-weight: 600;
    font-size: 14px;
}
.sign_main a{ margin: 0px; color: #242424; font-weight: 600; font-size: 14px;}

.search-container {
    position: relative;
    width: 100%;
    min-width: 624px;
}

.search-wrapper {
    position: relative;
    padding: 1px;
    border-radius: 50px;
    background: linear-gradient(90deg, #2563EA, #0FA4E9, #2563EA, #0FA4E9);
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
    color: #6B7280;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    outline: none;
}

.search-input:focus {
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
}

.search-button-container {
    position: absolute;
    right: 5px;
    top: 7px;
    display: flex;
    gap: 4px;
}

.search-button {
    background: #C6DFFF;
    color: #00459E;
    border: none;
    border-radius: 50px;
    padding: 0px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-toggle {
    background: #F0F0F0;
    color: #4B5563;
    border: none;
    border-radius: 30px;
    padding: 8px 14px 8px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}



.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.button-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    z-index: 1001;
    display: none;
    min-width: 200px;
}

.dropdown-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    color: #00459E;
    font-size: 14px;
    font-weight: 500;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #C6DFFF;
    color: #00459E;
}

.dropdown-item .icon {
    margin-right: 10px;
    color: #7f8c8d;
}

.dropdown-item .text {
    flex: 1;
}

.dropdown-item .category {
    font-size: 0.8rem;
    color: #95a5a6;
    background: #ecf0f1;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.menu_mainsection {
    border-top: solid 1px #E4E7E9;
}


/*---------Home Main Video------*/
#main {
    /*background: linear-gradient(to bottom, 
    #2563EA 0%, 
    #0FA4E9 33%, 
    #ffffff 66%, 
    #eeeeee 100%
  ); */
    background: #eeeeee url(../images/bg/main-bg.png);
    background-repeat: repeat-x;
}


/*---------breadcrumb Area------*/

.breadcrumb_section {
    padding: 15px 0px 0px;
}

.breadcrumb ol {
    margin: 0px;
}

.breadcrumb li {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
}

.breadcrumb li.active {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.breadcrumb li a {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "\F285";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}

/*========breadcrumb End==========*/


/*---------breadcrumb start------*/
.hero_banner {
    margin-bottom: 15px;
    position: relative;
    display: inline-flex;
    width: 100%;
}

.hero_banner img {
    width: 100%;
}

.hero_banner::after {
    content: "";
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

.banner_text {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: inline-grid;
    align-items: center;
    padding: 25px 40px
}

.deals_ai {
    border-radius: 30px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.8);
    display: inline-block;
    font-family: Inter;
    font-weight: 500;
    font-size: 12px;
    color: rgba(0, 69, 158, 1);
}

.banner_title {
    font-family: Inter;
    font-weight: 800;
    font-size: 40px;
    color: rgba(255, 255, 255, 1);
}

.banner_link_button {
    display: flex;
    gap: 8px;
}

.banner_link_button a {
    border-radius: 30px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 69, 158, 1);
}

.banner_link_button a:hover {
    background: rgba(255, 204, 75, 1);
}

.banner_link_button a.active {
    background: rgba(255, 204, 75, 1);
}

/*---------breadcrumb End------*/

/*---------Shop with confidence start------*/

.confidence {
    border: solid 1px #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 28px;
    display: inline-block;
    width: 100%;
    margin-top: 12px;
}

.confidence_title h1 {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
}

.confidence_link {
    display: flex;
    gap: 16px;
    margin: 16px 0px 0px;
}

.confidence_link a {
    border-radius: 30px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 69, 158, 1);
    min-width: 250px;
    text-align: center;
}

.confidence_link a:hover {
    background: rgba(255, 204, 75, 1);
}

.confidence_link a.active {
    background: rgba(255, 204, 75, 1);
}

.view_all {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 24px;
    margin-top: 28px;
}

.view_all a {
    font-family: Inter;
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 69, 158, 1);
}

.view_all a:hover {}

/*---------Shop with confidence End------*/


/*---------Group deals  start------*/
.group_deal_like {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
    border-radius: 12px;
}

.group_deal_like_title {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    color: rgba(36, 36, 36, 1);
    margin-bottom: 24px;
}

.group_deal_like_title span {
    color: #fcc020;
}

.group_deal_like ul {
    column-count: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.group_deal_like li {
    margin-bottom: 20px;
}

.deal_image {
    position: relative;
}

.deal_image img {
    width: 100%;
}

.deal_image span {
    background: rgba(22, 163, 74, 1);
    position: absolute;
    right: 6px;
    top: 6px;
    border-radius: 4px;
    padding: 2px 4px;
    color: rgba(255, 255, 255, 1);
    font-size: 11px;
    font-weight: 600;
}

.group_deal_liketext {
    margin-top: 12px;
}

.group_deal_liketext .group_deal_liketext_title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(36, 36, 36, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group_deal_liketext_rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.group_deal_liketext_rating img {
    width: auto;
}

.group_deal_liketext_rating p {
    color: rgba(75, 85, 99, 1);
    font-size: 12px;
    font-weight: 500;
    margin: 0px;
    line-height: 0px;
}

.group_deal_liketext_off {
    background: rgba(204, 13, 57, 1);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
    position: absolute;
    bottom: 6px;
    left: 6px;
}

.group_deal_liketext .group_deal_liketext_more {
    margin-top: 8px;
}

.group_deal_liketext .group_deal_liketext_more a {
    font-family: Inter;
    font-weight: 500;
    font-size: 12px;
    color: rgba(55, 65, 81, 1);
}

.group_deal_liketext .group_deal_liketext_price {
    font-family: Inter;
    font-weight: 500;
    font-size: 20px;
    margin-top: 8px;
    padding-bottom: 8px;
}

.mt-6 {
    margin-top: 0px !important;
}

.add_boder li {
    border-bottom: solid 4px rgba(233, 234, 235, 1);
    position: relative;
}

.add_boder li::after {
    border-bottom: solid 4px rgba(15, 164, 233, 1);
    position: absolute;
    width: 80%;
    content: "";
}

/*---------Group deals  End------*/

/*---------category start------*/
.category_deal_like {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
    border-radius: 12px;
}

.category_deal_like_title {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    color: rgba(36, 36, 36, 1);
    margin-bottom: 24px;
}

.category_deal_like_title h3 {
    font-family: Inter;
    font-weight: 700;
    font-size: 16px;
    color: rgba(37, 99, 234, 1);
    margin-top: 6px;
}

.category_deal_like_title span {
    color: #fcc020;
}

.category_deal_like ul {
    column-count: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.category_deal_like li {
    margin-bottom: 20px;
}

.mt-32 {
    margin-top: 32px;
}

/*---------category End------*/

/*---------Top deals on Smart Home start------*/

.topdeals_smarthome {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
    border-radius: 12px;
}

.topdeals_smarthome_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topdeals_smarthome_title h2 {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    color: rgba(36, 36, 36, 1);
}

.topdeals_smarthome_title a {
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 69, 158, 1);
}

.topdeals_smarthome ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 15px 0;
    gap: 20px;
    overflow-x: scroll;
}

.topdeals_smarthome li {
    min-width: 187px;
}

/*---------Top deals on Smart Home End------*/

/*---------AVA Deal Day Offer start------*/

.deal_dayoffer_like {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
    border-radius: 12px;
}

.deal_dayoffer_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.deal_dayoffer_title h2 {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    color: rgba(36, 36, 36, 1);
}

.dayoffer_buton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.today_but {
    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: Inter;
    font-weight: 700;
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.today_but span {
    font-weight: 400;
}

.deal_ends {
    background: rgba(204, 13, 57, 1);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: Inter;
    font-weight: 700;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
}

.deal_dayoffer_title_right a {
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 69, 158, 1);
}

.deal_dayoffer_like ul {
    column-count: 4;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.deal_dayoffer_like li {
    margin-bottom: 20px;
    border: 1px solid rgba(221, 221, 221, 1);
    border-radius: 6px;
    padding: 12px;
}

.group_deal_liketext_daydeal {
    background: rgba(253, 230, 138, 1);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(120, 53, 15, 1);
    display: inline-block;
    position: absolute;
    bottom: 6px;
    left: 6px;
}

.group_deal_liketext_offermain {
    display: flex;
    align-items: center;
    gap: 4px;
}

.day_offer {
    background: rgba(204, 13, 57, 1);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
}

.group_deal_liketext_offermain p {
    margin: 0px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(185, 28, 28, 1);
}

.po_inh {
    position: inherit;
    margin-bottom: 6px;
}

.group_deal_liketext_dic {
    font-size: 14px;
    font-weight: 400;
    color: rgba(107, 114, 128, 1);
    margin: 8px 0px;
}

.deal_dayoffer_text {}

.main_price {
    text-decoration: line-through;
    font-size: 14px;
    font-weight: 500;
    color: rgba(75, 85, 99, 1);
}

.group_deal_liketext_dealactive {
    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
    margin-bottom: 6px;
}

.group_deal_liketext_dealactive_bgl {
    background: rgba(234, 243, 255, 1);
    color: rgba(37, 99, 234, 1);
}

.seedetail_main {
    border-top: solid 4px rgba(233, 234, 235, 1);
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 15px 0 0;
    margin-top: 10px;
    border-radius: 1px;
    align-items: center;
}

.seedetail_main::after {
    border-top: solid 4px rgba(15, 164, 233, 1);
    position: absolute;
    width: 80%;
    content: "";
    left: 0;
    top: -4px;
    border-radius: 100px;
}

.join_but {
    background: rgba(0, 69, 158, 1);
    border-radius: 30px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    line-height: 100%;
}

.see_details {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 69, 158, 1);
    line-height: 100%;
}

/*---------AVA Deal Day Offer End------*/

/*---------Almost unlocked near you start------*/
.almost_unlocked_title {
    gap: 8px;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 6px;
    padding-left: 12px;
    background: rgba(254, 243, 199, 1);
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: rgba(120, 53, 15, 1);
}

.almost_unlocked li {
    padding: 0px;
}

.almost_unlocked .group_deal_liketext {
    padding: 0px 12px 12px;
}

.group_deal_liketext_brand_main {
    display: flex;
    gap: 24px;
    margin-top: 6px;
}

.group_deal_liketext_brand_mainl {
    display: flex;
    gap: 4px;
}

.group_deal_liketext_brand_mainl i {
    color: rgba(250, 130, 50, 1);
    font-size: 11px;
}

.group_deal_liketext_brand_mainl p {
    font-size: 11px;
    margin: 0px;
}

.group_deal_liketext_brand_mainr {
    display: flex;
}

.group_deal_liketext_brand_mainr ul {
    margin: 0;
    gap: 24px;
    display: flex;
    list-style: disc;
}

.group_deal_liketext_brand_mainr li {
    font-size: 11px;
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
    border: none;
    margin: 0;
}

.almost_unlocked .group_deal_liketext_price {
    display: flex;
    align-items: center;
    gap: 12px;
}

.now_offer {
    display: flex;
    gap: 4px;
    align-items: center;
}

.now_offerbut {
    background: rgba(234, 243, 255, 1);
    color: #2563EA;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 4px;
}

.now_dis {
    color: rgba(204, 13, 57, 1);
    font-size: 13px;
    font-weight: 700;
}

.group_deal_liketext_bestp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.best_pricebut {
    background: rgba(234, 243, 255, 1);
    color: #2563EA;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 4px;
}

.best_price {
    font-weight: 500;
    font-size: 20px;
}

.save_price {
    font-size: 12px;
    font-weight: 600;
    color: rgba(22, 163, 74, 1);
    margin-top: 6px;
}

.almost_detail {
    display: inherit;
    padding: 12px;
}

.joind_main {
    display: flex;
}

.joinde {
    font-size: 11px;
    font-weight: 500;
    color: rgba(107, 114, 128, 1);
}

.almost_detailright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tagbutt_but {
    display: flex;
    gap: 12px;
}

.tagbutt_but a {
    padding: 2px 10px;
    border-radius: 20px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    font-size: 11px;
    font-weight: 500;
    color: rgba(107, 114, 128, 1);
    margin: 10px 0;
}


/*---------Almost unlocked near you End------*/

/*---------Ending soon start------*/
.ending_title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.end_soontit {
    background: rgba(204, 13, 57, 1);
    color: #fff;
}

/*---------Ending soon End------*/

/*---------Back in stock & Price dropped start------*/

.backin_stock {
    background: rgba(220, 252, 231, 1);
    color: rgba(22, 101, 52, 1);
}

.now_less {
    background: rgba(220, 252, 231, 1);
    color: rgba(22, 101, 52, 1);
}

.restocked {
    color: rgba(107, 114, 128, 1);
    font-size: 11px;
    font-weight: 500;
    margin-top: 6px;
}

/*---------Back in stock & Price dropped End------*/

/*---------Trending near you start------*/

.joind_today {
    background: rgba(36, 36, 36, 1);
    color: rgb(255, 255, 255);
}

.restocked {
    color: rgba(107, 114, 128, 1);
    font-size: 11px;
    font-weight: 500;
    margin-top: 6px;
}

.invited_friends {
    background: rgba(255, 251, 235, 1);
    border: solid 1px rgba(252, 211, 77, 1);
    font-size: 11px;
    font-weight: 500;
    color: rgba(36, 36, 36, 1);
    border-radius: 6px;
    padding: 6px 12px;
    margin-top: 6px;
}

/*---------Trending near you End------*/

/*---------New this week start------*/

.introduced_bg {
    background: rgba(234, 243, 255, 1);
    color: rgba(0, 69, 158, 1);
}

.new_week {
    background: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    padding: 4px 8px;
    margin-top: 6px;
}

/* Custom navigation button positioning */
.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.owl-nav button {
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0px 4px 21.3px 0px rgba(0, 0, 0, 0.07);
    color: rgba(36, 36, 36, 1) !important;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    margin: 0 0px !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: all;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.owl-nav button:hover {
    background-color: #2980b9 !important;
    transform: scale(1.1);
    color: #fff !important;
}

.owl-nav button.owl-prev {
    position: relative;
    left: -65px;
}

.owl-nav button.owl-next {
    position: relative;
    right: -65px;
}

.your_browsing {
    display: flex;
    margin-bottom: 15px;
}

.paganaction .pagination {
    gap: 0;
    padding: 0;
    overflow-x: inherit;
}

.paganaction .pagination li {
    min-width: inherit;
}

.paganaction .pagination li a {
    font-size: 14px;
    font-weight: 500;
    color: rgba(36, 36, 36, 1);
}

.view_edit {
    font-size: 14px;
    color: rgba(0, 69, 158, 1);
    font-weight: 600;
    margin-left: 10px;
}

/*---------New this week End------*/


/*---------Trust-section start------*/
.trust-section {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
}

.trust-section .subtitle {
    font-size: 15px;
    color: #555;
    text-align: start;
}

/* Card box design */

.trust-card {
    border-radius: 18px;
    padding: 50px 25px;
    background-image:
        linear-gradient(white, white),
        linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    text-align: center;
    height: 100%;
    transition: 0.3s ease;
}

/* Hover effect (subtle like original) */
.trust-card:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

/* Icon styling */
.trust-icon {
    width: 85px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Title + text */
.trust-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

.trust-text {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* Responsive fix for small phones */
@media (max-width: 576px) {
    .trust-card {
        padding: 30px 20px;
    }

    .trust-icon {
        width: 70px;
    }
}

/*---------Trust-section End------*/
/* Group Deals Start  */
.group-deals {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 40px;
}

.active-indicator {
    position: absolute;
    right: -14px;
    /* Adjust this to align with the gray vertical line */
    top: 0;
    /* Starting position */
    width: 4px;
    height: 0;
    /* Will be set by JS, or set a fixed height like 80px */
    background-color: #2563EA;
    border-radius: 4px;
    transition: top 0.3s ease, height 0.3s ease;
    z-index: 6;
}

.group-deals h2 {
    font-size: 32px;
    font-weight: 700;
}

.steps-container {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    position: relative;
}

.group-deals .box-main {
    padding-bottom: 10px;
}

.steps-icons {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 8px;
    position: relative;
}

.steps-content::-webkit-scrollbar {
    display: none;
}

.step-icon {
    width: 110px;
    height: auto;
    cursor: pointer;
    transition: 0.3s ease;
    border-radius: 12px;
    padding: 5px;
}

.step-icon img {
    width: 100%;
}

.step-icon.active {
    filter: drop-shadow(5px 5px 5px #81d1ffad);
}

/* vertical line */
.vertical-line {
    left: 125px;
    /* Adjust this to align with the gray vertical line */
    top: 0;
    /* Starting position */
    width: 4px;
    height: 100%;
    background: #e5e5e5;
    margin-right: 15px;
    margin-left: -5px;
    position: absolute;
    /* Ensures it stays behind if needed */
}

/* CONTENT */
.steps-content h4 {
    font-size: 20px;
    color: #2563EA;
    font-weight: 700;
}

.step-number {
    background-image: linear-gradient(90deg, #2563EA 0%, #0FA4E9 100%);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 14px;
}

.step-item {
    animation: fade 0.35s ease;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* RIGHT IMAGE */
.right-illustration {
    max-width: 100%;
}

/* ---- MOBILE RESPONSIVE ---- */

@media(max-width: 576px) {

    .steps-container {
        flex-direction: column;
        gap: 20px;
    }

    .steps-icons {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        gap: 18px;
    }

    .vertical-line {
        display: none;
    }
}

/* LEFT SIDE SCROLLBAR */
.steps-content {
    max-height: 550px;
    overflow-y: auto;
    padding-left: 14px;
    /* Space for left scrollbar */
    direction: ltr;
    /* Flips scrollbar to the left */
}

.steps-content>* {
    direction: ltr;
    /* Keeps text direction normal */
}

/* Scrollbar styling */
.steps-content::-webkit-scrollbar {
    width: 4px;
}

.steps-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.steps-content::-webkit-scrollbar-thumb {
    background: #2563EA;
    border-radius: 10px;
}

.steps-content::-webkit-scrollbar-thumb:hover {
    background: #0F55D8;
}

/* Mobile */
@media(max-width: 576px) {
    .steps-content {
        max-height: 250px;
    }
}

/* Learn More Line */
.gd-learn-text {
    font-size: 14px;
    color: #333;
}

.gd-faq-link {
    font-size: 15px;
    font-weight: 600;
    color: #00459E;
    text-decoration: none;
}

/* Price Safety Promise Box */
.gd-promise-box {
    background: #F1FFF7;
    border: 1px solid #B9F2D1;
    border-radius: 8px;
    padding: 12px 14px;
}

/* Icon */
.gd-promise-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Text */
.gd-promise-text {
    font-size: 15px;
    color: #555555;
    line-height: 1.4;
}

.gd-promise-title {
    color: #15803D;
}

/* Group Deals End */
/* Cities Section Start  */
.city-section {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 40px;
}

.city-title {
    font-size: 32px;
    font-weight: 700;
    color: #242424;
}

/* Pills */
.city-pill {
    background: #ffffff;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 16px;
    color: #4B5563;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: inline-block;
    cursor: pointer;
    transition: 0.2s ease;
}

.city-pill:hover {
    transform: translateY(-2px);
}

/* See all link */
.see-all-link {
    font-size: 16px;
    font-weight: 700;
    color: #00459E;
    text-decoration: none;
}

.see-all-link:hover {
    text-decoration: underline;
}

/* Divider */
.city-divider {
    margin-top: 20px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .city-pill {
        font-size: 14px;
        padding: 8px 18px;
    }
}

/* Cities Section End */

/* Faq Section Start  */
.faq-section {
    margin: auto;
    background: white;
    padding: 40px 0 80px 0;
}

.faq-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

/* Styling for the category buttons (pills) */
.category-btn {
    background-color: #f0f2f5;
    color: #333;
    border: 1px solid transparent;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.category-btn:hover {
    background-color: #e0e2e5;
    color: #333;
}

.category-btn.active-filter {
    background-color: #000;
    color: white;
}

/* Search input styling */
.search-input-group {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    transition: box-shadow 0.2s;
}

.search-input-group:focus-within {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    border-color: #000;
}

.search-input-group input {
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    padding-right: 0.5rem;
    height: 50px;
}

/* Accordion custom styling */
.accordion-item {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #e0e2e5;
}

.accordion-button {
    font-weight: 600;
    background-color: transparent;
    color: #1f2937;
    padding: 1.5rem 0;
    box-shadow: none !important;
    position: relative;
}

.accordion-button:not(.collapsed) {
    color: #111827;
    background-color: transparent;
}

/* Hide default Bootstrap arrow icon */
.accordion-button:after {
    display: none;
}

/* Custom icon container (uses flex layout to align icon) */
.accordion-button-icon {
    font-size: 1.5rem;
    color: #A4A7AE;
    /* Applied custom color */
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}

.accordion-body {
    padding-bottom: 1.5rem;
    padding-top: 0;
    color: #6b7280;
}

/* --- Custom Styles for Tip and Disclaimer --- */

/* Tip Box Styling (Light Green with Green Left Border) */
.tip-box {
    background-color: #F0FDF4;
    /* Very light green */
    border-left: 5px solid #22C55E;
    /* Solid green border on left */
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.tip-box strong {
    color: #555555;
    /* Matching green for the title */
    font-weight: 700;
}

/* Disclaimer Box Styling (Light Gray with Border) */
.disclaimer-box {
    background-color: #EAF3FF;
    /* Light gray background */
    border-left: 5px solid #7CB5FF;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Faq Section End */

/*-------footer Area-------*/
.footer_section {
    display: inline-block;
    width: 100%;
}

.footer_bg {
    background: #F3F4F6;
    padding-bottom: 0px;
}

.footer_mainsection {
    padding: 40px 0%;
}

.footer_logo {
    margin-bottom: 15px;
}

.footer_contact h4 {
    font-size: 12px;
    font-weight: 700;
    color: #4B5563;
    margin-bottom: 10px;
}

.footer_contact p {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 10px;
}

.footer_contact p a {
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
}

.footer_contact h5 {
    font-size: 14px;
    font-weight: 500;
    color: #4B5563;
    margin-bottom: 10px;
    margin-top: 20px;
}

.follow_us {
    display: flex;
    gap: 15px;
}

.follow_us a {}

.follow_us a:hover img {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1) contrast(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer_about h4 {
    font-size: 16px;
    font-weight: 700;
    color: #239F8E;
    margin-bottom: 10px;
}

.footer_about ul {
    list-style: none;
    padding: 0;
}

.footer_about li {}

.footer_about li a {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s ease-in-out;
}

.footer_about li a:hover {
    color: #239F8E;
    padding-left: 2px;
}

.footer_quicklink h4 {
    font-size: 16px;
    font-weight: 700;
    color: #239F8E;
    margin-bottom: 10px;
}

.footer_quicklink ul {
    list-style: none;
    padding: 0;
}

.footer_quicklink li {}

.footer_quicklink li a {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s ease-in-out;
}

.footer_quicklink li a:hover {
    color: #239F8E;
    padding-left: 2px;
}

.boder_lefq {
    padding-left: 15px;
    border-left: solid 1px #d4d0d0;
}

.partner li a {
    color: #00379C;
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s ease-in-out;
    border: solid 1px #00379C;
    border-radius: 6px;
    padding: 5px 10px;
}


.footer_soluction h4 {
    font-size: 16px;
    font-weight: 700;
    color: #239F8E;
    margin-bottom: 10px;
}

.footer_soluction ul {
    list-style: none;
    padding: 0;
}

.footer_soluction li {}

.footer_soluction li a {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s ease-in-out;
}

.footer_soluction li a:hover {
    color: #239F8E;
    padding-left: 2px;
}

.footer_community h4 {
    font-size: 16px;
    font-weight: 700;
    color: #239F8E;
    margin-bottom: 10px;
}

.footer_community ul {
    list-style: none;
    padding: 0;
}

.footer_community li {}

.footer_community li a {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s ease-in-out;
}

.footer_community li a:hover {
    color: #239F8E;
    padding-left: 2px;
}

.footer_community li a span {
    font-size: 11px;
    font-weight: 500;
    background: #E2FFFB;
    color: #239F8E;
    border: solid 1px #239F8E;
    border-radius: 15px;
    padding: 1px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang_but {
    text-align: center;
    margin-bottom: 45px;
}

.lang_but img {
    width: auto;
    display: inline-block;
}

.copy_main {
    background: #0B1E48;
    padding: 16px 0;
}

.copy_mainse {
    display: flex;
    justify-content: space-between;
}

.copy_left {
    display: flex;
    gap: 20px;
}

.copy_left p {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0px;
}

.copy_right {
    gap: 15px;
    display: flex;
}

.copy_right a {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}

.copy_right a:hover {
    color: #239F8E;
}

/*-------Testimonial Sec------*/


/*-------Request Form Area----------*/

/*-----Srory Area--------*/

.myscroll {
    position: absolute;
    bottom: 128px;
    right: -50px;
}

.spin-1 {
    animation: spin1 6s linear infinite;
}

.spin-2 {
    animation: spin2 3s ease-in-out infinite;
}

.spin-3 {
    animation: spin3 1.5s linear infinite;
}

.spin-4 {
    animation: spin4 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulse {
    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(125px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(125px) rotate(-360deg);
    }
}

@keyframes spin1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}


/*========Scroll Top======*/

.scrollToTop {
    width: 34px;
    height: 34px;
    border-radius: 25px;
    text-align: center;
    font-weight: bold;
    background: #fff;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 0;
    z-index: 33;
    display: none;
}


/* Products Section Start */
.product_page {
    background: #ffffff !important;
    background-repeat: repeat-x;
}

.product_page .breadcrumb li.active {
    font-size: 12px;
    font-weight: 500;
    color: #00459E;
    cursor: pointer;
}

.product_page .breadcrumb li {
    font-size: 12px;
    font-weight: 500;
    color: #464646;
}

.product_page .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "\F285";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #464646;
}

/* Common Theme Colors */





/* Common Theme Colors */
:root {
    --primary-blue: #004d99;
    /* Deep Blue for buttons/accents */
    --success-green: #16A34A;
    /* Best Price badge */
    --warning-yellow: #ffc107;
    /* Star rating, Invite chip highlight */
    --danger-red: #dc3545;
    /* Timer background */
    --flash-orange: #f7931e;
    /* Flash Deal color */
    --border-light: #dee2e6;
    --bg-light: #f8f9fa;
    --pagination-border: #e9ecef;
}


/* --- Grid Structure Classes --- */
.filter-sidebar {
    background-color: #fff;
    padding: 15px;
    min-height: 100vh;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 16px 0;
    transition: width 0.3s ease, margin-left 0.3s ease;
    /* Transition for toggle */
}

.content-area {
    padding: 2rem !important;
    border-top: 1px solid var(--border-light);
    transition: width 0.3s ease;
}

/* Custom CSS to enforce 20%/80% split on large screens (lg) */
@media (min-width: 992px) {
    .filter-sidebar {
        /* Default Desktop: 20% */
        flex: 0 0 auto;
        width: 20%;
    }

    .content-area {
        /* Default Desktop: 80% */
        flex: 0 0 auto;
        width: 80%;
    }

    /* Hide state for desktop */
    .row.filters-hidden .filter-sidebar {
        width: 0;
        padding: 0;
        border-right: none;
        overflow: hidden;
    }

    .row.filters-hidden .content-area {
        width: 100%;
        /* Expands to full width when filters are hidden */
    }
}

/* Filter Toggle Button Styling */
.btn-filter-toggle {
    background-color: #fff;
    border: 1px solid var(--border-light);
    border-radius: 50px;
    /* Pill shape */
    padding: 8px 15px;
    font-weight: 600;
}

.btn-sort-map {
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    /* Slightly rounded rect */
    padding: 8px 15px;
    font-weight: 600;
}

.dropdown-sort .dropdown-toggle {
    background-color: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px 15px;
    font-weight: 600;
    color: #000;
    display: flex;
    align-items: center;
}

.dropdown-sort .dropdown-toggle::after {
    margin-left: 0.5rem;
}


/* --- Filter Sidebar Styles (20%) --- */
.filter-badge {
    display: inline-block;
    padding: 5px 12px;
    margin: 5px 5px 5px 0;
    font-size: 0.85rem;
    font-weight: 400;
    border-radius: 50px;
    border: 1px solid var(--border-light);
    background-color: #f1f3f5;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.2;
}

.filter-badge.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.btn-primary-custom,
.btn-outline-custom {
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 30px;
    /* Slightly squared pill shape for top/bottom buttons */
}


.btn-primary-custom {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.btn-outline-custom {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    background-color: transparent;
}

/* Accordion Styling FIXES */
.accordion {
    padding-top: 15px;
}

.accordion-item {
    border: none;
    padding-bottom: 15px;
}

.accordion-item h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #000000;
}

.accordion-button {
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0 10px 0;
    color: #000;
    background-color: #fff;
    border-bottom: 1px solid var(--border-light);
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--border-light);
    /* Ensure line stays for active state */
}

.accordion-button::after {
    filter: brightness(0.5);
    /* Makes the arrow darker gray */
    transform: scale(0.8);
}

.accordion-body {
    /* Ensures the content area still has proper vertical padding when collapsed is active */
    padding: 10px 0 20px 0;
    border-bottom: 1px solid var(--border-light);
}

.accordion-item:last-of-type .accordion-body,
.accordion-item:nth-last-child(2) .accordion-body {
    border-bottom: none;
    /* Removes the last border line */
}

/* --- Main Content Styles (80%) --- */

/* Breadcrumbs */
.breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}

.breadcrumb-item.active {
    font-weight: 600;
    color: #212529;
}

/* Category Pills */
.category-pill {
    display: inline-block;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 0.9rem;
    border-radius: 50px;
    border: 1px solid #dee2e6;
    color: #495057;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.category-pill.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

/* --- CATEGORY SCROLL CONTAINER STYLES --- */
.categories-wrapper {
    position: relative;
    /* Container for positioning the arrow */
    margin-bottom: 1rem;
}

.categories-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    /* padding-bottom: 10px; */
    -ms-overflow-style: none;
    /* Hide scrollbar in IE and Edge */
    scrollbar-width: none;
    /* Hide scrollbar in Firefox */
    cursor: grab;
    /* Cursor cue for dragging */
}

.categories-scroll-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar in Chrome, Safari, Opera */
}

.scroll-button {
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10;
}

/* Product Card Styles */
.product-card {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Product Image Container styling */
.product-image-container {
    background-color: #ffffff;
    position: relative;
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Best Price Badge on Image */
.best-price-badge-image {
    background-color: var(--success-green);
    color: white;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    position: absolute;
    top: 20px;
    left: 10px;
    z-index: 5;
    font-size: 0.85rem;
}

.sold-badge {
    background-color: #343a40;
    color: white;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
}

.group-deal-badge {
    background: linear-gradient(to right, #004d99, #007bff);
    /* Slight gradient to match design */
    color: white;
    font-weight: 600;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1;
}

/* --- PRICE AND ACTION STYLES --- */

.best-blue-pill {
    background-color: var(--primary-blue);
    color: white;
    font-weight: 600;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    align-self: anchor-center;
    line-height: 1.2;
    margin-bottom: 3px;
}

.price-current {
    color: #000;
    font-size: 1.8rem;
    font-weight: 700;
}

.price-save {
    color: var(--success-green);
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 10px;
}

.price-mrp {
    color: #6c757d;
    font-size: 0.9rem;
    text-decoration: line-through;
}

.price-our-price {
    color: #000;
    font-weight: 600;
}

/* Large Circular Heart Button */
.btn-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: #6c757d;
    transition: all 0.2s;
}

.btn-circle i {
    font-size: 1.2rem;
    color: var(--primary-blue);
}

.bi-fire {
    background: linear-gradient(to top, #ff3405, #f19c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Large Pill-shaped Add to Cart Button */
.btn-pill-lg {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--border-light);
    color: var(--primary-blue);
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-pill-lg i {
    font-size: 1.1rem;
}

/* Join Now Button (Standard rectangular, solid blue) */
.btn-join-now {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1rem;
}

/* Demo/Share Link Style (Blue links with icons) */
.action-link {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 10px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
}

.action-link .bi {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* --- GROUP DEAL STATUS STYLES --- */

.deal-status-row {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.deal-timer {
    background-color: var(--danger-red);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.seat-count-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.seat-status-text {
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 0.5rem;
    line-height: 1;
}

.unlocked-text {
    color: var(--success-green);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 5px;
}

.seat-progress-container {
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
    background-color: #e9ecef;
    margin-top: 10px;
}

.seat-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #004d99, #0066cc);
    border-radius: 10px 0 0 10px;
}

/* Custom border/shadow for the progress boxes */
.progress-stat-box {
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    padding: 15px 12px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-stat-box p {
    line-height: 1.2;
}

.progress-stat-box .stat-label {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 400;
    margin-bottom: 5px;
}

.progress-stat-box .stat-value {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    margin-bottom: 0;
}


/* --- INVITE CHIP STYLES FIX --- */
/* Redefining invite-chip styling for closer match */
.invite-chip {
      background-color: #fff9e6;
    border: 1px solid #ffeb99;
    border-radius: 8px;
    color: rgba(134, 77, 15, 1);
    padding: 6px 12px;
    font-size: 0.85rem;
    width: 100%;
    margin: 5px 0 15px;
}

.invite-chip .bi {
    color: #cc8400;
}

.small{font-size: .75em;}

/* FIX: Ensure button wrapping is controlled */
.action-buttons-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 5px;
}

/* --- VENDOR/RATING LINE FIX --- */
.vendor-line {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    /* Reduced space below vendor line */
    font-size: 0.9rem;
}

.vendor-line .vendor-name {
    font-weight: 600;
    color: #495057;
    /* Darker than muted */
    margin-right: 0.25rem;
}

.vendor-line .location {
    color: #6c757d;
    margin-right: 1.25rem;
    /* Spacing before rating starts */
}

.vendor-line .rating-box {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #000;
    margin-left: 0.25rem;
    /* Space between location and rating box */
}

.vendor-line .rating-score {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.vendor-line .rating-count {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.8rem;
}

.product_page .topdeals_smarthome {
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

/* Pagination Styles Start  */
/* --- PAGINATION STYLES --- */
.custom-pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.custom-pagination {
    display: flex;
    border: 1px solid var(--pagination-border);
    border-radius: 8px;
    overflow: hidden;
}

.page-item-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    background-color: #fff;
    border-right: 1px solid var(--pagination-border);
    cursor: pointer;
    transition: background-color 0.2s;
}

.page-item-custom:hover:not(.active):not(.disabled) {
    background-color: var(--bg-light);
}

.page-item-custom.disabled {
    color: #ced4da;
    cursor: not-allowed;
}

.page-item-custom:last-child {
    border-right: none;
}

.page-item-custom.active {
    color: var(--primary-blue);
    font-weight: 700;
    background-color: #fff;
    /* Active background is white in the design */
}

/* Styles for Previous/Next text/icons */
.page-item-custom .bi {
    font-size: 1rem;
    margin: 0 5px;
}

.page-item-custom.previous {
    padding-left: 15px;
    /* Extra padding to match design visual balance */
}

.page-item-custom.next {
    padding-right: 15px;
}

/* Pagination Styles End */

.product_page .accordion-button .accordion-button-icon {
    /* font-size: 1.1rem; */
    color: #A4A7AE;
    /* dark grey */
    margin-left: auto;
    display: inline-block;
    /* required for transform */
    transform: rotate(0deg) scale(0.9);
    transition: transform 0.25s ease-in-out, color 0.2s ease-in-out;
}

/* Rotate icon when accordion is opened */
.product_page .accordion-button:not(.collapsed) .accordion-button-icon {
    transform: rotate(180deg) scale(0.9);
    color: #6c757d;
    /* optional: slightly darker on open */
}

.group_deal_like img {
    max-width: 182px !important;
    max-height: 135px !important;
    object-fit: contain !important;
}

.deal_image img {
    width: 100%;
    max-width: 300px;
    max-height: 220px;
    object-fit: contain;
}

.topdeals_smarthome img {
    max-width: 187px;
    max-height: 138px;
    object-fit: contain;
}

/* Products Section End */
.detail_page {
    background: #ffffff !important;
    background-repeat: repeat-x;
}

.detail_page .breadcrumb li.active {
    font-size: 12px;
    font-weight: 500;
    color: #00459E;
    cursor: pointer;
}

.detail_page .breadcrumb li {
    font-size: 12px;
    font-weight: 500;
    color: #464646;
}

.detail_page .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "\F285";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #464646;
}

/* Detail Page Start*/
/* Utility classes replacement */
.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-white-500 {
    color: #d8d8d8;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-800 {
    color: #1f2937;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mt-4 {
    margin-top: 1rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.p-3 {
    padding: 1rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-gray-1200 {
    background-color: #374151;
}

/* --- Design Fidelity Styles --- */

/* Product Title (matches font size and weight of original) */
.detail_page .product-title {
    font-size: 24px;
    /* Custom size close to H3/H2 for prominence */
    font-weight: 500;
    font-weight: 700;
    line-height: 32px;
    color: #1a1a1a;
    margin-bottom: 12px;
}

/* Rating and Review Count */
.detail_page .rating-stars {
    color: #ff9900;
    /* Yellow-Orange rating color */
    font-size: 1.3rem;
    
}

.detail_page .rating-block {
    line-height: 1.2;
    margin-top: 8px;
}

.rating-number {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.rating-count {
    color: #777;
    font-size: 1rem;
}

/* --- Badge Styling (Top Badges) --- */
.badge-pill-custom {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    /* Fully rounded pill */
    font-size: 12px;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.group-deal-live {
    background: linear-gradient(to right, #2563EA, #0FA4E9);
}

.group-deal-live .dot {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    margin-right: 6px;
}

.joined-today {
    background-color: #212529;
    /* Dark Grey/Black */
}

.best-price {
    background-color: #16A34A;
}

/* --- Price Block Styles --- */
.detail_page .badge-best {
    background-color: #e6f0ff;
    /* Light blue */
    color: #007bff;
    /* Primary blue text */
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    display: inline-block;
    margin-right: 6px;
    transform: translateY(-2px);
}

.detail_page .price-best {
    color: #1a1a1a;
    /* Black/Dark text for primary price */
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.detail_page .price-discount {
    color: #16A34A;
    /* Green for discount text */
    font-weight: 500;
    font-size: 1rem;
    margin-left: 12px;
}

/* Our Price and MRP */
.detail_page .price-our {
    color: #777;
    font-size: 1rem;
    font-weight: 400;
    margin-right: 16px;
    margin-right: 10px;
    border-right: solid 1px rgba(230, 230, 230, 1);
    line-height: 14px;
    padding-right: 10px;
}
.detail_page .price-our strong {color: rgba(36, 36, 36, 1);}

.detail_page .price-mrp {
    color: #777;
    text-decoration: line-through;
    font-size: 1rem;
    font-weight: 400;
}

/* Deal Status Timer */
.detail_page .deal-timer-box {
    background-color: #CC0D39;
    /* Red Timer box */
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
}

/* --- Group Deal Metrics Styles (Card Layout) --- */
.detail_page .deal-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.detail_page .metric-card {
    background: rgba(250, 250, 250, 1);
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #f0f0f0;
}

.detail_page .metric-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    margin-top: 4px;
}

.detail_page .metric-label {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1;
}

/* --- Progress Bar Styles --- */
.progress-bar-container {
    margin-bottom: 20px;
        border-bottom: solid 1px rgba(0, 0, 0, 0.08);
    padding-bottom: 24px;
}

.progress-text {
    display: flex;
    justify-content: start;
    align-items: baseline;
    font-size: 1rem;
    margin-bottom: 6px;
}

.progress-text .joined {
    font-weight: 700;
    color: #1a1a1a;
}

.detail_page .progress-bar-custom {
    height: 8px;
    background-color: #e0e0e0;
    /* Gray track */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.detail_page .progress-bar-custom .progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #2563EA 0%, #0FA4E9 100%);
    /* Blue gradient */
    transition: width 0.4s ease;
    border-radius: 4px;
}

.detail_page .progress-bar-details {
    font-size: 0.85rem;
    margin-top: 8px;
    color: #16A34A;
    /* Green text for "Unlocked" */
    font-weight: 600;
}

.progress-bar-details .unallocated-text {
    color: #6b7280;
    /* Gray text for "Unallocated seats" */
    font-weight: 400;
    margin-left: 5px;
}

/* --- Key Features Pill Styles (Updated Checkmark) --- */
.key-features-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.detail_page .feature-pill-checked {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #FAFAFA;
    border: 1px solid #d4edda;
    /* Light green border */
    border-radius: 20px;
    font-size: 0.875rem;
    color: #1a1a1a;
    margin-right: 8px;
    margin-bottom: 8px;
    font-weight: 500;
}

.detail_page .feature-pill-checked .check-icon {
    margin-right: 6px;
    color: #28a745;
    /* Green checkmark color */
    font-size: 12px;
    line-height: 1;
}

/* --- Action Button Styles --- */
.btn-action-container {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.btn-wishlist {
    background-color: white;
    border: 1px solid #ced4da;
    /* Light gray border */
    color: #00459E;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.1s;
}

.btn-wishlist:hover {
    background-color: #f8f9fa;
    color: #00459E;
}

.btn-add-to-cart {
    border: 1px solid #00459E;
    /* Blue outline border */
    color: #00459E;
    background-color: white;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    flex-grow: 1;
    transition: background-color 0.1s;
}

.btn-add-to-cart:hover {
    background-color: #e6f0ff;
    /* Light blue hover */
}

.btn-join-now {
    background-color: #00459E;
    /* Deep blue background */
    border: 1px solid #00459E;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    flex-grow: 1;
    transition: background-color 0.1s;
}

.btn-join-now:hover {
    background-color: #003366;
    color: #F1FFF7;
}

.detail_page .btn-action-container svg {
    width: 20px;
    height: 20px;
}

/* --- Footer Link Styles --- */
.detail_page .footer-link {
    color: #00459E;
    /* Primary blue for links */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.detail_page .footer-link svg {
    margin-right: 4px;
    width: 16px;
    height: 16px;
}

/* --- Thumbnail Specific Styles --- */
.detail_page .thumbnail-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.detail_page .thumbnail-img.active {
    border-color: #00459E;
    /* Active thumbnail border */
}

.detail_page .thumbnail-video-overlay {
    position: relative;
    cursor: pointer;
    height: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    display: block;
}

.detail_page .thumbnail-video-overlay.active {
    border-color: #007bff;
}

.detail_page .thumbnail-video-overlay .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    pointer-events: none;
}


/* --- Image Section Styling for Side-by-Side Zoom --- */

.detail_page #main-image-container {
    width: 100%;
    height: 620px;
    background-color: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    position: relative;
    cursor: crosshair;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

.detail_page #product-image-small {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.detail_page #lens {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.5);
    pointer-events: none;
    display: none;
    z-index: 2;
}

/* FIX: Adjust zoom-pane positioning. It is absolutely positioned relative to the viewport/document flow. */
.detail_page #zoom-pane {
    position: absolute;
    z-index: 1000;
    top: 0;
    /* 'left' is set by JS now to ensure correct positioning */
    left: 0;
    width: 500px;
    height: 500px;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: none;
}

/* --- Responsiveness: Hide Zoom on Smaller Screens (max-width: lg-991.98px) --- */
@media (max-width: 991.98px) {

    #zoom-pane,
    #lens {
        display: none !important;
    }

    #main-image-container {
        height: 350px;
    }
}

#thumbnail-gallery .play-icon {
    width: 32px;
    height: 32px;
}

.custom-container {
    max-width: 1280px;
    /* Equivalent to max-w-6xl */
    margin: 0 auto;
}

.card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg equivalent */
    border: 1px solid var(--border-light);
}

.text-dark-gray {
    color: #1f2937;
}

/* text-gray-800 */
.text-medium-gray {
    color: #4b5563;
}

/* text-gray-600 */
.text-main-gray {
    color: #374151;
}

/* text-gray-700 */
.text-light-gray {
    color: #6b7280;
}

/* text-gray-500 */
.text-red {
    color: #ef4444;
}

/* text-red-500 */

/* UTILITY CLASSES */
.lh-custom {
    line-height: 1.625;
}

.list-style-disc {
    list-style-type: disc;
}

.ml-dot-5 {
    margin-left: 0.5rem;
}

.fs-custom-6 {
    font-size: 0.75rem;
}

/* text-xs equivalent */
.fs-custom-5 {
    font-size: 0.875rem;
}

/* text-sm equivalent */
.fs-custom-1 {
    font-size: 3rem;
}

/* text-5xl equivalent */
.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.p-4-px {
    padding: 0 1rem;
}

/* TAB NAVIGATION STYLES */
.nav-link-custom {
    padding: 0.75rem 0;
    font-size: 16px;
    font-weight: 600;
    color: #6B7280;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease-in-out;
}

.nav-link-custom:hover {
    color: #00459E;
}

.nav-link-active {
    color: #00459E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #00459E !important;
}

.tab-nav-container {
    overflow-x: auto;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

/* Hide scrollbar */
.tab-nav-container::-webkit-scrollbar {
    display: none;
}

.tab-nav-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* SPECIFICATION TABLE STYLES */
.spec-table {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.spec-row {
    border-bottom: 1px solid #e5e7eb;
}

/* .spec-row:last-child {
            border-bottom: none;
        }
        .spec-row:nth-child(odd) {
            background-color: #f9fafb; 
        } */
.detail_page .spec-row-key {
    background-color: #F3F4F6;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: #242424;
    border-right: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 24px;
    letter-spacing: 0%;
}

.detail_page .spec-row-value {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0%;
    font-weight: 500;
    padding: 0.5rem 1rem;
    color: #242424;
}

@media (max-width: 575.98px) {
    .spec-row-key {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
}

.detail_page .card-shadow h2 {
    font-family: Inter;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #242424;
}

.detail_page .card-shadow p {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #242424;
}

.detail_page .card-shadow ul li {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #242424;
}

/* BOX ITEMS STYLES */
.detail_page .box-item {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: start;
    color: #4B5563;
    background-color: white;
    font-size: 0.875rem;
    font-weight: 500;
    /* Explicitly set for all box items */
}

/* REVIEW SECTION STYLES */
.detail_page .review-bg {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
}
.my_p{padding-left: 45px;}
.mb-40{margin-bottom: 80px;}

.detail_page .star-rating {
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    color: #fbbf24;
}

.star-rating.small {
    font-size: 1.4rem;
}

.detail_page .rating-score {
    font-size: 56px;
    line-height: 56px;
    letter-spacing: 0px;
    font-weight: 500;
    color: #000000;
}

.details-section .rating-count {
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 0px;
    font-weight: 500;
    color: #bbbbbb !important;
}

.star-rating i{font-size: 1.0rem;}

.details-section .cstm-reviews h3 {
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0px;
    font-weight: 700;
    color: #000000;
}

.details-section .cstm-reviews p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    font-weight: 500;
    color: #7E7E7E;
}

.details-section .cstm-reviews .cstm-dates {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    font-weight: 500;
    color: #6B7280;
}

.detail_page .custom-container .progress-bar-fill {
    background-color: #f59e0b;
    height: 5px;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
}

.detail_page .progress-bar-bg {
    background-color: #e5e7eb;
    height: 5px;
    border-radius: 9999px;
}

.comment-area:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.review-img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.detail_page .progress-bar-label {
    width: 10rem;
    color: #000000;
    font-size: 1.125rem;
    white-space: nowrap;
    
}

.detail_page .progress-bar-value {
    width: 2rem;
    text-align: right;
    font-size: 0.875rem;
}

.progress-bar-row {
    /* gap: 0.75rem */
    gap: 0.75rem;
}

.review-meta {
    /* gap: 1rem */
    gap: 1rem;
}
.rate_product{font-family: Inter;  font-weight: 700;line-height: 24px;   letter-spacing: 0px;   color: #242424;font-size: 1.5rem;   display: block;  margin-bottom: 20px;}
  .rating {
                border: none;
                float: left;
            }
            
            .rating > input {
                display: none;
            }
            
            .rating > label {
                float: right;
                color: #ddd;
                cursor: pointer;
            }
            
            .rating > label:before {
                content: "\f005";
                font-family: FontAwesome;
                font-size: 20px;
                margin: 5px;
                display: inline-block;
            }
            
            .rating > input:checked ~ label,
            .rating:not(:checked) > label:hover,
            .rating:not(:checked) > label:hover ~ label {
                color: #F79426;
            }
            
            .rating > input:checked + label:hover,
            .rating > input:checked ~ label:hover,
            .rating > label:hover ~ input:checked ~ label,
            .rating > input:checked ~ label:hover ~ label {
                color: #FECE31;
            }
            .error{display: block !important; float: left;  width: 100%;margin-bottom: 20px;}

.my_rating{display: block;  }
.my_message{display: block;  }
.my_message textarea{ margin-top: 6px; display: inline-block;}
.my_upload{font-family: Inter; font-weight: 700;line-height: 24px; letter-spacing: 0px; color: #242424; font-size: 0.9rem;  display: block;  margin-bottom: 10px;margin-top: 20px;}
.submit_review{background-color: #00459E; border: 1px solid #00459E;color: white; padding: 10px 20px; border-radius: 30px; font-weight: 600;flex-grow: 1;   transition: background-color 0.1s;margin-bottom: 40px;  margin-top: 20px;}
.submit_review:hover {background-color: #003366;color: #F1FFF7;}

/* RESPONSIVE STYLES */
@media (min-width: 640px) {
    .p-body {
        padding: 2rem;
    }

    .nav-links-p {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.detail_page .policies-section ol {
    color: #242424;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.detail_page .policies-section p {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

/* Detail Page End */

:root {
    /* Reverting colors back to earlier, less strict definitions */
    --cb-blue: #00459E;
    --cb-yellow: #FCC020;
    --cb-black: #242424;
    --cb-grey: #555;
}

.cb-believe-section {
    background-color: var(--cb-blue);
    font-family: 'Inter', sans-serif;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- SECTION TITLE --- */
.cb-section-title {
    position: absolute;
    top: 60px; /* Reverting to fixed pixel value */
    right: 15px;
    font-size: 64px;
    font-weight: 800;
    color: var(--cb-yellow);
    margin: 0;
    line-height: 1;
    z-index: 10;
    text-align: right;
    letter-spacing: -1px;
}

/* --- LAYOUT & STICKY LOGIC (Reverting dimensions slightly) --- */
.cb-sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.cb-content-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding-top: 60px;
}

.cb-image-block {
    width: 60%; /* Reverted to 60% */
    height: 70vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cb-img-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* --- IMAGE PAN ANIMATION (RETAINED) --- */
.cb-img-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* Starting State: Zoomed In (1.2) */
    transform: scale(1.2);
    transform-origin: left;
    
    /* Smooth Transition for the Pan Effect */
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cb-img-layer.active {
    opacity: 1;
    z-index: 2;
}

.cb-img-layer.active img {
    /* End State: Zooms out to normal size (1) */
    transform: scale(1);
    transform-origin: left;
}

/* Specific Pan Logic for other slides (retained for full effect) */
.cb-img-layer[data-index="0"].active img,
.cb-img-layer[data-index="2"].active img,
.cb-img-layer[data-index="3"].active img {
    transform-origin: right;
}

/* --- CARD BLOCK (Reverted Padding and Margins) --- */
.cb-card-block {
    width: 40%; /* Reverted to 40% */
    position: relative;
    z-index: 20;
    margin-left: -100px; /* Less aggressive overlap */
    padding-right: 0;
}

.cb-white-box {
    background: white;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    padding: 80px 60px; /* Standard padding */
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card Header (Static) */
.cb-static-headline {
    font-size: 32px;
    font-weight: 800;
    color: var(--cb-black);
    line-height: 1.2;
    margin-bottom: 40px;
    text-align: left;
    letter-spacing: normal;
}

/* Dynamic Content */


.cb-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.cb-number { font-size: 40px; font-weight: 800; color: #00459E; }
.cb-item-title { font-size: 24px; font-weight: 700; color: var(--cb-black); margin: 0; }
.cb-item-body p { font-size: 16px; color: var(--cb-grey); line-height: 1.6; margin: 0; padding-left: 0; }


/* --- MOBILE STYLES (Retained functionality but simplified aesthetics) --- */
@media (max-width: 991px) {
    /* ... mobile stacking logic remains ... */
    .cb-card-block {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .cb-image-block {
        width: 100%;
        height: 300px;
        margin-bottom: -30px; 
    }
}

/* Cart Page Start  */

.cart_page {
    background: #ffffff !important;
}
/* --- Base Colors from Palette --- */
:root {
    --primary-color: #1245B1;   /* Dark Blue (Links, active elements) */
    --secondary-color: #28917A; /* Teal/Green (Success text, savings) */
    --third-color: #FDBB2D;     /* Yellow/Gold (Primary action button) */
    --flipkart-bg-grey: #f1f2f4; /* Light background for the overall page */
    --flipkart-border-grey: #e0e0e0;
    --primary-light-border: #80a7e8; /* Lighter border for active tabs */
}

/* --- General Scoping and Background --- */
.cart_page {
    /* background-color: var(--flipkart-bg-grey) !important;
    font-family: Arial, sans-serif; */
}

/* .cart_page .container {
    max-width: 1200px;
} */

/* --- Cards and Header --- */
.cart_page .cart-header-tabs {
    border-radius: 2px 2px 0 0;
    /* Removed extra border-bottom to let the active tab stand out */
}

.cart_page .cart-header-tabs .tab-item {
    padding-bottom: 8px;
    cursor: pointer;
    font-size: 1.1rem;
}

.cart_page .cart-header-tabs .tab-item.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    font-weight: 500;
}

.cart_page .delivery-card,
.cart_page .cart-item-card,
.cart_page .saved-for-later-card,
.cart_page .price-details-card {
    border: 1px solid var(--flipkart-border-grey);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); /* Soft shadow for depth */
    border-radius: 2px;
}

/* --- Item Details --- */
.cart_page .product-thumb {
    width: 80px;
    height: 80px;
    object-fit: contain;
    padding: 5px;
    border: 1px solid var(--flipkart-border-grey);
}

.cart_page .text-primary {
    color: var(--primary-color) !important;
}

.cart_page .text-success {
    color: var(--secondary-color) !important; /* Mapped success text to Teal */
}

.cart_page .badge-assured {
    background-color: var(--secondary-color);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* --- Item Actions and Quantity Control --- */
.cart_page .item-actions {
     border-top: 1px solid var(--flipkart-border-grey);
    border-bottom: 1px solid var(--flipkart-border-grey);
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 10px !important;
}
.cart_page .item-actions:last-child{border-bottom:none;}

.cart_page .action-link {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0;
}

.cart_page .qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    font-size: 1rem;
    color: #999;
}

.cart_page .qty-input {
    width: 40px;
    height: 30px;
    border-radius: 0;
    text-align: center;
    border: 1px solid var(--flipkart-border-grey);
}


/* --- PLACE ORDER Button --- */
.cart_page .order-btn {
    /* Using Third Color for the most important CTA */
    background-color: var(--third-color); 
    border-color: var(--third-color);
    color: #333;
    font-weight: bold;
    padding: 12px 60px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

/*.cart_page .order-btn:hover {*/
/*    background-color: #fca000;*/
/*    border-color: #fca000;*/
/*}*/


/* --- Price Details --- */
.cart_page .price-details-card {
    position: sticky;
    top: 20px;
}

.cart_page .small-text {
    font-size: 0.9rem;
}

.cart_page .total-amount {
    font-size: 1.25rem;
}

/* --- Responsiveness (Sticky Footer Adjustment) --- */
@media (max-width: 991.98px) {
    .cart_page .container {
        padding: 0 5px;
    }
    .cart_page .sticky-footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        justify-content: center !important;
    }
}
/* Cart Page End */
/* Checkout Page Start */
.checkout_page {
           background: #ffffff !important;
        }
        /* --- Global Utilities within checkout_page --- */
        .checkout_page .text-blue { color: #2874f0; }
        .checkout_page .bg-blue { background-color: #2874f0; }
        
        .checkout_page .btn-orange {
            background-color: #FDBB2D;
            color: #000000;
            font-weight: 500;
            border-radius: 2px;
            padding: 10px 20px;
            border: none;
            text-transform: uppercase;
            font-size: 14px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
        }
        .checkout_page .btn-orange:hover { background-color: #FDBB2D; color: white; }
        .checkout_page .cursor-pointer { cursor: pointer; }
        
        /* --- Steps Layout --- */
        .checkout_page .step-section {
            /*background: white;*/
            /*box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);*/
            /*margin-bottom: 16px;*/
        }
        .add_address{margin-top: 15px;}
        
        /* --- UPDATED STEP NUMBER STYLING --- */
        .checkout_page .checkout-number {
            width: 24px;       /* Precise fixed width */
            height: 24px;      /* Precise fixed height */
            background-color: #fff; /* Default Grey Background */
            color: #2874f0;    /* Default Blue Text */
            font-size: 13px;   /* Sharper font size */
            font-weight: 600;  /* Bolder font */
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px; /* Exact spacing from text */
            flex-shrink: 0;    /* Prevents squeezing */
        }

        /* Active Step Override (The Blue Box) */
        .checkout_page .step-active .checkout-number {
            background-color: #2874f0;
            color: #ffffff;
        }

        /* Login Step (Completed) */
        .checkout_page .login-step {
            padding: 15px 24px;
    background-color: #f0f7ff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgb(198 223 255);
    margin-bottom: 15px;
        }
        .checkout_page .login-info { margin-bottom: 0; font-weight: 500; color: #212121; }
        .checkout_page .login-phone { margin-left: 10px; font-weight: 500; }
        
        /* Delivery Step (Active) */
        .checkout_page .delivery-header {
            background-color: var(--fk-blue);
            padding: 16px 24px;
            color: white;
            display: flex;
            align-items: center;
        }
        /* Ensure the active step number inside the blue header looks correct (Blue on Blue edge case handling) */
        .checkout_page .delivery-header .step-number {
             background-color: white;
             color: #2874f0;
        }

        .checkout_page .delivery-title { font-weight: 500; font-size: 16px; margin: 0; color: #ffffff; }

        /* Address List Items */
        .checkout_page .address-item {
          padding: 15px 24px;
    background-color: #f0f7ff;
    border-radius: 2px;
    /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); */
    box-shadow: 0 1px 1px 0 rgb(198 223 255);
    margin-bottom: 15px;
            transition: background 0.2s;
        }
        .checkout_page .address-item.selected {
            background-color: #fbfbfb;
        }
        .checkout_page .address-label {
            display: flex;
            align-items: flex-start;
            cursor: pointer;
            width: 100%;
        }
        .checkout_page .address-radio {
            margin-top: 5px;
            margin-right: 15px;
            accent-color: #2874f0;
            transform: scale(1.2);
        }
        .checkout_page .name-tag {
            font-weight: 500;
            margin-right: 10px;
        }
        .checkout_page .type-badge {
            background-color: #f0f0f0;
            color: #878787;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 2px;
            text-transform: uppercase;
            font-weight: 500;
        }
        .checkout_page .phone-text { font-weight: 500; margin-left: 10px; }
        .checkout_page .address-text {
            color: #212121;
            font-size: 14px;
            margin-top: 8px;
            line-height: 20px;
            display: block;
        }
        .checkout_page .deliver-btn-container {
            margin-top: 15px;
            display: none; /* Hidden by default */
        }

        /* Other Actions */
        .checkout_page .action-bar {
            /*padding: 16px 24px;*/
            /*background: white;*/
            /*color: rgba(0, 51, 117, 1);*/
            /*font-weight: 500;*/
            /*cursor: pointer;*/
            /*border-top: 1px solid #f0f0f0;*/
            padding: 15px 24px;
    background-color: #f0f7ff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgb(198 223 255);
    margin-bottom: 15px;
        }
        .checkout_page .action-bar:hover { color: #1e5cbd; }

        /* Sidebar - Price Details */
        .checkout_page .price-card {
            background: white;
            border-radius: 2px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
            overflow: hidden;
            position: sticky;
            top: 20px;
        }
        .checkout_page .price-header {
            padding: 13px 24px;
            border-bottom: 1px solid #f0f0f0;
            color: #878787;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 16px;
        }
        .checkout_page .price-body { padding: 0 24px; }
        .checkout_page .price-row {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            font-size: 16px;
            color: #212121;
        }
        .checkout_page .price-total {
            border-top: 1px dashed #e0e0e0;
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 500;
            border-bottom: 1px solid #f0f0f0;
        }
        .checkout_page .savings-msg {
            padding: 12px 24px;
            color: #388e3c;
            font-weight: 500;
            font-size: 14px;
        }
        
        /* Footer/Trust Badge */
        .checkout_page .trust-badge {
            margin-top: 20px;
            display: flex;
            align-items: flex-start;
            color: #878787;
            font-size: 14px;
        }
        .checkout_page .shield-icon { font-size: 24px; margin-right: 10px; color: #878787; }

        /* Responsive Tweaks */
        @media (max-width: 991px) {
            .checkout_page .col-lg-4 { margin-top: 20px; }
        }
/* Checkout Page End */
* Ordersummary Page Start  */
        .ordersummary_page {
            background: #ffffff !important;
        }
        /* CSS Variables scoped or global */
       :root {
            --fk-blue: #2874f0;
            --fk-orange: #fb641b;
            --fk-green: #388e3c;
            --fk-bg: #f1f3f6;
            --fk-text-gray: #878787;
            --fk-border: #f0f0f0;
        }

        .ordersummary_page {
          background: #ffffff !important;
        }

        /* --- Custom Utilities --- */
        .ordersummary_page .bg-white-card {
            background: #fff;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
            border-radius: 2px;
        }

        .ordersummary_page .btn-change {
            border: 1px solid #e0e0e0;
            color: var(--fk-blue);
            font-weight: 500;
            font-size: 14px;
            padding: 5px 16px;
            background: #fff;
            text-transform: uppercase;
            border-radius: 2px;
        }
        
        .ordersummary_page .btn-change:hover {
            color: var(--fk-blue);
            border-color: #e0e0e0;
        }

        /* --- Section Headers --- */
        .ordersummary_page .step-number {
            background-color: #f0f0f0;
            color: #ffffff;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            margin-right: 15px;
            font-size: 12px;
        }
        
        .ordersummary_page .active-step .step-number {
            background-color: var(--fk-blue);
            color: #fff;
        }

        .ordersummary_page .step-title {
            font-weight: 500;
            color: #878787;
            text-transform: uppercase;
            font-size: 12px;
        }
        .ml-5{margin-left:12px;}
        .mt-10{margin-top:28px;}
        .ordersummary_page .active-step .step-title {
            color: #fff;
        }

        .ordersummary_page .section-header-bar {
               padding: 15px 24px;
    background-color: #f0f7ff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgb(198 223 255);
    margin-bottom: 15px;
        }
        
        .ordersummary_page .active-header {
            background-color: var(--fk-blue);
        }

        /* --- Product Card Styles --- */
        .ordersummary_page .product-card {
            border-bottom: 1px solid var(--fk-border);
            padding: 24px 0;
            margin:0 12px 12px;
        }
        
        .ordersummary_page .product-image-container {
            width: 112px;
            height: 112px;
            position: relative;
            margin: 0 auto;
        }
        
        .ordersummary_page .product-image {
            max-width: 112px;
            max-height: 112px;
            display: block;
            margin: 0 auto;
        }

        .ordersummary_page .product-title {
            font-size: 16px;
            color: #212121;
            display: block;
            margin-bottom: 6px;
        }
        
        .ordersummary_page .product-specs {
            color: #878787;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .ordersummary_page .seller-info {
            color: #878787;
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        /* New Verified Badge Style */
        .ordersummary_page .verified-badge {
            background-color: #2874f0;
            color: #ffffff;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 8px;
            border: 1px solid #dcdcdc;
            text-transform: uppercase;
        }

        .ordersummary_page .price-text {
            font-size: 18px;
            font-weight: 600;
            color: #212121;
        }

        .ordersummary_page .original-price {
            color: #878787;
            text-decoration: line-through;
            font-size: 14px;
            margin-left: 8px;
        }

        .ordersummary_page .discount-text {
            color: var(--fk-green);
            font-size: 13px;
            font-weight: 500;
            margin-left: 8px;
        }

        /* --- Quantity Controls --- */
        .ordersummary_page .qty-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid #c2c2c2;
            background: #fff;
            font-size: 16px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .ordersummary_page .qty-input {
            width: 46px;
            height: 28px;
            text-align: center;
            border: 1px solid #c2c2c2;
            margin: 0 5px;
            font-size: 14px;
            font-weight: 500;
        }

        .ordersummary_page .action-link {
            font-weight: 500;
            font-size: 16px;
            color: #212121;
            text-decoration: none;
            text-transform: uppercase;
            margin-left: 25px;
            cursor: pointer;
        }
        
        .ordersummary_page .action-link:hover {
            color: var(--fk-blue);
        }

        /* --- Delivery Section --- */
        .ordersummary_page .delivery-text {
            font-size: 12px;
        }

        /* --- Bottom Sticky Bar --- */
        .ordersummary_page .order-confirm-bar {
            box-shadow: 0 -2px 10px 0 rgba(0,0,0,.1);
            position: sticky;
            bottom: 0;
            background: #fff;
            z-index: 10;
        }

        .ordersummary_page .btn-continue {
            background: #FDBB2D;
            color: #000000;
            border: none;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
            font-size: 16px;
            font-weight: 500;
            padding: 14px 0;
            width: 200px;
            text-transform: uppercase;
            border-radius: 2px;
        }
        
        .ordersummary_page .btn-continue:hover {
            background-color: #FDBB2D;
            color: white;
        }

        /* --- Right Column (Price Details) --- */
        .ordersummary_page .price-header {
            border-bottom: 1px solid #f0f0f0;
            padding: 13px 24px;
        }
        
        .ordersummary_page .price-header span {
            font-size: 16px;
            font-weight: 600;
            color: #878787;
            text-transform: uppercase;
        }

        .ordersummary_page .price-body {
            padding: 0 24px;
        }
        
        .ordersummary_page .price-row {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            font-size: 16px;
        }

        .ordersummary_page .price-row.total {
            border-top: 1px dashed #e0e0e0;
            padding: 20px 0;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 0;
            border-bottom: 1px dashed #e0e0e0;
        }

        .ordersummary_page .savings-row {
            padding: 15px 24px;
            font-size: 16px;
            color: var(--fk-green);
            font-weight: 500;
            border-top: 1px solid #f0f0f0;
        }

        .ordersummary_page .shield-icon {
            width: 25px;
            vertical-align: middle;
            margin-right: 10px;
            color: #878787;
        }

        .ordersummary_page .open-box-badge {
            background: #fff7e1;
            padding: 5px 10px;
            font-size: 12px;
            margin-top: 10px;
            display: inline-block;
            border-radius: 4px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .ordersummary_page .product-image-container {
                margin-bottom: 15px;
            }
            .ordersummary_page .btn-continue {
                width: 100%;
            }
        }

/* Ordersummary Page End */

 :root {
            --fk-blue: #00459E;
            --fk-yellow: #ffc200;
            --fk-yellow-hover: #ffd64a;
            --offer-green: #00459E;
            --light-bg: #f1f3f6;
            --white: #fff;
            --grey-text: #333333;
            --dark-text: #212121;
        }

        /* Utility Color Classes (Simplified) */
        .text-fk-blue { color: var(--fk-blue); }
        .bg-fk-blue { background-color: var(--fk-blue); }
        .text-offer-green { color: var(--offer-green); }
        .bg-offer-green-light { background-color: #e8f5e9; }

        /* --- Custom Button --- */
        .btn-fk-yellow {
            background-color: var(--fk-yellow);
            color: var(--dark-text);
            border: none;
            border-radius: 2px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
            transition: background-color 0.2s, box-shadow 0.2s;
        }
        .btn-fk-yellow:hover {
            background-color: var(--fk-yellow-hover);
            color: var(--dark-text);
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
        }

        /* --- Header Styles --- */
        .header-wrapper {
            background-color: var(--white);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
        }
        .header-content {
            max-width: 100%;
            margin: 0 auto;
            padding: 12px 16px;
        }
        .secure-badge {
            background-color: #C6DFFF;
            border: 1px solid #A1CAFF;
            color: var(--grey-text);
            font-size: 13px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 4px;
        }

        /* --- Layout & Payment Options Container --- */
        .payment-container {
            background-color: #C6DFFF;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
            border-radius: 6px;
            display: flex;
            flex-direction: column; border: solid 1px #A1CAFF;
        }

        /* Sidebar Items (Tabs) */
        

        /* Content Panel Styling */
        .details-col {
            padding: 24px;
            position: relative;
            background-color: #EAF3FF;
        }
        .tab-content-panel {
            display: none; /* Hide all panels by default */
            animation: fadeIn 0.3s ease-in-out;
        }
        .tab-content-panel.active {
            display: block; /* Show the active panel */
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Desktop Layout (md and up) */
        @media (min-width: 768px) {
            
            /* Hide decorative arrows on desktop as layout is stable */
            .details-col i[class*="caret"] {
                display: none;
            }
        }

        /* --- Price Details (Right Column) --- */
        .price-card {
            background-color: var(--white);
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
            position: sticky;
            top: 78px; /* Stick below the header */
        }
        .price-header {
            padding: 16px 24px;
            border-bottom: 1px solid #f0f0f0;
            color: var(--grey-text);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 14px;
        }
        .price-body {
            padding: 24px;
            font-size: 14px;
            color: var(--dark-text);
        }
        .total-row {
            border-top: 1px dashed #e0e0e0;
            margin-top: 16px;
            padding-top: 16px;
            font-weight: 700;
            font-size: 18px;
        }
        .security-footer {
            padding: 16px 24px;
            font-size: 12px;
            color: var(--grey-text);
            border-top: 1px solid #f0f0f0;
        }

        /* Offer Badge Card */
        .offer-badge-card {
            margin-top: 16px;
            padding: 12px;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
        }

        /* --- UPI Help Modal Styling (Simple Overlay) --- */
        .upi-modal-overlay {
            position: absolute; /* Relative to .details-col */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .upi-modal-overlay.show {
            display: flex;
        }
        .upi-modal-content {
            background-color: var(--white);
            padding: 24px;
            border-radius: 8px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            position: relative;
        }
        .app-section {
            margin-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 12px;
        }
        .app-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .app-section ol {
            padding-left: 20px;
            margin-bottom: 0;
            font-size: 14px;
        }
        .app-logo {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            vertical-align: middle;
        }
        .payment_pagemain .nav-tabs{ width: 100%;}
        .payment_pagemain .nav-tabs .nav-link {display: flex; text-align: left; gap: 10px; width: 100%;border-bottom: solid 1px #ddd;
    border-top: solid 1px #ddd; background: #fff; border-radius: 0px;}
    .payment_pagemain .nav-tabs .nav-link p{font-size: 12px; letter-spacing: 0; line-height: 18px; margin: 0;}
    .payment_pagemain .nav-tabs .nav-link .offer-text{font-size: 12px; letter-spacing: 0; line-height: 18px; margin: 0;}
.payment_pagemain .nav-tabs .nav-link:last-child{ border-bottom: none;}
        .payment_pagemain .nav-tabs .active { background-color: #C6DFFF;-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;border: none;}
.cash_page p{font-size: 12px; letter-spacing: 0; line-height: 18px; margin: 0;}
.cash_page .btn-primary{ background: rgba(0, 69, 158, 1); width: 100%; border-color: #00459e; margin-top: 15px;}

.giftcard_page p{font-size: 12px; letter-spacing: 0; line-height: 18px; margin: 0;}
.giftcard_page .btn-primary{ background: rgba(0, 69, 158, 1); width: 100%; border-color: #00459e; margin-top: 15px;}
.giftcard_page .form-label{font-size: 12px; letter-spacing: 0; line-height: 18px;}
.giftcard_page .form-control{font-size: 12px;}
.place_oderpopup .btn-primary{ background: rgba(0, 69, 158, 1);  border-color: #00459e;}

/* orderresponse start */

.orderresponse_main{  
  margin:0px auto;
  background:#fff;
  border-radius:8px;
  border:1px solid #e5e5e5;
}

.order_section{

}

.order_section:last-child{
  border:none;
}

.order_section h2{
  margin:0 0 18px;
  font-size:22px;
  font-weight:700;
}

.delivery-text{
  font-size:14px;
  color:#333;
  margin-bottom:8px;
}

.track-link{
  color:rgba(0, 69, 158, 1);
  font-size:14px;
  text-decoration:none;
  font-weight:600;
}

.track-link:hover{
  text-decoration:underline;
}
.del_left{ padding-left: 20px;}

/* OTP BOX */
.otp-box{
  background:#f6f9ff;
  border:1px solid #dbe4ff;
  border-radius:6px;
  padding:14px 16px;
  margin-top:6px;
}

.otp-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
}

.otp-content{
  font-size:14px;
  line-height:20px;
  color:#444;
}

.note{
  margin-top:6px;
  font-size:13px;
  color:#777;
}


/* Button */
.btn_wrap_continue{
  padding:18px;
  text-align:center;
}

.btn_wrap_continue button{
  width:100%;
  background:rgba(0, 69, 158, 1);
  color:#fff;
  padding:12px 0;
  font-size:15px;
  border-radius:25px;
  border:none;
  cursor:pointer;
  font-weight:600;
}

.btn_wrap_continue button:hover{
  background:#1f4fdb;
}
.btn_wrap_continue a{
  width:100%;
  background:rgba(0, 69, 158, 1);
  color:#fff;
  padding:12px 0;
  font-size:15px;
  border-radius:25px;
  border:none;
  cursor:pointer;
  font-weight:600;
  display: block;
}

.btn_wrap_continue a:hover{
  background:#1f4fdb;
}
.oredr_con_main{ display: flex; justify-content: space-between;  padding:18px 0px 0 20px;  border-bottom:1px solid #e6e6e6; margin-bottom: 18px;}
.oredr_con_right{}
.oredr_con_right img{ width: auto;}

/* Info Card */
.info-card{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:18px;
}

.info-icon{
  width:70px;
  height:40px;
  background:#00459e;
  border-radius:6px 6px 2px 2px;
  position:relative;
}

.info-icon::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #00459e;
}

.info-text{
  flex:1;
}

.info-text h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
}

.info-text .btn-blue{
  background:#00459e;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:9px 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;display:inline-block;
}

.info-text .btn-blue:hover{
  background:#0f5ae6;
}

/* Address Card */
.address-card{
  margin-top:15px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:18px 20px;
}

.address-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.address-header h2{
  margin:0;
  font-size:18px;
}

.change-btn{
  border:1px solid #ccd6ff;
  background:#eef2ff;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:#00459e;
}

.address{
  margin-top:10px;
  line-height:22px;
  font-size:14px;
}

.address strong{
  font-weight:700;
}

.link{
  margin-top:6px;
  display:inline-block;
  color:#00459e;
  font-size:14px;
  text-decoration:none;
}

.link:hover{
  text-decoration:underline;
}

/*My Profile Details page start*/

.account-wrap{
    background:#fff;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
}
.account-sidebar{
    background:rgba(198, 223, 255, 1);
    padding:25px 0;
}
.account-user{
   display: flex;
       justify-content: center;   gap: 20px;
       align-items: center;
}
.account_user_image{
   width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 51, 117, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    overflow: hidden;
    border: solid 2px rgba(0, 51, 117, 1);
    
}
.account_user_text h6{color: rgb(0 69 158);  font-weight: 700;  font-size: 18px;}
.account_user_text p{margin: 0;  padding: 0;color: #000;font-size: 14px;font-weight: 400;}
.profile_order{border-top: solid 1px #A1CAFF; border-bottom: solid 1px #A1CAFF; margin: 15px 0;  padding: 10px 0;}

.profile_menu .nav-link{
   color: rgb(0 69 158);
    border-radius:12px;
    padding:12px 18px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s;
}
.profile_menu .nav-link.active,
.profile_menu .nav-link:hover{
   background: rgba(124, 181, 255, 1);
    border-color: rgba(124, 181, 255, 1);
    color:#fff;
}
/*.account-content{*/
/*    padding:35px;*/
/*}*/
/*.card-ui{*/
/*    border:0;*/
/*    border-radius:18px;*/
/*    box-shadow:0 10px 30px rgba(0,0,0,.06);*/
/*}*/
/*.address-card{*/
/*    border:1px solid #eee;*/
/*    border-radius:16px;*/
/*    padding:18px;*/
/*    background:#fafafa;*/
/*    margin-bottom:18px;*/
/*    transition:.3s;*/
/*}*/
/*.address-card:hover{*/
/*    transform:translateY(-3px);*/
/*    box-shadow:0 12px 25px rgba(0,0,0,.08);*/
/*}*/
/*.form-control{*/
/*    border-radius:12px;*/
/*}*/

 .info-section {
            padding: 
            0px;
        }
        
        .info-group {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid #eef1f5;
        }
        
        .info-group:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            color: #3498db;
        }
        
        .info-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;
            align-items: center;
        }
        
        .info-label {
            width: 180px;
            font-weight: 600;
            color: #555;
            font-size: 0.95rem;
        }
        
        .info-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .info-text {
            font-size: 1.05rem;
            color: #333;
        }
        
        .edit-btn {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .edit-btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(52, 152, 219, 0.2);
        }
        
        .edit-btn i {
            font-size: 0.8rem;
        }
        
        .gender-options {
            display: flex;
            gap: 20px;
            margin-top: 5px;
        }
        
        .gender-option {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .gender-option input[type="radio"] {
            margin-right: 8px;
            accent-color: #3498db;
        }
        
        /* Form Edit Styles */
        .edit-form {
            display: none;
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 20px;
            margin-top: 15px;
            border: 1px solid #e2e8f0;
        }
        
        .edit-form.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
            color: #2c3e50;
            font-size: 0.95rem;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #d1d9e6;
            border-radius: 6px;
            font-size: 1rem;
            transition: border 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .name-row {
            display: flex;
            gap: 15px;
        }
        
        .name-row .form-group {
            flex: 1;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            justify-content: flex-end;
        }
        
        .save-btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .save-btn:hover {
            background-color: #27ae60;
        }
        
        .cancel-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cancel-btn:hover {
            background-color: #c0392b;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        
        @media (max-width: 768px) {
            .info-row {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .info-label {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .info-content {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .edit-btn {
                margin-top: 10px;
            }
            
            .name-row {
                flex-direction: column;
                gap: 0;
            }
            
        }
        
/*manage address start*/
         
        .manage-address {
            margin-bottom: 30px;
        }
        
        .address-title {
            padding: 25px 30px 15px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .address-title-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .address-title i {
            font-size: 1.5rem;
            color: rgba(20, 98, 199, 1);
            background-color: #f1f5f9;
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .address-title h1 {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            color: #1e293b;
        }
        
        .add-new-address-btn {
            background-color: rgba(0, 69, 158, 1);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        
        .add-new-address-btn:hover {
            background-color: rgba(20, 98, 199, 1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        .address-body {
            padding: 0 30px 30px 30px;
        }
        
        /* Add New Address Form Section (Initially Hidden) */
        .add-address-section {
            background-color: #f8fafc;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            border: 2px solid #e2e8f0;
            display: none;
            animation: slideDown 0.3s ease;
        }
        
        .add-address-section.show {
            display: block;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .add-address-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .add-address-title i {
            color: rgba(0, 69, 158, 1);
        }
        
        /* Address Cards Section */
        .addresses-section {
            margin-top: 10px;
        }
        
        .addresses-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
        }
        
        .address-cards-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
        }
        
        /* Address Card Styles */
        .address-card {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border: 2px solid #e2e8f0;
            position: relative;
        }
        
        .address-card.work {
            border-left: 5px solid #ef4444;
        }
        
        .address-card.home {
            border-left: 5px solid #10b981;
        }
        
        .address-card.other {
            border-left: 5px solid #f59e0b;
        }
        
        .address-type {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .address-type.work {
            color: #ef4444;
        }
        
        .address-type.home {
            color: #10b981;
        }
        
        .address-type.other {
            color: #f59e0b;
        }
        
        .workaddress-header {
            margin-bottom: 15px;
        }
        
        .address-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 5px;
        }
        
        .address-phone {
            color: #64748b;
            font-weight: 500;
            font-size: 1rem;
        }
        
        .address-details {
            color: #475569;
            line-height: 1.7;
            margin-bottom: 20px;
            white-space: pre-line;
        }
        
        .address-actions {
            display: flex;
            gap: 12px;
        }
        
        .btn-edit {
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }
        
        .btn-edit:hover {
            background-color: #5a67d8;
        }
        
        .btn-delete {
            background-color: #ef4444;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }
        
        .btn-delete:hover {
            background-color: #dc2626;
        }
        
        /* Edit Form inside Address Card */
        .address-edit-form {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background-color: #f1f5f9;
            border-radius: 8px;
            border: 2px solid #e2e8f0;
        }
        
        .address-edit-form.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .edit-form-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .edit-form-title i {
            color: rgba(0, 69, 158, 1);
        }
        
        .address-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .form-group-add {
            margin-bottom: 12px;
        }
        
        .form-group-add.full-width {
            grid-column: span 2;
        }
        
        .form-label-add {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
            color: #475569;
            font-size: 0.9rem;
        }
        
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background-color: white;
        }
        
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-actions {
            grid-column: span 2;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 10px;
        }
        
       .btn-saveAdd {
            background-color: rgba(0, 69, 158, 1);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .btn-saveAdd:hover {
            background-color: #5a67d8;
        }
        
        .btn-secondary {
            background-color: #94a3b8;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background-color: #7f8c8d;
        }
        
        .no-addresses {
            text-align: center;
            padding: 40px;
            color: #64748b;
            font-size: 1.1rem;
            background-color: #f8fafc;
            border-radius: 10px;
            border: 2px dashed #cbd5e1;
        }
        
        .no-addresses i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #cbd5e1;
        }
        
        /* Modal for delete confirmation */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            border: 2px solid #e2e8f0;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .modal-message {
            margin-bottom: 25px;
            color: #475569;
            line-height: 1.6;
        }
        
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .btn-cancel {
            background-color: #94a3b8;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 0.95rem;
            cursor: pointer;
        }
        
        .btn-cancel:hover {
            background-color: #7f8c8d;
        }
        
        .btn-confirm-delete {
            background-color: #ef4444;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 0.95rem;
            cursor: pointer;
        }
        
        .btn-confirm-delete:hover {
            background-color: #dc2626;
        }
        
        /* Success notification */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #10b981;
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1001;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .address-form {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .form-actions {
                grid-column: span 1;
                flex-direction: column;
            }
            
            .address-actions {
                flex-direction: column;
                width: 100%;
            }
            
            .btn-edit, .btn-delete {
                width: 100%;
                justify-content: center;
            }
            
            .address-title {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .add-new-address-btn {
                width: 100%;
                justify-content: center;
            }
            
           
        }
        
        
/*Change Password start*/
.password-container {
            /*width: 100%;*/
            /*max-width: 500px;*/
            /*background-color: white;*/
            /*border-radius: 12px;*/
            /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);*/
            /*overflow: hidden;*/
        }
        
        .password-title {
            padding: 25px 30px 10px 30px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .password-title i {
            font-size: 1.5rem;
            color: #667eea;
            background-color: #f1f5f9;
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .password-title h5 {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            color: #1e293b;
        }
        
        .password-body {
            padding: 10px 30px 30px 30px;
        }
        
        .password-alert {
            background-color: #fff3cd;
            color: #856404;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #ffc107;
            margin-bottom: 25px;
            font-size: 0.95rem;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .password-alert i {
            color: #ffc107;
            font-size: 1.1rem;
            margin-top: 2px;
        }
        
        .form-group-updatep {
            margin-bottom: 20px;
            position: relative;
        }
        
        .form-label-updatep {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #475569;
            font-size: 0.95rem;
        }
        
        .password-input-wrapper {
            position: relative;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 45px 14px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: #f8fafc;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }
        
        .toggle-password:hover {
            color: #667eea;
        }
        
        .password-strength {
            margin-top: 8px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .strength-bar {
            height: 4px;
            flex-grow: 1;
            background-color: #e2e8f0;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .strength-fill {
            height: 100%;
            width: 0%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        
        .strength-fill.weak {
            width: 30%;
            background-color: #ef4444;
        }
        
        .strength-fill.fair {
            width: 60%;
            background-color: #f59e0b;
        }
        
        .strength-fill.good {
            width: 80%;
            background-color: #10b981;
        }
        
        .strength-fill.strong {
            width: 100%;
            background-color: #10b981;
        }
        
        .strength-text {
            font-weight: 600;
            min-width: 60px;
        }
        
        .requirements {
            margin-top: 25px;
            padding: 20px;
            background-color: #f1f5f9;
            border-radius: 8px;
            font-size: 0.9rem;
        }
        
        .requirements h6 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #475569;
        }
        
        .requirement-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .requirement-list li {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .requirement-list li i {
            font-size: 0.8rem;
            width: 18px;
        }
        
        .requirement-list li.valid {
            color: rgba(0, 69, 158, 1);
        }
        
        .requirement-list li.invalid {
            color: #94a3b8;
        }
        
        .btn-primary-updatepass {
            background-color: rgba(0, 69, 158, 1);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 16px 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-primary-updatepass:hover {
            background-color: rgba(20, 98, 199, 1);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn-primary-updatepass:active {
            transform: translateY(0);
        }
        
        .btn-primary-updatepass:disabled {
            background-color: #94a3b8;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        @media (max-width: 576px) {
            .password-container {
                border-radius: 10px;
            }
            
            .password-title {
                padding: 20px 20px 5px 20px;
            }
            
        }
       .wishlist_img {padding: 0rem 0rem;}
       
       #toast-container {
        font-family: 'Poppins', sans-serif;
    }
    /* Common Toast Style */
    .toast {
        border-radius: 14px !important;
        padding: 18px 22px !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
        backdrop-filter: blur(6px);
        opacity: 1 !important;
        animation: slideDownFade 0.6s ease forwards;
    }

    /* Title */
    .toast-title {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    /* Message */
    .toast-message {
        font-size: 14px;
        line-height: 1.5;
    }
    .toast {
        position: relative;
        padding-left: 50px !important;
    }
    .toast-success::before {
        content: "\f058"; /* check-circle */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #fff;
    }
    .toast-error::before {
        content: "\f057"; /* times-circle */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #fff;
    }
    /* Close Button */
    .toast-close-button {
        color: #fff !important;
        opacity: 0.8 !important;
        font-size: 16px !important;
    }
    .toast-close-button:hover {
        opacity: 1 !important;
    }
    /* Progress Bar */
    .toast-progress {
        height: 4px !important;
        border-radius: 0 0 12px 12px;
        background: rgba(255,255,255,0.6) !important;
    }
    /* Animation */
    @keyframes slideDownFade {
        from {
            transform: translateY(-25px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .qty-decrease{    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 15px;
    font-weight: 700;}
    .qty-increase{    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 15px;
    font-weight: 700;}
    .security-info span i{font-size: 20px;}