/* ==========================================================================
   SIINCO Order Form — extras del carrito (issues #16 y #18)

   Estilos de la capa que convierte los dos campos de fábrica (SLD + TLD) en
   uno solo, en configureproductdomain.tpl.

   ⚠️ El nombre de este archivo es deliberadamente específico. {assetPath}
   PREFIERE el directorio del tema de client area y solo cae al del order form
   si el nombre no existe allá — así que un nombre genérico (all.min.css,
   scripts.min.js, style.css) sería secuestrado por el tema y este archivo
   nunca se serviría. Ver common.tpl.
   ========================================================================== */

/* La fila original de SLD/TLD se queda en el DOM —el JS de WHMCS la lee— pero
   deja de verse. `visibility` no sirve aquí: seguiría ocupando su espacio. */
#order-standard_cart .siinco-domain-hidden {
    display: none !important;
}

.siinco-domain-single {
    max-width: 460px;
    margin: 4px 0 8px;
}

.siinco-domain-single-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

#order-standard_cart .siinco-domain-single .form-control {
    width: 100%;
    height: auto;
    padding: 11px 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid rgba(30, 64, 175, 0.25);
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#order-standard_cart .siinco-domain-single .form-control:focus {
    outline: none;
    border-color: #2563ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.15);
}

#order-standard_cart .siinco-domain-single .form-control::placeholder {
    color: #94a3b8;
}

/* Estado de error: sólo aparece cuando el cliente ya escribió algo que no es
   un dominio — nunca al entrar a la pantalla con el campo vacío. */
.siinco-domain-single-error {
    display: none;
    margin: 7px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #b91c1c;
}

.siinco-domain-single.has-error .siinco-domain-single-error {
    display: block;
}

#order-standard_cart .siinco-domain-single.has-error .form-control {
    border-color: #dc2626;
}

#order-standard_cart .siinco-domain-single.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ---------- El dominio elegido en la pantalla de Configurar (issue #18) ---------- */

#order-standard_cart .siinco-chosen-domain {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 9px 12px;
    background: #eff6ff;
    border: 1px solid rgba(30, 64, 175, 0.15);
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
}

#order-standard_cart .siinco-chosen-domain-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

#order-standard_cart .siinco-chosen-domain-value {
    font-size: 1rem;
    color: #0f172a;
    word-break: break-all;
}

#order-standard_cart .siinco-chosen-domain-edit {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e40af;
    text-decoration: none;
    white-space: nowrap;
}

#order-standard_cart .siinco-chosen-domain-edit:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    #order-standard_cart .siinco-chosen-domain-edit {
        margin-left: 0;
    }
}

/* ==========================================================================
   Chrome compartido del carrito (issue #29)

   Vive aquí, y no en domains.css/products.css, porque lo pinta CADA pantalla
   del order form: la barra lateral de Categorías/Acciones, el encabezado
   `header-lined` y las alertas de fábrica. Por eso ahora TODAS las plantillas
   de este order form cargan siinco-cart.css, no sólo las dos que necesitaban
   el campo de dominio único.

   🔴 Deliberadamente NO se forkeó `sidebar-categories.tpl` para conseguir
   esto. Ese archivo es un recorrido sobre los objetos de menú de WHMCS
   ($panel->getChildren(), getBadge(), getExtra('mobileSelect')...): copiarlo
   congela 70 líneas de una API que WHMCS sí evoluciona, a cambio de cero
   estructura nueva — todo lo que hacía falta se consigue desde aquí, contra
   las clases que ese recorrido ya emite. Ver la tabla de decisión por
   plantilla en CLAUDE.md.
   ========================================================================== */

#order-standard_cart .cart-sidebar .card-sidebar,
#order-standard_cart .cart-sidebar .panel-sidebar {
    background: #ffffff;
    border: 1px solid rgba(37, 99, 255, 0.10);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

#order-standard_cart .cart-sidebar .card-header,
#order-standard_cart .cart-sidebar .panel-heading {
    background: #f8fafc;
    border-bottom: 1px solid rgba(37, 99, 255, 0.08);
    padding: 14px 18px;
}

#order-standard_cart .cart-sidebar .panel-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    margin: 0;
}

#order-standard_cart .cart-sidebar .list-group-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #475569;
    border: none;
    border-top: 1px solid rgba(37, 99, 255, 0.06);
    padding: 12px 18px;
    background: transparent;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: #f1f5f9;
    color: #1e40af;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}

/* ---------- Encabezado de página ---------- */
/* `header-lined` es el patrón de fábrica para el <h1> de complete/error/
   transfer. Se le quita la línea gris y se le pone la tipografía de marca. */

#order-standard_cart .header-lined {
    border: none;
    margin-bottom: 8px;
    padding-bottom: 0;
}

#order-standard_cart .header-lined h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: #0f172a;
}

/* ---------- Alertas ---------- */
/* Bootstrap las pinta con su paleta propia (azul #d1ecf1, amarillo #fff3cd).
   Aquí sólo se ajusta el radio y la tipografía; los colores de estado (aviso,
   error) se dejan intactos a propósito: son señal, no decoración. */

#order-standard_cart .alert {
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    border-width: 1px;
}

