/**
 * Stili personalizzati del tema Aperigozzo
 */

:root {
    --bg-prenota-01: url('/themes/Aperigozzo/assets/bg-prenota-01.png');
    --bg-prenota-01-hover: url('/themes/Aperigozzo/assets/bg-prenota-01.hover.png');
    --bg-prenota-02: url('/themes/Aperigozzo/assets/bg-prenota-02.png');
    --bg-prenota-02-hover: url('/themes/Aperigozzo/assets/bg-prenota-02.hover.png');
    --bg-prenota-03: url('/themes/Aperigozzo/assets/bg-prenota-03.png');
    --bg-prenota-03-hover: url('/themes/Aperigozzo/assets/bg-prenota-03.hover.png');
    --bg-viola: url('/themes/Aperigozzo/assets/bg-viola.png');
    --bg-reviews: url('/themes/Aperigozzo/assets/bg-reviews.png');
    --bg-onda-bianco: url('/themes/Aperigozzo/assets/Aerigozzo-bg-onda-bianco.png');
    --hero-bg: url('/themes/Aperigozzo/assets/hero.png');
}

body {
    font-family: 'Asap Condensed', sans-serif;
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
}

.menu-font {
    font-family: 'Asap Condensed', sans-serif;
    font-weight: 500;
}

.btn-prenota {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    transition: all 0.3s ease;
    padding: 10px 28px;
}

.btn-prenota:hover {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 9px 27px;
}

.bg-footer {
    position: relative;
    z-index: 2;
    background-color: #431A69;
    background-image: var(--bg-viola);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.bg-itinerario {
    position: relative;
    z-index: 2;
    background-image: var(--bg-viola);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-reviews-turchese {
    position: relative;
    z-index: 2;
    background-image: var(--bg-reviews);
    background-position: top;
    background-repeat: no-repeat;
}

.img-panoramica {
    position: relative;
    margin-top: -60px;
    z-index: 3;
}

.hero-section {
    margin-top: 120px !important;
    background-color: #fff;
    position: relative;
}

.hero-content {
    min-height: calc(100svh - 120px);
}

@media (min-width: 768px) {
    .hero-section {
        margin-top: 160px !important;
    }
    .hero-content {
        min-height: clamp(55vh, 56.25vw, 85vh);
    }
}


.hero-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 20;
}

.hero-wave-top svg {
    display: block;
    width: 100%;
    height: 80px;
}

.hero-wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 20;
}

.hero-wave-bottom svg {
    display: block;
    width: 100%;
    height: 80px;
}

@media (min-width: 768px) {
    .hero-wave-top svg,
    .hero-wave-bottom svg {
        height: 100px;
    }
}

.input-data {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    min-width: 200px;
    height: 50px;
}

.input-data::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.input-data:hover,
.input-data:focus-within {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 11px 19px;
}

.input-persone {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    min-width: 200px;
    height: 50px;
}

.input-persone::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.input-persone:hover,
.input-persone:focus-within {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 11px 19px;
}

.input-data input,
.input-persone input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: white !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.input-data input::placeholder,
.input-persone input::placeholder {
    color: white;
    opacity: 0.8;
}

/* Rendi cliccabile l'icona del calendario nativa */
.input-data input::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Stili moderni per il datepicker */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: white;
    font-weight: 500;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Varianti invertite per il form itinerario */
.input-data-inverted {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    min-width: 200px;
    height: 50px;
}

.input-data-inverted::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.input-data-inverted:hover,
.input-data-inverted:focus-within {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 11px 19px;
}

.input-persone-inverted {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    min-width: 200px;
    height: 50px;
}

.input-persone-inverted::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

.input-persone-inverted:hover,
.input-persone-inverted:focus-within {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 11px 19px;
}

.btn-prenota-inverted {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    transition: all 0.3s ease;
    padding: 10px 28px;
}

.btn-prenota-inverted:hover {
    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    padding: 9px 27px;
}

.input-data-inverted input,
.input-persone-inverted input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: white !important;
    padding: 0 !important;
    flex: 1;
}

.input-data-inverted input::placeholder,
.input-persone-inverted input::placeholder {
    color: white;
    opacity: 0.8;
}

.input-data-inverted input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.bg-onda-bianco {
    background-image: var(--bg-onda-bianco);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html {
    scroll-behavior: smooth;
}

/* Fix per mobile: mantiene proporzioni corrette */
@media (max-width: 768px) {
    .input-data,
    .input-data-inverted,
    .input-persone,
    .input-persone-inverted {
        padding: 14px 20px;
    }
    
    .btn-prenota,
    .btn-prenota-inverted {
        padding: 14px 28px;
    }
    
    .input-data input,
    .input-data-inverted input,
    .input-persone input,
    .input-persone-inverted input {
        font-size: 14px;
        padding: 0 !important;
    }
}