/* ===================================================
   SICOFI - Rediseno Order Form (Checkout) - Paso 1
   Reskin puro por CSS, no toca la logica de configureproduct.tpl
   =================================================== */
:root{
  --sc-green-dark:#0f3d26;
  --sc-green:#005e2b;
  --sc-green-light:#e7f3ec;
  --sc-text:#1f2924;
  --sc-text-muted:#6b7570;
  --sc-border:#e5e7eb;
  --sc-bg-soft:#f5f8f6;
  --sc-radius:14px;
  --sc-shadow:0 4px 18px rgba(15,61,38,.08);
}

#order-standard_cart{font-family:'Roboto',Arial,sans-serif;color:var(--sc-text);max-width:1180px;margin:0 auto;padding:32px 20px 60px;}

/* Ocultar el selector de categorias/productos lateral: el mockup va a ancho completo.
   IMPORTANTE: el CSS base pone .cart-body en float:right;width:75% (reservando 25%
   para .cart-sidebar) - hay que devolverle el 100% del ancho o queda un hueco a la izquierda. */
#order-standard_cart .cart-sidebar{display:none;}
#order-standard_cart .sidebar-categories-collapsed{display:none;}
#order-standard_cart .cart-body{width:100% !important;float:none !important;}

/* Stepper 1-2-3 */
.sc-stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:48px;flex-wrap:wrap;}
.sc-stepper .sc-step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sc-text-muted);}
.sc-stepper .sc-step-num{width:26px;height:26px;border-radius:50%;background:var(--sc-border);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;}
.sc-stepper .sc-step.active{color:var(--sc-text);font-weight:700;}
.sc-stepper .sc-step.active .sc-step-num, .sc-stepper .sc-step.done .sc-step-num{background:var(--sc-green);}
.sc-stepper .sc-step.active{border-bottom:2px solid var(--sc-green);padding-bottom:8px;}
.sc-stepper .sc-step-sep{width:60px;height:1px;background:var(--sc-border);flex:0 0 auto;}

/* Encabezado */
#order-standard_cart .header-lined{border:none;text-align:center;margin-bottom:8px;}
#order-standard_cart .header-lined h1{font-size:30px;font-weight:800;color:var(--sc-text);}
.sc-subtitle{text-align:center;color:var(--sc-text-muted);font-size:15px;margin:-4px 0 40px;}

/* Layout general: dos columnas como el mockup.
   OJO: el selector debe ser "#frmConfigureProduct > .row" (hijo DIRECTO del form),
   no ".cart-body > .row" - .row esta anidado dentro de <form>, no directo bajo
   .cart-body, asi que ese selector nunca aplicaba y por eso el sidebar/total
   desaparecia o quedaba mal posicionado. Tampoco usar ".cart-body .row" (sin >)
   porque hay otros .row anidados adentro de secondary-cart-body (config options)
   que no deben tocarse. */
#order-standard_cart #frmConfigureProduct > .row{display:grid !important;grid-template-columns:1fr 340px !important;gap:24px;align-items:start;}
#order-standard_cart .secondary-cart-body{float:none !important;width:100% !important;min-width:0;grid-column:1 !important;grid-row:1 !important;}
#order-standard_cart .secondary-cart-sidebar{float:none !important;width:100% !important;grid-column:2 !important;grid-row:1 !important;position:sticky;top:24px;}
@media (max-width: 900px){
  #order-standard_cart #frmConfigureProduct > .row{grid-template-columns:1fr !important;}
  #order-standard_cart .secondary-cart-body{grid-column:1 !important;}
  #order-standard_cart .secondary-cart-sidebar{grid-column:1 !important;grid-row:2 !important;}
}

/* Tarjeta de producto */
#order-standard_cart .product-info{background:#fff;border:1px solid var(--sc-border);border-radius:var(--sc-radius);padding:28px 32px;margin-bottom:24px;}
#order-standard_cart .product-info .product-title{font-size:20px;font-weight:800;margin:0 0 12px;color:var(--sc-text);}
#order-standard_cart .product-info ul{list-style:none;padding:0;margin:0;}
#order-standard_cart .product-info li{padding:6px 0;color:var(--sc-text);font-size:14.5px;border-top:1px solid var(--sc-border);}
#order-standard_cart .product-info li:first-child{border-top:none;}

/* Secciones (Sub-heading -> ya no la usamos como banner de color, la volvemos discreta) */
#order-standard_cart .sub-heading{background:none;border:none;padding:0;margin:28px 0 16px;}
#order-standard_cart .sub-heading .primary-bg-color{background:none !important;color:var(--sc-text) !important;font-size:20px;font-weight:800;padding:0;display:block;}

/* Info del cliente / campos */
#order-standard_cart .field-container{background:#fff;border:1px solid var(--sc-border);border-radius:var(--sc-radius);padding:28px 32px;}
#order-standard_cart .form-group label{font-size:13px;font-weight:600;color:var(--sc-text);margin-bottom:6px;display:block;}
#order-standard_cart .form-control{border:1px solid var(--sc-border);border-radius:8px;padding:10px 12px;font-size:14px;height:auto;box-shadow:none;}
#order-standard_cart .form-control:focus{border-color:var(--sc-green);box-shadow:0 0 0 3px var(--sc-green-light);}

