/* ============================================================
   Fetta Street v2 — design system (staging /v2/)
   Migliora il design base: icone SVG, card moderne, form,
   orari smart, mappa sticky. Nessun conflitto con styles.css.
   ============================================================ */

/* ---------- HERO ---------- */
.v2-hero .page-hero {
    padding: 150px 24px 90px;
}
.v2-hero .page-hero::before {
    background: linear-gradient(180deg, rgba(38,20,12,.62) 0%, rgba(38,20,12,.38) 55%, rgba(38,20,12,.72) 100%);
}
.v2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--gold-light);
    margin-bottom: 14px;
}
.v2-kicker::before,
.v2-kicker::after {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.v2-kicker::after {
    background: linear-gradient(90deg, var(--gold), transparent);
}
.v2-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    letter-spacing: -.02em;
}

/* ---------- ICONE nei tile ---------- */
.v2-contact .contact-card-icon svg {
    width: 24px;
    height: 24px;
}
.v2-contact .contact-card-icon.red    { background: linear-gradient(135deg, #E03030, #A3161B); }
.v2-contact .contact-card-icon.whats  { background: linear-gradient(135deg, #2BD36B, #128C7E); }
.v2-contact .contact-card-icon.gold   { background: linear-gradient(135deg, #F0C86A, #C8901B); }
.v2-contact .contact-card-icon.insta  { background: linear-gradient(135deg, #F77737, #E1306C 55%, #833AB4); }
.v2-contact .contact-card-icon.fb     { background: linear-gradient(135deg, #4C9AFF, #1877F2); }
.v2-contact .contact-card-icon.clock  { background: linear-gradient(135deg, #F0C86A, #DAA520); }

/* ---------- GRIGLIA CONTATTI v2 ---------- */
.v2-contact .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 40px;
}
.v2-contact .contact-card {
    background: #fff;
    border: 1px solid rgba(62,42,30,.09);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(62,42,30,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.v2-contact .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(62,42,30,.12);
}
.v2-contact .contact-card-icon {
    border-radius: 14px;
}
.v2-cards-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ---------- SOCIAL PILLS ---------- */
.v2-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}
.v2-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 50px;
    border: 1px solid rgba(62,42,30,.12);
    background: #fff;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(62,42,30,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.v2-social-pill svg { width: 18px; height: 18px; }
.v2-social-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(62,42,30,.12);
    border-color: var(--red);
}
.v2-social-pill.ig:hover svg { fill: var(--ig, #E1306C); }
.v2-social-pill.fb:hover svg { fill: #1877F2; }

/* ---------- ORARI SMART ---------- */
.v2-hours-card {
    background: #fff;
    border: 1px solid rgba(62,42,30,.09);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(62,42,30,.05);
}
.v2-hours-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.v2-hours-head svg { width: 22px; height: 22px; color: var(--gold); }
.v2-hours-head h4 {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-light);
}
.v2-hours-table { width: 100%; border-collapse: collapse; }
.v2-hours-table td {
    padding: 10px 12px;
    font-size: .98rem;
    border-bottom: 1px solid rgba(62,42,30,.06);
}
.v2-hours-table tr:last-child td { border-bottom: none; }
.v2-hours-table .day { font-weight: 600; color: var(--text-dark); }
.v2-hours-table .time { text-align: right; color: var(--text-light); font-weight: 500; }
.v2-hours-table tr.today td {
    background: var(--red);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
}
.v2-hours-table tr.today .time { color: var(--gold-light); }
.v2-hours-note {
    margin-top: 12px;
    font-size: .85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-badge-today {
    display: inline-block;
    margin-left: 8px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    background: var(--red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* ---------- MAPPA ---------- */
.v2-map-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(62,42,30,.16);
    border: 1px solid rgba(62,42,30,.08);
    position: sticky;
    top: 96px;
}
.v2-map-card iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}
.v2-map-bar {
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.v2-map-bar-addr { display: flex; gap: 10px; align-items: center; }
.v2-map-bar-addr svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }
.v2-map-bar-addr p { font-weight: 700; font-size: .95rem; color: var(--text-dark); line-height: 1.4; }
.v2-map-bar-addr span { display: block; font-weight: 400; color: var(--text-light); font-size: .85rem; }
.v2-map-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.v2-map-actions .btn { padding: 10px 18px; font-size: .88rem; }
.v2-map-actions .btn-outline { border-color: rgba(196,30,36,.35); color: var(--red); background: transparent; }
.v2-map-actions .btn-outline:hover { background: rgba(196,30,36,.06); border-color: var(--red); }
.v2-map-actions .btn-outline svg { width: 16px; height: 16px; }

/* ---------- FORM ---------- */
.v2-form-section { background: var(--cream-dark); }
.v2-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.v2-form-card {
    background: #fff;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 12px 40px rgba(62,42,30,.10);
    border: 1px solid rgba(62,42,30,.08);
}
.v2-form-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-dark);
}
.v2-form-card .form-sub {
    font-size: .95rem;
    color: var(--text-light);
    margin-bottom: 24px;
}
.v2-field { margin-bottom: 18px; }
.v2-field label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 8px;
}
.v2-field input,
.v2-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--cream);
    border: 1.5px solid rgba(62,42,30,.12);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.v2-field input:focus,
.v2-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(196,30,36,.12);
}
.v2-field textarea { min-height: 130px; resize: vertical; }
.v2-field-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.v2-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.v2-form-actions .btn svg { width: 18px; height: 18px; }
.v2-btn-green { background: #25D366; color: #fff; box-shadow: 0 4px 18px rgba(37,211,102,.35); }
.v2-btn-green:hover { background: #1EBE5B; box-shadow: 0 6px 24px rgba(37,211,102,.45); }
.v2-alert {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 22px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.v2-alert svg { width: 20px; height: 20px; flex-shrink: 0; }
.v2-alert-ok { background: #E7F8EE; color: #137A3A; border: 1px solid #B9E8CC; }
.v2-alert-err { background: #FDEBEC; color: #A3161B; border: 1px solid #F4C6C9; }
.v2-form-side {
    background: var(--brown);
    border-radius: 20px;
    padding: 34px;
    color: #fff;
    box-shadow: 0 12px 40px rgba(62,42,30,.18);
}
.v2-form-side h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 18px; }
.v2-form-side ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.v2-form-side li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.85); }
.v2-form-side li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-light); margin-top: 1px; }
.v2-form-side strong { color: #fff; }

/* ---------- CTA ---------- */
.v2-cta .btn svg { width: 18px; height: 18px; }
.v2-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--gold-light);
    margin-bottom: 10px;
}

/* ---------- BADGE senza emoji ---------- */
.v2-badge-svg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v2-badge-svg svg { width: 18px; height: 18px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .v2-contact .contact-grid { grid-template-columns: 1fr; }
    .v2-form-grid { grid-template-columns: 1fr; }
    .v2-map-card { position: static; }
    .v2-map-card iframe { height: 340px; }
}
@media (max-width: 600px) {
    .v2-cards-2col { grid-template-columns: 1fr; }
    .v2-form-card, .v2-form-side { padding: 24px 20px; }
    .v2-map-actions .btn { width: 100%; justify-content: center; }
}


/* ---------- ORARI FULL WIDTH ---------- */
.v2-hours-full {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid rgba(62,42,30,.09);
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 2px 10px rgba(62,42,30,.05);
    margin-top: 44px;
}
.v2-hours-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.v2-hours-day {
    position: relative;
    border-radius: 12px;
    padding: 16px 8px 14px;
    text-align: center;
    background: rgba(62,42,30,.045);
    border: 1px solid rgba(62,42,30,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.v2-hours-day-name {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 6px;
}
.v2-hours-day-time {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-dark);
}
.v2-hours-day.today {
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 10px 24px rgba(198,40,40,.28);
}
.v2-hours-day.today .v2-hours-day-name,
.v2-hours-day.today .v2-hours-day-time { color: #fff; }
.v2-hours-day.today .v2-badge-today {
    position: absolute;
    top: -10px;
    right: 8px;
    margin-left: 0;
    background: var(--gold);
    color: #3E2A1E;
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
@media (max-width: 768px) {
    .v2-hours-days { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .v2-hours-days { grid-template-columns: 1fr; }
}