/*======= CLIENTCORE · FORMULARIO DEL PASO 3 (V9) =======*/
/* Solo colores de brand.css: var(--brand-*), var(--state-*), var(--neutral-*) */

/* ---------- Tarjetas de sección ---------- */
.cc-checkout-page .cc-form-card {
    background: var(--neutral-white);
    border: 1px solid var(--brand-border);
    border-radius: 15px;
    padding: 20px 22px 22px;
    margin: 0 0 18px;
}

.cc-checkout-page .cc-form-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
}

.cc-checkout-page .cc-form-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    font-size: 15px;
}

.cc-checkout-page .cc-form-head h2 {
    margin: 2px 0 3px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-dark);
}

.cc-checkout-page .cc-form-head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--brand-muted);
}

/* ---------- Grilla propia (no depende de Bootstrap) ---------- */
.cc-checkout-page .cc-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 16px;
}

.cc-checkout-page .cc-subgrid { margin-top: 14px; }
.cc-checkout-page .cc-col-12 { grid-column: span 12; }
.cc-checkout-page .cc-col-8  { grid-column: span 8; }
.cc-checkout-page .cc-col-6  { grid-column: span 6; }
.cc-checkout-page .cc-col-4  { grid-column: span 4; }

@media (max-width: 767px) {
    .cc-checkout-page .cc-col-8,
    .cc-checkout-page .cc-col-6,
    .cc-checkout-page .cc-col-4 { grid-column: span 12; }
    .cc-checkout-page .cc-form-card { padding: 18px 16px; }
}

/* ---------- Campos ---------- */
.cc-checkout-page .cc-field,
.cc-checkout-page .cc-form-card .form-group { margin: 0; min-width: 0; }
#order-standard_cart.cc-checkout-page .cc-form-card .field-container,
#order-standard_cart.cc-checkout-page .cc-form-card > :last-child { margin-bottom: 0; }

.cc-checkout-page .cc-field > label {
    display: block;
    margin: 0 0 6px;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-ink);
}

.cc-checkout-page .cc-optional {
    font-weight: 400;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-required { color: var(--state-error); }

.cc-checkout-page .cc-form-card .form-control {
    height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--brand-border-6);
    border-radius: 10px;
    background-color: var(--neutral-white);
    color: var(--brand-ink);
    font-family: Inter, sans-serif;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-checkout-page .cc-form-card textarea.form-control {
    height: auto;
    min-height: 104px;
    resize: vertical;
}

.cc-checkout-page .cc-form-card .form-control::placeholder {
    color: var(--neutral-text);
    opacity: 1;
}

.cc-checkout-page .cc-form-card .form-control:hover {
    border-color: var(--brand-border-7);
}

.cc-checkout-page .cc-form-card .form-control:focus {
    border-color: var(--brand-primary-650);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-600-rgb), .12);
    outline: 0;
}

.cc-checkout-page .cc-form-card .has-error .form-control,
.cc-checkout-page .cc-form-card .form-control.is-invalid {
    border-color: var(--state-error);
}

.cc-checkout-page .cc-help,
.cc-checkout-page .cc-form-card .field-help-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--brand-muted);
}

/* Teléfono con bandera (intl-tel-input de WHMCS) */
.cc-checkout-page .cc-field .iti,
.cc-checkout-page .cc-field .intl-tel-input { width: 100%; display: block; }

/* ---------- Contraseña ---------- */
.cc-checkout-page .cc-password-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.cc-checkout-page .cc-strength { flex: 1 1 220px; margin: 0; }

.cc-checkout-page .cc-strength .progress {
    height: 6px;
    margin: 0 0 6px;
    border-radius: 99px;
    background: var(--neutral-bg-3);
    box-shadow: none;
    overflow: hidden;
}

.cc-checkout-page .cc-strength .progress-bar {
    background-image: none;
    box-shadow: none;
    transition: width .25s ease;
}

.cc-checkout-page .cc-strength .progress-bar-danger,
.cc-checkout-page .cc-strength .bg-danger { background-color: var(--state-error); }
.cc-checkout-page .cc-strength .progress-bar-warning,
.cc-checkout-page .cc-strength .bg-warning { background-color: var(--state-warning-border); }
.cc-checkout-page .cc-strength .progress-bar-success,
.cc-checkout-page .cc-strength .bg-success { background-color: var(--state-success); }

.cc-checkout-page .cc-strength p {
    margin: 0;
    font-size: 12px;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--brand-border-6);
    border-radius: 10px;
    background: var(--brand-tint);
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.cc-checkout-page .cc-btn-light:hover,
.cc-checkout-page .cc-btn-light:focus {
    border-color: var(--brand-primary-650);
    background: var(--brand-soft-1);
    color: var(--brand-primary);
}

