/****
 * Cribz PWA — styles.css
 * ------------------------
 * This file contains styles that are ONLY loaded when the site is running 
 * as a Progressive Web App (standalone mode).
 * 
 * Loaded conditionally by: pwa.js
 * Injected via: cribz-pwa plugin
 *
 * Contents:
 * - Bottom nav bar styling for mobile app UI
 * - Font Awesome icon sizing and hover states
 * - Extra bottom padding to prevent content overlap with nav
 * 
 * Do NOT enqueue this directly in WordPress.
 * It is only injected dynamically by pwa.js if the app is in PWA mode.
 */


/**
 * Cribz PWA — styles.css
 * ------------------------
 * Loaded dynamically in standalone PWA mode only.
 */

/* Kill lightGallery full screen mode - - check in a TestFlight build or local Xcode simulator. (in JS code too) 
:root[data-pwa="true"] .wpl-gallery-pshow li {
  pointer-events: none !important;
}*/


/********************************************/
/***** ADJUST TOP - SAFE AREA FOR APP *****/
/********************************************/

/*html.capacitor-app #masthead {
  padding-top: env(safe-area-inset-top, 0px);
}*/

/* located in custom-styles.css
/*html.capacitor-app .site-header { 
  padding-top: 40px !important; 
}*/

/* ----------------------------------------------------
   PWA-only header tweaks
   Hide the desktop / mobile primary menu in the app
----------------------------------------------------- */

/* Hide Mega Menu toggle + shift logo in PWA / Capacitor app */

/* PWA (data-pwa flag from pwa.js) */
:root[data-pwa="true"] .mega-menu-toggle {
  display: none !important;
}

:root[data-pwa="true"] .header__branding {
  left: -40px !important;
}

/* Capacitor native wrapper (extra safety for the iOS app shell) */
html.capacitor-app .mega-menu-toggle {
  display: none !important;
}

html.capacitor-app .header__branding {
  left: -40px !important;
}

/******************************************/


@media (max-width: 768px) {
   html.capacitor-app #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
padding-top: 60px!important;
    }
}

/* property image modal */
html.capacitor-app .pswp__top-bar {
  padding-top: 60px!important;
  visibility: hidden!important; /* lets try hiding the top bar for now */
}

/*html.capacitor-app .pswp {
  padding-top: env(safe-area-inset-top, 40px);
  background-color: rgba(0, 0, 0, 0.95);
} */ 

/* my saved properties share modal */
html.capacitor-app .share-modal-content {
  margin-top: 100px!important;
}

/********************************************/
/********************************************/

html.capacitor-app .header-friend-requests .msg-drop::after {
  display: none !important;
  content: none !important;
}

html.capacitor-app .header-messenger-box .msg-drop::after {
  display: none !important;
  content: none !important;
}

html.capacitor-app .header-notification-box .msg-drop::after {
  display: none !important;
  content: none !important;
}

/* profile width - full viewing width */
html.capacitor-app .um-profile.um-viewing {
  width: 100vw;
  margin-left: -15px!important;
  margin-right: -15px!important;
}

.um-members-overlay .um-ajax-loading { /* center the loader */
    left: calc(50% - 1.25em)!important;
    top: calc(50% - 1.75em)!important;
}


/* Mortgage Wizard - remove top space */
:root[data-pwa="true"] #post-6988 .entry-header {
display: none!important;
}

/**** ACTIVITY PAGE ****/
/* post-1954 activity page container */
:root[data-pwa="true"] #post-1954 .container-card-content {
padding: 0!important; 
}

:root[data-pwa="true"] #post-1954 .entry-header{
display: none!important;
}

:root[data-pwa="true"] #um_activity_trending_tags-5 {
  border: none!important;
  border-radius: 0px!important;
}

:root[data-theme='dark'] #um_activity_trending_tags-5 {
  border: none!important;
  border-radius: 0px!important;
}

/* UM MODAL - activity wall photos */
:root[data-pwa="true"] .um-modal-close {
    padding: 80px 40px!important;
}




/* For Modal - kill light Gallery on PWA */ 
:root[data-pwa="true"] .lg-outer,
:root[data-pwa="true"] .lg-backdrop {
  display: none !important;
  pointer-events: none !important;
}

:root[data-pwa="true"] [id^="wpl_gallery_wrapper-"] {
  width: 100vw !important;
  margin-left: -12px !important;
}

