/*
 * WooCommerce Custom Cart & Checkout Styles
 * Text Domain: addon-ferry-ticket
 * 
 * IMPORTANT: This stylesheet relies on the Busly theme's CSS custom properties.
 * Do not hardcode brand colors.
 */

/* ==========================================================================
   1. Progress Bar (pp-progress-bar)
   ========================================================================== */
.pp-progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 800px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.pp-progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: var(--busly-s200, #e2e8f0);
    z-index: 1;
}

.pp-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
}

.pp-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--busly-s200, #e2e8f0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--busly-s500, #64748b);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.pp-step.active .pp-step-circle {
    border-color: var(--busly-primary, #1d3d87);
    background-color: var(--busly-primary, #1d3d87);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(29, 61, 135, 0.1);
}

.pp-step.completed .pp-step-circle {
    border-color: var(--busly-accent, #f05a28);
    background-color: var(--busly-accent, #f05a28);
    color: #fff;
}

.pp-step-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--busly-s500, #64748b);
}

.pp-step.active .pp-step-label {
    color: var(--busly-heading, #0f172a);
    font-weight: 700;
}

@media (max-width: 600px) {
    .pp-step-label {
        display: none;
    }
}

/* ==========================================================================
   2. Cart Page Title (pp-cart-title)
   ========================================================================== */
.pp-cart-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-family: var(--busly-font-primary, inherit);
}

.pp-cart-title-icon {
    margin-right: 15px;
    color: var(--busly-primary, #1d3d87);
}

.pp-cart-title h1 {
    margin: 0;
    color: var(--busly-heading, #0f172a);
    font-size: 32px;
    font-weight: 700;
}

.pp-cart-item-count {
    background-color: var(--busly-accent, #f05a28);
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 15px;
    font-weight: 600;
}

/* ==========================================================================
   3. Checkout Full Width Layout
   ========================================================================== */
.woocommerce-checkout {
    max-width: 100% !important;
    padding: 0 !important;
}

.woocommerce.pp-forced-checkout {
    max-width: 100% !important;
}

/* ==========================================================================
   4. Checkout 65/35 Split Layout
   ========================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    float: none !important;
    width: auto !important;
}

.woocommerce-checkout #customer_details {
    width: 65% !important;
    float: left !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    width: 35% !important;
    float: right !important;
    background: #fff !important;
    padding: 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout::after {
    content: '';
    display: table;
    clear: both;
}

/* ==========================================================================
   5. Hide Ticket Information
   ========================================================================== */
.wc-item-meta {
    display: none !important;
}

.woocommerce-item-meta {
    display: none !important;
}

.booking-details {
    display: none !important;
}

.wbtm-cart-item-info {
    display: none !important;
}

/* ==========================================================================
   6. Conditional Additional Information Field
   ========================================================================== */
#order_comments_field {
    display: none !important;
}

#order_comments_field.show-field {
    display: block !important;
}

.pp-additional-info-toggle {
    margin: 20px 0;
    padding: 15px;
    background: var(--busly-s50, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--busly-s200, #e2e8f0);
}

.pp-additional-info-toggle label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--busly-heading, #0f172a);
}

.pp-additional-info-toggle input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    accent-color: var(--busly-primary, #1d3d87);
}

.pp-additional-info-toggle .description {
    margin-top: 8px;
    font-size: 14px;
    color: var(--busly-s500, #64748b);
    margin-left: 30px;
}

/* ==========================================================================
   7. Move Additional Information to End
   ========================================================================== */
#order_comments_field {
    order: 999 !important;
    margin-top: 30px !important;
}

/* ==========================================================================
   8. Checkout Full Width Layout
   ========================================================================== */
.woocommerce-checkout {
    max-width: 100% !important;
    padding: 0 !important;
}

.woocommerce.pp-forced-checkout {
    max-width: 100% !important;
}

/* ==========================================================================
   9. Checkout 65/35 Split Layout
   ========================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    float: none !important;
    width: auto !important;
}

.woocommerce-checkout #customer_details {
    width: 65% !important;
    float: left !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    width: 35% !important;
    float: right !important;
    background: #fff !important;
    padding: 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout::after {
    content: '';
    display: table;
    clear: both;
}

/* ==========================================================================
   10. Hide Ticket Information completely
   ========================================================================== */
.wc-item-meta,
.woocommerce-item-meta,
.booking-details,
.wbtm-cart-item-info,
.wbtm-booking-info {
    display: none !important;
}

/* ==========================================================================
   11. Additional Information Toggle (already in JS, ensuring CSS support)
   ========================================================================== */
.pp-notes-toggle-wrapper {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--busly-s50, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--busly-s200, #e2e8f0);
}

.pp-notes-toggle-wrapper label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--busly-heading, #0f172a);
}

.pp-notes-toggle-wrapper input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    accent-color: var(--busly-primary, #1d3d87);
}

.woocommerce-additional-fields h3 {
    display: none !important;
}

/* ==========================================================================
   12. Move Additional Information to End (CSS ordering)
   ========================================================================== */
.woocommerce-additional-fields {
    order: 999 !important;
    margin-top: 30px !important;
}

/* ==========================================================================
   13. Responsive Layout
   ========================================================================== */
@media (max-width: 1023px) {
    .woocommerce-checkout #customer_details {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }

    .woocommerce-checkout #order_review,
    .woocommerce-checkout #order_review_heading {
        width: 100% !important;
        float: none !important;
        margin-top: 30px !important;
    }
}


/* ==========================================================================
   2. Cart Page Title (pp-cart-title)
   ========================================================================== */
.pp-cart-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-family: var(--busly-font-primary, inherit);
}

