/* assets/css/adyen-express.css  v2.0.0 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
#adyen-express-checkout {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#adyen-express-inner {
    background: transparent; /* was #ffffff00 — 8-digit hex has patchy older-Safari support */
    padding: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
}

#adyen-express-inner:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
#adyen-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

#adyen-spinner span {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.01em;
}

.adyen-spinner-ring {
    width: 28px;
    height: 28px;
    border: 2.5px solid #f0f0f0;
    border-top-color: #0f0f0f;
    border-radius: 50%;
    animation: adyen-spin 0.7s linear infinite;
}

@keyframes adyen-spin {
    to { transform: rotate(360deg); }
}

/* ── Buttons wrapper ─────────────────────────────────────────────────────── */
#adyen-buttons-wrapper {
    width: 100%;
}

.adyen-express-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aaa;
    text-align: center;
    margin: 0 0 14px;
}

#adyen-express-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Force wallet buttons to full width */
#googlepay-container,
#applepay-container,
.adyen-block-googlepay,
.adyen-block-applepay {
    width: 100%;
}

#googlepay-container > *,
#applepay-container > *,
.adyen-block-googlepay > *,
.adyen-block-applepay > * {
    width: 100% !important;
    border-radius: 10px !important;
    min-height: 48px !important;
}

/* ── Error / cancel messages ─────────────────────────────────────────────── */
#adyen-express-error,
.adyen-block-error {
    width: 100%;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #dc2626;
    margin-top: 12px;
    text-align: center;
    animation: adyen-fadein 0.2s ease;
}

#adyen-express-cancel {
    width: 100%;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #15803d;
    margin-top: 10px;
    text-align: center;
    animation: adyen-fadein 0.2s ease;
}

@keyframes adyen-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Blocks spinner / processing ─────────────────────────────────────────── */
.adyen-block-spinner,
.adyen-block-processing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: #999;
}

/* ── Divider — used by adyen-blocks.js DOM injection ─────────────────────── */
/* BEM classes: .adyen-express-divider, __line, __text */
.adyen-express-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #bbb;
}

.adyen-express-divider__line {
    flex: 1;
    height: 1px;
    background: #e8e8e8;
    display: block;
}

.adyen-express-divider__text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #bbb;
}

/* Legacy alias (classic checkout uses .adyen-divider) */
.adyen-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    color: #bbb;
}

.adyen-divider::before,
.adyen-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

.adyen-divider span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #bbb;
}

/* ── Blocks wrapper ──────────────────────────────────────────────────────── */
.adyen-block-content {
    padding: 8px 0;
}

.adyen-express-below-payment {
    margin-top: 8px;
}