/**
 * Carrito, checkout, "Pagar pedido" y "Pedido recibido" (shortcodes de
 * WooCommerce) y la ventana de pago de Mi cuenta.
 *
 * Lo carga AsistenciaVehicular_Checkout. Como Mi cuenta, usa los colores de
 * la marca y no los del tema (se ve igual con cualquier tema) y la letra del
 * tema.
 *
 *   body.av-co          carrito, checkout y sus páginas (pagar, recibido)
 *   .av-co-*            piezas propias del checkout
 *   .av-ty-*            "Pedido recibido" de un plan o una cuota
 *   body.av-embed-body  página de pago dentro de la ventana (iframe)
 *   .av-pay*            la ventana de pago
 */

:root {
    --ava-ink: #0d1b3e;
    --ava-text: #153e8a;
    --ava-soft: #4a5a7a;
    --ava-blue: #0000ff;
    --ava-blue-d: #0000cc;
    --ava-blue-soft: #e8eeff;
    --ava-blue-tint: #f5f7ff;
    --ava-page: #e6eefb;
    --ava-line: #e6eefb;
    --ava-border: #c9d6ee;
    --ava-red: #dc2626;
    --ava-red-soft: #fdecec;
    --ava-red-text: #b42318;
    --ava-amber-soft: #fff4db;
    --ava-amber-text: #8a4b00;
    --ava-green-soft: #e3f6ea;
    --ava-green-text: #146b3a;
    --ava-radius: 22px;
    --ava-radius-md: 16px;
    --ava-radius-sm: 14px;
}

/* =========================================================================
   Páginas (ancho y letra)
   ========================================================================= */

/* El tema limita el contenido a un ancho de lectura: el checkout (datos +
   resumen) y el pedido recibido usan uno más amplio, centrado como el
   encabezado (con una plantilla sin diseño "restringido" quedaba pegado a la
   izquierda). */
body.av-co .is-layout-constrained > .woocommerce,
body.av-co .wp-block-post-content > .woocommerce {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

body.av-co .woocommerce {
    color: var(--ava-text);
    font-size: 15px;
    line-height: 1.55;
}

/* El "Pedido recibido" trae su propio título grande. */
body.av-co.av-co-ours.woocommerce-order-received :is(h1.wp-block-post-title, h1.entry-title) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    body.av-co .wp-block-post-content.has-global-padding {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.av-co-hidden {
    display: none !important;
}

/* Encabezado del checkout: logo · Pago seguro · Volver a Mi cuenta. */
.av-co-head {
    margin: 0 0 22px;
    background: #fff;
    border-bottom: 1px solid #d8e1f0;
}

.av-co-head-in {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    max-width: 1168px;
    margin: 0 auto;
    padding: 12px 24px;
}

.av-co-head-logo {
    margin-right: auto;
    line-height: 0;
}

.av-co-head-logo img {
    width: auto;
    max-width: 200px;
    max-height: 42px;
}

.av-co-head-name {
    color: var(--ava-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.av-co-head-safe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ava-green-text);
    font-size: 14px;
    font-weight: 700;
}

.av-co-head-back {
    color: var(--ava-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.av-co-head-back:hover,
.av-co-head-back:focus-visible {
    color: var(--ava-text);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .av-co-head-in {
        padding: 10px 16px;
    }

    .av-co-head-logo img {
        max-width: 150px;
        max-height: 34px;
    }

    .av-co-head-safe {
        display: none;
    }
}

/* =========================================================================
   Pasos (Tu plan ✓ → Datos y pago → Listo)
   ========================================================================= */

.av-co-steps,
.av-pay__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
}

.av-co-steps li,
.av-pay__steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--ava-soft);
}

.av-co-steps li.is-done,
.av-pay__steps li.is-done {
    color: var(--ava-green-text);
}

.av-co-steps li.is-current,
.av-pay__steps li.is-current {
    background: var(--ava-blue);
    color: #fff;
}

.av-co-step-n,
.av-pay__step-n {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ava-page);
    color: inherit;
    font-size: 12px;
    font-weight: 800;
}

.av-co-steps li.is-done .av-co-step-n,
.av-pay__steps li.is-done .av-pay__step-n {
    background: var(--ava-green-soft);
}

