/*
 * SnapPay instalment note, shown under the price on a product page.
 *
 * Two things it deliberately does not do. It loads no webfont - SnapPay's own
 * plugin pulls four files of IRANSans from web-cdn.snapp.ir on every product
 * page, which is a third-party request on the critical path and a font the theme
 * has almost certainly already chosen. And it hardcodes no colours: everything is
 * a custom property with a currentColor-derived fallback, so it inherits whatever
 * the theme is using and a store can restyle it without touching this file.
 *
 * Logical properties throughout (inline-start, not left), so it mirrors correctly
 * in the RTL direction this plugin's stores actually run in.
 */

.aio-wc-snappay-widget {
    display: flex;
    align-items: center;
    gap: var(--aio-wc-snappay-gap, 0.5rem);
    box-sizing: border-box;
    width: 100%;
    margin-block: var(--aio-wc-snappay-margin, 0.75rem);
    padding: var(--aio-wc-snappay-padding, 0.875rem 1rem);
    border: 1px solid var(--aio-wc-snappay-border, currentColor);
    border-radius: var(--aio-wc-snappay-radius, 1rem);
    /*
     * The border would otherwise inherit the text colour at full strength and
     * read as a heavy box. Fading just the border keeps the text at the theme's
     * own contrast.
     */
    border-color: color-mix(in srgb, currentColor 18%, transparent);
    background: var(--aio-wc-snappay-bg, transparent);
    line-height: 1.6;
}

.aio-wc-snappay-widget--hidden {
    display: none;
}

.aio-wc-snappay-widget__logo {
    flex: 0 0 auto;
    width: var(--aio-wc-snappay-logo-size, 2.5rem);
    height: var(--aio-wc-snappay-logo-size, 2.5rem);
    border-radius: var(--aio-wc-snappay-logo-radius, 0.9375rem);
    object-fit: contain;
}

.aio-wc-snappay-widget__body {
    min-width: 0;
}

.aio-wc-snappay-widget__title {
    font-size: var(--aio-wc-snappay-title-size, 0.875rem);
    font-weight: 700;
    margin-block-end: 0.125rem;
}

/*
 * WooCommerce wraps a formatted price in <span class="woocommerce-Price-amount">,
 * which some themes style as a block or give its own margins. Neutralised so the
 * figure sits inline with the sentence around it.
 */
.aio-wc-snappay-widget__amount .woocommerce-Price-amount,
.aio-wc-snappay-widget__amount bdi {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.aio-wc-snappay-widget__note {
    font-size: var(--aio-wc-snappay-note-size, 0.75rem);
    font-weight: 300;
    opacity: 0.75;
}

@media (max-width: 30rem) {
    .aio-wc-snappay-widget {
        padding: var(--aio-wc-snappay-padding-narrow, 0.75rem);
    }
}