/* ==========================================================
   WORK IT CHECKOUT
   WooCommerce Blocks
   Brand: #FFF218 / #000 / #FFF
   ========================================================== */

:root {
    --wi-yellow: #FFF218;
    --wi-yellow-hover: #F3E800;
    --wi-black: #000000;
    --wi-white: #FFFFFF;

    --wi-bg: #F6F6F3;
    --wi-line: #D8D8D3;
    --wi-line-soft: #EAEAE6;

    --wi-text: #111111;
    --wi-muted: #686864;

    --wi-radius-sm: 10px;
    --wi-radius: 16px;
    --wi-radius-lg: 22px;

    --wi-content: 1180px;
}


/* ==========================================================
   BASE
   ========================================================== */

body.woocommerce-checkout,
body.woocommerce-cart {
    background: var(--wi-bg) !important;
    color: var(--wi-text);
    font-family: "Outfit", sans-serif !important;
}

body.woocommerce-checkout *,
body.woocommerce-cart * {
    box-sizing: border-box;
}

body.woocommerce-checkout button,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-cart button,
body.woocommerce-cart input,
body.woocommerce-cart select,
body.woocommerce-cart textarea {
    font-family: "Outfit", sans-serif !important;
}


/* ==========================================================
   QUITAR HEADER Y FOOTER DEFAULT DEL TEMA
   SOLO CARRITO / CHECKOUT
   ========================================================== */

body.woocommerce-checkout header.wp-block-template-part,
body.woocommerce-cart header.wp-block-template-part,
body.woocommerce-checkout footer.wp-block-template-part,
body.woocommerce-cart footer.wp-block-template-part {
    display: none !important;
}


/* ==========================================================
   HEADER WORK IT
   ========================================================== */

.workit-pay-header {
    width: 100%;
    background: var(--wi-white);
    border-bottom: 1.5px solid var(--wi-black);
    position: relative;
    z-index: 50;
}

.workit-pay-header__inner {
    width: min(var(--wi-content), calc(100% - 40px));
    min-height: 82px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}


/* Marca */

.workit-pay-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

    color: var(--wi-black) !important;
    text-decoration: none !important;
}

.workit-pay-brand__mark {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 48px;

    background: var(--wi-yellow);
    color: var(--wi-black);

    border: 1.5px solid var(--wi-black);
    border-radius: 13px;

    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.08em;
}

.workit-pay-brand__copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.workit-pay-brand__copy strong {
    color: var(--wi-black);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.workit-pay-brand__copy small {
    margin-top: 5px;

    color: var(--wi-muted);

    font-size: 11px;
    font-weight: 500;
}


/* Centro */

.workit-pay-header__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.workit-pay-header__title small {
    margin-bottom: 5px;

    color: #777773;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.workit-pay-header__title strong {
    color: var(--wi-black);

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


/* Pago seguro */

.workit-pay-secure {
    justify-self: end;

    min-height: 39px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 14px;

    background: var(--wi-yellow);
    color: var(--wi-black);

    border: 1.5px solid var(--wi-black);
    border-radius: 999px;

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


/* ==========================================================
   CONTENEDORES
   ========================================================== */

body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
    width: min(var(--wi-content), calc(100% - 40px)) !important;
    max-width: var(--wi-content) !important;

    margin: 0 auto !important;

    padding-top: 44px !important;
    padding-bottom: 54px !important;

    font-family: "Outfit", sans-serif !important;
}


/* ==========================================================
   CHECKOUT — LAYOUT
   ========================================================== */

@media (min-width: 1051px) {

    .wp-block-woocommerce-checkout .wc-block-checkout__main {
        width: 64% !important;
        flex-basis: 64% !important;
        padding-right: 38px !important;
    }

    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        width: 36% !important;
        flex-basis: 36% !important;

        min-width: 350px;
        align-self: flex-start;
    }

}


/* ==========================================================
   TÍTULOS
   ========================================================== */

.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-cart h3 {
    color: var(--wi-black);

    font-family: "Outfit", sans-serif !important;

    font-weight: 700 !important;
    letter-spacing: -0.025em;
}

.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout .wc-block-components-title {
    margin-bottom: 14px !important;
    font-size: 20px !important;
}


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

.wc-block-checkout__contact-fields,
.wc-block-checkout__billing-fields,
.wc-block-checkout__shipping-fields {
    margin-bottom: 30px !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}


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

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout select {
    min-height: 54px !important;

    background: var(--wi-white) !important;
    color: var(--wi-black) !important;

    border: 1.5px solid #BEBEB8 !important;
    border-radius: 12px !important;

    box-shadow: none !important;

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

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input:focus,
.wp-block-woocommerce-checkout select:focus {
    border-color: var(--wi-black) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(255, 242, 24, .34) !important;
}


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

.wp-block-woocommerce-checkout .wc-block-components-address-card {
    padding: 20px !important;

    background: var(--wi-white);

    border: 1.5px solid var(--wi-line) !important;
    border-radius: var(--wi-radius) !important;

    box-shadow: none !important;
}


/* ==========================================================
   OPCIONES DE PAGO
   ========================================================== */

.wc-block-checkout__payment-method {
    margin-top: 8px !important;

    background: var(--wi-white) !important;

    border: 1.5px solid var(--wi-black) !important;
    border-radius: var(--wi-radius) !important;

    overflow: hidden;

    box-shadow: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    margin: 0 !important;

    background: var(--wi-white) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--wi-line-soft) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:last-child,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child {
    border-bottom: 0 !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow:
        inset 5px 0 0 var(--wi-yellow) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
    accent-color: var(--wi-black);
}


/* Mercado Pago */

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

    background: #FFFFFF !important;

    border-top: 1px solid var(--wi-line-soft) !important;
}


/* ==========================================================
   CHECKOUT — RESUMEN
   ========================================================== */

.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

@media (min-width: 1051px) {

    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        position: sticky;
        top: 24px;
    }

}