/*** end modal ***/

:root[data-pwa="true"] .site-img-logo {
  transition: transform 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
}

:root[data-pwa="true"] .site-img-logo.pwa-animate {
  animation: logoPopFlash 0.5s ease forwards !important;
}

@keyframes logoPopFlash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

:root[data-pwa="true"] .cribz-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  background: rgba(17, 17, 17, 0.8); /* translucent black */
  padding: 4px 10px 20px 10px;
  z-index: 9999;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* lighter translucent line */
  backdrop-filter: blur(6px); /* optional blur for a glassy effect */
}

:root[data-pwa="true"] .cribz-bottom-nav *,
:root[data-pwa="true"] .cribz-bottom-nav *::before,
:root[data-pwa="true"] .cribz-bottom-nav *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

:root[data-pwa="true"] .cribz-bottom-nav a {
  color: #fff;
  font-size: 22px;
  width: 64px;
  height: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px; /* Optional for better thumb feel */
  touch-action: manipulation;
  text-decoration: none !important;
}

:root[data-pwa="true"] .cribz-bottom-nav a i {
  text-decoration: none !important;
}

:root[data-pwa="true"] .cribz-bottom-nav a:active {
  color: #ff4500;
  /*transform: scale(1.2);*/
}

:root[data-pwa="true"] .cribz-bottom-nav button {
  width: 64px!important;
  height: 64px!important;
  padding: 0;
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  border-radius: 8px; /* Optional for better thumb feel */
  touch-action: manipulation;
}

:root[data-pwa="true"] .cribz-bottom-nav button i {
  font-size: 22px;
  transition: color 0.2s ease;
}


:root[data-pwa="true"] .cribz-bottom-nav button i:active {
  color: #ff4500;
  /*transform: scale(1.2);*/
}

:root[data-pwa="true"] .cribz-bottom-nav a,
:root[data-pwa="true"] .cribz-bottom-nav button {
  transition: transform 0.2s ease;
}

:root[data-pwa="true"] .cribz-bottom-nav .tapped {
  animation: navBounce 0.3s ease;
}

@keyframes navBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.20); }
  60%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}

:root[data-pwa="true"] .cribz-bottom-nav a:hover,
:root[data-pwa="true"] .cribz-bottom-nav button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Prevent iOS tap highlight (blue flash) */
:root[data-pwa="true"] .cribz-bottom-nav a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Prevent visual shrink/flicker */
:root[data-pwa="true"] .cribz-bottom-nav a,
:root[data-pwa="true"] .cribz-bottom-nav button {
  transition: transform 0.1s ease;
}

:root[data-pwa="true"] .cribz-bottom-nav a:active,
:root[data-pwa="true"] .cribz-bottom-nav button:active {
  transform: none;
}
/* blue flash fix end - - - could cause other css issues */


/* AI Drawer */

:root[data-pwa="true"] .cribz-ai-drawer {
  position: fixed;
  bottom: -100vh;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px 20px 30px 20px;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  z-index: 10002;
  transition: bottom 0.3s ease-in-out;
}


/* ===  CRIBZ DRAWER === */
:root[data-pwa="true"] .cribz-drawer {
  position: fixed;
  bottom: -100vh;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px 20px 30px 20px;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  z-index: 10002;
  transition: bottom 0.3s ease-in-out;
}

:root[data-pwa="true"] .cribz-drawer.open {
  bottom: 0;
}

:root[data-theme='dark'] .cribz-drawer {
  background: /* rgba(20, 20, 20, 0.9); */ #0e0e0e!important;
  color: #eee;
}

:root[data-theme='dark'] .cribz-drawer a {
  color: #ddd;
}


:root[data-pwa="true"] .cribz-ai-drawer.open {
  bottom: 0;
}

:root[data-pwa="true"] .cribz-ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: none;
}

:root[data-pwa="true"] .cribz-ai-overlay.active {
  display: block;
}

:root[data-pwa="true"] .drawer-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

:root[data-pwa="true"] .drawer-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 14px;
  width: 100%;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  background: #eaeaea;
  cursor: pointer;
  transition: background 0.2s;
}


:root[data-pwa="true"] .drawer-options button:hover {
  background: #e0e0e0;
}




