/* =================================================================== */
/* STYLE 9: Diseño "Acuarela Suave" (Versión Completada y Mejorada)    */
/* OBJETIVO: Crear una interfaz artística, suave y amigable, con       */
/* texturas de acuarela, bordes orgánicos y una paleta de colores      */
/* pastel para una sensación relajada y creativa.                      */
/* Mejoras: Título personal más grande, language selector y close      */
/* button más bonitos, number spinner rehecho, estilo para discount    */
/* code similar a extra nights, botones más grandes y texto legible.   */
/* =================================================================== */

/* ------------------------------------------------------------------- */
/* 1. Variables Globales, Fuentes y Animaciones
/* ------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Nunito+Sans:wght@400;600&display=swap');

:root {
    --font-script: 'Caveat', cursive;
    --font-sans: 'Nunito Sans', sans-serif;
    
    --bg-color: #FDF6F7;
    --surface-color: #FFFFFF;
    --border-color: #E8D7DA;
    
    --accent-gradient: linear-gradient(135deg, #FFC3A0 0%, #FFAFBD 100%);
    --accent-primary: #B5A8E8;
    --text-primary: #524749;
    --text-secondary: #7A6F71;
    --success-color: #A8D8B9;
    --disabled-color: #F5F5F5;
}

@keyframes soft-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* ------------------------------------------------------------------- */
/* 2. Estructura Principal y Fondo
/* ------------------------------------------------------------------- */
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    background-color: var(--bg-color);
    background-image: url('https://www.transparenttextures.com/patterns/watercolor.png');
}

.main-wrapper { max-width: 940px; margin: 0 auto; padding: 2rem 1rem; }

div#title {
    font-family: var(--font-script);
    font-size: 3.5rem; /* Aumentado */
    color: var(--text-primary);
    text-align: center;
    padding: 1rem;
}

div#searchbox,
div#infobox,
div#personal {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin: 1rem auto;
    box-shadow: 0 5px 25px rgba(181, 168, 232, 0.15);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

#personaltitle {
  margin: 5px auto;
  font-size: 3.5rem; /* Aumentado para hacerlo más grande */
  font-family: var(--font-script);
  text-align: center;
  color: var(--text-primary);
}

/* ------------------------------------------------------------------- */
/* 3. Módulo de Selección (Searchbox)
/* ------------------------------------------------------------------- */
div#searchbox { text-align: center; }
div#searchbox span { font-size: 1.1rem; line-height: 1.6; display: block; max-width: 520px; margin: 0 auto 2rem auto; }
#coursediv, #leveldiv, #date_startdiv, #spandiv, #accomdiv, #taxidiv, #adddiv { 
    margin: 0 auto 1.5rem auto; 
    max-width: 400px; 
}

select {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 30px;
    height: 3.2rem;
    width: 100%;
    padding: 0 1.2rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23B5A8E8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    transition: all 0.4s ease;
}

select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 10px rgba(181, 168, 232, 0.3); }
select.select-active { border-color: var(--accent-primary); transform: scale(1.02); }
select.select-completed { border-color: var(--success-color); background-color: #F0F9F4; }
select.select-disabled { background-color: var(--disabled-color); color: #BDBDBD; cursor: not-allowed; }

.gp.btn {
    border: none; 
    background-image: var(--accent-gradient); 
    color: #fff;
    font-weight: 700; 
    font-size: 1.3rem; /* Aumentado */
    margin: 2rem auto;
    padding: 1.2rem 3rem; /* Aumentado para hacerlo más grande */
    border-radius: 30px; 
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 175, 189, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.gp.btn:hover { 
    transform: scale(1.05);  
    box-shadow: 0 7px 20px rgba(255, 175, 189, 0.5); 
    color: #333; 
}

.gp.btn:active { 
    background-image: var(--accent-gradient); 
    transform: scale(1.05);  
    box-shadow: 0 7px 20px rgba(255, 175, 189, 0.5); 
    color: #333; 
}

/* ------------------------------------------------------------------- */
/* 4. Módulo de Resumen (Infobox) - con 2 columnas
/* ------------------------------------------------------------------- */
.infobox-row { display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; }
.infobox-row-left { flex-basis: 55%; flex-grow: 1; padding-right: 20px; min-width: 220px; }
.infobox-row-right { flex-basis: 40%; flex-grow: 1; text-align: left; }
.infobox-separator { border-top: 1px dashed var(--border-color); margin-top: 10px; padding-top: 10px; }

#totalpricediv { border-top: none; margin-top: 20px; padding-top: 20px; position: relative; }
#totalpricediv::before {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 80%; height: 5px;
    background-image: var(--accent-gradient); border-radius: 5px; opacity: 0.5;
}
#totalpricediv h4, #totalpricediv b { color: var(--text-primary); }

/* Estilos rehechos para el spinner de noches extra */
.number-spinner { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #F9F5F6; /* Fondo suave */
    border-radius: 30px; 
    border: 1px solid var(--border-color); 
    padding: 0.5rem; 
    box-shadow: 0 2px 10px rgba(181, 168, 232, 0.1); 
    max-width: 150px; 
    margin: 0 auto; 
}
.number-spinner button {
    width: 40px; /* Más grande */
    height: 40px; /* Más grande */
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #FFC3A0, #FFAFBD); /* Gradiente bonito */
    box-shadow: 0 2px 5px rgba(255, 175, 189, 0.3);
    border-radius: 50%;
    color: #FFFFFF; /* Blanco para legibilidad */
    font-weight: bold;
    font-size: 1.2rem; /* Texto más grande */
    transition: all 0.3s ease;
}
.number-spinner button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 175, 189, 0.5);
}
.number-spinner button:active {
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}
.number-spinner input {
    width: 60px; /* Más ancho */
    text-align: center; 
    font-weight: bold;
    font-size: 1.2rem; /* Más grande */
    border: none;
    background: transparent;
    color: var(--text-primary);
}
.number-spinner button:disabled { cursor: not-allowed; opacity: 0.5; }

