/* ============================================
   GLOBAL SAFE AREA SYSTEM
   Supports notches, dynamic island, gesture areas
   on iPhone, iPad, Android, foldables
   ============================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* iOS < 11.2 fallback */
@supports not (padding: env(safe-area-inset-top)) {
    :root {
        --safe-top: 0px;
        --safe-right: 0px;
        --safe-bottom: 0px;
        --safe-left: 0px;
    }
}

/* ============================================
   BODY - Ensure safe zone on all sides
   ============================================ */
body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
}

/* ============================================
   NAVBAR - Fixed top notch/dynamic island safe area
   ============================================ */
.navbar {
    padding-top: calc(1.25rem + var(--safe-top));
    padding-left: calc(var(--safe-left));
    padding-right: calc(var(--safe-right));
}

.navbar.scrolled {
    padding-top: calc(0.875rem + var(--safe-top));
}

/* Mobile menu - respect safe area, prevent overflow */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-left: max(0px, var(--safe-left));
        padding-right: max(0px, var(--safe-right));
    }

    .navbar-toggler {
        margin-right: max(0px, var(--safe-right));
    }
}

/* ============================================
   HERO - Respect top safe area
   ============================================ */
.hero {
    padding-top: calc(80px + var(--safe-top));
}

@media (max-width: 767.98px) {
    .hero {
        padding-top: max(120px, calc(80px + var(--safe-top)));
    }
}

/* ============================================
   FOOTER - Respect bottom safe area for gesture nav
   ============================================ */
.footer__bottom {
    padding-bottom: calc(var(--space-8) + var(--safe-bottom));
    padding-left: calc(var(--safe-left));
    padding-right: calc(var(--safe-right));
}

.footer__main {
    padding-left: calc(var(--safe-left));
    padding-right: calc(var(--safe-right));
}

/* ============================================
   FLOATING ACTION BUTTONS - Avoid gesture areas
   ============================================ */
.back-to-top {
    bottom: calc(2.5rem + var(--safe-bottom));
    right: calc(2.5rem + var(--safe-right));
}

.floating-whatsapp {
    bottom: calc(2.5rem + var(--safe-bottom));
    left: calc(2.5rem + var(--safe-left));
}

.rfq-float {
    bottom: calc(2.5rem + var(--safe-bottom));
    right: calc(2.5rem + var(--safe-right));
}

.rfq-notification {
    bottom: calc(7.5rem + var(--safe-bottom));
    right: calc(2.5rem + var(--safe-right));
}

/* ============================================
   CONTAINER - Extra breathing room on mobile
   ============================================ */
@media (max-width: 767.98px) {
    .container {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }
}

/* ============================================
   HERO STATS ON MOBILE - Prevent edge hugging
   ============================================ */
@media (max-width: 767.98px) {
    .hero__stats {
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
}

/* ============================================
   FORMS ON MOBILE - Input breathing room
   ============================================ */
@media (max-width: 767.98px) {
    .rfq-form-wrapper {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .contact-form-wrapper {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .contact-info-card {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .products-toolbar {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .rfq-cart__header,
    .rfq-cart__body,
    .quick-contact {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }
}

/* ============================================
   PRODUCT CARDS - Spacing on small screens
   ============================================ */
@media (max-width: 575.98px) {
    .product-card__content {
        padding: var(--space-4) max(1rem, var(--safe-left));
    }

    .product-card__badge {
        left: calc(1rem + var(--safe-left));
    }
}

/* ============================================
   MINIMUM TOUCH TARGETS (44x44px)
   ============================================ */
.page-link {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__social-link {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 575.98px) {
    .btn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .hero__actions .btn,
    .contact-cta .btn {
        min-height: 48px;
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
    }
}

/* ============================================
   LANDSCAPE MODE - Extra side safe area
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .navbar {
        padding-top: max(var(--safe-top), 0.25rem);
        padding-bottom: max(var(--safe-top), 0.25rem);
        padding-left: max(var(--safe-left), 0.75rem);
        padding-right: max(var(--safe-right), 0.75rem);
    }

    .hero {
        padding-top: calc(60px + var(--safe-top));
        min-height: auto;
        padding-bottom: 2rem;
    }
}

/* ============================================
   TABLET SAFE AREA (768px-991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        padding-left: max(1.5rem, var(--safe-left));
        padding-right: max(1.5rem, var(--safe-right));
    }
}

/* ============================================
   REDUCED MOTION - Safe area still applies
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .floating-whatsapp,
    .rfq-float {
        transition: none;
    }
}