/**
 * Dynasty Luxury Rentals — Checkout (WooCommerce + plugin RnB)
 *
 * SOLO estilos. No toca el template ni la lógica de RnB (las 8 funciones del
 * checkout en functions.php siguen intactas). Mejora el espaciado/diseño que
 * por defecto se veía apretado con los estilos del padre Cartsy.
 *
 * Filas custom de RnB en el order review: tr.rnb-full-price / tr.rnb-balance-due /
 * tr.rnb-deposit-item.
 */

/* ===== Hero (banda negra de page.php): ocultar en checkout/cart =====
   Salía como un gran vacío negro arriba; no aporta nada en estas páginas. */
body.woocommerce-checkout .dynasty-page-hero,
body.woocommerce-cart .dynasty-page-hero {
    display: none !important;
}
body.woocommerce-checkout .dynasty-page-body,
body.woocommerce-cart .dynasty-page-body {
    padding-top: clamp(36px, 5vw, 64px) !important;
    padding-bottom: clamp(48px, 7vw, 80px) !important;
}

/* ===== Contenedor: ensanchar (page.css limita .dynasty-page-content a 860px,
   muy angosto para un checkout 2-col) y centrar. ===== */
body.woocommerce-checkout .dynasty-page-content,
body.woocommerce-cart .dynasty-page-content {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.woocommerce-checkout .dynasty-page-content > .woocommerce,
body.woocommerce-cart .dynasty-page-content > .woocommerce {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== Layout 2 columnas =====
   El contenedor real es `.col2-set` (en este checkout RnB NO tiene id="customer_details",
   solo la clase). Dentro: .col-1 = billing | .col-2 = order review. */
.woocommerce-checkout .col2-set {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;   /* nowrap: nunca se apila en desktop (antes hacía wrap) */
    align-items: flex-start !important;
    gap: clamp(24px, 3vw, 48px) !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}
/* flex-basis 0 + grow 3:2 → columnas 60/40 que se encogen, nunca wrap. */
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .cartsy-woocommerce-billing-details-wrapper {
    flex: 3 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-checkout .col2-set > .col-2,
.woocommerce-checkout .col2-set > .cartsy-woocommerce-order-table-wrapper {
    flex: 2 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 900px) {
    .woocommerce-checkout .col2-set { flex-direction: column !important; flex-wrap: wrap !important; }
    .woocommerce-checkout .col2-set > .col-1,
    .woocommerce-checkout .col2-set > .col-2 { flex: 1 1 auto !important; width: 100% !important; }
}

/* ===== Headings de sección ===== */
.woocommerce-checkout .col2-set h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 20px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #EDEDED !important;
}

/* ===== Campos del formulario ===== */
.woocommerce-checkout .form-row {
    margin: 0 0 20px !important;
    padding: 0 !important;
}
.woocommerce-checkout .form-row label {
    display: block !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 13px !important;
    font-weight: var(--dynasty-fw-medium, 500) !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    margin: 0 0 7px !important;
    line-height: 1.3 !important;
}
.woocommerce-checkout .form-row .required { color: var(--dynasty-brand-gold, #D4AF37) !important; }

.woocommerce-checkout .woocommerce-input-wrapper { display: block !important; width: 100% !important; }

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection {
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 15px !important;
    background: #F7F7F7 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 15px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, background 0.18s ease !important;
}
.woocommerce-checkout textarea { min-height: 110px !important; line-height: 1.5 !important; }
.woocommerce-checkout .select2-container .select2-selection__rendered { line-height: 24px !important; padding: 0 !important; }
.woocommerce-checkout .select2-container .select2-selection__arrow { top: 12px !important; }

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
    border-color: var(--dynasty-brand-gold, #D4AF37) !important;
    background: #FFFFFF !important;
    outline: none !important;
}

/* ===== Caja del Order Review (col derecha) ===== */
.woocommerce-checkout #order_review {
    background: #FFFFFF !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 14px !important;
    padding: clamp(20px, 2vw, 30px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
@media (min-width: 901px) {
    .woocommerce-checkout #order_review { position: sticky; top: 24px; }
}

/* ===== "Your Order" — tarjetas en vez de tabla (template propio
   woocommerce/checkout/review-order.php desde 2026-07-22, pedido del
   cliente: que se vea como el carrito rediseñado). Mismo lenguaje visual y
   misma técnica de dt/dd con float que cart.css. ===== */
.dynasty-checkout-item + .dynasty-checkout-item {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #EDEDED !important;
}
.dynasty-checkout-item {
    display: flex !important;
    gap: 14px !important;
}
.dynasty-checkout-item__media { flex: 0 0 72px !important; }
.dynasty-checkout-item__media img {
    width: 72px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}
.dynasty-checkout-item__body { flex: 1 1 0 !important; min-width: 0 !important; }
.dynasty-checkout-item__name-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
}
.dynasty-checkout-item__name {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
    font-size: 15px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
.dynasty-checkout-item__name a { color: inherit !important; text-decoration: none !important; }
.dynasty-checkout-item__qty {
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    font-size: 13px !important;
}
.dynasty-checkout-item__subtotal {
    flex: 0 0 auto !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 15px !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    white-space: nowrap !important;
}

/* Desglose DLR (City/Pick-up/Drop-off/Note/precio) — label izquierda, monto
   derecha, una línea por dato (mismo criterio que el Price Summary del
   producto y que cart.css). Float (no grid): ocultar el dt del "Note" no
   descuadra los pares siguientes. */
.dynasty-checkout-item__meta .variation {
    display: block !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.dynasty-checkout-item__meta .variation dt {
    float: left !important;
    clear: left !important;
    width: 60% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 12px 4px 0 !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
    line-height: 1.4 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
.dynasty-checkout-item__meta .variation dd {
    margin: 0 0 0 60% !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #F3F3F3 !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    text-align: right !important;
}
.dynasty-checkout-item__meta .variation dd p { display: inline !important; margin: 0 !important; }
/* City/Pick-up/Drop-off (los primeros 3 pares) a la izquierda — texto largo,
   no un monto. Se identifican por posición, no por contenido (ver misma
   nota en cart.css: detectarlos por "no tener .woocommerce-Price-amount"
   agarraba también a "Duration" por error). */
.dynasty-checkout-item__meta .variation dd:nth-of-type(-n+3) { text-align: left !important; }

/* Nota "delivery/pickup fees subject to change" — sin label "Note:", chica/itálica. */
.dynasty-checkout-item__meta .variation dt:has(+ dd .dlr-note) { display: none !important; }
.dynasty-checkout-item__meta .variation dd:has(.dlr-note) {
    margin-left: 0 !important;
    border-bottom: 0 !important;
    padding-top: 2px !important;
    text-align: left !important;
}
.dynasty-checkout-item__meta .variation dd .dlr-note {
    display: block !important;
    font-style: italic !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
}

/* "Balance Due at Pickup" — destacado un poco más que el resto. */
.dynasty-checkout-item__meta .variation dt:has(+ dd .dlr-balance-due) {
    font-size: 14px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
.dynasty-checkout-item__meta .variation dd:has(.dlr-balance-due) { border-bottom: 0 !important; padding-top: 8px !important; }
.dynasty-checkout-item__meta .variation dd .dlr-balance-due {
    font-size: 15px !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

/* ===== Totales (Subtotal / cupón / envío / tax / Total) — tabla chica,
   label izquierda / monto derecha, debajo de las tarjetas. ===== */
.dynasty-checkout-totals {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse !important;
    margin: 24px 0 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #EDEDED !important;
}
.dynasty-checkout-totals th,
.dynasty-checkout-totals td {
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F0F0F0 !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    font-size: 14px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-align: left !important;
}
.dynasty-checkout-totals td { text-align: right !important; white-space: nowrap !important; }
.dynasty-checkout-totals tr.order-total th,
.dynasty-checkout-totals tr.order-total td {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    font-size: 16px !important;
    border-bottom: 0 !important;
}

/* Nota "30% deposit — full rental price: $X" debajo del Total del checkout —
   pedido del cliente 2026-07-21, para que quede claro de qué es el 30% que
   menciona el gateway de pago. Chica/muted, ancho completo (no es un cargo
   más, es una aclaración). */
.dynasty-checkout-totals tr.dlr-full-rental-note td {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    font-size: 12px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    text-align: left !important;
    white-space: normal !important;
}
.dynasty-checkout-totals tr.dlr-full-rental-note td strong {
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
}

/* Filas legacy de RnB (si algún día vuelven a aplicar). */
.dynasty-checkout-totals tr.rnb-full-price th,
.dynasty-checkout-totals tr.rnb-full-price td {
    font-weight: var(--dynasty-fw-semibold, 600) !important;
}
.dynasty-checkout-totals tr.rnb-deposit-item td,
.dynasty-checkout-totals tr.rnb-deposit-item th {
    font-size: 13px !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 0 !important;
}
.dynasty-checkout-totals tr.rnb-deposit-item th { padding-left: 14px !important; }

/* ===== Pago ===== */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    margin-top: 26px !important;
}
.woocommerce-checkout #payment ul.payment_methods {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    list-style: none !important;
}
/* Cada método de pago con aire y separados por una línea sutil. */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border-top: 1px solid #EFEFEF !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:first-child { border-top: 0 !important; }
/* Label del método: radio + texto + iconos en una fila ordenada. */
.woocommerce-checkout #payment ul.payment_methods > li > label {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 14px !important;
    font-weight: var(--dynasty-fw-semibold, 600) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}
/* Iconos de tarjeta en su propia línea, separados del texto del label. */
.woocommerce-checkout #payment .wc-stripe-card-icons-container {
    display: flex !important;
    flex-basis: 100% !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 10px !important;
}
.woocommerce-checkout #payment .wc-stripe-card-icon { height: 22px !important; width: auto !important; }
.woocommerce-checkout #payment .payment_box {
    background: #F7F7F7 !important;
    border-radius: 8px !important;
    padding: 16px !important;            /* antes sin padding → texto pegado al borde */
    margin: 12px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; }
/* Campo de tarjeta (Stripe) con su propio respiro dentro de la caja. */
.woocommerce-checkout #payment #wc-stripe-card-element {
    margin-top: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    padding: 14px !important;
}
.woocommerce-checkout #payment .wc-stripe-save-source { margin-top: 12px !important; }

/* Botón Place Order — estilo Dynasty gold */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
    width: 100% !important;
    margin-top: 18px !important;
    padding: 18px 24px !important;
    background: var(--dynasty-brand-gold, #D4AF37) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 15px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
.woocommerce-checkout #place_order:hover {
    background: var(--dynasty-black-obsidian, #0A0A0A) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
}

/* Zona de captcha + place order con aire. */
.woocommerce-checkout .form-row.place-order { margin-top: 18px !important; padding-top: 18px !important; border-top: 1px solid #EFEFEF !important; }
.woocommerce-checkout .wpcaptcha-captcha-img { margin: 6px 10px 10px 0 !important; }
.woocommerce-checkout #wpcaptcha_captcha {
    min-height: 44px !important;
    padding: 10px 12px !important;
    background: #F7F7F7 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: 160px !important;
}

/* Coupon / login toggles arriba */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-info {
    margin-bottom: 24px !important;
    border-radius: 8px !important;
}

/* Quitar bullets sueltos del padre en listas del checkout */
.woocommerce-checkout #payment ul.payment_methods > li { list-style: none !important; }


/* ==========================================================================
   CART (página del carrito) — rediseño completo con template propio
   (woocommerce/cart/cart.php) desde 2026-07-22. Todo el CSS del contenido
   del carrito vive ahora en assets/css/cart.css, enqueued solo en is_cart().
   Acá (checkout.css) solo quedan las reglas `body.woocommerce-cart` del
   wrapper de página compartido con checkout (arriba del archivo: ocultar
   .dynasty-page-hero, ancho de .dynasty-page-content) — todo lo específico
   de la tabla/cards del carrito se sacó de este archivo.
   ========================================================================== */

/* ==========================================================================
   MOBILE (≤768px) — Checkout
   ========================================================================== */
@media (max-width: 768px) {
    body.woocommerce-checkout .dynasty-page-content { max-width: 100% !important; }

    /* El order review deja de ser sticky y va full width bajo el billing. */
    body.woocommerce-checkout #order_review { position: static !important; }
    body.woocommerce-checkout #payment ul.payment_methods > li > label { font-size: 13px !important; }
    /* Nombres en 1 columna (first/last) si el padre los pone al 50%. */
    body.woocommerce-checkout .form-row-first,
    body.woocommerce-checkout .form-row-last { width: 100% !important; padding: 0 !important; }
}