/* Custom fields (Razon Social / RFC / Correo) vienen como input-group */
#order-standard_cart .input-group{display:flex;flex-direction:column;margin-bottom:18px;width:100%;}
#order-standard_cart .input-group .input-group-addon{background:none;border:none;padding:0 0 6px;font-size:13px;font-weight:600;color:var(--sc-text);width:auto;text-align:left;}
#order-standard_cart .input-group .form-control{border-radius:8px !important;}
#order-standard_cart .field-help-text{font-size:12px;color:var(--sc-text-muted);margin-top:4px;}

/* Aviso "¿Tiene preguntas?" */
#order-standard_cart .alert-warning.info-text-sm{background:var(--sc-bg-soft);border:1px solid var(--sc-border);border-radius:10px;color:var(--sc-text-muted);font-size:13px;padding:14px 18px;margin-top:20px;}
#order-standard_cart .alert-warning.info-text-sm .alert-link{color:var(--sc-green);font-weight:700;}

/* Addons */
#order-standard_cart .panel-addon{border:1px solid var(--sc-border);border-radius:12px;box-shadow:none;}
#order-standard_cart .panel-addon-selected{border-color:var(--sc-green);}

/* Sumario del pedido (sidebar).
   OJO: el CSS base pinta el fondo GRIS OSCURO en .order-summary (no en #orderSummary),
   y ese es justo el div que envuelve el h2 "Sumario de Pedido" + #producttotal.
   Hay que sobreescribir .order-summary explicitamente o queda la barra gris de fondo. */
#order-standard_cart #orderSummary{background:#fff;border:1px solid var(--sc-border);border-radius:var(--sc-radius);box-shadow:var(--sc-shadow);overflow:hidden;}
#order-standard_cart .order-summary{background:#fff !important;border-bottom:none !important;border-radius:0;margin:0;padding:28px 28px 0;}
#order-standard_cart .order-summary h2{display:inline-block;background:var(--sc-text-muted) !important;color:#fff !important;text-align:left !important;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 18px;padding:6px 14px;border-radius:999px;}
#order-standard_cart .summary-container{background:none !important;padding:0 0 24px;min-height:0;font-size:14px;}
#order-standard_cart #producttotal .product-name{display:block;font-weight:700;font-size:15px;margin-bottom:2px;}
#order-standard_cart #producttotal .product-group{display:none;}
#order-standard_cart #producttotal .clearfix{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--sc-border);font-size:13.5px;}
#order-standard_cart #producttotal .clearfix .pull-left, #order-standard_cart #producttotal .clearfix .pull-right{float:none;}
#order-standard_cart #producttotal .summary-totals{margin-top:4px;border:none !important;}
/* Total: fila horizontal (label "Total" ya se acorto en ordersummary.tpl, cabe sin romperse) */
#order-standard_cart .total-due-today{display:flex !important;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid var(--sc-border);}
#order-standard_cart .total-due-today .amt{display:block !important;text-align:right !important;font-size:26px !important;line-height:1.2;font-weight:800;color:var(--sc-green-dark);order:2;}
#order-standard_cart .total-due-today span:not(.amt){display:block !important;text-align:left !important;font-size:15px;font-weight:700;color:var(--sc-text);order:1;}

/* Badges de confianza debajo del boton Continuar */
.sc-trust-badges{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.sc-trust-badges span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sc-text-muted);}
.sc-trust-badges i{color:var(--sc-green);}

/* Link "otro paquete" */
.sc-other-package{display:block;text-align:right;margin-top:16px;font-size:13.5px;color:var(--sc-text-muted);}
.sc-other-package a{color:var(--sc-green);font-weight:700;}

/* Boxes informativos (Addendas / Soporte) */
.sc-info-boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.sc-info-box{background:var(--sc-bg-soft);border:1px solid var(--sc-border);border-radius:12px;padding:20px;}
.sc-info-box strong{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--sc-text);margin-bottom:8px;}
.sc-info-box strong i{color:var(--sc-green);}
.sc-info-box p{font-size:13px;color:var(--sc-text-muted);margin:0;}
@media (max-width: 560px){
  .sc-info-boxes{grid-template-columns:1fr;}
}

/* El boton y el aviso de folios son hermanos de .order-summary dentro de #orderSummary,
   no heredan su padding - se les da el suyo aqui. */
#order-standard_cart #orderSummary > .text-center{padding:0 28px;}
#order-standard_cart #orderSummary > .text-center:last-child{padding-bottom:28px;}
#order-standard_cart #btnCompleteProductConfig{width:100%;background:var(--sc-green);border-color:var(--sc-green);border-radius:999px;padding:14px 20px;font-size:15px;font-weight:700;margin-top:20px;}
#order-standard_cart #btnCompleteProductConfig:hover{background:var(--sc-green-dark);border-color:var(--sc-green-dark);}
#order-standard_cart .secondary-cart-sidebar .text-center p{font-size:12.5px;color:var(--sc-text-muted);text-align:center;margin-top:16px;}

