/* LNBuilder v3 — Frontend CSS */

/* ── Base ── */
.lnbld-page{width:100%;box-sizing:border-box}
.lnbld-el{width:100%;box-sizing:border-box}
*,.lnbld-page *{box-sizing:border-box}

/* ── Responsive visibility ── */
.lnbld-hd{display:none!important}
@media(max-width:1024px){.lnbld-ht{display:none!important}}
@media(max-width:767px){.lnbld-hm{display:none!important}}

/* ── Layout containers ── */
.lnbld-container,.lnbld-row,.lnbld-col,.lnbld-grid,.lnbld-flex{width:100%}

/* ── Mobile/Tablet stacking for rows/cols — controlled per-row via colsTablet/colsMobile props ── */
@media(max-width:767px){
  /* Tablet: allow wrapping so colsTablet works */
  .lnbld-row{flex-wrap:wrap!important;gap:16px 0!important}
  .lnbld-col{box-sizing:border-box}
  .lnbld-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  /* Mobile: stack to single column by default (overridden by scoped #lnbldr-X>.lnbld-col) */
  .lnbld-row>.lnbld-col{flex:0 0 100%!important;max-width:100%!important;min-width:100%!important}
  .lnbld-grid{grid-template-columns:1fr!important}
}
@media(max-width:1024px){
  .lnbld-row{flex-wrap:wrap!important}
}

/* ── Hero ── */
.lnbld-hero{box-sizing:border-box;overflow:hidden;width:100%}
@media(max-width:767px){
  .lnbld-hero h1{font-size:32px!important;line-height:1.2!important}
  .lnbld-hero p{font-size:16px!important}
  .lnbld-hero div[style*="padding:0 32px"]{padding:0 20px!important}
}

