/* The home page, the form pieces (phone field, uploads, tags) and the registry / blacklist cards
   Moved out of styles.css on 2026-11-05 (one big file split by section; the rules are unchanged and in the same order).
   Every page links this file right after css/home-forms.css. */

/* ═════════════════════════════════════════════════════════════
   HOME PAGE
   ═════════════════════════════════════════════════════════════ */

/* Hero: photo background, English name with the Arabic name under it */
.hm-hero {
  position: relative;
  margin-top: -28px;
  min-height: clamp(400px, calc(100svh - 64px), 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: #0d0d0f url('../img/hero-sm.jpg') center 62% / cover no-repeat;
  border-bottom: 1px solid var(--b1);
}
@media (min-width: 900px) { .hm-hero { background-image: url('../img/hero.jpg'); } }

.hm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 44%, rgba(13, 13, 15, 0.55), rgba(13, 13, 15, 0) 70%),
    linear-gradient(180deg, rgba(13, 13, 15, 0.5) 0%, rgba(13, 13, 15, 0.22) 42%, rgba(13, 13, 15, 0.7) 82%, var(--bg) 100%);
}
.hm-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px 84px; max-width: 100%; }
.hm-hero-title { display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: 'Cinzel', 'Cairo', serif; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55); }
.hm-t-egy {
  font-size: clamp(64px, 17vw, 168px);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-inline-start: 0.08em;
  background: linear-gradient(180deg, #fff1b8 0%, #f0c14b 38%, #d4a017 62%, #8a6410 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e9b82c;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.5));
}
.hm-t-rest {
  margin-top: 6px;
  font-size: clamp(17px, 4.6vw, 40px);
  font-weight: 700;
  letter-spacing: 0.34em;
  padding-inline-start: 0.34em;
  text-transform: uppercase;
  color: #f7f3e6;
}
.hm-hero-rule { display: block; width: min(220px, 46vw); height: 2px; margin-top: 8px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hm-hero-ar {
  font-size: clamp(20px, 4.6vw, 34px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.7);
}
.hm-hero-down {
  position: absolute;
  bottom: 22px;
  inset-inline: 0;
  margin-inline: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border: 1px solid rgba(212, 160, 23, 0.5);
  background: rgba(13, 13, 15, 0.55);
  backdrop-filter: blur(6px);
  animation: hm-bob 2.2s ease-in-out infinite;
}
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) { .hm-hero-down { animation: none; } }

/* Sections */
.hm-section { margin-top: 60px; }
.hm-sec-head { margin-bottom: 22px; }
.hm-sec-head h2 { font-size: 22px; font-weight: 900; color: var(--t1); }

.hm-faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.hm-faq details { background: var(--card); border: 1px solid var(--b1); border-radius: 12px; }
.hm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--t1);
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--gold); }
.hm-faq details[open] summary { border-bottom: 1px solid var(--b1); }
.hm-faq details[open] summary::after { content: '−'; }
.hm-faq p { padding: 14px 18px 16px; font-size: 13.5px; line-height: 1.9; color: var(--t2); }



/* Login page hint */
.login-hint { font-size: 13px; color: var(--t2); line-height: 1.8; margin: 4px 0 14px; text-align: center; }
.login-google { margin-bottom: 4px; }

/* ─── LOGIN: mobile-safe Google button ─── */
.gsi-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin-top: 10px;
  overflow: hidden;
}
.gsi-slot > div, .gsi-slot iframe { max-width: 100%; }
.login-google .btn-google { width: 100%; max-width: 100%; }
@media (max-width: 480px) {
  .admin-login-fullscreen { padding: 14px; align-items: flex-start; padding-top: 28px; }
  .admin-login-card { padding: 26px 18px 22px; border-radius: 16px; }
  .admin-login-title { font-size: 20px; }
}

/* ═════════════════════════════════════════════════════════════
   FORMS: mandatory questions, phone field, uploads, tags
   ═════════════════════════════════════════════════════════════ */
/* Radios stay focusable and validatable (no display:none) */
.fg .ro input, .ro input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  pointer-events: none;
  display: block;
}
.ro { position: relative; }
.ro:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.fg.has-error .rg .ro { border-color: rgba(239, 68, 68, 0.6); }