/* === Quick Search Form inside Drawer === */
:root[data-pwa="true"] .cribz-pwa-search-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

:root[data-pwa="true"] .cribz-pwa-search-form label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #111;
}

:root[data-theme="dark"] .cribz-pwa-search-form label {
  color: #eee;
}

:root[data-pwa="true"] .cribz-pwa-search-form input[type="text"] {
  padding: 12px 14px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 100%;
  background: #f7f7f7;
}

:root[data-theme="dark"] .cribz-pwa-search-form input[type="text"] {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

:root[data-pwa="true"] .cribz-pwa-search-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 16px;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  background: #ff4500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

:root[data-pwa="true"] .cribz-pwa-search-form button:hover {
  background: #e03e00;
}

:root[data-theme="dark"] .cribz-pwa-search-form button {
  background: #ff4500;
  color: #fff;
}


#cribz-search-loader {
  position: fixed;
  inset: 0;
  /*background: #121212;*/
  background: #FF4500;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}


#cribz-search-loader.show {
  opacity: 1;
}


/* ––––– DOT ANIMATION ––––– 
.dots-mode .cribz-loader-text::after {
  content: '...';
  display: inline-block;
  overflow: hidden;
  width: 0ch;                      
  animation: dotty 1s steps(4,end) infinite;
  vertical-align: bottom;
}

@keyframes dotty {
  to { width: 3ch; }               
}*/

.cribz-loader-overlay {
  text-align: center;
} 

.cribz-loader-static {
  width: 80px;
  animation: pulse 1.2s ease-in-out infinite;
}

.cribz-loader-text {
  color: #eeeeee;
  font-size: 1em;
  font-weight: 500;
  margin-top: 16px;
  letter-spacing: 0.5px;
  transition: opacity 0.25s ease;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}


:root[data-pwa="true"] #cribz-spinner-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.05);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: none!important;
}

:root[data-pwa="true"] .cribz-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(255, 69, 0, 0.2);
  border-top: 4px solid #ff4500;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Hide Search in main nav */
:root[data-pwa="true"] #mega-menu-item-5551 {
	display: none!important;
}

/* Hide chat in main nav */
:root[data-pwa="true"] #mega-menu-item-7025 {
	display: none!important;
}

/* Hide Search in main nav */
:root[data-pwa="true"] #mega-menu-item-5551 {
	display: none!important;
}

/* Hide scrollbar but allow scroll */
:root[data-pwa="true"] body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
	padding-bottom: 80px!important;
}


:root[data-pwa="true"] body::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Opera */
}

:root[data-pwa="true"] * {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

:root[data-pwa="true"] ::-webkit-scrollbar {
  display: none;
}

:root[data-pwa="true"] .cribz-share-toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 40px;
  z-index: 9999;
  transition: opacity 0.5s ease;
}


/* Properties Listing Page */


/* Mortgage Calculator - Wizard 3000 */

:root[data-pwa="true"] .cribz-mortgage-calculator .table-wrapper {
  width: 100vw; /* viewport width */
  margin-left: calc(-50vw + 50%);
  padding: 0;
  margin-bottom: 10px;
  left: 0!important;
}

:root[data-pwa="true"] .cribz-mortgage-calculator .mortgage-results {
  margin: 20px 0px 40px 0px!important;
}


:root[data-pwa="true"] .cribz-signin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity 0.4s ease;
}

:root[data-pwa="true"] .cribz-signin-box {
  background: #fff;
  color: #222;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100000;
}

:root[data-pwa="true"] .signin-button {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background: #ff4500;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}

:root[data-pwa="true"] .signin-button:hover {
  background: #e03e00;
}



/******************************** DARK MODE STYLES ****************************** /

/* === DARK MODE: AI Drawer === */
:root[data-theme='dark'] .cribz-ai-drawer {
  background:/* rgba(20, 20, 20, 0.9);*/ #0e0e0e!important;
  color: #eee;
}

:root[data-theme='dark'] .drawer-header {
  color: #fff;
}

:root[data-theme='dark'] .drawer-options button {
  background: #222222!important;
  color: #eee;
}

:root[data-theme='dark'] .drawer-options button:hover {
  background: #444;
}



:root[data-theme='dark'] .cribz-signin-box {
  background: #1a1a1a;
  color: #eee;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}

:root[data-theme='dark'] .signin-button {
  background: #ff4500;
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}