/* ============================================================
   single-product.css  — Product detail page styles
   RTL-aware via CSS logical properties throughout
   ============================================================ */

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

/* ── Page Title / Breadcrumb ── */
#page-title { background: #224229; }

/* ── Product Wrapper ── */
.sp-card {
    background:    #fff;
    border-radius: var(--sp-radius);
    box-shadow:    0 4px 32px rgba(34,66,41,.08);
    padding:       32px 28px;
    margin-bottom: 32px;
}

/* ── Image Side ── */
.sp-image-wrap {
    position: sticky;
    top: 90px;
}
.sp-main-img {
    border-radius:   14px;
    overflow:        hidden;
    background:      var(--sp-light);
    border:          1px solid var(--sp-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      360px;
}
.sp-main-img img {
    width:      100%;
    max-height: 420px;
    object-fit: contain;
    transition: transform .45s ease;
}
.sp-main-img:hover img { transform: scale(1.05); }

/* ── Discount Badge on Image (logical position → RTL safe) ── */
.sp-discount-ribbon {
    position:           absolute;
    top:                14px;
    inset-inline-start: 14px; /* left in LTR, right in RTL */
    background:         var(--sp-accent);
    color:              #fff;
    font-size:          13px;
    font-weight:        700;
    padding:            4px 12px;
    border-radius:      20px;
    z-index:            2;
    box-shadow:         0 2px 8px rgba(220,53,69,.3);
}

/* ── Details Side ── */
.sp-title {
    font-size:   26px;
    font-weight: 800;
    color:       var(--sp-primary);
    line-height: 1.3;
}
.sp-short-desc {
    font-size:   14.5px;
    color:       var(--sp-muted);
    line-height: 1.7;
    margin:      8px 0 16px;
}

/* ── Price ── */
.sp-price-row    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-price-current { font-size: 30px; font-weight: 800; color: var(--sp-primary); }
.sp-price-old    { font-size: 17px; color: #aaa; text-decoration: line-through; }

.sp-badge-discount {
    background:    var(--sp-accent);
    color:         #fff;
    font-size:     12px;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 20px;
}
.sp-badge-bestseller {
    background:         var(--sp-gold);
    color:              #fff;
    font-size:          12px;
    font-weight:        700;
    padding:            3px 10px;
    border-radius:      20px;
    vertical-align:     middle;
    margin-inline-start: 6px; /* logical → RTL safe */
}

/* ── Divider ── */
.sp-divider { border: none; border-top: 1px solid var(--sp-border); margin: 18px 0; }

/* ── Color Picker ── */
.sp-label {
    font-size:      13px;
    font-weight:    700;
    color:          var(--sp-text);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom:  8px;
}
.sp-color-btn {
    width:         34px;
    height:        34px;
    border-radius: 50%;
    border:        3px solid transparent;
    cursor:        pointer;
    transition:    all .25s;
    outline:       none;
    box-shadow:    0 1px 4px rgba(0,0,0,.18);
}
.sp-color-btn:hover  { transform: scale(1.15); }
.sp-color-btn.selected {
    border-color: var(--sp-primary);
    box-shadow:   0 0 0 3px rgba(34,66,41,.25);
    transform:    scale(1.12);
}

/* ── Size Picker ── */
.sp-size-label {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       48px;
    height:          40px;
    padding:         0 14px;
    border:          2px solid var(--sp-border);
    border-radius:   10px;
    font-size:       14px;
    font-weight:     600;
    color:           var(--sp-text);
    cursor:          pointer;
    transition:      all .25s;
    background:      #fff;
    user-select:     none;
}
.sp-size-label:hover {
    border-color: var(--sp-primary);
    color:        var(--sp-primary);
    background:   var(--sp-primary-faint);
}
.sp-size-radio { display: none; }
.sp-size-radio:checked + .sp-size-label {
    border-color: var(--sp-primary);
    background:   var(--sp-primary);
    color:        #fff;
    box-shadow:   0 2px 8px rgba(34,66,41,.25);
}

/* ── Quantity ── */
.sp-qty-wrap {
    display:       inline-flex;
    align-items:   center;
    border:        2px solid var(--sp-border);
    border-radius: 12px;
    overflow:      hidden;
    background:    #fff;
}
.sp-qty-btn {
    width:       40px;
    height:      44px;
    border:      none;
    background:  var(--sp-light);
    font-size:   18px;
    color:       var(--sp-primary);
    cursor:      pointer;
    transition:  background .2s;
    font-weight: 700;
}
.sp-qty-btn:hover { background: var(--sp-primary-faint); }
.sp-qty-input {
    width:       52px;
    height:      44px;
    border:      none;
    text-align:  center;
    font-size:   16px;
    font-weight: 700;
    color:       var(--sp-text);
    outline:     none;
    background:  #fff;
}
.sp-qty-input::-webkit-inner-spin-button,
.sp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Add to Cart ── */
.sp-btn-cart {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    var(--sp-primary);
    color:         #fff;
    border:        none;
    border-radius: 30px;
    padding:       7px 20px;
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    all .3s;
    box-shadow:    0 4px 16px rgba(34,66,41,.3);
}
.sp-btn-cart:hover {
    background: var(--sp-primary-light);
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,66,41,.35);
}
.sp-btn-cart:active { transform: translateY(0); }

/* ── WhatsApp Button ── */
.sp-btn-whatsapp {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    #25d366;
    color:         #fff;
    border:        none;
    border-radius: 30px;
    padding:       13px 28px;
    font-size:     16px;
    font-weight:   700;
    cursor:        pointer;
    transition:    all .3s;
    text-decoration: none;
    box-shadow:    0 4px 14px rgba(37,211,102,.3);
}
.sp-btn-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); }

