/**
 * File: assets/css/checkout.css
 *
 * Webgold PowerTranz — checkout payment form styles.
 * Colour system: Webgold Brand Guidelines v2.2 / Signature System v4.0.
 *
 * Signature palette applied:
 *   --wg-orange    #FC4521  focus rings, accents, required marks, checked controls
 *   --wg-blackout  #191919  secured-by footer text
 *   --wg-glare     #FFF0D9  sandbox badge background
 *   --wg-gold      #F1C36D  sandbox badge border
 *   --wg-sandstone #E8DFD0  input borders, dividers
 *   --wg-slate     #3A3A3A  labels, body text
 *
 * @package Webgold\PowerTranz
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&display=swap');

/* ── CSS variables ─────────────────────────────────────────────────────────── */

.ptz-payment-form,
.ptz-payment-form * {
    --wg-orange:    #FC4521;
    --wg-blackout:  #191919;
    --wg-glare:     #FFF0D9;
    --wg-gold:      #F1C36D;
    --wg-sandstone: #E8DFD0;
    --wg-slate:     #3A3A3A;
    --wg-canvas:    #FFFFFF;
    --wg-error:     #DC2626;
    font-family: 'DM Sans', Calibri, sans-serif;
}

/* ── Payment form wrapper ──────────────────────────────────────────────────── */

.ptz-payment-form {
    margin: .5rem 0 0;
}

/* ── Sandbox mode badge ────────────────────────────────────────────────────── */

