/* =========================================================
   MYGSOUQ — COMMON MASTER CSS
   Combined:
   - Frontend / Product Listing
   - Product Details
   - Dashboard
   - Enquiry / Modal
   - Order / Invoice Bill
   - Responsive + Print
========================================================= */


/* =========================================================
   1. RESET / BASE
========================================================= */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:Inter, Arial, sans-serif;
    background:#f6f7f9;
    color:#17232d;
    font-size:13px;
    line-height:1.45; letter-spacing: 0.01em;
}

body.lock{
    overflow:hidden;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}

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

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

input,
textarea,
select{
    outline:0;
}

::placeholder{
    color:#9aa3aa;
}

/* =========================================================
   2. COMMON CONTAINER
========================================================= */

.container{
    width:min(1220px,94%);
    margin:0 auto;
}


/* =========================================================
   3. BRAND
========================================================= */

.brand{
    font-size:22px;
    font-weight:900;
    letter-spacing:-.6px;
}

.brand .my{
    color:#FF5604;
}

.brand .gsouq{
    color:#FF5604;
}


/* =========================================================
   4. COMMON HEADER
========================================================= */

.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid #e5e9ed;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.header-inner{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-btn{
    width:40px;
    height:40px;
    flex:none;
    border:1px solid #e1e5e8;
    background:#fff;
    border-radius:9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.menu-btn span{
    width:19px;
    height:2px;
    border-radius:3px;
    background:#071827;
}

.header-brand{
    flex:1;
}

.header-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.header-btn{
    height:38px;
    padding:0 11px;
    border:1px solid #e1e5e8;
    border-radius:8px;
    background:#fff;
    color:#26343d;
    font-size:10px;
    font-weight:900;
}

.header-btn:hover{
    border-color:#861f35;
    color:#861f35;
}

.header-wa{
    min-height:39px;
    border:0;
    border-radius:20px;
    background:#168c4c;
    color:#fff;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:11px;
    font-weight:900;
}

.wa-icon{
    width:18px;
    height:18px;
    flex:none;
}

.admin-avatar{
    width:36px;
    height:36px;
    flex:none;
    border-radius:50%;
    background:#861f35;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
}


/* =========================================================
   5. DRAWER
========================================================= */

.drawer-overlay{
    position:fixed;
    inset:0;
    z-index:3000;
    background:rgba(0,0,0,.58);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}

.drawer-overlay.active{
    opacity:1;
    visibility:visible;
}

.drawer{
    position:fixed;
    z-index:3100;
    left:0;
    top:0;
    bottom:0;
    width:min(300px,84vw);
    background:#fff;
    transform:translateX(-100%);
    transition:.22s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.2);
    display:flex;
    flex-direction:column;
}

.drawer.active{
    transform:translateX(0);
}

.drawer-head{
    min-height:70px;
    padding:15px;
    background:#071827;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.drawer-head .my{
    color:#fff;
}

.drawer-head .gsouq{
    color:#d9929e;
}

.drawer-close{
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:21px;
}

.drawer-menu{
    padding:10px;
}

.drawer-menu a,
.drawer-menu button{
    width:100%;
    min-height:44px;
    border:0;
    background:none;
    border-radius:8px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    font-size:12px;
    font-weight:800;
    color:#293640;
}

.drawer-menu a:hover,
.drawer-menu button:hover,
.drawer-menu .active{
    background:#f8eef1;
    color:#861f35;
}

.drawer-bottom{
    margin-top:auto;
    padding:15px;
    border-top:1px solid #eee;
}

.drawer-bottom-box{
    background:#f8f1f3;
    border:1px solid #ead9de;
    border-radius:9px;
    padding:11px;
}

.drawer-bottom-box strong{
    display:block;
    color:#861f35;
    font-size:10px;
}

.drawer-bottom-box span{
    display:block;
    color:#78838b;
    font-size:9px;
    margin-top:3px;
}

.drawer-wa{
    width:100%;
    border:0;
    border-radius:8px;
    background:#168c4c;
    color:#fff;
    padding:11px;
    font-size:12px;
    font-weight:900;
}


/* =========================================================
   6. HERO / FRONTEND LANDING
========================================================= */

.hero{
    background:
        linear-gradient(
            135deg,
            #071827 0%,
            #102c41 65%,
            #861f35 150%
        );
    color:#fff;
    padding:20px 0 15px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 240px;
    gap:22px;
    align-items:center;
}

.hero h1{
    font-size:clamp(27px,4vw,28px);
    line-height:1.08;
    margin-bottom:10px;
}

.hero h1 span{
    color:#e4a0ac;
}

.hero p{
    max-width:720px;
    color:#dce5eb;
    font-size:12px;
}

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:15px;
}

.hero-badge{
    padding:4px 9px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.08);
    font-size:10px;
    font-weight:600;
}


/* =========================================================
   7. TIMER
========================================================= */

.timer{
    background:#1d2a3f;
	border: 1px  solid #1D1D1D; 
    color:#071827;
    border-radius:60px;
    padding:8px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    animation:timerPulse 2s infinite;
}

@keyframes timerPulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.025);
    }
}

.timer-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:#ffffff;
    font-weight:600;
}

.timer-value{
    color:#861f35;
    font-size:25px;
    font-weight:800;
    margin-top:4px;  background-color:#f6f7f9; border-radius: 20px;
}

.timer-sub{
    color:#ffffff;
    font-size:10px; padding: 6px 10px 2px 10px;
}


/* =========================================================
   8. BREADCRUMB
========================================================= */

.breadcrumb{
    padding:12px 0 5px;
    color:#78838b;
    font-size:10px;
}

.breadcrumb a{
    color:#861f35;
    font-weight:800;
}

.breadcrumb span{
    color:#69757e;
}


/* =========================================================
   9. SEARCH / FILTER
========================================================= */

.toolbar{
    padding:10px 0 8px;
}

.toolbar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

.toolbar-title{
    font-size:15px;
    font-weight:900;
}

.toolbar-count{
    color:#78838b;
    font-size:11px;
}

.search-row{

    display:grid;
    grid-template-columns:minmax(180px,1fr) 170px 170px;
    gap:8px;
}

