/* =============================================================

   style.css — Stile sito pubblico Centro Estetico

   Palette: crema, beige caldo, bianco, verde salvia, grigio scuro

   ============================================================= */



/* --- Reset e variabili CSS --- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

    --cream:       #FAF7F2;   /* sfondo principale */

    --beige:       #F0EAE0;   /* sfondo sezioni alternate */

    --beige-dark:  #DDD5C8;   /* bordi, separatori */

    --white:       #FFFFFF;

    --sage:        #8FAE8B;   /* accento verde salvia */

    --sage-light:  #C8D9C5;   /* accento chiaro */

    --sage-dark:   #6A8E66;   /* hover su accento */

    --text:        #3A3530;   /* testo principale */

    --text-muted:  #7A746C;   /* testo secondario */

    --text-light:  #A09890;   /* testo molto tenue */

    --error:       #C0625A;

    --success:     #6A8E66;

    --radius:      6px;

    --shadow:      0 1px 4px rgba(0,0,0,0.07);

    --shadow-md:   0 4px 16px rgba(0,0,0,0.08);

    --transition:  0.2s ease;

    --font:        'Georgia', 'Times New Roman', serif;

    --font-ui:     system-ui, -apple-system, 'Segoe UI', sans-serif;

}



html { scroll-behavior: smooth; }



body {

    font-family: var(--font-ui);

    background-color: var(--cream);

    color: var(--text);

    line-height: 1.65;

    font-size: 16px;

}



/* --- Tipografia --- */

h1, h2, h3, h4 {

    font-family: var(--font);

    font-weight: normal;

    color: var(--text);

    line-height: 1.25;

}

h1 { font-size: clamp(2rem, 4vw, 2.8rem); }

h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

h3 { font-size: 1.2rem; }

h4 { font-size: 1rem; font-family: var(--font-ui); font-weight: 600; }



p { margin-bottom: 1rem; color: var(--text-muted); }

p:last-child { margin-bottom: 0; }



a { color: var(--sage-dark); text-decoration: none; transition: color var(--transition); }

a:hover { color: var(--sage); }



img { max-width: 100%; height: auto; display: block; }



ul { list-style: none; }



/* --- Layout --- */

.container {

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



.section { padding: 5rem 0; }

.section--alt { background-color: var(--beige); }

.section-label {

    font-size: 0.75rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: var(--sage);

    display: block;

    margin-bottom: 0.5rem;

}

.section-header { max-width: 560px; margin-bottom: 3rem; }

.section-header p { font-size: 1.05rem; }



/* --- Header --- */

.site-header {

    background: var(--white);

    border-bottom: 1px solid var(--beige-dark);

    position: sticky;

    top: 0;

    z-index: 100;

}

.site-header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 64px;

}

.logo {

    font-family: var(--font);

    font-size: 1.25rem;

    color: var(--text);

    letter-spacing: 0.02em;

}

.logo:hover { color: var(--sage-dark); }



.main-nav ul {

    display: flex;

    align-items: center;

    gap: 2rem;

}

.main-nav a {

    font-size: 0.9rem;

    color: var(--text-muted);

    letter-spacing: 0.01em;

    padding-bottom: 2px;

    border-bottom: 1px solid transparent;

    transition: color var(--transition), border-color var(--transition);

}

.main-nav a:hover,

.main-nav a.active {

    color: var(--text);

    border-bottom-color: var(--sage);

}

.btn-nav {

    background: var(--sage) !important;

    color: var(--white) !important;

    padding: 0.45rem 1.2rem !important;

    border-radius: var(--radius) !important;

    border-bottom: none !important;

    font-size: 0.875rem !important;

}

.btn-nav:hover { background: var(--sage-dark) !important; }



/* Hamburger mobile */

.nav-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

}

.nav-toggle span {

    display: block;

    width: 22px;

    height: 2px;

    background: var(--text);

    border-radius: 2px;

    transition: transform var(--transition), opacity var(--transition);

}



/* --- Hero --- */

.hero {

    background-color: var(--beige);

    padding: 6rem 0 5rem;

    text-align: center;

}

.hero .section-label { justify-content: center; display: flex; }

.hero h1 { max-width: 640px; margin: 0.5rem auto 1.5rem; }

.hero p { max-width: 480px; margin: 0 auto 2.5rem; font-size: 1.05rem; }

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }



/* --- Bottoni --- */