.ptz-sandbox-badge {
    background: var(--wg-glare, #FFF0D9);
    border: 1px solid var(--wg-gold, #F1C36D);
    border-radius: 4px;
    color: var(--wg-slate, #3A3A3A);
    font-family: 'DM Sans', Calibri, sans-serif;
    font-size: .8125rem;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
}

/* ── Description text ─────────────────────────────────────────────────────── */

.ptz-description {
    color: var(--wg-slate, #3A3A3A);
    font-size: .875rem;
    margin-bottom: .75rem;
}

/* ── Form rows ─────────────────────────────────────────────────────────────── */

.ptz-form-row {
    margin-bottom: .875rem;
}

.ptz-form-row label {
    color: var(--wg-slate, #3A3A3A);
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.ptz-form-row label abbr.required {
    border: none;
    color: var(--wg-orange, #FC4521);
    margin-left: 2px;
    text-decoration: none;
}

/* Side-by-side rows (expiry + cvv) */
.ptz-form-row--first,
.ptz-form-row--last {
    display: inline-block;
    margin-bottom: .875rem;
    width: 48%;
}

.ptz-form-row--first {
    margin-right: 3%;
}

/* ── Input fields ─────────────────────────────────────────────────────────── */

.ptz-input {
    background: var(--wg-canvas, #FFFFFF);
    border: 1px solid var(--wg-sandstone, #E8DFD0);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--wg-slate, #3A3A3A);
    font-family: 'DM Sans', Calibri, sans-serif;
    font-size: 1rem;
    height: 42px;
    padding: 0 .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.ptz-input:focus {
    border-color: var(--wg-orange, #FC4521);
    box-shadow: 0 0 0 2px rgba(252, 69, 33, .15);
    outline: none;
}

.ptz-input.ptz-field-error {
    border-color: var(--wg-error, #DC2626);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

/* ── Card brand icon ──────────────────────────────────────────────────────── */

/* data-ptz-brand is set from the number's first digits by card-brand.js
   (display only) and left off while the brand is not yet known. */
.ptz-input[data-ptz-brand] {
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: auto 24px;
    padding-right: 3.5rem;
}

.ptz-input[data-ptz-brand="amex"]       { background-image: url('../images/cards/amex.svg'); }
.ptz-input[data-ptz-brand="diners"]     { background-image: url('../images/cards/diners.svg'); }
.ptz-input[data-ptz-brand="discover"]   { background-image: url('../images/cards/discover.svg'); }
.ptz-input[data-ptz-brand="jcb"]        { background-image: url('../images/cards/jcb.svg'); }
.ptz-input[data-ptz-brand="maestro"]    { background-image: url('../images/cards/maestro.svg'); }
.ptz-input[data-ptz-brand="mastercard"] { background-image: url('../images/cards/mastercard.svg'); }
.ptz-input[data-ptz-brand="visa"]       { background-image: url('../images/cards/visa.svg'); }

/* Brand name for screen readers (aria-live), not shown on screen. */
.ptz-sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ── Wide row ────────────────────────────────────────────────────────────── */

.ptz-form-row--wide {
    display: block;
    width: 100%;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ptz-form-row--first,
    .ptz-form-row--last {
        display: block;
        margin-right: 0;
        width: 100%;
    }
}

/* ── Secured-by footer ─────────────────────────────────────────────────────── */

.ptz-secured-by {
    align-items: center;
    border-top: 1px solid var(--wg-sandstone, #E8DFD0);
    color: var(--wg-slate, #3A3A3A);
    display: flex;
    font-size: .6875rem;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 1rem;
    opacity: .65;
    padding-top: .625rem;
}

.ptz-secured-by svg {
    flex-shrink: 0;
}

.ptz-secured-by strong {
    color: var(--wg-blackout, #191919);
    font-weight: 600;
}

.ptz-secured-by__logo {
    /* !important: a theme or WooCommerce payment-method image rule overrode 200px (demostore). */
    max-width: 150px !important;
    width: auto;
    height: auto;
    flex-shrink: 0;
    opacity: .85;
}

.ptz-secured-by__sep {
    opacity: .5;
}

.ptz-secured-by__threeds {
    background: var(--wg-blackout, #191919);
    border-radius: 3px;
    color: #FFFFFF;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 1px 6px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Saved card CVV re-entry row ─────────────────────────────────────────── */

.ptz-saved-cvv-row {
    margin-bottom: .875rem;
}

.ptz-saved-cvv-row label {
    color: var(--wg-slate, #3A3A3A);
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.ptz-saved-cvv-row label abbr.required {
    border: none;
    color: var(--wg-orange, #FC4521);
    margin-left: 2px;
    text-decoration: none;
}

.ptz-saved-cvv-row input[type="tel"] {
    background: var(--wg-canvas, #FFFFFF);
    border: 1px solid var(--wg-sandstone, #E8DFD0);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--wg-slate, #3A3A3A);
    font-size: 1rem;
    height: 42px;
    max-width: 120px;
    padding: 0 .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.ptz-saved-cvv-row input[type="tel"]:focus {
    border-color: var(--wg-orange, #FC4521);
    box-shadow: 0 0 0 2px rgba(252, 69, 33, .15);
    outline: none;
}

.ptz-saved-cvv-row input[type="tel"].ptz-field-error {
    border-color: var(--wg-error, #DC2626);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

/* ── Card brand icons ───────────────────────────────────────────────────────── */

#payment img.ptz-card-icon,
img.ptz-card-icon {
    display: inline-block !important;
    height: 22px !important;
    margin: 0 3px !important;
    max-width: none !important;
    vertical-align: middle !important;
    width: auto !important;
}

/* ── Saved payment method list ──────────────────────────────────────────────── */

.wc-saved-payment-methods {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
}

.woocommerce-SavedPaymentMethods-token,
.woocommerce-SavedPaymentMethods-new {
    align-items: center;
    display: flex;
    gap: 0 8px;
    margin-bottom: 8px;
    padding: 2px 0;
}

.woocommerce-SavedPaymentMethods-token label,
.woocommerce-SavedPaymentMethods-new label {
    cursor: pointer;
    flex: 1;
    margin: 0;
    padding: 0;
}

/* ── Custom radio buttons ───────────────────────────────────────────────────── */

/* min-/max-width pin the size. WooCommerce core prints these inputs with an inline
   style="width:auto;" (WC_Payment_Gateway::get_saved_payment_method_option_html() and
   save_payment_method_checkbox()), which beats any stylesheet width, and themes add their own
   (Storefront: .form-row input[type="radio"] { width: auto }). An appearance:none input with
   width:auto collapses to its 4px border, a thin bar instead of a circle; min-width overrides
   width, inline or not. */
.woocommerce-SavedPaymentMethods-tokenInput {
    -webkit-appearance: none;
    appearance: none;
    background: var(--wg-canvas, #FFFFFF);
    border: 2px solid var(--wg-sandstone, #E8DFD0);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    height: 18px;
    margin: 0;
    max-width: 18px;
    min-width: 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 18px;
}

.woocommerce-SavedPaymentMethods-tokenInput:checked {
    background: var(--wg-orange, #FC4521);
    border-color: var(--wg-orange, #FC4521);
    box-shadow: inset 0 0 0 3px #fff;
}

.woocommerce-SavedPaymentMethods-tokenInput:hover,
.woocommerce-SavedPaymentMethods-tokenInput:focus {
    border-color: var(--wg-orange, #FC4521);
    outline: none;
}

/* ── Inline CVC input ───────────────────────────────────────────────────────── */

.ptz-inline-cvv {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
}

.ptz-cvv-inline-input {
    background: var(--wg-canvas, #FFFFFF);
    border: 1px solid var(--wg-sandstone, #E8DFD0);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: .875rem;
    height: 34px;
    padding: 0 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 72px;
}

.ptz-cvv-inline-input:focus {
    border-color: var(--wg-orange, #FC4521);
    box-shadow: 0 0 0 2px rgba(252, 69, 33, .15);
    outline: none;
}

.ptz-cvv-inline-input.ptz-cvv-error {
    border-color: var(--wg-error, #DC2626);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.ptz-cvv-inline-input:disabled {
    background: #f5f5f5;
    border-color: var(--wg-sandstone, #E8DFD0);
    color: #999;
    cursor: not-allowed;
}

/* ── Delete saved card button ───────────────────────────────────────────────── */

.ptz-delete-token {
    background: none;
    border: none;
    color: var(--wg-error, #DC2626);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    opacity: .45;
    padding: 2px 4px;
    transition: opacity .15s ease;
}

.ptz-delete-token:hover { opacity: 1; }

.ptz-delete-token:disabled {
    cursor: not-allowed;
    opacity: .2;
}

/* ── Save Card checkbox row ─────────────────────────────────────────────────── */

.woocommerce-SavedPaymentMethods-saveNew {
    align-items: center;
    display: flex;
    gap: 0 8px;
    margin: 4px 0 .75rem;
    padding: 0;
}

/* Pinned like the radios above: WooCommerce prints it with the same inline width:auto. */
.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--wg-canvas, #FFFFFF);
    border: 2px solid var(--wg-sandstone, #E8DFD0);
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    height: 18px;
    margin: 0;
    max-width: 18px;
    min-width: 18px;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
    width: 18px;
}

.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked {
    background: var(--wg-orange, #FC4521);
    border-color: var(--wg-orange, #FC4521);
}

.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked::after {
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    box-sizing: border-box;
    content: '';
    height: 10px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg);
    width: 6px;
}

.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:hover,
.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:focus {
    border-color: var(--wg-orange, #FC4521);
    outline: none;
}

.woocommerce-SavedPaymentMethods-saveNew label {
    cursor: pointer;
    margin: 0;
    padding: 0;
}