.search-box,
.filter-search{
    position:relative;
}

.search-box input,
.filter-search input{
    width:100%;
    height:44px;
    border:1px solid #dce1e5;
    border-radius:9px;
    background:#fff;
    padding:0 40px 0 12px;
    outline:0;
    font-size:13px;
}

.filter-search input{
    height:38px;
    padding-left:34px;
    padding-right:10px;
    border-radius:7px;
    font-size:11px;
}

.search-box input:focus,
.filter-search input:focus,
.filter-select:focus{
    border-color:#861f35;
    box-shadow:0 0 0 3px rgba(134,31,53,.08);
}

.search-icon{
    position:absolute;
    color:#7c868e;
}

.search-box .search-icon{
    right:13px;
    top:12px;
    font-size:18px; line-height: 18px;
}

.filter-search .search-icon{
    left:11px;
    top:10px;
    font-size:13px;
}

.filter-select{
    height:44px;
    border:1px solid #dce1e5;
    border-radius:9px;
    background:#fff;
    padding:0 10px;
    outline:0;
    font-size:12px;
}

.filter-bar{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:11px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
}

.filter-bar .filter-select{
    height:38px;
    border-radius:7px;
    color:#48545d;
    font-size:10px;
    font-weight:800;
}

.date-tabs{
    display:flex;
    gap:5px;
}

.date-tab{
    min-height:32px;
    border:1px solid #dce1e5;
    background:#fff;
    border-radius:6px;
    padding:0 9px;
    font-size:9px;
    font-weight:900;
    color:#68747d;
}

.date-tab.active,
.date-tab:hover{
    background:#f8eef1;
    color:#861f35;
    border-color:#ead9de;
}


/* =========================================================
   10. PRODUCT LISTING
========================================================= */

.products{
    padding:8px 0 36px;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.product-card{
    background:#fff;
    border:1px solid #e3e7ea;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.045);
    transition:.2s ease;
}

.product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.09);
}


/* =========================================================
   11. PRODUCT LIST GALLERY
========================================================= */

.product-gallery{
    background:#f0f2f4;
    position:relative;
}

.product-main-image{
    position:relative;
    height:205px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #f4f5f6,
            #e7eaed
        );
}

.product-main-image a{
    display:block;
    width:100%;
    height:100%;
}

.product-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .25s ease;
}

.product-card:hover .product-main-image img{
    transform:scale(1.025);
}

.product-tag,
.image-badge{
    position:absolute;
    z-index:3;
    top:2px;
    left:2px;
    background:#861f35;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    font-size:9px;
    font-weight:600;
}

.image-count{
    position:absolute;
    z-index:3;
    right:2px;
    top:4px;
    
    color:#fff;
    padding:2px 7px;
    border-radius:5px;
    font-size:9px;
    font-weight:600;
}

.image-thumbs,
.thumbnails{
    display:flex;
    gap:6px;
    padding:2px  7px;
    overflow-x:auto;
    scrollbar-width:none;
    background:#fff;
}

.image-thumbs::-webkit-scrollbar,
.thumbnails::-webkit-scrollbar{
    display:none;
}

.image-thumb{
    width:48px;
    height:42px;
    min-width:48px;
    border:1px solid #dfe4e8;
    border-radius:6px;
    background:#f5f6f7;
    padding:0;
    overflow:hidden;
}

.image-thumb.active{
    border:2px solid #861f35;
}


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


/* =========================================================
   12. PRODUCT CARD INFO
========================================================= */

.product-info{
    padding:6px 12px;
}

.product-title{
    font-size:15px;
    font-weight:900;
    margin-bottom:4px;
}

.product-title a:hover{
    color:#861f35;
}

.product-spec,
.product-color{
    font-size:11px;
    color:#69757e;
}

.product-color{
    margin:2px 0 4px;
}

.price-box{
    border-top:1px solid #edf0f2;
    padding-top:9px;
}

.price-group{
    margin-bottom:6px; 
	border-bottom: 1px solid #edf0f2;
}

.price-head,
.offer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5px;
}

.price-label{
    color:#0e1726;
    font-size:10px;
    font-weight:600;
}

.real-price{
    color:#4c5861;
    font-size:12px;
    font-weight:600;
    text-decoration:line-through;
}

.offer-row{
    margin-top:3px;
}

.offer-price{
    color:#861f35;
    font-size:17px;
    font-weight:600;
}

.save{
    color:#168c4c;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.enquiry-btn{
    width:100%;
    min-height:28px;
    border:0;
    border-radius:20px;
    background:#071827;
    color:#fff;
    font-size:12px;
    font-weight:600;
}

.enquiry-btn:hover{
    background:#861f35;
}

.no-results{
    display:none;
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:10px;
    padding:30px;
    text-align:center;
    color:#707b84;
    font-size:13px;
}


/* =========================================================
   13. PRODUCT DETAIL
========================================================= */

.product-detail{
    padding:8px 0 45px;
}

.product-layout{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:22px;
    align-items:start;
}

.gallery{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:13px;
    overflow:hidden;
    box-shadow:0 3px 14px rgba(0,0,0,.045);
}

.main-image{
    height:510px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #f5f6f7,
            #e8ebee
        );
    overflow:hidden;
}

.main-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.25s ease;
}

.zoom-label{
    position:absolute;
    bottom:12px;
    right:12px;
    background:rgba(7,24,39,.78);
    color:#fff;
    padding:5px 8px;
    border-radius:5px;
    font-size:9px;
    font-weight:800;
}

.thumb{
    min-width:66px;
    width:66px;
    height:60px;
    border:1px solid #dfe4e8;
    background:#f4f5f6;
    border-radius:7px;
    padding:0;
    overflow:hidden;
}

.thumb.active{
    border:2px solid #861f35;
}

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

.product-info-main{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:13px;
    padding:19px;
    box-shadow:0 3px 14px rgba(0,0,0,.045);
}

.product-label{
    display:inline-block;
    padding:5px 8px;
    background:#f8eef1;
    color:#861f35;
    border-radius:5px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.2px;
}

.product-info-main .product-title{
    margin-top:9px;
    font-size:31px;
    line-height:1.1;
    color:#071827;
}