.btn {

    display: inline-block;

    padding: 0.75rem 1.75rem;

    border-radius: var(--radius);

    font-size: 0.9rem;

    font-family: var(--font-ui);

    cursor: pointer;

    border: 1px solid transparent;

    transition: background var(--transition), color var(--transition), border-color var(--transition);

    text-align: center;

    white-space: nowrap;

}

.btn-primary {

    background: var(--sage);

    color: var(--white);

    border-color: var(--sage);

}

.btn-primary:hover { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--white); }

.btn-outline {

    background: transparent;

    color: var(--text);

    border-color: var(--beige-dark);

}

.btn-outline:hover { background: var(--beige); color: var(--text); }

.btn-sm { padding: 0.45rem 1rem; font-size: 0.825rem; }

.btn-danger { background: var(--error); color: var(--white); border-color: var(--error); }

.btn-danger:hover { background: #a8504a; border-color: #a8504a; color: var(--white); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }



/* --- Card servizi --- */

.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.5rem;

}

.service-card {

    background: var(--white);

    border: 1px solid var(--beige-dark);

    border-radius: var(--radius);

    padding: 1.75rem;

    transition: box-shadow var(--transition);

}

.service-card:hover { box-shadow: var(--shadow-md); }

.service-card__category {

    font-size: 0.7rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--sage);

    margin-bottom: 0.5rem;

}

.service-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }

.service-card p { font-size: 0.9rem; margin-bottom: 1rem; }

.service-card__meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid var(--beige);

    padding-top: 1rem;

    margin-top: auto;

}

.service-card__price { font-weight: 600; color: var(--text); font-size: 1.05rem; }

.service-card__duration { font-size: 0.8rem; color: var(--text-muted); }



/* --- Tabella prezzi --- */

.prices-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--white);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}

.prices-table thead { background: var(--beige); }

.prices-table th {

    text-align: left;

    padding: 0.9rem 1.25rem;

    font-size: 0.8rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--text-muted);

    font-weight: 600;

    font-family: var(--font-ui);

}

.prices-table td {

    padding: 0.875rem 1.25rem;

    border-bottom: 1px solid var(--beige);

    font-size: 0.925rem;

    color: var(--text);

}

.prices-table tbody tr:last-child td { border-bottom: none; }

.prices-table tbody tr:hover { background: var(--cream); }

.prices-table .price-col { font-weight: 600; text-align: right; white-space: nowrap; }

.prices-table .duration-col { color: var(--text-muted); white-space: nowrap; }

.category-row td {

    background: var(--beige);

    font-weight: 600;

    font-size: 0.8rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--text-muted);

    padding: 0.6rem 1.25rem;

    border-bottom: 1px solid var(--beige-dark);

}



/* --- Form prenotazione --- */

.booking-wrapper {

    display: grid;

    grid-template-columns: 1fr 360px;

    gap: 2rem;

    align-items: start;

}

.booking-form { background: var(--white); border: 1px solid var(--beige-dark); border-radius: var(--radius); padding: 2rem; }

.booking-summary { background: var(--beige); border-radius: var(--radius); padding: 1.75rem; position: sticky; top: 80px; }

.booking-summary h3 { margin-bottom: 1rem; font-size: 1rem; }

.booking-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--beige-dark); font-size: 0.875rem; }

.booking-summary__row:last-of-type { border-bottom: none; }

.booking-summary__label { color: var(--text-muted); }

.booking-summary__value { font-weight: 500; text-align: right; }



/* --- Form elementi --- */

.form-group { margin-bottom: 1.25rem; }

.form-label {

    display: block;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--text-muted);

    margin-bottom: 0.4rem;

}

.form-control {

    width: 100%;

    padding: 0.65rem 0.9rem;

    background: var(--cream);

    border: 1px solid var(--beige-dark);

    border-radius: var(--radius);

    font-size: 0.95rem;

    font-family: var(--font-ui);

    color: var(--text);

    transition: border-color var(--transition), box-shadow var(--transition);

    appearance: none;

}

.form-control:focus {

    outline: none;

    border-color: var(--sage);

    box-shadow: 0 0 0 3px var(--sage-light);

}

.form-control::placeholder { color: var(--text-light); }

select.form-control {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A746C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 0.9rem center;

    padding-right: 2.5rem;

}

textarea.form-control { resize: vertical; min-height: 90px; }



/* Griglia slot orari */

.slots-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 0.5rem;

}