.av-co-steps li.is-current .av-co-step-n,
.av-pay__steps li.is-current .av-pay__step-n {
    background: #fff;
    color: var(--ava-blue);
}

/* En el celular los tres pasos entran en una línea. */
@media (max-width: 600px) {
    .av-co-steps,
    .av-pay__steps {
        gap: 6px;
        font-size: 13px;
    }

    .av-co-steps li,
    .av-pay .av-pay__steps li {
        gap: 6px;
        padding: 6px 10px;
    }
}

/* =========================================================================
   Checkout clásico: tus datos | tu compra
   ========================================================================= */

body.av-co .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    grid-template-areas:
        "notices notices"
        "details heading"
        "details review";
    grid-template-rows: auto auto 1fr;
    column-gap: 22px;
    align-items: start;
}

body.av-co .woocommerce form.checkout > .woocommerce-NoticeGroup {
    grid-area: notices;
    margin-bottom: 18px;
}

body.av-co .woocommerce form.checkout > #customer_details {
    grid-area: details;
}

body.av-co .woocommerce form.checkout > #order_review_heading {
    grid-area: heading;
}

body.av-co .woocommerce form.checkout > #order_review {
    grid-area: review;
}

@media (max-width: 900px) {
    body.av-co .woocommerce form.checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "notices"
            "details"
            "heading"
            "review";
        grid-template-rows: none;
    }

    body.av-co .woocommerce form.checkout > #customer_details {
        margin-bottom: 18px;
    }
}

/* La plantilla de WooCommerce usa columnas flotantes: acá van apiladas. */
body.av-co .woocommerce #customer_details.col2-set {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: auto;
    margin: 0;
}

body.av-co .woocommerce #customer_details .col-1,
body.av-co .woocommerce #customer_details .col-2 {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
}

body.av-co .woocommerce #customer_details .col-2:not(:has(*:not(h3, div:empty))) {
    display: none;
}

body.av-co .woocommerce .woocommerce-billing-fields,
body.av-co .woocommerce .woocommerce-additional-fields:has(input, textarea, select),
body.av-co .woocommerce .woocommerce-account-fields {
    padding: 24px;
    border-radius: var(--ava-radius);
    background: #fff;
}

body.av-co .woocommerce .woocommerce-additional-fields:not(:has(input, textarea, select)) {
    display: none;
}

body.av-co .woocommerce .woocommerce-billing-fields > h3,
body.av-co .woocommerce #order_review_heading {
    margin: 0;
    color: var(--ava-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

body.av-co .woocommerce #order_review_heading {
    padding: 24px 24px 6px;
    border-radius: var(--ava-radius) var(--ava-radius) 0 0;
    background: #fff;
}

body.av-co .woocommerce form.checkout > #order_review {
    padding: 6px 24px 24px;
    border-radius: 0 0 var(--ava-radius) var(--ava-radius);
    background: #fff;
}

.av-co-intro {
    margin: 4px 0 16px;
    color: var(--ava-soft);
    font-size: 14px;
}

body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row-wide,
body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper > .av-co-company-toggle,
body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper > .av-co-company {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    body.av-co .woocommerce .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Campos (checkout, carrito, pagar pedido). */
body.av-co .woocommerce form .form-row label,
body.av-co .woocommerce form .form-row .woocommerce-form__label {
    display: block;
    margin: 0 0 6px;
    color: var(--ava-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

body.av-co .woocommerce form .form-row .required {
    color: var(--ava-red);
    text-decoration: none;
}

body.av-co .woocommerce form .form-row input.input-text,
body.av-co .woocommerce form .form-row textarea,
body.av-co .woocommerce form .form-row select,
body.av-co .woocommerce .cart .coupon input.input-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--ava-border);
    border-radius: var(--ava-radius-sm);
    background: #fff;
    color: var(--ava-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.3;
    box-shadow: none;
}

body.av-co .woocommerce form .form-row input.input-text:focus,
body.av-co .woocommerce form .form-row textarea:focus,
body.av-co .woocommerce form .form-row select:focus {
    border-color: var(--ava-blue);
    outline: 2px solid var(--ava-blue-soft);
    outline-offset: 0;
}

body.av-co .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.av-co .woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--ava-red);
}

body.av-co .woocommerce form .form-row.av-co-company-toggle label,
body.av-co .woocommerce form .form-row .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