/* ── Success Alert ── */
.sp-cart-alert {
    background:    #d4edda;
    border:        1px solid #c3e6cb;
    color:         #155724;
    border-radius: 12px;
    padding:       12px 18px;
    font-size:     14px;
    display:       none;
    margin-top:    14px;
    animation:     sp-fadeInDown .3s ease;
}
@keyframes sp-fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Inline Trust Badges ── */
.sp-trust {
    display:    flex;
    flex-wrap:  wrap;
    gap:        14px;
    margin-top: 20px;
}
.sp-trust-item {
    display:       flex;
    align-items:   center;
    gap:           7px;
    background:    var(--sp-primary-faint);
    border-radius: 10px;
    padding:       8px 14px;
    font-size:     13px;
    color:         var(--sp-primary);
    font-weight:   600;
}
.sp-trust-item i { font-size: 16px; }

/* ── Share ── */
.sp-share       { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sp-share-label { font-size: 13px; font-weight: 700; color: var(--sp-muted); }
.sp-share-btn {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid var(--sp-border);
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    cursor:          pointer;
    transition:      all .25s;
    text-decoration: none;
    color:           var(--sp-text);
}
.sp-share-btn:hover { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }

/* ── Description Section ── */
.sp-desc-section {
    background:    #fff;
    border-radius: var(--sp-radius);
    box-shadow:    0 4px 24px rgba(34,66,41,.06);
    padding:       28px;
    margin-bottom: 40px;
}
.sp-desc-title {
    font-size:            20px;
    font-weight:          800;
    color:                var(--sp-primary);
    /* logical border → left in LTR, right in RTL */
    border-inline-start:  4px solid var(--sp-primary);
    padding-inline-start: 12px;
    margin-bottom:        16px;
}
.sp-desc-body { font-size: 15px; color: #444; line-height: 1.9; }

/* ── Trust Badge Cards (grid) ── */
.sp-trust-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    background:            #fff;
    border-radius:         var(--sp-radius);
    box-shadow:            0 4px 24px rgba(34,66,41,.06);
    overflow:              hidden;
    margin-bottom:         40px;
}
.sp-trust-card {
    display:         flex;
    align-items:     flex-start;
    gap:             14px;
    padding:         24px 22px;
    border-inline-end: 1px solid var(--sp-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(--sp-primary);
    opacity:         .75;
}
.sp-trust-card__title { font-size: 14px; font-weight: 700; color: var(--sp-text); margin-bottom: 4px; }
.sp-trust-card__body  { font-size: 13px; color: var(--sp-muted); line-height: 1.6; }

/* ── Out of Stock Badge ── */
.sp-out-badge {
    display:       inline-block;
    background:    #fff3cd;
    color:         #856404;
    border:        1px solid #ffc107;
    border-radius: 8px;
    padding:       6px 14px;
    font-size:     13px;
    font-weight:   700;
    margin-bottom: 12px;
}

/* ── Mobile sticky bar ── */
.sp-sticky-bar {
    display:     none;
    position:    fixed;
    bottom:      0;
    inset-inline: 0; /* left:0; right:0 — logical */
    background:  #fff;
    border-top:  1px solid var(--sp-border);
    padding:     12px 16px;
    z-index:     999;
    box-shadow:  0 -4px 20px rgba(0,0,0,.1);
    gap:         10px;
    align-items: center;
}
.sp-sticky-bar .sp-btn-cart { flex: 1; justify-content: center; padding: 12px; font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .sp-sticky-bar  { display: flex; }
    .sp-card        { padding: 18px 14px; }
    .sp-title       { font-size: 20px; }
    .sp-price-current { font-size: 24px; }
    .sp-image-wrap  { position: static; }
    body            { padding-bottom: 80px; }

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