/**
 * Bigpixel_CustomCheckout — Checkout Styles
 */

/* ── Step 1: Gift Card Form ───────────────────────────────────────────────── */
.bigpixel-gc-intro {
    color: #575757;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.bigpixel-gc-field .label {
    font-weight: 600;
    font-size: 1.4rem;
    display: block;
    margin-bottom: 0.6rem;
}

.bigpixel-gc-field .input-text {
    width: 100%;
    max-width: 40rem;
}

.bigpixel-gc-actions { margin-top: 2rem; }

.bigpixel-gc-secondary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.bigpixel-gc-check {
    font-size: 1.3rem;
    color: #1979c3;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.bigpixel-gc-check:hover { color: #006bb4; }

.bigpixel-gc-divider {
    color: #ccc;
    font-size: 1.4rem;
    line-height: 1;
}

.bigpixel-gc-skip {
    font-size: 1.3rem;
    color: #757575;
    text-decoration: underline;
}

.bigpixel-gc-skip:hover { color: #333; }

.bigpixel-gc-success {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: #f0fff0;
    border: 1px solid #4caf50;
    border-radius: 4px;
}

.bigpixel-gc-remove {
    font-size: 1.2rem;
    color: #e02b27;
    text-decoration: underline;
    margin-left: auto;
}

.bigpixel-gc-error { margin-bottom: 1.5rem; }

/* ── Gift card info panel (Check Status result) ───────────────────────────── */
.bigpixel-gc-info {
    background: #f0f7ff;
    border: 1px solid #b3d4f5;
    border-left: 4px solid #1979c3;
    border-radius: 0 4px 4px 0;
    padding: 1.2rem 1.6rem;
    margin: 1.5rem 0;
}

.bigpixel-gc-info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.6rem;
    margin: 0;
}

.bigpixel-gc-info-list dt {
    font-weight: 600;
    color: #575757;
    font-size: 1.3rem;
}

.bigpixel-gc-info-list dd {
    color: #333;
    font-size: 1.3rem;
    margin: 0;
}

/* ── Shipping note (above shipping methods on Step 2) ────────────────────── */
.bigpixel-gc-shipping-note-wrapper { margin: 0; padding: 0; }

.bigpixel-gc-shipping-note-text {
    font-size: 1.3rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* ── Shipping price: strikethrough + FREE ─────────────────────────────────── */
/* JS injects .bigpixel-price-struck and .bigpixel-free-label spans           */
.bigpixel-price-struck {
    text-decoration: line-through !important;
    color: #999 !important;
}

.bigpixel-free-label {
    color: #006400;
    font-weight: 700;
    font-size: 1.3rem;
    margin-left: 6px;
}

/* ── Payment page order summary: shipping row strikethrough via CSS ─────────  */
/* Targets the shipping row only — excludes our Free Shipping (Gift Card) row  */
body.bigpixel-gc-applied .opc-block-summary .totals.shipping:not(.bigpixel-gc-free-shipping) .price,
body.bigpixel-gc-applied .opc-block-summary .totals.shipping:not(.bigpixel-gc-free-shipping) td.amount .price {
    text-decoration: line-through !important;
    color: #999 !important;
}

/* ── GC free shipping discount line in totals — green color ──────────────── */
.table-totals .totals.bigpixel-gc-free-shipping .price,
.opc-block-summary .totals.bigpixel-gc-free-shipping .price {
    color: #006400;
    font-weight: 600;
}

/* ── Hide Magento default discount/coupon block ───────────────────────────── */
.payment-option.discount-code { display: none !important; }

/* ── Step 1: Applied GC info text (mirrors cart page) ────────────────────── */
.bigpixel-gc-applied-info {
    margin: 0.8rem 0 1.5rem;
    padding: 0;
}

.bigpixel-gc-applied-info p {
    font-size: 1.3rem;
    color: #333;
    font-weight: 600;
    margin: 0 0 0.2rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Cart page styles                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cart page: strike through the shipping row when GC free shipping active ─ */
/* The phtml adds body.bigpixel-gc-applied via inline JS on render.             */
/* Targets the standard shipping row; excludes our own free-shipping row.       */
body.bigpixel-gc-applied .table-totals .totals.shipping:not(.bigpixel-gc-free-shipping) .price,
body.bigpixel-gc-applied .cart-totals .totals.shipping:not(.bigpixel-gc-free-shipping) .price {
    text-decoration: line-through !important;
    color: #999 !important;
}

/* ── Cart page: Free Shipping row amount cell layout ─────────────────────── */
/* Aligns the struck-through price and FREE label side by side.                */
.bigpixel-gc-free-cell {
    white-space: nowrap;
}

.bigpixel-gc-free-cell .bigpixel-price-struck {
    display: inline;
}

.bigpixel-gc-free-cell .bigpixel-free-label {
    display: inline;
    margin-left: 6px;
}

/* ── Cart page KO sidebar: strike shipping row when free shipping segment active ─ */
/* Uses CSS sibling/general selector — our row follows the shipping row.            */
/* The body.bigpixel-gc-applied class is added by the PHP phtml inline script.      */
/* For the KO sidebar (right panel), we target by our row being present.            */
.table-totals .totals.bigpixel-gc-free-shipping ~ .totals.shipping .price,
.table-totals .totals.shipping:has(~ .totals.bigpixel-gc-free-shipping) .price {
    text-decoration: line-through !important;
    color: #999 !important;
}