/* =========================================================
   IPERHOST
   CHECKOUT WOOCOMMERCE
   ========================================================= */


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.content-area:has(.wp-block-woocommerce-checkout),
.page__text:has(.wp-block-woocommerce-checkout) {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}


.wp-block-woocommerce-checkout {
    width: 100% !important;
    max-width: 1240px !important;

    margin: 0 auto !important;
    padding: 48px 32px 70px !important;

    box-sizing: border-box;
}


/* =========================================================
   LAYOUT NATIVO WOOCOMMERCE
   IMPORTANTE: NO CAMBIAR DISPLAY NI WIDTHS
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-sidebar-layout {
    gap: 0 !important;
    align-items: flex-start;
}


/* Separación entre formulario y resumen sin romper columnas */

@media (min-width: 782px) {

    .wp-block-woocommerce-checkout
    .wc-block-components-main {
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }

}


/* =========================================================
   COLUMNA PRINCIPAL
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-checkout__main {
    box-sizing: border-box;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-checkout-step {
    margin-bottom: 22px !important;

    padding: 26px !important;

    box-sizing: border-box;

    border: 1px solid #e3e9ec;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 22px rgba(var(--iperhost-navy-rgb), 0.055);
}


/* Títulos */

.wp-block-woocommerce-checkout
.wc-block-components-checkout-step__title {
    margin: 0;

    color: var(--iperhost-navy-dark);

    font-size: 21px !important;
    line-height: 1.3;
    font-weight: 700;
}


/* Contenido interno */

