/* -----------------------------------------------------------------------------
   PowerTech Inverters - Native app UI chrome only
   These rules only apply when body has .is-native-app / .is-capacitor-app /
   .show-mobile-tab-bar. They do NOT affect the normal desktop/PWA website.
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Bottom tab bar (native app only)
   ----------------------------------------------------------------------------- */
.pt-mobile-tabbar {
    display: none;
}

body.is-native-app .pt-mobile-tabbar,
body.is-capacitor-app .pt-mobile-tabbar,
body.show-mobile-tab-bar .pt-mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.pt-mobile-tabbar__list {
    display: flex;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-mobile-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    color: #6b7280;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s ease;
    padding-top: 6px;
    position: relative;
}

.pt-mobile-tabbar__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: inherit;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.pt-mobile-tabbar__item i {
    font-size: 20px;
    margin-bottom: 1px;
}

.pt-mobile-tabbar__item.active,
.pt-mobile-tabbar__item:active {
    color: #2563eb;
}

.pt-mobile-tabbar__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.pt-mobile-tabbar__badge.visible {
    opacity: 1;
    transform: scale(1);
}

body:has(.pt-mobile-tabbar) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}

body:has(.pt-mobile-tabbar) .main-content,
body:has(.pt-mobile-tabbar) main,
body:has(.pt-mobile-tabbar) .page-wrapper {
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}

/* -----------------------------------------------------------------------------
   Header / footer / marketing cleanup (native app only)
   ----------------------------------------------------------------------------- */
body.is-native-app .footer,
body.is-native-app .footer-v2,
body.is-capacitor-app .footer,
body.is-capacitor-app .footer-v2,
body.show-mobile-tab-bar .footer,
body.show-mobile-tab-bar .footer-v2,
body.is-native-app .stats-bar,
body.is-native-app .how-it-works-v2,
body.is-native-app .platform-features-v2,
body.is-native-app .faq-section,
body.is-native-app .newsletter.newsletter-v2,
body.is-capacitor-app .stats-bar,
body.is-capacitor-app .how-it-works-v2,
body.is-capacitor-app .platform-features-v2,
body.is-capacitor-app .faq-section,
body.is-capacitor-app .newsletter.newsletter-v2,
body.show-mobile-tab-bar .stats-bar,
body.show-mobile-tab-bar .how-it-works-v2,
body.show-mobile-tab-bar .platform-features-v2,
body.show-mobile-tab-bar .faq-section,
body.show-mobile-tab-bar .newsletter.newsletter-v2 {
    display: none !important;
}

/* Checkout page has its own footer variant (.checkout-footer) — hide it in the app too. */
body.is-native-app .checkout-footer,
body.is-capacitor-app .checkout-footer,
body.show-mobile-tab-bar .checkout-footer {
    display: none !important;
}

body.is-native-app header .header-right,
body.is-native-app .navbar .header-right,
body.is-native-app header .nav-actions,
body.is-native-app .navbar .nav-actions,
body.is-native-app header .cart-icon,
body.is-native-app .navbar .cart-icon,
body.is-native-app header .user-menu,
body.is-native-app .navbar .user-menu,
body.is-capacitor-app header .header-right,
body.is-capacitor-app .navbar .header-right,
body.is-capacitor-app header .nav-actions,
body.is-capacitor-app .navbar .nav-actions,
body.is-capacitor-app header .cart-icon,
body.is-capacitor-app .navbar .cart-icon,
body.is-capacitor-app header .user-menu,
body.is-capacitor-app .navbar .user-menu,
body.show-mobile-tab-bar header .header-right,
body.show-mobile-tab-bar .navbar .header-right,
body.show-mobile-tab-bar header .nav-actions,
body.show-mobile-tab-bar .navbar .nav-actions,
body.show-mobile-tab-bar header .cart-icon,
body.show-mobile-tab-bar .navbar .cart-icon,
body.show-mobile-tab-bar header .user-menu,
body.show-mobile-tab-bar .navbar .user-menu {
    display: none !important;
}

body.is-native-app .mobile-auth-header,
body.is-capacitor-app .mobile-auth-header,
body.show-mobile-tab-bar .mobile-auth-header {
    display: flex;
}

body.is-native-app .desktop-auth-header,
body.is-capacitor-app .desktop-auth-header,
body.show-mobile-tab-bar .desktop-auth-header {
    display: none;
}

/* -----------------------------------------------------------------------------
   Mobile auth header (native app only)
   ----------------------------------------------------------------------------- */
.pt-mobile-auth-bar {
    display: none;
}

body.is-native-app .pt-mobile-auth-bar,
body.is-capacitor-app .pt-mobile-auth-bar,
body.show-mobile-tab-bar .pt-mobile-auth-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pt-mobile-auth-bar__back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    text-decoration: none;
    font-size: 18px;
}

.pt-mobile-auth-bar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
}

.pt-mobile-auth-bar__brand img {
    height: 28px;
    width: auto;
}

/* -----------------------------------------------------------------------------
   Auth pages in native app (login/register)
   ----------------------------------------------------------------------------- */
body.is-native-app .auth-wrapper,
body.is-capacitor-app .auth-wrapper,
body.show-mobile-tab-bar .auth-wrapper {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    padding-top: 56px;
    padding-bottom: 0;
    overflow: visible !important;
}

body.is-native-app .auth-brand,
body.is-capacitor-app .auth-brand,
body.show-mobile-tab-bar .auth-brand {
    flex: none !important;
    padding: 24px 20px !important;
    min-height: auto !important;
}