/* La casilla de la empresa no es "opcional" y la razón social se vuelve
   obligatoria al marcarla (el asterisco lo pone el script de la casilla). */
body.av-co .woocommerce form .form-row.av-co-company-toggle .optional,
body.av-co .woocommerce form .form-row.av-co-company .optional {
    display: none;
}

body.av-co .woocommerce form .form-row input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ava-blue);
}

/* "Tu compra" */
body.av-co .woocommerce table.shop_table {
    width: 100%;
    margin: 0 0 18px;
    border: 0;
    border-collapse: collapse;
    border-radius: 0;
    color: var(--ava-text);
}

body.av-co .woocommerce table.shop_table th,
body.av-co .woocommerce table.shop_table td {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--ava-line);
    background: transparent;
    font-size: 15px;
    vertical-align: top;
}

body.av-co .woocommerce table.shop_table thead th {
    border-top: 0;
    color: var(--ava-soft);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

body.av-co .woocommerce table.shop_table td:last-child,
body.av-co .woocommerce table.shop_table th:last-child {
    text-align: right;
}

body.av-co .woocommerce table.shop_table .product-name {
    color: var(--ava-ink);
    font-weight: 700;
}

/* Duración y servicios del plan (van con <br> entre medio) y el vehículo. */
body.av-co .woocommerce table.shop_table .product-name small {
    color: var(--ava-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

body.av-co .woocommerce table.shop_table .product-name .variation,
body.av-co .woocommerce table.shop_table .wc-item-meta {
    display: block;
    margin: 4px 0 0;
    color: var(--ava-soft);
    font-size: 13px;
    font-weight: 500;
}

/* Un plan es siempre uno: el "× 1" no dice nada. */
body.av-co .woocommerce .woocommerce-checkout-review-order-table .product-quantity {
    display: none;
}

body.av-co .woocommerce table.shop_table .variation dt,
body.av-co .woocommerce table.shop_table .variation dd,
body.av-co .woocommerce table.shop_table .variation dd p {
    display: inline;
    margin: 0;
    padding: 0;
    float: none;
}

body.av-co .woocommerce table.shop_table tfoot .order-total th,
body.av-co .woocommerce table.shop_table tfoot .order-total td {
    color: var(--ava-ink);
    font-size: 18px;
    font-weight: 800;
}

body.av-co .woocommerce table.shop_table tfoot .av-co-next th,
body.av-co .woocommerce table.shop_table tfoot .av-co-next td {
    color: var(--ava-soft);
    font-size: 14px;
    font-weight: 600;
}

body.av-co .woocommerce table.shop_table tfoot .av-co-next td {
    white-space: nowrap;
}

body.av-co .woocommerce table.shop_table tfoot .av-co-note td {
    padding-top: 0;
    border-top: 0;
    color: var(--ava-soft);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

/* Formas de pago (checkout y "Pagar pedido"). */
body.av-co .woocommerce #payment,
body.av-embed-body .woocommerce #payment {
    border-radius: 0;
    background: transparent;
}

body.av-co .woocommerce #payment ul.payment_methods,
body.av-embed-body .woocommerce #payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    list-style: none;
}

body.av-co .woocommerce #payment ul.payment_methods li,
body.av-embed-body .woocommerce #payment ul.payment_methods li {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--ava-border);
    border-radius: var(--ava-radius-md);
    background: #fff;
    line-height: 1.4;
}

body.av-co .woocommerce #payment ul.payment_methods li:has(> input:checked),
body.av-embed-body .woocommerce #payment ul.payment_methods li:has(> input:checked) {
    border: 2px solid var(--ava-blue);
    padding: 13px 15px;
    background: var(--ava-blue-tint);
}

body.av-co .woocommerce #payment ul.payment_methods li > input,
body.av-embed-body .woocommerce #payment ul.payment_methods li > input {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align: -4px;
    accent-color: var(--ava-blue);
}

body.av-co .woocommerce #payment ul.payment_methods li > label,
body.av-embed-body .woocommerce #payment ul.payment_methods li > label {
    display: inline;
    color: var(--ava-ink);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body.av-co .woocommerce #payment ul.payment_methods li img,
