body.modal-open {
  overflow: hidden;
}

body {
  overflow-x: hidden;
}

.books-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  margin-top: 80px;
  padding: clamp(5rem, 11vw, 8rem) 0;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(120deg, rgba(4, 114, 103, 0.28), transparent 44%),
    linear-gradient(145deg, #07131a, var(--color-primary));
}

.books-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.books-hero-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(4px);
  background: var(--color-accent);
  opacity: .17;
}

.books-hero-orb-one { width: 260px; height: 260px; inset: -80px auto auto -60px; }
.books-hero-orb-two { width: 180px; height: 180px; inset: auto -50px -75px auto; background: #16b8a8; }
.books-hero-content { max-width: 830px; }

.books-eyebrow,
.books-section-header > span {
  display: inline-flex;
  color: var(--color-accent);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.books-hero h1 {
  max-width: 780px;
  margin: 1rem auto;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.books-hero p {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.books-library {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg);
}

.books-section-header {
  max-width: 680px;
  margin-bottom: 2.5rem;
}

.books-section-header h2 {
  margin: .6rem 0;
  color: var(--text-heading);
  font-size: clamp(2rem, 4vw, 3rem);
}

.books-section-header p { color: var(--text-muted); }

.book-card {
  display: grid;
  grid-template-columns: minmax(260px, 390px) 1fr;
  overflow: hidden;
  max-width: 980px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  min-width: 0;
}

.book-card-cover {
  min-height: 510px;
  padding: 3rem;
  border: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #102f3d, #06171e);
}

.book-card-cover:focus-visible,
.book-modal-close:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -5px; }

.book-cover-frame {
  display: block;
  height: 100%;
  transition: transform var(--transition-base);
  filter: drop-shadow(0 22px 20px rgba(0,0,0,.35));
}

.book-card-cover:hover .book-cover-frame { transform: translateY(-6px) rotate(-1deg); }

.book-cover-frame img {
  width: 100%;
  height: 100%;
  max-height: 450px;
  object-fit: contain;
}

.book-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 6vw, 4.5rem);
  min-width: 0;
}

.book-format {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--color-secondary);
  font-size: .9rem;
  font-weight: 700;
}

[data-theme="dark"] .book-format { color: #45cbbc; }

.book-card h3 {
  margin: 1rem 0 .6rem;
  color: var(--text-heading);
  font-family: var(--font-arabic);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.35;
}

.book-author { color: var(--text-muted); font-size: 1.1rem; }
.book-divider { width: 54px; height: 3px; margin: 1.8rem 0; background: var(--color-accent); }
.book-cta { display: inline-flex; gap: .8rem; align-items: center; }

.book-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  box-sizing: border-box;
}

.book-modal.is-open { visibility: visible; opacity: 1; }
.book-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 9, 13, .84); backdrop-filter: blur(8px); }

.book-modal-dialog {
  position: relative;
  width: min(920px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - 2rem));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: translateY(18px) scale(.98);
  transition: transform var(--transition-base);
  min-width: 0;
  box-sizing: border-box;
}

.book-modal.is-open .book-modal-dialog { transform: none; }

.book-modal-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
}

.book-modal-layout { display: grid; width: 100%; max-width: 100%; grid-template-columns: 34% minmax(0, 1fr); min-height: 620px; min-width: 0; overflow: hidden; }

.book-modal-book {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 2rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(150deg, var(--color-primary), #07161e);
}

.book-modal-book img { width: 100%; max-height: 380px; object-fit: contain; filter: drop-shadow(0 20px 16px rgba(0,0,0,.38)); }
.book-modal-book p { margin-top: 1.4rem; font-family: var(--font-arabic); font-size: 1.25rem; font-weight: 600; }
.book-modal-content { display: grid; width: 100%; min-width: 0; align-items: center; padding: clamp(2rem, 5vw, 4rem); }
.book-form-view,
.book-form-view form,
.book-field { width: 100%; min-width: 0; max-width: 100%; }
.book-modal-content h2 { margin: .6rem 0; color: var(--text-heading); font-size: clamp(1.8rem, 4vw, 2.5rem); }
.book-modal-content > div > p { max-width: 100%; margin-bottom: 1.6rem; color: var(--text-muted); overflow-wrap: break-word; }

.book-field { margin-bottom: 1rem; }
.book-field label { display: block; margin-bottom: .4rem; color: var(--text); font-size: .9rem; font-weight: 600; }
.book-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  background: var(--input-bg);
}
.book-field input:focus { border-color: var(--color-accent); outline: 3px solid rgba(242,142,31,.15); }
.book-field input[aria-invalid="true"] { border-color: #dc3545; }

.book-consent {
  display: flex;
  width: 100%;
  gap: .75rem;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.55;
  cursor: pointer;
}
.book-consent input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
}
.book-consent span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  overflow-wrap: break-word;
}
.book-form-message { min-height: 1.4rem; margin: .75rem 0 !important; color: #dc3545 !important; font-size: .85rem; }
.book-submit { width: 100%; justify-content: center; }
.book-submit-loading { display: none; }
.book-submit.is-loading .book-submit-label { display: none; }
.book-submit.is-loading .book-submit-loading { display: inline; }
.book-submit:disabled { cursor: wait; opacity: .72; }

.book-success-view { text-align: center; }
.book-success-icon {
  display: inline-grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  background: var(--color-secondary);
}
.book-download-link { display: inline-flex; justify-content: center; gap: .7rem; align-items: center; width: 100%; }

@media (max-width: 760px) {
  .navbar-container { max-width: 100vw; }
  .navbar-logo img { max-width: 105px; height: auto; }
  .navbar-actions { flex-shrink: 0; gap: .25rem; }
  .navbar-toggle, .navbar-burger { width: 40px; height: 40px; }
  .books-hero { min-height: 360px; margin-top: 70px; }
  .books-hero h1, .books-section-header h2, .books-section-header p { max-width: calc(100vw - 2rem); }
  .book-card { grid-template-columns: 1fr; }
  .book-card-cover { min-height: 390px; padding: 2rem; }
  .book-card-content { align-items: stretch; text-align: center; }
  .book-card-content .book-format { justify-content: center; }
  .book-divider { margin-inline: auto; }
  .book-cta { justify-content: center; }
  .book-modal { padding: .5rem; }
  .book-modal-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: var(--radius-xl); }
  .book-modal-layout { display: block; min-height: 0; }
  .book-modal-book { display: none; }
  .book-modal-content { display: block; box-sizing: border-box; overflow: hidden; padding: 4.2rem 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .book-modal, .book-modal-dialog, .book-cover-frame { transition: none; }
}