/* ============================================================
   SimpleCare Checkout — v3.0.2
   Variables alineadas al kit Elementor de simplecare.cl
   ============================================================ */

:root {
    --sc-accent:      #14B8A6;
    --sc-accent-dark: #0e9488;
    --sc-blue:        #1E88E5;
    --sc-primary:     #0F172A;
    --sc-text:        #334155;
    --sc-muted:       #64748B;
    --sc-border:      #E2E8F0;
    --sc-bg:          #F8FAFC;
    --sc-white:       #ffffff;
    --sc-error:       #EF4444;
    --sc-success:     #22C55E;
    --sc-radius:      12px;
    --sc-radius-btn:  25px;
    --sc-shadow:      0 2px 12px rgba(0,0,0,0.07);
    --sc-shadow-md:   0 4px 24px rgba(0,0,0,0.10);
    --sc-font-head:   "Montserrat", sans-serif;
    --sc-font-body:   "Inter", sans-serif;
}

/* ── Base ── */
.sc-checkout-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 16px 64px;
    font-family: var(--sc-font-body);
    color: var(--sc-text);
}

.sc-step { animation: scFadeIn .25s ease; }

@keyframes scFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tarjeta de identidad del dispositivo ── */
.sc-device-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 2px solid #14B8A6;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
}
.sc-device-identity__image {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #F8FAFC;
}
.sc-device-identity__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc-device-identity__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sc-device-identity__counter {
    font-size: 12px;
    font-weight: 600;
    color: #14B8A6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sc-device-identity__name {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}
.sc-device-identity__plan {
    font-size: 13px;
    color: #64748B;
}

/* ── Indicador de pasos ── */
.sc-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    flex-wrap: nowrap;
}

.sc-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.sc-step-item span {
    font-size: 12px;
    color: var(--sc-muted);
    font-family: var(--sc-font-body);
    white-space: nowrap;
}

.sc-step-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sc-border);
    color: var(--sc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all .2s;
}

.sc-step-item.active .sc-step-bubble {
    background: var(--sc-accent);
    color: #fff;
}

.sc-step-item.completed .sc-step-bubble {
    background: var(--sc-accent-dark);
    color: #fff;
}

.sc-step-item.active span,
.sc-step-item.completed span {
    color: var(--sc-primary);
    font-weight: 600;
}

.sc-step-divider {
    flex: 1;
    height: 2px;
    background: var(--sc-border);
    min-width: 24px;
    max-width: 80px;
    margin: 0 4px;
    margin-bottom: 20px;
}

/* ── Títulos ── */
.sc-step-title {
    font-family: var(--sc-font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--sc-primary);
    margin: 0 0 24px;
}

.sc-step-desc {
    color: var(--sc-muted);
    margin: -12px 0 24px;
    font-size: 14px;
}

/* ── Formulario ── */
.sc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-field-full { grid-column: 1 / -1; }

.sc-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-primary);
}

.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field input[type="tel"] {
    padding: 11px 14px;
    border: 1.5px solid var(--sc-border);
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--sc-font-body);
    color: var(--sc-primary);
    background: var(--sc-white);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    -webkit-appearance: none;
}

.sc-field input:focus {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 4px rgba(20,184,166,.18);
}

.sc-field input.error {
    border-color: var(--sc-error);
}

/* ── Botones ── */
.sc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--sc-radius-btn);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--sc-font-body);
    cursor: pointer;
    border: none;
    transition: all .2s;
    text-decoration: none;
}

.sc-btn-primary {
    background: var(--sc-accent);
    color: #fff;
}

.sc-btn-primary:hover {
    background: var(--sc-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20,184,166,.35);
}

.sc-btn-secondary {
    background: transparent;
    color: var(--sc-muted);
    border: 1.5px solid var(--sc-border);
}

.sc-btn-secondary:hover {
    border-color: var(--sc-muted);
    color: var(--sc-primary);
}

.sc-btn-outline {
    background: transparent;
    color: var(--sc-accent);
    border: 1.5px solid var(--sc-accent);
    padding: 10px 20px;
    font-size: 14px;
}

.sc-btn-outline:hover {
    background: rgba(20,184,166,.06);
}

.sc-step-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

.sc-step-actions-two {
    justify-content: space-between;
}

.sc-step-actions-back {
    justify-content: flex-start;
}

/* ── Errores ── */
.sc-field-error {
    color: var(--sc-error);
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239,68,68,.07);
    border-radius: 6px;
}

/* ── Checkboxes ── */
.sc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.sc-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sc-accent);
    cursor: pointer;
}

.sc-notice-box {
    background: rgba(20,184,166,.08);
    border: 1px solid rgba(20,184,166,.3);
    border-radius: var(--sc-radius);
    padding: 20px 24px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 480px;
    margin: 24px auto 0;
}

.sc-user-type-radio { position: absolute; opacity: 0; }

/* ── Contactos ── */
.sc-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    background: var(--sc-bg);
    border-radius: var(--sc-radius);
    padding: 12px;
}

.sc-contact-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sc-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
}