body.av-embed-body .woocommerce #payment ul.payment_methods li img {
    max-height: 26px;
    margin: 0 0 0 8px;
    vertical-align: middle;
}

body.av-co .woocommerce #payment div.payment_box,
body.av-embed-body .woocommerce #payment div.payment_box {
    margin: 10px 0 0;
    padding: 0 0 0 30px;
    border-radius: 0;
    background: transparent;
    color: var(--ava-soft);
    font-size: 14px;
}

body.av-co .woocommerce #payment div.payment_box::before,
body.av-embed-body .woocommerce #payment div.payment_box::before {
    display: none;
}

body.av-co .woocommerce #payment div.payment_box p:last-child,
body.av-embed-body .woocommerce #payment div.payment_box p:last-child {
    margin-bottom: 0;
}

body.av-co .woocommerce #payment div.form-row,
body.av-embed-body .woocommerce #payment div.form-row {
    margin: 0;
    padding: 0;
}

body.av-co .woocommerce .woocommerce-terms-and-conditions-wrapper,
body.av-embed-body .woocommerce .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 14px;
    color: var(--ava-soft);
    font-size: 14px;
}

body.av-co .woocommerce .woocommerce-privacy-policy-text p,
body.av-embed-body .woocommerce .woocommerce-privacy-policy-text p {
    margin: 0 0 12px;
}

/* Botón principal (confirmar, pagar, ir al pago). */
body.av-co .woocommerce #payment #place_order,
body.av-embed-body .woocommerce #payment #place_order,
body.av-co .woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ava-blue);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    float: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

body.av-co .woocommerce #payment #place_order:hover,
body.av-co .woocommerce #payment #place_order:focus-visible,
body.av-embed-body .woocommerce #payment #place_order:hover,
body.av-embed-body .woocommerce #payment #place_order:focus-visible,
body.av-co .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.av-co .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible {
    background: var(--ava-blue-d);
    color: #fff;
}

.av-co-place-note {
    margin: 10px 0 0;
    color: var(--ava-soft);
    font-size: 13px;
    text-align: center;
}

/* Avisos de WooCommerce. */
body.av-co .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info),
body.av-embed-body .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
    margin: 0 0 16px;
    padding: 14px 16px 14px 18px;
    border: 0;
    border-left: 4px solid var(--ava-blue);
    border-radius: var(--ava-radius-sm);
    background: #fff;
    color: var(--ava-ink);
    font-size: 14px;
    list-style: none;
}

body.av-co .woocommerce .woocommerce-error,
body.av-embed-body .woocommerce .woocommerce-error {
    border-left-color: var(--ava-red);
    background: var(--ava-red-soft);
}

body.av-co .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
body.av-embed-body .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before {
    display: none;
}

/* =========================================================================
   Carrito
   ========================================================================= */

body.av-co.woocommerce-cart .woocommerce-cart-form,
body.av-co.woocommerce-cart .cart-collaterals .cart_totals {
    box-sizing: border-box;
    padding: 24px;
    border-radius: var(--ava-radius);
    background: #fff;
}

body.av-co.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 22px;
}

body.av-co.woocommerce-cart .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
}

body.av-co.woocommerce-cart .cart-collaterals .cart_totals h2 {
    margin: 0 0 8px;
    color: var(--ava-text);
    font-size: 22px;
    font-weight: 800;
}

body.av-co.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    display: none;
}

body.av-co.woocommerce-cart table.shop_table.cart thead .product-thumbnail {
    display: none;
}

body.av-co.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ava-red-soft);
    color: var(--ava-red-text) !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

body.av-co.woocommerce-cart table.shop_table.cart td.actions {
    text-align: right;
}

body.av-co.woocommerce-cart table.shop_table.cart td.actions .button,
body.av-co.woocommerce-cart .cart-empty + .return-to-shop .button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--ava-blue-soft);
    color: var(--ava-blue-d);
    font: inherit;
    font-weight: 800;
}

body.av-co.woocommerce-cart .wc-proceed-to-checkout {
    padding: 12px 0 0;
}

@media (max-width: 768px) {
    body.av-co.woocommerce-cart table.shop_table_responsive tr td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right !important;
    }

    body.av-co.woocommerce-cart table.shop_table_responsive tr td::before {
        color: var(--ava-soft);
        font-weight: 700;
    }

    body.av-co.woocommerce-cart table.shop_table_responsive tr td.product-remove {
        justify-content: flex-end;
    }
}

