/* =====================================================
   Jassas Layout
   FILE: /public_html/assets/css/jassas-layout.css
   ===================================================== */

/* Main page wrapper */
.jl-main{
  width:min(calc(100% - 24px), var(--js-wrap));
  margin-inline:auto;
  padding:var(--js-space-6) 0 calc(var(--js-bottom-nav-h) + var(--js-space-6));
  display:grid;
  gap:var(--js-space-6);
}

/* Topbar */
.jl-topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--js-border);
}

[data-theme="dark"] .jl-topbar{
  background:rgba(11,18,32,.84);
}

.jl-topbarInner{
  width:min(calc(100% - 24px), var(--js-wrap));
  margin-inline:auto;
  min-height:var(--js-topbar-h);
  display:flex;
  align-items:center;
}

.jl-topbarRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--js-space-4);
  flex-wrap:wrap;
}

/* Brand */
.jl-brand{
  display:grid;
  gap:2px;
  line-height:1.05;
}

.jl-brandAr{
  font-size:20px;
  font-weight:var(--js-fw-bold);
  color:var(--js-text-strong);
}

.jl-brandEn{
  font-size:12px;
  font-weight:var(--js-fw-semibold);
  color:var(--js-text-soft);
  direction:ltr;
  unicode-bidi:isolate;
}

/* Top tools */
.jl-topTools{
  display:flex;
  align-items:center;
  gap:var(--js-space-3);
  flex-wrap:wrap;
}

.jl-toolBtn{
  min-height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--js-radius-pill);
  border:1px solid var(--js-border);
  background:var(--js-surface);
  color:var(--js-text-strong);
  font-size:var(--js-text-sm);
  font-weight:var(--js-fw-bold);
  box-shadow:var(--js-shadow-xs);
  transition:.18s ease;
}

.jl-toolBtn:hover{
  border-color:var(--js-primary);
  color:var(--js-primary);
  transform:translateY(-1px);
}

/* Hero */
.jl-hero{
  background:
    radial-gradient(680px 220px at 50% 0%, rgba(37,99,235,.12), transparent 68%),
    linear-gradient(180deg, var(--js-surface) 0%, var(--js-surface-soft) 100%);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-3xl);
  box-shadow:var(--js-shadow-lg);
  padding:clamp(20px, 4vw, 34px);
}

[data-theme="dark"] .jl-hero{
  background:
    radial-gradient(680px 220px at 50% 0%, rgba(59,130,246,.16), transparent 68%),
    linear-gradient(180deg, #13203a 0%, #101a2d 100%);
}

.jl-heroTitle{
  margin:0;
  font-size:clamp(30px, 4.6vw, 52px);
  line-height:1.18;
  font-weight:var(--js-fw-bold);
  color:var(--js-text-strong);
}

.jl-heroText{
  margin:0;
  font-size:clamp(15px, 2.2vw, 18px);
  line-height:var(--js-leading-relaxed);
  font-weight:var(--js-fw-semibold);
  color:var(--js-text-soft);
  max-width:760px;
}

/* Search area */
.jl-searchWrap{
  display:grid;
  gap:var(--js-space-4);
}

.jl-searchRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:var(--js-space-3);
  align-items:center;
}

.jl-searchBox{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border:1px solid var(--js-border);
  background:var(--js-surface);
  border-radius:var(--js-radius-pill);
  box-shadow:var(--js-shadow-sm);
}

.jl-searchBox:focus-within{
  border-color:var(--js-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.jl-searchIcon{
  font-size:18px;
  color:var(--js-text-soft);
  flex:0 0 auto;
}

.jl-searchInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--js-text-strong);
  font-size:var(--js-text-md);
  font-weight:var(--js-fw-semibold);
}

.jl-searchInput::placeholder{
  color:var(--js-text-soft);
}

.jl-searchBtn,
.jl-searchGhost{
  min-height:58px;
  padding:0 20px;
  border-radius:var(--js-radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--js-text-sm);
  font-weight:var(--js-fw-bold);
  transition:.18s ease;
  white-space:nowrap;
}

.jl-searchBtn{
  background:linear-gradient(180deg, var(--js-primary) 0%, var(--js-primary-hover) 100%);
  color:#fff;
  box-shadow:var(--js-shadow-md);
}

.jl-searchGhost{
  background:var(--js-surface);
  color:var(--js-text-strong);
  border:1px solid var(--js-border);
  box-shadow:var(--js-shadow-xs);
}

.jl-searchBtn:hover,
.jl-searchGhost:hover{
  transform:translateY(-1px);
}