.cc-checkout-page .cc-form-actions { margin-top: 16px; }

.cc-checkout-page .cc-btn {
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--brand-primary-600);
    color: var(--neutral-white);
    font-weight: 600;
}

.cc-checkout-page .cc-btn:hover,
.cc-checkout-page .cc-btn:focus { background: var(--brand-primary-700); color: var(--neutral-white); }

/* ---------- Métodos de pago ---------- */
.cc-checkout-page #paymentGatewaysContainer { margin: 0; }

.cc-checkout-page .cc-pay-options {
    display: grid;
    gap: 10px;
}

.cc-checkout-page .cc-pay-option {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    background: var(--neutral-white);
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.cc-checkout-page .cc-pay-option:hover { border-color: var(--brand-border-7); }

.cc-checkout-page .cc-pay-option:has(.checked),
.cc-checkout-page .cc-pay-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-tint);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-600-rgb), .10);
}

.cc-checkout-page .cc-pay-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    font-size: 17px;
    transition: background-color .15s ease, color .15s ease;
}

.cc-checkout-page .cc-pay-option:has(.checked) .cc-pay-icon,
.cc-checkout-page .cc-pay-option:has(input:checked) .cc-pay-icon {
    background: var(--brand-primary);
    color: var(--neutral-white);
}

.cc-checkout-page .cc-pay-text { min-width: 0; }

.cc-checkout-page .cc-pay-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-ink);
}

.cc-checkout-page .cc-pay-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-pay-text small::first-letter { text-transform: uppercase; }

.cc-checkout-page .gateway-errors {
    margin: 12px 0 0;
    border-radius: 10px;
}

.cc-checkout-page .cc-payment-card #creditCardInputFields { margin-top: 16px; }

.cc-checkout-page .cc-payment-card .form-control {
    height: 44px;
    border-radius: 10px;
}

/* Saldo a favor */
.cc-checkout-page .cc-credit-box {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--brand-soft-6);
    border-radius: 12px;
    background: var(--brand-soft-1);
    color: var(--brand-ink);
    font-size: 13px;
}

.cc-checkout-page .cc-credit-box p { margin: 0 0 8px; font-weight: 600; }
.cc-checkout-page .cc-credit-box .radio { margin: 6px 0; }

/* ---------- Radios y casillas (iCheck de WHMCS) con colores de marca ---------- */
.cc-checkout-page .iradio_square-blue,
.cc-checkout-page .icheckbox_square-blue {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--brand-border-6);
    background: var(--neutral-white) !important;
    vertical-align: middle;
    transition: border-color .15s ease, background-color .15s ease;
}

.cc-checkout-page .iradio_square-blue { border-radius: 50%; }
.cc-checkout-page .icheckbox_square-blue { border-radius: 6px; }

.cc-checkout-page .iradio_square-blue.hover,
.cc-checkout-page .icheckbox_square-blue.hover { border-color: var(--brand-primary-650); }

.cc-checkout-page .iradio_square-blue.checked {
    border-color: var(--brand-primary);
    background: radial-gradient(circle, var(--brand-primary) 0 4.5px, var(--neutral-white) 5px) !important;
}

.cc-checkout-page .icheckbox_square-blue.checked {
    border-color: var(--brand-primary);
    background: var(--brand-primary) !important;
}

.cc-checkout-page .icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--neutral-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cc-checkout-page .iradio_square-blue.disabled,
.cc-checkout-page .icheckbox_square-blue.disabled { opacity: .5; }

/* ---------- Acciones bajo el resumen ---------- */
.cc-checkout-page .cc-checkout-actions {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--brand-border);
    border-radius: 15px;
    background: var(--neutral-white);
}

.cc-checkout-page .cc-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--brand-ink);
    cursor: pointer;
}

.cc-checkout-page .cc-terms a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: underline;
}

.cc-checkout-page .cc-terms a:hover { color: var(--brand-primary-700); }

.cc-checkout-page .cc-complete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-primary-600);
    color: var(--neutral-white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(var(--brand-primary-600-rgb), .22);
    transition: background-color .15s ease, transform .15s ease;
}

.cc-checkout-page .cc-complete-btn:hover,
.cc-checkout-page .cc-complete-btn:focus {
    background: var(--brand-primary-700);
    color: var(--neutral-white);
}

.cc-checkout-page .cc-complete-btn:active { transform: translateY(1px); }

.cc-checkout-page .cc-complete-btn:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
}