.slot-btn {

    padding: 0.45rem 0.9rem;

    border: 1px solid var(--beige-dark);

    border-radius: var(--radius);

    background: var(--cream);

    font-size: 0.85rem;

    color: var(--text);

    cursor: pointer;

    transition: all var(--transition);

}

.slot-btn:hover { border-color: var(--sage); color: var(--sage-dark); }

.slot-btn.selected { background: var(--sage); border-color: var(--sage); color: var(--white); }

.slot-btn.suboptimal { opacity: 0.65; }

.slots-empty { font-size: 0.875rem; color: var(--text-muted); padding: 0.75rem 0; }

.slots-loading { font-size: 0.875rem; color: var(--text-muted); padding: 0.75rem 0; }



/* --- Alert / messaggi --- */

.alert {

    padding: 0.875rem 1.1rem;

    border-radius: var(--radius);

    font-size: 0.9rem;

    margin-bottom: 1.25rem;

    border: 1px solid transparent;

}

.alert-success { background: #EDF4EC; border-color: #C5DCC3; color: #3A6B37; }

.alert-error   { background: #FAECEA; border-color: #E8B9B5; color: #8B3530; }

.alert-info    { background: #EDF1FA; border-color: #BCC8E8; color: #334A8B; }



/* --- Contatti --- */

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    align-items: start;

}

.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }

.contact-item h4 { margin-bottom: 0.25rem; }

.contact-item p { margin: 0; font-size: 0.925rem; }



/* --- Footer --- */

.site-footer {

    background: var(--beige);

    border-top: 1px solid var(--beige-dark);

    padding: 3.5rem 0 2rem;

    margin-top: auto;

}

.footer-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-bottom: 2.5rem;

}

.footer-col strong { display: block; margin-bottom: 0.75rem; font-family: var(--font-ui); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }

.footer-col p, .footer-col a { font-size: 0.875rem; color: var(--text-muted); display: block; margin-bottom: 0.3rem; }

.footer-col ul li a { color: var(--text-muted); }

.footer-col ul li a:hover { color: var(--sage-dark); }

.footer-bottom { border-top: 1px solid var(--beige-dark); padding-top: 1.5rem; }

.footer-bottom p { font-size: 0.8rem; color: var(--text-light); margin: 0; }



/* --- Utility --- */

.text-center { text-align: center; }

.text-muted  { color: var(--text-muted); }

.mt-1 { margin-top: 0.5rem; }

.mt-2 { margin-top: 1rem; }

.mt-3 { margin-top: 1.5rem; }

.mt-4 { margin-top: 2rem; }

.mb-2 { margin-bottom: 1rem; }

.mb-4 { margin-bottom: 2rem; }



/* Divisore decorativo */

.divider {

    width: 40px;

    height: 1px;

    background: var(--sage);

    margin: 1.25rem 0;

}



/* Badge status */

.badge {

    display: inline-block;

    padding: 0.2rem 0.6rem;

    border-radius: 20px;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}

.badge-pending   { background: #FEF3CD; color: #856404; }

.badge-confirmed { background: #D1EDD4; color: #2D6A31; }

.badge-cancelled { background: #F5E0DF; color: #8B3530; }



/* --- Responsive --- */

@media (max-width: 768px) {

    .site-header .container { position: relative; }



    .nav-toggle { display: flex; }



    .main-nav {

        display: none;

        position: absolute;

        top: 64px;

        left: 0;

        right: 0;

        background: var(--white);

        border-bottom: 1px solid var(--beige-dark);

        box-shadow: var(--shadow-md);

        padding: 1rem 1.5rem 1.5rem;

    }

    .main-nav.open { display: block; }

    .main-nav ul { flex-direction: column; gap: 0; }

    .main-nav li { border-bottom: 1px solid var(--beige); }

    .main-nav a { display: block; padding: 0.75rem 0; font-size: 1rem; border-bottom: none !important; }

    .btn-nav { margin-top: 0.75rem; display: block; text-align: center; }



    .section { padding: 3.5rem 0; }



    .booking-wrapper { grid-template-columns: 1fr; }

    .booking-summary { position: static; }



    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }



    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }



    .hero { padding: 4rem 0 3.5rem; }

    .hero-actions { flex-direction: column; align-items: center; }

}



@media (max-width: 480px) {

    .services-grid { grid-template-columns: 1fr; }

    .prices-table th:nth-child(3),

    .prices-table td:nth-child(3) { display: none; } /* nasconde colonna durata su schermi piccoli */

}