.product-subtitle{
    color:#6f7a82;
    font-size:13px;
    margin-top:6px;
}

.rating-row{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:11px;
}

.rating{
    background:#fff5d9;
    color:#9b6a00;
    padding:5px 7px;
    border-radius:5px;
    font-size:10px;
    font-weight:900;
}

.rating-text{
    color:#8a949b;
    font-size:9px;
}


/* =========================================================
   14. PRODUCT DETAIL PRICES / OPTIONS
========================================================= */

.price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:17px;
}

.price-card{
    border:1px solid #e0e4e7;
    border-radius:9px;
    padding:12px;
    background:#fafbfc;
}

.price-card.featured{
    border-color:#ead9de;
    background:#fbf3f5;
}

.price-card .price-label{
    display:block;
    margin-bottom:5px;
}

.old-price{
    display:block;
    color:#89929a;
    font-size:11px;
    text-decoration:line-through;
}

.current-price{
    display:block;
    color:#861f35;
    font-size:22px;
    font-weight:900;
    margin-top:1px;
}

.price-card .save{
    display:block;
    margin-top:3px;
}

.option-title{
    margin-top:16px;
    margin-bottom:7px;
    font-size:11px;
    font-weight:900;
    color:#35414a;
}

.option-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.option-btn{
    min-height:35px;
    border:1px solid #dce1e5;
    border-radius:7px;
    background:#fff;
    padding:0 10px;
    color:#48545d;
    font-size:10px;
    font-weight:800;
}

.option-btn:hover,
.option-btn.active{
    color:#861f35;
    border-color:#861f35;
    background:#f8eef1;
}


/* =========================================================
   15. CTA / TRUST
========================================================= */

.cta-row{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:8px;
    margin-top:18px;
}

.primary-btn,
.secondary-btn{
    min-height:36px;
    border-radius:8px;
    font-size:11px;
    font-weight:900;
}

.primary-btn{
    border:0;
    background:#168c4c;
    color:#fff;
}

.primary-btn:hover{
    background:#11763f;
}

.secondary-btn{
    border:1px solid #dce1e5;
    background:#fff;
    color:#071827;
}

.secondary-btn:hover{
    border-color:#861f35;
    color:#861f35;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:13px;
}

.trust-box{
    padding:9px 7px;
    border:1px solid #edf0f2;
    border-radius:7px;
    background:#fafbfc;
    text-align:center;
}

.trust-icon{
    font-size:17px;
    margin-bottom:2px;
}

.trust-box strong{
    display:block;
    font-size:9px;
    color:#26343d;
}

.trust-box span{
    display:block;
    color:#89929a;
    font-size:8px;
    margin-top:2px;
}


/* =========================================================
   16. COMMON SECTIONS / HIGHLIGHTS
========================================================= */

.section{
    margin-top:24px;
}

.section-title{
    margin-bottom:11px;
    font-size:19px;
    font-weight:900;
    color:#071827;
}

.highlight-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.highlight{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:9px;
    padding:12px 10px;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
}

.highlight-icon{
    font-size:20px;
    margin-bottom:5px;
}

.highlight strong{
    display:block;
    font-size:11px;
    color:#26343d;
}

.highlight span{
    display:block;
    color:#7c868e;
    font-size:9px;
    margin-top:2px;
}


/* =========================================================
   17. DEAL NOTICE / ALERT
========================================================= */

.deal-notice,
.alert{
    display:flex;
    gap:10px;
    align-items:flex-start;
    border:1px solid #ead9de;
    background:#fbf3f5;
    border-radius:10px;
    padding:12px;
}

.deal-notice{
    margin-top:20px;
}

.deal-notice-icon,
.alert-icon{
    width:30px;
    height:30px;
    min-width:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#861f35;
    color:#fff;
    border-radius:7px;
}

.deal-notice strong,
.alert strong{
    display:block;
    color:#861f35;
    font-size:11px;
}

.deal-notice span,
.alert span{
    display:block;
    color:#727d85;
    font-size:9px;
    margin-top:3px;
}

.alert-icon{
    width:29px;
    height:29px;
    min-width:29px;
}


/* =========================================================
   18. SPECIFICATIONS
========================================================= */

.spec-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.spec-card{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:10px;
    overflow:hidden;
}

.spec-row{
    min-height:42px;
    display:grid;
    grid-template-columns:38% 62%;
    border-bottom:1px solid #edf0f2;
    font-size:10px;
}

.spec-row:last-child{
    border-bottom:0;
}

.spec-row div{
    padding:10px;
}

.spec-row div:first-child{
    background:#fafbfc;
    color:#717c84;
    font-weight:800;
}

.spec-row div:last-child{
    color:#26343d;
    font-weight:700;
}


/* =========================================================
   19. FAQ
========================================================= */

.faq{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:10px;
    overflow:hidden;
}

.faq details{
    border-bottom:1px solid #edf0f2;
}

.faq details:last-child{
    border-bottom:0;
}

.faq summary{
    list-style:none;
    cursor:pointer;
    padding:13px;
    padding-right:40px;
    font-size:11px;
    font-weight:900;
    color:#26343d;
    position:relative;
}

.faq summary::-webkit-details-marker{
    display:none;
}

.faq summary:after{
    content:"+";
    position:absolute;
    right:14px;
    top:10px;
    color:#861f35;
    font-size:18px;
    font-weight:400;
}

.faq details[open] summary:after{
    content:"−";
}

.faq p{
    padding:0 13px 14px;
    color:#707b84;
    font-size:10px;
}


/* =========================================================
   20. RELATED PRODUCTS
========================================================= */

.related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:11px;
}

.related-card{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 9px rgba(0,0,0,.04);
    transition:.2s;
}

.related-card:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(0,0,0,.08);
}

.related-image{
    height:185px;
    background:#f0f2f4;
    overflow:hidden;
}

.related-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.25s;
}

.related-card:hover .related-image img{
    transform:scale(1.025);
}

.related-info{
    padding:10px;
}

.related-info h3{
    font-size:12px;
    font-weight:900;
    color:#26343d;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.related-info p{
    color:#7b858d;
    font-size:9px;
    margin-top:3px;
}

