/* iPhone Web App additions; loaded after app-v15.css. Business layouts remain unchanged. */
html.ios-compat {
  --ios-safe-top: env(safe-area-inset-top, 0px);
  --ios-safe-right: env(safe-area-inset-right, 0px);
  --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ios-safe-left: env(safe-area-inset-left, 0px);
  --ios-detail-header: calc(60px + var(--ios-safe-top));
  -webkit-text-size-adjust: 100%;
}

html.ios-iphone body { padding: 0; }
html.ios-iphone .app-frame,
html.ios-iphone .onboard8,
html.ios-iphone .phone-desktop8 { width: 100%; max-width: none; margin: 0; border-radius: 0; }
html.ios-iphone :is(.bottom-nav,.media-toolbar,.profile-toolbar-v5,.shop5-bottom,.shop5-cart-bottom,.shop5-checkout-bottom,.chat5-dock10,.sheet) { width: 100%; max-width: none; }

html.ios-compat .app-frame > .top {
  height: var(--ios-detail-header);
  min-height: var(--ios-detail-header);
  padding-top: calc(8px + var(--ios-safe-top));
  padding-right: max(14px, var(--ios-safe-right));
  padding-left: max(14px, var(--ios-safe-left));
}
html.ios-compat .app-frame > .top14.root-top14 {
  height: calc(66px + var(--ios-safe-top));
  min-height: calc(66px + var(--ios-safe-top));
  padding-top: calc(10px + var(--ios-safe-top));
}
html.ios-compat .app-frame > .square-header9 {
  height: calc(65px + var(--ios-safe-top));
  min-height: calc(65px + var(--ios-safe-top));
  padding-top: calc(6px + var(--ios-safe-top));
}
html.ios-compat .chat-top10 {
  height: calc(68px + var(--ios-safe-top));
  padding-top: calc(8px + var(--ios-safe-top));
  padding-left: max(12px, var(--ios-safe-left));
  padding-right: max(12px, var(--ios-safe-right));
}
html.ios-compat .profile-tabs { top: var(--ios-detail-header); }
html.ios-compat .onboard8 {
  padding-top: var(--ios-safe-top);
  padding-bottom: calc(28px + var(--ios-safe-bottom));
  padding-left: max(22px, var(--ios-safe-left));
  padding-right: max(22px, var(--ios-safe-right));
}
html.ios-compat .phone-desktop8 { padding-top: var(--ios-safe-top); padding-bottom: var(--ios-safe-bottom); }
html.ios-compat .content { padding-left: max(16px, var(--ios-safe-left)); padding-right: max(16px, var(--ios-safe-right)); }
html.ios-compat .content.flush { padding-left: var(--ios-safe-left); padding-right: var(--ios-safe-right); }
html.ios-compat :is(.bottom-nav,.media-toolbar,.profile-toolbar-v5,.shop5-bottom,.shop5-cart-bottom,.shop5-checkout-bottom,.chat5-dock10) {
  padding-left: max(12px, var(--ios-safe-left));
  padding-right: max(12px, var(--ios-safe-right));
}

html.ios-compat .discover6-immersive.app-frame {
  height: 100vh;
  height: 100dvh;
  padding: 0 0 calc(var(--nav-height, 68px) + var(--ios-safe-bottom));
}
html.ios-compat .discover6-immersive > .immersive-header14 {
  height: calc(64px + var(--ios-safe-top));
  min-height: calc(64px + var(--ios-safe-top));
  padding-top: calc(10px + var(--ios-safe-top));
  padding-left: max(18px, var(--ios-safe-left));
  padding-right: max(18px, var(--ios-safe-right));
}
html.ios-compat .discover6-immersive .content { padding: 0 !important; }
html.ios-compat .immersive-progress11 { top: calc(69px + var(--ios-safe-top)); left: max(24px, var(--ios-safe-left)); right: max(24px, var(--ios-safe-right)); }
html.ios-compat .immersive-slide6 .video-source12 { top: calc(88px + var(--ios-safe-top)); left: max(24px, var(--ios-safe-left)); }
html.ios-compat .immersive-info6 { padding-left: max(24px, var(--ios-safe-left)); padding-right: max(24px, var(--ios-safe-right)); }
html.ios-compat .nav14 { height: calc(var(--nav-height, 68px) + var(--ios-safe-bottom)); }
html.ios-compat .live-call14 { min-height: calc(100dvh - var(--ios-detail-header)); padding-bottom: max(32px, var(--ios-safe-bottom)); }

/* Existing domain forms use !important; this scoped rule intentionally wins only on iOS. */
html.ios-compat body :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]) { font-size: 16px !important; }
html.ios-compat .sheet { max-height: calc(100dvh - var(--ios-safe-top) - 12px); }
html.ios-compat .sheet-head,
html.ios-compat .sheet-body10 { padding-left: max(20px, var(--ios-safe-left)); padding-right: max(20px, var(--ios-safe-right)); }
html.ios-compat .sheet-body10 { min-height: 0; -webkit-overflow-scrolling: touch; }
html.ios-keyboard-open .sheet-overlay { inset: var(--ios-visual-top) 0 auto; height: var(--ios-visual-height); }
html.ios-keyboard-open .sheet { max-height: calc(var(--ios-visual-height) - 12px); padding-bottom: 0; }
html.ios-keyboard-open .sheet-body10 { padding-bottom: 20px; }
html.ios-keyboard-open .filter-actions9 { bottom: -20px; padding-bottom: 4px; }
html.ios-keyboard-open .chat5-dock10 { bottom: var(--ios-keyboard-inset); padding-bottom: 10px; }
html.ios-keyboard-open .bottom-nav { visibility: hidden; pointer-events: none; }

/* One recovery control over the poster, without changing the whole-card navigation. */
.immersive-slide6 .ios-media-retry {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 18px; border: 1px solid #ffffff70; border-radius: 28px;
  color: #fff; background: #10251dc9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; line-height: 24px; white-space: nowrap;
}
.immersive-slide6 .ios-media-retry[hidden] { display: none !important; }
.immersive-slide6 .ios-media-retry:active:not(:disabled) { transform: translate(-50%, -50%) scale(.98); }
.immersive-slide6 .ios-media-retry:disabled { opacity: .8; }