/* ═══════════════════════════════════════════════════════════
   SecureCam Cart Plugin – Stylesheet
   Primary Color : #EA2340  |  Direction: RTL
═══════════════════════════════════════════════════════════ */

:root {
    --sc-red      : #EA2340;
    --sc-red-lt   : #fde8ec;
    --sc-red-dk   : #c41a33;
    --sc-bg       : #f4f6f8;
    --sc-card     : #ffffff;
    --sc-dark     : #1a1a1a;
    --sc-gray     : #6b7280;
    --sc-border   : #e5e7eb;
    --sc-shadow   : 0 2px 8px rgba(0,0,0,.05);
    --sc-shadow-h : 0 8px 24px rgba(0,0,0,.09);
    --sc-r-lg     : 16px;
    --sc-r-md     : 10px;
    --sc-r-sm     : 30px;
}

/* ── Page Wrapper ─────────────────────────────────────── */
.sc-page {
    max-width   : 1100px;
    margin      : 0 auto;
    padding     : 40px 24px;
    direction   : rtl;
    font-family : "Tahoma", "Vazirmatn", "IRANSans", system-ui, sans-serif;
    color       : var(--sc-dark);
}

/* ── Page Title ───────────────────────────────────────── */
.sc-title {
    font-size     : 28px;
    font-weight   : 200;
    margin-bottom : 32px;
    display       : flex;
    align-items   : center;
    gap           : 14px;
    flex-wrap     : wrap;
}

.sc-title span {
    font-size     : 14px;
    font-weight   : 200;
    color         : var(--sc-gray);
    background    : #e2e8f0;
    padding       : 4px 14px;
    border-radius : 20px;
}

/* ── Layout Grid ──────────────────────────────────────── */
.sc-layout {
    display               : grid;
    grid-template-columns : 1fr 360px;
    gap                   : 32px;
    align-items           : start;
}

/* ═══════════════════════════════════════════════════════
   CART ITEM CARD
═══════════════════════════════════════════════════════ */
.sc-item {
    background    : var(--sc-card);
    border-radius : var(--sc-r-lg);
    padding       : 22px;
    display       : flex;
    gap           : 20px;
    box-shadow    : var(--sc-shadow);
    transition    : transform .2s ease, box-shadow .2s ease;
    position      : relative;
    overflow      : hidden;
    margin-bottom : 20px;
}

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

.sc-item:hover {
    transform  : translateY(-2px);
    box-shadow : var(--sc-shadow-h);
}

/* Red accent bar slides in on hover */
.sc-item::before {
    content          : '';
    position         : absolute;
    right: 0; top: 0; bottom: 0;
    width            : 4px;
    background       : var(--sc-red);
    transform        : scaleY(0);
    transform-origin : bottom;
    transition       : transform .3s ease;
}
.sc-item:hover::before { transform: scaleY(1); }

/* Loading state */
.sc-item.sc-loading {
    opacity        : .5;
    pointer-events : none;
}

