/**
 * PWA-Specific Styles Example
 *
 * This file demonstrates how to style elements differently when the site
 * is accessed via the installed PWA vs regular browser.
 *
 * Copy these styles to your theme or Oxygen Builder custom CSS
 */

/* ============================================
   HIDE/SHOW ELEMENTS BASED ON PWA MODE
   ============================================ */

/* Hide browser-only elements when in PWA mode */
.is-pwa .browser-only,
.is-pwa .hide-in-pwa {
  display: none !important;
}

/* Hide PWA-only elements when in browser mode */
.browser-mode .pwa-only,
.browser-mode .hide-in-browser {
  display: none !important;
}

/* Show elements only in PWA mode */
.pwa-only {
  display: none;
}

.is-pwa .pwa-only {
  display: block;
}

/* Show elements only in browser mode */
.browser-only {
  display: none;
}

.browser-mode .browser-only {
  display: block;
}

.is-pwa *:not(input):not(select):not(textarea):not(code) {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard */
}

@media (orientation: portrait) {
  html.pwa-mode {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}