/* =========================
   GOOGLE FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* =========================
   GLOBAL STYLES
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Outfit',sans-serif;
    -webkit-tap-highlight-color:transparent;
}

body{
    background:#dadada;
    overflow-x:hidden;
    color:#111;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select{
    border:none;
    outline:none;
    font-family:inherit;
}

/* =========================
   NAVBAR
========================= */
nav{
    height:100px;
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 20px;
    background:#131921;
    color:#fff;
}

.nav-logo{
    display:flex;
    align-items:center;
    padding:5px 10px;
}

.nav-logo img{
    height:40px;
}

.nav-country,
.nav-lang,
.nav-text,
.nav-cart{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
}

.nav-country{
    color:#c4c4c4;
    font-size:13px;
}

.nav-country h1{
    font-size:14px;
    color:#fff;
}

.nav-text{
    flex-direction:column;
    align-items:flex-start;
    cursor:pointer;
}

.nav-text p{
    font-size:11px;
    color:#ccc;
}

.nav-text h1{
    font-size:13px;
}

.nav-search{
    height:50px;
    flex:1;
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    max-width:700px;
}

.nav-search-category{
    display:flex;
    align-items:center;
    gap:5px;
    padding:10px;
    background:#e6e6e6;
    color:#555;
}

.nav-search-input{
    flex:1;
    padding:12px;
    font-size:14px;
}

.nav-search-icon{
    background:#ffd64f;
    padding:10px 14px;
    cursor:pointer;
}

.nav-search-icon img{
    height:25px;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}

.nav-cart{
    position:relative;
    background:transparent;
    color:#fff;
    cursor:pointer;
}

.cart-count{
    position:absolute;
    top:0;
    right:0;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#ff9900;
    color:#fff;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   NAV BOTTOM SLIDER STYLE
========================= */

.nav-bottom{
    position:sticky;
    top:70px;
    z-index:999;

    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 15px;

    background:#232f3e;
    color:#fff;

    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.nav-bottom::-webkit-scrollbar{
    display:none;
}

/* ITEMS */

.nav-bottom div,
.nav-bottom a{
    flex-shrink:0;

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

    min-width:max-content;

    padding:8px 14px;

    border-radius:4px;

    transition:.3s;
}

/* HOVER */

.nav-bottom a:hover,
.nav-bottom div:hover{
    background:rgba(255,255,255,0.1);
    color:#ff9900;
}

/* Active Today's Deals link */
#nav-todays-deals{
    color:#ff9900;
    font-weight:700;
    border-bottom:2px solid #ff9900;
}

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

@media(max-width:768px){

    .nav-bottom{
        gap:10px;

        padding:10px;

        overflow-x:auto;

        flex-wrap:nowrap;
    }

    .nav-bottom div,
    .nav-bottom a{
        min-width:max-content;

        padding:10px 14px;

        font-size:13px;
    }

}

/* =========================
   SMALL MOBILE NAV BOTTOM
========================= */

@media(max-width:480px){

    .nav-bottom{
        top:60px;

        padding:8px;

        gap:8px;
    }

    .nav-bottom div,
    .nav-bottom a{
        padding:8px 12px;

        font-size:12px;
    }

}


/* =========================
   DARK MODE TOGGLE
========================= */
#dark-mode-btn{
    background:transparent;
    cursor:pointer;
    margin-left:auto;
}

.toggle-switch{
    width:65px;
    height:34px;
    border-radius:50px;
    background:#fff;
    position:relative;
    padding:3px;
    transition:.3s;
}

.toggle-circle{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#111;
    position:absolute;
    right:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

#toggle-text{
    color:#fff;
    font-size:11px;
    font-weight:600;
}

/* Light theme (default) */
body {
  background: #fff;
  color: #111;
}

/* Dark theme */
body.dark-theme {
  background: #111;
  color: #fff;
}

/* =========================
   HEADER SLIDER
========================= */
.header-slider{
    position:relative;
}

.header-slider ul{
    display:flex;
    overflow:hidden;
}

.header-img{
    width:100%;
    mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);
}

.control_prev,
.control_next{
    position:absolute;
    top:40%;
    z-index:2;
    background:rgba(255,255,255,0.5);
    padding:15px;
    font-size:24px;
    cursor:pointer;
}

.control_prev{
    left:0;
}

.control_next{
    right:0;
}

/* =========================
   BOX SECTION
========================= */
.box-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:20px;
}