/* =========================================================================
   "Pagar pedido" a pantalla completa
   ========================================================================= */

body.av-co:not(.av-embed-body) .woocommerce form#order_review:not(.woocommerce-checkout-review-order) {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--ava-radius);
    background: #fff;
}

/* El resumen de un plan o una cuota reemplaza la tabla de WooCommerce. */
body.av-co.av-co-ours .woocommerce form#order_review > table.shop_table,
body.av-embed-body .woocommerce form#order_review > table.shop_table {
    display: none;
}

.av-co-paysum {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 18px;
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--ava-line);
}

.av-co-paysum p {
    margin: 0;
}

.av-co-paysum-title {
    color: var(--ava-ink);
    font-size: 17px;
    font-weight: 800;
}

.av-co-paysum-vehicle,
.av-co-paysum-next {
    color: var(--ava-soft);
    font-size: 14px;
}

.av-co-paysum-total {
    color: var(--ava-ink);
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.av-co-paysum-total .av-co-paysum-label {
    display: block;
    color: var(--ava-soft);
    font-size: 13px;
    font-weight: 700;
}

/* =========================================================================
   "Pedido recibido" de un plan o una cuota
   ========================================================================= */

.av-ty {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--ava-text);
    font-size: 15px;
    line-height: 1.55;
}

.av-ty-hero,
.av-ty-card {
    box-sizing: border-box;
    padding: 26px;
    border-radius: var(--ava-radius);
    background: #fff;
}

.av-ty-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.av-ty-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ava-amber-soft);
    color: var(--ava-amber-text);
    font-size: 13px;
    font-weight: 800;
}

.av-ty-hero.is-ok .av-ty-chip {
    background: var(--ava-green-soft);
    color: var(--ava-green-text);
}

.av-ty-hero.is-bad .av-ty-chip {
    background: var(--ava-red-soft);
    color: var(--ava-red-text);
}

.av-ty .av-ty-title {
    margin: 0;
    color: var(--ava-text);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 800;
    line-height: 1.2;
}

.av-ty-text {
    margin: 0;
    color: var(--ava-soft);
    font-size: 16px;
}

.av-ty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 18px;
    align-items: start;
}

.av-ty .av-ty-card-title {
    margin: 0 0 14px;
    color: var(--ava-text);
    font-size: 18px;
    font-weight: 800;
}

.av-ty-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-ty-steps li {
    display: flex;
    gap: 12px;
    margin: 0;
    color: var(--ava-ink);
}

.av-ty-step-n {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--ava-blue-soft);
    color: var(--ava-blue);
    font-size: 13px;
    font-weight: 800;
}

.av-ty-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.av-ty-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--ava-line);
}

.av-ty-rows > div:first-child {
    border-top: 0;
}

.av-ty-rows dt {
    color: var(--ava-soft);
    font-weight: 600;
}

.av-ty-rows dd {
    margin: 0;
    color: var(--ava-ink);
    font-weight: 700;
    text-align: right;
}

.av-ty-rows .av-ty-total dt,
.av-ty-rows .av-ty-total dd {
    color: var(--ava-ink);
    font-size: 18px;
    font-weight: 800;
}

.av-ty-note {
    margin: 10px 0 0;
    color: var(--ava-soft);
    font-size: 14px;
}

.av-ty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.av-ty-hero .av-ty-actions {
    margin-top: 8px;
}

.av-ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
}

.av-ty-btn--primary {
    background: var(--ava-blue);
    color: #fff !important;
}

.av-ty-btn--primary:hover,
.av-ty-btn--primary:focus-visible {
    background: var(--ava-blue-d);
}

.av-ty-btn--light {
    box-shadow: inset 0 0 0 1.5px var(--ava-border);
    color: var(--ava-text) !important;
}

.av-ty-btn--light:hover,
.av-ty-btn--light:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--ava-text);
}

/* Instrucciones de la pasarela (p. ej. los datos de la transferencia). */
.av-ty-instructions > :first-child {
    margin-top: 0;
}

.av-ty-instructions > :last-child {
    margin-bottom: 0;
}

