/*!
 * Bootstrap 5 essentials — Ibn-Thani localized subset
 * Only the classes actually used in the project's PHP output
 * Safe scope: rules NEVER target .surah-text, .surah-text-one-line, .ayat4tafseer descendants
 */

/* ===== Container ===== */
.container, .container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ===== Grid (row + col) ===== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
.row > * {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1    { flex: 0 0 auto; width: 8.33333333%; }
.col-2    { flex: 0 0 auto; width: 16.66666667%; }
.col-3    { flex: 0 0 auto; width: 25%; }
.col-4    { flex: 0 0 auto; width: 33.33333333%; }
.col-5    { flex: 0 0 auto; width: 41.66666667%; }
.col-6    { flex: 0 0 auto; width: 50%; }
.col-7    { flex: 0 0 auto; width: 58.33333333%; }
.col-8    { flex: 0 0 auto; width: 66.66666667%; }
.col-9    { flex: 0 0 auto; width: 75%; }
.col-10   { flex: 0 0 auto; width: 83.33333333%; }
.col-11   { flex: 0 0 auto; width: 91.66666667%; }
.col-12   { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm     { flex: 1 0 0%; }
  .col-sm-1   { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2   { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3   { flex: 0 0 auto; width: 25%; }
  .col-sm-4   { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5   { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6   { flex: 0 0 auto; width: 50%; }
  .col-sm-7   { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8   { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9   { flex: 0 0 auto; width: 75%; }
  .col-sm-10  { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11  { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12  { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md     { flex: 1 0 0%; }
  .col-md-1   { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2   { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3   { flex: 0 0 auto; width: 25%; }
  .col-md-4   { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5   { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6   { flex: 0 0 auto; width: 50%; }
  .col-md-7   { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8   { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9   { flex: 0 0 auto; width: 75%; }
  .col-md-10  { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11  { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12  { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg     { flex: 1 0 0%; }
  .col-lg-3   { flex: 0 0 auto; width: 25%; }
  .col-lg-4   { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-6   { flex: 0 0 auto; width: 50%; }
  .col-lg-8   { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-12  { flex: 0 0 auto; width: 100%; }
}

/* ===== Spacing utilities (m-*, p-*, mt-3, mb-3 etc.) ===== */
.m-0  { margin: 0 !important; }
.m-1  { margin: .25rem !important; }
.m-2  { margin: .5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ms-2 { margin-inline-start: .5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }

.p-0  { padding: 0 !important; }
.p-1  { padding: .25rem !important; }
.p-2  { padding: .5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }

.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }

/* ===== Display utilities ===== */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

@media (min-width: 768px) {
  .d-md-none  { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex !important; }
}

/* ===== Flex utilities ===== */
.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.align-items-end     { align-items: flex-end !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }

/* ===== Text utilities ===== */
.text-start   { text-align: start !important; }
.text-end     { text-align: end !important; }
.text-center  { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-white   { color: #fff !important; }
.text-black   { color: #000 !important; }
.text-muted   { color: #6c757d !important; }
.fw-bold      { font-weight: 700 !important; }
.fw-normal    { font-weight: 400 !important; }
.fs-1 { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-2 { font-size: calc(1.325rem + .9vw) !important; }
.fs-3 { font-size: calc(1.3rem + .6vw) !important; }
.fs-4 { font-size: calc(1.275rem + .3vw) !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

/* ===== Background utilities ===== */
.bg-white  { background-color: #fff !important; }
.bg-light  { background-color: #f8f9fa !important; }
.bg-dark   { background-color: #212529 !important; }

/* ===== Border utilities ===== */
.border          { border: 1px solid #dee2e6 !important; }
.border-info     { border-color: #0dcaf0 !important; }
.border-warning  { border-color: #ffc107 !important; }
.rounded         { border-radius: .375rem !important; }
.rounded-pill    { border-radius: 50rem !important; }
.rounded-lg      { border-radius: .75rem !important; }
.rounded-circle  { border-radius: 50% !important; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .375rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-success { color: #fff; background-color: #198754; border-color: #198754; }
.btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; }
.btn-danger  { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-info    { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; }
.btn-light   { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-dark    { color: #fff; background-color: #212529; border-color: #212529; }
.btn-sm      { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.btn-lg      { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }

/* ===== Forms ===== */
.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
.form-select {
  display: block;
  width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  appearance: none;
}
.form-label {
  margin-bottom: .5rem;
  display: inline-block;
}

/* ===== Card ===== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .5rem;
}
.card-body   { flex: 1 1 auto; padding: 1rem; }
.card-header { padding: .5rem 1rem; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
.card-footer { padding: .5rem 1rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }
.card-title  { margin-bottom: .5rem; font-size: 1.25rem; }
.card-text   { margin-top: 0; margin-bottom: 1rem; }

/* ===== Alerts ===== */
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .375rem;
}
.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-danger  { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-info    { color: #055160; background-color: #cff4fc; border-color: #b6effb; }

/* ===== Breadcrumb ===== */
.breadcrumb-item + .breadcrumb-item {
  padding-inline-start: .5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: inline-end;
  padding-inline-end: .5rem;
  color: #6c757d;
  content: "/";
}
.breadcrumb-item.active { color: #6c757d; }

/* ===== Dropdown ===== */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: .5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: start;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .375rem;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #1e2125;
  background-color: #e9ecef;
}
.dropdown-item.active { color: #fff; background-color: #0d6efd; }

/* ===== Tables ===== */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}
.table > thead { vertical-align: bottom; }
.table > :not(caption) > * > * {
  padding: .5rem .5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
}
.table > tbody { border-top: 1px solid currentcolor; }

/* ===== Accessibility ===== */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== HARD GUARANTEE: never touch Quran text containers ===== */
/* If any bootstrap rule above tried to descend into the Quran area,
 * these reset rules ensure original surah styling wins. */
.surah-text .row,
.surah-text-one-line .row,
.ayat4tafseer .row {
  margin: 0;
  padding: 0;
}