.wp-block-woocommerce-checkout
.wc-block-components-checkout-step__content {
    margin-top: 20px !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-text-input input {
    min-height: 52px !important;

    box-sizing: border-box;

    border: 1px solid #d6dfe2 !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    color: var(--iperhost-navy-dark);

    font-size: 14px;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.wp-block-woocommerce-checkout
.wc-block-components-text-input input:focus {
    outline: none !important;

    border-color: var(--iperhost-navy) !important;

    box-shadow:
        0 0 0 3px rgba(var(--iperhost-navy-rgb), 0.10) !important;
}


/* Labels */

.wp-block-woocommerce-checkout
.wc-block-components-text-input label {
    color: #67767d;

    font-size: 13px;
}


/* =========================================================
   SELECTS
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-blocks-components-select__container {
    min-height: 52px;

    border: 1px solid #d6dfe2 !important;
    border-radius: 10px !important;

    background: #ffffff;

    box-shadow: none !important;
}


.wp-block-woocommerce-checkout
.wc-blocks-components-select__select {
    min-height: 50px;

    border: 0 !important;

    background: transparent;

    color: var(--iperhost-navy-dark);
}


/* =========================================================
   DIRECCIÓN
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-address-card {
    padding: 16px;

    border: 1px solid #e3e9ec;
    border-radius: 10px;

    background: var(--iperhost-cream);
}


.wp-block-woocommerce-checkout
.wc-block-components-address-card__edit {
    color: var(--iperhost-navy);

    font-weight: 600;
}


/* Campo adicional de dirección */

.wp-block-woocommerce-checkout
.wc-block-components-address-form__address_2-toggle {
    color: #607178;

    font-size: 12px;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-address-form__hostinger-reach-newsletter-optin {
    margin-top: 12px;
}


/* =========================================================
   MÉTODOS DE PAGO
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-radio-control-accordion-option {
    overflow: hidden;

    border: 1px solid #dce4e7 !important;
    border-radius: 12px;

    background: #ffffff;
}


.wp-block-woocommerce-checkout
.wc-block-components-radio-control__option {
    padding: 16px !important;
}


.wp-block-woocommerce-checkout
.wc-block-components-radio-control__option-checked {
    background: #f0f5f6;
}


.wp-block-woocommerce-checkout
.wc-block-components-payment-method-label {
    color: var(--iperhost-navy-dark);

    font-size: 14px;
    font-weight: 700;
}


.wp-block-woocommerce-checkout
.wc-block-components-radio-control-accordion-content {
    padding: 16px 18px !important;

    border-top: 1px solid #e5ebed;

    background: var(--iperhost-cream);

    color: #68777d;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   NOTA DEL PEDIDO
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-checkout__order-notes {
    margin-top: 18px;
}


/* =========================================================
   TÉRMINOS Y CONDICIONES
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-checkout__terms {
    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #e5eaec;

    color: #748187;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   BOTÓN REALIZAR PEDIDO
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-checkout__actions {
    margin-top: 26px !important;
}


.wp-block-woocommerce-checkout
.wc-block-components-checkout-place-order-button {
    width: 100% !important;

    min-height: 56px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: var(--iperhost-navy) !important;
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 22px rgba(var(--iperhost-navy-rgb), 0.22) !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.wp-block-woocommerce-checkout
.wc-block-components-checkout-place-order-button:hover {
    background: var(--iperhost-gold) !important;
    color: var(--iperhost-navy-dark) !important;

    transform: translateY(-1px);

    box-shadow:
        0 10px 26px rgba(var(--iperhost-navy-rgb), 0.28) !important;
}


/* =========================================================
   RESUMEN DEL PEDIDO
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-sidebar {
    box-sizing: border-box;
}


.wp-block-woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-block {
    overflow: hidden;

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #e2e8ea;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 28px rgba(var(--iperhost-navy-rgb), 0.08);
}


/* Header */

.wp-block-woocommerce-checkout
.wc-block-components-checkout-order-summary__title {
    padding: 22px 24px !important;

    border-bottom: 1px solid #e8edef;

    background: var(--iperhost-cream);
}


.wp-block-woocommerce-checkout
.wc-block-components-checkout-order-summary__title-text {
    margin: 0;

    color: var(--iperhost-navy-dark);

    font-size: 18px;
    font-weight: 700;
}


.wp-block-woocommerce-checkout
.wc-block-components-checkout-order-summary__title-price {
    color: var(--iperhost-navy);

    font-size: 20px;
    font-weight: 800;
}


/* =========================================================
   PRODUCTO
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-order-summary-item {
    padding: 20px 24px !important;
}


.wp-block-woocommerce-checkout
.wc-block-components-order-summary-item__image img {
    border-radius: 8px;
}


.wp-block-woocommerce-checkout
.wc-block-components-product-name {
    color: var(--iperhost-navy-dark);

    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}


/* =========================================================
   CUPONES
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-totals-coupon {
    padding-left: 24px;
    padding-right: 24px;
}


.wp-block-woocommerce-checkout
.wc-block-components-panel__button {
    color: var(--iperhost-navy);

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   SUBTOTAL Y FEES
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-totals-item {
    padding-left: 24px !important;
    padding-right: 24px !important;
}


.wp-block-woocommerce-checkout
.wc-block-components-totals-item__label {
    color: #67767d;

    font-size: 13px;
}


.wp-block-woocommerce-checkout
.wc-block-components-totals-item__value {
    color: var(--iperhost-navy-dark);

    font-size: 13px;
    font-weight: 600;
}


/* Tarifa IPERHOST */

.wp-block-woocommerce-checkout
.wc-block-components-totals-fees__service-fee {
    background: #eff7f3;
}


.wp-block-woocommerce-checkout
.wc-block-components-totals-fees__service-fee
.wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout
.wc-block-components-totals-fees__service-fee
.wc-block-components-totals-item__value {
    color: #31704c;

    font-weight: 700;
}


/* Pago directo */

.wp-block-woocommerce-checkout
.wc-block-components-totals-fees__direct-payment {
    background: #f7f9fa;
}


/* =========================================================
   TOTAL
   ========================================================= */

.wp-block-woocommerce-checkout
.wc-block-components-totals-footer-item {
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    border-top: 1px solid #dfe6e8;

    background: #f5f9fa;
}


.wp-block-woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label {
    color: var(--iperhost-navy-dark);

    font-size: 16px;

    font-weight: 700;
}


.wp-block-woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
    color: var(--iperhost-navy);

    font-size: 22px;

    font-weight: 800;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .wp-block-woocommerce-checkout {
        padding:
            38px
            28px
            55px !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-main {
        padding-right: 26px !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-checkout-step {
        padding: 22px !important;
    }

}


/* =========================================================
   MÓVIL
   WooCommerce controla el cambio a una columna
   ========================================================= */

@media (max-width: 781px) {

    .wp-block-woocommerce-checkout {
        padding:
            24px
            18px
            42px !important;
    }


    /* Ya no necesitamos separación lateral */

    .wp-block-woocommerce-checkout
    .wc-block-components-main {
        padding-right: 0 !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-checkout-step {
        margin-bottom: 18px !important;

        padding:
            20px
            16px !important;

        border-radius: 13px;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-checkout-step__title {
        font-size: 19px !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-checkout-order-summary__title {
        padding: 18px !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-order-summary-item {
        padding:
            16px
            18px !important;
    }


    .wp-block-woocommerce-checkout
    .wc-block-components-totals-item {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

}