.av-ty-instructions h2,
.av-ty-instructions h3 {
    margin: 0 0 12px;
    color: var(--ava-text);
    font-size: 18px;
    font-weight: 800;
}

.av-ty-instructions ul.order_details,
.av-ty-instructions ul.wc-bacs-bank-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-ty-instructions ul.order_details li,
.av-ty-instructions ul.wc-bacs-bank-details li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    float: none;
    margin: 0;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid var(--ava-line);
    color: var(--ava-soft);
    font-size: 14px;
    text-transform: none;
}

.av-ty-instructions ul.order_details li strong,
.av-ty-instructions ul.wc-bacs-bank-details li strong {
    color: var(--ava-ink);
    font-size: 15px;
}

.av-ty-poll {
    margin: 0;
    color: var(--ava-soft);
    font-size: 13px;
    text-align: center;
}

/* Comprobante de la transferencia (en el "Pedido recibido" y en el pedido de
   Mi cuenta). El selector de archivo queda oculto: lo abre la etiqueta. */
.av-rcpt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.av-ty .av-rcpt .av-ty-card-title {
    margin: 0;
}

.av-rcpt-text,
.av-rcpt-help,
.av-rcpt-intro {
    margin: 0;
    color: var(--ava-soft);
    font-size: 14px;
}

.av-rcpt-help {
    font-size: 13px;
}

.av-rcpt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-rcpt-list[hidden],
.av-rcpt-actions[hidden] {
    display: none;
}

.av-rcpt-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--ava-radius-sm);
    background: var(--ava-green-soft);
    color: var(--ava-green-text);
}

.av-rcpt-ok {
    font-weight: 800;
}

.av-rcpt .av-rcpt-link {
    color: var(--ava-green-text);
    font-weight: 800;
}

.av-rcpt-date {
    color: var(--ava-green-text);
    font-size: 13px;
}

.av-rcpt-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.av-rcpt-pick {
    cursor: pointer;
}

.av-rcpt-input:focus-visible + .av-rcpt-pick {
    outline: 2px solid var(--ava-blue);
    outline-offset: 2px;
}

.av-rcpt.is-busy .av-rcpt-pick {
    opacity: 0.6;
    pointer-events: none;
}

.av-rcpt-status {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.av-rcpt-status:empty {
    display: none;
}

.av-rcpt-status.is-ok {
    color: var(--ava-green-text);
}

.av-rcpt-status.is-bad {
    color: var(--ava-red-text);
}

/* En el pedido de Mi cuenta: arriba del detalle, con la sombra de las tarjetas. */
.av-rcpt-page {
    margin: 0 0 4px;
}

.woocommerce-account .av-rcpt-page .av-ty-card {
    box-shadow: var(--ava-shadow, none);
}

@media (max-width: 600px) {
    .av-rcpt-actions {
        align-self: stretch;
    }

    .av-rcpt-pick {
        width: 100%;
    }
}

/* =========================================================================
   Página de pago dentro de la ventana (iframe)
   ========================================================================= */

html:has(body.av-embed-body),
body.av-embed-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}

body.av-embed-body {
    color: var(--ava-text);
    font-size: 15px;
    line-height: 1.5;
}

.av-embed {
    box-sizing: border-box;
    padding: 2px 2px 10px;
}

.av-embed .woocommerce {
    max-width: none;
    margin: 0;
    color: var(--ava-text);
    font-size: 15px;
}

.av-embed .woocommerce-notices-wrapper:empty {
    display: none;
}

/* En la ventana, el número y el total ya están arriba. */
.av-embed--receipt .woocommerce > ul.order_details {
    display: none;
}

.av-embed .av-ty {
    gap: 14px;
}

.av-embed .av-ty-hero,
.av-embed .av-ty-card {
    padding: 18px;
    border: 1px solid var(--ava-line);
    border-radius: var(--ava-radius-md);
}

.av-embed .av-ty .av-ty-title {
    font-size: 22px;
}

.av-embed-leave {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--ava-line);
    border-radius: var(--ava-radius-md);
}

.av-embed-leave p {
    margin: 0;
    color: var(--ava-soft);
}

.av-embed-leave .av-embed-leave-title {
    color: var(--ava-text);
    font-size: 18px;
    font-weight: 800;
}

.av-embed-btn {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--ava-blue);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none !important;
}