.pp-cart-title-icon {
    margin-right: 15px;
    color: var(--busly-primary, #1d3d87);
}

.pp-cart-title h1 {
    margin: 0;
    color: var(--busly-heading, #0f172a);
    font-size: 32px;
    font-weight: 700;
}

.pp-cart-item-count {
    background-color: var(--busly-accent, #f05a28);
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 15px;
    font-weight: 600;
}


/* ==========================================================================
   3. Cart Table Enhancement
   ========================================================================== */
.woocommerce table.shop_table {
    border: 1px solid var(--busly-border, #e2e8f0);
    border-radius: var(--busly-radius, 20px);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 30px;
    background-color: #fff;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background-color: var(--busly-s50, #f8fafc);
    color: var(--busly-heading, #0f172a);
    font-weight: 600;
    padding: 15px 20px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
}

.woocommerce table.shop_table td {
    padding: 20px;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
    vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
    border-bottom: none;
}

.woocommerce table.shop_table .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px; /* Slightly less than full radius for images */
    border: 1px solid var(--busly-border, #e2e8f0);
}

.woocommerce table.shop_table .product-name a {
    color: var(--busly-heading, #0f172a);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce table.shop_table .product-name a:hover {
    color: var(--busly-primary, #1d3d87);
}

.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
    color: var(--busly-text, #64748b);
    font-weight: 600;
}

/*
 * Columnas del carrito (decisión por contenido del carrito):
 * - Carrito 100% tickets (clase pp-ticket-only que añade la plantilla del
 *   plugin) => se ocultan Precio, Cantidad y Subtotal, porque esos datos ya
 *   aparecen dentro de los detalles del propio ticket.
 * - Si hay cualquier otro producto => se muestran TODAS las columnas.
 */
.woocommerce-cart-form__contents.pp-ticket-only .product-price,
.woocommerce-cart-form__contents.pp-ticket-only .product-quantity,
.woocommerce-cart-form__contents.pp-ticket-only .product-subtotal {
    display: none !important;
}

/* (Las filas mixtas ya no existen: cada tipo de producto vive en su propia
   columna/tabla, así que esta regla queda solo como red de seguridad.) */

@media (max-width: 768px) {
    .woocommerce table.shop_table, 
    .woocommerce table.shop_table tbody, 
    .woocommerce table.shop_table tr, 
    .woocommerce table.shop_table td {
        display: block;
        width: 100%;
    }
    
    .woocommerce table.shop_table thead {
        display: none;
    }
    
    .woocommerce table.shop_table tr {
        margin-bottom: 20px;
        border-bottom: 2px solid var(--busly-border, #e2e8f0);
        position: relative;
    }
    
    .woocommerce table.shop_table td {
        border-bottom: none;
        padding-left: 50%;
        text-align: right;
        position: relative;
    }
    
    .woocommerce table.shop_table td::before {
        content: attr(data-title);
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: var(--busly-heading, #0f172a);
    }
}


/* ==========================================================================
   4. Quantity Controls (pp-qty-wrapper)
   ========================================================================== */
.pp-qty-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--busly-border, #e2e8f0);
    border-radius: 30px;
    padding: 5px;
    background: #fff;
}

.pp-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--busly-primary, #1d3d87);
    background-color: transparent;
    color: var(--busly-primary, #1d3d87);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.pp-qty-btn:hover {
    background-color: var(--busly-primary, #1d3d87);
    color: #fff;
}

.pp-qty-wrapper .qty {
    width: 48px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--busly-heading, #0f172a);
    font-weight: 600;
    font-size: 16px;
    padding: 0;
    -moz-appearance: textfield;
}

.pp-qty-wrapper .qty::-webkit-outer-spin-button,
.pp-qty-wrapper .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==========================================================================
   5. Remove Button (pp-remove-btn)
   ========================================================================== */
.pp-remove-btn {
    color: var(--busly-s500, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--busly-s50, #f8fafc);
    transition: all 0.2s ease;
    text-decoration: none;
}

.pp-remove-btn:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

.pp-remove-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}


/* ==========================================================================
   6. Coupon Section
   ========================================================================== */
.coupon {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.coupon label {
    display: none;
}

.coupon .input-text {
    border: 1px solid var(--busly-border, #e2e8f0);
    border-radius: var(--busly-radius, 20px) 0 0 var(--busly-radius, 20px);
    padding: 12px 20px;
    height: 48px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    width: 200px;
}

.coupon .input-text:focus {
    border-color: var(--busly-primary, #1d3d87);
}

.coupon .button {
    background-color: var(--busly-primary, #1d3d87);
    color: #fff;
    border: none;
    border-radius: 0 var(--busly-radius, 20px) var(--busly-radius, 20px) 0;
    height: 48px;
    padding: 0 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.coupon .button:hover {
    background-color: var(--busly-heading, #0f172a);
}

@media (max-width: 480px) {
    .coupon {
        flex-direction: column;
        width: 100%;
    }
    
    .coupon .input-text {
        width: 100%;
        border-radius: var(--busly-radius, 20px);
        margin-bottom: 10px;
    }
    
    .coupon .button {
        width: 100%;
        border-radius: var(--busly-radius, 20px);
    }
}


/* ==========================================================================
   7. Cart Totals
   ========================================================================== */
.cart-collaterals .cart_totals {
    background-color: #fff;
    border-radius: var(--busly-radius, 20px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 30px;
    margin-top: 30px;
    width: 100%;
}

@media (min-width: 1024px) {
    /* Two-column layout */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 55% 1fr;
        gap: 40px;
        align-items: start;
    }
    
    .woocommerce-checkout form.checkout::before,
    .woocommerce-checkout form.checkout::after {
        display: none !important;
    }
    
    .woocommerce-checkout form.checkout #customer_details {
        width: 100% !important;
        float: none !important;
        margin-bottom: 0;
    }
    
    .woocommerce-checkout form.checkout #order_review_heading {
        display: none !important;
    }
    
    .woocommerce-checkout form.checkout #order_review {
        width: 100% !important;
        float: none !important;
        position: sticky;
        top: 20px;
    }
    .woocommerce-checkout form.checkout #customer_details {
        flex: 1 1 50%;
        margin-bottom: 0;
    }
    
    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}
    
    .woocommerce-checkout form.checkout #order_review_heading {
        display: none;
    }
    .cart-collaterals .cart_totals {
        width: 40%;
        position: sticky;
        top: 100px;
    }
}

.cart_totals h2 {
    font-size: 24px;
    color: var(--busly-heading, #0f172a);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
}

.cart_totals table {
    width: 100%;
    margin-bottom: 25px;
    border-collapse: collapse;
}

.cart_totals table th,
.cart_totals table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
}

.cart_totals table th {
    text-align: left;
    color: var(--busly-heading, #0f172a);
    font-weight: 600;
}

.cart_totals table td {
    text-align: right;
    color: var(--busly-text, #64748b);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    border-bottom: none;
    font-size: 20px;
    padding-top: 25px;
}

.cart_totals .order-total td strong {
    color: var(--busly-primary, #1d3d87);
}


/* ==========================================================================
   8. Trust Badges (pp-trust-badges, pp-checkout-trust-badges)
   ========================================================================== */
.pp-trust-badges,
.pp-checkout-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.pp-trust-badge {
    background-color: var(--busly-s50, #f8fafc);
    border: 1px solid var(--busly-border, #e2e8f0);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pp-trust-badge-icon {
    color: var(--busly-primary, #1d3d87);
    margin-bottom: 10px;
}

.pp-trust-badge-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.pp-trust-badge-text {
    font-size: 12px;
    color: var(--busly-text, #64748b);
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .pp-trust-badges,
    .pp-checkout-trust-badges {
        grid-template-columns: 1fr;
    }
    
    .pp-trust-badge {
        flex-direction: row;
        text-align: left;
        padding: 10px 15px;
    }
    
    .pp-trust-badge-icon {
        margin-bottom: 0;
        margin-right: 15px;
    }
}


/* ==========================================================================
   9. Checkout Button (pp-checkout-btn)
   ========================================================================== */
.wc-proceed-to-checkout {
    margin-top: 20px;
}

.pp-checkout-btn,
.checkout-button.button.alt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--busly-accent, #f05a28);
    color: #fff;
    padding: 18px 24px;
    border-radius: var(--busly-radius, 20px);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px 0 rgba(240, 90, 40, 0.39);
}

.pp-checkout-btn:hover,
.checkout-button.button.alt:hover {
    background-color: var(--busly-accent-hover, #e04a18);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 90, 40, 0.4);
    color: #fff;
}

.pp-checkout-btn::before,
.checkout-button.button.alt::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>');
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

@keyframes pp-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.pp-checkout-btn.pulse-once {
    animation: pp-pulse 1s ease-in-out 1;
}


/* ==========================================================================
   10. Empty Cart (pp-empty-cart-elegant)
   ========================================================================== */
.pp-empty-cart-elegant {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: var(--busly-radius, 24px);
    border: 1px solid var(--busly-border, #e2e8f0);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin: 40px auto;
}

.pp-empty-icon-wrapper {
    width: 96px;
    height: 96px;
    margin: 0 auto 25px;
    background: #f0f4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--busly-primary, #1d3d87);
    box-shadow: 0 0 0 10px rgba(29, 61, 135, 0.05);
}

.pp-empty-icon-wrapper svg {
    width: 42px;
    height: 42px;
    stroke-width: 2px;
}

.pp-empty-cart-heading {
    color: var(--busly-heading, #0f172a);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.pp-empty-cart-subtext {
    color: var(--busly-text, #64748b);
    margin-bottom: 35px;
    font-size: 16px;
    line-height: 1.6;
}

.pp-empty-cart-actions {
    display: flex;
    justify-content: center;
}

.pp-empty-cart-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--busly-primary, #1d3d87);
    color: #fff;
    padding: 16px 32px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px -6px rgba(29, 61, 135, 0.4);
}

.pp-empty-cart-btn:hover {
    background-color: #142a5e;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -8px rgba(29, 61, 135, 0.5);
    color: #fff;
}

.pp-empty-cart-btn svg {
    margin-right: 10px;
}


/* ==========================================================================
   11. Checkout Form
   ========================================================================== */
.woocommerce-checkout #customer_details {
    background-color: #fff;
    border-radius: var(--busly-radius, 20px);
    padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.pp-section-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.pp-section-header h3 {
    margin: 0;
    color: var(--busly-heading, #0f172a);
    font-size: 20px;
}

.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 20px 0;
}

.woocommerce form .form-row label {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: var(--busly-s500, #64748b);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: #f1f5f9;
    color: var(--busly-heading, #0f172a);
    font-family: inherit;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: rgba(29, 61, 135, 0.3);
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(29, 61, 135, 0.08);
    transform: translateY(-2px);
}

.pp-field-half {
    width: 48%;
    float: left;
}

.pp-field-half:nth-child(even) {
    float: right;
}

.pp-field-full {
    width: 100%;
    clear: both;
}

.woocommerce form .form-row::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {
    .pp-field-half {
        width: 100%;
        float: none;
    }
}


/* ==========================================================================
   12. Checkout Order Review
   ========================================================================== */
#order_review {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

#order_review_heading {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
    font-size: 20px;
    color: var(--busly-heading, #0f172a);
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--busly-border, #e2e8f0);
}

.woocommerce-checkout-review-order-table thead th {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--busly-s500, #64748b);
}

.woocommerce-checkout-review-order-table .product-name {
    color: var(--busly-heading, #0f172a);
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot th {
    text-align: left;
    color: var(--busly-heading, #0f172a);
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-bottom: none;
    font-size: 18px;
    padding-top: 20px;
}

.woocommerce-checkout-review-order-table .order-total td strong {
    color: var(--busly-primary, #1d3d87);
}


/* ==========================================================================
   13. Payment Methods (GATEWAY-AGNOSTIC)
   ========================================================================== */
#payment {
    background: transparent;
    border-radius: 0;
}

#payment ul.payment_methods {
    padding: 0;
    margin: 0 0 30px 0;
    border: none;
    list-style: none;
}

#payment ul.payment_methods li.wc_payment_method {
    background-color: #fff;
    border: 1px solid var(--busly-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 20px;
    transition: all 0.2s ease;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    display: none;
}

#payment ul.payment_methods li.wc_payment_method > label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--busly-heading, #0f172a);
    margin: 0;
}

#payment ul.payment_methods li.wc_payment_method > label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--busly-s200, #e2e8f0);
    border-radius: 50%;
    margin-right: 15px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked + label::before {
    border-color: var(--busly-primary, #1d3d87);
    border-width: 6px;
}

#payment ul.payment_methods li.wc_payment_method:has(> input[type="radio"]:checked) {
    border-color: var(--busly-primary, #1d3d87);
    border-left-width: 4px;
    background-color: var(--busly-s50, #f8fafc);
}

#payment ul.payment_methods li.wc_payment_method .payment_box {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--busly-s50, #f8fafc);
    border-radius: 8px;
    font-size: 14px;
    color: var(--busly-text, #64748b);
    border-top: 1px dashed var(--busly-border, #e2e8f0);
}


/* ==========================================================================
   14. Place Order Button
   ========================================================================== */
.pp-place-order-wrapper {
    text-align: center;
    margin-top: 20px;
}

#payment #place_order {
    background-color: var(--busly-accent, #f05a28);
    color: #fff;
    padding: 18px 30px;
    border-radius: var(--busly-radius, 20px);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(240, 90, 40, 0.39);
}

#payment #place_order:hover {
    background-color: var(--busly-accent-hover, #e04a18);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 90, 40, 0.4);
}


/* ==========================================================================
   15. Security Notice (pp-security-notice)
   ========================================================================== */
.pp-security-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 500;
}

.pp-security-notice svg {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    fill: currentColor;
}


/* ==========================================================================
   16. WooCommerce Notices Enhancement
   ========================================================================== */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    font-weight: 500;
    border: none;
    border-left: 4px solid;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.woocommerce-message {
    border-left-color: #22c55e;
    color: #166534;
}

.woocommerce-info {
    border-left-color: var(--busly-primary, #1d3d87);
    color: var(--busly-primary, #1d3d87);
}

.woocommerce-error {
    border-left-color: #ef4444;
    color: #991b1b;
    list-style: none;
}

.woocommerce-error li {
    margin: 0;
}
.busly-no-sidebar .busly-content-grid {
    display: grid !important;
    max-width: 100% !important;

    
}
.wrap {
    max-width: 100% !important;
    /* margin: 0 auto; */
    /* padding: 0 28px; */
}

/* ==========================================================================
   17. Responsive Layouts
   ========================================================================== */
@media (min-width: 1024px) {
    /* Two-column Split View Layout */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 55% 1fr;
        gap: 40px;
        align-items: start;
    }
    
    /* Remove clearfixes that break grid/flex */
    .woocommerce-checkout form.checkout::before,
    .woocommerce-checkout form.checkout::after {
        display: none !important;
    }
    
    .woocommerce-checkout form.checkout #customer_details {
        width: 100% !important;
        float: none !important;
        margin-bottom: 0;
    }
    
    .woocommerce-checkout form.checkout #order_review_heading {
        display: none !important;
    }
    
    .woocommerce-checkout form.checkout #order_review {
        width: 100% !important;
        float: none !important;
        position: sticky;
        top: 20px;
    }
}


/* ==========================================================================
   18. Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--busly-primary, #1d3d87);
    outline-offset: 2px;
}


/* ==========================================================================
   19. Print Styles
   ========================================================================== */
@media print {
    .pp-progress-bar,
    .pp-checkout-btn,
    .pp-trust-badges,
    .pp-checkout-trust-badges,
    #payment,
    .coupon {
        display: none !important;
    }
    
    body {
        background-color: #fff;
    }
    
    .woocommerce-checkout #customer_details,
    #order_review,
    .cart-collaterals .cart_totals {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}
/* ==========================================================================
   Tabla del carrito: ancho completo y fila de cupón/acciones usable
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce-cart-form table.woocommerce-cart-form__contents {
    width: 100% !important;
}

.woocommerce-cart-form__contents td.actions {
    width: 100%;
}

.woocommerce-cart-form__contents td.actions .coupon {
    flex-wrap: wrap;
}

.woocommerce-cart-form__contents td.actions .coupon .input-text {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
}




/* Fix Payment Logos */
#payment ul.payment_methods img {
    max-width: 140px;
    height: auto;
    display: block;
    margin-top: 10px;
}


/* ==========================================================================
   20. ULTRA CUSTOM CHECKOUT LAYOUT
   ========================================================================== */
.pp-ultra-custom-checkout {
    display: block !important;
}

.pp-checkout-split-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 1024px) {
    .pp-checkout-split-layout {
        grid-template-columns: 55% 1fr !important;
    }
}

.pp-checkout-left-col {
    width: 100% !important;
}

.pp-checkout-right-col {
    width: 100% !important;
    position: sticky;
    top: 20px;
}

/* Glassmorphism for the right column */
.pp-checkout-review-wrapper {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.pp-review-heading {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--busly-heading, #0f172a) !important;
    border-bottom: 2px solid var(--busly-s200, #e2e8f0);
    padding-bottom: 15px;
}

/* ==========================================================================
   21. FULL WIDTH BREAKOUT
   ========================================================================== */
@media (min-width: 1024px) {
    .pp-forced-checkout {
        width: 90vw !important;
        max-width: 1400px !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ==========================================================================
   22. Final cart and checkout composition
   These selectors intentionally override legacy theme/WooCommerce float rules.
   ========================================================================== */
.pp-forced-cart,
.pp-forced-checkout {
    width: min(90vw, 1440px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Keep the useful route data in the cart; checkout receives only the cleaned data. */
.pp-forced-cart .wc-item-meta,
.pp-forced-cart .woocommerce-item-meta,
.pp-ultra-custom-checkout .wc-item-meta,
.pp-ultra-custom-checkout .woocommerce-item-meta {
    display: block !important;
}

/* The custom checkout uses 60% customer data, 35% order review, and a 5% gutter. */
.pp-ultra-custom-checkout {
    display: block !important;
}

.pp-ultra-custom-checkout .pp-checkout-split-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

.pp-ultra-custom-checkout .pp-checkout-left-col,
.pp-ultra-custom-checkout .pp-checkout-right-col {
    width: auto !important;
    min-width: 0;
}

.pp-ultra-custom-checkout .pp-checkout-right-col {
    position: static;
}

/* WooCommerce normally floats these columns; force the order notes beneath billing. */
.pp-ultra-custom-checkout .pp-checkout-customer-forms .col2-set,
.pp-ultra-custom-checkout .pp-checkout-customer-forms .col-1,
.pp-ultra-custom-checkout .pp-checkout-customer-forms .col-2,
.pp-ultra-custom-checkout .pp-checkout-customer-forms .woocommerce-billing-fields,
.pp-ultra-custom-checkout .pp-checkout-customer-forms .woocommerce-additional-fields {
    float: none !important;
    width: 100% !important;
}

.pp-ultra-custom-checkout .pp-checkout-customer-forms .woocommerce-additional-fields {
    clear: both;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--busly-s200, #e2e8f0);
}

.pp-ultra-custom-checkout .pp-checkout-customer-forms .woocommerce-additional-fields h3 {
    display: block !important;
    margin: 0 0 12px;
    font-size: 18px;
}

.pp-ultra-custom-checkout .pp-checkout-customer-forms #order_comments_field {
    display: block !important;
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
    .pp-ultra-custom-checkout .pp-checkout-split-layout {
        grid-template-columns: minmax(0, 60fr) minmax(320px, 35fr) !important;
        gap: 5%;
    }

    .pp-ultra-custom-checkout .pp-checkout-right-col {
        position: sticky;
        top: 28px;
    }
}

/* Polished cart structure without altering the booking information supplied by WBTM. */
.pp-forced-cart .woocommerce-cart-form {
    background: #fff;
    border: 1px solid var(--busly-s200, #e2e8f0);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.pp-forced-cart table.shop_table {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.pp-forced-cart table.shop_table th {
    padding: 16px 20px !important;
    background: #f8fafc;
}

.pp-forced-cart table.shop_table td {
    padding: 24px 20px !important;
    vertical-align: top !important;
}

.pp-forced-cart .product-name {
    line-height: 1.55;
}

.pp-forced-cart .product-name > a,
.pp-forced-cart .product-name > strong {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--busly-heading, #0f172a);
    font-size: 18px;
}

.pp-forced-cart .cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.pp-forced-cart .cart-collaterals .cart_totals {
    width: min(100%, 410px) !important;
    margin: 0 !important;
    border: 1px solid var(--busly-s200, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

@media (max-width: 1023px) {
    .pp-forced-cart,
    .pp-forced-checkout {
        width: calc(100% - 32px) !important;
    }
}

/* ==========================================================================
   23. Isolated addon layout (ppaa-* namespace)
   ========================================================================== */
.woocommerce.ppaa-checkout-root,
.woocommerce.ppaa-cart-root {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.ppaa-checkout,
.ppaa-checkout * { box-sizing: border-box; }

.ppaa-checkout .ppaa-checkout-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    width: 100% !important;
    clear: both !important;
}

.ppaa-checkout .ppaa-checkout-customer,
.ppaa-checkout .ppaa-checkout-review,
.ppaa-checkout .ppaa-customer-details {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.ppaa-checkout .ppaa-customer-details {
    padding: 30px !important;
    background: #fff;
    border: 1px solid var(--busly-s200, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.ppaa-checkout .ppaa-customer-details .col2-set,
.ppaa-checkout .ppaa-customer-details .col-1,
.ppaa-checkout .ppaa-customer-details .col-2,
.ppaa-checkout .ppaa-customer-details .woocommerce-billing-fields,
.ppaa-checkout .ppaa-customer-details .woocommerce-shipping-fields,
.ppaa-checkout .ppaa-customer-details .woocommerce-additional-fields {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.ppaa-checkout .ppaa-customer-details .woocommerce-additional-fields {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--busly-s200, #e2e8f0);
}

.ppaa-checkout .ppaa-customer-details #order_comments_field {
    display: block !important;
    width: 100% !important;
}

.ppaa-checkout .ppaa-review-card {
    width: 100% !important;
    padding: 28px !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--busly-s200, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.ppaa-checkout .ppaa-review-card #order_review {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ppaa-checkout .ppaa-review-heading {
    display: block !important;
    margin: 0 0 20px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--busly-s200, #e2e8f0);
}

.ppaa-checkout-progress {
    width: min(100%, 760px) !important;
    margin: 0 auto 32px !important;
}

.ppaa-checkout-progress-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ppaa-checkout-progress .ppaa-checkout-progress-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px;
    color: var(--busly-s500, #64748b);
    font-size: 13px;
    text-align: center;
}

.ppaa-checkout-progress .ppaa-checkout-progress-icon {
    display: grid !important;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--busly-s200, #e2e8f0);
    border-radius: 50%;
    background: #fff;
}

.ppaa-checkout-progress .ppaa-is-active,
.ppaa-checkout-progress .ppaa-is-complete {
    color: var(--busly-primary, #1d3d87);
    font-weight: 700;
}

.ppaa-checkout-progress .ppaa-is-active .ppaa-checkout-progress-icon,
.ppaa-checkout-progress .ppaa-is-complete .ppaa-checkout-progress-icon {
    border-color: var(--busly-primary, #1d3d87);
    background: var(--busly-primary, #1d3d87);
    color: #fff;
}

.ppaa-cart-root .woocommerce-cart-form,
.ppaa-cart-root .cart-collaterals { width: 100% !important; max-width: none !important; }

/* El resumen del pedido se muestra SIEMPRE debajo de toda la tabla, a todo
   el ancho, sin flotar ni quedar sticky al costado. */
.ppaa-cart-root .cart-collaterals {
    display: block;
    float: none;
    clear: both;
    width: 100% !important;
    max-width: none !important;
}

.ppaa-cart-root .cart-collaterals .cart_totals {
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (min-width: 1024px) {
    .ppaa-checkout .ppaa-checkout-layout {
        grid-template-columns: minmax(0, 59%) minmax(0, 40%) !important;
        column-gap: 1% !important;
        align-items: start !important;
    }
    .ppaa-checkout .ppaa-checkout-review { position: sticky !important; top: 28px; }
}

@media (max-width: 767px) {
    .woocommerce.ppaa-checkout-root,
    .woocommerce.ppaa-cart-root { padding: 0 16px !important; }
    .ppaa-checkout .ppaa-customer-details,
    .ppaa-checkout .ppaa-review-card { padding: 20px !important; }
}

/* Final viewport and palette override: always inherit the active Busly customizer values. */
.woocommerce.ppaa-checkout-root,
.woocommerce.ppaa-cart-root {
    --ppaa-primary: var(--busly-primary, #1d3d87);
    --ppaa-accent: var(--busly-accent, var(--busly-primary, #1d3d87));
    --ppaa-heading: var(--busly-heading, var(--busly-primary, #1d3d87));
    --ppaa-text: var(--busly-text, var(--busly-s500, #64748b));
    --ppaa-surface: var(--busly-s50, #f8fafc);
    --ppaa-border: var(--busly-border, var(--busly-s200, #e2e8f0));
    color: var(--ppaa-text);
}

.ppaa-checkout-root .ppaa-checkout-customer-details,
.ppaa-checkout-root .ppaa-review-card,
.ppaa-cart-root .woocommerce-cart-form,
.ppaa-cart-root .cart_totals {
    border-color: var(--ppaa-border) !important;
}

.ppaa-checkout-root .ppaa-checkout-customer-details h1,
.ppaa-checkout-root .ppaa-checkout-customer-details h2,
.ppaa-checkout-root .ppaa-checkout-customer-details h3,
.ppaa-checkout-root .ppaa-review-heading,
.ppaa-cart-root .cart_totals h2,
.ppaa-cart-root .product-name a {
    color: var(--ppaa-heading) !important;
}

.ppaa-checkout-root input:focus,
.ppaa-checkout-root select:focus,
.ppaa-checkout-root textarea:focus,
.ppaa-cart-root input:focus {
    border-color: var(--ppaa-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppaa-primary) 18%, transparent) !important;
}

.ppaa-checkout-root #place_order,
.ppaa-checkout-root .pp-place-order-wrapper button,
.ppaa-cart-root .pp-checkout-btn,
.ppaa-cart-root .coupon .button,
.ppaa-cart-root .button[name="update_cart"] {
    background: var(--ppaa-primary) !important;
    border-color: var(--ppaa-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.ppaa-checkout-root #place_order:hover,
.ppaa-checkout-root .pp-place-order-wrapper button:hover,
.ppaa-cart-root .pp-checkout-btn:hover,
.ppaa-cart-root .coupon .button:hover {
    background: var(--ppaa-accent) !important;
    border-color: var(--ppaa-accent) !important;
}

.ppaa-cart-root .cart_totals .order-total .amount,
.ppaa-cart-root .product-price .amount,
.ppaa-cart-root .product-subtotal .amount {
    color: var(--ppaa-primary) !important;
}

@media (min-width: 768px) {
    .woocommerce.ppaa-checkout-root,
    .woocommerce.ppaa-cart-root {
        position: relative !important;
        max-width: 100% !important;
    }
}

/* Complete contact and billing form, isolated from theme form selectors. */
.ppaa-checkout .ppaa-customer-details .ppaa-field-half {
    width: calc(50% - 8px) !important;
    clear: none !important;
}

.ppaa-checkout .ppaa-customer-details .ppaa-field-half.form-row-first { float: left !important; }
.ppaa-checkout .ppaa-customer-details .ppaa-field-half.form-row-last { float: right !important; }
.ppaa-checkout .ppaa-customer-details .ppaa-field-full { width: 100% !important; clear: both !important; }

.ppaa-checkout .ppaa-customer-details .ppaa-field-quarter {
    float: left !important;
    width: calc(25% - 9px) !important;
    clear: none !important;
    margin-right: 12px !important;
}

.ppaa-checkout .ppaa-customer-details #billing_postcode_field { margin-right: 0 !important; }

.ppaa-checkout .ppaa-customer-details #billing_country_field .select2-container,
.ppaa-checkout .ppaa-customer-details #billing_country_field .select2-selection,
.ppaa-checkout .ppaa-customer-details #billing_country_field select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    border-color: var(--ppaa-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.ppaa-checkout .ppaa-customer-details #billing_country_field .select2-selection__rendered {
    line-height: 46px !important;
    color: var(--ppaa-heading) !important;
}

.ppaa-checkout .ppaa-customer-details #billing_country_field .select2-selection__arrow { height: 46px !important; }

.ppaa-checkout .ppaa-customer-details .form-row label {
    color: var(--ppaa-heading) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ppaa-checkout .ppaa-customer-details .form-row input,
.ppaa-checkout .ppaa-customer-details .form-row select,
.ppaa-checkout .ppaa-customer-details .form-row textarea {
    min-height: 48px;
    border-color: var(--ppaa-border) !important;
    background: #fff !important;
    color: var(--ppaa-heading) !important;
}

.ppaa-checkout .ppaa-customer-details .ppaa-phone-control {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}

.ppaa-checkout .ppaa-customer-details .ppaa-phone-flag {
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 48px;
    padding: 14px 8px;
    object-fit: contain;
    place-items: center;
    border: 1px solid var(--ppaa-border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--ppaa-surface);
}

.ppaa-checkout .ppaa-customer-details .ppaa-phone-country {
    flex: 0 0 74px;
    width: 74px !important;
    min-height: 48px;
    padding: 0 8px !important;
    border: 1px solid var(--ppaa-border) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: var(--ppaa-surface) !important;
    color: var(--ppaa-heading) !important;
    font-size: 16px;
}

.ppaa-checkout .ppaa-customer-details .ppaa-phone-control #billing_phone {
    width: calc(100% - 112px) !important;
    min-width: 0;
    border-radius: 0 10px 10px 0 !important;
}

.ppaa-checkout .ppaa-customer-details .ppaa-order-notes-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--ppaa-heading);
    font-weight: 600;
    cursor: pointer;
}

.ppaa-checkout .ppaa-customer-details .ppaa-order-notes-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--ppaa-primary);
}

.ppaa-checkout .ppaa-customer-details .ppaa-geography-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 20px !important;
}

.ppaa-checkout .ppaa-customer-details .ppaa-geography-row .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

.ppaa-checkout .ppaa-customer-details #billing_state_field {
    display: block !important;
    visibility: visible !important;
}

/* Vertically centre native selects and SelectWoo/Select2 selected text. */
.ppaa-checkout .ppaa-customer-details select,
.ppaa-checkout .ppaa-customer-details .select2-selection--single {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
}

.ppaa-checkout .ppaa-customer-details select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ppaa-checkout .ppaa-customer-details .select2-container--default .select2-selection--single .select2-selection__rendered,
.ppaa-checkout .ppaa-customer-details .select2-container--default .select2-selection--single .select2-selection__placeholder {
    display: block !important;
    height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 46px !important;
}

.ppaa-checkout .ppaa-customer-details .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex !important;
    top: 0 !important;
    right: 10px !important;
    height: 48px !important;
    align-items: center;
}

.ppaa-checkout .ppaa-customer-details .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .ppaa-checkout .ppaa-customer-details .ppaa-field-half,
    .ppaa-checkout .ppaa-customer-details .ppaa-field-half.form-row-first,
    .ppaa-checkout .ppaa-customer-details .ppaa-field-half.form-row-last {
        float: none !important;
        width: 100% !important;
    }
    .ppaa-checkout .ppaa-customer-details .ppaa-field-quarter {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    .ppaa-checkout .ppaa-customer-details .ppaa-geography-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   22. TRUST BADGES AND BUTTON FIXES
   ========================================================================== */
.pp-checkout-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 20px !important;
    clear: both !important;
}

.pp-checkout-trust-badges .pp-trust-badge {
    flex: 1 1 calc(33.333% - 10px) !important;
    min-width: 90px !important;
    padding: 10px 5px !important;
}

.pp-checkout-trust-badges .pp-trust-notice {
    flex: 1 1 100% !important;
    text-align: center !important;
    margin-top: 15px !important;
    color: var(--busly-text, #64748b) !important;
    font-size: 13px !important;
    width: 100% !important;
}

/* Force Place Order Button Styling */
#payment .place-order {
    padding: 20px 0 0 0 !important;
    margin-bottom: 0 !important;
}

.pp-checkout-btn,
.woocommerce-checkout #payment #place_order,
button#place_order {
    background-color: var(--busly-accent, #f05a28) !important;
    color: #fff !important;
    padding: 18px 30px !important;
    border-radius: var(--busly-radius, 20px) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px 0 rgba(240, 90, 40, 0.39) !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 15px !important;
}

#payment button[type="submit"].button.alt:hover,
.woocommerce-checkout #payment #place_order:hover,
button#place_order:hover {
    background-color: var(--busly-accent-hover, #e04a18) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(240, 90, 40, 0.4) !important;
}


/* Hide fields gracefully to prevent backend checkout crashes */
.pp-hidden-field {
    display: none !important;
}

/* ==========================================================================
   24. Carrito en dos columnas (Tickets | Otros productos) + resumen abajo
   ========================================================================== */
.pp-cart-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.pp-cart-col__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--busly-heading, #0f172a);
}

.pp-cart-col__count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--busly-primary, #1d3d87);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.pp-cart-col table.shop_table {
    margin-bottom: 0;
}

/* Fila de acciones (cupón + actualizar) SIEMPRE bajo las dos columnas. */
.pp-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.pp-cart-actions .coupon {
    flex: 1 1 320px;
    margin-bottom: 0;
}

.pp-cart-actions .coupon .input-text {
    min-width: 200px;
    flex-shrink: 0;
}

.pp-cart-actions button[name="update_cart"] {
    margin-left: auto;
}

/* ==========================================================================
   25. Vista del carrito en DOS COLUMNAS
   Izquierda 60% (Tickets + Otros productos) | canal 5% | derecha 35%
   (Cart totals), con 5% de margen a cada lado de la vista.
   ========================================================================== */
@media (min-width: 768px) {
    /* 5% de margen a cada lado de la vista: el contenedor raíz pasa de 80%
       a 90% centrado (5% + 90% + 5%). El checkout conserva su 80%. */
    .woocommerce.ppaa-cart-root {
        position: relative !important;
        max-width: 90% !important;
        padding: 0 !important;
    }
}

.pp-cart-layout {
    display: block;
}

.pp-cart-side {
    margin-top: 32px;
}

@media (min-width: 1024px) {
    /* Dos columnas: 60% carrito | 5% canal | 35% resumen (Cart totals). */
    .pp-cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 60%) minmax(0, 35%);
        column-gap: 5%;
        align-items: start;
    }

    .pp-cart-side {
        margin-top: 0;
        position: sticky;
        top: 24px;
    }
}

/* ==========================================================================
   26. Responsive por pantalla — una vista por breakpoint
   Móvil ≤767 | Tablet 768–1023 | Desktop ≥1024
   Además, <body> recibe las clases pp-screen-mobile / pp-screen-tablet /
   pp-screen-desktop (desde wc-custom-cart-checkout.js) para poder ajustar
   cualquier vista por clase además de por media query.
   ========================================================================== */

/* ---------- CARRITO ---------- */
@media (max-width: 1023px) {
    /* El layout de dos columnas (60% | 35%) solo existe en desktop: aquí
       todo va apilado, con el carrito arriba y Cart totals debajo. */
    .pp-cart-layout {
        display: block;
    }

    .pp-cart-side {
        margin-top: 28px;
        position: static;
    }
}

@media (max-width: 768px) {
    /* Filas de tabla en tarjetas: sin etiqueta vacía en quitar/miniatura y
       el nombre del producto (con los detalles de la reserva) a todo el
       ancho, alineado a la izquierda. */
    .woocommerce table.shop_table td.product-remove,
    .woocommerce table.shop_table td.product-thumbnail {
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: left !important;
    }

    .woocommerce table.shop_table td.product-remove::before,
    .woocommerce table.shop_table td.product-thumbnail::before {
        content: none !important;
    }

    .woocommerce table.shop_table td.product-name {
        padding-left: 20px !important;
        text-align: left !important;
    }

    .woocommerce table.shop_table td.product-name::before {
        position: static !important;
        transform: none !important;
        display: block !important;
        margin-bottom: 6px !important;
    }

    .woocommerce table.shop_table .product-thumbnail img {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 767px) {
    /* Acciones del carrito (cupón + actualizar) apiladas, botón a todo el
       ancho y campo de cupón flexible (no se corta en pantallas angostas). */
    .pp-cart-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pp-cart-actions .coupon {
        flex: 1 1 auto;
        width: 100%;
        margin-bottom: 0;
    }

    .pp-cart-actions .coupon .input-text {
        min-width: 0;
        flex: 1 1 auto;
        width: auto;
    }

    .pp-cart-actions .coupon .button {
        flex: 0 0 auto;
    }

    .pp-cart-actions button[name="update_cart"] {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    /* Títulos más compactos en pantallas pequeñas. */
    .pp-cart-title h1 {
        font-size: 24px;
    }

    .pp-cart-col__title {
        font-size: 13px;
        letter-spacing: 0.04em;
    }

    .cart_totals h2 {
        font-size: 20px;
    }
}

/* ---------- CHECKOUT ---------- */
@media (max-width: 768px) {
    /* Campos de media anchura (fila 1 / fila 2) → a todo el ancho y en
       columna, para que cada campo ocupe su propia línea en móvil. */
    .ppaa-checkout .ppaa-field-half,
    .ppaa-checkout .ppaa-field-half.form-row-first,
    .ppaa-checkout .ppaa-field-half.form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}

@media (max-width: 600px) {
    /* Tarjetas de datos y resumen más compactas. */
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        padding: 20px !important;
    }

    #order_review_heading {
        font-size: 18px;
    }
}

/* ---------- Refuerzo por clases de pantalla (<body>) ---------- */
/* Por debajo de desktop el resumen lateral nunca debe quedar sticky. */
.pp-screen-mobile .pp-cart-side,
.pp-screen-tablet .pp-cart-side {
    position: static !important;
    top: auto !important;
}

/* Forzar alineación horizontal para los metadatos del producto (Rutas, Pasajeros) */
.ppaa-checkout-review .product-name dl.variation,
.woocommerce-checkout-review-order-table .product-name dl.variation {
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    gap: 2px 6px !important;
    align-items: baseline !important;
    margin-top: 8px !important;
}
.ppaa-checkout-review .product-name dl.variation dt,
.ppaa-checkout-review .product-name dl.variation dd,
.woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-checkout-review-order-table .product-name dl.variation dd {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}
.ppaa-checkout-review .product-name dl.variation dd p,
.woocommerce-checkout-review-order-table .product-name dl.variation dd p {
    margin: 0 !important;
    display: inline !important;
}