.wp-block-woocommerce-checkout .wc-block-components-order-summary {
    background: var(--wi-white) !important;

    border: 1.5px solid var(--wi-black) !important;
    border-radius: var(--wi-radius-lg) !important;

    overflow: hidden;

    box-shadow: none !important;
}


/* Sin thumbnail */

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
    display: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
    width: 100% !important;
    padding-left: 0 !important;
}


/* Producto */

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

    border-bottom:
        1px solid var(--wi-line-soft) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-product-name {
    color: var(--wi-black) !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


/* Quitar descripción larga */

.wp-block-woocommerce-checkout .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-product-details {
    display: none !important;
}


/* ==========================================================
   CUPÓN / TOTALES CHECKOUT
   ========================================================== */

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
    border-top:
        1px solid var(--wi-line-soft) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item {
    padding:
        17px 20px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    margin: 0 !important;

    padding-top: 19px !important;
    padding-bottom: 19px !important;

    border-top:
        1.5px solid var(--wi-black) !important;
}

.wp-block-woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label,

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

    font-size: 23px !important;

    font-weight: 800 !important;
}


/* ==========================================================
   NOTA / TÉRMINOS
   ========================================================== */

.wp-block-woocommerce-checkout .wc-block-checkout__add-note {
    margin-top: 18px;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms {
    color: var(--wi-muted);

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================================
   BOTÓN FINAL CHECKOUT
   ========================================================== */

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

    min-height: 58px !important;

    background: var(--wi-yellow) !important;
    color: var(--wi-black) !important;

    border: 2px solid var(--wi-black) !important;
    border-radius: 14px !important;

    box-shadow: none !important;

    font-family: "Outfit", sans-serif !important;

    font-size: 17px !important;

    font-weight: 800 !important;

    transition:
        transform .14s ease,
        background-color .14s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    background: var(--wi-yellow-hover) !important;

    transform: translateY(-1px);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
    transform: translateY(0);
}


/* ==========================================================
   AVISOS
   ========================================================== */

.wp-block-woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
    border-radius: 12px !important;

    font-family: "Outfit", sans-serif !important;
}


/* ==========================================================
   CARRITO
   ========================================================== */

body.woocommerce-cart .wp-block-woocommerce-cart {
    padding-top: 28px !important;
    padding-bottom: 42px !important;
}


/* Quitar imágenes vacías */

.wp-block-woocommerce-cart .wc-block-cart-item__image {
    display: none !important;
}


/* Producto */

.wp-block-woocommerce-cart .wc-block-components-product-name {
    color: var(--wi-black) !important;

    font-weight: 700 !important;

    text-underline-offset: 3px;
}


/* Descripción algo más limpia */

.wp-block-woocommerce-cart .wc-block-components-product-metadata {
    color: var(--wi-muted) !important;

    font-size: 14px !important;
}


/* Cantidad */

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid var(--wi-line) !important;
    border-radius: 8px !important;

    overflow: hidden;
}


/* Resumen carrito */

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    align-self: flex-start;
}


/* Botón proceder al pago */

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    min-height: 58px !important;

    background: var(--wi-yellow) !important;
    color: var(--wi-black) !important;

    border: 2px solid var(--wi-black) !important;
    border-radius: 14px !important;

    box-shadow: none !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    transition:
        transform .14s ease,
        background-color .14s ease;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    background: var(--wi-yellow-hover) !important;

    transform: translateY(-1px);
}


/* ==========================================================
   LINKS
   ========================================================== */

.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart a {
    color: var(--wi-black);

    text-underline-offset: 3px;
}


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

@media (max-width: 1050px) {

    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart {
        width: min(760px, calc(100% - 32px)) !important;

        padding-top: 30px !important;
    }

    .wp-block-woocommerce-checkout .wc-block-checkout__main,
    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

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

    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        position: static !important;

        margin-top: 28px;
    }

}


/* ==========================================================
   HEADER MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .workit-pay-header__inner {
        width: calc(100% - 28px);

        min-height: 70px;

        grid-template-columns: 1fr auto;

        gap: 12px;
    }

    .workit-pay-header__title {
        display: none;
    }

    .workit-pay-brand__mark {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        font-size: 20px;

        border-radius: 11px;
    }

    .workit-pay-brand__copy strong {
        font-size: 16px;
    }

    .workit-pay-brand__copy small {
        display: none;
    }

    .workit-pay-secure {
        min-height: 36px;

        padding: 0 11px;

        font-size: 11px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart {
        width: calc(100% - 20px) !important;

        padding-top: 22px !important;
        padding-bottom: 38px !important;
    }

    .wp-block-woocommerce-checkout h2,
    .wp-block-woocommerce-checkout .wc-block-components-title {
        font-size: 18px !important;
    }

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

    .wc-block-checkout__payment-method {
        border-radius: 14px !important;
    }

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

    .wp-block-woocommerce-checkout .wc-block-components-order-summary {
        border-radius: 16px !important;
    }

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

    .wp-block-woocommerce-checkout .wc-block-components-totals-item {
        padding: 15px 17px !important;
    }

    .wp-block-woocommerce-checkout
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__label,

    .wp-block-woocommerce-checkout
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__value {
        font-size: 20px !important;
    }

}


/* ==========================================================
   MUY PEQUEÑO
   ========================================================== */

@media (max-width: 390px) {

    .workit-pay-brand__copy {
        display: none;
    }

}