.av-embed--receipt .woocommerce > h2 {
    margin: 0 0 12px;
    color: var(--ava-ink);
    font-size: 18px;
    line-height: 1.3;
}

/* =========================================================================
   Recibo de la pasarela ("Pagar pedido" después de elegirla), a pantalla
   completa y en la ventana: el QR de Bancard (javositespagos) centrado y a
   la medida de la pantalla, con los logos de las billeteras en fila.
   ========================================================================= */

body.woocommerce-order-pay .woocommerce img {
    max-width: 100%;
    height: auto;
}

body.woocommerce-order-pay .woocommerce:has(> .contenedorqr, > img.entidades) {
    text-align: center;
}

body.woocommerce-order-pay .woocommerce:has(> .contenedorqr, > img.entidades) > :is(ul.order_details, .woocommerce-notices-wrapper, .woocommerce-error, .woocommerce-message, .woocommerce-info) {
    text-align: left;
}

body.woocommerce-order-pay .woocommerce .titulodepagoqr {
    margin: 0 0 8px;
    color: var(--ava-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

body.woocommerce-order-pay .woocommerce .contenedorqr #timer {
    color: var(--ava-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.woocommerce-order-pay .woocommerce img.imagenqr {
    display: block;
    margin: 6px auto;
}

/* "Guardar el QR" (pantallas táctiles, templates/checkout/embed.php). */
.av-embed-qr-save {
    max-width: 360px;
    margin: 10px auto 4px;
    text-align: center;
}

.av-embed-qr-save .av-embed-btn {
    justify-content: center;
    width: 100%;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.av-embed-qr-save .av-embed-btn:disabled {
    opacity: 0.65;
}

.av-embed-qr-save p {
    margin: 8px 0 0;
    color: var(--ava-soft);
    font-size: 13px;
    line-height: 1.45;
}

body.woocommerce-order-pay .woocommerce .titulodeentidades {
    margin: 14px 0 6px;
    color: var(--ava-soft);
    font-size: 14px;
    font-weight: 700;
}

body.woocommerce-order-pay .woocommerce img.entidades {
    display: inline-block;
    width: 96px;
    margin: 4px 6px;
    vertical-align: middle;
}

/* =========================================================================
   Ventana de pago (Mi cuenta)
   ========================================================================= */

html.av-pay-open {
    overflow: hidden;
}

.av-pay [hidden],
.av-pay[hidden] {
    display: none !important;
}

.av-pay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    color: var(--ava-text);
    font-size: 15px;
    line-height: 1.5;
}

.av-pay__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 62, 0.55);
}

.av-pay__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 680px;
    max-height: 92vh;
    margin: 4vh auto 0;
    overflow: hidden;
    border-radius: var(--ava-radius);
    background: #fff;
    box-shadow: 0 18px 44px rgba(13, 27, 62, 0.24);
    outline: none;
}

.av-pay__head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid var(--ava-line);
}

.av-pay .av-pay__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--ava-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.av-pay__close,
.av-pay__back {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: #f3f6fc;
    color: var(--ava-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.av-pay__close {
    font-size: 24px;
    line-height: 1;
}

.av-pay__close:hover,
.av-pay__close:focus-visible,
.av-pay__back:hover,
.av-pay__back:focus-visible {
    background: var(--ava-blue-soft);
    color: var(--ava-blue-d);
}

.av-pay .av-pay__steps {
    flex: none;
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ava-line);
    background: #f7f9fe;
    font-size: 13px;
}

.av-pay .av-pay__steps li {
    padding: 6px 12px;
}

.av-pay__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.av-pay__notice {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--ava-red);
    border-radius: var(--ava-radius-sm);
    background: var(--ava-red-soft);
    color: var(--ava-ink);
    font-size: 14px;
}

.av-pay__loading,
.av-pay__frame-loading {
    margin: 0;
    padding: 18px 0;
    color: var(--ava-soft);
    font-weight: 700;
    text-align: center;
}

.av-pay__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px;
    border-radius: var(--ava-radius-md);
    background: var(--ava-blue-tint);
}

.av-pay__summary p {
    margin: 0;
}

.av-pay__summary-main {
    min-width: 0;
}

.av-pay__summary-title {
    color: var(--ava-ink);
    font-size: 16px;
    font-weight: 800;
}

