/*
 * HWP Paid Sample Credit — frontend styles
 *
 * Palette: navy #1a2a4a, beige #f1ebe1 / #f9f6f0, white #fff, soft green #2d6a4f
 * Scoped to .hwp-psc-* classes so it cannot bleed into theme styles.
 */

/* ===== Table-row wrapper (lives inside cart-totals / review-order tables) =====
 * v1.1.4: card cell carries a bottom border so the divider line falls AFTER
 * the card (visually attaching it to the Shipment section above). The
 * preceding shipping row's bottom border is suppressed via the
 * `.hwp-psc-shipping-row-no-bottom-border` class added by frontend.js.
 */
tr.hwp-psc-shipping-card-row > td.hwp-psc-shipping-card-cell {
    padding: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e6dfd0 !important;
    background: transparent !important;
}
.hwp-psc-shipping-card-row .hwp-psc-shipping-card {
    margin: 12px 0 12px;
}

/* Suppress border-bottom on the shipping row that immediately precedes
 * our card. Class applied by frontend.js (JS) to whatever <tr> sits above
 * .hwp-psc-shipping-card-row — works regardless of whether Woodmart uses
 * tr.shipping, tr.woocommerce-shipping-totals, or a custom wrapper. */
tr.hwp-psc-shipping-row-no-bottom-border > th,
tr.hwp-psc-shipping-row-no-bottom-border > td {
    border-bottom: 0 !important;
}

/* Belt-and-braces: CSS-only fallback for browsers/contexts where the JS
 * hasn't yet tagged the row. Modern browsers support :has(). */
tr.shipping:has(+ tr.hwp-psc-shipping-card-row) > th,
tr.shipping:has(+ tr.hwp-psc-shipping-card-row) > td,
tr.woocommerce-shipping-totals:has(+ tr.hwp-psc-shipping-card-row) > th,
tr.woocommerce-shipping-totals:has(+ tr.hwp-psc-shipping-card-row) > td {
    border-bottom: 0 !important;
}

/* ===== Card base ===== */
.hwp-psc-card {
    padding: 16px 18px;
    background: #f9f6f0;
    border: 1px solid #e6dfd0;
    border-left: 4px solid #1a2a4a;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(26, 42, 74, 0.06);
    color: #1f2433;
    font-family: inherit;
    line-height: 1.5;
}

/* Available-credit (separate card, gold accent) */
.hwp-psc-card--credit {
    border-left-color: #c8973a;
    background: #fbf6ec;
    margin: 16px 0;
}

/* ===== Shipping card: two-panel toggle via data-mode ===== */
.hwp-psc-shipping-card > .hwp-psc-panel {
    display: none;
}
.hwp-psc-shipping-card[data-mode="neutral"] > .hwp-psc-panel--neutral,
.hwp-psc-shipping-card[data-mode="selected"] > .hwp-psc-panel--selected {
    display: block;
}

/* Selected state: subtle green */
.hwp-psc-shipping-card[data-mode="selected"] {
    background: #f4f9f5;
    border-color: #d6e9da;
    border-left-color: #2d6a4f;
}

/* ===== Card content typography ===== */
.hwp-psc-card__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #1a2a4a;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.hwp-psc-shipping-card[data-mode="selected"] .hwp-psc-card__title {
    color: #1f5a3c;
}
.hwp-psc-card__body {
    margin: 0 0 8px;
    font-size: 14px;
    color: #1f2433;
}
.hwp-psc-card__body--accent {
    color: #4d4632;
    font-weight: 500;
}
.hwp-psc-card__body .hwp-psc-amount {
    color: #1a2a4a;
    font-weight: 600;
}
.hwp-psc-shipping-card[data-mode="selected"] .hwp-psc-card__body .hwp-psc-amount {
    color: #1f5a3c;
}
.hwp-psc-card__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6b6657;
}
.hwp-psc-card__note {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6b6657;
    font-style: italic;
    line-height: 1.5;
}

/* ===== Available-credit code row (unchanged from prior versions) ===== */
.hwp-psc-card__code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.hwp-psc-card__code {
    display: inline-block;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #d8d2c8;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1a2a4a;
}
.hwp-psc-card__apply-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #1a2a4a;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
}
.hwp-psc-card__apply-btn:hover,
.hwp-psc-card__apply-btn:focus {
    background: #243b6d;
    color: #ffffff !important;
}

/* ===== Vendor chips ===== */
.hwp-psc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}
.hwp-psc-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none !important;
    border: 1px solid transparent;
    line-height: 1.4;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hwp-psc-chip:hover,
.hwp-psc-chip:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26, 42, 74, 0.10);
    text-decoration: none !important;
}
.hwp-psc-chip--blue {
    background: #dbe9f4;
    color: #1a4574 !important;
    border-color: #c5d9e8;
}
.hwp-psc-chip--gold {
    background: #f4ebd0;
    color: #7a5f1c !important;
    border-color: #e8d9b3;
}

/* ===== Browse-more text links ===== */
.hwp-psc-browse-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}
.hwp-psc-browse-link {
    font-size: 12px;
    color: #1a2a4a !important;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: color 0.15s ease;
}
.hwp-psc-browse-link:hover,
.hwp-psc-browse-link:focus {
    color: #c8973a !important;
    text-decoration: none !important;
}

/* ===== My Account ===== */
.hwp-psc-myaccount__intro {
    margin: 0 0 18px;
    color: #4d4632;
    font-size: 14px;
}
.hwp-psc-myaccount__empty {
    padding: 24px;
    background: #f9f6f0;
    border: 1px dashed #d8d2c8;
    border-radius: 6px;
    text-align: center;
}
.hwp-psc-myaccount__table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
}
.hwp-psc-myaccount__table th,
.hwp-psc-myaccount__table td {
    padding: 12px 14px;
    border-bottom: 1px solid #ece6d8;
    text-align: left;
    vertical-align: middle;
}
.hwp-psc-myaccount__table thead th {
    background: #f5efe6;
    color: #1a2a4a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.hwp-psc-myaccount__code {
    display: inline-block;
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 13px;
    background: #f5efe6;
    border: 1px solid #d8d2c8;
    padding: 4px 10px;
    border-radius: 4px;
    color: #1a2a4a;
    letter-spacing: 0.6px;
}
.hwp-psc-myaccount__help {
    margin-top: 14px;
    font-size: 12px;
    color: #6b6657;
}

/* ===== Status badges (shared with admin) ===== */
.hwp-psc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.4;
}
.hwp-psc-badge--available { background: #e7f1e9; color: #1f5a3c; }
.hwp-psc-badge--used      { background: #e7eaf4; color: #1a2a4a; }
.hwp-psc-badge--expired   { background: #f3e7e7; color: #7a2a2a; }

/* ===== Mobile ===== */
@media (max-width: 600px) {
    .hwp-psc-card { padding: 14px 14px; }
    .hwp-psc-card__title { font-size: 13px; }
    .hwp-psc-card__body { font-size: 13px; }
    .hwp-psc-card__code-row { flex-direction: column; align-items: stretch; }
    .hwp-psc-card__apply-btn { text-align: center; }
    .hwp-psc-chip { font-size: 11px; padding: 4px 10px; }
    .hwp-psc-shipping-card-row .hwp-psc-shipping-card { margin: 10px 0; }
}