/* Ceremony instructions — responsive; extends nafath-login.css */

body.instructions-page-body {
  margin: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* الصفحة بعرض كامل على الجوال (بدون شريط رمادي جانبي) */
.login-page.instructions-page {
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0));
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.login-container.instructions-panel {
  align-items: stretch;
  max-width: 720px;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.instructions-panel .logo-img {
  max-width: min(100%, 180px);
  height: auto;
}

.instructions-panel .header {
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.instructions-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ceremony-heading {
  margin: 0;
  text-align: center;
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #145a3a;
  line-height: 1.5;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ceremony-heading .batch-num {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 14px;
  border: 3px solid #145a3a;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  vertical-align: middle;
}

.instructions-title {
  margin: 8px 0 0;
  align-self: stretch;
  text-align: right;
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1b5535;
}

.instructions-list {
  margin: 0;
  padding: 0 1.25rem 0 0;
  width: 100%;
  box-sizing: border-box;
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #1a3d2e;
}

.instructions-list li {
  margin-bottom: 10px;
}

.instructions-list li::marker {
  font-weight: 600;
  color: #1b8354;
}

.tawakkalna-banner {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f5ef 0%, #d4ebe0 100%);
  border: 1px solid #1b8354;
  text-align: center;
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #145a3a;
  line-height: 1.6;
}

.pdf-hint {
  margin: 0;
  text-align: center;
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--login-text-muted);
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

/* إلغاء padding الأفقي 112px من nafath-login + نص متعدد الأسطر */
.action-buttons .instruction-link {
  margin-top: 0 !important;
  text-decoration: none;
  padding: 14px 16px !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  line-height: 1.45 !important;
  text-align: center;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

/* أزرار بعرض مريح — لا تلتصق بحواف البطاقة البيضاء (مثل بانر توكلنا) */
@media (max-width: 768px) {
  .instructions-panel .action-buttons {
    width: calc(100% - 1.25rem);
    max-width: calc(100% - 1.25rem);
    margin-inline: auto;
    padding-inline: 2px;
    gap: 12px;
  }

  .instructions-panel .action-buttons .instruction-link {
    width: 100% !important;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .instructions-panel .action-buttons {
    width: calc(100% - 1.75rem);
    max-width: calc(100% - 1.75rem);
    gap: 10px;
  }

  .instructions-panel .tawakkalna-banner {
    width: calc(100% - 1.75rem);
    max-width: calc(100% - 1.75rem);
  }
}

@media (min-width: 560px) {
  .action-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .action-buttons .instruction-link {
    flex: 1;
    min-width: 200px;
  }
}

/* تابلت وأصغر */
@media (max-width: 768px) {
  .login-container.instructions-panel {
    padding: 1.5rem 1.25rem !important;
    gap: 1.35rem !important;
    max-width: 100%;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  .ceremony-heading {
    font-size: 1.1rem;
  }

  .ceremony-heading .batch-num {
    font-size: 1.25rem;
    padding: 2px 10px;
  }

  .instructions-panel .header {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
  }

  .instructions-title {
    font-size: 1.1rem;
  }

  .instructions-list {
    font-size: 0.95rem;
    padding-inline-end: 1rem;
  }

  .tawakkalna-banner {
    font-size: 0.98rem;
    padding: 12px 12px;
    width: calc(100% - 1.25rem);
    max-width: calc(100% - 1.25rem);
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* تذييل داخل البطاقة مكرر مع page-footer — إخفاء الداخلي على الجوال */
  .instructions-panel > .footer {
    display: none;
  }

  .login-page.instructions-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
  }
}

/* جوال: بطاقة بعرض الشاشة، زوايا متناسقة */
@media (max-width: 576px) {
  .login-page.instructions-page {
    /* تذييل واحد فقط بعد إخفاء .footer الداخلي تحت 768px */
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0));
  }

  .login-container.instructions-panel {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding: 1.25rem 1rem !important;
    gap: 1.15rem !important;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  }

  .ceremony-heading {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .ceremony-heading .batch-num {
    margin-top: 6px;
  }

  .instructions-panel .header {
    font-size: 1.2rem !important;
    line-height: 1.32 !important;
  }

  .instructions-panel .footer {
    font-size: 12px;
    line-height: 1.4;
    padding-inline: 4px;
  }
}

@media (max-width: 400px) {
  .login-container.instructions-panel {
    padding: 1rem 0.75rem !important;
    gap: 1rem !important;
    border-radius: 0 0 16px 16px;
  }

  .instructions-panel .header {
    font-size: 1.1rem !important;
  }

  .tawakkalna-banner {
    font-size: 0.92rem;
  }
}