/* overrides.css — loaded after built child CSS
   Purpose: quick fixes and compact layout overrides applied after minified stylesheet
*/

/* Fix duplicated divider */
.usp,
.services,
.testi { border-bottom: none !important; }

.seo-content,
.contact,
.footGlass,
footer .footer-inner { border-top: none !important; }

section + section { border-top: none !important; }

/* Compact layout adjustments */
section { padding-top: clamp(20px, 3.5vw, 40px) !important; padding-bottom: clamp(20px, 3.5vw, 40px) !important; }
.section-title { margin-bottom: 12px !important; }
.section-desc { margin-bottom: 12px !important; max-width: 56ch; color: var(--muted) !important; }
.hero { padding-top: clamp(40px, 8vw, 88px) !important; padding-bottom: clamp(32px, 6vw, 72px) !important; }

/* Specific compact overrides */
.usp, .services, .pricing, .testi, .faq, .templates, .templates-shop, .seo-content { padding: 16px 0 !important; }
.contact { padding: 40px 0 !important; }
.wrap.contact .contact-form-wrapper { padding: 24px !important; margin: 0; max-width: 720px; }
.wrap.contact .contact-form-wrapper .form-group { margin-bottom: 12px !important; }

@media (max-width:900px){
  .section-title{margin-bottom:10px}
  .section-desc{margin-bottom:10px}
  .wrap.contact .contact-form-wrapper{padding:20px}
  section{padding-top:20px;padding-bottom:20px}
}

/* CHIPS: position adjusted to avoid covering header gradient */
.chips{ top: calc(var(--headH) + 12px) !important; margin-top: 0 !important; }
@media (max-width:900px){ .chips{ top: calc(var(--headH) + 10px) !important; } }

/* Modern FAQ styles: smooth height-based animation, responsive spacing */
.faq-item summary{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));box-shadow:0 2px 8px rgba(1,6,20,0.15);transition:box-shadow .18s ease,background .18s ease;border-left:4px solid transparent}
.faq-item summary:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:2px}
.faq-item .caret{transition:transform .22s ease;transform:rotate(0deg);font-weight:700}
.faq-item.opened summary .caret{transform:rotate(90deg)}
.faq-item .faq-body{transform:translateY(8px);opacity:0;visibility:hidden;padding:0 18px;transition:transform .32s cubic-bezier(.2,.9,.3,1),opacity .22s ease,visibility .01s linear .32s}
.faq-item.opened .faq-body{transform:translateY(0);opacity:1;visibility:visible;padding:12px 18px}
/* Ensure no legacy max-height overflow rules clip our modern reveal */
.faq-item > div, .faq-item > [itemprop="acceptedAnswer"], .faq-item .faq-body { max-height: none !important; overflow: visible !important; }
.faq-item .faq-body { display:block }
.faq-item h3{margin:0;font-size:1.05rem}
@media (max-width:720px){ .faq-item summary{padding:12px 14px} .faq-item .faq-body{padding:10px 14px} }

