/*
 * Resonance Checkout — checkout.css
 * Estilos para la página /checkout únicamente.
 * Hereda design tokens del site (rose-gold, pearl-white, etc.)
 * Prefijo rc- para evitar conflictos con el resto del site.
 */

/*
 * ── Design tokens ─────────────────────────────────────────────────────────────
 * checkout.css usa los tokens canónicos del sitio definidos en global.css.
 * Los alias en inglés (--rose-gold, etc.) mapean 1:1 a las variables del sitio
 * para mantener compatibilidad con contribute-system.css y el portal UM.
 * NO redefinir valores aquí — editar en global.css → assets/css/global.css
 */
:root {
    --rose-gold:   var(--oro-rosa);        /* #B76E79 */
    --pearl-white: var(--blanco-perlado);  /* #F8F6F0 */
    --smoke-grey:  var(--gris-humo);       /* #4A4A4A */
    --powder-pink: var(--rosa-empolvado);  /* #FCE9E4 */
    --rose-sand:   var(--arena-rosada);    /* #E5C7B8 */
    --rose-dusty:  var(--rosa-dorado);     /* #EAB0A1 — hover states */
    --warm-gold:   var(--oro-clasico);     /* #D4AF37 — acento dorado */
}

/* ── Page wrapper ────────────────────────────────────────────────────────────── */
#resonance-checkout-main {
    min-height: 70vh;
    padding: 48px 16px 80px;
}

#resonance-checkout-root {
    max-width: 640px;
    margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────────────────────── */
.rc-card {
    background: var(--pearl-white);
    border-radius: 20px;
    padding: 40px 40px 48px;
    box-shadow: 0 2px 20px rgba(183,110,121,0.10);
}

@media (max-width: 580px) {
    .rc-card { padding: 28px 20px 36px; }
}

/* ── Typography ──────────────────────────────────────────────────────────────── */
.rc-title {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.9rem;
    color: var(--smoke-grey);
    margin: 0 0 6px;
    font-weight: 600;
}

.rc-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 0.88rem;
    color: var(--smoke-grey);
    opacity: 0.65;
    margin: 0 0 20px;
}

.rc-summary {
    display: inline-block;
    background: var(--powder-pink);
    border-radius: 99px;
    padding: 6px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose-gold);
    margin-bottom: 28px;
}

.rc-section-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--rose-gold);
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rose-sand);
}

/* ── Fields ──────────────────────────────────────────────────────────────────── */
.rc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 500px) {
    .rc-row { grid-template-columns: 1fr; }
}

.rc-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rc-field--full {
    grid-column: 1 / -1;
}

.rc-field label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smoke-grey);
    opacity: 0.7;
}

.rc-req { color: var(--rose-gold); margin-left: 2px; }

.rc-field input,
.rc-field select {
    font-family: 'Raleway', sans-serif;
    font-size: 0.95rem;
    color: var(--smoke-grey);
    background: #fff;
    border: 1px solid var(--rose-sand);
    border-radius: 6px;
    padding: 10px 13px;
    transition: border-color 0.18s, box-shadow 0.18s;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.rc-field input:focus,
.rc-field select:focus {
    outline: none;
    border-color: var(--rose-gold);
    box-shadow: 0 0 0 3px rgba(183,110,121,0.14);
}

.rc-field--error input,
.rc-field--error select {
    border-color: #C0392B;
}

.rc-error-msg {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    color: #C0392B;
    min-height: 1em;
}

/* ── Stripe CardElement ──────────────────────────────────────────────────────── */
.rc-stripe-el {
    background: #fff;
    border: 1px solid var(--rose-sand);
    border-radius: 6px;
    padding: 11px 13px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.rc-stripe-el.StripeElement--focus {
    border-color: var(--rose-gold);
    box-shadow: 0 0 0 3px rgba(183,110,121,0.14);
}

.rc-stripe-el.StripeElement--invalid {
    border-color: #C0392B;
}

/* ── GDPR consent ────────────────────────────────────────────────────────────── */
.rc-consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.82rem;
    color: var(--smoke-grey);
    line-height: 1.5;
}

.rc-consent-row input[type=checkbox] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--rose-gold);
    cursor: pointer;
}

.rc-consent-row a {
    color: var(--rose-gold);
    text-decoration: underline;
}

/* ── Submit button ───────────────────────────────────────────────────────────── */
.rc-submit-btn {
    display: block;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--rose-gold);
    border: none;
    border-radius: 99px;
    padding: 15px 32px;
    margin-top: 28px;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s, opacity 0.18s;
}

.rc-submit-btn:hover  { background: #a05868; transform: translateY(-1px); }
.rc-submit-btn:active { transform: translateY(0); }
.rc-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Messages ────────────────────────────────────────────────────────────────── */
.rc-message {
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.88rem;
    line-height: 1.5;
}

.rc-message--error   { background: #fdf2f2; border: 1px solid #f5c6c6; color: #C0392B; }
.rc-message--success { background: #f2faf2; border: 1px solid #b8ddb8; color: #2E7D32; }

/* ── Stripe note ─────────────────────────────────────────────────────────────── */
.rc-stripe-note {
    font-family: 'Raleway', sans-serif;
    font-size: 0.78rem;
    color: var(--smoke-grey);
    opacity: 0.55;
    text-align: center;
    margin-top: 16px;
}

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.rc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    font-family: 'Raleway', sans-serif;
    color: var(--smoke-grey);
    opacity: 0.6;
}

.rc-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--rose-sand);
    border-top-color: var(--rose-gold);
    border-radius: 50%;
    animation: rc-spin 0.7s linear infinite;
}

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

.rc-error-banner {
    text-align: center;
    color: #C0392B;
    font-family: 'Raleway', sans-serif;
    padding: 40px 0;
}

/* ── Confirmation ────────────────────────────────────────────────────────────── */
.rc-confirmation {
    text-align: center;
    padding: 60px 24px 40px;
}

.rc-confirmation__icon {
    font-size: 2.8rem;
    color: var(--rose-gold);
    margin-bottom: 16px;
}

.rc-confirmation__title {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 2rem;
    color: var(--smoke-grey);
    margin: 0 0 12px;
}

.rc-confirmation__sub {
    font-family: 'Raleway', sans-serif;
    font-size: 0.92rem;
    color: var(--smoke-grey);
    opacity: 0.7;
    line-height: 1.6;
}