/* -----------------------------------------------------------------------------
   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.) */
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: 100 !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;
}