/* ================================================================
   native-ios-fix.css — Corrections specifiques iOS pour Capacitor
   v3 — 2026-02-18 — Correct selectors from bundle analysis
   ================================================================ */

:root {
    --keyboard-height: 0px;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

/* Ensure body and html have the same dark background — no gap at top */
html, body {
    background-color: #0F1314 !important;
}

/* ================================================================
   FIX #1 : ECRANS TROP BAS — Proper safe-area handling
   contentInset:'never' → we manage safe areas ourselves
   ================================================================ */

/* Main app container: add safe-area top padding, remove ring/border line */
#root > div {
    padding-top: env(safe-area-inset-top, 0px) !important;
    --tw-ring-shadow: none !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* Pages that already have top padding — reduce since safe area handles it */
#root [class*="pt-6"],
#root [class*="pt-8"],
#root [class*="pt-10"],
#root [class*="pt-12"] {
    padding-top: 0.5rem !important;
}

/* ================================================================
   FIX #2 : LOGO SURDIMENSIONNE a l'ouverture
   Landing page logo h-[90px] → 50px
   ================================================================ */

/* Logo image on landing page header — targets alt="Ekonom-IA" */
img[alt="Ekonom-IA"] {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Robot Eko on landing page — reduce container size */
.relative.z-20 {
    transform: scale(0.75);
}

/* Reduce the glow behind robot */
.absolute.w-48 {
    width: 8rem !important;
    height: 8rem !important;
}
.absolute.w-36 {
    width: 7rem !important;
    height: 7rem !important;
}

/* ================================================================
   FIX #3 : BOTTOM NAV TROP LARGE — Resserrer
   Actual class: "absolute bottom-5 left-4 right-4 z-50"
   ================================================================ */

/* The nav dock wrapper — bottom-5 not bottom-6 */
#root .absolute[class*="bottom-5"][class*="left-4"][class*="right-4"] {
    left: 1.5rem !important;   /* 24px instead of 16px */
    right: 1.5rem !important;  /* 24px instead of 16px */
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* The glass-dock nav itself */
.glass-dock {
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

/* ================================================================
   FIX #4 : CLAVIER iOS — QUAND OUVERT
   ================================================================ */
body.keyboard-open #legal-footer,
body.keyboard-open #cookie-banner {
    display: none !important;
}

body.keyboard-open #root > div {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ================================================================
   FIX #5 : CAMERA PAGE — Video element styles
   The React app sets display:none on the <video> until play() resolves,
   but iOS WKWebView can't render frames on a hidden video (err=-12710).
   Fix: force video always visible, use opacity for show/hide instead.
   ================================================================ */

/* Force video in scan viewfinder to always be display:block */
.scan-viewfinder video,
[class*="scan-viewfinder"] video,
[class*="aspect-square"] video {
    display: block !important;
    opacity: 1 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: #000;
}

/* All other videos: hardware acceleration */
video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

video::-webkit-media-controls {
    display: none !important;
}

/* Camera permission fallback message */
.camera-permission-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    padding: 2rem;
    background: rgba(0,0,0,0.8);
    z-index: 10;
}

/* FIX #6 : Legal footer removed — links now injected in profile page via native-ios-fix.js */

/* ================================================================
   FIX #7 : LANDING PAGE — Push button + slogans above footer
   The CTA container has: "p-5 pb-10 space-y-5 relative z-10 animate-slide-up"
   We need to push it up by increasing bottom padding
   ================================================================ */

/* Target the bottom CTA section on landing page */
/* The button section with space-y-5 + animate-slide-up at the bottom */
[class*="animate-slide-up"][class*="space-y-5"][class*="pb-10"] {
    padding-bottom: 5rem !important;  /* 80px = raise content above footer area */
}

/* Also target via the parent landing page div */
/* Landing page root: h-full text-white font-sans flex flex-col relative overflow-hidden */
#root > div[class*="h-full"][class*="flex-col"][class*="overflow-hidden"] > [class*="space-y-5"][class*="pb-10"] {
    padding-bottom: 5rem !important;
}

/* Compact spacing between slogans if needed */
[class*="animate-slide-up"][class*="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important;
}

/* ================================================================
   FIX #8 : MERCHANT PAGES — Ensure bottom padding for scrollable content
   Prevent content from being hidden behind bottom nav dock
   ================================================================ */
#root [class*="pb-24"] {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
}