/*
 * MODO OSCURO de los shortcodes (frontend).
 */

.rossa-shortcode{
    /* Superficies */
    --rossa-color-white: #1f2023;       /* fondo de tarjetas, inputs, botones secundarios */
    --rossa-color-bg-gray: #2a2b30;     /* superficies sutiles: chips de precio, cajas, hover */
    --rossa-color-gray-skeleton: #2a2b30;

    /* Texto */
    --rossa-color-black: #f3f3f5;        /* texto principal (títulos, precios) */
    --rossa-color-default-text: #c2c2ca; /* texto secundario (descripciones, features) */
    --rossa-color-text-light: #94949c;   /* texto terciario / placeholders / iconos apagados */
    --rossa-color-black-hover: #e6e6ea;

    /* Bordes y separadores */
    --rossa-color-gray: #3a3b41;

    /* Fondo rosa de la tarifa/opción seleccionada (antes #fff0f2, casi blanco) */
    --rossa-color-bg-primary: rgba(231, 0, 76, 0.16);
    --rossa-config-color-bg-primary: rgba(231, 0, 76, 0.16);
    --rossa-config-option-color-bg-primary: rgba(231, 0, 76, 0.16);

    /* Superficie sólida (literal) para cajas grandes: garantiza fondo oscuro sin
       depender de la herencia de variables. */
    --rossa-dark-surface: #1f2023;
    --rossa-dark-surface-2: #2f3036; /* superficie elevada: botones método de pago */
}

/* Color de texto base por si algún nodo no lo fija explícitamente. */
.rossa-shortcode{
    color: var(--rossa-color-black);
}

/* Cajas/superficies grandes: fondo oscuro explícito (literal) para que no se
   queden blancas pase lo que pase con la herencia de variables. */
.rossa-shortcode .rossa-accommodation,
.rossa-shortcode .rossa-box-summary-list-booking,
.rossa-shortcode .rossa-box-payment-methods,
.rossa-shortcode .rossa-box-policies,
.rossa-shortcode .rossa-payment-link__info,
.rossa-shortcode .rossa-box-customer,
.rossa-shortcode .rossa-price-option-box.rossa-price-option-box--total-price{
    background-color: var(--rossa-dark-surface);
}
/* La variante checkout de métodos de pago es transparente a propósito. */
.rossa-shortcode .rossa-box-payment-methods.rossa-box-payment-methods--checkout{
    background-color: transparent;
}

/* ---- Excepciones: blanco/negro usados como TEXTO/ICONO sobre un color ---- */

/* Botón primario (CTA "Reservar", "Continuar"...): fondo rosa, texto blanco. */
.rossa-shortcode .rossa-button:not([class*="rossa-button--"]),
.rossa-shortcode .rossa-button:not([class*="rossa-button--"]) span,
.rossa-shortcode .rossa-button:not([class*="rossa-button--"]) svg{
    color: #ffffff;
}

/* Botón "copiar": tenía el fondo blanco hardcodeado. */
.rossa-shortcode .rossa-button.rossa-button--copy,
.rossa-shortcode .rossa-button.rossa-button--copy:focus,
.rossa-shortcode .rossa-button.rossa-button--copy:focus-visible{
    background-color: var(--rossa-color-white);
}

/* Botón de quitar alojamiento (X sobre círculo rosa) y contador de imágenes. */
.rossa-shortcode .rossa-accommodation__remove,
.rossa-shortcode .rossa-accommodation__number-images__content{
    color: #ffffff;
}

/* ---- Botones de método de pago (Button::black + --payment-method) ---- */
/* Por defecto el botón negro queda muy oscuro y se funde con el fondo. Le damos
   una superficie algo más clara y borde para que destaque. */
.rossa-shortcode .rossa-button.rossa-button--payment-method,
.rossa-shortcode .rossa-button.rossa-button--payment-method:focus,
.rossa-shortcode .rossa-button.rossa-button--payment-method:focus-visible{
    background-color: var(--rossa-dark-surface-2);
    border-color: #4a4b53;
    color: var(--rossa-color-black);
}
@media (hover: hover){
    .rossa-shortcode .rossa-button.rossa-button--payment-method:hover{
        background-color: #3a3b43;
        border-color: var(--rossa-config-color-primary);
        color: var(--rossa-color-black);
    }
}
/* Resto de botones negros (no método de pago): superficie oscura con texto claro. */
.rossa-shortcode .rossa-button.rossa-button--black:not(.rossa-button--payment-method){
    background-color: var(--rossa-color-bg-gray);
    border-color: var(--rossa-color-gray);
    color: var(--rossa-color-black);
}

/* ---- Inputs / selects nativos / textareas ---- */
.rossa-shortcode input,
.rossa-shortcode select,
.rossa-shortcode textarea{
    color: var(--rossa-color-black);
}
.rossa-shortcode input::placeholder,
.rossa-shortcode textarea::placeholder{
    color: var(--rossa-color-text-light);
}
.rossa-shortcode input:-webkit-autofill,
.rossa-shortcode input:-webkit-autofill:hover,
.rossa-shortcode input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--rossa-color-black);
    -webkit-box-shadow: 0 0 0 1000px var(--rossa-color-white) inset;
    caret-color: var(--rossa-color-black);
}