.fmsg { font-size: 11.5px; color: var(--t3); line-height: 1.6; min-height: 0; }
.fmsg:empty { display: none; }
.fg.has-error > .fmsg { color: #f87171; font-weight: 700; }
.fg.has-error > input, .fg.has-error .tag-box, .fg.has-error .upz, .fg.has-error .multi-up .mu-add {
  border-color: rgba(239, 68, 68, 0.7);
}
.fg.is-ok > input { border-color: rgba(34, 197, 94, 0.6); }
.fg.is-ok > .fmsg { color: #4ade80; font-weight: 700; }
.fg.is-checking > .fmsg { color: var(--gold); }
.cond { padding: 12px 14px; border: 1px dashed var(--b2); border-radius: 10px; background: rgba(212, 160, 23, 0.03); }

/* Phone field with PNG flags */
.phone-field { position: relative; width: 100%; }
.ph-row { display: flex; direction: ltr; align-items: stretch; gap: 0; }
.ph-country {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--s);
  border: 1px solid var(--b2);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--t1);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  min-height: 44px;
}
.ph-country:hover { border-color: var(--gold); }
.ph-country i { font-size: 10px; color: var(--t3); }
.ph-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.phone-field .ph-input {
  flex: 1;
  min-width: 0;
  border-radius: 0 8px 8px 0;
  background: var(--s);
  border: 1px solid var(--b2);
  color: var(--t1);
  padding: 11px 14px;
  font-size: 14px;
  text-align: left;
}
.phone-field .ph-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12); outline: none; }
.phone-field.invalid .ph-input, .phone-field.invalid .ph-country { border-color: rgba(239, 68, 68, 0.7); }
.ph-hint { display: block; font-size: 11.5px; color: #f87171; }
.ph-hint:empty { display: none; }
.ph-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  inset-inline: 0;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--b2);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  padding: 8px;
}
.phone-field .ph-search {
  width: 100%;
  background: var(--s);
  border: 1px solid var(--b2);
  border-radius: 8px;
  color: var(--t1);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 6px;
}
.ph-list { list-style: none; max-height: 250px; overflow-y: auto; direction: rtl; }
.ph-group { position: sticky; top: 0; background: var(--card); padding: 6px 8px 4px; font-size: 11px; font-weight: 800; color: var(--gold); }
.ph-list li[data-iso] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--t1); }
.ph-list li[data-iso]:hover, .ph-list li[data-iso]:focus { background: rgba(212, 160, 23, 0.1); }
.ph-cname { flex: 1; }
.ph-cdial { color: var(--t3); font-size: 12px; }

/* Search-by-phone bar under the navbar */
.phone-result { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.pr-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--b2); background: var(--card); }
.pr-item > i { font-size: 18px; margin-top: 2px; }
.pr-item b { display: block; font-size: 13.5px; color: var(--t1); }
.pr-item span:not(.bdg) { display: block; font-size: 12.5px; color: var(--t2); line-height: 1.7; }
.pr-item a { font-size: 12.5px; font-weight: 700; color: var(--gold); }
.pr-ok { border-color: rgba(34, 197, 94, 0.35); }
.pr-ok > i { color: var(--green); }
.pr-bad { border-color: rgba(239, 68, 68, 0.4); }
.pr-bad > i { color: var(--red); }
.pr-none > i { color: var(--t3); }

/* Multi image uploader: tiles side by side */
.multi-up .mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mu-tile { position: relative; margin: 0; border: 1px solid var(--b2); border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.mu-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-tile figcaption { position: absolute; bottom: 4px; inset-inline-start: 6px; font-size: 10px; font-weight: 800; background: rgba(0,0,0,0.7); color: #fff; padding: 1px 7px; border-radius: 10px; }
.mu-x { position: absolute; top: 5px; inset-inline-end: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.75); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.mu-x:hover { background: var(--red); }
.mu-add { aspect-ratio: 4 / 3; border: 1.5px dashed var(--b2); border-radius: 10px; background: var(--s); color: var(--t2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; }
.mu-add i { font-size: 20px; color: var(--gold); }
.mu-add small { font-size: 10.5px; color: var(--t3); }
.mu-add:hover { border-color: var(--gold); background: rgba(212, 160, 23, 0.05); }

/* Clan-name tags */
.tag-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--s); border: 1px solid var(--b2); border-radius: 8px; padding: 8px 10px; min-height: 46px; cursor: text; }
.tag-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12); }
.tag-list { display: contents; list-style: none; }
.tag-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 20px; background: rgba(212, 160, 23, 0.12); border: 1px solid rgba(212, 160, 23, 0.3); color: var(--gold); font-size: 12.5px; font-weight: 700; direction: ltr; }
.tag-badge button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.35); color: inherit; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.tag-badge button:hover { background: var(--red); color: #fff; }
.fg .tag-input { flex: 1; min-width: 140px; border: 0; background: transparent; padding: 4px; box-shadow: none; }
.fg .tag-input:focus { box-shadow: none; }

/* ═════════════════════════════════════════════════════════════
   REGISTRY + BLACKLIST CARDS
   ═════════════════════════════════════════════════════════════ */
.bdg-gray { background: rgba(160, 160, 168, 0.12); color: var(--t2); border: 1px solid rgba(160, 160, 168, 0.25); }
.btn-warning { background: rgba(212, 160, 23, 0.16); color: var(--gold); border: 1px solid rgba(212, 160, 23, 0.4); }
.btn-warning:hover { background: rgba(212, 160, 23, 0.28); }
.reg-count { font-size: 12px; color: var(--t3); font-weight: 700; }
.reg-heading { min-width: 0; }
.reg-name { overflow-wrap: anywhere; direction: ltr; text-align: right; }
.reg-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.reg-ava-ph { display: flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--b2); font-size: 18px; }
.reg-rows .reg-row { margin: 0; }
.reg-rows dd, .reg-rows dt, .blk-rows dd, .blk-rows dt { margin: 0; }

.blk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .blk-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 560px) { .blk-grid { grid-template-columns: 1fr; } }

.blk-card { background: var(--card); border: 1px solid var(--b1); border-top: 3px solid var(--red); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.blk-top { display: flex; align-items: center; gap: 12px; }
.blk-ico { width: 44px; height: 44px; border-radius: 10px; background: rgba(239, 68, 68, 0.12); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.blk-name { font-size: 14px; font-weight: 800; color: var(--t1); overflow-wrap: anywhere; }
.blk-reason { font-size: 12.5px; color: var(--t2); line-height: 1.8; overflow-wrap: anywhere; }
.blk-rows { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--b1); padding-top: 10px; }