/* Testimonial (Apa Kata Klien) — avatar + improved cards */
.testi-grid { gap:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.testi .price-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; gap:12px; border-radius:14px; transition:transform .18s ease, box-shadow .18s ease; }
.testi .price-card .price-body { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.testi .price-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.45); }
.testi-avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); margin:0 auto; margin-bottom:6px }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; margin:0 auto }
.testi-avatar--fallback{ background:linear-gradient(135deg,#62d3ff,#ffd34d); color:#061022 }
.testi-content{ color:var(--muted); line-height:1.6; max-width:48ch; text-align:center }
.testi-cite{ display:block; margin-top:8px; color:var(--muted); font-weight:700; }
@media (max-width:980px){ .testi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){ .testi-grid{ grid-template-columns:repeat(1,minmax(0,1fr)) } .testi-avatar{ width:64px;height:64px } }

/* Pricing package styles */
/* IMPORTANT: stronger selector + !important fallback to ensure responsive 2-column mobile grid,
   add min widths and uniform card sizing to avoid overflow/uneven rows. */
.pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;gap:14px !important;align-items:stretch;grid-auto-rows:1fr}
.pricing .pricing-grid > .price-card, .service-packages .pricing-grid > .price-card, .all-packages .pricing-grid > .price-card{min-width:0;display:flex;flex-direction:column;height:100%}
.service-packages .price-card{padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 26px rgba(0,0,0,0.28);align-items:stretch;text-align:left;display:flex;flex-direction:column}
.service-packages .price-head{font-weight:800;margin-bottom:8px}
.service-packages .price{font-weight:900;font-size:1.15rem;margin-bottom:8px}
.service-packages .pkg-features{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:8px;word-break:break-word}
.service-packages .pkg-features li{padding-left:18px;position:relative}
.service-packages .pkg-features li:before{content:'•';position:absolute;left:0;color:var(--brand)}
.service-packages .price-card.recommended{border:2px solid rgba(98,211,255,0.14);box-shadow:0 18px 40px rgba(2,6,23,0.5)}
/* Pricing card CTA layout: concise final rules */
.service-packages .price-body, .pricing .price-body, .all-packages .price-body { flex:1; display:flex; flex-direction:column }
.pricing .svc-cta, .service-packages .svc-cta, .all-packages .svc-cta { margin-top:auto; width:100%; display:flex; justify-content:center; align-items:center; padding:0; text-align:center }
.pricing .svc-cta .btn, .service-packages .svc-cta .btn, .all-packages .svc-cta .btn { margin:0 auto; display:block; width:160px; max-width:90% }
@media (max-width:480px){ .pricing .svc-cta .btn, .service-packages .svc-cta .btn, .all-packages .svc-cta .btn { width:100%; max-width:none; border-radius:10px; padding:12px 16px } }

/* Responsive: explicit breakpoints to ensure 2 columns on most phones, 1 column on very small screens */
@media (min-width:1400px){ .service-packages .pricing-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:981px) and (max-width:1399px){ .service-packages .pricing-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:481px) and (max-width:980px){ .service-packages .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(2,minmax(140px,1fr)) !important;gap:10px !important} .service-packages .price-card{padding:14px} }
/* Sidebar menu scroll improvements — ensure the mobile sidebar menu can scroll independently
   so items won't be hidden behind header/footer/subscribe blocks. This uses a wrapper that
   fills the available height and enables touch-friendly scrolling. */
.jzv2-sidebar-inner { max-height: 100vh; min-height: 0; overflow: hidden; }
.jzv2-side-menu-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: calc(100vh - 140px); touch-action: pan-y; -ms-touch-action: pan-y; }
.jzv2-side-menu { max-height: none; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; -ms-touch-action: pan-y; }
/* On very small screens reduce reserved space so menu gets more room */
@media (max-width:480px){ .jzv2-side-menu-wrap { max-height: calc(100vh - 120px); } }

/* Sidebar layout tweaks: ensure menu gets priority and actions/footer stay compact */
.jzv2-sidebar-inner { display:flex; flex-direction:column; min-height:0 }
.jzv2-side-menu-wrap { order:0; flex:1 1 auto; min-height:0 }
.jzv2-news { order:1 }
.jzv2-foot { order:2; margin-top:12px; text-align:center }
.jzv2-foot .jzv2-copy{ display:block; text-align:center; margin:0.6rem auto 0; }

