/* ==========================================================================
   Jingle Bell — site-wide fixes on top of the Kinez template (main.css)
   Loaded on every public page by the server renderer.
   ========================================================================== */

:root {
  --jb-orange: #F15F25;
  --jb-purple: #6754E9;
  --jb-ink: #151515;
  --jb-ann-h: 0px;
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; }
img { max-width: 100%; }

/* ---------- Announcement bar ---------- */
.jb-announcement {
  position: relative; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 40px; padding: 8px 16px;
  background: var(--jb-orange); color: #fff; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.jb-announcement a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.jb-has-announcement { --jb-ann-h: 40px; }
body.jb-has-announcement .header-style1:not(.sticky) { top: calc(56px + var(--jb-ann-h)); }

/* ---------- Header: logo / buttons / hamburger ---------- */
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.header-main .header-logo { flex-shrink: 0; }
.header-main .header-right { flex-shrink: 0; gap: 12px !important; }
.header-main .mean__menu-wrapper { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.jb-follow { margin-right: 4px; }

.header__hamburger .sidebar__toggle {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.2s;
}
.header-section-style4 .header__hamburger .sidebar__toggle,
.sticky:not(.header-style1) .header__hamburger .sidebar__toggle { background: #fff; border-color: rgba(21, 21, 21, 0.12); }
.header__hamburger .sidebar__toggle img { width: 24px !important; height: auto; }

@media (max-width: 1399px) {
  .header-main .main-menu ul li { margin-inline-end: 16px; }
  .header-main .main-menu ul li a { font-size: 16px; }
}
@media (max-width: 1199px) {
  .header-main { min-height: 64px; }
  .header-main .header-logo img, .header-logo img { max-height: 42px !important; max-width: 150px !important; }
  .jb-portal-btn { display: none !important; }
}
@media (max-width: 575px) {
  .header-section .container { padding-left: 16px; padding-right: 16px; }
  .header-main { min-height: 58px; gap: 12px; }
  .header-main .header-logo img, .header-logo img { max-height: 38px !important; max-width: 128px !important; }
  .header-main .header-right { gap: 10px !important; }
  .header-main .header-right .jb-cta-btn { padding: 9px 14px !important; font-size: 14px !important; gap: 6px; }
  .header-main .header-right .jb-cta-btn .icon_wrapper { display: none; }
  .header__hamburger .sidebar__toggle { width: 42px; height: 42px; }
}
@media (max-width: 379px) {
  .header-main .header-right .jb-cta-btn { display: none !important; }
}

/* ---------- Off-canvas mobile menu ---------- */
.offcanvas__info { width: min(400px, 88vw) !important; border-left: 0 !important; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18); }
.offcanvas__info .offcanvas__wrapper { padding: 24px 22px 40px; }
.offcanvas__wrapper .offcanvas__content .offcanvas__close { background: transparent !important; border-radius: 50%; }
.offcanvas__close button {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--jb-orange); color: #fff; display: flex; align-items: center; justify-content: center;
}
.offcanvas__contact ul li { align-items: flex-start !important; gap: 12px; margin-bottom: 14px; }
.offcanvas__contact-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--jb-orange); }
.offcanvas__contact-text, .offcanvas__contact-text a { font-size: 15px; line-height: 1.45; color: var(--jb-ink); word-break: break-word; text-transform: none !important; }
.offcanvas__contact .header-button a { width: 100%; padding: 14px 18px; }
/* Social links in the mobile menu: one row of equal pill buttons */
.offcanvas__contact .header-top-social {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important;
  justify-content: stretch !important; gap: 8px !important; margin-top: 28px !important; width: 100%;
}
.offcanvas__contact .header-top-social a {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 6px; border-radius: 999px; background: #fff; color: var(--jb-ink); font-weight: 600; font-size: 13px;
  line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 8px rgba(30, 20, 80, 0.06); transition: transform 0.15s, box-shadow 0.15s;
}
.offcanvas__contact .header-top-social a i { font-size: 15px; }
.offcanvas__contact .header-top-social a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 20, 80, 0.12); }
.offcanvas__contact .header-top-social a:nth-child(1) i { color: #1877f2; }
.offcanvas__contact .header-top-social a:nth-child(2) i { color: #e1306c; }
.offcanvas__contact .header-top-social a:last-child i.fa-whatsapp { color: #25d366; }
@media (max-width: 340px) { .offcanvas__contact .header-top-social a { font-size: 0; gap: 0; } .offcanvas__contact .header-top-social a i { font-size: 17px; } }
.mean-container .mean-nav { margin-top: 8px; background: transparent; }
.mean-container .mean-nav ul li a { padding: 13px 4px !important; font-size: 16px !important; font-weight: 600 !important; color: var(--jb-ink) !important; border-top: 1px solid rgba(21, 21, 21, 0.08) !important; }
.mean-container .mean-nav ul li li a { padding-left: 18px !important; font-weight: 500 !important; font-size: 15px !important; opacity: 0.85; }
.mean-container .mean-nav ul li a.mean-expand { height: 46px !important; width: 46px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; background: transparent !important; top: 0 !important; }
.mean-container .mean-nav ul li a i { display: none; }

/* ---------- Mobile section spacing ---------- */
@media (max-width: 767px) {
  .section-padding { padding: 64px 0 !important; }
  .space-top { padding-top: 64px !important; }
  .space-bottom { padding-bottom: 64px !important; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(26px, 6.6vw, 34px) !important; line-height: 1.2 !important; }
  .banner-breadcrumb-section { padding-top: 40px; padding-bottom: 40px; }
  .common_btn { white-space: normal; }
}
@media (max-width: 575px) {
  .section-padding { padding: 52px 0 !important; }
  .space-top { padding-top: 52px !important; }
  .space-bottom { padding-bottom: 52px !important; }
}

/* Decorative template shapes must never cause horizontal scrolling */
.footer-section { overflow: hidden; }
@media (max-width: 991px) {
  [class*="shape"].position-absolute, img[class*="shape"], .updowns, .cir36 { max-width: 40vw; }
  /* ...except the full-width wave/background shapes */
  img.bread-shape, img.hero-shape1, img.round-hero-shape, img.program-bg-shape,
  .bread-shape, .hero-shape1, .round-hero-shape, .program-bg-shape { max-width: 100%; }
}

/* Custom cursor only on precise pointers */
@media (hover: none), (pointer: coarse) {
  .mouse-follower { display: none !important; }
}

/* ---------- Footer ---------- */
.jb-footer .footer-info-item a, .jb-footer .footer-info-item .jb-footer-text { color: #fff; opacity: 0.92; line-height: 1.55; }
.jb-footer .footer-bottom-link { gap: 6px 22px; }
.jb-footer .footer-bottom-link a { margin: 0 !important; }
@media (max-width: 767px) {
  .jb-footer .footer-bottom { flex-direction: column; align-items: flex-start !important; text-align: left; }
  .jb-footer .footer-top-area { flex-direction: column; }
}

/* ---------- Floating WhatsApp ---------- */
.jb-whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 999;
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 18px 0 14px; border-radius: 999px;
  background: #25D366; color: #fff !important; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35); text-decoration: none;
  transition: transform 0.2s;
}
.jb-whatsapp-fab:hover { transform: translateY(-2px); }
.jb-whatsapp-fab i { font-size: 26px; }
@media (max-width: 575px) { .jb-whatsapp-fab { width: 54px; height: 54px; padding: 0; justify-content: center; right: 14px; bottom: 14px; } .jb-whatsapp-fab span { display: none; } }
.back-to-top, #back-top { bottom: 84px !important; }

/* ---------- Forms ---------- */
.jb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.jb-form-status:empty { display: none; }
.jb-form-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.jb-form-status.is-ok { background: #e8f8ee; color: #166534; border: 1px solid #bbf7d0; }
.jb-form-status.is-error { background: #fdecec; color: #991b1b; border: 1px solid #fecaca; }
form[data-form] button[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Content helpers used by the renderer ---------- */
.jb-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.jb-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.jb-list li i { color: var(--jb-orange); margin-top: 5px; }
.jb-rich { font-size: 17px; line-height: 1.75; color: #3f3f46; }
.jb-rich h2, .jb-rich h3 { margin: 28px 0 12px; color: var(--jb-ink); }
.jb-rich p { margin-bottom: 16px; }
.jb-rich ul, .jb-rich ol { padding-left: 22px; margin-bottom: 16px; }
.jb-rich ul { list-style: disc; } .jb-rich ol { list-style: decimal; }
.jb-rich img { border-radius: 16px; margin: 12px 0; height: auto; }
.jb-rich blockquote { border-left: 4px solid var(--jb-orange); padding: 6px 0 6px 18px; margin: 20px 0; font-style: italic; }
.jb-rich a { color: var(--jb-orange); text-decoration: underline; }
.jb-rich table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.jb-rich td, .jb-rich th { border: 1px solid #e5e7eb; padding: 10px; }
[data-dynamic]:empty, [data-jb-empty] { display: none !important; }