/* Chips */
.jl-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.jl-chip{
  min-height:42px;
  padding:0 14px;
  border-radius:var(--js-radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:var(--js-fw-bold);
  color:var(--js-text);
  background:var(--js-surface);
  border:1px solid var(--js-border);
  box-shadow:var(--js-shadow-xs);
}

.jl-chipSoft{
  background:var(--js-primary-soft);
  color:var(--js-primary);
  border-color:transparent;
}

.jl-chip.active{
  background:linear-gradient(180deg, var(--js-primary) 0%, var(--js-primary-hover) 100%);
  color:#fff;
  border-color:transparent;
}

/* Generic section box */
.jl-sectionBox{
  background:var(--js-surface);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-2xl);
  padding:clamp(18px, 2.8vw, 26px);
  box-shadow:var(--js-shadow-sm);
}

.jl-sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--js-space-4);
  flex-wrap:wrap;
  margin-bottom:var(--js-space-5);
}

.jl-sectionTitle{
  margin:0;
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.25;
  font-weight:var(--js-fw-bold);
  color:var(--js-text-strong);
}

.jl-sectionSub{
  font-size:var(--js-text-sm);
  font-weight:var(--js-fw-semibold);
  color:var(--js-text-soft);
}

.jl-link{
  font-size:var(--js-text-sm);
  font-weight:var(--js-fw-bold);
  color:var(--js-primary);
}

/* Category grid */
.jl-categories{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--js-space-4);
}

.jl-category{
  background:var(--js-surface-soft);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-xl);
  padding:18px 14px;
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
  box-shadow:var(--js-shadow-xs);
  transition:.18s ease;
}

.jl-category:hover{
  transform:translateY(-2px);
  border-color:var(--js-primary);
  box-shadow:var(--js-shadow-sm);
}

.jl-categoryIcon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--js-primary-soft);
  color:var(--js-primary);
  font-size:22px;
  font-weight:var(--js-fw-bold);
}

.jl-categoryTitle{
  font-size:var(--js-text-md);
  font-weight:var(--js-fw-bold);
  color:var(--js-text-strong);
}

/* Content grids */
.jl-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--js-space-5);
}

.jl-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--js-space-5);
}

/* Listing cards */
.jl-listingCard{
  background:var(--js-surface);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-2xl);
  overflow:hidden;
  box-shadow:var(--js-shadow-sm);
  display:flex;
  flex-direction:column;
  transition:.18s ease;
}

.jl-listingCard:hover{
  transform:translateY(-3px);
  box-shadow:var(--js-shadow-lg);
}

.jl-listingThumb,
.jl-listingImg{
  height:190px;
  background:
    linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.04)),
    linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border-bottom:1px solid var(--js-border);
}

[data-theme="dark"] .jl-listingThumb,
[data-theme="dark"] .jl-listingImg{
  background:
    linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.08)),
    linear-gradient(135deg, #162235 0%, #101b2f 100%);
}

.jl-listingBody{
  padding:var(--js-space-5);
  display:grid;
  gap:var(--js-space-4);
}

.jl-listingMeta{
  display:grid;
  gap:10px;
}

.jl-metaItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.jl-metaLabel{
  font-size:var(--js-text-sm);
  color:var(--js-text-soft);
  font-weight:var(--js-fw-semibold);
}

.jl-metaValue{
  font-size:var(--js-text-md);
  color:var(--js-text-strong);
  font-weight:var(--js-fw-bold);
  text-align:end;
}

/* Bottom nav */
.jl-bottomNav{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:70;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--js-border);
}

[data-theme="dark"] .jl-bottomNav{
  background:rgba(11,18,32,.90);
}

.jl-bottomNavInner{
  width:min(calc(100% - 8px), var(--js-wrap));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.jl-navBtn{
  min-height:52px;
  padding:0 10px;
  border-radius:18px;
  border:1px solid var(--js-border);
  background:var(--js-surface);
  color:var(--js-text-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  font-weight:var(--js-fw-bold);
  box-shadow:var(--js-shadow-xs);
}

.jl-navBtn.active{
  background:linear-gradient(180deg, var(--js-primary) 0%, var(--js-primary-hover) 100%);
  color:#fff;
  border-color:transparent;
}

.jl-navBtnMain{
  color:var(--js-primary);
  border-color:rgba(37,99,235,.18);
}

/* Responsive */
@media (max-width:980px){
  .jl-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .jl-categories{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .jl-main{
    width:min(calc(100% - 16px), var(--js-wrap));
    padding-top:var(--js-space-4);
    gap:var(--js-space-4);
  }

  .jl-topbarInner{
    width:min(calc(100% - 16px), var(--js-wrap));
  }

  .jl-topbarRow{
    gap:10px;
  }

  .jl-searchRow{
    grid-template-columns:1fr;
  }

  .jl-grid-2,
  .jl-grid-3,
  .jl-categories{
    grid-template-columns:1fr;
  }

  .jl-listingThumb,
  .jl-listingImg{
    height:170px;
  }

  .jl-bottomNavInner{
    gap:8px;
  }

  .jl-navBtn{
    min-height:48px;
    border-radius:16px;
    font-size:12px;
    padding:0 6px;
  }
}