.box-col{
    background:#fff;
    padding:15px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.box-col h3{
    font-size:18px;
}

.box-col a{
    color:#007185;
    font-size:14px;
}

/* =========================
   PRODUCTS
========================= */
.products-slider,
.products-slider-with-price{
    background:#fff;
    margin:20px;
    padding:20px;
}

.products{
    display:flex;
    gap:15px;
    overflow-x:auto;
    margin-top:15px;
    height:400px;
}

.products::-webkit-scrollbar{
    display:none;
}

.product-card{
    min-width:210px;
    background:#fafafa;
    padding:12px;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.product-img-container{
    height:170px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.product-img-container img{
    width:110px;
    height:150px;
    object-fit:contain;
}

.product-offer{
    margin:10px 0;
}

.product-offer p{
    display:inline-block;
    background:#be0b3b;
    color:#fff;
    padding:2px 6px;
    font-size:12px;
    border-radius:2px;
}

.product-offer span{
    color:#be0b3b;
    font-size:12px;
    font-weight:600;
}

.product-price{
    font-size:13px;
    color:#555;
}

.product-card h4{
    font-size:14px;
    margin-top:6px;
    color:#333;
}

/* =========================
   ADD TO CART BUTTON
========================= */
.add-cart-btn{
    width:100%;
    margin-top:10px;
    padding:10px;
    border-radius:25px;
    background:#ffd814;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.add-cart-btn:hover{
    background:#f7ca00;
}

.add-cart-btn:active{
    transform:scale(.97);
}

/* =========================
   AUTH MODAL
========================= */
.auth-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}

.auth-box{
    width:350px;
    background:#fff;
    padding:30px;
    border-radius:10px;
    position:relative;
    text-align:center;
    animation:popup .3s ease;
}

.auth-box input{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:5px;
}

.auth-box button{
    width:100%;
    padding:12px;
    border-radius:25px;
    background:#ffd814;
    cursor:pointer;
    font-weight:700;
}

.close-btn{
    position:absolute;
    top:10px;
    right:15px;
    font-size:25px;
    cursor:pointer;
}

#show-signup{
    color:#007185;
    font-weight:600;
    cursor:pointer;
}

@keyframes popup{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* =========================
   FOOTER
========================= */
footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
    background:#131921;
    color:#fff;
}

/* =========================
   DARK MODE
========================= */
.dark-theme{
    background:#111;
    color:#fff;
}

.dark-theme .box-col,
.dark-theme .products-slider,
.dark-theme .products-slider-with-price,
.dark-theme .product-card,
.dark-theme .auth-box{
    background:#222;
    color:#fff;
}

.dark-theme .auth-box input{
    background:#333;
    color:#fff;
    border-color:#555;
}

.dark-theme .toggle-switch{
    background:#232f3e;
}

.dark-theme .toggle-circle{
    left:3px;
    right:auto;
}
.dark-theme .product-card h4,
.dark-theme .product-card p{
    color:#ddd;
}

/* =========================
   TABLET RESPONSIVE
========================= */
@media(max-width:1024px){

    .box-row{
        grid-template-columns:repeat(2,1fr);
    }

    .nav-country,
    .nav-lang{
        display:none;
    }

    .nav-search{
        max-width:none;
    }
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media(max-width:768px){

    nav{
        height:auto;
        flex-wrap:wrap;
        padding:12px 15px;
        gap:10px;
    }

    /* Search bar moves below logo and cart on mobile */
    .nav-search{
        order:3;
        width:100%;
        max-width:100%;
        margin-top:4px;
    }

    .nav-text{
        display:none;
    }

    .nav-bottom{
        padding:10px;
        gap:15px;
    }

    .box-row{
        grid-template-columns:1fr;
        margin:10px;
    }

    .products-slider,
    .products-slider-with-price{
        margin:10px;
        padding:15px;
    }

    .product-card{
        min-width:170px;
    }

    .product-img-container img{
        width:90px;
        height:120px;
    }

    .header-img{
        height:220px;
        object-fit:cover;
    }

    footer{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .auth-box{
        width:90%;
        padding:25px;
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media(max-width:480px){

    .nav-logo img{
        height:32px;
    }

    .nav-cart h4,
    #toggle-text{
        display:none;
    }

    .toggle-switch{
        width:50px;
        height:28px;
    }

    .toggle-circle{
        width:22px;
        height:22px;
    }

    .header-img{
        height:160px;
    }

    .product-card{
        min-width:140px;
    }

    .product-img-container img{
        width:75px;
        height:100px;
    }

    .product-card h4{
        font-size:12px;
    }

    .add-cart-btn{
        font-size:12px;
    }

    footer{
        padding:15px;
        font-size:12px;
    }
}

/* ==========================================================================
   SIDEBAR & OVERLAY STYLES
   ========================================================================== */

/* Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar Drawer Container */
.sidebar {
    position: fixed;
    top: 0;
    scroll-behavior: smooth;
    left: -320px;
    width: 320px;
    height: 100vh;
    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.08);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid #f9eacf;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     color: #333333; 
     border-right: 1px solid #FFD700; 
}


.sidebar.active {
    left: 0;
}

/* Sidebar Scrollbar */
.sidebar::-webkit-scrollbar {
    width: 5px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #FFF9F0;
    border-radius: 10px;
}

/* Sidebar Top Header Box */
.sidebar-header-box {
    padding: 25px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Sidebar Logo */
.sidebar-logo {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2px;
}

.logo-orange {
    color: #ff6f2c;
}

.logo-gray {
    color: #7f8c8d;
    font-style: italic;
    font-weight: 300;
    margin-left: 2px;
}

/* Sidebar Search Bar */
.sidebar-search {
    width: 100%;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e8e2d5;
    border-radius: 8px;
    padding: 10px 14px;
    gap: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}

.sidebar-search:focus-within {
    border-color: #ff9900;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.15);
}

.search-icon {
    color: #95a5a6;
    font-size: 14px;
}

#sidebar-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #2c3e50;
    background: transparent;
    font-family: inherit;
}

#sidebar-search-input::placeholder {
    color: #bdc3c7;
}

/* Quick Action Circles */
.sidebar-circles {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 12px;
}

.circle-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #f6ebd5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.circle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.circle-btn:active {
    transform: scale(0.95);
}

.cart-btn i {
    color: #ff6f2c;
}

.gift-btn i {
    color: #ff8a95;
}

.heart-btn i {
    color: #ff9f43;
}

.circle-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff6f2c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fffdfa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Navigation Structure */
.sidebar-nav {
    flex: 1;
    padding: 15px 15px 30px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Accordion Container */
.sidebar-accordion {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #34495e;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}

.accordion-header:hover {
    background: #fdf5e6;
    color: #e67e22;
}

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

.header-icon {
    font-size: 18px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-icon  { color: #8fa0a8; }
.bag-icon   { color: #e67e22; }
.tag-icon   { color: #e67e22; }
.user-icon  { color: #8fa0a8; }
.support-icon { color: #8fa0a8; }

.accordion-chevron {
    font-size: 11px;
    color: #95a5a6;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-open .accordion-chevron {
    transform: rotate(180deg);
}

/* Accordion Content */
.accordion-content {
    max-height: 0;
    overflow-y: scroll;
    scrollbar-width: none;      
  -ms-overflow-style: none;   
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content::-webkit-scrollbar {
    display: none;
}

.accordion-open .accordion-content {
    max-height: 700px;
}
/* Category List */
.category-list {
    list-style: none;
    padding: 6px 0 6px 36px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-list li:hover {
    background: #fdf6e8;
    transform: translateX(4px);
}

.cat-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
}

/* Category Icon Colors */
.bg-blue   { background-color: #e0f2fe; color: #0284c7; }
.bg-pink   { background-color: #fce7f3; color: #db2777; }
.bg-orange { background-color: #ffedd5; color: #ea580c; }
.bg-green  { background-color: #dcfce7; color: #16a34a; }
.bg-yellow { background-color: #fef9c3; color: #ca8a04; }
.bg-red    { background-color: #fee2e2; color: #dc2626; }
.bg-slate  { background-color: #f1f5f9; color: #475569; }

.cat-text {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    transition: color 0.2s ease;
}

.category-list li:hover .cat-text {
    color: #e67e22;
}

/* Submenu Lists */
.submenu-list {
    list-style: none;
    padding: 6px 0 6px 36px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submenu-list li {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.submenu-list li:hover {
    background: #fdf6e8;
    color: #e67e22;
    transform: translateX(4px);
}

/* Standalone Sidebar Link */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #34495e;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.sidebar-link:hover {
    background: #fdf5e6;
    color: #e67e22;
}

/* ==========================================================================
   THEME SWITCHER FOOTER
   ========================================================================== */
.sidebar-footer {
    margin-top: auto;
    padding: 20px 15px;
    border-top: 1px solid #f9eacf;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
}

.theme-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eedec7;
    padding: 6px 8px;
    border-radius: 30px;
    position: relative;
    height: 42px;
}

.theme-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #7f8c8d;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
}

.light-option .icon-sun {
    color: #d48b1b;
    font-size: 15px;
    transition: transform 0.5s ease;
}

.dark-option .circle-radio {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #7f8c8d;
    transition: all 0.3s ease;
}

.sb-toggle-switch {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: #f39c12;
    border-radius: 25px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}


/* Sidebar Light Theme */
body:not(.dark-theme) .sidebar {
  background: linear-gradient(to bottom, #ffffff, #f9f9f9);
  border-right: 1px solid #f9eacf;
  box-shadow: 8px 0 30px rgba(0,0,0,0.08);
  color: #34495e;
  background-color: #FFF9F0;
}
body:not(.dark-theme) .sidebar-nav {
  background-color: #FFF9F0;
  color: #34495e;
}
body:not(.dark-theme) .sidebar-footer {
  border-top: 1px solid #f9eacf;
  background: rgba(255, 255, 255, 0.45);
}

body:not(.dark-theme) .theme-switch-container {
  background: #eedec7;
}

body:not(.dark-theme) .accordion-header {
  color: #34495e;
}
body:not(.dark-theme) .accordion-header:hover {
  background: #fdf5e6;
  color: #e67e22;
}

body:not(.dark-theme) .sidebar-link {
  color: #34495e;
}
body:not(.dark-theme) .sidebar-link:hover {
  background: #fdf5e6;
  color: #e67e22;
}

body:not(.dark-theme) .sidebar-search {
  background: #ffffff;
  border-color: #e8e2d5;
}
body:not(.dark-theme) #sidebar-search-input {
  color: #2c3e50;
}


/* Dark Theme Active */
body.dark-theme .light-option { color: #7f8c8d; opacity: 0.6; }
body.dark-theme .dark-option  { color: #fff; }
body.dark-theme .dark-option .circle-radio {
    border-color: #fff;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
body.dark-theme .sb-toggle-switch {
    transform: translateX(100%);
    background: #f39c12;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}

/* ==========================================================================
   SIDEBAR DARK THEME OVERRIDES
   ========================================================================== */
body.dark-theme .sidebar {
    background: linear-gradient(to bottom, #1b1e23, #111317);
    border-right: 1px solid #23272e;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.4);
}

body.dark-theme .sidebar-footer {
    border-top: 1px solid #23272e;
    background: rgba(0, 0, 0, 0.3);
}

body.dark-theme .theme-switch-container { background: #23272e; }

body.dark-theme .accordion-header { color: #cbd5e1; }
body.dark-theme .accordion-header:hover { background: #22262f; color: #f39c12; }
body.dark-theme .accordion-chevron { color: #7f8c8d; }

body.dark-theme .category-list li:hover { background: #22262f; }
body.dark-theme .cat-text { color: #94a3b8; }
body.dark-theme .category-list li:hover .cat-text { color: #f39c12; }

body.dark-theme .submenu-list li { color: #94a3b8; }
body.dark-theme .submenu-list li:hover { background: #22262f; color: #f39c12; }

body.dark-theme .sidebar-link { color: #cbd5e1; }
body.dark-theme .sidebar-link:hover { background: #22262f; color: #f39c12; }

body.dark-theme .cat-icon.bg-blue   { background-color: rgba(2, 132, 199, 0.15); }
body.dark-theme .cat-icon.bg-pink   { background-color: rgba(219, 39, 119, 0.15); }
body.dark-theme .cat-icon.bg-orange { background-color: rgba(234, 88, 12, 0.15); }
body.dark-theme .cat-icon.bg-green  { background-color: rgba(22, 163, 74, 0.15); }
body.dark-theme .cat-icon.bg-yellow { background-color: rgba(202, 138, 4, 0.15); }
body.dark-theme .cat-icon.bg-red    { background-color: rgba(220, 38, 38, 0.15); }
body.dark-theme .cat-icon.bg-slate  { background-color: rgba(71, 85, 105, 0.15); }

body.dark-theme .circle-btn {
    background: #23272e;
    border-color: #2d3139;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.dark-theme .circle-badge { border-color: #1b1e23; }

body.dark-theme .sidebar-search { background: #23272e; border-color: #2d3139; }
body.dark-theme #sidebar-search-input { color: #e2e8f0; }
body.dark-theme .logo-gray { color: #94a3b8; }
body.dark-theme .home-icon { color: #94a3b8; }

/* =========================
   SEARCH RESULTS GRID
========================= */
.search-page-layout {
    display: flex;
    max-width: 1500px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: calc(100vh - 140px);
}

.search-sidebar {
    width: 220px;
    padding: 20px 16px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    display: none;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 140px;
}

.search-sidebar h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

@media(min-width: 1024px) {
    .search-sidebar {
        display: block;
    }
}

.search-results-container {
    flex: 1;
    padding: 4px 0;
}

/* ---- Search header bar ---- */
.search-header {
    background: #fff;
    padding: 10px 20px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
}
.search-header span {
    font-weight: 600;
    color: #0f1111;
}

/* ---- Products Grid ---- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px 20px;
}

/* ---- Individual Product Card ---- */
.products-grid .product-card {
    min-width: unset;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    cursor: pointer;
}

.products-grid .product-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
    border-color: #c8c8c8;
}

/* ---- Image Area ---- */
.products-grid .product-img-container {
    height: 200px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 0;
}

.products-grid .product-img-container img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.25s ease;
}

.products-grid .product-card:hover .product-img-container img {
    transform: scale(1.05);
}

/* ---- Card Body ---- */
.products-grid .card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

/* ---- Product Title ---- */
.products-grid h3 {
    font-size: 14px;
    font-weight: 500;
    color: #0f1111;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Rating Row ---- */
.products-grid .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}

.products-grid .card-rating .stars {
    color: #f0a500;
    letter-spacing: 1px;
    font-size: 13px;
}

/* ---- Price ---- */
.products-grid .product-price {
    font-size: 14px;
    color: #0f1111;
    font-weight: 400;
    margin: 2px 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1px;
}

.products-grid .product-price .price-symbol {
    font-size: 13px;
    font-weight: 700;
    margin-top: 3px;
    color: #0f1111;
}

.products-grid .product-price .price-integer {
    font-size: 24px;
    font-weight: 700;
    color: #0f1111;
    line-height: 1;
}

.products-grid .product-price .price-cents {
    font-size: 13px;
    font-weight: 700;
    margin-top: 3px;
    color: #0f1111;
}

/* ---- Shop Badge ---- */
.products-grid .shop-badge {
    font-size: 11px;
    color: #555;
    background: #f0f0f0;
    padding: 2px 7px;
    border-radius: 20px;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- View Details Button ---- */
.products-grid .view-product-btn,
.products-grid button:not(.nav-search-icon):not(.add-cart-btn) {
    width: 100%;
    padding: 10px 14px;
    border-radius: 30px;
    background: #ffd814;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #111;
    margin-top: 12px;
    text-align: center;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    letter-spacing: 0.01em;
}

.products-grid .view-product-btn:hover,
.products-grid button:not(.nav-search-icon):not(.add-cart-btn):hover {
    background: #f5c400;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.products-grid .view-product-btn:active,
.products-grid button:not(.nav-search-icon):not(.add-cart-btn):active {
    transform: scale(0.97);
    box-shadow: none;
}

.products-grid .add-cart-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 30px;
    background: #ffd814;
    cursor: pointer;
    font-weight: 700;
    margin-top: 12px;
    font-size: 14px;
    color: #111;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.products-grid .add-cart-btn:hover {
    background: #f5c400;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ---- No Results & Loading ---- */
.products-grid-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #555;
    font-size: 18px;
}

/* ---- Responsive ---- */
@media(max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
        padding: 12px;
    }
    .products-grid .product-img-container {
        height: 150px;
    }
}

/* =========================
   PRODUCT DETAILS PAGE
========================= */

/* Page wrapper */
.product-details-page {
    background: #f5f5f5;
    min-height: calc(100vh - 140px);
    padding: 16px 0 40px;
}

/* Main 3-column container */
.product-details-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto 16px auto;
    padding: 24px 28px;
    background: #fff;
    gap: 28px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* --- Image Column --- */
.product-image-col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px;
}

.product-image-col .main-image-wrap {
    width: 100%;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 280px;
    transition: box-shadow 0.2s ease;
}

.product-image-col .main-image-wrap:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

.product-image-col img {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

.product-image-col img:hover {
    transform: scale(1.04);
}

/* --- Info Column --- */
.product-info-col {
    flex: 1;
    min-width: 260px;
    padding: 4px 0;
}

.product-info-col h1 {
    font-size: 22px;
    font-weight: 500;
    color: #0f1111;
    line-height: 1.35;
    margin-bottom: 10px;
}

/* Rating row */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7e7e7;
}

.product-rating .stars {
    color: #f0a500;
    font-size: 18px;
    letter-spacing: 2px;
}

.product-rating .rating-text {
    font-size: 14px;
    color: #007185;
    cursor: pointer;
    text-decoration: none;
}

.product-rating .rating-text:hover {
    text-decoration: underline;
    color: #c45500;
}

/* Price */
.product-price-large {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    color: #b12704;
    margin-bottom: 18px;
}

.product-price-large .price-symbol {
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
    color: #b12704;
}

.product-price-large .price-integer {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #b12704;
}

.product-price-large .price-cents {
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
    color: #b12704;
}

/* About section */
.product-about-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 8px;
}

.product-description {
    font-size: 14px;
    color: #333;
    line-height: 1.65;
}

/* --- Buy Box Column --- */
.product-buy-col {
    flex: 0 0 230px;
    padding: 18px;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    align-self: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: #fff;
}

.product-buy-col .price {
    font-size: 22px;
    color: #0f1111;
    font-weight: 600;
    margin-bottom: 6px;
}

.product-buy-col .stock-status {
    color: #007600;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
}

.buy-btn-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-add-to-cart,
.btn-buy-now {
    width: 100%;
    padding: 11px 14px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.btn-add-to-cart {
    background: #ffd814;
    color: #111;
}
.btn-add-to-cart:hover {
    background: #f5c400;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.btn-buy-now {
    background: #ffa41c;
    color: #111;
}
.btn-buy-now:hover {
    background: #ff8800;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* --- Related Products Section --- */
#related-products {
    max-width: 1400px;
    margin: 0 auto 40px auto;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#related-products h2 {
    font-size: 20px;
    font-weight: 700;
    color: #cc6600;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0e0c8;
}

/* Related products use the same grid as search */
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.related-products-grid .product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    padding: 0;
}

.related-products-grid .product-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
}

.related-products-grid .product-img-container {
    height: 160px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid #ebebeb;
}

.related-products-grid .product-img-container img {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.25s ease;
}

.related-products-grid .product-card:hover .product-img-container img {
    transform: scale(1.05);
}

.related-products-grid .card-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
}

.related-products-grid h3 {
    font-size: 13px;
    font-weight: 500;
    color: #0f1111;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.related-products-grid .product-price {
    font-size: 14px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: auto;
}

.related-products-grid button {
    width: 100%;
    padding: 9px 12px;
    border-radius: 25px;
    background: #ffd814;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: #111;
    margin-top: 10px;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.related-products-grid button:hover {
    background: #f5c400;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Legacy rule kept for backward compat */
.product-img-container button {
    border-radius: 20%;
    background-color: #ffa41c;
}

/* Responsive product details */
@media(max-width: 900px) {
    .product-details-container {
        flex-direction: column;
        padding: 16px;
    }
    .product-image-col {
        flex: unset;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .product-buy-col {
        flex: unset;
        width: 100%;
    }
}

@media(max-width: 600px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   CART PAGE STYLES
========================= */
.cart-page-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.cart-left {
    flex: 3;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.cart-right {
    flex: 1;
}

.cart-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.cart-header h2 {
    font-size: 28px;
    font-weight: 500;
}

.cart-item-count-text {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.free-shipping-text, .free-shipping-text-right {
    color: #007600;
    font-size: 14px;
    margin-top: 5px;
}

.cart-item-row {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.cart-item-img {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-item-img img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.cart-item-details {
    flex: 1;
}

.cart-item-title {
    font-size: 18px;
    font-weight: 500;
    color: #0f1111;
    margin-bottom: 8px;
}

.cart-item-stock {
    color: #007600;
    font-size: 12px;
    margin-bottom: 8px;
}

.cart-item-price {
    font-size: 18px;
    font-weight: 700;
    color: #b12704;
    margin-bottom: 10px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #007185;
}

.cart-qty-box {
    background: #f0f2f2;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #0f1111;
    box-shadow: 0 2px 5px rgba(15,17,17,.15);
}

.cart-qty-select {
    background: transparent;
    border: none;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.cart-action-btn {
    cursor: pointer;
}

.cart-action-btn:hover {
    text-decoration: underline;
}

.cart-action-divider {
    color: #ddd;
}

.cart-bottom-subtotal {
    text-align: right;
    font-size: 18px;
    padding-top: 15px;
}

.cart-bottom-subtotal strong {
    font-weight: 700;
}

.continue-shopping {
    display: inline-block;
    margin-top: 15px;
    color: #007185;
    font-size: 14px;
}

.continue-shopping:hover {
    text-decoration: underline;
}

.cart-subtotal-box {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.cart-subtotal-box p {
    font-size: 18px;
}

.cart-subtotal-box strong {
    font-weight: 700;
    color: #b12704;
}

.proceed-buy-btn {
    width: 100%;
    background: #ffd814;
    border: 1px solid #fcd200;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(15,17,17,.15);
}

.proceed-buy-btn:hover {
    background: #f7ca00;
}

.cart-features p {
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

@media(max-width: 900px) {
    .cart-page-container {
        flex-direction: column;
    }
    .cart-left, .cart-right {
        width: 100%;
        flex: unset;
    }
}

/* =========================
   SAVED FOR LATER STYLES
========================= */
#saved-for-later-section {
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.saved-later-header {
    margin-bottom: 15px;
}

.saved-later-header h2 {
    font-size: 22px;
    font-weight: 500;
    color: #0f1111;
}

.saved-item-row {
    background: #fafafa;
    border-radius: 4px;
}

.move-to-cart-btn {
    background: #ffd814;
    border: 1px solid #fcd200;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #0f1111;
    box-shadow: 0 2px 5px rgba(15,17,17,.1);
    transition: background 0.2s, transform 0.15s;
}

.move-to-cart-btn:hover {
    background: #f7ca00;
    transform: translateY(-1px);
}

.cart-empty-msg {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.cart-empty-msg i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    color: #ccc;
}

.cart-empty-msg p {
    font-size: 16px;
}
/* ==========================================================================
   GIFT CARD PAGE STYLES
   ========================================================================== */

/* ---- Active nav link for Gift Cards ---- */
#nav-gift-cards-active {
    color: #ff9900;
    font-weight: 700;
    border-bottom: 2px solid #ff9900;
}

/* ---- Hero Banner ---- */
.gc-hero {
    background: linear-gradient(135deg, #232f3e 0%, #131921 50%, #1a2332 100%);
    padding: 50px 20px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gc-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,153,0,0.08) 0%, transparent 60%);
    animation: gcHeroPulse 8s ease-in-out infinite;
}

@keyframes gcHeroPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

.gc-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.gc-hero-icon {
    font-size: 52px;
    display: block;
    margin-bottom: 12px;
    animation: gcBounce 2s ease infinite;
}

@keyframes gcBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.gc-hero-title {
    font-size: 36px;
    font-weight: 800;
    color: #ff9900;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.gc-hero-subtitle {
    font-size: 17px;
    color: #aab8c8;
    font-weight: 400;
}

/* ---- Balance Bar ---- */
.gc-balance-bar {
    background: linear-gradient(90deg, #fef9e7, #fffdf5, #fef9e7);
    border-bottom: 2px solid #ffd814;
    padding: 14px 20px;
    text-align: center;
}

.gc-balance-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #0f1111;
}

.gc-balance-inner i {
    color: #ff9900;
    font-size: 20px;
}

.gc-balance-inner strong {
    font-size: 22px;
    color: #067d62;
    font-weight: 800;
}

/* ---- Section Wrapper ---- */
.gc-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 20px;
}

.gc-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ff9900;
    display: inline-block;
}

/* ---- Card Grid ---- */
.gc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---- Individual Gift Card ---- */
.gc-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
}

.gc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.14);
    border-color: #ff9900;
}

.gc-card-image-wrap {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa, #eef0f2);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    overflow: hidden;
}

.gc-card-image-wrap img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.gc-card:hover .gc-card-image-wrap img {
    transform: scale(1.05);
}

.gc-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(238,90,36,0.3);
}

.gc-badge-gold {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 2px 8px rgba(243,156,18,0.3);
}

.gc-badge-green {
    background: linear-gradient(135deg, #00b894, #00a378);
    box-shadow: 0 2px 8px rgba(0,184,148,0.3);
}

.gc-card-body {
    padding: 20px;
}

.gc-card-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 6px;
}

.gc-card-body p {
    font-size: 14px;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ---- Amount Input Row ---- */
.gc-amount-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.gc-amount-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.gc-amount-input-wrap:focus-within {
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255,153,0,0.1);
}

.gc-currency {
    padding: 10px 12px;
    background: #f5f5f5;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    border-right: 2px solid #ddd;
}

.gc-amount-input {
    flex: 1;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #0f1111;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
}

.gc-amount-input::placeholder {
    color: #bbb;
    font-weight: 400;
}

.gc-quick-amounts {
    display: flex;
    gap: 8px;
}

.gc-quick-btn {
    flex: 1;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f1111;
    background: #f5f5f5;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gc-quick-btn:hover {
    background: #fff3cd;
    border-color: #ff9900;
    color: #e67e22;
}

.gc-quick-btn.active {
    background: #fff3cd;
    border-color: #ff9900;
    color: #e67e22;
    box-shadow: 0 0 0 2px rgba(255,153,0,0.15);
}

/* ---- Buy Button ---- */
.gc-buy-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #0f1111;
    background: linear-gradient(180deg, #ffd814, #f7ca00);
    border: 1px solid #c7a500;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(15,17,17,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gc-buy-btn:hover {
    background: linear-gradient(180deg, #f5c400, #e6b800);
    box-shadow: 0 4px 10px rgba(15,17,17,0.2);
    transform: translateY(-1px);
}

.gc-buy-btn:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* ---- Redeem Section ---- */
.gc-redeem-section {
    background: #f5f5f5;
    margin: 0;
    max-width: none;
    padding: 40px 20px;
}

.gc-redeem-box {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    gap: 32px;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.gc-redeem-left {
    flex: 0 0 300px;
}

.gc-redeem-left h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-redeem-left h2 i {
    color: #ff9900;
}

.gc-redeem-left p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.gc-redeem-right {
    flex: 1;
}

.gc-redeem-input-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.gc-redeem-input-group input {
    flex: 1;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid #ddd;
    border-radius: 8px;
    color: #0f1111;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: border-color 0.25s ease;
    font-family: 'Courier New', Courier, monospace;
}

.gc-redeem-input-group input:focus {
    border-color: #ff9900;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,153,0,0.1);
}

.gc-redeem-btn {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #0f1111;
    background: linear-gradient(180deg, #ffd814, #f7ca00);
    border: 1px solid #c7a500;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(15,17,17,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-redeem-btn:hover {
    background: linear-gradient(180deg, #f5c400, #e6b800);
    box-shadow: 0 4px 10px rgba(15,17,17,0.2);
}

.gc-redeem-msg {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    min-height: 20px;
}

.gc-redeem-msg.success {
    color: #067d62;
}

.gc-redeem-msg.error {
    color: #cc0c39;
}

/* ---- Gift Card History ---- */
.gc-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.gc-history-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.gc-history-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.gc-history-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.gc-history-icon.birthday { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.gc-history-icon.classic { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.gc-history-icon.thankyou { background: linear-gradient(135deg, #fef3c7, #fde68a); }

.gc-history-details {
    flex: 1;
}

.gc-history-details h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 4px;
}

.gc-history-details .gc-history-code {
    font-size: 12px;
    color: #888;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.gc-history-amount {
    font-size: 18px;
    font-weight: 800;
    color: #067d62;
}

.gc-history-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-top: 4px;
    display: inline-block;
}

.gc-history-status.active {
    background: #dcfce7;
    color: #15803d;
}

.gc-history-status.redeemed {
    background: #f0f0f0;
    color: #888;
}

/* ---- Features Footer ---- */
.gc-features {
    background: linear-gradient(135deg, #232f3e, #1a2332);
    padding: 28px 20px;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.gc-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.gc-feature-item i {
    font-size: 28px;
    color: #ff9900;
}

.gc-feature-item strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.gc-feature-item span {
    font-size: 12px;
    color: #aab8c8;
}

/* ---- Success Modal ---- */
.gc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gc-modal-overlay.active {
    display: flex;
}

.gc-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: gcModalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

@keyframes gcModalPop {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.gc-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    background: none;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.gc-modal-close:hover {
    color: #333;
}

.gc-modal-icon {
    font-size: 54px;
    margin-bottom: 8px;
}

.gc-modal h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f1111;
    margin-bottom: 6px;
}

.gc-modal-amount {
    font-size: 36px;
    font-weight: 800;
    color: #067d62;
    margin-bottom: 20px;
}

.gc-modal-code-box {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px;
}

.gc-modal-code-box label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.gc-modal-code {
    font-size: 26px;
    font-weight: 800;
    color: #0f1111;
    letter-spacing: 3px;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 12px;
    user-select: all;
}

.gc-copy-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #0f1111;
    background: #ffd814;
    border: 1px solid #c7a500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gc-copy-btn:hover {
    background: #f5c400;
}

.gc-modal-hint {
    font-size: 13px;
    color: #888;
    margin-top: 8px;
}

/* ---- Responsive Gift Cards ---- */
@media (max-width: 900px) {
    .gc-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gc-redeem-box {
        flex-direction: column;
        text-align: center;
    }
    .gc-redeem-left {
        flex: none;
    }
    .gc-redeem-left h2 {
        justify-content: center;
    }
    .gc-redeem-input-group {
        flex-direction: column;
    }
    .gc-features {
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .gc-card-grid {
        grid-template-columns: 1fr;
    }
    .gc-hero-title {
        font-size: 26px;
    }
    .gc-hero-icon {
        font-size: 40px;
    }
    .gc-hero-subtitle {
        font-size: 14px;
    }
    .gc-balance-inner {
        font-size: 14px;
    }
    .gc-balance-inner strong {
        font-size: 18px;
    }
    .gc-features {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .gc-modal {
        padding: 28px 20px;
    }
    .gc-modal-code {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .gc-modal-amount {
        font-size: 28px;
    }
}

/* ---- Dark Mode Gift Cards ---- */
.dark-theme .gc-hero {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1a1f29 100%);
}

.dark-theme .gc-hero-subtitle {
    color: #8b949e;
}

.dark-theme .gc-balance-bar {
    background: linear-gradient(90deg, #1c2028, #21252d, #1c2028);
    border-bottom-color: #e67e22;
}

.dark-theme .gc-balance-inner {
    color: #e6edf3;
}

.dark-theme .gc-balance-inner strong {
    color: #3fb950;
}

.dark-theme .gc-section-title {
    color: #e6edf3;
}

.dark-theme .gc-card {
    background: #161b22;
    border-color: #30363d;
}

.dark-theme .gc-card:hover {
    border-color: #ff9900;
    box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

.dark-theme .gc-card-image-wrap {
    background: linear-gradient(135deg, #1c2028, #21252d);
}

.dark-theme .gc-card-body h3 {
    color: #e6edf3;
}

.dark-theme .gc-card-body p {
    color: #8b949e;
}

.dark-theme .gc-currency {
    background: #21252d;
    color: #e6edf3;
    border-right-color: #30363d;
}

.dark-theme .gc-amount-input-wrap {
    border-color: #30363d;
    background: #0d1117;
}

.dark-theme .gc-amount-input {
    color: #e6edf3;
}

.dark-theme .gc-quick-btn {
    background: #21252d;
    border-color: #30363d;
    color: #e6edf3;
}

.dark-theme .gc-quick-btn:hover,
.dark-theme .gc-quick-btn.active {
    background: #2d333b;
    border-color: #ff9900;
    color: #ff9900;
}

.dark-theme .gc-redeem-section {
    background: #0d1117;
}

.dark-theme .gc-redeem-box {
    background: #161b22;
    border-color: #30363d;
}

.dark-theme .gc-redeem-left h2 {
    color: #e6edf3;
}

.dark-theme .gc-redeem-left p {
    color: #8b949e;
}

.dark-theme .gc-redeem-input-group input {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

.dark-theme .gc-redeem-input-group input:focus {
    border-color: #ff9900;
}

.dark-theme .gc-history-card {
    background: #161b22;
    border-color: #30363d;
}

.dark-theme .gc-history-details h4 {
    color: #e6edf3;
}

.dark-theme .gc-history-details .gc-history-code {
    color: #8b949e;
}

.dark-theme .gc-history-amount {
    color: #3fb950;
}

.dark-theme .gc-history-status.active {
    background: rgba(63,185,80,0.15);
    color: #3fb950;
}

.dark-theme .gc-history-status.redeemed {
    background: rgba(139,148,158,0.15);
    color: #8b949e;
}

.dark-theme .gc-features {
    background: linear-gradient(135deg, #0d1117, #161b22);
}

.dark-theme .gc-modal {
    background: #161b22;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.dark-theme .gc-modal h2 {
    color: #e6edf3;
}

.dark-theme .gc-modal-amount {
    color: #3fb950;
}

.dark-theme .gc-modal-code-box {
    background: #0d1117;
    border-color: #30363d;
}

.dark-theme .gc-modal-code-box label {
    color: #8b949e;
}

.dark-theme .gc-modal-code {
    color: #e6edf3;
}

.dark-theme .gc-modal-hint {
    color: #8b949e;
}

.dark-theme .gc-modal-close {
    color: #8b949e;
}

.dark-theme .gc-modal-close:hover {
    color: #e6edf3;
}

/* ---- Balance update pop animation ---- */
@keyframes gcBalancePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); color: #ff9900; }
    100% { transform: scale(1); }
}
.gc-balance-pop {
    display: inline-block;
    animation: gcBalancePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
}