.related-price{
    color:#861f35;
    font-size:15px;
    font-weight:900;
    margin:7px 0;
}

.related-btn{
    width:100%;
    min-height:28px;
    border:0;
    border-radius:6px;
    background:#071827;
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.related-btn:hover{
    background:#861f35;
}


/* =========================================================
   21. DASHBOARD PAGE
========================================================= */

.page{
    padding:18px 0 40px;
}

.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px;
}

.page-title{
    color:#071827;
    font-size:26px;
    line-height:1.1;
    font-weight:900;
}

.page-subtitle{
    margin-top:5px;
    color:#7a858d;
    font-size:11px;
}

.page-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.action-btn{
    min-height:38px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid #dce1e5;
    background:#fff;
    color:#26343d;
    font-size:10px;
    font-weight:900;
}

.action-btn:hover{
    border-color:#861f35;
    color:#861f35;
}

.action-btn.primary{
    border-color:#861f35;
    background:#861f35;
    color:#fff;
}


/* =========================================================
   22. KPI
========================================================= */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.kpi{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:11px;
    padding:13px;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
    position:relative;
    overflow:hidden;
}

.kpi:after{
    content:"";
    position:absolute;
    width:60px;
    height:60px;
    right:-18px;
    top:-18px;
    border-radius:50%;
    background:#f8eef1;
}

.kpi-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.kpi-label{
    color:#78838b;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.25px;
}

.kpi-icon{
    width:30px;
    height:30px;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8eef1;
    color:#861f35;
    font-size:14px;
    z-index:1;
}

.kpi-value{
    margin-top:8px;
    color:#071827;
    font-size:24px;
    line-height:1;
    font-weight:900;
}

.kpi-meta{
    margin-top:7px;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:8px;
}

.up{
    color:#168c4c;
    font-weight:900;
}

.down{
    color:#c32f3c;
    font-weight:900;
}

.kpi-note{
    color:#8b949b;
}


/* =========================================================
   23. DASHBOARD CARDS
========================================================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);
    gap:12px;
    margin-top:12px;
}

.dashboard-grid.equal{
    grid-template-columns:1fr 1fr;
}

.card{
    background:#fff;
    border:1px solid #e2e6e9;
    border-radius:11px;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
    overflow:hidden;
}

.card-head{
    min-height:49px;
    padding:10px 13px;
    border-bottom:1px solid #edf0f2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.card-title{
    color:#071827;
    font-size:12px;
    font-weight:900;
}

.card-subtitle{
    color:#89929a;
    font-size:8px;
    margin-top:2px;
}

.card-link{
    color:#861f35;
    font-size:9px;
    font-weight:900;
}

.card-body{
    padding:12px;
}


/* =========================================================
   24. CHART
========================================================= */

.chart-summary{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:8px;
}

.chart-total{
    color:#071827;
    font-size:23px;
    font-weight:900;
}

.chart-total small{
    display:block;
    color:#89929a;
    font-size:8px;
    font-weight:700;
}

.chart-change{
    color:#168c4c;
    font-size:9px;
    font-weight:900;
}

.chart{
    width:100%;
    height:220px;
    position:relative;
}

.chart svg{
    width:100%;
    height:100%;
    display:block;
}

.chart-grid-line{
    stroke:#edf0f2;
    stroke-width:1;
}

.chart-area{
    fill:#f8eef1;
}

.chart-line{
    fill:none;
    stroke:#861f35;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chart-dot{
    fill:#fff;
    stroke:#861f35;
    stroke-width:2;
}

.chart-labels{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    margin-top:-2px;
}

.chart-labels span{
    text-align:center;
    color:#8c969d;
    font-size:8px;
}


/* =========================================================
   25. REPORT / PROGRESS / CHANNEL
========================================================= */

.report-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.report-row{
    display:grid;
    grid-template-columns:30px 1fr auto;
    align-items:center;
    gap:8px;
}

