/* ═══════════════════════════════════════════════════
   ISR Global CSS — Mobile-First Unified Stylesheet
   italiasushirobot.com — v1.0 (2026-04-18)
   ═══════════════════════════════════════════════════ */

/* ═══ 1. BASE RESETS ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, svg { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ═══ 2. TOUCH TARGET MINIMUM 44px ═══ */
a, button, [role="button"], input[type="submit"], .isr-contact-btn, .isr-fab-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* ═══ 3. ISR BRAND COLORS (CSS Custom Properties) ═══ */
:root {
    --isr-orange: #FF8C00;
    --isr-orange-dark: #ea580c;
    --isr-orange-light: #fed7aa;
    --isr-orange-glow: rgba(249, 115, 22, 0.15);
    --isr-blue: #0066CC;
    --isr-green-it: #009246;
    --isr-red-it: #CE2B37;
    --isr-text: #1f2937;
    --isr-text-muted: #6b7280;
    --isr-bg: #ffffff;
    --isr-border: #e5e7eb;
    --isr-radius: 12px;
    --isr-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══ 4. TYPOGRAPHY ═══ */
body { font-family: var(--isr-font); }

/* ═══ 5. SOCIAL ICONS — PREVENT GIANT ICONS ═══ */
.social-icons a svg,
.social-links a svg,
footer a svg,
.footer-social svg,
[class*="social"] svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}
.social-icons a img,
.social-links a img,
footer a img[src*="facebook"],
footer a img[src*="instagram"],
footer a img[src*="youtube"],
footer a img[src*="linkedin"],
footer a img[src*="tiktok"] {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain;
}

/* ═══ 6. ANIMATIONS (shared across all pages) ═══ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes navSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-in; }
.animate-slide-up { animation: slideUp 0.8s ease-out; }
.animate-slide-left { animation: slideInLeft 0.8s ease-out; }
.animate-slide-right { animation: slideInRight 0.8s ease-out; }
.animate-scale { animation: scaleIn 0.6s ease-out; }

.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ═══ 7. ITALIAN FLAG BAR ═══ */
.italian-flag {
    background: linear-gradient(to right, #009246 33%, #FFFFFF 33%, #FFFFFF 66%, #CE2B37 66%);
    height: 4px;
}

/* ═══ 8. MOBILE MENU ═══ */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-menu.active { max-height: 400px; }

/* ═══ 9. STICKY CONTACT BAR (bottom bar) ═══ */
.sticky-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #FF8C00 0%, #ea7500 100%);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}
.sticky-contact-bar.hidden { transform: translateY(100%); }
.contact-btn {
    transition: all 0.3s ease;
    white-space: nowrap;
}
.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ═══ 10. HAKIRO BAR (chat input in sticky bar) ═══ */
.bar-hakiro-box { display: flex; align-items: center; gap: 10px; }
.bar-hakiro-mascot {
    width: 56px; height: 56px; flex-shrink: 0; cursor: pointer;
    animation: hakiro-bar-float 4.5s ease-in-out infinite;
}
.bar-hakiro-mascot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
    pointer-events: none;
}
.bar-hakiro-mascot:hover { animation: hakiro-bar-wiggle 0.6s ease-in-out infinite; }
@keyframes hakiro-bar-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(0); }
}
@keyframes hakiro-bar-wiggle {
    0%, 100% { transform: translateY(-3px) rotate(-4deg) scale(1.05); }
    50% { transform: translateY(-5px) rotate(4deg) scale(1.08); }
}
.bar-hakiro-form {
    flex: 1; display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.98); border-radius: 999px;
    padding: 4px 4px 4px 16px;
    min-width: 220px; max-width: 320px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.bar-hakiro-form input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13.5px; padding: 7px 0; color: #1f2937;
    font-family: var(--isr-font); min-width: 0;
}
.bar-hakiro-form input::placeholder { color: #9ca3af; }
.bar-hakiro-form button {
    width: 34px; height: 34px; border-radius: 50%;
    background: #1f2937; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.2s, background 0.2s;
    min-height: 34px; min-width: 34px;
}
.bar-hakiro-form button:hover { transform: scale(1.1); background: #111827; }

/* ═══ 11. JAPANESE PATTERN ═══ */
.japanese-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Sticky bar compact on mobile */
    .sticky-contact-bar {
        padding: 0.5rem 0.5rem;
    }
    .bar-hakiro-mascot { width: 46px; height: 46px; }
    .bar-hakiro-form { min-width: 180px; max-width: 100%; }
    .bar-hakiro-form input { font-size: 16px; } /* prevent iOS zoom */

    /* Hero video: disable on mobile for performance */
    .hero-video video,
    section.hero video,
    #hero-video {
        display: none !important;
    }

    /* Nav: ensure touch-friendly */
    nav a, nav button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Chatbot: near-fullscreen on mobile */
    .chatbot-window {
        width: calc(100vw - 16px) !important;
        height: 80vh !important;
        max-height: 600px !important;
        right: 8px !important;
        bottom: 84px !important;
        border-radius: 14px !important;
    }
    .chatbot-input {
        font-size: 16px !important; /* prevent iOS zoom */
    }

    /* Product page grid: single column on mobile */
    .hero {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .hero-img {
        height: 280px !important;
    }
    .benefits {
        grid-template-columns: 1fr !important;
    }
    .trust {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .related {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer social icons */
    footer .flex.gap-4 a,
    footer .space-x-4 a {
        padding: 8px;
    }
}

/* ═══════════════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .related {
        grid-template-columns: 1fr !important;
    }
    .hi-actions {
        flex-direction: column !important;
    }
    .hi-actions .btn-p,
    .hi-actions .btn-s,
    .hi-actions .share-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ═══════════════════════════════════════════════════
   CATEGORY SCROLLER — ensure hidden on desktop
   ═══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .isr-dial { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   PRINT — hide non-essential elements
   ═══════════════════════════════════════════════════ */
@media print {
    .sticky-contact-bar,
    .isr-contact-sidebar,
    .isr-fab-toggle,
    .isr-fab-menu,
    .hakiro-floating,
    .chatbot-window,
    .chatbot-button,
    .isr-dial,
    nav { display: none !important; }
}