/* Estilo para el campo de promo code (similar a number-spinner) */
.promo-code-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #F9F5F6; /* Fondo suave */
    border-radius: 30px; 
    border: 1px solid var(--border-color); 
    padding: 0.5rem; 
    box-shadow: 0 2px 10px rgba(181, 168, 232, 0.1); 
    max-width: 300px; 
    margin: 1rem auto; 
}
#promo_code_input {
    flex-grow: 1; 
    margin-right: 8px; 
    height: 40px; /* Más grande */
    border-radius: 20px;
    border: none;
    background: transparent;
    padding: 0 12px;
    color: var(--text-primary);
    font-size: 1.2rem; /* Más grande */
    transition: all 0.3s ease;
}
#promo_code_input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(181, 168, 232, 0.3);
}
#apply_promo_code_btn {
    height: 40px; /* Más grande */
    border: none; 
    padding: 0 20px; /* Más ancho */
    cursor: pointer; 
    border-radius: 50px;
    background-image: var(--accent-gradient);
    color: #FFFFFF; /* Blanco para legibilidad */
    font-weight: 600;
    font-size: 1.2rem; /* Más grande */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(255, 175, 189, 0.3);
}
#apply_promo_code_btn:hover { 
    transform: scale(1.05); 
    box-shadow: 0 4px 10px rgba(255, 175, 189, 0.5); 
}

#buttonactive_bottom { text-align: center; width: 100%; }

/* Responsive */
@media (max-width: 768px) {
    .infobox-row { flex-direction: column; align-items: flex-start; }
    .infobox-row-right { padding-top: 5px; text-align: left; }
}

/* Botón close más bonito */
.close-button-x {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 40px; /* Más grande */
    height: 40px; /* Más grande */
    background: linear-gradient(135deg, #FFC3A0, #FFAFBD); /* Gradiente bonito */
    color: #FFFFFF; /* Blanco para legibilidad */
    border-radius: 50%; /* Forma redonda */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* Icono más grande */
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(255, 175, 189, 0.4);
    transition: all 0.3s ease;
}
.close-button-x:hover {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(255, 175, 189, 0.6);
    text-decoration: none;
}
.close-button-x:active {
    transform: scale(0.95);
}

/* Language selector más bonito */
.language-selector { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 20px 0; 
    text-align: center; 
}
.language-selector li { 
    display: inline-block; 
    margin: 0 12px; /* Más espacio */
}
.language-selector a { 
    color: var(--text-secondary); 
    text-decoration: none; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    padding: 8px 16px; /* Más padding para tamaño */
    border-radius: 20px; /* Bordes suaves */
    background: #F9F5F6; /* Fondo suave */
    box-shadow: 0 2px 5px rgba(181, 168, 232, 0.1); 
    transition: all 0.3s ease; 
}
.language-selector a:hover { 
    background: var(--accent-gradient); 
    color: #FFFFFF; /* Blanco para legibilidad */
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(255, 175, 189, 0.4); 
    text-decoration: none;
}
.language-selector img.flag { 
    width: 24px; /* Más grande */
    height: auto; 
    margin-right: 8px; 
    border-radius: 50%; /* Redondo bonito */

}
.language-selector li.active a { 
    background: var(--accent-gradient); 
    color: #FFFFFF; 
    font-weight: bold; 
    box-shadow: 0 4px 10px rgba(255, 175, 189, 0.4); 
}
/* ------------------------------------------------------------------- */
/* 5. Visibilidad y Overlay
/* ------------------------------------------------------------------- */
#infobox, #totalpricediv, .infoaccomdiv, .inforegdiv, .infotaxidivm, #personal,
#buttonactive, #comissiondiv, .infoadddivm, .infotaxiprice, .infoaddprice,
.infotopseasondiv, #extraNightsDiv, #discountDiv { display: none; }

#overlay {
    position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0;
    z-index: 9999; background: rgba(253, 246, 247, 0.8); backdrop-filter: blur(5px);
}
#overlay::after {
    content: ''; display: block; position: absolute; top: 50%; left: 50%;
    width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
    background-image: var(--accent-gradient); animation: soft-pulse 1.5s ease-in-out infinite;
}

.dobro {
    background-color: var(--success-color);
    color: #524749; /* Color oscuro para legibilidad */
    border: 0px;
    margin: 2px;
    text-decoration: none;
    display: block;
    font-size: 1.2rem; /* Más grande */
    line-height: 30px; /* Ajustado */
    border-radius: 30px; /* Suave */
    padding: 0.8rem 15px; /* Más grande */
    box-shadow: 0 2px 5px rgba(168, 216, 185, 0.3);
    transition: all 0.3s ease;
}
.dobro:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(168, 216, 185, 0.5);
}