body.is-native-app .auth-brand .brand-illustration,
body.is-capacitor-app .auth-brand .brand-illustration,
body.show-mobile-tab-bar .auth-brand .brand-illustration,
body.is-native-app .auth-brand .brand-badges,
body.is-capacitor-app .auth-brand .brand-badges,
body.show-mobile-tab-bar .auth-brand .brand-badges {
    display: none !important;
}

body.is-native-app .auth-form-panel,
body.is-capacitor-app .auth-form-panel,
body.show-mobile-tab-bar .auth-form-panel {
    overflow-y: visible !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

body.is-native-app .auth-form-container,
body.is-capacitor-app .auth-form-container,
body.show-mobile-tab-bar .auth-form-container {
    padding: 24px 20px !important;
    margin: 0 auto !important;
}

/* -----------------------------------------------------------------------------
   Floating action buttons (native app only)
   ----------------------------------------------------------------------------- */
body.is-native-app .whatsapp-float,
body.is-capacitor-app .whatsapp-float,
body.show-mobile-tab-bar .whatsapp-float {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* -----------------------------------------------------------------------------
   AI assistant / chat bubble removal (native app only)
   ----------------------------------------------------------------------------- */
body.is-native-app .ai-assistant-button,
body.is-native-app .ai-assistant-container,
body.is-native-app .chat-bubble,
body.is-native-app #ai-assistant,
body.is-native-app [class*="ai-assistant"],
body.is-capacitor-app .ai-assistant-button,
body.is-capacitor-app .ai-assistant-container,
body.is-capacitor-app .chat-bubble,
body.is-capacitor-app #ai-assistant,
body.is-capacitor-app [class*="ai-assistant"],
body.show-mobile-tab-bar .ai-assistant-button,
body.show-mobile-tab-bar .ai-assistant-container,
body.show-mobile-tab-bar .chat-bubble,
body.show-mobile-tab-bar #ai-assistant,
body.show-mobile-tab-bar [class*="ai-assistant"] {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   Auth layout tweaks (native app only)
   ----------------------------------------------------------------------------- */
body.is-native-app .auth-split,
body.is-capacitor-app .auth-split,
body.show-mobile-tab-bar .auth-split {
    flex-direction: column;
}

body.is-native-app .auth-split .auth-visual,
body.is-capacitor-app .auth-split .auth-visual,
body.show-mobile-tab-bar .auth-split .auth-visual {
    display: none;
}

body.is-native-app .auth-card,
body.is-capacitor-app .auth-card,
body.show-mobile-tab-bar .auth-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    padding: 1.5rem;
}

body.is-native-app .auth-container,
body.is-capacitor-app .auth-container,
body.show-mobile-tab-bar .auth-container {
    padding: 0;
    background: #ffffff;
}

/* App: the shopping cart lives in the bottom tab bar, so hide the redundant
   header cart icon on home / calculator / cart pages. The existing rule above
   targets .cart-icon, but the actual header markup uses .cart-btn, so this
   is the one that takes effect. */
body.is-native-app .cart-btn,
body.is-capacitor-app .cart-btn,
body.show-mobile-tab-bar .cart-btn {
    display: none !important;
}

/* App: pin the calculator header to the viewport. The calculator page sets
   .header to position: sticky (inline), which scrolls away unreliably inside
   the native WebView. Switch to position: fixed in the app so the bar always
   stays visible, and pad the hero section so its content doesn't slide under
   the now out-of-flow fixed bar. (Specificity beats the inline .header rule
   even though both carry !important.) */
/* z-index MUST stay >= 999. The off-canvas nav drawer (.navbar-center, the
   mobile menu panel) lives INSIDE .header and is position:fixed z-index:999;
   the .mobile-overlay backdrop that dims the page behind the menu is
   position:fixed z-index:998 appended to <body>. Because .header is
   position:fixed + a non-auto z-index, it establishes a STACKING CONTEXT that
   traps the drawer's 999 inside it — so the whole .header layer competes with
   the overlay in the ROOT stacking context. The website's own .header is
   z-index:1000 (style.css ~line 48), so there the header layer (1000) paints
   above the backdrop (998) and the drawer shows on top of the mask. Setting
   this to 100 (a previous value) dropped the header layer BELOW the 998
   backdrop, so opening the menu only painted the dark mask with the drawer
   buried under it ("shadow mask covers the page" in the APK). 1000 mirrors
   the website and is still below the booking/modal layers (1500/2000/10000),
   so modals correctly cover the header. */
body.is-native-app .header,
body.is-capacitor-app .header,
body.show-mobile-tab-bar .header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 1000 !important;
}
body.is-native-app .calc-hero,
body.is-capacitor-app .calc-hero,
body.show-mobile-tab-bar .calc-hero {
    padding-top: calc(40px + 56px + env(safe-area-inset-top)) !important;
}

/* App: the booking / message modal is vertically centered inside the fixed
   .modal overlay, which covers the bottom tab bar. With max-height 92/96vh the
   modal's sticky footer (.booking-nav) ends up hidden behind the tab bar.
   Shrink the modal so its bottom clears the tab bar (the modal is centered,
   so the same inset is left top and bottom). */
body.is-native-app .booking-modal-content,
body.is-capacitor-app .booking-modal-content,
body.show-mobile-tab-bar .booking-modal-content {
    max-height: calc(100vh - 2 * calc(56px + env(safe-area-inset-bottom))) !important;
}

/* App: the "Download App" homepage card is website-only — it's pointless
   inside the app (you're already running it) and would link to the very APK
   already installed. Hide it on native surfaces. The admin app:false flag
   also hides it once home_sections is saved; this rule guarantees it on
   installs that have no saved home_sections config. */
body.is-native-app .download-app,
body.is-capacitor-app .download-app,
body.show-mobile-tab-bar .download-app {
    display: none !important;
}