/* ── Alertas ── */
.sc-alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.sc-alert-card {
    border: 1.5px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 16px;
    cursor: pointer;
    transition: all .2s;
    display: block;
}

.sc-alert-card:has(.sc-alert-toggle:checked) {
    border-color: var(--sc-accent);
    background: rgba(20,184,166,.05);
}

.sc-alert-toggle { position: absolute; opacity: 0; }

.sc-alert-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sc-alert-icon { font-size: 24px; flex-shrink: 0; }

.sc-alert-inner strong {
    font-size: 14px;
    color: var(--sc-primary);
    display: block;
}

.sc-alert-inner p {
    font-size: 12px;
    color: var(--sc-muted);
    margin: 2px 0 0;
}

/* ── Capacidades fijas (Teléfono + SOS): siempre activas, no configurables ── */
.sc-fixed-features-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin: 4px 0 10px;
}

.sc-fixed-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sc-alert-card-fixed {
    cursor: default;
    border-color: var(--sc-accent);
    background: rgba(20,184,166,.05);
}

/* ── Plan selector en página de producto ── */
/* ── Plan selector (página de producto) ──
   Valores hex directos para funcionar fuera del shortcode [sc_checkout]. */
.sc-plan-selector {
    margin: 16px 0 20px;
    padding: 16px;
    background: #f7f9fa;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    font-family: inherit;
}

.sc-plan-selector--error {
    border-color: #dc3545;
}

.sc-plan-selector__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px;
}

.sc-plan-selector--error .sc-plan-selector__label {
    color: #dc3545;
}

.sc-plan-selector__select {
    width: 100%;
    padding: 11px 38px 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    background-color: #fff;
    border: 1.5px solid #d1d5d9;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23666' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    line-height: 1.3;
}

.sc-plan-selector__select:hover,
.sc-plan-selector__select:focus {
    border-color: #14b8a6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

.sc-plan-selector--error .sc-plan-selector__select {
    border-color: #dc3545;
}

.sc-plan-explainer {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d4f0ea;
    border-left: 3px solid #14b8a6;
    border-radius: 6px;
}

.sc-plan-explainer__title {
    font-size: 12px;
    font-weight: 600;
    color: #0f8a7e;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sc-plan-explainer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-plan-explainer__list li {
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.5;
    padding-left: 14px;
    position: relative;
}

.sc-plan-explainer__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #14b8a6;
    font-weight: 700;
}

.sc-plan-explainer__list strong {
    color: #0f8a7e;
}

.sc-plan-selector__note {
    font-size: 12px;
    color: #7a8a99;
    margin: 12px 0 0;
    line-height: 1.5;
}

.sc-plan-hint {
    font-size: 13px;
    color: #7a8a99;
    margin: 8px 0 0;
    text-align: center;
}

/* Botón "Agregar al carrito" reubicado dentro del selector */
.single-product div.product form.cart button.single_add_to_cart_button.sc-add-to-cart-relocated {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    float: none !important;
}

/* Botón deshabilitado mientras no hay plan */
button.single_add_to_cart_button.sc-btn-pending,
button.single_add_to_cart_button:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Perfiles de usuario (Paso 1) ── */
.sc-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sc-profile-card {
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    display: block;
}

.sc-profile-card:has(.sc-user-type-radio:checked) {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,.15);
    background: rgba(20,184,166,.04);
}

.sc-profile-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-primary);
    line-height: 1.3;
}

.sc-profile-icon { font-size: 28px; display: block; }

/* ── Banner de recomendación (Paso 3) — azul, distinto peso que el recuadro
   de configuración de más abajo (teal): esto es una recomendación importante,
   lo otro es solo un ajuste (Renán, 2026-07-23). Mismo ícono de siempre, sin
   relleno — solo cambia el color y se agrega una sombra sutil. ── */
.sc-recommendation-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(30,136,229,.07);
    border: 1px solid rgba(30,136,229,.25);
    border-left: 4px solid var(--sc-blue);
    border-radius: var(--sc-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(30,136,229,.12);
}

.sc-rec-icon { font-size: 28px; flex-shrink: 0; line-height: 1.1; }

.sc-rec-content strong {
    display: block;
    font-size: 14px;
    color: var(--sc-blue);
    margin-bottom: 4px;
}

.sc-rec-content p {
    font-size: 13px;
    color: var(--sc-text);
    margin: 0;
    line-height: 1.5;
}

.sc-rec-content p u {
    text-decoration-color: var(--sc-blue);
    text-underline-offset: 2px;
}

.sc-alert-recommended {
    border-color: var(--sc-accent) !important;
    background: rgba(20,184,166,.05);
}

/* ── Campo velocidad máxima ── */
.sc-speed-limit-wrap {
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 16px 20px;
    margin-top: -4px;
    margin-bottom: 16px;
}

.sc-speed-limit-wrap label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-primary);
    display: block;
    margin-bottom: 10px;
}

.sc-speed-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
}

.sc-speed-input-row input[type="number"] {
    padding: 10px 14px;
    border: 1.5px solid var(--sc-border);
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--sc-primary);
    width: 110px;
    text-align: center;
    font-family: var(--sc-font-head);
    -moz-appearance: textfield;
    outline: none;
    transition: border-color .2s;
}