/* ── Sliders ── */
.lnbld-slider,.lnbld-image-slider{width:100%;overflow:hidden}
.lnbld-carousel,.lnbld-testimonials,.lnbld-logo-slider{width:100%;overflow:hidden;padding-bottom:40px}
.lnbld-logo-slider-wrap{overflow:hidden;width:100%}
.lnbld-logo-slider-wrap .swiper-slide{display:flex!important;align-items:center;justify-content:center}
.lnbld-testimonial-section{width:100%}
.lnbld-tes-pagination{text-align:center;margin-top:16px}
.lnbld-tes-pagination .swiper-pagination-bullet{width:10px;height:10px;background:#ccc;opacity:1;display:inline-block;border-radius:50%;margin:0 4px;cursor:pointer;transition:background .2s}
.lnbld-tes-pagination .swiper-pagination-bullet-active{background:#6C63FF}

/* ── Carousel cards ── */
.lnbld-car-card{border:1px solid #e8e8f0;border-radius:12px;overflow:hidden;background:#fff;height:100%}
.lnbld-car-body{padding:18px}
.lnbld-car-body h3{font-size:16px;font-weight:700;margin:0 0 8px;color:#111}
.lnbld-car-body p{font-size:14px;color:#666;line-height:1.6;margin:0}

/* ── Testimonials ── */
.lnbld-review-card{background:#fff;border:1px solid #e8e8f0;border-radius:14px;padding:28px;height:100%}
.lnbld-review-stars span{color:#FFD700;font-size:20px}
.lnbld-review-text{font-style:italic;color:#444;line-height:1.7;margin:0 0 20px}
.lnbld-review-author{display:flex;align-items:center;gap:12px}
.lnbld-review-av img{width:48px;height:48px;border-radius:50%;object-fit:cover}

/* ── Logo slider ── */
.lnbld-logo-slider img{transition:all .3s ease}
.lnbld-logo-slider img:hover{opacity:1!important;filter:none!important}

/* ── Buttons ── */
.lnbld-btn-el{display:inline-block;font-weight:700;text-decoration:none;cursor:pointer;transition:opacity .15s,transform .1s;font-family:inherit;line-height:1.2}
.lnbld-btn-el:hover{opacity:.88;transform:translateY(-1px)}

/* ── Social ── */
.lnbld-social-link{display:inline-block;transition:transform .15s,color .15s}
.lnbld-social-link:hover{transform:translateY(-3px)}

/* ── Navbar ── */
.lnbld-navbar{width:100%;position:relative;box-sizing:border-box}
.lnbld-navbar a,.lnbld-navbar .lnbld-menu-link{text-decoration:none;transition:opacity .15s}
.lnbld-nav-logo{display:flex;align-items:center}
.lnbld-navbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.lnbld-navbar-ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.lnbld-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;line-height:1}

/* Hamburger icon */
.lnbld-hamburger{display:flex;flex-direction:column;justify-content:space-between;width:22px;height:16px;pointer-events:none}
.lnbld-hamburger span{display:block;height:2px;width:100%;background:var(--hc,#fff);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;transform-origin:center}
.lnbld-nav-toggle.open .lnbld-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lnbld-nav-toggle.open .lnbld-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
.lnbld-nav-toggle.open .lnbld-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Desktop Dropdown ── */
/* position:relative is on the <li> via inline style in the Walker —
   no need for CSS here, but keep as a belt-and-suspenders default */
.lnbld-navbar-ul .lnbld-menu-item{position:relative;list-style:none}
.lnbld-navbar-ul .lnbld-mega-item{position:static}

/* Visibility-only rules — structural/positioning styles are inline (Walker).
   These rules work because opacity/visibility are NOT in the inline style,
   so CSS class rules can freely control them. */
.lnbld-dropdown{
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s,visibility .2s,transform .2s;
  pointer-events:none;
}
.lnbld-mega-panel{
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s,visibility .2s,transform .2s;
  pointer-events:none;
}

/* Show on hover (mouse) or dd-open class (touch JS) */
.lnbld-menu-item:hover>.lnbld-dropdown,
.lnbld-menu-item.lnbld-dd-open>.lnbld-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.lnbld-mega-item:hover>.lnbld-mega-panel,
.lnbld-mega-item.lnbld-dd-open>.lnbld-mega-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}

/* Dropdown child items */
.lnbld-dropdown .lnbld-menu-item{position:relative;list-style:none}
.lnbld-dropdown .lnbld-dropdown{top:0;left:100%;margin-left:2px}
.lnbld-dropdown .lnbld-menu-link:hover{background:rgba(255,255,255,.1)}
.lnbld-dd-arrow{transition:transform .2s}
.lnbld-menu-item:hover>.lnbld-menu-link .lnbld-dd-arrow,
.lnbld-menu-item.lnbld-dd-open>.lnbld-menu-link .lnbld-dd-arrow{transform:rotate(180deg)}

/* Mega menu inner grid */
.lnbld-mega-inner{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  padding:24px;gap:8px;max-width:1200px;margin:0 auto
}
.lnbld-mega-col{list-style:none;margin:0;padding:0}
.lnbld-mega-col .lnbld-menu-link{display:block!important;border-radius:6px;padding:8px 12px!important}
.lnbld-mega-col .lnbld-menu-link:hover{background:rgba(255,255,255,.08)}

/* ── Mobile: hamburger visible, desktop ul hidden ── */
@media(max-width:767px){
  .lnbld-navbar-ul{display:none!important}
  .lnbld-nav-toggle{display:flex!important;align-items:center;justify-content:center}
  .lnbld-dropdown,.lnbld-mega-panel{display:none!important} /* only shown in mobile-menu */
}

/* ── Mobile Menu ── */
.lnbld-mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Separator lines */
.lnbld-mob-list>.lnbld-mob-item,
.lnbld-mob-sub>.lnbld-mob-item{border-bottom:1px solid rgba(255,255,255,.08)}
.lnbld-mob-item:last-child{border-bottom:none}

/* Links */
.lnbld-mob-link{display:flex;align-items:center;justify-content:space-between;transition:background .15s}
.lnbld-mob-link:hover{background:rgba(255,255,255,.06)}

/* Chevron — rotates 180° when open */
.lnbld-mob-arrow{transition:transform .3s ease;flex-shrink:0;margin-left:8px}

/* Submenu slide: max-height:0 collapsed, JS animates to scrollHeight
   overflow must stay hidden during animation so the slide works correctly,
   but we clear it to 'visible' once open so children can render fully */
.lnbld-mob-sub{
  list-style:none;margin:0;padding:0;
  overflow:hidden;max-height:0;
  transition:max-height .35s ease;
  background:rgba(0,0,0,.18);
}
/* When open, remove overflow:hidden so nested items aren't clipped */
.lnbld-mob-sub.lnbld-sub-open{
  overflow:visible;
}


/* ── Forms ── */
.lnbld-form-wrap input,.lnbld-form-wrap textarea,.lnbld-form-wrap select{font-family:inherit}
.lnbld-form-wrap input:focus,.lnbld-form-wrap textarea:focus{outline:none;border-color:#6C63FF!important}

/* ── Animations ── */
@keyframes lnbldFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lnbldSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes lnbldZoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
[data-lnbld-anim]{transition:opacity .1s}

/* ── Header/Footer ── */
#lnbld-custom-header,#lnbld-custom-footer{width:100%;display:block}

/* ── Mobile responsiveness for text elements ── */
@media(max-width:767px){
  .lnbld-page h1{font-size:28px!important}
  .lnbld-page h2{font-size:24px!important}
  .lnbld-page h3{font-size:20px!important}
  .lnbld-carousel .swiper-slide,.lnbld-testimonials .swiper-slide{height:auto!important}
}

/* ── Image ── */
.lnbld-page img{max-width:100%;height:auto}

/* ── Utility ── */
.lnbld-page .swiper{width:100%}

/* ════════════════════════════════════════════════════════════════ */
/* BUG FIX #2 & #3: Frontend container and column styling */
/* ════════════════════════════════════════════════════════════════ */

/* Only collapse truly empty containers (no children rendered at all);
   non-empty containers keep their normal block display so existing
   centering/margins/layout behavior is unaffected. */
.lnbld-container:empty {
  display: none;
}

.lnbld-col {
  box-sizing: border-box;
  min-width: 80px;
}


/* ════════════════════════════════════════════════════════════════ */
/* FORM WIDGET — multi-step navigation, messages, loading state       */
/* (mirrors the editor-only copy in assets/css/editor.css so the      */
/* published page behaves the same as the editor preview)             */
/* ════════════════════════════════════════════════════════════════ */

.lnbld-form-step{display:none}
.lnbld-form-step.active{display:block}
.lnbld-form-steps-nav{display:flex;gap:6px;margin-bottom:18px}
.lnbld-form-step-indicator{
  flex:1;text-align:center;font-size:11px;font-weight:700;
  padding:6px 4px;border-radius:6px;background:#eee;color:#888;
  transition:background .2s,color .2s;
}
.lnbld-form-step-indicator.active{background:var(--lnbld-form-accent,#6C63FF);color:#fff}
.lnbld-form-step-indicator.done{background:#d6f5e3;color:#1b8a4c}

.lnbld-form-msg{
  margin-top:14px;padding:12px 14px;border-radius:8px;font-size:13px;
  display:none;
}
.lnbld-form-msg.show{display:block}
.lnbld-form-msg.success{background:#e6f7ee;color:#1b8a4c;border:1px solid #b9ecd0}
.lnbld-form-msg.error{background:#fdecec;color:#c0392b;border:1px solid #f6c8c8}

.lnbld-form-wrap button[disabled]{opacity:.6;cursor:not-allowed}
.lnbld-form-wrap .lnbld-form-spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:lnbld-spin .6s linear infinite;margin-right:8px;vertical-align:-2px;
}
@keyframes lnbld-spin{to{transform:rotate(360deg)}}

/* Form field wrapper used by lnbld_render_form_field() */
.lnbld-form-field{box-sizing:border-box}

/* ══════════════════════════════════════════════════════
   NAV MENU ELEMENT (standalone, separate from navbar)
   ══════════════════════════════════════════════════════ */

/* Wrapper */
.lnbld-nav-menu{display:flex;align-items:center;position:relative}

/* Desktop ul — shown on desktop, hidden on mobile */
.lnbld-nm-ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}

/* Hamburger — hidden on desktop */
.lnbld-nm-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;line-height:1;flex-shrink:0}

/* Dropdown items (shared with navbar walker) */
.lnbld-nm-ul .lnbld-menu-item{position:relative;list-style:none}
.lnbld-nm-ul .lnbld-mega-item{position:static}
.lnbld-nm-ul .lnbld-dropdown{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,visibility .2s,transform .2s;pointer-events:none}
.lnbld-nm-ul .lnbld-mega-panel{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,visibility .2s,transform .2s;pointer-events:none}
.lnbld-nm-ul .lnbld-menu-item:hover>.lnbld-dropdown,
.lnbld-nm-ul .lnbld-menu-item.lnbld-dd-open>.lnbld-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.lnbld-nm-ul .lnbld-mega-item:hover>.lnbld-mega-panel,
.lnbld-nm-ul .lnbld-mega-item.lnbld-dd-open>.lnbld-mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.lnbld-nm-ul .lnbld-dropdown .lnbld-menu-item{position:relative;list-style:none}
.lnbld-nm-ul .lnbld-dropdown .lnbld-dropdown{top:0;left:100%;margin-left:2px}
.lnbld-nm-ul .lnbld-dropdown .lnbld-menu-link:hover{background:rgba(255,255,255,.1)}
.lnbld-nm-ul .lnbld-dd-arrow{transition:transform .2s}
.lnbld-nm-ul .lnbld-menu-item:hover>.lnbld-menu-link .lnbld-dd-arrow,
.lnbld-nm-ul .lnbld-menu-item.lnbld-dd-open>.lnbld-menu-link .lnbld-dd-arrow{transform:rotate(180deg)}

/* ── Slide-left / Slide-right drawer ── */
.lnbld-nm-drawer{
  flex-direction:column;
  box-shadow:4px 0 32px rgba(0,0,0,.35);
}
.lnbld-nm-drawer-right{
  box-shadow:-4px 0 32px rgba(0,0,0,.35);
}
.lnbld-nm-drawer .lnbld-mob-link,
.lnbld-nm-drawer .lnbld-mob-sub .lnbld-mob-link{
  padding:14px 24px;font-size:16px;
}
.lnbld-nm-drawer .lnbld-mob-sub .lnbld-mob-link{
  padding-left:36px;font-size:14px;
}
/* Backdrop behind drawer */
.lnbld-nm-backdrop{
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

/* Slide-down panel (dropdown mobile type) */
.lnbld-nm-panel{
  overflow:hidden; /* JS changes this to auto after slide-in animation */
  position:absolute;left:0;right:0;top:100%;z-index:9999;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:767px){
  .lnbld-nm-panel{position:fixed;left:0;right:0;z-index:9999;/* top set by JS */}
}

/* Fullscreen overlay */
.lnbld-nm-overlay{
  display:flex;flex-direction:column;align-items:center;
  /* JS sets justify-content:flex-start + paddingTop so submenus can grow down */
  justify-content:flex-start;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.lnbld-nm-fs-list{list-style:none;margin:0;padding:0;width:100%}
.lnbld-nm-fs-content{width:100%;max-width:480px;padding:0 24px;box-sizing:border-box}
.lnbld-nm-close{line-height:1}

/* Mobile breakpoint — hide desktop ul, show hamburger */
@media(max-width:767px){
  .lnbld-nm-ul{display:none!important}
  .lnbld-nm-toggle{display:flex!important;align-items:center;justify-content:center}
  .lnbld-nm-ul .lnbld-dropdown,.lnbld-nm-ul .lnbld-mega-panel{display:none!important}
}

/* ══════════════════════════════════════════════════════
   SITE LOGO ELEMENT (wp-logo enhanced)
   ══════════════════════════════════════════════════════ */
.lnbld-site-logo a{display:inline-block;text-decoration:none}
.lnbld-site-logo img{display:block;max-width:100%;height:auto}

/* ── Tabs — display toggle (must be in static CSS, not footer) ── */
.lnbld-tabs .lnbld-tab-panel{display:none}
.lnbld-tabs .lnbld-tab-panel.lnbld-active{display:block}

/* ── Accordion — display toggle ── */
.lnbld-accordion .lnbld-acc-body{display:none}
.lnbld-accordion .lnbld-acc-body.lnbld-open{display:block}
.lnbld-accordion .lnbld-acc-hdr .lnbld-acc-icon{transition:transform .25s;display:inline-block}
.lnbld-accordion .lnbld-acc-hdr.lnbld-open .lnbld-acc-icon{transform:rotate(180deg)}

/* ── Gallery lightbox ── */
#lnbld-lb{display:none}
#lnbld-lb.lnbld-lb-open{display:flex}