/* Compact CTA in footer */
.jzv2-actions.compact { display:flex; justify-content:center; align-items:center; margin-bottom:12px }
.jzv2-actions.compact .btn { padding:12px 18px; border-radius:12px; width:auto; max-width:260px; min-width:160px; font-weight:800; display:inline-flex; justify-content:center; align-items:center; text-align:center; margin:0 auto }
.jzv2-actions.compact .btn.cta-btn { background:linear-gradient(90deg,#62d3ff,#8be6ff); color:#041124; box-shadow:0 10px 30px rgba(98,211,255,0.12) }

/* On small screens slightly reduce CTA size */
@media (max-width:480px){ .jzv2-actions.compact .btn { padding:10px 14px; border-radius:10px; max-width:220px; min-width:120px } }

/* Modern sidebar header & search styles */
/* Left-align brand/logo inside sidebar header; keep close button right-aligned */
.jzv2-header{ position: relative; display:block; text-align:left; margin-bottom:12px; overflow:visible }
.jzv2-header .brand{ display:inline-block; margin:0; padding-left:12px }
/* Use a fixed top offset to avoid clipping at the rounded corner and nudge slightly right */
.jzv2-header #jzv2-close{ position:absolute; right:4px; top:4px; transform:translateY(-2px); z-index:11000; }
/* If further tweaking is needed, adjust `top` (smaller = higher) and `right` (larger = further right) */
.jzv2-search-form{margin-bottom:18px}
.jzv2-search-input-wrap{display:flex;gap:8px;align-items:center}
.jzv2-search-input-wrap input[type="search"]{flex:1;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:var(--text);box-shadow:0 8px 30px rgba(2,6,23,0.45);outline:none}
.jzv2-search-input-wrap input[type="search"]::placeholder{color:rgba(255,255,255,0.42)}
.jzv2-search-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,#62d3ff,#8be6ff);border:0;color:#041124;font-weight:800;box-shadow:0 8px 28px rgba(98,211,255,0.12);cursor:pointer}
.jzv2-search-btn svg{filter:drop-shadow(0 2px 6px rgba(6,40,60,0.35));}
.jzv2-search-suggestions{margin-top:8px;background:linear-gradient(180deg,#061426,#081a2a);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(2,6,23,0.6);max-height:320px;overflow:auto}
.jzv2-search-suggestions .item{padding:10px 12px;border-radius:10px;color:var(--text);cursor:pointer;margin-bottom:6px;background:rgba(255,255,255,0.01);}
.jzv2-search-suggestions .item[aria-selected="true"], .jzv2-search-suggestions .item:hover{background:rgba(98,211,255,0.06);}
@media (max-width:480px){ .jzv2-search-input-wrap input[type="search"]{padding:10px 12px;border-radius:12px} .jzv2-search-btn{padding:8px 10px} }
/* Service tier grid: 4 cols on desktop, 2 cols on mobile */
.service-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.tier-card{padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03);min-height:220px;display:flex;flex-direction:column}
.tier-head{font-weight:800;margin-bottom:8px}
.tier-price{font-weight:900;font-size:1.15rem;margin-bottom:8px}
.tier-features{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:8px}
.tier-cta{margin-top:auto}
@media (max-width:720px){ .service-tier-grid{grid-template-columns:repeat(2,1fr)} .tier-card{min-height:200px;padding:14px} }
@media (max-width:420px){ .service-tier-grid{grid-template-columns:repeat(1,1fr)} }
@media (max-width:360px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(1,1fr) !important} .service-packages .price-card{padding:12px} }

/* Pricing page hero specifics */
.hero-pricing{background:linear-gradient(180deg, rgba(6,16,34,0.9), rgba(6,16,34,0.85));color:#fff;padding:48px 0;border-radius:12px;margin-bottom:18px;border:1px solid rgba(255,255,255,0.03)}
.hero-pricing .hero-grid{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:48px;align-items:start;align-content:center}
.hero-pricing .hero-text{padding:6px 6px;display:flex;flex-direction:column;gap:18px;justify-content:flex-start;max-width:64ch}
/* Large screens: give image a stable column width */
@media (min-width:1200px){ .hero-pricing .hero-grid{grid-template-columns:1fr 520px;gap:56px} }
/* Ensure hero keeps two columns even on small phones (min image width preserved) */
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(220px,420px);gap:28px}
  .hero-pricing .hero-title{font-size:clamp(1.6rem,4.6vw,2.6rem)}
  .hero-pricing .hero-lead{font-size:0.98rem}
}
@media (max-width:420px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(180px,320px);gap:18px}
  .hero-pricing .hero-title{font-size:1.4rem}
  .hero-pricing .hero-lead{font-size:0.9rem}
}
.hero-pricing .hero-title{font-size:clamp(2.4rem,6.6vw,4.2rem);margin:0 0 12px;line-height:1.02;font-weight:900;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0 0 18px;color:var(--muted);max-width:64ch;font-size:1.05rem}
.hero-pricing .hero-features{display:flex;gap:12px;margin-top:10px;margin-bottom:14px;flex-wrap:wrap}
.hero-pricing .hero-features .pill{padding:10px 18px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:#e6f7ff;font-weight:700;font-size:0.98rem}
.hero-pricing .hero-features .pill:first-child{background:linear-gradient(90deg,#0fd3ff,#4cc9ff);color:#04182a;box-shadow:0 6px 30px rgba(9,49,72,0.35)}
.hero-pricing .hero-actions{display:none !important}
/* Desktop: primary on left, secondary pushed to right for compact hero */

/* Button visuals */
.hero-pricing .hero-actions .btn-primary{padding:14px 34px;border-radius:24px;font-weight:900;background:linear-gradient(90deg,#19c7ff,#1faaff);color:#041124;box-shadow:0 10px 30px rgba(15,89,124,0.35);border:0}
.hero-pricing .hero-actions .btn-outline{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:#dfe9f5;padding:12px 20px;border-radius:20px}
/* Mobile: stacked full-width */
@media (max-width:720px){
  .hero-pricing .hero-actions{flex-direction:column;align-items:stretch}
  .hero-pricing .hero-actions .btn-primary{width:100%}
  .hero-pricing .hero-actions .btn-outline{width:100%;margin-left:0;margin-top:10px}
}
.hero-pricing .hero-media{display:block}
.hero-pricing .hero-media{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:6px}
.hero-pricing .hero-image{width:100%;max-width:520px;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(2,6,23,0.65);display:block;border:10px solid rgba(255,255,255,0.03);object-fit:cover}
.hero-pricing .hero-placeholder{height:300px;min-width:260px;border-radius:18px;background:linear-gradient(135deg,#0e1a2b,#08101a)}
@media (max-width:980px){ .hero-pricing .hero-image{max-width:420px} }
@media (max-width:720px){ .hero-pricing .hero-image{max-width:340px} }
@media (max-width:420px){ .hero-pricing .hero-image{max-width:300px} }
@media (max-width:980px){ .hero-pricing .hero-title{font-size:clamp(1.8rem,6vw,2.6rem); } .hero-pricing .hero-placeholder{height:260px} }
@media (max-width:480px){ .hero-pricing .hero-title{font-size:1.6rem} .hero-pricing .hero-lead{font-size:0.98rem} }
@media (max-width:980px){ .hero-pricing .hero-grid{grid-template-columns:1fr 340px} }
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr; }
  .hero-pricing .hero-media{order:-1;margin-bottom:18px;justify-content:center;padding:0}
  /* Make hero image full-width inside its column and reduce heavy framing so it blends */
  .hero-pricing .hero-image{width:100%;max-width:100%;border-radius:14px;border:8px solid rgba(255,255,255,0.02);box-shadow:0 18px 44px rgba(2,6,23,0.45)}
  .hero-pricing .hero-placeholder{height:auto;min-height:160px}
  .hero-pricing .hero-inner{align-items:flex-start}
}

/* Extra override applied when JS detects small viewport to avoid caching issues */
.jz-mobile-hero .hero-pricing .hero-media{justify-content:center!important;padding:0!important}
.jz-mobile-hero .hero-pricing .hero-media .hero-image{display:block;width:100%!important;max-width:100%!important;border-radius:12px!important;border:6px solid rgba(255,255,255,0.02)!important;box-shadow:0 14px 36px rgba(2,6,23,0.45)!important;margin:0 auto!important}
.jz-mobile-hero .hero-pricing .wrap{padding-left:12px!important;padding-right:12px!important}
.jz-mobile-hero .hero-pricing .hero-inner{align-items:flex-start!important}
@media (max-width:480px){ .hero-pricing .hero-grid{grid-template-columns:1fr} .hero-pricing .hero-title{font-size:1.6rem} }

/* Pricing page hero */
.hero-pricing{background-size:cover;background-position:center;color:#fff;padding:64px 0;border-radius:12px;margin-bottom:18px}
.hero-pricing .hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-pricing .hero-title{font-size:clamp(1.4rem,2.6vw,2.2rem);margin:0 0 10px;line-height:1.03;font-weight:700;max-width:48ch;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:980px){.hero-pricing .hero-inner{flex-direction:column;align-items:flex-start}}
.hero-pricing .btn-primary{background:var(--brand);border:0;padding:12px 18px;border-radius:10px;color:#042033}