/* ---- TomSelect (País, Provincia, Localidad, prefijo teléfono...) ---- */
/* El vendor pinta el control y el dropdown en blanco y usa grises hardcodeados,
   así que la redefinición de variables no les llega: overrides explícitos. */
.rossa-shortcode .ts-wrapper.rossa-select > .ts-control,
.rossa-shortcode .ts-wrapper.rossa-select > .ts-control:focus,
.rossa-shortcode .ts-wrapper.rossa-select > .ts-control:focus-visible{
    background-color: var(--rossa-color-white);
    color: var(--rossa-color-black);
}
.rossa-shortcode .ts-wrapper.rossa-select .ts-control .item,
.rossa-shortcode .ts-wrapper.rossa-select .ts-control input,
.rossa-shortcode .ts-wrapper.rossa-select .ts-control input::placeholder{
    color: var(--rossa-color-black);
}
.rossa-shortcode .ts-wrapper.rossa-select .ts-dropdown{
    background-color: var(--rossa-color-white);
    border-color: var(--rossa-color-gray);
    color: var(--rossa-color-black);
}
.rossa-shortcode .ts-wrapper.rossa-select .ts-dropdown .option:hover,
.rossa-shortcode .ts-wrapper.rossa-select .ts-dropdown .option.active{
    background-color: var(--rossa-color-bg-gray);
}
/* El chevron es un SVG oscuro sobre un cuadrado blanco hardcodeado: quitamos el
   cuadrado e invertimos el icono para que se vea claro sobre el control oscuro. */
.rossa-shortcode .ts-wrapper.rossa-select > .ts-control::after,
.rossa-shortcode .ts-wrapper.rossa-select > .ts-control:focus::after{
    background-color: transparent;
    filter: invert(0.85);
}

/* ---- Scrollbars ---- */
.rossa-shortcode,
.rossa-shortcode *{
    scrollbar-width: thin;
    scrollbar-color: var(--rossa-color-gray) transparent;
}
.rossa-shortcode ::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
.rossa-shortcode ::-webkit-scrollbar-track{
    background: transparent;
}
.rossa-shortcode ::-webkit-scrollbar-thumb{
    background-color: var(--rossa-color-gray);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.rossa-shortcode ::-webkit-scrollbar-thumb:hover{
    background-color: var(--rossa-color-text-light);
}

/* ---- Banner de estado (éxito / error) ---- */
/* Tenían fondo verde/rojo casi blanco y texto oscuro hardcodeados. */
.rossa-shortcode .rossa-banner.rossa-banner--success{
    background-color: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.5);
    color: #86efac;
}
.rossa-shortcode .rossa-banner.rossa-banner--success .rossa-banner__icon,
.rossa-shortcode .rossa-banner.rossa-banner--success .rossa-banner__title{
    color: #86efac;
}
.rossa-shortcode .rossa-banner.rossa-banner--success .rossa-button,
.rossa-shortcode .rossa-banner.rossa-banner--success .rossa-button span{
    color: #ffffff; /* el botón verde mantiene texto blanco */
}
.rossa-shortcode .rossa-banner.rossa-banner--error{
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}
.rossa-shortcode .rossa-banner.rossa-banner--error .rossa-banner__icon,
.rossa-shortcode .rossa-banner.rossa-banner--error .rossa-banner__title{
    color: #fca5a5;
}

/* ---- Banner de descuento (en disponibilidad) ---- */
.rossa-shortcode .rossa-discount-banner--success{
    background-color: rgba(0, 160, 0, 0.16);
    border-color: rgba(0, 160, 0, 0.45);
    color: #86efac;
}
.rossa-shortcode .rossa-discount-banner--error{
    background-color: rgba(220, 53, 69, 0.16);
    border-color: rgba(220, 53, 69, 0.45);
    color: #fca5a5;
}

/* ---- Modales (se renderizan dentro de .rossa-shortcode) ---- */
.rossa-shortcode .rossa-modal__content{
    border: 1px solid var(--rossa-color-gray);
}

/* Pasos del checkout: separador claro (en oscuro el gris no se ve). */
.rossa-shortcode .rossa-step__separator{
    background-color: var(--rossa-color-text-light);
}
.rossa-shortcode .rossa-step__separator-line{
    border-top-color: var(--rossa-color-text-light);
}

/* Botón "Ver resumen": contorno primario sin fondo; hover relleno primario y texto blanco. */
.rossa-shortcode .rossa-button.rossa-button--white-primary{
    background-color: transparent;
    color: var(--rossa-config-color-primary);
    border-color: var(--rossa-config-color-primary);
}
.rossa-shortcode .rossa-button.rossa-button--white-primary:focus,
.rossa-shortcode .rossa-button.rossa-button--white-primary:focus-visible{
    background-color: var(--rossa-config-color-primary);
    border-color: var(--rossa-config-color-primary);
    color: #ffffff;
}
@media (hover: hover) {
    .rossa-shortcode .rossa-button.rossa-button--white-primary:hover{
        background-color: var(--rossa-config-color-primary);
        border-color: var(--rossa-config-color-primary);
        color: #ffffff;
    }
}