.av-pay__summary-vehicle,
.av-pay__summary-next {
    color: var(--ava-soft);
    font-size: 14px;
}

.av-pay__summary-total {
    color: var(--ava-ink);
    font-size: 20px;
    font-weight: 800;
    text-align: right;
}

.av-pay__summary-total .av-pay__summary-label {
    display: block;
    color: var(--ava-soft);
    font-size: 12px;
    font-weight: 700;
}

.av-pay__summary-total strong {
    font-weight: 800;
    white-space: nowrap;
}

.av-pay__data {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.av-pay .av-pay__h {
    margin: 0;
    color: var(--ava-text);
    font-size: 18px;
    font-weight: 800;
}

.av-pay__muted {
    margin: 2px 0 0;
    color: var(--ava-soft);
    font-size: 14px;
}

.av-pay__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.av-pay__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.av-pay__field--wide {
    grid-column: 1 / -1;
}

.av-pay__field label {
    color: var(--ava-text);
    font-size: 14px;
    font-weight: 700;
}

.av-pay__req {
    color: var(--ava-red);
}

.av-pay__field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--ava-border);
    border-radius: var(--ava-radius-sm);
    background: #fff;
    color: var(--ava-ink);
    font: inherit;
    font-size: 15px;
}

.av-pay__field input:focus {
    border-color: var(--ava-blue);
    outline: 2px solid var(--ava-blue-soft);
    outline-offset: 0;
}

.av-pay__field input[aria-invalid="true"] {
    border-color: var(--ava-red);
}

.av-pay__err {
    margin: 0;
    color: var(--ava-red-text);
    font-size: 13px;
    font-weight: 600;
}

.av-pay__help {
    margin: 0;
    color: var(--ava-soft);
    font-size: 13px;
}

.av-pay__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}

.av-pay__check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ava-blue);
}

.av-pay__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.av-pay__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

.av-pay__btn--primary {
    background: var(--ava-blue);
    color: #fff;
}

.av-pay__btn--primary:hover,
.av-pay__btn--primary:focus-visible {
    background: var(--ava-blue-d);
}

.av-pay__btn--primary:disabled {
    opacity: 0.7;
    cursor: progress;
}

.av-pay__btn--ghost,
.av-pay__btn--light {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ava-border);
    color: var(--ava-text);
}

.av-pay__btn--ghost:hover,
.av-pay__btn--ghost:focus-visible,
.av-pay__btn--light:hover,
.av-pay__btn--light:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--ava-text);
}

.av-pay__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--ava-line);
    border-radius: var(--ava-radius-sm);
}

.av-pay__who p {
    margin: 0;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.av-pay__who strong {
    color: var(--ava-ink);
}

.av-pay__link {
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ava-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.av-pay__frame iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: #fff;
}

.av-pay__fallback {
    margin: 8px 0 0;
    font-size: 13px;
    text-align: center;
}

.av-pay__fallback a {
    color: var(--ava-soft);
}

.av-pay__waiting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
    border-radius: var(--ava-radius-md);
    background: var(--ava-amber-soft);
}

.av-pay__waiting p {
    margin: 0;
    color: var(--ava-ink);
}

/* Dentro de una página (el asistente de contratación): en su lugar, sin fondo,
   sin encabezado propio (el paso ya tiene título y "Atrás") y con su alto. */
.av-pay.av-pay--inline {
    position: static;
    inset: auto;
    z-index: auto;
}

.av-pay--inline .av-pay__overlay,
.av-pay--inline .av-pay__head,
.av-pay--inline .av-pay__steps {
    display: none;
}

.av-pay--inline .av-pay__dialog {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    border: 1px solid var(--ava-border);
    border-radius: var(--ava-radius-md);
    box-shadow: none;
}

.av-pay--inline .av-pay__body {
    padding: 14px;
    overflow: visible;
}

/* Al cambiar la página de adentro (el QR, el banco) se la trae a la vista:
   que no quede debajo de un encabezado fijo del sitio. */
.av-pay--inline .av-pay__frame iframe {
    scroll-margin-top: 88px;
}

@media (max-width: 600px) {
    .av-pay__dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .av-pay__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .av-pay__back span {
        display: none;
    }

    .av-pay__actions .av-pay__btn {
        flex: 1 1 auto;
    }
}