.cc-checkout-page .cc-complete-btn.disabled,
.cc-checkout-page .cc-complete-btn:disabled { opacity: .65; box-shadow: none; }

.cc-checkout-page .cc-secure-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-secure-note i { margin-right: 5px; color: var(--brand-primary); }

/* Con pantallas bajas, el resumen deja de ser fijo para que el botón siempre se alcance */
@media (max-height: 780px) {
    .cc-checkout-page .cc-checkout-summary { position: static; }
}

/* ---------- Otros bloques ---------- */
.cc-checkout-page .marketing-email-optin.cc-form-card h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    color: var(--brand-dark);
}

.cc-checkout-page .cc-captcha-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--brand-dark);
}

.cc-checkout-page .cc-form-head-plain { margin-bottom: 14px; }

/*======= V10 · ACCESO, CONTRASEÑA Y LOGO DE PAGO =======*/

/* Aviso destacado de acceso al área de clientes */
.cc-checkout-page .cc-access-note {
    display: flex;
    gap: 14px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--brand-lime-border);
    border-left: 5px solid var(--brand-primary);
    border-radius: 12px;
    background: var(--brand-lime-soft);
    color: var(--brand-ink);
}

.cc-checkout-page .cc-access-note-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: var(--brand-accent);
    font-size: 15px;
}

.cc-checkout-page .cc-access-note strong {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--brand-dark);
}

.cc-checkout-page .cc-access-note p {
    margin: 4px 0 10px;
    font-size: 13px;
    line-height: 1.5;
}

.cc-checkout-page .cc-access-data {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--neutral-white);
    font-size: 13px;
}

.cc-checkout-page .cc-access-data dt {
    font-weight: 600;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-access-data dd {
    margin: 0;
    color: var(--brand-muted);
    font-style: italic;
    overflow-wrap: anywhere;
}

.cc-checkout-page .cc-access-data dd.is-filled {
    font-style: normal;
    font-weight: 700;
    color: var(--brand-primary);
}

/* Dos formas de crear la contraseña */
.cc-checkout-page .cc-pass-intro {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--brand-ink);
}

.cc-checkout-page .cc-pass-option {
    padding: 16px;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    background: var(--neutral-white);
}

.cc-checkout-page .cc-pass-option-auto { background: var(--brand-tint); }

.cc-checkout-page .cc-pass-option-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-dark);
}

.cc-checkout-page .cc-pass-step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: var(--neutral-white);
    font-size: 12px;
    font-weight: 700;
}

.cc-checkout-page .cc-pass-hint {
    margin: 4px 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-strength .cc-pass-hint { margin: 4px 0 0; }

.cc-checkout-page .cc-pass-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-muted);
}

.cc-checkout-page .cc-pass-or::before,
.cc-checkout-page .cc-pass-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand-border);
}

.cc-checkout-page .cc-pass-wrap { position: relative; }
.cc-checkout-page .cc-pass-wrap .form-control { padding-right: 46px; }

.cc-checkout-page .cc-pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
}

.cc-checkout-page .cc-pass-toggle:hover,
.cc-checkout-page .cc-pass-toggle:focus-visible {
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    outline: 0;
}

.cc-checkout-page .cc-pass-generated {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--brand-soft-1);
    color: var(--state-success);
    font-size: 12.5px;
    font-weight: 600;
}

/* Logo del medio de pago (Webpay Plus) y tarjetas aceptadas */
.cc-checkout-page .cc-pay-text { flex: 1 1 auto; }

.cc-checkout-page .cc-pay-logo {
    flex: 0 0 auto;
    height: 40px;
    width: auto;
    max-width: 170px;
    margin-left: auto;
    object-fit: contain;
}

.cc-checkout-page .cc-pay-cards {
    display: block;
    height: 20px;
    width: auto;
    max-width: 100%;
    margin-top: 8px;
}

@media (max-width: 575px) {
    .cc-checkout-page .cc-pay-option { flex-wrap: wrap; }
    .cc-checkout-page .cc-pay-text { flex-basis: calc(100% - 104px); }
    .cc-checkout-page .cc-pay-logo { height: 30px; margin: 4px 0 0 90px; }
}

/*======= V12 · VACIAR TODO =======*/
.cc-checkout-page .cc-cart-review-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px;
    background: var(--brand-tint);
}

.cc-checkout-page .cc-cart-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--state-danger-border);
    border-radius: 9px;
    background: var(--neutral-white);
    color: var(--state-danger);
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.cc-checkout-page .cc-cart-empty-btn:hover,
.cc-checkout-page .cc-cart-empty-btn:focus-visible {
    border-color: var(--state-danger);
    background: var(--state-danger-bg);
    outline: 0;
}