html { scroll-behavior: smooth; }
body { background-color: #F2D8B1; color: #5C2612; }

/* De header is fixed (blijft altijd zichtbaar bovenin) en overlapt anders elk
   sectie-anker (bv. #contact) waar "Offerte aanvragen"-links en de stap-
   overgangen in het formulier naartoe scrollen. Met scroll-margin-top komt
   de inhoud netjes ónder de header te staan, zowel bij een gewone anker-link
   als bij scrollIntoView() vanuit JS. 96px = hoogte van de header op de
   breedste stand (md:h-24), dus ruim genoeg op elk schermformaat. */
[id] { scroll-margin-top: 96px; }

.hero-gradient {
    background: linear-gradient(rgba(92, 38, 18, 0.7), rgba(92, 38, 18, 0.4)), url('../images/hero-pizza.jpg');
    background-size: cover;
    background-position: center;
}

.section-beige { background-color: #F2D8B1; }
.section-rust { background-color: #A64B29; color: #F2D8B1; }

.faq-item { background: rgba(235, 200, 155, 0.3); border: 1px solid rgba(92, 38, 18, 0.1); }
.faq-btn:hover { background: rgba(235, 200, 155, 0.5); }

input, textarea { background-color: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(92, 38, 18, 0.2) !important; color: #5C2612 !important; }
input:focus, textarea:focus { border-color: #A64B29 !important; ring: 2px solid #A64B29; outline: none; }

/* Geen spinner-pijltjes bij aantal-velden. Voorkomt ook dat scrollen
   over de pagina per ongeluk de waarde wijzigt als de cursor er
   toevallig boven staat. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Tooltip Code met subtiele transitie */
.tooltip-content {
    transition: all 0.2s ease-in-out;
    transform: translateY(10px);
}

.group:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

select {
    -webkit-appearance: none;
    appearance: none;
}

select option {
    background-color: #F2D8B1;
    color: #5C2612;
}

/* Verbergt de scrollbar van de horizontale reel-strip, blijft wel scrollbaar */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Subtiele scroll-hint (mobiel/tablet): klein pijltje dat zachtjes heen en
   weer beweegt om te laten zien dat de fotorij/video-rij horizontaal
   doorscrolt. Verdwijnt zodra bezoeker zelf een keer gescrold heeft. */
@keyframes scroll-hint-nudge {
    0%, 100% { transform: translateX(0); opacity: 0.9; }
    50% { transform: translateX(6px); opacity: 0.4; }
}
.scroll-hint-arrow { animation: scroll-hint-nudge 1.4s ease-in-out infinite; }
.scroll-hint { transition: opacity 0.3s ease-out; }