/* =====================================================================
   ShotGram v88 — permissions onboarding sheet
   Load AFTER styles.css, alongside v88-birthday.css.
   ===================================================================== */

body.perm-intro-open { overflow: hidden; }

.perm-intro {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: end center;
  background: rgba(6, 7, 14, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: permFade .18s ease;
}
@keyframes permFade { from { opacity: 0; } to { opacity: 1; } }

.perm-intro-card {
  width: min(560px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-2, #12141f);
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  /* Clear the home indicator on notched iPhones. */
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: permRise .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes permRise { from { transform: translateY(18px); } to { transform: none; } }

.perm-intro-head h2 { margin: 0 0 6px; font-size: 21px; font-weight: 850; }
.perm-intro-head p  { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted, #9aa3bd); }

.perm-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }

.perm-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(255,255,255,.1));
  background: rgba(255,255,255,.035);
  transition: border-color .18s ease, background .18s ease;
}
.perm-row.granted { border-color: rgba(47,227,160,.42); background: rgba(47,227,160,.07); }
.perm-row.denied  { border-color: rgba(255,255,255,.08); opacity: .72; }

.perm-glyph {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(var(--violet-rgb, 139, 92, 255),.14);
  color: #bdb2ff;
}
.perm-glyph svg { width: 20px; height: 20px; }

.perm-copy { min-width: 0; display: grid; gap: 3px; }
.perm-copy b     { font-size: 15px; font-weight: 800; }
.perm-copy small { font-size: 12.5px; line-height: 1.4; color: var(--muted, #9aa3bd); }

.perm-allow {
  /* 44px minimum tap target — Apple HIG. */
  min-height: 44px; min-width: 88px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--violet-rgb, 139, 92, 255),.4);
  background: rgba(var(--violet-rgb, 139, 92, 255),.16);
  color: #e7e3ff;
  font: 800 14px/1 inherit;
  cursor: pointer;
  transition: opacity .15s ease;
}
.perm-allow:disabled { opacity: .55; cursor: default; }
.perm-row.granted .perm-allow {
  border-color: rgba(47,227,160,.45);
  background: rgba(47,227,160,.14);
  color: #b6f5dc;
}

.perm-intro-foot { display: grid; gap: 9px; }
.perm-intro-foot .btn { min-height: 48px; }
.perm-note { display: block; text-align: center; font-size: 11.5px; line-height: 1.45; color: var(--muted, #9aa3bd); }

/* Arabic / RTL — mirror the row without touching the glyph box. */
[dir="rtl"] .perm-row,
html[lang^="ar"] .perm-row { direction: rtl; }
[dir="rtl"] .perm-copy,
html[lang^="ar"] .perm-copy { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .perm-intro, .perm-intro-card { animation: none; }
}