/* ShaFX Mobile UI Consistency Pack (v1) */
/* Goals: consistent spacing, readable typography, no horizontal overflow, app-like tap targets, safe-area support. */

:root{
  --app-max: 1120px;
  --app-pad: 16px;
  --app-pad-lg: 20px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,.22);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.16);
  --border: rgba(255,255,255,.10);
  --text-muted: rgba(255,255,255,.70);
  --text-soft: rgba(255,255,255,.82);
}

/* Stop the "page shifts / code-looking" vibe */
html, body { height: 100%; }
body{
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Safe-area for iPhone */
body{
  padding-bottom: env(safe-area-inset-bottom);
}

/* Accessible skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 12px; top: 12px;
  width:auto; height:auto;
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 999999;
  background: rgba(0,0,0,.85);
  color: #fff;
  outline: 2px solid rgba(255,255,255,.35);
}

/* Standard content container */
.container, .wrap, .page-container{
  max-width: var(--app-max);
  margin-inline: auto;
  padding-inline: var(--app-pad);
}

/* Main spacing */
.app-main{
  padding-block: 14px 18px;
}
section{
  scroll-margin-top: 92px;
}
section + section{
  margin-top: 14px;
}

/* Headings: consistent and mobile-friendly */
h1{ font-size: clamp(22px, 3.6vw, 34px); line-height: 1.18; margin: 0 0 10px; }
h2{ font-size: clamp(18px, 3.0vw, 26px); line-height: 1.22; margin: 0 0 10px; }
h3{ font-size: clamp(16px, 2.6vw, 20px); line-height: 1.25; margin: 0 0 8px; }
p, li{ line-height: 1.65; }

/* Cards */
.card, .panel, .box, .widget-host{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.card, .panel, .box{
  padding: 14px;
}

/* Buttons and form controls */
button, .btn, a.btn{
  min-height: 44px;
}
input, select, textarea{
  min-height: 48px;
  border-radius: 14px;
}
input, select, textarea, button{
  touch-action: manipulation;
}
label{ color: var(--text-soft); }

/* Tables: never break mobile */
table{ width: 100%; border-collapse: collapse; }
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.table-scroll table{ min-width: 680px; }

/* Images + iframes responsive */
img, svg, video, canvas{ max-width: 100%; height: auto; }
iframe{ max-width: 100%; }
.widget-host iframe{ width: 100% !important; }

/* Heatmap hosts: fixed minimum height so it never looks empty */
.heatmap-host, [data-widget="forex-heatmap"]{
  min-height: 520px;
  width: 100%;
}

/* Utility: prevent tiny text blocks */
.small, .muted{ color: var(--text-muted); }

/* Mobile: tighter spacing + better tap targets */
@media (max-width: 600px){
  :root{ --app-pad: 14px; }
  .card, .panel, .box{ padding: 12px; }
  section + section{ margin-top: 12px; }
}

/* Desktop tuning: reduce oversized mobile-first scaling */
@media (min-width: 992px){
  body{ font-size: 15px; }
  .container{ max-width: 1100px; }
  h1{ font-size: 34px; }
  h2{ font-size: 26px; }
  h3{ font-size: 20px; }
  .card, .calculator-card{ padding: 18px; }
  .btn, button, .action-btn{ padding: 10px 14px; font-size: 14px; }
  .page-header{ padding: 16px 0; }
}