/**
 * Qualiphy PayPal — Card Fields styles
 *
 * Styles the container divs; the actual card inputs are inside PayPal-
 * hosted iframes (PCI-compliant, we cannot style their contents beyond
 * what the SDK exposes via cardFields.NumberField({style: {…}}) — not
 * used in v1 to keep the surface small).
 */

.qualiphy-card__description {
    margin: 4px 0 12px;
    color: #4b5563;
    font-size: 13px;
}

.qualiphy-card-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
    /* Reserve vertical space during the loading state so the spinner
     * has a stable box + the checkout layout doesn't jump when the
     * iframes drop in. Once ready the min-height is dropped and the
     * fields render at their natural size (usually ~360px). */
    min-height: 240px;
    position: relative;
}
.qualiphy-card-fields[aria-busy="false"],
.qualiphy-card-fields[data-ready="1"] {
    min-height: 0;
}

/* Loading state — shown while the SDK is fetching, tokenizing, and
 * rendering iframes. Two sources drive the visibility:
 *   - Classic bundle: toggles aria-busy on the wrapper
 *   - Blocks bundle:  toggles data-ready on the wrapper
 * Both selectors below match either flavor so one stylesheet covers both. */

.qualiphy-card-fields__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    color: #6b7280;
    font-size: 13px;
    min-height: 120px;
}

.qualiphy-card-fields__loading-text {
    font-style: italic;
}

.qualiphy-card-fields__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: qualiphy-card-spin 700ms linear infinite;
}

@keyframes qualiphy-card-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Ready state — hide the loading indicator once every field iframe
 * is in the DOM. */
.qualiphy-card-fields[aria-busy="false"] .qualiphy-card-fields__loading,
.qualiphy-card-fields[data-ready="1"]   .qualiphy-card-fields__loading {
    display: none;
}

/* Not-ready state — hide the label + iframe rows entirely so
 * customers don't see the pre-iframe layout jitter. Loading spinner
 * fills the space above. */
.qualiphy-card-fields[aria-busy="true"]  .qualiphy-card-fields__row,
.qualiphy-card-fields[data-ready="0"]    .qualiphy-card-fields__row {
    display: none;
}

.qualiphy-card-fields__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qualiphy-card-fields__row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.qualiphy-card-fields__row--half .qualiphy-card-fields__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qualiphy-card-fields label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

/* .qualiphy-card-fields__iframe intentionally has no styling — the
   PayPal SDK's zoid container inside brings its own border, padding,
   background, focus ring, and height (~78px). Adding our own wrapper
   styles doubled the visual chrome and clipped the SDK's internal
   layout. Rely on PayPal's default look; if we ever need to restyle,
   use the cardFields.NumberField({style: {...}}) SDK option instead
   of CSS on this wrapper. */

.qualiphy-card-fields__error {
    padding: 10px 12px;
    background: #fdecea;
    border-left: 3px solid #d63638;
    color: #7a1c1c;
    font-size: 13px;
    border-radius: 3px;
}

/* Blocks variant lives inside a Blocks-provided wrapper that adds its
 * own padding — trim ours a bit. */
.qualiphy-card-fields--blocks {
    padding: 4px 0;
}

@media (max-width: 480px) {
    .qualiphy-card-fields__row--half {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Sandbox test card helper widget — floating bottom-right dialog
   shown only when qualiphyPayPalCard.env === 'sandbox'. Rendered
   by paypal-card-sandbox-helper.js on both Classic + Blocks pages.
   ============================================================ */

.qualiphy-paypal-sandbox-helper {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 100000;
    width: 260px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: #1f2937;
}

.qualiphy-paypal-sandbox-helper__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.qualiphy-paypal-sandbox-helper__title {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
}

.qualiphy-paypal-sandbox-helper__close {
    all: unset;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}
.qualiphy-paypal-sandbox-helper__close:hover {
    color: #1f2937;
}

.qualiphy-paypal-sandbox-helper__row {
    all: unset;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 8px 6px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .12s ease;
    box-sizing: border-box;
}
.qualiphy-paypal-sandbox-helper__row:hover {
    background: #f3f4f6;
}
.qualiphy-paypal-sandbox-helper__row + .qualiphy-paypal-sandbox-helper__row {
    margin-top: 2px;
}

.qualiphy-paypal-sandbox-helper__label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.qualiphy-paypal-sandbox-helper__value {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    color: #1f2937;
    text-align: right;
    letter-spacing: 0.5px;
}

.qualiphy-paypal-sandbox-helper__icon {
    color: #9ca3af;
    font-size: 14px;
}

.qualiphy-paypal-sandbox-helper__toast {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #059669;
    color: #ffffff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.qualiphy-paypal-sandbox-helper__row[data-copied="1"] .qualiphy-paypal-sandbox-helper__toast {
    opacity: 1;
}
.qualiphy-paypal-sandbox-helper__row[data-copied="1"] .qualiphy-paypal-sandbox-helper__icon,
.qualiphy-paypal-sandbox-helper__row[data-copied="1"] .qualiphy-paypal-sandbox-helper__value {
    opacity: 0;
}