/* ==========================================================================
   safari.css — what Safari on iPhone, iPad and Mac needs, shared by every page
   (load it after the page's own stylesheet), and the install guide of pwa.js.
   ========================================================================== */

/* "Go on" and "back" arrows follow the reading direction of the page language */
[dir="rtl"] i.fa-arrow-right, [dir="rtl"] i.fa-arrow-left { transform: scaleX(-1); }

/* Rotating the phone must not enlarge the text; no grey flash on a tap */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* Only Safari on touch devices */
@supports (-webkit-touch-callout: none) {
  /* iOS zooms the page into any field under 16px and stays zoomed */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }
  /* iOS sends a tap on a plain area to the page only if it looks clickable: without this,
     tapping outside a menu never closes it */
  body { cursor: pointer; }
}

/* The installed app stays still at the edges, like a native one */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* Under the status bar of the installed app (viewport-fit=cover + black-translucent) */
.khatm-header { margin-top: env(safe-area-inset-top); }

/* ── Install guide (pwa.js): works on pages that don't load style-radiojp.css too ── */
.pwa-guide { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; cursor: default; }
.pwa-guide.show { opacity: 1; }
.pwa-guide-card { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-card, #16211b); color: var(--text-main, #e0eadd); border: 1px solid rgba(212,175,55,.35); border-radius: 22px; padding: 22px; text-align: center;
  transform: translateY(20px); transition: transform .25s; box-shadow: 0 -10px 40px rgba(0,0,0,.35); }
.pwa-guide.show .pwa-guide-card { transform: none; }
.pwa-guide-card img { width: 72px !important; height: 72px !important; max-width: 72px; object-fit: cover; display: block; margin: 0 auto 10px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.pwa-notice { position: fixed; z-index: 100000; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 18px; border-radius: 14px; background: var(--bg-card, #16211b); color: var(--text-main, #e0eadd); border: 1px solid rgba(212,175,55,.45); box-shadow: 0 12px 34px rgba(0,0,0,.35); font-size: .92rem; font-weight: 600; line-height: 1.7; text-align: center; }
.pwa-guide-card h3 { margin: 0 0 14px; font-size: 1.12rem; color: var(--accent, #d4af37); }
.pwa-guide-card ol { list-style: none; counter-reset: pwa; text-align: start; margin: 0 0 14px; padding: 0; font-size: .95rem; line-height: 1.75; }
.pwa-guide-card li { counter-increment: pwa; position: relative; padding-block: 10px; padding-inline-start: 42px; border-top: 1px solid rgba(127,127,127,.2); }
.pwa-guide-card li:first-child { border-top: 0; }
.pwa-guide-card li::before { content: counter(pwa); position: absolute; inset-inline-start: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent, #d4af37); color: #1d1600; font-weight: 900; font-size: .9rem; }
.pwa-guide-card p { margin: 0 0 14px; line-height: 1.8; font-size: .9rem; color: var(--text-muted, #8fa69a); }
.pwa-guide-card b { color: var(--accent, #d4af37); }
.pwa-ic { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.32em; margin-inline: 2px; color: #0a84ff; }
.pwa-guide-ok, .pwa-guide-act { display: block; width: 100%; min-height: 48px; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer; }
.pwa-guide-ok { border: 0; background: var(--primary, #1b5e20); color: #fff; }
.pwa-guide-act { margin-bottom: 10px; border: 1px solid var(--accent, #d4af37); background: transparent; color: var(--accent, #d4af37); }