/* Amanah — International layout system (8px grid, max-width, responsive) */

:root {
  --layout-max: 1180px;
  --layout-gutter: clamp(16px, 4vw, 24px);
  --layout-section-y: clamp(40px, 6vw, 72px);
  --layout-gap: 16px;
  --layout-gap-lg: 24px;
  --layout-radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  line-height: 1.5;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Nav & header alignment */
.nav-inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}

/* Consistent page shell */
.booket-shell,
.site-details-inner,
.publisher-spotlight,
.faq-wrap,
.contact-wrap {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}

/* Page header (inner pages) */
.page-hero {
  padding: clamp(32px, 5vw, 56px) var(--layout-gutter);
  text-align: center;
  border-bottom: 1px solid var(--brd, rgba(255, 255, 255, 0.08));
  background: var(--hero-bg, var(--bg));
}
.page-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glt, var(--gold));
  margin-bottom: 8px;
}
.page-hero-title {
  font-family: 'Amiri', serif;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.15;
  color: var(--tx);
  margin: 0 0 10px;
}
.page-hero-lead {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--tx2);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.65;
}

/* Nav active state */
.nav-links a.is-active {
  background: var(--s2, rgba(255, 255, 255, 0.06)) !important;
  color: var(--glt, var(--gold)) !important;
}

/* Home featured strip */
.home-featured {
  padding: var(--layout-section-y) 0;
}
.home-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--layout-gap-lg);
  align-items: stretch;
}
.home-featured-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--layout-radius);
  border: 1px solid var(--brd);
  background: var(--sf);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.home-featured-card:hover {
  border-color: var(--gbrd);
  transform: translateY(-2px);
}
.home-featured-card h3 {
  font-family: 'Amiri', serif;
  font-size: 20px;
  color: var(--tx);
  margin: 0;
}
.home-featured-card p {
  font-size: 13px;
  color: var(--tx2);
  margin: 0;
  flex: 1;
}
.home-featured-card span {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
}

.home-cta-band {
  text-align: center;
  padding: clamp(36px, 6vw, 64px) var(--layout-gutter);
}
.home-cta-band .booket-hero-btn {
  display: inline-flex;
  margin: 8px;
}

/* Catalog page alignment */
.booket-main {
  padding-bottom: var(--layout-section-y);
}
.booket-catalog-head {
  text-align: center;
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: 8px;
}
.search-wrap,
.cat-tabs-wrap,
.booket-catalog-section {
  margin-bottom: var(--layout-gap-lg);
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--layout-gap-lg) var(--layout-gap);
  align-items: start;
}
.book-card,
.pick-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.book-info,
.pick-card .pick-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.book-card-foot {
  margin-top: auto;
}

/* Sell / seller registration page */
.sell-page.booket-shell {
  padding: var(--layout-section-y) var(--layout-gutter);
}
.sell-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.sell-section-head {
  text-align: center;
  margin-bottom: var(--layout-gap-lg);
}
.sell-req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--layout-gap-lg);
}
.sell-req-card {
  padding: 22px;
  border-radius: var(--layout-radius);
  border: 1px solid var(--brd);
  background: var(--sf);
  text-align: center;
}
.sell-req-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--gold, #AB7743);
}
.sell-req-icon .ico {
  width: 26px;
  height: 26px;
}
.sell-req-card h3 {
  font-family: 'Amiri', serif;
  font-size: 18px;
  color: var(--tx);
  margin: 0 0 8px;
}
.sell-req-card p {
  font-size: 13px;
  color: var(--tx2);
  margin: 0;
  line-height: 1.55;
}
.sell-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--layout-gap-lg);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sell-steps li {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--layout-radius);
  border: 1px solid var(--brd);
  background: var(--sf);
}
.sell-steps strong {
  color: var(--gold);
  font-size: 14px;
}
.sell-steps span {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.55;
}
.sell-cta-inline {
  text-align: center;
}
.sell-fees {
  padding-bottom: var(--layout-section-y);
}
.sell-fees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--layout-gap);
  text-align: center;
}
.sell-fee-card {
  padding: 20px 14px;
  border-radius: var(--layout-radius);
  border: 1px solid var(--brd);
  background: var(--sf);
}
.sell-fee-card span {
  display: block;
  font-size: 12px;
  color: var(--tx2);
  margin-bottom: 6px;
}
.sell-fee-card strong {
  font-size: 22px;
  color: var(--gold);
}
.sell-contact {
  padding-bottom: var(--layout-section-y);
}
.sell-categories {
  padding: var(--layout-section-y) 0;
}

/* Help page */
.help-page .faq-wrap {
  padding: var(--layout-section-y) var(--layout-gutter);
  max-width: 780px;
}
.help-page .contact-wrap {
  padding-bottom: var(--layout-section-y);
}

/* Footer alignment */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--layout-gap-lg);
  align-items: start;
}
.footer-bottom {
  text-align: center;
  padding: 20px var(--layout-gutter);
}

/* Mobile bottom bar pages */
@media (max-width: 640px) {
  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .curated-strip,
  .marketplace-cat-row {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}