.sc-speed-input-row input[type="number"]:focus {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,.1);
}

.sc-speed-input-row input[type="number"]::-webkit-outer-spin-button,
.sc-speed-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.sc-speed-unit {
    font-size: 16px;
    font-weight: 600;
    color: var(--sc-muted);
}

.sc-field-hint {
    font-size: 12px;
    color: var(--sc-muted);
    margin: 8px 0 0;
}

/* ── Cantidad bloqueada ── */
.sc-locked-qty {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-muted);
}

/* ── Configurar después ── */
.sc-config-later-wrap {
    margin-top: 16px;
    text-align: center;
}

.sc-btn-link {
    background: none;
    border: none;
    color: var(--sc-muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-family: var(--sc-font-body);
    transition: color .2s;
}

.sc-btn-link:hover {
    color: var(--sc-accent);
}

.sc-config-later-panel {
    margin-top: 16px;
    text-align: left;
}

.sc-config-later-panel strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sc-primary);
}

.sc-config-later-panel p {
    font-size: 14px;
    color: var(--sc-text);
    margin: 0 0 6px;
}

.sc-later-link {
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 12px;
    color: var(--sc-primary);
    word-break: break-all;
    margin: 8px 0;
    user-select: all;
}

.sc-config-later-note {
    font-size: 12px !important;
    color: var(--sc-muted) !important;
    margin-top: 4px !important;
}

/* ── Divisor entre las capacidades fijas y "Activar alertas adicionales" (Paso 3) ── */
.sc-section-divider {
    border: none;
    border-top: 1px solid var(--sc-border);
    margin: 20px 0;
}

/* ── Toggle "Solo como teléfono" (Paso 3) ── */
.sc-phone-only-row {
    background: var(--sc-bg);
    border: 1.5px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    transition: all .2s;
}

.sc-phone-only-row.active {
    border-color: var(--sc-accent);
    background: rgba(20,184,166,.06);
}

.sc-phone-only-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    margin: 0;
}

.sc-phone-only-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-primary);
    margin-bottom: 2px;
}

.sc-phone-only-text span {
    font-size: 12px;
    color: var(--sc-muted);
}

/* Toggle switch */
.sc-toggle-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sc-toggle-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sc-toggle-track {
    display: inline-block;
    width: 46px;
    height: 26px;
    background: var(--sc-border);
    border-radius: 13px;
    position: relative;
    transition: background .2s;
    cursor: pointer;
}

.sc-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.sc-toggle-wrap input:checked + .sc-toggle-track {
    background: var(--sc-accent);
}

.sc-toggle-wrap input:checked + .sc-toggle-track .sc-toggle-thumb {
    transform: translateX(20px);
}

/* Alertas desactivadas (modo solo teléfono) */
.sc-alerts-disabled {
    opacity: .4;
    pointer-events: none;
}

.sc-alert-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Hint inline en label de teléfono */
.sc-field-hint-inline {
    font-size: 11px;
    font-weight: 400;
    color: var(--sc-muted);
    margin-left: 4px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sc-form-grid {
        grid-template-columns: 1fr;
    }

    .sc-contact-fields {
        grid-template-columns: 1fr;
    }

    .sc-profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sc-steps-indicator {
        gap: 0;
    }

    .sc-step-divider {
        min-width: 12px;
    }

    .sc-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ── Checkout WooCommerce: campos de billing ── */
.woocommerce-checkout .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-primary);
    font-family: var(--sc-font-body);
    margin-bottom: 6px;
    display: block;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    padding: 11px 14px;
    border: 1.5px solid var(--sc-border) !important;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--sc-font-body);
    color: var(--sc-primary);
    background: var(--sc-white);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-shadow: none !important;
    -webkit-appearance: none;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--sc-accent) !important;
    box-shadow: 0 0 0 4px rgba(20,184,166,.18) !important;
}

/* ── Checkout WooCommerce: sección "Tu pedido" ── */
.woocommerce-checkout-review-order-table {
    font-family: var(--sc-font-body);
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    color: var(--sc-text);
    border-color: var(--sc-border);
    padding: 10px 0;
    font-family: var(--sc-font-body);
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-weight: 700;
    color: var(--sc-primary);
    font-size: 17px;
    font-family: var(--sc-font-head);
    padding-top: 14px;
}

/* ── Checkout WooCommerce: botón REALIZAR EL PEDIDO ── */
#place_order {
    background: var(--sc-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--sc-radius-btn) !important;
    font-family: var(--sc-font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
    box-shadow: 0 4px 16px rgba(20,184,166,.3) !important;
    display: block !important;
    margin-top: 8px !important;
}

#place_order:hover {
    background: var(--sc-accent-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(20,184,166,.45) !important;
}

/* ── Checkout WooCommerce: correcciones de campos ── */
#billing_phone_field .optional {
    display: none !important;
}
#billing_phone_field label::after {
    content: ' *';
    color: #e2401c;
    font-weight: 700;
}