/* ==========================================================================
   منصة إحقاق — الصفحات العامة (قبل تسجيل الدخول)
   التخطيط والألوان والخطوط من auth.css (نفس شاشات الدخول)؛
   هذا الملف لمكوّنات المحتوى الطويل داخل لوحة المحتوى فقط.
   ========================================================================== */

/* ------------------------------------------------------------- layout --- */

/* Long pages: clear the language switch and leave air at the bottom */
.auth__formin--wide { padding-block: 96px var(--sp-12); }
@media (max-width: 820px) { .auth__formin--wide { padding-block: 0 var(--sp-8); } }

/* ------------------------------------------------------------ heading --- */

.pub-eyebrow { font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--role); text-align: start; }
.pub-eyebrow + .auth__h { margin-top: var(--sp-2); }
.auth__h.pub-h--long { font-size: 26px; line-height: 1.5; }

/* ------------------------------------------------------------ actions --- */

.pub-actions { margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer;
  transition: filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--role); border-color: var(--role); color: #fff; }
.btn--primary:hover { filter: brightness(.92); }
.btn--outline { background: #fff; border-color: var(--role-line); color: var(--role); }
.btn--outline:hover { background: var(--role-soft); border-color: var(--role); }

/* --------------------------------------------------------------- tabs --- */

.pub-tabs {
  margin-top: var(--sp-10);
  display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.pub-tabs::-webkit-scrollbar { display: none; }
.pub-tab {
  flex: none; position: relative;
  min-height: 50px; padding: 0 var(--sp-3);
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.pub-tab::after {
  content: ""; position: absolute; inset-inline: var(--sp-2); bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
}
.pub-tab:hover { color: var(--role); }
.pub-tab[aria-selected="true"] { color: var(--role); }
.pub-tab[aria-selected="true"]::after { background: var(--role); }
.pub-panel { padding-top: var(--sp-6); }
.pub-panel[hidden] { display: none; }

/* -------------------------------------------------------------- prose --- */

.pub-prose { font-size: 15px; line-height: 2; color: var(--ink-2); text-align: start; }
.pub-prose > * + * { margin-top: var(--sp-4); }
.pub-prose h4 { font-size: 19px; font-weight: 700; color: var(--ink); }
.pub-prose ul { margin: var(--sp-4) 0 0; padding: 0; }
.pub-prose li { position: relative; list-style: none; padding-inline-start: 26px; }
.pub-prose li + li { margin-top: var(--sp-3); }
.pub-prose li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .8em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--role); box-shadow: 0 0 0 4px var(--role-soft);
}
.pub-prose a { color: var(--role); font-weight: 600; unicode-bidi: isolate; }

/* FAQ */
.pub-faq { border-top: 1px solid var(--line); }
.pub-faq__item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.pub-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-faq__q { font-family: var(--f-display); font-size: 16px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.pub-faq__a { margin-top: var(--sp-2); font-size: 14.5px; line-height: 1.95; color: var(--ink-2); }

/* ---------------------------------------------------- records (grids) --- */

.pub-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); }
.pub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub-item { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); min-width: 0; text-align: start; }
.pub-item dt { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink-3); }
.pub-item dd { margin: 4px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

.pub-section {
  margin-top: var(--sp-10); padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--role-line);
  font-size: 15px; font-weight: 600; color: var(--role); text-align: start;
}

.pub-steps { margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.95; color: var(--ink-2); text-align: start; }
.pub-steps li { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.pub-steps li:last-child { border-bottom: 0; }

.pub-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 28px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: #fff;
}
.pub-badge--yes { background: #1E7A4C; }
.pub-badge--no  { background: #555C5E; }

.pub-qr { display: block; width: 140px; height: 140px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pub-qr[hidden] { display: none; }

/* ------------------------------------------------------ status pages --- */

.pub-state__code {
  font-family: var(--f-display); font-size: clamp(72px, 9vw, 110px); font-weight: 700; line-height: 1;
  color: var(--role); letter-spacing: .02em; text-align: start;
}
.pub-state__code + .auth__h { margin-top: var(--sp-4); }
.pub-state__text { margin-top: var(--sp-3); font-size: 15px; line-height: 1.9; color: var(--ink-2); text-align: start; }
.pub-state .auth__submit { display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------ terms (terms.php) --- */

.pub-terms { font-size: 15px; line-height: 2; color: var(--ink-2); text-align: start; }
.pub-terms .container-fluid { padding: 0; }
.pub-terms .login-form-head h2 { font-size: 30px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.pub-terms h4 {
  margin: var(--sp-8) 0 var(--sp-3); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: 18px; font-weight: 600; color: var(--role);
}
.pub-terms .login-form-head + h4 { border-top: 0; padding-top: 0; margin-top: var(--sp-6); }
.pub-terms ul { margin: 0; padding: 0; list-style: none; }
.pub-terms li { position: relative; padding-inline-start: 26px; }
.pub-terms li + li { margin-top: var(--sp-3); }
.pub-terms li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .85em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--role); box-shadow: 0 0 0 4px var(--role-soft);
}

/* ------------------------------------- appointment view (/c/CODE) --- */

.pub-ticket__top { margin-top: var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-6); }
.pub-ticket__when { flex: 1 1 auto; }
.pub-ticket__top .pub-qr { flex: none; margin-top: var(--sp-4); }
.pub-ticket__branch { grid-column: span 2; }
.pub-ticket__branch a { color: var(--ink); }
.pub-ticket__branch a:hover { color: var(--role); }
.pub-ticket__branch span { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pub-ticket__branch img { height: 20px; width: auto; }

/* ------------------------------------------- voting card (/v/…) --- */

.pub-vote { margin-top: var(--sp-8); padding: var(--sp-6); border-radius: 14px; background: var(--role-tint); }
.pub-vote__desc { font-size: 15px; line-height: 1.9; color: var(--ink); text-align: center; }
.pub-vote__result { margin-top: var(--sp-5); display: flex; align-items: center; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; }
.pub-vote__label { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .pub-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .pub-actions { grid-template-columns: 1fr; }
  .pub-grid, .pub-grid--3 { grid-template-columns: 1fr; }
  .pub-ticket__top { flex-direction: column-reverse; align-items: stretch; }
  .pub-ticket__top .pub-qr { align-self: center; }
  .pub-ticket__branch { grid-column: auto; }
  .auth__h.pub-h--long { font-size: 22px; }
}

/* --------------------------------------------------------------- print --- */

@media print {
  .auth { display: block; }
  .auth__brand, .auth__top, .skip-link { display: none !important; }
  .auth__mini { display: flex !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .auth__form { padding: 0; }
  .auth__formin, .auth__formin--wide { width: 100%; max-width: none; margin: 0; padding: 0; }
}