/*your custom css goes here*/

.delivery-option-area {
    padding-bottom: 25px;
    font-size:16px;
}

.delivery-time-area {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 16px;
}

.change-address-option {
    padding-bottom: 20px;
    font-size: 16px;
}

.return-policy {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 16px;
}

.address-area {
    margin-top: 15px;
}

.custom-mb {
    margin-bottom: 5px;
}

.address-area i {
    font-size: 22px;
    color: #f5562f;
}

.delivery-time-area i {
    font-size: 22px;
    color: #f5562f;
}

.address-time-area i {
    font-size: 22px;
    color: #f5562f;
}

.address-area .change-button {
    float: right;
}

.delivery-time-area .right-side-content {
    float: right;
    margin-top: -35px;
    font-size: 20px;
}

.delivery-time-area .cash-on-delivery-option {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    .location-style-area {
        margin-top: 25px;
    }
}

.addButtonWrapper .aiz-plus-minus {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary); /* Light red background */
    border-radius: 5px;
}

.addButtonWrapper .aiz-plus-minus button {
    background: #fd2f8b;
    border: none;
    font-weight: bold;
    color: white;
    display: flex;
    border-right: 1px solid #fff;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
}

.addButtonWrapper .aiz-plus-minus .plus {
    border-left: 1px solid #fff;
    border-right: none;
}

.btn-light {
    background: transparent;
}
.btn-light.disabled, .btn-light:disabled {
    background: transparent;
}

.btn-light:hover {
    background: transparent;
}

.addButtonWrapper .aiz-plus-minus input {
    background: var(--primary);
    border: none;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    width: 60px;
}

.addButtonWrapper .aiz-plus-minus button:focus,
.addButtonWrapper .aiz-plus-minus input:focus {
outline: none;
}

.addButtonWrapper .aiz-plus-minus button:hover {
opacity: 0.8;
}