/* Product image box */
.sc-item-img {
    width          : 110px;
    height         : 110px;
    background     : linear-gradient(135deg, #f0f2f5, #e4e6ea);
    border-radius  : var(--sc-r-md);
    overflow       : hidden;
    flex-shrink    : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.sc-item-img a   { display: block; width: 100%; height: 100%; }
.sc-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* Item body */
.sc-item-body { flex: 1; display: flex; flex-direction: column; }

.sc-item-name {
    font-size     : 17px;
    font-weight   : 200;
    margin-bottom : 6px;
    line-height   : 1.5;
}
.sc-item-name a {
    color          : var(--sc-dark);
    text-decoration: none;
    transition     : color .2s;
}
.sc-item-name a:hover { color: var(--sc-red); }

.sc-item-desc {
    font-size     : 13px;
    color         : var(--sc-gray);
    margin-bottom : 14px;
    line-height   : 1.7;
}

/* WooCommerce variation data */
.woocommerce-cart-item__data,
dl.variation {
    font-size     : 13px;
    color         : var(--sc-gray);
    margin-bottom : 10px;
}

/* Item footer row */
.sc-item-foot {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-top      : auto;
    flex-wrap       : wrap;
    gap             : 12px;
}

.sc-item-price {
    font-size   : 18px;
    font-weight : 200;
    color       : var(--sc-red);
    transition  : color .2s;
}
.sc-item-price .woocommerce-Price-amount { color: var(--sc-red); }

/* Controls group */
.sc-controls {
    display     : flex;
    align-items : center;
    gap         : 12px;
}

/* Quantity wrapper */
.sc-qty-wrap {
    display       : flex;
    align-items   : center;
    background    : var(--sc-bg);
    border        : 1px solid var(--sc-border);
    border-radius : var(--sc-r-sm);
    padding       : 4px;
    gap           : 2px;
}

.sc-qbtn {
    background     : white;
    border         : none;
    width          : 30px;
    height         : 30px;
    border-radius  : 50%;
    font-size      : 17px;
    line-height    : 1;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : var(--sc-dark);
    box-shadow     : 0 1px 3px rgba(0,0,0,.08);
    transition     : background .2s, color .2s;
    flex-shrink    : 0;
}
.sc-qbtn:hover { background: var(--sc-red); color: white; }

.sc-qty-display {
    font-size   : 15px;
    font-weight : 200;
    width       : 32px;
    text-align  : center;
    user-select : none;
}

/* Remove button */
.sc-remove {
    background     : rgba(234,35,64,.1);
    color          : var(--sc-red);
    border         : none;
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    font-size      : 18px;
    line-height    : 1;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    transition     : all .2s;
    flex-shrink    : 0;
}
.sc-remove:hover {
    background : var(--sc-red);
    color      : white;
    transform  : rotate(90deg);
}

/* ═══════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════ */
.sc-empty {
    background    : var(--sc-card);
    border-radius : var(--sc-r-lg);
    padding       : 72px 32px;
    text-align    : center;
    box-shadow    : var(--sc-shadow);
}

.sc-empty-icon {
    font-size     : 72px;
    margin-bottom : 20px;
    opacity       : .5;
    display       : block;
}

.sc-empty h3 {
    font-size     : 22px;
    font-weight   : 200;
    margin-bottom : 10px;
}

.sc-empty p {
    color         : var(--sc-gray);
    margin-bottom : 24px;
    font-size     : 15px;
}

.sc-shop-link {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    background     : var(--sc-red-lt);
    color          : var(--sc-red);
    text-decoration: none;
    padding        : 12px 26px;
    border-radius  : 30px;
    font-weight    : 200;
    font-size      : 15px;
    transition     : all .2s;
}
.sc-shop-link:hover { background: var(--sc-red); color: white; }

/* ═══════════════════════════════════════════════════════
   SUMMARY PANEL
═══════════════════════════════════════════════════════ */
.sc-summary {
    background    : var(--sc-card);
    border-radius : var(--sc-r-lg);
    padding       : 28px;
    box-shadow    : var(--sc-shadow);
    position      : sticky;
    top           : 24px;
    border-top    : 6px solid var(--sc-red);
}

.sc-summary-head {
    font-size     : 20px;
    font-weight   : 200;
    margin-bottom : 20px;
    padding-bottom: 16px;
    border-bottom : 2px dashed var(--sc-border);
}

/* Rows */
.sc-rows { display: flex; flex-direction: column; }

.sc-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 14px;
    color           : var(--sc-gray);
    padding         : 11px 0;
    border-bottom   : 1px solid #f1f3f5;
}
.sc-row:last-of-type { border-bottom: none; }

/* Free shipping highlight */
.sc-free { color: var(--sc-red) !important; font-weight: 200; }

/* Discount row */
.sc-row--discount          { color: #059669; }
.sc-row--discount .sc-discount-val { color: #059669; font-weight: 200; }

.sc-rm-coupon {
    color          : var(--sc-red);
    text-decoration: none;
    font-weight    : 200;
    margin-right   : 6px;
    opacity        : .6;
    transition     : opacity .2s;
}
.sc-rm-coupon:hover { opacity: 1; }

/* Total row — kept at 16px as requested */
.sc-row--total {
    font-size    : 16px;
    font-weight  : 200;
    color        : var(--sc-dark);
    margin-top   : 8px;
    padding-top  : 16px;
    border-top   : 2px dashed var(--sc-border);
    border-bottom: none;
}

.sc-total-val,
.sc-total-val .woocommerce-Price-amount {
    color       : var(--sc-red) !important;
    font-size   : 16px;
    font-weight : 200;
}

/* ── Coupon Box ───────────────────────────────────────── */
.sc-coupon-box {
    padding       : 16px 0;
    border-bottom : 1px solid #f1f3f5;
}

.sc-coupon-wrap { display: flex; gap: 8px; }

.sc-coupon-input {
    flex          : 1;
    padding       : 11px 14px;
    border        : 1px solid var(--sc-border);
    border-radius : var(--sc-r-md);
    font-family   : inherit;
    font-size     : 14px;
    background    : var(--sc-bg);
    color         : var(--sc-dark);
    outline       : none;
    direction     : rtl;
    transition    : border-color .2s, background .2s;
}
.sc-coupon-input:focus   { border-color: var(--sc-red); background: white; }
.sc-coupon-input:disabled{ opacity: .55; cursor: not-allowed; }

.sc-coupon-btn {
    background    : var(--sc-red-lt);
    color         : var(--sc-red);
    border        : none;
    padding       : 0 18px;
    border-radius : var(--sc-r-md);
    font-weight   : 200;
    font-family   : inherit;
    font-size     : 14px;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : all .2s;
}
.sc-coupon-btn:hover    { background: var(--sc-red); color: white; }
.sc-coupon-btn:disabled { opacity: .5; cursor: wait; }

.sc-coupon-msg {
    font-size  : 13px;
    margin-top : 8px;
    font-weight: 200;
    display    : none;
}
.sc-coupon-msg.sc-ok  { color: #059669; display: block; }
.sc-coupon-msg.sc-err { color: var(--sc-red); display: block; }

/* ── Checkout Button ──────────────────────────────────── */
.sc-checkout-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    width           : 100%;
    margin-top      : 22px;
    background      : var(--sc-red);
    color           : white;
    text-decoration : none;
    padding         : 16px;
    font-size       : 17px;
    font-weight     : 200;
    font-family     : inherit;
    border-radius   : var(--sc-r-md);
    box-shadow      : 0 4px 14px rgba(234,35,64,.28);
    transition      : all .3s;
    cursor          : pointer;
}
.sc-checkout-btn:hover {
    background : var(--sc-red-dk);
    color      : white;
    transform  : translateY(-2px);
    box-shadow : 0 6px 20px rgba(234,35,64,.38);
}

/* ── Secure Badge ─────────────────────────────────────── */
.sc-secure {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    margin-top      : 16px;
    font-size       : 12px;
    color           : var(--sc-gray);
    background      : var(--sc-bg);
    padding         : 10px;
    border-radius   : 8px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 940px) {
    .sc-layout { grid-template-columns: 1fr; }
    .sc-summary { position: static; }
}

@media (max-width: 600px) {
    .sc-page    { padding: 20px 14px; }
    .sc-title   { font-size: 22px; }

    .sc-item {
        flex-direction: column;
        padding       : 16px;
    }

    .sc-item-img {
        width  : 100%;
        height : 180px;
    }

    .sc-item-foot {
        flex-direction: column;
        align-items   : flex-start;
    }

    .sc-controls { width: 100%; justify-content: space-between; }
    .sc-summary  { padding: 20px; }
}