/*
 * Ryft SDK theming — matches Hyva Checkout form styling.
 *
 * Maps Hyva theme variables to --ryft-* CSS custom properties.
 * Where Hyva doesn't expose a variable (e.g. border-width),
 * we define our own so merchants can still override.
 */

#ryft-checkout,
#ryft-wallet-apple_pay,
#ryft-wallet-google_pay,
#ryft-express-apple-pay,
#ryft-express-google-pay,
#ryft-minicart-apple-pay,
#ryft-minicart-google-pay {
    /* Overridable defaults for values Hyva doesn't expose as variables */
    --ryft-hyva-border-width: 1px;
    --ryft-hyva-focus-ring-width: 1px;
    --ryft-hyva-input-shadow: none;
    --ryft-hyva-base-bg: var(--color-surface);
    --ryft-hyva-input-line-height: 1.5;
    --ryft-hyva-input-label-color: var(--color-slate-700);

    /* Typography */
    --ryft-font-family: var(--font-sans);
    --ryft-font-size: 1rem;

    /* Container */
    --ryft-base-background: var(--ryft-hyva-base-bg);
    --ryft-base-border-radius: var(--form-radius);

    /* Text */
    --ryft-text-color-1: var(--color-fg);
    --ryft-text-color-2: var(--color-fg-secondary);

    /* Accent */
    --ryft-indicator-color: var(--color-primary);

    iframe {
        outline: none;
    }
}

/* Card form input theming */
#ryft-checkout {
    /* Inputs */
    --ryft-input-background-color: var(--form-bg);
    --ryft-input-border-color: var(--form-stroke);
    --ryft-input-border-radius: var(--form-radius);
    --ryft-input-border-width: var(--ryft-hyva-border-width);
    --ryft-input-text-color: var(--color-fg);
    --ryft-input-placeholder-color: var(--color-fg-secondary);
    --ryft-input-font-family: var(--font-sans);
    --ryft-input-padding: var(--form-px);
    --ryft-input-height: calc(1rem * var(--ryft-hyva-input-line-height) + 2 * var(--form-py) + 2 * var(--ryft-hyva-border-width));
    --ryft-input-shadow: var(--ryft-hyva-input-shadow);

    /* Input focus */
    --ryft-input-focus-border-color: var(--form-active-color);
    --ryft-input-focus-shadow: 0 0 0 var(--ryft-hyva-focus-ring-width) var(--form-active-color);

    /* Labels */
    --ryft-input-label-text-color: var(--ryft-hyva-input-label-color);
    --ryft-input-label-font-family: var(--font-sans);
    --ryft-input-label-font-size: var(--text-sm);
}

/* Wallet button theming */
#ryft-wallet-apple_pay,
#ryft-wallet-google_pay,
#ryft-express-apple-pay,
#ryft-express-google-pay,
#ryft-minicart-apple-pay,
#ryft-minicart-google-pay {
    --ryft-wallet-button-border-radius: var(--form-radius);

    apple-pay-button {
        border-radius: var(--ryft-wallet-button-border-radius);
    }

    apple-pay-button:focus-within {
        overflow: clip;
        outline: var(--outline-size,2px)solid var(--color-primary);
        outline-offset: var(--outline-offset,2px);
    }
}