/* ============================================================================
   private-seller-card-form.css
   ----------------------------------------------------------------------------
   Styles for the Peach card form injected by
   private-seller-scenes-extra-payment-patch.js into Scene 11.

   Variable hooks:
     --sj-orange, --sj-error, --sj-muted, --sj-border, --sj-success
   come from the shared sell-journey palette in private-seller.css. We do
   not redefine them here — defaults are provided as fallbacks for any
   page that loads this file in isolation.

   LOAD ORDER in _Layout.cshtml:
     <link rel="stylesheet" href="~/css/private-seller.css" />
     <link rel="stylesheet" href="~/css/private-seller-scenes-extra.css" />
     <link rel="stylesheet" href="~/css/private-seller-card-form.css" />   ← here
   ============================================================================ */

.ps-pay-v2-dev-hint {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.18rem 0.55rem;
    background: rgba(255, 165, 0, 0.10);
    border: 1px dashed rgba(255, 140, 0, 0.40);
    border-radius: 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sj-orange, #FF7A00);
}
.ps-pay-v2-dev-hint code {
    background: rgba(255, 140, 0, 0.16);
    padding: 0 0.35em;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
}

.ps-pay-card-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin-top: 1rem;
}

.ps-pay-card-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
}

.ps-pay-card-field { display: flex; flex-direction: column; gap: 0.32rem; }
.ps-pay-card-field > label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a4f5e;
    letter-spacing: 0.01em;
}

.ps-pay-card-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--sj-border, #e5e7eb);
    border-radius: 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ps-pay-card-input-wrap:focus-within {
    border-color: var(--sj-orange, #FF7A00);
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

.ps-pay-card-icon {
    position: absolute;
    left: 0.85rem;
    color: #a8acba;
    font-size: 1rem;
    pointer-events: none;
}

.ps-pay-card-input-wrap > input {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.78rem 0.9rem 0.78rem 2.45rem;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    border-radius: inherit;
    color: #1f2330;
    outline: none;
    font-feature-settings: "tnum";   /* tabular numerals — straight columns */
}
.ps-pay-card-input-wrap > input::placeholder { color: #c2c5d1; }

.ps-pay-card-brand {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: auto;
    display: none;
    pointer-events: none;
}
.ps-pay-card-brand.show { display: inline-block; }
.ps-pay-card-brand svg { height: 100%; width: auto; }

.ps-pay-card-err {
    min-height: 1.05rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sj-error, #dc2626);
}

/* CTA — matches the Ozow-era styling so the rest of the scene visually unchanged. */
.ps-pay-v2-cta {
    margin-top: 0.4rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: none;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--sj-orange, #FF7A00), #FF9A3D);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    box-shadow: 0 6px 22px rgba(255, 122, 0, 0.28);
    transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}
.ps-pay-v2-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(255, 122, 0, 0.34); }
.ps-pay-v2-cta:active { transform: translateY(0); }
.ps-pay-v2-cta:disabled,
.ps-pay-v2-cta.is-loading { opacity: 0.78; cursor: progress; }

.ps-pay-v2-cta-spin {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: psPayV2Spin 0.7s linear infinite;
}
.ps-pay-v2-cta.is-loading .ps-pay-v2-cta-spin { display: inline-block; }
.ps-pay-v2-cta.is-loading .ps-pay-v2-cta-label { opacity: 0.6; }

@keyframes psPayV2Spin { to { transform: rotate(360deg); } }

/* Mobile collapse for the row-2 (exp + cvv) */
@media (max-width: 480px) {
    .ps-pay-card-row-2 {
        grid-template-columns: 1fr;
    }
}