/* =================== THEME VARS =================== */
:root{
  --ink:#0f172a;           /* text primar */
  --muted:#475569;         /* text sekondar */
  --muted-dark:#cbd5e1;    /* text sekondar mbi sfond të errët */
  --stroke:#e5e7eb;        /* bordura të lehta */
  --acc:#065f46;           /* green-800 (brand) */
  --acc-2:#10b981;         /* emerald-500 (gradient) */
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.92);
  --brand-h: 64px;         /* lartësia e header-it sticky */
  --maxw: 1200px;
}

*{ box-sizing:border-box }
body{ color:var(--ink); margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--acc-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; }

/* =================== HEADER (GLASS) =================== */
.site-header.fancy{
  position:sticky; top:0; z-index:60;
  background: var(--glass);
  backdrop-filter: saturate(130%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header.fancy.scrolled{
  background: var(--glass-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; min-height:var(--brand-h); gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ max-height:34px; height:auto; width:auto; display:block; }
.brand-name{ color:var(--ink); font-weight:700; letter-spacing:.2px; }
@media (max-width:480px){ .brand-name{ display:none; } }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:12px; color:var(--ink);
  text-decoration:none; font-weight:600; letter-spacing:.1px;
}
.nav a:hover{ background:#f3f4f6; }
.nav a.active{ background: var(--acc); color:#fff; }
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg,var(--acc),var(--acc-2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  border-radius:2px;
}
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }

/* CTA + Admin */
.btn-cta{
  background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#fff; text-decoration:none; padding:10px 16px; border-radius:999px;
  font-weight:700; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 20px rgba(6,95,70,.18);
}
.nav .nav-admin{
  background:#fff; color:var(--acc); border:1px solid var(--acc);
  padding:10px 12px; border-radius:12px; font-weight:600; text-decoration:none;
}

/* Burger */
.menu-toggle{
  display:none; width:40px; height:40px; border:1px solid var(--stroke); border-radius:12px;
  background:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--acc); margin:4px 0; transition:.25s; }
.menu-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width:960px){
  .menu-toggle{ display:flex; }
  .nav{
    position:fixed; right:16px; left:16px; top:calc(var(--brand-h) + 8px);
    display:none; flex-direction:column; align-items:stretch; gap:6px; padding:10px;
    background:#fff; border:1px solid var(--stroke); border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.12); z-index:65;
  }
  .site-header.open .nav{ display:flex; }
}

/* =================== PAGE LAYOUT SPACING =================== */
.page-home .wrap,
.page-book .wrap,
.page-about .wrap,
.page-contact .wrap{
  padding-top: calc(var(--brand-h) + 24px);
}

/* =================== HERO / LANDING =================== */
.page-home .hero-landing{
  position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.page-home .hero-landing .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.42) 100%);
}
.page-home .hero-inner{ position:relative; z-index:2; text-align:left; color:#fff; max-width:980px; padding:24px; }
.page-home .hero-inner h1{ margin:12px 0 6px; font-size: clamp(30px, 4.8vw, 46px); line-height:1.06; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.page-home .hero-sub{ opacity:.97; font-size: clamp(15px, 2.2vw, 18px); }
.page-home .promo-badge{
  display:inline-block; margin:12px 0 0; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.12); color:#f8fafc; border:1px solid rgba(255,255,255,.35);
  font-weight:700;
}
@media (min-width: 900px){
  .page-home .hero-landing{ padding-top: calc(var(--brand-h) + 50px); }
  .page-home .hero-inner{ margin-top: 8vh; }
  .page-home .promo-badge{ margin-top: 14px; }
}

/* =================== FORM PRIMITIVES =================== */
.input, select, textarea, input[type="date"]{
  width:100%; padding:10px 12px; border:1px solid #dbe1e8; border-radius:10px; background:#fff; color:var(--ink); font:inherit;
}
.btn-primary{
  background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn-ghost{
  background:#fff; color:var(--ink); border:1px solid var(--stroke); padding:10px 14px; border-radius:12px; cursor:pointer; text-decoration:none;
}
.muted{ color:var(--muted); }
.banner.warn{ background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:10px 12px; }

/* =================== FOOTER =================== */
.site-footer.pretty{
  background:#0b1220; color:#e5e7eb; padding:32px 0 20px; border-top:1px solid rgba(255,255,255,.06); margin-top:24px;
}
.site-footer.pretty .muted{ color:var(--muted-dark); }
.foot-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:10px; }
.foot-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.foot-brand img{ max-height:28px; height:auto; width:auto; }
.site-footer.pretty a{ color:#bbf7d0; }
.site-footer.pretty a:hover{ color:#86efac; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }

/* =================== ABOUT PAGE =================== */
.page-about body.soft-green{
  background: radial-gradient(1200px 600px at 10% 0%, #c8f7df 0%, rgba(200,247,223,.6) 35%, transparent 70%),
              linear-gradient(180deg,#e5ffe8 0%, #ccf8e0 35%, #e5ffe8 100%);
}
.page-about .about-hero .tag{
  display:inline-block; font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
}
.page-about .about-prose{ max-width:70ch; }

.feature-row{
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1.1fr 1fr;
  margin-bottom:18px;
}
.feature-row .img.cap{ max-width:100%; justify-self:stretch; position:relative; }
.feature-row img,
.feature-row video{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:14px; border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.feature-row video{ aspect-ratio:16/9; }
@media (max-width:980px){
  .feature-row{ grid-template-columns:1fr; }
  .feature-row .img.cap{ max-width:100%; }
}

/* ===== Album (1 foto e madhe sipër + thumbnails poshtë) ===== */
.album-wrap{ position:relative; }
.album-main{
  width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.album-main img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.album-thumbs{
  margin-top:10px; display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width: thin;
}
.album-thumbs::-webkit-scrollbar{ height:8px }
.album-thumbs::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px }
.album-thumbs img{
  width:88px; height:62px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; flex:0 0 auto;
  cursor:pointer; opacity:.92; transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.album-thumbs img:hover{ opacity:1; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.album-thumbs img.is-active{ outline:2px solid #10b981; outline-offset:2px; }

/* ===== TIPS SECTION ME KONTRAST TË SIGURT ===== */
.tips {
  margin: 32px auto 16px;
  max-width: 1100px;
  padding: 0 16px;
}

.tip-item {
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

.tip-item h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text) !important; /* Forcim ngjyre */
  font-weight: 700;
}

.tip-item p {
  margin: 0;
  font-size: 14px;
  color: var(--text) !important; /* Forcim ngjyre */
  line-height: 1.5;
}

/* Sigurohu që dark mode nuk ndryshon ngjyrën e tekstit në tips */
@media (prefers-color-scheme: dark) {
  .tip-item h4,
  .tip-item p {
    color: #1e293b !important; /* Blu e errët - kontrast i mirë edhe në dark mode */
  }
}
/* ===== Lightbox ===== */
.lb{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.9);
}
.lb.open{ display:flex; }
.lb-img{
  max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 80px rgba(0,0,0,.4);
}
.lb-close, .lb-prev, .lb-next{
  position:fixed; top:50%; transform:translateY(-50%); color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:10px 12px; cursor:pointer; user-select:none; font-size:16px;
}
.lb-close{ top:24px; right:24px; transform:none; }
.lb-prev{ left:24px; }
.lb-next{ right:24px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(255,255,255,.2); }