/* ==========================================================================
   BIJOY ACADEMY — APPLE MOBILE COMPATIBILITY & THUMB-ZONE ENGINE (v2.0)
   Standard: MCVP-v2.0 & Apple Human Interface Guidelines (HIG Web Mastery)
   Architecture: 5-Phase Zero-Overflow, Touch-Ergonomics & Liquid Glass UI
   ========================================================================== */

/* ----------------------------------------------------
   PHASE 1: VIEWPORT, SAFE-AREA INSETS & ROOT TOKENS
   ---------------------------------------------------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  --touch-target-apple: 44px;
  --touch-target-wcag: 48px;
  --touch-gap-min: 8px;

  --app-height-dvh: 100dvh;
  --app-height-svh: 100svh;

  --apple-spring-curve: cubic-bezier(0.16, 1, 0.3, 1);
  --apple-tap-compression: scale(0.96);
  --apple-fast-transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  --apple-mobile-glass-bg: rgba(15, 19, 28, 0.85);
  --apple-mobile-glass-border: rgba(255, 255, 255, 0.12);
  --apple-mobile-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.20);
  --apple-mobile-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(249, 115, 22, 0.12);
}

[data-theme="light"] {
  --apple-mobile-glass-bg: rgba(255, 255, 255, 0.88);
  --apple-mobile-glass-border: rgba(15, 23, 42, 0.08);
  --apple-mobile-specular: inset 0 1px 0 0 rgba(255, 255, 255, 1);
  --apple-mobile-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.12), 0 0 16px rgba(217, 119, 6, 0.08);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  touch-action: manipulation;
}

html, body {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
}

.full-height-screen,
.hero-mobile-container,
.app-screen-root {
  min-height: 100vh;
  min-height: var(--app-height-dvh);
}

header,
.header,
.site-header,
.navbar,
.sticky-header {
  padding-top: max(12px, var(--sat)) !important;
  padding-left: max(16px, var(--sal)) !important;
  padding-right: max(16px, var(--sar)) !important;
}

/* ----------------------------------------------------
   PHASE 2: ZERO-HORIZONTAL-OVERFLOW ENGINE
   ---------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

.grid-item,
.flex-child,
.bento-card,
.result-card,
.metric-card,
.calc-card,
[class*="grid"] > *,
[class*="flex"] > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

h1, h2, h3, h4, h5, h6,
p, span, label, td, th, li {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

.metric-value,
.bento-stat,
.currency-display,
.calc-output,
.live-number,
input[type="number"],
input[inputmode="decimal"],
input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums !important;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

.table-responsive-container,
.chart-container,
.canvas-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ----------------------------------------------------
   PHASE 3: TOUCH & THUMB ERGONOMICS (44px/48px RULES)
   ---------------------------------------------------- */
button,
a,
input,
select,
textarea,
summary,
.interactive-tap,
[role="button"],
[role="tab"] {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}

button,
.btn,
.apple-btn,
.nav-link,
.tab-button,
.mobile-drawer-link,
.currency-select,
.theme-toggle-btn {
  min-height: var(--touch-target-apple);
  min-width: var(--touch-target-apple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-touch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

.icon-btn-touch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: var(--touch-target-wcag);
  min-height: var(--touch-target-wcag);
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

button:active,
.btn:active,
.apple-btn:active,
.interactive-card:active,
.thumb-dock-btn:active {
  transform: var(--apple-tap-compression) !important;
  transition: transform 90ms var(--apple-spring-curve) !important;
}

.btn-group,
.button-row,
.actions-container,
.tab-bar-list {
  display: flex;
  gap: var(--touch-gap-min);
  flex-wrap: wrap;
}

/* ----------------------------------------------------
   PHASE 4: iOS AUTO-ZOOM PROHIBITION & FORM ERGONOMICS
   ---------------------------------------------------- */
@media screen and (max-width: 768px), (pointer: coarse) {
  input,
  select,
  textarea,
  .form-control,
  .input-field,
  .currency-input {
    font-size: max(16px, 1rem) !important;
    min-height: 46px !important;
    line-height: 1.4 !important;
    border-radius: 12px;
  }

  input[inputmode="decimal"],
  input[inputmode="numeric"] {
    letter-spacing: -0.01em;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ----------------------------------------------------
   PHASE 5: MOBILE STICKY CONVERSION BAR & THUMB DOCK
   ---------------------------------------------------- */
body.has-thumb-bar {
  padding-bottom: calc(76px + var(--sab)) !important;
}

.apple-mobile-sticky-bar,
.mobile-conversion-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 10px;
  padding-bottom: calc(10px + var(--sab));
  padding-left: max(16px, var(--sal));
  padding-right: max(16px, var(--sar));
  background: var(--apple-mobile-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--apple-mobile-glass-border);
  box-shadow: var(--apple-mobile-shadow);
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(0);
  transition: transform 300ms var(--apple-spring-curve);
}

.apple-mobile-sticky-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.5) 50%, transparent 100%);
}

.apple-mobile-sticky-bar.is-hidden {
  transform: translateY(100%);
}

.sticky-bar-metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sticky-bar-metric .label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-bar-metric .value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-primary, #F97316);
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.sticky-bar-cta {
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 768px) {
  .form-grid,
  .bento-grid,
  .results-grid,
  .calc-layout,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .mobile-w-full {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .result-card,
  .metric-card,
  .bento-card {
    padding: 1.15rem 1rem !important;
    border-radius: 16px !important;
  }

  .calc-header h1 {
    font-size: 1.65rem !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
  }
}