/* ---------- Botón principal compartido ---------- */
/* Se usa en complete/error/domaintransfer. Va junto a .btn .btn-primary de
   Bootstrap, así que necesita ganar por especificidad: de ahí el prefijo con
   el id, igual que el resto de este archivo. */

#order-standard_cart .siinco-cta,
#order-standard_cart .siinco-cta:focus {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #1e40af, #2563ff);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 28px;
    box-shadow: none;
}

#order-standard_cart .siinco-cta:hover {
    background: linear-gradient(135deg, #1a3799, #1e56e6);
    color: #ffffff;
}

/* ---------- Pedido completado (complete.tpl) ---------- */

#order-standard_cart .siinco-complete {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
    border-radius: 18px;
    padding: 48px 32px 40px;
    text-align: center;
    color: #ffffff;
}

#order-standard_cart .siinco-complete-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 1.6rem;
    color: #ffffff;
}

#order-standard_cart .siinco-complete-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 10px;
}

#order-standard_cart .siinco-complete-lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 26px;
}

#order-standard_cart .siinco-complete-order {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#order-standard_cart .siinco-complete-order-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

#order-standard_cart .siinco-complete-order-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #ffffff;
}

#order-standard_cart .siinco-complete-instructions {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 24px auto 0;
}

#order-standard_cart .siinco-complete-body {
    padding: 32px 0 8px;
}

/* ---------- Aviso a página completa (error.tpl) ---------- */

#order-standard_cart .siinco-notice {
    background: #ffffff;
    border: 1px solid rgba(37, 99, 255, 0.10);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
    padding: 48px 32px;
    text-align: center;
    max-width: 640px;
    margin: 12px auto;
}

#order-standard_cart .siinco-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 1.5rem;
}

#order-standard_cart .siinco-notice-error .siinco-notice-icon {
    background: #fef2f2;
    color: #dc2626;
}

#order-standard_cart .siinco-notice-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: #0f172a;
    margin: 0 0 14px;
}

#order-standard_cart .siinco-notice-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #b91c1c;
    margin: 0 0 8px;
}

#order-standard_cart .siinco-notice-detail {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 26px;
}

/* ---------- Panel de cotización (siinco-cotizacion-panel.tpl, issue #47) ---------- */
/* Reemplaza al formulario de compra en configureproductdomain.tpl y
   configureproduct.tpl para los productos de cotización. Mismo lenguaje que
   .siinco-complete (hero oscuro, tarjeta centrada) porque es también una
   pantalla terminal del recorrido: aquí no se sigue al carrito. */

#order-standard_cart .siinco-quote {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
    border-radius: 18px;
    padding: 48px 32px 40px;
    text-align: center;
    color: #ffffff;
    margin: 12px 0;
}

#order-standard_cart .siinco-quote-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

#order-standard_cart .siinco-quote-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 12px;
}

#order-standard_cart .siinco-quote-lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
    margin: 0 auto 22px;
}

#order-standard_cart .siinco-quote-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0 auto 28px;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    text-align: left;
}

#order-standard_cart .siinco-quote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

#order-standard_cart .siinco-quote .siinco-cta {
    background: #ffffff;
    color: #1e40af;
}

#order-standard_cart .siinco-quote .siinco-cta:hover {
    background: #e8efff;
    color: #1a3799;
}

#order-standard_cart .siinco-quote-back {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

#order-standard_cart .siinco-quote-back:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ==========================================================================
   Resumen del pedido en la pantalla de pago (issue #56)

   standard_cart/checkout.tpl no lista el carrito, así que el comprador
   llegaba a pagar sin ver para qué dominio era cada servicio. El bloque lo
   pinta checkout.tpl y js/siinco-checkout.js lo mueve dentro de .cart-body.

   ⚠️ Los selectores NO llevan `#order-standard_cart` a propósito, y es la
   excepción a la regla del #33: el bloque nace FUERA de ese contenedor (se
   pinta antes del include de fábrica) y sólo entra en él si el JS corre. Un
   selector con el id dejaría la tarjeta sin estilo justo en el caso
   degradado, que es cuando más falta hace que se vea bien. Las clases son
   propias, así que no compiten con ninguna de all.min.css.
   ========================================================================== */

.siinco-checkout-resumen {
    margin: 0 0 24px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.siinco-checkout-resumen__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.siinco-checkout-resumen__titulo {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.siinco-checkout-resumen__editar {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e40af;
    text-decoration: none;
}

.siinco-checkout-resumen__editar:hover,
.siinco-checkout-resumen__editar:focus {
    color: #2563ff;
    text-decoration: underline;
}

.siinco-checkout-resumen__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.siinco-checkout-resumen__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.siinco-checkout-resumen__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.siinco-checkout-resumen__desc {
    flex: 1 1 220px;
    min-width: 0;
}

.siinco-checkout-resumen__nombre {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

/* El dominio y los campos personalizados. Es LA línea que distingue dos
   renglones idénticos, así que no se pinta como texto secundario apagado:
   va en el azul de marca y con el valor en negrita. */
.siinco-checkout-resumen__dato {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    color: #1e40af;
    word-break: break-word;
}

.siinco-checkout-resumen__precio {
    flex: 0 0 auto;
    text-align: right;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.siinco-checkout-resumen__ciclo {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #94a3b8;
}