/* ============================================================
   cart.css  — Shopping cart page styles
   RTL-aware via CSS logical properties throughout
   ============================================================ */

/* ── CSS Variables ── */
:root {
    --cart-primary:       #224229;
    --cart-primary-light: #2d5535;
    --cart-primary-faint: #eef4ef;
    --cart-accent:        #dc3545;
    --cart-light:         #f7f8fa;
    --cart-border:        #e8ecf0;
    --cart-text:          #1a1a2e;
    --cart-muted:         #6c757d;
    --cart-radius:        14px;
}

/* ── Cart Item Card ── */
.cart-wrap {
    background:    #fff;
    border-radius: var(--cart-radius);
    box-shadow:    0 2px 20px rgba(34,66,41,.07);
    overflow:      hidden;
}

.cart-wrap__header {
    padding:       16px 20px;
    border-bottom: 1px solid var(--cart-border);
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.cart-wrap__header h5 {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
    color:       var(--cart-primary);
}

.cart-item {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       16px 20px;
    border-bottom: 1px solid var(--cart-border);
    transition:    background .2s;
}

.cart-item:last-child { border-bottom: none; }
.cart-item:hover      { background: #fafafa; }

.cart-item__img {
    width:       72px;
    height:      72px;
    border-radius: 10px;
    object-fit:  cover;
    border:      1px solid var(--cart-border);
    background:  var(--cart-light);
    flex-shrink: 0;
}

.cart-item__info { flex: 1; min-width: 0; }

.cart-item__name {
    font-size:     15px;
    font-weight:   700;
    color:         var(--cart-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
    margin-bottom: 4px;
}

.cart-item__meta {
    font-size:   12px;
    color:       var(--cart-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.cart-item__color-dot {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    border:        1px solid #ccc;
    display:       inline-block;
}

.cart-item__price {
    font-size:   14px;
    font-weight: 600;
    color:       var(--cart-muted);
    text-align:  center;
    min-width:   70px;
}

.cart-item__total {
    font-size:   16px;
    font-weight: 800;
    color:       var(--cart-primary);
    text-align:  center;
    min-width:   80px;
}

.cart-item__remove {
    background:  none;
    border:      none;
    color:       var(--cart-accent);
    font-size:   16px;
    cursor:      pointer;
    transition:  color .2s;
    padding:     4px 6px;
    flex-shrink: 0;
}
.cart-item__remove:hover { color: var(--cart-accent); }

/* ── Qty Stepper ── */
.qty-wrap {
    display:       inline-flex;
    align-items:   center;
    border:        1.5px solid var(--cart-border);
    border-radius: 8px;
    overflow:      hidden;
    background:    #fff;
}

.qty-btn {
    width:       30px;
    height:      32px;
    border:      none;
    background:  var(--cart-light);
    font-size:   14px;
    color:       var(--cart-primary);
    cursor:      pointer;
    font-weight: 700;
    transition:  background .2s;
}
.qty-btn:hover { background: var(--cart-primary-faint); }

.qty-input {
    width:       40px;
    height:      32px;
    border:      none;
    text-align:  center;
    font-size:   14px;
    font-weight: 700;
    outline:     none;
    background:  #fff;
    color:       var(--cart-text);
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Order Summary ── */
.order-summary {
    background:    #fff;
    border-radius: var(--cart-radius);
    box-shadow:    0 2px 20px rgba(34,66,41,.07);
    padding:       22px 20px;
    position:      sticky;
    top:           90px;
}

.order-summary h5 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--cart-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cart-border);
    margin-bottom: 16px;
}

.order-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       14px;
    color:           var(--cart-muted);
    margin-bottom:   10px;
}

.order-row.total {
    font-size:    18px;
    font-weight:  800;
    color:        var(--cart-text);
    border-top:   1px solid var(--cart-border);
    padding-top:  12px;
    margin-top:   6px;
}

.order-row.total .val { color: var(--cart-primary); }

/* ── Free Shipping Bar ── */
.fs-bar-wrap {
    background:    var(--cart-primary-faint);
    border-radius: 10px;
    padding:       12px 14px;
    margin-bottom: 16px;
    font-size:     13px;
    color:         var(--cart-primary);
    font-weight:   600;
}

.fs-bar-track {
    height:        6px;
    background:    #d0e4d3;
    border-radius: 10px;
    margin-top:    8px;
    overflow:      hidden;
}

.fs-bar-fill {
    height:        100%;
    background:    var(--cart-primary);
    border-radius: 10px;
    transition:    width .4s ease;
}

/* ── Checkout Button ── */
.btn-checkout {
    display:         block;
    width:           100%;
    background:      var(--cart-primary);
    color:           #fff;
    border:          none;
    border-radius:   30px;
    padding:         7px 16px;
    font-size:       14px;
    font-weight:     700;
    text-align:      center;
    text-decoration: none;
    cursor:          pointer;
    transition:      all .3s;
    box-shadow:      0 3px 10px rgba(34,66,41,.2);
    margin-bottom:   10px;
}

.btn-checkout:hover {
    background:  var(--cart-primary-light);
    color:       #fff;
    transform:   translateY(-2px);
    box-shadow:  0 6px 18px rgba(34,66,41,.3);
}

.btn-continue {
    display:         block;
    width:           100%;
    background:      #e9ecef;
    color:           #495057;
    border:          none;
    border-radius:   30px;
    padding:         7px 16px;
    font-size:       13px;
    font-weight:     600;
    text-align:      center;
    text-decoration: none;
    cursor:          pointer;
    transition:      all .2s;
}
.btn-continue:hover { background: #dee2e6; color: #343a40; }

/* ── Trust Badge Cards (shared with single-product) ── */
.sp-trust-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    background:            #fff;
    border-radius:         var(--cart-radius);
    box-shadow:            0 4px 24px rgba(34,66,41,.06);
    overflow:              hidden;
    margin-top:            32px;
}

.sp-trust-card {
    display:           flex;
    align-items:       flex-start;
    gap:               14px;
    padding:           24px 22px;
    border-inline-end: 1px solid var(--cart-border); /* logical → RTL safe */
}
.sp-trust-card:last-child { border-inline-end: none; }

.sp-trust-card__icon {
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    color:           var(--cart-primary);
    opacity:         .75;
}

.sp-trust-card__title { font-size: 14px; font-weight: 700; color: var(--cart-text); margin-bottom: 4px; }
.sp-trust-card__body  { font-size: 13px; color: var(--cart-muted); line-height: 1.6; }

/* ── Sold Out / Overstock Badges ── */
.cart-item--soldout           { opacity: .6; }
.cart-item--soldout .cart-item__img { filter: grayscale(60%); }

.badge-soldout {
    display:        inline-block;
    background:     #fdecea;
    color:          #c0392b;
    font-size:      10px;
    font-weight:    800;
    padding:        2px 8px;
    border-radius:  20px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.badge-overstock {
    display:        inline-block;
    background:     #fff3cd;
    color:          #856404;
    font-size:      10px;
    font-weight:    800;
    padding:        2px 8px;
    border-radius:  20px;
    letter-spacing: .3px;
}

.qty-wrap--disabled { opacity: .4; pointer-events: none; }

.checkout-blocked {
    background:     #e9ecef !important;
    color:          #6c757d !important;
    pointer-events: none;
    box-shadow:     none !important;
}

.soldout-warning {
    background:    #fdecea;
    color:         #c0392b;
    border-radius: 10px;
    padding:       10px 14px;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 12px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.overstock-warning {
    background:    #fff3cd;
    color:         #856404;
    border-radius: 10px;
    padding:       10px 14px;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 12px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

/* ── Empty Cart ── */
.empty-cart-box {
    background:    #fff;
    border-radius: var(--cart-radius);
    box-shadow:    0 2px 20px rgba(34,66,41,.07);
    padding:       60px 30px;
    text-align:    center;
}
.empty-cart-box i  { font-size: 64px; color: #ddd; margin-bottom: 20px; display: block; }
.empty-cart-box h4 { color: var(--cart-text); font-weight: 700; margin-bottom: 8px; }
.empty-cart-box p  { color: var(--cart-muted); font-size: 14px; margin-bottom: 24px; }

.btn-go-store {
    display:         inline-block;
    background:      var(--cart-primary);
    color:           #fff;
    border-radius:   30px;
    padding:         10px 30px;
    font-size:       15px;
    font-weight:     700;
    text-decoration: none;
    transition:      all .3s;
    box-shadow:      0 4px 14px rgba(34,66,41,.25);
}
.btn-go-store:hover { background: var(--cart-primary-light); color: #fff; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .cart-item    { flex-wrap: wrap; }
    .cart-item__img { width: 56px; height: 56px; }
    .order-summary { position: static; margin-top: 16px; }

    .sp-trust-cards { grid-template-columns: 1fr; }
    .sp-trust-card  { border-inline-end: none; border-bottom: 1px solid var(--cart-border); }
    .sp-trust-card:last-child { border-bottom: none; }
}