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

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

/* ── Section Cards ── */
.co-card {
    background:    #fff;
    border-radius: var(--co-radius);
    box-shadow:    0 2px 20px rgba(34,66,41,.07);
    padding:       24px 22px;
    margin-bottom: 20px;
}

.co-card__title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--co-primary);
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--co-border);
}
.co-card__title i { font-size: 16px; }

/* ── Form Fields ── */
.co-label {
    font-size:      12px;
    font-weight:    700;
    color:          var(--co-text);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom:  5px;
    display:        block;
}

.co-input {
    width:       100%;
    border:      1.5px solid var(--co-border);
    border-radius: 10px;
    padding:     10px 14px;
    font-size:   14px;
    color:       var(--co-text);
    outline:     none;
    transition:  border-color .2s;
    background:  #fff;
}
.co-input:focus          { border-color: var(--co-primary); }
.co-input[readonly]      { background: var(--co-light); color: var(--co-muted); }
textarea.co-input        { resize: vertical; min-height: 80px; }

/* ── Shipping Select ── */
.co-select {
    width:         100%;
    border:        1.5px solid var(--co-border);
    border-radius: 10px;
    padding:       10px 14px;
    font-size:     14px;
    color:         var(--co-text);
    outline:       none;
    transition:    border-color .2s;
    background:    #fff;
    cursor:        pointer;
    appearance:    auto;
}
.co-select:focus { border-color: var(--co-primary); }

/* ── Payment Method Cards ── */
.pay-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap:                   12px;
}

.pay-card {
    border:          2px solid var(--co-border);
    border-radius:   12px;
    padding:         14px 10px;
    text-align:      center;
    cursor:          pointer;
    transition:      all .25s;
    background:      #fff;
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
}
.pay-card:hover { border-color: var(--co-primary); background: var(--co-primary-faint); }
.pay-card input[type="radio"] { display: none; }
.pay-card input[type="radio"]:checked ~ .pay-card__body { color: var(--co-primary); }

.pay-card.active {
    border-color: var(--co-primary);
    background:   var(--co-primary-faint);
    box-shadow:   0 0 0 3px rgba(34,66,41,.12);
}
.pay-card.active::after {
    content:         '\f00c';
    font-family:     'Font Awesome 5 Free';
    font-weight:     900;
    position:        absolute;
    top:             8px;
    inset-inline-end: 8px; /* right in LTR, left in RTL */
    width:           20px;
    height:          20px;
    background:      var(--co-primary);
    color:           #fff;
    border-radius:   50%;
    font-size:       10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.pay-card__img  { max-height: 36px; object-fit: contain; margin-bottom: 8px; }
.pay-card__name { font-size: 13px; font-weight: 700; color: var(--co-primary); }

/* ── Order Summary Sidebar ── */
.co-summary-col {
    align-self: flex-start;
    position:   sticky;
}

.co-summary {
    background:    #fff;
    border-radius: var(--co-radius);
    box-shadow:    0 2px 20px rgba(34,66,41,.07);
    padding:       22px 20px;
}

.co-summary__title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--co-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--co-border);
    margin-bottom: 14px;
}

/* ── Order Items ── */
.co-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 0;
    border-bottom: 1px solid var(--co-border);
    font-size:     13px;
}
.co-item:last-of-type { border-bottom: none; }

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

.co-item__name  { font-weight: 600; color: var(--co-text); flex: 1; }
.co-item__meta  { font-size: 11px; color: var(--co-muted); }
.co-item__price { font-weight: 700; color: var(--co-primary); white-space: nowrap; }

/* ── Quantity Badge ── */
.co-item__qty {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--co-primary);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    min-width:       22px;
    height:          22px;
    border-radius:   6px;
    padding:         0 5px;
    flex-shrink:     0;
}

/* ── Totals ── */
.co-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       13px;
    color:           var(--co-muted);
    padding:         6px 0;
}
.co-total-row.grand {
    font-size:    17px;
    font-weight:  800;
    color:        var(--co-text);
    border-top:   1px solid var(--co-border);
    padding-top:  10px;
    margin-top:   4px;
}
.co-total-row.grand .val { color: var(--co-primary); }

/* ── Free Shipping Bar ── */
.co-fs-bar {
    background:    var(--co-primary-faint);
    border-radius: 10px;
    padding:       10px 12px;
    margin:        12px 0;
    font-size:     12px;
    color:         var(--co-primary);
    font-weight:   600;
}
.co-fs-track {
    height:        5px;
    background:    #c8deca;
    border-radius: 10px;
    margin-top:    7px;
    overflow:      hidden;
}
.co-fs-fill {
    height:        100%;
    background:    var(--co-primary);
    border-radius: 10px;
    transition:    width .4s;
}

/* ── Submit Button ── */
.btn-submit {
    display:       block;
    width:         100%;
    background:    var(--co-primary);
    color:         #fff;
    border:        none;
    border-radius: 30px;
    padding:       12px;
    font-size:     15px;
    font-weight:   700;
    text-align:    center;
    cursor:        pointer;
    transition:    all .3s;
    box-shadow:    0 4px 14px rgba(34,66,41,.25);
    margin-top:    16px;
}
.btn-submit:hover {
    background:  var(--co-primary-light);
    transform:   translateY(-2px);
    box-shadow:  0 6px 18px rgba(34,66,41,.3);
}

.btn-submit--blocked {
    background:     #adb5bd !important;
    pointer-events: none;
    box-shadow:     none !important;
    transform:      none !important;
    cursor:         not-allowed !important;
}

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

.badge-soldout {
    display:        inline-block;
    background:     #fdecea;
    color:          #c0392b;
    font-size:      10px;
    font-weight:    800;
    padding:        2px 7px;
    border-radius:  20px;
    text-transform: uppercase;
    vertical-align: middle;
}

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

/* ── Guest Banner ── */
.co-guest-banner {
    background:      #e8f4fd;
    border:          1px solid #b8daff;
    border-radius:   var(--co-radius);
    padding:         18px 22px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   20px;
}
.co-guest-banner p { margin: 0; font-size: 14px; color: #0c5460; font-weight: 600; }

.co-guest-btn {
    background:      var(--co-primary);
    color:           #fff;
    border:          none;
    border-radius:   20px;
    padding:         7px 20px;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    transition:      background .2s;
}
.co-guest-btn:hover { background: var(--co-primary-light); color: #fff; }

/* ── Trust Badge Cards (shared) ── */
.sp-trust-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    background:            #fff;
    border-radius:         var(--co-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(--co-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(--co-primary);
    opacity:         .75;
}
.sp-trust-card__title { font-size: 14px; font-weight: 700; color: var(--co-text); margin-bottom: 4px; }
.sp-trust-card__body  { font-size: 13px; color: var(--co-muted); line-height: 1.6; }

/* ── Fixed bottom submit (mobile) ── */
.co-sticky-submit {
    display:     none;
    position:    fixed;
    bottom:      0;
    inset-inline: 0; /* left:0; right:0 — logical */
    background:  #fff;
    border-top:  1px solid var(--co-border);
    padding:     12px 16px;
    z-index:     999;
    box-shadow:  0 -4px 20px rgba(0,0,0,.1);
}
.co-sticky-submit .btn-submit { margin-top: 0; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .co-summary-col       { position: static; }
    .co-sticky-submit     { display: block; }
    body                  { padding-bottom: 80px; }
}

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