.report-icon{
    width:30px;
    height:30px;
    border-radius:7px;
    background:#f8f1f3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}

.report-main strong{
    display:block;
    color:#26343d;
    font-size:10px;
}

.report-main span{
    display:block;
    color:#8a949b;
    font-size:8px;
    margin-top:1px;
}

.report-value{
    text-align:right;
}

.report-value strong{
    display:block;
    color:#071827;
    font-size:11px;
}

.report-value span{
    display:block;
    color:#168c4c;
    font-size:8px;
    font-weight:900;
}

.progress-item{
    margin-bottom:13px;
}

.progress-item:last-child{
    margin-bottom:0;
}

.progress-head{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:5px;
}

.progress-head span{
    color:#52606a;
    font-size:9px;
    font-weight:800;
}

.progress-head strong{
    color:#26343d;
    font-size:9px;
}

.progress-bar{
    height:7px;
    background:#edf0f2;
    border-radius:20px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    border-radius:20px;
    background:#861f35;
}

.progress-fill.green{
    background:#168c4c;
}

.progress-fill.dark{
    background:#071827;
}

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

.channel{
    border:1px solid #e8ecef;
    border-radius:8px;
    padding:10px;
    background:#fafbfc;
}

.channel-icon{
    font-size:17px;
}

.channel strong{
    display:block;
    margin-top:5px;
    color:#26343d;
    font-size:10px;
}

.channel span{
    display:block;
    color:#89929a;
    font-size:8px;
    margin-top:2px;
}

.channel-value{
    margin-top:7px;
    color:#861f35;
    font-size:15px;
    font-weight:900;
}


/* =========================================================
   26. COMMON DATA TABLE
========================================================= */

.table-wrap{
    width:100%;
    overflow-x:auto;
}

.data-table{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

.data-table th{
    background:#fafbfc;
    color:#758089;
    text-align:left;
    padding:9px 10px;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.25px;
    border-bottom:1px solid #e8ecef;
}

.data-table td{
    padding:10px;
    border-bottom:1px solid #edf0f2;
    color:#45525b;
    font-size:9px;
    vertical-align:middle;
}

.data-table tbody tr:hover{
    background:#fcf9fa;
}

.data-table tr:last-child td{
    border-bottom:0;
}

.product-cell{
    display:flex;
    align-items:center;
    gap:8px;
}

.product-thumb{
    width:38px;
    height:38px;
    border-radius:7px;
    background:#f0f2f4;
    object-fit:cover;
    flex:none;
}

.product-cell strong{
    display:block;
    color:#26343d;
    font-size:10px;
}

.product-cell span{
    display:block;
    color:#8a949b;
    font-size:8px;
    margin-top:2px;
}


/* =========================================================
   27. STATUS BADGES
========================================================= */

.status-badge{
    display:inline-flex;
    align-items:center;
    min-height:21px;
    padding:0 7px;
    border-radius:20px;
    font-size:8px;
    font-weight:900;
}

.status-badge.new{
    background:#fff5d9;
    color:#966800;
}

.status-badge.follow{
    background:#f8eef1;
    color:#861f35;
}

.status-badge.done,
.status-badge.stock{
    background:#e8f7ef;
    color:#087844;
}

.status-badge.lost,
.status-badge.out{
    background:#fff0f1;
    color:#b51f2c;
}

.status-badge.low{
    background:#fff5d9;
    color:#966800;
}

.table-action{
    border:1px solid #dce1e5;
    background:#fff;
    border-radius:5px;
    padding:5px 7px;
    color:#5c6871;
    font-size:8px;
    font-weight:900;
}

.table-action:hover{
    color:#861f35;
    border-color:#861f35;
}


/* =========================================================
   28. PIPELINE / QUICK ACTIONS
========================================================= */

.pipeline{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.pipeline-box{
    padding:11px;
    border-radius:8px;
    background:#fafbfc;
    border:1px solid #e8ecef;
}

.pipeline-box strong{
    display:block;
    color:#071827;
    font-size:18px;
    font-weight:900;
}

.pipeline-box span{
    display:block;
    color:#7f8991;
    font-size:8px;
    margin-top:3px;
    font-weight:800;
}

.pipeline-box.new{
    border-top:3px solid #966800;
}

.pipeline-box.follow{
    border-top:3px solid #861f35;
}

.pipeline-box.done{
    border-top:3px solid #168c4c;
}

.pipeline-box.lost{
    border-top:3px solid #c32f3c;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.quick-btn{
    min-height:72px;
    border:1px solid #e3e7ea;
    border-radius:8px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#52606a;
    font-size:9px;
    font-weight:900;
}

.quick-btn span{
    font-size:19px;
}

.quick-btn:hover{
    border-color:#ead9de;
    background:#fdf8f9;
    color:#861f35;
}


/* =========================================================
   29. ENQUIRY / MODAL
========================================================= */

.modal{
    position:fixed;
    inset:0;
    z-index:4000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:rgba(0,0,0,.62);
}

.modal.active{
    display:flex;
}

.modal-box{
    width:min(430px,100%);
    max-height:94vh;
    overflow:auto;
    background:#fff;
    border-radius:13px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    animation:modalIn .18s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.modal-head{
    min-height:45px;
    padding:6px 13px;
    /* background:#071827; */
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.modal-head h3{
    font-size:12px; background-color: #000000; padding: 5px 15px; color:#FFFFFF; line-height: 12px; border-radius: 10px;
}

.close-btn{
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    background:#111827;
    color:#fff;
    font-size:20px;
}

.modal-body{
    padding:5px  14px;
}

.selected{
    padding:6px 10px;
    margin-bottom:12px;
    border:1px solid #ead9de;
    border-radius:8px;
    background:#e5efea;
}

.selected small{
    display:block;
    color:#7c858d;
    font-size:9px;
}

.selected strong{
    color:#861f35;
    font-size:13px;
}

.form-group{
    margin-bottom:10px;
}

.form-group label{
    display:block;
    margin-bottom:4px;
    color:#35414a;
    font-size:11px;
    font-weight:900;
}

.form-control{
    width:100%;
    height:40px;
    border:1px solid #d7dde2;
    border-radius:7px;
    background:#fff;
    padding:0 10px;
    outline:0;
    font-size:12px;
} 

.auto-label {
    position: static;
    right: 7px;
    top: 13px;
    color: #168c4c;
    font-size: 8px;
    font-weight: 900;
    pointer-events: none;
}


textarea.form-control{
    height:auto;
    min-height:80px;
    padding-top:9px;
    padding-bottom:9px;
    resize:vertical;
}

.form-control:focus{
    border-color:#861f35;
    box-shadow:0 0 0 3px rgba(134,31,53,.08);
}

.form-control.invalid{
    border-color:#d12e3c;
    background:#fff8f8;
}

.input-hint{
    color:#89929a;
    font-size:9px;
    margin-top:3px;
}

.isd-mobile-row{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:7px;
}

.submit-btn{
    width:100%;
    min-height:36px;
    border:0;
    border-radius:10px;
    background:#168c4c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    font-weight:900;
}

.submit-btn:hover{
    background:#11763f;
}

.submit-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.form-note{
    margin-top:7px;
    text-align:center;
    color:#858e95;
    font-size:9px;
}

.status{
    display:none;
    padding:8px 9px;
    border-radius:7px;
    margin-bottom:10px;
    font-size:11px;
    font-weight:800;
}

.status.show{
    display:block;
}

.status.error{
    color:#b51f2c;
    background:#fff0f1;
}

.status.success{
    color:#087844;
    background:#e8f7ef;
}


/* =========================================================
   30. FLOATING WHATSAPP
========================================================= */

.float-wa{
    position:fixed;
    right:17px;
    bottom:17px;
    z-index:1500;
    width:51px;
    height:51px;
    border-radius:50%;
    background:#168c4c;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.float-wa .wa-icon{
    width:27px;
    height:27px;
}


/* =========================================================
   31. TOAST
========================================================= */

.toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:5000;
    max-width:320px;
    padding:11px 14px;
    border-radius:8px;
    background:#071827;
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    font-size:10px;
    font-weight:800;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.2s;
}

.toast.show{
    opacity:1;
    visibility:visible;
    transform:none;
}


/* =========================================================
   32. ORDER / INVOICE
   Main invoice styling retained from the fourth CSS block.
   Namespaced with .invoice to prevent conflicts.
========================================================= */

.page-wrap{
    width:100%;
    padding:20px;
}

.invoice{
    width:100%;
    max-width:900px;
    margin:0 auto;
    background:#fff;
    border:1px solid #dfe3e8;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}


/* =========================================================
   33. INVOICE ACTION BAR
========================================================= */

.action-bar{
    max-width:900px;
    margin:0 auto 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.action-title{
    font-size:14px;
    font-weight:700;
    color:#111827;
}

.action-buttons{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.btn{
    border:0;
    border-radius:5px;
    padding:8px 13px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    background:#111827;
}

.btn:hover{
    opacity:.9;
}

.btn.green{
    background:#16a34a;
}

.btn.blue{
    background:#2563eb;
}

.btn.gray{
    background:#6b7280;
}


/* =========================================================
   34. INVOICE HEADER
========================================================= */

.invoice-header{
    padding:20px 22px 15px;
    border-bottom:1px solid #e5e7eb;
}

.invoice .header-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:start;
}

.company{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.company-logo{
    width:58px;
    height:58px;
    object-fit:contain;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:5px;
    background:#fff;
}

.company-name{
    font-size:22px;
    font-weight:800;
    color:#111827;
    letter-spacing:-.3px;
}

.company-tag{
    font-size:11px;
    color:#6b7280;
    margin-top:2px;
}

.company-contact{
    margin-top:5px;
    font-size:11px;
    color:#4b5563;
}

.invoice-meta{
    min-width:220px;
}

.invoice-title{
    font-size:24px;
    font-weight:800;
    text-align:right;
    color:#111827;
    letter-spacing:.3px;
}

.invoice-number{
    text-align:right;
    font-size:12px;
    margin-top:4px;
    color:#4b5563;
}

.invoice-number strong{
    color:#111827;
}


/* =========================================================
   35. INVOICE STATUS
========================================================= */

.invoice .status-row{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin-top:9px;
    flex-wrap:wrap;
}

.invoice .status{
    display:inline-flex;
    align-items:center;
    padding:4px 9px;
    border-radius:20px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.invoice .status.paid{
    color:#166534;
    background:#dcfce7;
}

.invoice .status.pending{
    color:#92400e;
    background:#fef3c7;
}

.invoice .status.processing{
    color:#1e40af;
    background:#dbeafe;
}


/* =========================================================
   36. INVOICE INFO
========================================================= */

.info-section{
    padding:14px 22px;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
}

.info-card{
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:10px;
    background:#fafafa;
}

.info-title{
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#6b7280;
    margin-bottom:5px;
}

.info-value{
    font-size:12px;
    color:#111827;
    font-weight:700;
}

.info-small{
    font-size:11px;
    color:#4b5563;
    margin-top:2px;
}


/* =========================================================
   37. DELIVERY
========================================================= */

.delivery-section{
    padding:0 22px 15px;
}

.delivery-box{
    border:1px solid #dbe3ec;
    border-radius:7px;
    overflow:hidden;
}

.delivery-head{
    padding:8px 10px;
    background:#f4f7fa;
    border-bottom:1px solid #dbe3ec;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.delivery-head strong{
    font-size:12px;
}

.delivery-content{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
}

.delivery-col{
    padding:10px;
    border-right:1px solid #e5e7eb;
}

.delivery-col:last-child{
    border-right:0;
}

.label{
    display:block;
    font-size:9px;
    text-transform:uppercase;
    font-weight:800;
    color:#6b7280;
    letter-spacing:.4px;
    margin-bottom:2px;
}

.value{
    font-size:11px;
    font-weight:700;
    color:#111827;
}

.sub-value{
    font-size:10px;
    color:#4b5563;
}


/* =========================================================
   38. INVOICE ITEMS
========================================================= */

.items-section{
    padding:0 22px 15px;
}

.invoice .table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #dfe3e8;
    border-radius:6px;
}

.items{
    width:100%;
    border-collapse:collapse;
    min-width:650px;
}

.items th{
    background:#111827;
    color:#fff;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.35px;
    padding:8px 7px;
    text-align:left;
    white-space:nowrap;
}

.items td{
    padding:8px 7px;
    border-bottom:1px solid #e5e7eb;
    font-size:11px;
    vertical-align:top;
}

.items tr:last-child td{
    border-bottom:0;
}

.items th:nth-child(2),
.items th:nth-child(3),
.items th:nth-child(4),
.items th:nth-child(5),
.items td:nth-child(2),
.items td:nth-child(3),
.items td:nth-child(4),
.items td:nth-child(5){
    text-align:center;
}

.items th:last-child,
.items td:last-child{
    text-align:right;
}

.product-name{
    font-weight:800;
    color:#111827;
}

.product-detail{
    font-size:9px;
    color:#6b7280;
    margin-top:2px;
}


/* =========================================================
   39. INVOICE SUMMARY
========================================================= */

.summary-section{
    padding:0 22px 15px;
}

.summary-grid{
    display:grid;
    grid-template-columns:1fr 310px;
    gap:15px;
    align-items:start;
}

.payment-box{
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:11px;
}

.payment-title{
    font-size:11px;
    font-weight:800;
    margin-bottom:7px;
    text-transform:uppercase;
}

.payment-line{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
    margin:4px 0;
}

.payment-line span:first-child{
    color:#6b7280;
}

.payment-line strong{
    color:#111827;
}

.total-box{
    border:1px solid #d9dee5;
    border-radius:7px;
    overflow:hidden;
}

.total-line{
    display:flex;
    justify-content:space-between;
    padding:7px 10px;
    font-size:11px;
    border-bottom:1px solid #e8ebef;
}

.total-line:last-child{
    border-bottom:0;
}

.total-line span:first-child{
    color:#6b7280;
}

.total-final{
    background:#111827;
    color:#fff;
    font-size:15px;
    font-weight:800;
    padding:11px 10px;
}

.total-final span:first-child{
    color:#fff;
}


/* =========================================================
   40. QR + BARCODE
========================================================= */

.verification-section{
    padding:0 22px 16px;
}

.verification-grid{
    display:grid;
    grid-template-columns:1fr 170px 250px;
    gap:10px;
    border:1px solid #e5e7eb;
    border-radius:7px;
    padding:10px;
    align-items:center;
}

.verify-text h3{
    font-size:12px;
    margin-bottom:3px;
}

.verify-text p{
    font-size:10px;
    color:#6b7280;
}

.qr-box{
    text-align:center;
    border-left:1px solid #e5e7eb;
    border-right:1px solid #e5e7eb;
    padding:3px 10px;
}

.qr-box img{
    width:95px;
    height:95px;
    margin:0 auto 4px;
    object-fit:contain;
}

.code-caption{
    font-size:9px;
    font-weight:800;
    color:#4b5563;
}

.barcode-box{
    text-align:center;
}

.barcode-box img{
    width:220px;
    max-width:100%;
    height:58px;
    object-fit:contain;
    margin:0 auto 3px;
}

.barcode-number{
    font-family:monospace;
    font-size:10px;
    letter-spacing:1px;
    color:#111827;
}


/* =========================================================
   41. INVOICE NOTES
========================================================= */

.notes-section{
    padding:0 22px 15px;
}

.notes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.notes-box{
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:10px;
}

.notes-title{
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
    color:#111827;
    margin-bottom:4px;
}

.notes-box ul{
    padding-left:15px;
}

.notes-box li{
    font-size:10px;
    color:#4b5563;
    margin-bottom:2px;
}


/* =========================================================
   42. SIGNATURE
========================================================= */

.signature-section{
    padding:5px 22px 20px;
}

.signature-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
}

.signature{
    text-align:center;
    padding-top:25px;
    border-top:1px solid #cfd4da;
}

.signature strong{
    display:block;
    font-size:10px;
}

.signature span{
    display:block;
    font-size:9px;
    color:#6b7280;
    margin-top:2px;
}


/* =========================================================
   43. INVOICE FOOTER
========================================================= */

.invoice-footer{
    padding:11px 22px;
    border-top:1px solid #e5e7eb;
    background:#fafafa;
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:9px;
    color:#6b7280;
}

.footer-right{
    text-align:right;
}


/* =========================================================
   44. GENERAL FOOTER
========================================================= */

.footer{
    margin-top:20px;
    background:#071827;
    color:#bfc9d0;
    padding:23px 0 16px; text-align: center;
} 
	

.footer .my{
    color:#fff;
} 
	
.footer-top{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr 1fr;
    gap:25px;
}

.footer-brand .brand{
    margin-bottom:8px;
}

.footer-brand .my{
    color:#fff;
}

.footer-brand .gsouq{
    color:#d9929e;
}

.footer-description{
    color:#9eabb3;
    font-size:10px;
    max-width:290px;
}

.footer-title{
    color:#fff;
    font-size:11px;
    font-weight:900;
    margin-bottom:9px;
}

.footer-links{
    list-style:none;
}

.footer-links li{
    margin-bottom:5px;
}

.footer-links a{
    color:#aeb9c0;
    font-size:9px;
}

.footer-links a:hover{
    color:#fff;
}

.footer-contact{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.footer-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:5px 7px;
    border-radius:5px;
    background:rgba(255,255,255,.06);
    color:#c8d1d6;
    font-size:8px;
}

.footer-bottom{
    margin-top:22px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.footer-bottom p{
    font-size:8px;
    color:#89969e;
}


/* =========================================================
   45. RESPONSIVE — <= 1000px
========================================================= */

@media(max-width:1000px){

    .product-layout{
        grid-template-columns:1fr;
    }

    .main-image{
        height:430px;
    }

    .related-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .footer-top{
        grid-template-columns:1.5fr 1fr 1fr;
    }

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

    .dashboard-grid,
    .dashboard-grid.equal{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   RESPONSIVE — <= 980px
========================================================= */

@media(max-width:980px){

    .product-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* =========================================================
   RESPONSIVE — <= 720px
========================================================= */

@media(max-width:720px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .timer{
        width:100%;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .product-main-image{
        height:170px;
    }

    .search-row{
        grid-template-columns:1fr;
    }

    .main-image{
        height:390px;
    }

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

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

    .spec-layout{
        grid-template-columns:1fr;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .page{
        padding-top:13px;
    }

    .page-head{
        display:block;
    }

    .page-actions{
        margin-top:10px;
    }

    .page-actions .action-btn{
        flex:1;
    }

    .filter-bar{
        flex-wrap:wrap;
    }

    .filter-search{
        flex:1 1 100%;
    }

    .filter-bar .filter-select{
        flex:1;
    }

    .date-tabs{
        width:100%;
        overflow-x:auto;
    }

    .date-tab{
        flex:1;
        white-space:nowrap;
    }

    .channel-grid{
        grid-template-columns:1fr 1fr 1fr;
    }

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


    /* Invoice responsive */

    .page-wrap{
        padding:8px;
    }

    .action-bar{
        align-items:flex-start;
        flex-direction:column;
    }

    .action-buttons{
        width:100%;
    }

    .action-buttons .btn{
        flex:1;
    }

    .invoice-header,
    .invoice .info-section,
    .delivery-section,
    .items-section,
    .summary-section,
    .verification-section,
    .notes-section,
    .signature-section{
        padding-left:12px;
        padding-right:12px;
    }

    .invoice .header-grid{
        grid-template-columns:1fr;
    }

    .invoice-meta{
        min-width:0;
    }

    .invoice-title,
    .invoice-number{
        text-align:left;
    }

    .info-grid{
        grid-template-columns:1fr 1fr;
    }

    .delivery-content{
        grid-template-columns:1fr;
    }

    .delivery-col{
        border-right:0;
        border-bottom:1px solid #e5e7eb;
    }

    .delivery-col:last-child{
        border-bottom:0;
    }

    .summary-grid{
        grid-template-columns:1fr;
    }

    .verification-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .qr-box{
        border:0;
        border-top:1px solid #e5e7eb;
        border-bottom:1px solid #e5e7eb;
        padding:10px;
    }

    .notes-grid{
        grid-template-columns:1fr;
    }

    .signature-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .invoice-footer{
        flex-direction:column;
    }

    .footer-right{
        text-align:left;
    }
}


/* =========================================================
   RESPONSIVE — <= 480px
========================================================= */

@media(max-width:480px){

    .container{
        width:94%;
    }

    .header-inner{
        min-height:57px;
    }

    .brand{
        font-size:19px;
    }

    .header-btn{
        display:none;
    }

    .header-wa{
        padding:0 9px;
        font-size:10px;
    }

    .hero{
        padding:24px 0;
    }

    .hero h1{
        font-size:27px;
    }

    .hero p{
        font-size:12px;
    }

    .product-main-image{
        height:145px;
    }

    .product-info{
        padding:10px;
    }

    .product-card .product-title{
        font-size:13px;
    }

    .offer-price{
        font-size:15px;
    }

    .save{
        font-size:9px;
    }

    .image-thumb{
        width:43px;
        height:38px;
        min-width:43px;
    }

    .main-image{
        height:315px;
    }

    .product-info-main{
        padding:13px;
    }

    .product-info-main .product-title{
        font-size:25px;
    }

    .product-subtitle{
        font-size:11px;
    }

    .price-grid{
        grid-template-columns:1fr;
    }

    .cta-row{
        grid-template-columns:1fr;
    }

    .trust-grid{
        grid-template-columns:1fr 1fr 1fr;
    }

    .trust-box{
        padding:8px 4px;
    }

    .trust-box strong{
        font-size:8px;
    }

    .highlight-grid{
        gap:7px;
    }

    .related-grid{
        gap:8px;
    }

    .related-image{
        height:150px;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:18px 12px;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{
        display:block;
        text-align:center;
    }

    .footer-bottom p + p{
        margin-top:4px;
    }

    .kpi-grid{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .kpi{
        padding:10px;
    }

    .kpi-value{
        font-size:20px;
    }

    .kpi-icon{
        width:27px;
        height:27px;
    }

    .card-head{
        padding:9px 10px;
    }

    .card-body{
        padding:10px;
    }

    .chart{
        height:180px;
    }

    .pipeline{
        grid-template-columns:1fr 1fr;
    }

    .channel-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom p{
        font-size:8px;
    }

    .isd-mobile-row{
        grid-template-columns:110px 1fr;
    }

    .page-title{
        font-size:23px;
    }

    .page-subtitle{
        font-size:10px;
    }

    .invoice .info-grid{
        grid-template-columns:1fr 1fr;
    }
}


/* =========================================================
   RESPONSIVE — <= 350px
========================================================= */

@media(max-width:350px){

    .product-grid{
        grid-template-columns:1fr;
    }

    .product-main-image{
        height:210px;
    }

    .header-wa{
        display:none;
    }

    .main-image{
        height:280px;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

    .highlight-grid{
        grid-template-columns:1fr;
    }

    .trust-grid{
        grid-template-columns:1fr;
    }

    .kpi-grid{
        grid-template-columns:1fr;
    }

    .filter-bar .filter-select{
        flex:1 1 100%;
    }
}


/* =========================================================
   46. PRINT / A4
========================================================= */

@page{
    size:A4;
    margin:8mm;
}

@media print{

    html,
    body{
        background:#fff !important;
        margin:0;
        padding:0;
    }

    body{
        font-size:11px;
    }

    /* Hide website controls */

    .header,
    .drawer,
    .drawer-overlay,
    .page-actions,
    .filter-bar,
    .toolbar,
    .float-wa,
    .toast,
    .footer,
    .action-bar{
        display:none !important;
    }

    /* Invoice */

    .page-wrap{
        padding:0;
    }

    .invoice{
        width:100%;
        max-width:none;
        border:0;
        box-shadow:none;
    }

    .invoice-header,
    .invoice .info-section,
    .delivery-section,
    .items-section,
    .summary-section,
    .verification-section,
    .notes-section,
    .signature-section{
        padding-left:0;
        padding-right:0;
    }

    .invoice-footer{
        padding-left:0;
        padding-right:0;
    }

    .invoice .table-wrap{
        overflow:visible;
    }

    .items{
        min-width:0;
    }

    .items th{
        background:#111827 !important;
        color:#fff !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .total-final{
        background:#111827 !important;
        color:#fff !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .invoice .status{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .invoice-header{
        padding-top:0;
    }

    tr,
    .info-card,
    .delivery-box,
    .notes-box,
    .verification-grid,
    .payment-box,
    .total-box,
    .card,
    .kpi{
        break-inside:avoid;
        page-break-inside:avoid;
    }

    /* Remove interactive product effects */

    .product-card:hover,
    .related-card:hover{
        transform:none;
        box-shadow:none;
    }
}


/* =========================================================
   END — COMMON MASTER CSS
========================================================= */ 


/* MyGsouq Static Content Pages */

.content-page {
    padding-bottom: 35px;
    color: #26343d;
}

.content-page .breadcrumb {
    padding: 15px 0;
    color: #78858e;
    font-size: 11px;
}

.content-page .breadcrumb a {
    color: #861f35;
    text-decoration: none;
}

.content-page .page-heading {
    margin-bottom: 18px;
    padding: 25px;
    border-radius: 10px;
    background: linear-gradient(120deg,#071827,#17364a);
    color: white;
}

.content-page .page-heading h1 {
    margin: 0 0 8px;
    color: white;
    font-size: 27px;
}

.content-page .page-heading p {
    margin: 0;
    color: #dce5eb;
    font-size: 12px;
    line-height: 1.8;
}

.content-page .content-card {
    padding: 25px;
    border: 1px solid #e4e8eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(7,24,39,.04);
}

.content-page .content-card h2 {
    margin: 24px 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #edf0f2;
    color: #071827;
    font-size: 17px;
}

.content-page .content-card h2:first-child {
    margin-top: 0;
}

.content-page .content-card p,
.content-page .content-card li {
    color: #65727b;
    font-size: 12px;
    line-height: 1.9;
}

.content-page .content-card ul {
    padding-left: 22px;
}

.content-page .content-card a {
    color: #861f35;
}

.content-page .contact-details p {
    padding: 8px 0;
    border-bottom: 1px solid #edf0f2;
}

@media(max-width:600px) {
    .content-page .content-card {
        padding: 17px;
    }

    .content-page .page-heading {
        padding: 20px;
    }

    .content-page .page-heading h1 {
        font-size: 23px;
    }
}