.addButtonWrapper .aiz-plus-minus input::-webkit-outer-spin-button,
.addButtonWrapper .aiz-plus-minus input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* ============ SM Product Card — resources/views/frontend/partials/product_box_1.blade.php ============ */
    /* ===== SM Product Card (product_box_1) ===== */
    .sm-pcard{
        --sm-accent:#e8262d;
        --sm-accent-dark:#c8171e;
        --sm-star:#f7a325;
        position:relative;
        background:#fff;
        border:1px solid #f0f0f0;
        border-radius:10px;
        overflow:hidden;
        margin-bottom:16px;
        transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    }
    .sm-pcard:hover{
        box-shadow:0 8px 22px rgba(0,0,0,.10);
        border-color:#e9e9e9;
        transform:translateY(-2px);
    }

    /* --- image + overlays (badge, hover icons, cart control) --- */
    .sm-pcard-media{ position:relative; }
    .sm-pcard-img{
        display:block;
        position:relative;
        overflow:hidden;
        background:#fff;
    }
    .sm-pcard-img img{
        display:block;
        width:100%;
        height:170px;
        object-fit:contain;
        padding:8px;
        transition:transform .35s ease;
    }
    .sm-pcard:hover .sm-pcard-img img{ transform:scale(1.06); }
    @media (min-width:768px){
        .sm-pcard-img img{ height:210px; }
    }

    /* --- discount badge --- */
    .sm-pcard-badge{
        position:absolute;
        top:8px; left:0;
        z-index:3;
        background:var(--sm-accent);
        color:#fff;
        font-size:11px;
        font-weight:700;
        line-height:1;
        padding:5px 9px 5px 7px;
        border-radius:0 12px 12px 0;
        letter-spacing:.3px;
    }
    .sm-pcard-wholesale{
        position:absolute;
        bottom:8px; left:0;
        z-index:3;
        background:#455a64;
        color:#fff;
        font-size:10px;
        font-weight:600;
        padding:3px 8px;
        border-radius:0 10px 10px 0;
    }

    /* --- hover action icons --- */
    .sm-pcard-actions{
        position:absolute;
        top:8px; right:8px;
        z-index:3;
        display:flex;
        flex-direction:column;
        gap:6px;
        opacity:0;
        transform:translateX(10px);
        transition:opacity .25s ease, transform .25s ease;
    }
    .sm-pcard:hover .sm-pcard-actions{ opacity:1; transform:translateX(0); }
    .sm-pcard-actions a{
        width:30px; height:30px;
        display:flex; align-items:center; justify-content:center;
        border-radius:50%;
        background:#fff;
        color:#555;
        font-size:15px;
        box-shadow:0 2px 6px rgba(0,0,0,.15);
        transition:background .2s ease, color .2s ease;
    }
    .sm-pcard-actions a:hover{ background:var(--sm-accent); color:#fff; }

    /* --- body --- */
    .sm-pcard-body{ padding:10px 12px 12px; }

    .sm-pcard-top{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:6px;
    }
    /* price + "Per Piece" + old price always on one single line */
    .sm-pcard-price{
        line-height:1.2;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .sm-pcard-price .sm-price{
        font-size:0.9375rem;
        font-weight:700;
        color:var(--sm-accent);
        white-space:nowrap;
    }
    .sm-pcard-price .sm-price-del{
        font-size:12px;
        font-weight:500;
        color:#9b9b9b;
        text-decoration:line-through;
        margin-left:0px;
    }
    .sm-pcard-price .sm-price-unit{
        font-size:10px;
        color:#8b8b8b;
        margin-left:0px;
    }

    /* --- add to bag button (overlays the bottom-right of the image) --- */
    .sm-cart-area{
        position:absolute;
        right:6px;
        bottom:0px;
        z-index:4;
    }
    .sm-add-btn{
        display:inline-flex;
        align-items:center;
        gap:5px;
        border:0;
        outline:0;
        background:var(--sm-accent);
        color:#fff;
        font-size:12px;
        font-weight:600;
        white-space:nowrap;
        padding:0.15rem 0.45rem;
        border-radius:20px;
        cursor:pointer;
        box-shadow:0 2px 8px rgba(0,0,0,.20);
        transition:background .2s ease, box-shadow .2s ease;
    }
    .sm-add-btn:hover{ background:var(--sm-accent-dark); color:#fff; box-shadow:0 4px 10px rgba(232,38,45,.32); }
    .sm-add-btn:disabled{ opacity:.75; cursor:not-allowed; }
    .sm-add-btn i{ font-size:14px; }

    /* --- quantity stepper --- */
    .sm-qty{
        display:inline-flex;
        align-items:center;
        background:var(--sm-accent);
        border-radius:20px;
        padding:0.15rem 0.45rem;
        user-select:none;
        box-shadow:0 2px 8px rgba(0,0,0,.20);
    }
    .sm-qty.is-busy{ opacity:.6; pointer-events:none; }
    .sm-qty-btn{
        width:18px; height:18px;
        display:flex; align-items:center; justify-content:center;
        border:0;
        background:#fff;
        color:var(--sm-accent);
        border-radius:50%;
        font-size:12px;
        line-height:1;
        cursor:pointer;
        padding:0;
        transition:background .2s ease, color .2s ease;
    }
    .sm-qty-btn:hover{ background:#ffe9ea; }
    .sm-qty-btn:disabled{ opacity:.45; cursor:not-allowed; background:#fff; }
    .sm-qty-value{
        min-width:26px;
        text-align:center;
        color:#fff;
        font-size:13px;
        font-weight:700;
    }

    /* --- rating --- */
    .sm-pcard-rating{
        margin-top:6px;
        font-size:12px;
        line-height:1;
        color:#dcdcdc;
    }
    .sm-pcard-rating i.active{ color:var(--sm-star); }
    .sm-pcard-rating i.half{ color:var(--sm-star); opacity:.55; }

    /* --- name --- */
    .sm-pcard-name{
        margin:5px 0 0;
        font-size:13px;
        font-weight:500;
        line-height:1.4;
        min-height:36px;
    }
    .sm-pcard-name a{
        color:#2b2b2b;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .sm-pcard-name a:hover{ color:var(--sm-accent); }

    .sm-pcard-club{
        margin-top:8px;
        font-size:11px;
        background:#fff5f5;
        border:1px solid #ffe0e1;
        color:#6b6b6b;
        border-radius:6px;
        padding:3px 8px;
        display:flex;
        justify-content:space-between;
    }

    /* --- SM Product Card : mobile / tablet --- */
    @media (max-width:767px){
        .sm-pcard{
            border-radius:8px;
            margin-bottom:12px;
        }
        .sm-pcard-img img{
            height:150px;
            padding:0;
        }
        .sm-pcard-body{ padding:8px 8px 10px; }

        /* the icon column is hover-only, useless on touch and it covered the image */
        .sm-pcard-actions{ display:none; }

        .sm-pcard-top{ gap:4px; }
        .sm-cart-area{ right:6px; bottom:6px; }
        .sm-pcard-price .sm-price{ font-size:15px; }
        .sm-pcard-price .sm-price-unit{
            font-size:8px;
            margin-left:2px;
        }
        .sm-pcard-price .sm-price-del{ font-size:10px; }

        .sm-add-btn{
            font-size:10px;
            font-weight:600;
            padding:6px 8px;
            gap:3px;
            border-radius:16px;
        }
        .sm-add-btn i{ font-size:11px; }

        .sm-qty{ padding:2px; }
        .sm-qty-btn{
            width:22px; height:22px;
            font-size:11px;
        }
        .sm-qty-value{
            min-width:20px;
            font-size:12px;
        }

        .sm-pcard-rating{
            margin-top:4px;
            font-size:11px;
        }
        .sm-pcard-name{
            font-size:12px;
            margin-top:3px;
            min-height:34px;
        }
        .sm-pcard-badge{
            font-size:9px;
            padding:4px 7px 4px 5px;
        }
    }

    /* very narrow phones */
    @media (max-width:359px){
        .sm-pcard-price .sm-price{ font-size:14px; }
        .sm-add-btn{ font-size:9px; padding:5px 7px; }
    }

/* ============ Product listing header — resources/views/frontend/product_listing.blade.php ============ */
@media (max-width:991px){
    /* title + sort + filter icon all on one line, like the design.
       the brand filter (when there is one) drops to its own line below. */
    .sm-listing-head{
        display:flex !important;
        align-items:center;
        flex-wrap:wrap;
        gap:6px;
        margin-left:0 !important;
        margin-right:0 !important;
        width:100%;
        max-width:100%;
        overflow:hidden;              /* nothing inside may create page scroll */
    }
    .sm-listing-head > div{
        padding-left:0 !important;
        padding-right:0 !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-bottom:0 !important;
    }
    /* title: takes the leftover space and gets an ellipsis when too long */
    .sm-listing-head .sm-listing-title{
        order:0;
        flex:1 1 0 !important;
        min-width:0 !important;
        width:auto !important;
        overflow:hidden;
    }
    .sm-listing-head .sm-listing-title h1{
        font-size:15px;
        line-height:1.3;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:block;
        max-width:100%;
    }
    .sm-listing-head .sm-listing-sort{
        order:1;
        flex:0 1 150px !important;    /* may shrink, never overflow */
        width:auto !important;
        max-width:52% !important;
    }
    .sm-listing-head .sm-listing-filter{
        order:2;
        flex:0 0 auto !important;
        width:auto !important;
    }
    .sm-listing-head .sm-listing-filter .la-filter{ font-size:1.6em; }
    /* brand filter, when the page has one, goes on its own line underneath */
    .sm-listing-head .sm-listing-brand{
        order:3;
        flex:1 1 100% !important;
        width:100% !important;
        margin-top:8px !important;
    }

    /* bootstrap-select buttons inside the header */
    .sm-listing-head .bootstrap-select,
    .sm-listing-head .bootstrap-select > .dropdown-toggle,
    .sm-listing-head select.form-control{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        font-size:12px;
    }
    .sm-listing-head .bootstrap-select .filter-option-inner-inner{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .sm-listing-head .sm-listing-filter .btn{
        width:auto !important;
        min-width:0;
        padding:0 !important;
    }
}

/* ============ Product details — mobile info card + sticky action bar
                resources/views/frontend/product_details.blade.php ============ */
.sm-pd-mobile-card{
    --sm-accent:#e8262d;
    margin:12px 0 16px;
}
.sm-pd-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.sm-pd-row-between{ justify-content:space-between; }
.sm-pd-divider{
    height:1px;
    background:#efefef;
    margin:14px 0;
}

/* SKU + stock */
.sm-pd-sku{
    font-size:17px;
    font-weight:700;
    color:#111;
}
.sm-pd-stock{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:15px;
    font-weight:600;
}
.sm-pd-stock i{ font-size:17px; }
.sm-pd-stock.in{ color:#12a150; }
.sm-pd-stock.out{ color:var(--sm-accent); }

/* short description */
.sm-pd-short-desc{
    font-size:16px;
    line-height:1.45;
    color:#2b2b2b;
    margin:0 0 14px;
}

/* wishlist + share */
.sm-pd-actions{ gap:10px; flex-wrap:nowrap; }
.sm-pd-wishlist{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:10px;
    padding:10px 16px;
    font-size:15px;
    font-weight:600;
    color:#1c1c1c;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
}
.sm-pd-wishlist i{ color:var(--sm-accent); font-size:19px; }
.sm-pd-wishlist:hover{ border-color:var(--sm-accent); }
.sm-pd-share{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}
.sm-pd-share a{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:9px;
    background:#f4f5f7;
    font-size:20px;
    line-height:1;
}
.sm-pd-share a.fb{ color:#1877f2; }
.sm-pd-share a.msg{ color:#0084ff; }
.sm-pd-share a.wa{ background:#25d366; color:#fff; }
.sm-pd-share a:hover{ opacity:.85; }

/* delivery / location rows */
.sm-pd-info-row{
    font-size:16px;
    color:#111;
    margin-bottom:12px;
    flex-wrap:nowrap;
    gap:7px;
}
.sm-pd-info-row > i{ font-size:22px; color:#111; }
.sm-pd-label{ font-weight:700; }
.sm-pd-value{ font-weight:600; }
.sm-pd-location{
    color:#1a73e8;
    font-weight:600;
    text-decoration:none;
}
.sm-pd-location:hover{ color:#1a73e8; text-decoration:none; }
.sm-pd-location i{ font-size:13px; }

/* payment boxes */
.sm-pd-payments{ margin-top:14px; }
.sm-pd-pay-box{
    border:1px solid #ececec;
    border-radius:10px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
    min-height:58px;
}
.sm-pd-pay-title{
    font-size:16px;
    font-weight:700;
    color:#111;
    white-space:nowrap;
}
.sm-pd-pay-box > img{ height:26px; width:auto; max-width:45%; object-fit:contain; }
.sm-pd-pay-logos{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    justify-content:flex-end;
    min-width:0;
}
.sm-pd-pay-logos img{
    height:26px;
    width:40px;
    object-fit:contain;
    border:1px solid #e9e9e9;
    border-radius:4px;
    background:#fff;
    padding:1px;
}
.sm-pd-pay-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.sm-pd-pay-grid .sm-pd-pay-box{ margin-bottom:0; }
.sm-pd-pay-grid .sm-pd-pay-title{ white-space:normal; font-size:15px; }

@media (max-width:400px){
    .sm-pd-sku, .sm-pd-pay-title{ font-size:15px; }
    .sm-pd-stock, .sm-pd-short-desc, .sm-pd-info-row, .sm-pd-wishlist{ font-size:14px; }
    .sm-pd-wishlist{ padding:9px 12px; }
    .sm-pd-share a{ width:34px; height:34px; font-size:18px; }
    .sm-pd-pay-logos img{ height:22px; width:34px; }
}

/* sticky bottom action bar (above the mobile bottom menu) */
.sm-pd-bottom-bar{
    position:fixed;
    left:0; right:0;
    bottom:60px;                /* height of .aiz-mobile-bottom-nav */
    z-index:1029;               /* just under the bottom nav */
    display:flex;
    gap:8px;
    padding:8px 10px;
    background:#fff;
    border-top:1px solid #f0f0f0;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
.sm-pd-btn{
    flex:1 1 0;
    min-width:0;
    border:0;
    border-radius:8px;
    padding:12px 8px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}
.sm-pd-btn:hover, .sm-pd-btn:focus{ color:#fff; opacity:.92; }
.sm-pd-btn-buy{ background:#f79007; }
.sm-pd-btn-cart{ background:#e8262d; }

/* keeps the sticky bar from covering the end of the page */
.sm-pd-bar-spacer{ height:70px; }

/* ---- Product details: mobile display order / hidden desktop pieces ---- */
/* mobile price line, shown above the product name */
.sm-pd-price{ margin-bottom:6px; line-height:1.2; }
.sm-pd-price .sm-pd-price-now{
    font-size:24px;
    font-weight:700;
    color:var(--primary, #e8262d);
}
.sm-pd-price .sm-pd-price-unit{
    font-size:12px;
    color:#8b8b8b;
    margin-left:2px;
}
.sm-pd-price .sm-pd-price-old{
    font-size:13px;
    color:#9b9b9b;
    margin-left:6px;
}

/* location must stay on a single line */
.sm-pd-info-row{ flex-wrap:nowrap; min-width:0; }
.sm-pd-location{
    display:inline-block;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
}

@media (max-width:991px){
    /* total price row is toggled by JS, so it is hidden here instead of with a class */
    #chosen_price_div{ display:none !important; }

    /* the mobile card already shows delivery / location / payment,
       so the desktop delivery option column only keeps Return & Warranty */
    .location-style-area .delivery-option-area,
    .location-style-area .change-address-option,
    .location-style-area .delivery-time-area{ display:none !important; }
    .location-style-area{
        border-left:0 !important;
        margin-top:0 !important;
    }
    .location-style-area .return-policy{
        border:1px solid #eee;
        border-radius:12px;
        padding:12px !important;
        margin-bottom:12px;
    }
}

/* ---- Desktop: delivery option column, stop the texts overlapping ---- */
@media (min-width:992px){
    .location-style-area .delivery-time-area > div:first-child{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
    }
    /* the old rule pulled this up with a negative margin, over the text above it */
    .delivery-time-area .right-side-content{
        float:none !important;
        margin-top:0 !important;
        font-size:16px !important;
        white-space:nowrap;
        flex:0 0 auto;
    }
    .location-style-area .delivery-time-area .left-side-content{
        min-width:0;
        flex:1 1 auto;
    }
    .location-style-area .address-area .change-button{
        float:none !important;
        margin-left:auto;
    }
    .location-style-area .address-area .left-side-content{
        display:flex;
        align-items:flex-start;
        gap:6px;
        flex-wrap:nowrap;
    }
    .location-style-area #customer_address_data{
        min-width:0;
        flex:1 1 auto;
        word-break:break-word;
    }
    .location-style-area .delivery-option-area,
    .location-style-area .delivery-time-area,
    .location-style-area .return-policy{
        font-size:14px;
    }
    .location-style-area .delivery-option-area p,
    .location-style-area .return-policy p{ font-size:17px !important; }
}

/* ---- Product details sticky bar: Store | Chat | Buy Now | Add to Cart ---- */
.sm-pd-bottom-bar{ align-items:center; }
.sm-pd-bar-icon{
    flex:0 0 auto;
    width:46px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#5b5b5b;
    text-decoration:none;
    line-height:1;
}
.sm-pd-bar-icon:hover,
.sm-pd-bar-icon:focus{ color:var(--primary, #e8262d); text-decoration:none; }
.sm-pd-bar-icon i{ font-size:20px; }
.sm-pd-bar-icon span{
    font-size:9px;
    font-weight:600;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* the cart slot behaves like one of the two buttons */
.sm-pd-cart-slot{
    flex:1 1 0;
    min-width:0;
    display:flex;
}
.sm-pd-cart-slot > *{ width:100%; }

/* stepper styled to match the Add to Cart button inside the bar */
.sm-qty.sm-qty-bar{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#e8262d;
    border-radius:8px;
    padding:4px 6px;
    box-shadow:none;
    min-height:41px;
}
.sm-qty.sm-qty-bar .sm-qty-btn{
    width:30px;
    height:30px;
    font-size:14px;
    flex:0 0 auto;
}
.sm-qty.sm-qty-bar .sm-qty-value{
    flex:1 1 auto;
    font-size:15px;
    font-weight:700;
}

/* ---- wishlist + compare + share, all on one line ---- */
.sm-pd-actions{
    gap:8px !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    min-width:0;
}
.sm-pd-actions .sm-pd-wishlist{
    flex:0 1 auto;
    min-width:0;
    gap:6px;
    padding:9px 12px;
    overflow:hidden;
}
.sm-pd-actions .sm-pd-btn-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sm-pd-actions .sm-pd-share{ margin-left:auto; }

/* not enough room for the labels -> icon only buttons */
@media (max-width:575px){
    .sm-pd-actions .sm-pd-btn-label{ display:none; }
    .sm-pd-actions .sm-pd-wishlist{
        flex:0 0 auto;
        width:38px;
        height:38px;
        padding:0;
        justify-content:center;
        border-radius:9px;
    }
    .sm-pd-actions .sm-pd-wishlist i{ font-size:20px; }
    .sm-pd-share a{ width:38px; height:38px; }
}
@media (max-width:359px){
    .sm-pd-actions{ gap:6px !important; }
    .sm-pd-actions .sm-pd-wishlist,
    .sm-pd-share a{ width:34px; height:34px; font-size:18px; }
}

/* ============ One page checkout — resources/views/frontend/express_checkout.blade.php ============ */
.sm-ec-step{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px; height:22px;
    margin-right:6px;
    border-radius:50%;
    background:var(--primary, #e8262d);
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

/* ---- address cards ---- */
.sm-ec-address{
    display:block;
    margin-bottom:10px;
    cursor:pointer;
}
.sm-ec-address input{
    position:absolute;
    opacity:0;
    width:0; height:0;
}
.sm-ec-address-box{
    display:block;
    height:100%;
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding:12px 14px;
    font-size:13px;
    line-height:1.5;
    color:#333;
    background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sm-ec-address-box:hover{ border-color:#c9c9c9; }
.sm-ec-address input:checked + .sm-ec-address-box{
    border-color:var(--primary, #e8262d);
    box-shadow:0 0 0 1px var(--primary, #e8262d) inset;
    background:#fff8f8;
}

/* ---- payment tiles ---- */
.sm-ec-pay{
    display:block;
    margin-bottom:10px;
    cursor:pointer;
}
.sm-ec-pay input{
    position:absolute;
    opacity:0;
    width:0; height:0;
}
.sm-ec-pay-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:100%;
    min-height:84px;
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding:10px 8px;
    background:#fff;
    text-align:center;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sm-ec-pay-box img{
    height:26px;
    width:auto;
    max-width:80%;
    object-fit:contain;
}
.sm-ec-pay-box span{
    font-size:12px;
    font-weight:600;
    color:#333;
    line-height:1.3;
}
.sm-ec-pay-box:hover{ border-color:#c9c9c9; }
.sm-ec-pay input:checked + .sm-ec-pay-box{
    border-color:var(--primary, #e8262d);
    box-shadow:0 0 0 1px var(--primary, #e8262d) inset;
    background:#fff8f8;
}

/* ---- order summary ---- */
.sm-ec-summary{ position:sticky; top:14px; }
.sm-ec-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f4f4f4;
}
.sm-ec-item:last-of-type{ border-bottom:0; }
.sm-ec-item img{
    width:46px; height:46px;
    flex:0 0 46px;
    object-fit:contain;
    border:1px solid #f0f0f0;
    border-radius:8px;
    background:#fff;
}
.sm-ec-item-info{
    flex:1 1 auto;
    min-width:0;
}
.sm-ec-item-name{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#222;
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.sm-ec-item-meta{
    display:block;
    font-size:11px;
    color:#8b8b8b;
}
.sm-ec-item-price{
    flex:0 0 auto;
    font-size:13px;
    font-weight:700;
    color:#222;
    white-space:nowrap;
}
.sm-ec-total-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
    color:#555;
    padding:4px 0;
}
.sm-ec-total-row span:last-child{ font-weight:600; color:#222; white-space:nowrap; }
.sm-ec-total-row.grand{
    margin-top:6px;
    padding-top:10px;
    border-top:1px solid #eee;
    font-size:16px;
}
.sm-ec-total-row.grand span{ font-weight:700; color:#111; }
.sm-ec-total-row.grand span:last-child{ color:var(--primary, #e8262d); font-size:18px; }

/* ---- form bits ---- */
#express-checkout-form label{ color:#333; }
#express-checkout-form .form-control{ font-size:14px; }
#express-checkout-form textarea.form-control{ min-height:60px; }

/* ---- mobile ---- */
@media (max-width:991px){
    .sm-ec-summary{ position:static; }
}
@media (max-width:767px){
    #express-checkout-form .form-group{ margin-bottom:12px; }
    .sm-ec-address-box{ padding:10px 12px; font-size:12.5px; }
    .sm-ec-pay-box{
        min-height:74px;
        padding:8px 6px;
    }
    .sm-ec-pay-box img{ height:22px; }
    .sm-ec-pay-box span{ font-size:11px; }
    .sm-ec-item img{ width:40px; height:40px; flex:0 0 40px; }
    .sm-ec-item-name{ font-size:12px; }

    /* place order stays reachable on long forms */
    .sm-ec-summary .btn-primary{
        position:sticky;
        bottom:8px;
        z-index:5;
        padding:13px;
        font-size:15px;
        box-shadow:0 4px 14px rgba(0,0,0,.18);
    }
}

/* ============ Delivery location picker
                frontend/partials/delivery_location_modal.blade.php ============ */
/* header trigger */
.sm-loc-nav-item{ max-width:100%; min-width:0; }
.sm-loc-trigger{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:100%;
    padding:6px 0;
    color:#333;
    font-size:12px;
    text-decoration:none;
}
.sm-loc-trigger:hover{ color:var(--primary, #e8262d); text-decoration:none; }
.sm-loc-trigger > i:first-child{ font-size:15px; color:var(--primary, #e8262d); }
.sm-loc-caption{ opacity:.6; }
.sm-loc-text{
    font-weight:600;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sm-loc-caret{ font-size:9px; opacity:.6; }
@media (max-width:575px){
    .sm-loc-text{ max-width:120px; }
    .sm-loc-trigger{ font-size:11px; }
}

/* modal shell */
.sm-loc-modal .modal-dialog{ max-width:600px; }
.sm-loc-modal .modal-content{
    border:0;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.sm-loc-head{
    position:relative;
    padding:18px 20px 14px;
    border-bottom:1px solid #f0f0f0;
    background:linear-gradient(135deg, rgba(232,38,45,.06), #fff);
}
.sm-loc-title{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#1a1a1a;
}
.sm-loc-subtitle{
    font-size:12.5px;
    color:#6b7280;
}
.sm-loc-close{
    position:absolute;
    top:14px; right:14px;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid #e9ecef;
    border-radius:50%;
    background:#fff;
    color:#6b7280;
    font-size:15px;
    cursor:pointer;
    transition:all .2s ease;
}
.sm-loc-close:hover{ background:var(--primary, #e8262d); border-color:var(--primary, #e8262d); color:#fff; }
.sm-loc-body{
    padding:16px 20px 20px;
    max-height:74vh;
    overflow-y:auto;
}

/* search + gps */
.sm-loc-search{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:12px;
    padding:4px 6px 4px 12px;
    margin-bottom:14px;
}
.sm-loc-search:focus-within{
    border-color:var(--primary, #e8262d);
    box-shadow:0 0 0 3px rgba(232,38,45,.12);
}
.sm-loc-search-icon{ color:#9ca3af; font-size:16px; flex:0 0 auto; }
.sm-loc-input{
    flex:1 1 auto;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    font-size:14px;
    padding:9px 2px;
    color:#1a1a1a;
}
.sm-loc-clear{
    display:none;
    align-items:center; justify-content:center;
    width:26px; height:26px;
    flex:0 0 auto;
    border:0;
    border-radius:50%;
    background:#f1f2f5;
    color:#6b7280;
    cursor:pointer;
}
.sm-loc-clear.show{ display:flex; }
.sm-loc-gps{
    width:38px; height:38px;
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    border:0;
    border-radius:10px;
    background:var(--primary, #e8262d);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(232,38,45,.28);
}
.sm-loc-gps:hover{ opacity:.92; }
.sm-loc-gps.spinning i{ animation:sm-loc-spin .9s linear infinite; }
@keyframes sm-loc-spin{ to{ transform:rotate(360deg); } }

/* map */
.sm-loc-map-wrap{ position:relative; margin-bottom:14px; }
#sm-loc-map{
    width:100%;
    height:300px;
    border-radius:12px;
    background:#eef1f8;
}
.sm-loc-map-loading{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.7);
    border-radius:12px;
}
.sm-loc-map-loading.show{ display:flex; }
.sm-loc-spinner{
    width:34px; height:34px;
    border:3px solid rgba(0,0,0,.1);
    border-top-color:var(--primary, #e8262d);
    border-radius:50%;
    animation:sm-loc-spin .8s linear infinite;
}

/* detected info */
.sm-loc-info{
    border:1px solid #ffe0e1;
    background:#fff8f8;
    border-radius:12px;
    padding:10px 14px;
    margin-bottom:14px;
}
.sm-loc-info-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:5px 0;
    font-size:12.5px;
    border-bottom:1px solid rgba(0,0,0,.04);
}
.sm-loc-info-row:last-child{ border-bottom:0; }
.sm-loc-info-row > span:first-child{ font-weight:600; color:#6b7280; flex:0 0 auto; }
.sm-loc-info-row > span:last-child{ color:#1a1a1a; text-align:right; }

.sm-loc-label{
    display:block;
    font-size:11.5px;
    font-weight:600;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.3px;
    margin-bottom:4px;
}
.sm-loc-body .form-control{ font-size:13.5px; }

@media (max-width:575px){
    .sm-loc-modal .modal-dialog{ margin:.5rem; }
    #sm-loc-map{ height:230px; }
    .sm-loc-body{ padding:14px 14px 18px; max-height:80vh; }
    .sm-loc-head{ padding:14px 16px 12px; }
}

/* checkout: picked location banner */
.sm-ec-picked{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #ffe0e1;
    background:#fff8f8;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:14px;
}
.sm-ec-picked > i{ font-size:20px; color:var(--primary, #e8262d); flex:0 0 auto; }
.sm-ec-picked-text{ flex:1 1 auto; min-width:0; }
.sm-ec-picked-text span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sm-ec-picked-change{
    flex:0 0 auto;
    font-size:12px;
    font-weight:700;
    color:var(--primary, #e8262d);
}
.sm-ec-pick-map{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px dashed #d9d9d9;
    border-radius:10px;
    padding:9px 14px;
    margin-bottom:14px;
    font-size:13px;
    font-weight:600;
    color:#333;
}
.sm-ec-pick-map:hover{ border-color:var(--primary, #e8262d); color:var(--primary, #e8262d); }
.sm-ec-pick-map i{ font-size:18px; color:var(--primary, #e8262d); }

/* ============ Checkout OTP verification modal ============ */
.sm-otp-modal .modal-dialog{ max-width:400px; }
.sm-otp-modal .modal-content{
    border:0;
    border-radius:14px;
    overflow:visible;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.sm-otp-logo{
    position:absolute;
    top:-34px;
    left:50%;
    transform:translateX(-50%);
    width:68px; height:68px;
    border-radius:50%;
    background:#fff;
    border:1px solid #f0f0f0;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    z-index:2;
}
.sm-otp-logo img{ max-width:78%; max-height:78%; object-fit:contain; }
.sm-otp-body{ padding:46px 26px 26px; text-align:center; }
.sm-otp-title{
    font-size:19px;
    font-weight:700;
    color:#1a1a1a;
    margin:0 0 8px;
}
.sm-otp-text{
    font-size:13px;
    color:#6b7280;
    line-height:1.6;
    margin:0 0 16px;
}
.sm-otp-phone{ font-weight:600; color:#1a1a1a; }
.sm-otp-edit{ color:var(--primary, #e8262d); margin-left:2px; font-size:13px; }
.sm-otp-input{
    width:100%;
    height:46px;
    border:1px solid #d9d9d9;
    border-radius:8px;
    text-align:center;
    font-size:19px;
    font-weight:700;
    letter-spacing:6px;
    color:#1a1a1a;
    outline:0;
    margin-bottom:16px;
}
.sm-otp-input:focus{
    border-color:var(--primary, #e8262d);
    box-shadow:0 0 0 3px rgba(232,38,45,.12);
}
.sm-otp-verify{
    width:100%;
    border:0;
    border-radius:24px;
    background:var(--primary, #e8262d);
    color:#fff;
    font-size:15px;
    font-weight:700;
    padding:12px;
    cursor:pointer;
}
.sm-otp-verify:hover{ opacity:.92; }
.sm-otp-verify:disabled{ opacity:.7; cursor:not-allowed; }
.sm-otp-resend{
    margin:14px 0 0;
    font-size:12.5px;
    color:#6b7280;
}
.sm-otp-resend a{
    font-weight:700;
    color:var(--primary, #e8262d);
}
.sm-otp-resend a.disabled{
    color:#b9b9b9;
    pointer-events:none;
}
.sm-otp-resend #sm-otp-timer{
    font-weight:700;
    color:var(--primary, #e8262d);
    margin-left:2px;
}
@media (max-width:575px){
    .sm-otp-modal .modal-dialog{ max-width:none; margin:1.4rem 1rem; }
    .sm-otp-body{ padding:42px 18px 22px; }
}

/* ============ Checkout: express delivery scheduling ============ */
.sm-sched{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:8px;
    overflow:hidden;
}
.sm-sched-head{
    display:flex;
    align-items:center;
    gap:8px;
    background:#1f4e8c;
    color:#fff;
    padding:9px 14px;
    font-size:14px;
    font-weight:700;
}
.sm-sched-head i{ font-size:18px; }
.sm-sched-body{ padding:14px; }
.sm-sched-label{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:6px;
}
.sm-sched-label i{ font-size:15px; color:#1f4e8c; }
.sm-sched-body select.form-control{
    height:40px;
    font-size:13px;
}
@media (max-width:575px){
    .sm-sched-head{ font-size:13px; padding:8px 12px; }
    .sm-sched-body{ padding:12px; }
    .sm-sched-label{ font-size:12px; }
    .sm-sched-body select.form-control{ font-size:12px; }
}

/* desktop product details: stepper sits where the Add to cart button was */
.sm-cart-area-inline .sm-qty{
    background:#e8262d;
    border-radius:6px;
    padding:3px 5px;
    box-shadow:none;
    min-height:38px;
}
.sm-cart-area-inline .sm-qty-btn{ width:28px; height:28px; font-size:14px; }
.sm-cart-area-inline .sm-qty-value{ min-width:34px; font-size:15px; }

/* ============ Cart page — item list
                resources/views/frontend/partials/cart_details.blade.php ============ */
.sm-cart-card{
    --sm-accent:#e8262d;
    background:#fff;
    border-radius:10px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    overflow:hidden;
}
.sm-cart-head{
    padding:16px 18px;
    font-size:20px;
    font-weight:700;
    color:#111;
    border-bottom:1px solid #f0f0f0;
}
.sm-cart-list{
    list-style:none;
    margin:0;
    padding:0;
}
.sm-cart-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    border-bottom:1px solid #f2f2f2;
}
.sm-cart-item:last-child{ border-bottom:0; }

.sm-cart-thumb{
    flex:0 0 64px;
    width:64px; height:64px;
    border-radius:8px;
    overflow:hidden;
    background:#fafafa;
    display:block;
}
.sm-cart-thumb img{
    width:100%; height:100%;
    object-fit:contain;
}

.sm-cart-info{
    flex:1 1 auto;
    min-width:0;
}
.sm-cart-name{
    display:block;
    font-size:16px;
    font-weight:600;
    color:#1c1c1c;
    line-height:1.35;
    margin-bottom:5px;
}
.sm-cart-name:hover{ color:var(--sm-accent); }

.sm-cart-price-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:7px;
    line-height:1.3;
}
.sm-cart-price{
    font-size:17px;
    font-weight:700;
    color:var(--sm-accent);
}
.sm-cart-price-old{
    font-size:14px;
    color:var(--sm-accent);
    opacity:.75;
}
.sm-cart-unit{
    font-size:14px;
    color:#6b6b6b;
    font-weight:500;
}
.sm-cart-off{
    font-size:13px;
    font-weight:600;
    color:var(--sm-accent);
}
.sm-cart-tax{
    font-size:13px;
    color:#7a7a7a;
    margin-top:3px;
}

.sm-cart-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:14px;
}
.sm-cart-qty{
    display:flex;
    align-items:center;
    border:1px solid #e4e4e4;
    border-radius:8px;
    padding:2px;
}
.sm-cart-qty .input-number{
    width:44px;
    border:0;
    text-align:center;
    font-size:15px;
    font-weight:600;
    background:transparent;
    -moz-appearance:textfield;
}
.sm-cart-qty .input-number::-webkit-outer-spin-button,
.sm-cart-qty .input-number::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.sm-cart-line-total{
    font-size:16px;
    font-weight:700;
    color:#111;
    min-width:78px;
    text-align:right;
}
.sm-cart-remove{
    color:#9a9a9a;
    font-size:22px;
    line-height:1;
    display:inline-flex;
}
.sm-cart-remove:hover{ color:var(--sm-accent); }

.sm-cart-subtotal{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-top:1px solid #f0f0f0;
    font-size:15px;
    color:#6b6b6b;
}
.sm-cart-subtotal-value{
    font-size:19px;
    font-weight:700;
    color:#111;
}
.sm-cart-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 18px 18px;
    border-top:1px solid #f0f0f0;
}
.sm-cart-checkout{ min-width:200px; }

/* ---- tablet ---- */
@media (max-width:991px){
    .sm-cart-line-total{ min-width:0; }
}

/* ---- mobile ---- */
@media (max-width:767px){
    .sm-cart-head{ font-size:17px; padding:14px; }
    .sm-cart-item{
        flex-wrap:wrap;
        gap:12px;
        padding:14px;
    }
    .sm-cart-thumb{ flex:0 0 56px; width:56px; height:56px; }
    .sm-cart-info{
        /* name + price sit beside the thumb, actions drop to their own row */
        flex:1 1 0;
        width:auto;
    }
    .sm-cart-name{ font-size:14px; }
    .sm-cart-price{ font-size:15px; }
    .sm-cart-price-old, .sm-cart-unit{ font-size:13px; }
    .sm-cart-off{ font-size:12px; }

    .sm-cart-actions{
        flex:1 0 100%;
        justify-content:space-between;
        gap:10px;
    }
    .sm-cart-qty .input-number{ width:38px; font-size:14px; }
    .sm-cart-line-total{ font-size:15px; }

    .sm-cart-subtotal, .sm-cart-foot{ padding:14px; }
    .sm-cart-foot{
        flex-direction:column-reverse;
        align-items:stretch;
    }
    .sm-cart-checkout{ width:100%; min-width:0; }
    .sm-cart-back{ text-align:center; }
}