@media (max-width: 900px){
  #order-standard_cart .secondary-cart-sidebar{position:static;}
}

/* ===================================================
   viewcart.tpl - "Revisar & Pagar" (no habia mockup, se
   redisena reusando el mismo lenguaje visual de arriba).
   OJO: aqui SI es correcto ".cart-body > .row" (hijo directo) -
   a diferencia de configureproduct.tpl, este archivo no envuelve
   el row en un <form>.
   =================================================== */
#order-standard_cart .cart-body > .row{display:grid !important;grid-template-columns:1fr 340px !important;gap:24px;align-items:start;}
#order-standard_cart .cart-body > .row > .secondary-cart-body{float:none !important;width:100% !important;min-width:0;grid-column:1 !important;grid-row:1 !important;}
#order-standard_cart .cart-body > .row > .secondary-cart-sidebar{float:none !important;width:100% !important;grid-column:2 !important;grid-row:1 !important;position:sticky;top:24px;}
@media (max-width: 900px){
  #order-standard_cart .cart-body > .row{grid-template-columns:1fr !important;}
  #order-standard_cart .cart-body > .row > .secondary-cart-body{grid-column:1 !important;}
  #order-standard_cart .cart-body > .row > .secondary-cart-sidebar{grid-column:1 !important;grid-row:2 !important;}
}

/* Encabezado de la lista de items (antes: barra verde solida) */
#order-standard_cart .view-cart-items-header{background:var(--sc-bg-soft) !important;color:var(--sc-text-muted) !important;border-radius:10px 10px 0 0;padding:12px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
#order-standard_cart .view-cart-items{border:1px solid var(--sc-border) !important;border-top:none;border-radius:0 0 10px 10px;padding:0;}
#order-standard_cart .view-cart-items .item{padding:16px;border-bottom:1px solid var(--sc-border);}
#order-standard_cart .view-cart-items .item:last-child{border-bottom:none;}
#order-standard_cart .item-title{font-weight:700;font-size:15px;color:var(--sc-text);}
#order-standard_cart .item-title .btn-link{color:var(--sc-green);font-size:12px;}
#order-standard_cart .item-group{display:block;font-size:12.5px;color:var(--sc-text-muted);}
#order-standard_cart .item-price{font-weight:700;color:var(--sc-text);}
#order-standard_cart .item-price .cycle{display:block;font-size:11.5px;font-weight:400;color:var(--sc-text-muted);}
#order-standard_cart .btn-remove-from-cart{color:var(--sc-text-muted);}
#order-standard_cart .btn-remove-from-cart:hover{color:#c0392b;}
#order-standard_cart .view-cart-empty{padding:32px;text-align:center;color:var(--sc-text-muted);}

#order-standard_cart .empty-cart{text-align:right;margin-top:10px;}
#order-standard_cart .empty-cart .btn{background:none !important;color:var(--sc-text-muted) !important;font-size:12.5px;padding:0;}

/* Tabs de codigo promocional / calculo de impuestos */
#order-standard_cart .view-cart-tabs{margin-top:28px;}
#order-standard_cart .view-cart-tabs .nav-tabs{border-bottom:1px solid var(--sc-border);}
#order-standard_cart .view-cart-tabs .nav-link{border:none;color:var(--sc-text-muted);font-size:13.5px;font-weight:600;padding:10px 4px;margin-right:20px;}
#order-standard_cart .view-cart-tabs .nav-link.active{color:var(--sc-green);border-bottom:2px solid var(--sc-green);background:none;}
#order-standard_cart .view-cart-tabs .tab-content{padding-top:16px;}
#order-standard_cart .view-cart-promotion-code{background:var(--sc-green-light);border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--sc-green-dark);}

/* Resumen de pedido en esta pantalla (misma estructura .order-summary/.total-due-today
   ya estilada arriba para configureproduct.tpl, aqui se afinan las piezas propias
   de viewcart: subtotal/bordered-totals/recurring-totals, que no pasan por #producttotal) */
#order-standard_cart .order-summary .summary-container{padding:0 0 24px;}
#order-standard_cart .subtotal.clearfix, #order-standard_cart .bordered-totals .clearfix, #order-standard_cart .recurring-totals.clearfix{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--sc-border);font-size:13.5px;}
#order-standard_cart .bordered-totals{border:none !important;}
#order-standard_cart .btn-checkout{display:block;width:100%;background:var(--sc-green) !important;border-color:var(--sc-green) !important;color:#fff !important;border-radius:999px;padding:14px 20px;font-weight:700;text-align:center;}
#order-standard_cart .btn-checkout:hover{background:var(--sc-green-dark) !important;}
#order-standard_cart .btn-continue-shopping{display:block;text-align:center;color:var(--sc-text-muted) !important;font-size:13px;margin-top:10px;}
#order-standard_cart .text-right{text-align:center !important;}