/*
 ThemesWP Pro Runtime – lightweight UI kit + micro-interactions
 Namespaced with .twp-* to avoid conflicting with themes.
*/

:root{
  --twp-radius: 16px;
  --twp-radius-sm: 12px;
  --twp-shadow: 0 6px 24px rgba(0,0,0,.08);
  --twp-shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --twp-border: 1px solid rgba(0,0,0,.12);
  --twp-text: #111;
  --twp-muted: rgba(0,0,0,.68);
  --twp-bg: #fff;
  --twp-surface: rgba(255,255,255,.75);
  --twp-primary: var(--wp--preset--color--primary, #2084ff);
  --twp-foreground: var(--wp--preset--color--foreground, #111);
  --twp-background: var(--wp--preset--color--background, #fff);
  --twp-container: 1120px;
}

/* Layout */
.twp-section{padding:64px 0}
.twp-container{max-width:var(--twp-container);margin:0 auto;padding:0 18px}
.twp-stack{display:flex;flex-direction:column;gap:14px}
.twp-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.twp-muted{color:var(--twp-muted)}
.twp-grid{display:grid;gap:16px}
.twp-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.twp-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.twp-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .twp-grid.cols-2,.twp-grid.cols-3,.twp-grid.cols-4{grid-template-columns:1fr}
}

/* Cards & surfaces */
.twp-card{border:var(--twp-border);border-radius:var(--twp-radius);background:var(--twp-surface);backdrop-filter:saturate(160%) blur(10px);box-shadow:var(--twp-shadow-sm);padding:18px}
.twp-card.compact{padding:14px;border-radius:var(--twp-radius-sm)}
.twp-card--featured{border:2px solid rgba(32,132,255,.35)}
.twp-card h2,.twp-card h3,.twp-card h4{margin:0 0 8px 0}
.twp-card p{margin:0;color:var(--twp-muted);line-height:1.6}

/* Buttons */
.twp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.twp-btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;border:1px solid rgba(0,0,0,.14);text-decoration:none;color:var(--twp-foreground);background:rgba(255,255,255,.7);box-shadow:var(--twp-shadow-sm)}
.twp-btn.primary{background:var(--twp-primary);border-color:transparent;color:#fff}
.twp-btn.primary:hover{filter:brightness(.98)}
.twp-btn.ghost{background:transparent}
.twp-btn.sm{padding:10px 14px}

.twp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.6);font-size:12px;color:var(--twp-muted)}

/* Hero */
.twp-hero{border-radius:calc(var(--twp-radius) + 8px);border:1px solid rgba(0,0,0,.10);background:radial-gradient(1000px 420px at 10% 0%, rgba(32,132,255,.18), transparent 60%),
  radial-gradient(900px 420px at 90% 0%, rgba(168,85,247,.18), transparent 55%),
  rgba(255,255,255,.7);
  box-shadow:var(--twp-shadow);
  padding:48px;
}
@media(max-width:900px){.twp-hero{padding:22px}}
.twp-hero h1{margin:0 0 12px 0;line-height:1.08}
.twp-hero p{font-size:1.05em}

/* Typography helpers */
.twp-h1{font-size:clamp(32px, 4vw, 56px);font-weight:900;letter-spacing:-.02em}
.twp-h2{font-size:clamp(24px, 2.2vw, 36px);font-weight:900;letter-spacing:-.01em}
.twp-lead{font-size:1.12em;color:var(--twp-muted);line-height:1.6}
.twp-list{margin:10px 0 0 18px;color:var(--twp-muted);line-height:1.7}

/* Feature tiles */
.twp-feature{display:flex;flex-direction:column;gap:8px}
.twp-feature .twp-icon{width:42px;height:42px;border-radius:14px;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7)}
.twp-feature .twp-icon svg{width:20px;height:20px}

/* Pricing */
.twp-pricing{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.twp-pricing{grid-template-columns:1fr}}
.twp-price{position:relative}
.twp-price .price{font-size:34px;font-weight:800;margin:6px 0 10px 0}
.twp-price ul{margin:10px 0 0 18px;color:var(--twp-muted);line-height:1.7}
.twp-price.featured{border:2px solid rgba(32,132,255,.35)}
.twp-price .twp-badge{position:absolute;top:14px;right:14px}

.twp-card--featured{border:2px solid rgba(32,132,255,.35)}

/* Testimonials slider */
.twp-slider{position:relative;overflow:hidden}
.twp-slider__track,.twp-track{display:flex;transition:transform .35s ease;will-change:transform}
.twp-slide{flex:0 0 100%;padding:2px}
.twp-testimonial{display:flex;flex-direction:column;gap:10px}
.twp-testimonial .quote{font-size:1.05em;line-height:1.6;color:var(--twp-foreground)}
.twp-testimonial .meta{display:flex;gap:10px;align-items:center;color:var(--twp-muted)}
.twp-avatar{width:38px;height:38px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.05)}
.twp-slider__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.twp-nav,[data-twp-prev],[data-twp-next]{appearance:none;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.8);border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--twp-shadow-sm)}

/* Tabs */
.twp-tabs{border:var(--twp-border);border-radius:var(--twp-radius);background:rgba(255,255,255,.65);box-shadow:var(--twp-shadow-sm)}
.twp-tabs{display:flex;flex-direction:column}
.twp-tabs [role="tablist"]{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border-bottom:1px solid rgba(0,0,0,.10)}
.twp-tab,[data-twp-tab]{appearance:none;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.75);border-radius:999px;padding:10px 12px;cursor:pointer}
.twp-tab[aria-selected="true"], [data-twp-tab][aria-selected="true"]{background:var(--twp-primary);color:#fff;border-color:transparent}
.twp-panels{padding:16px}
.twp-panel{line-height:1.6}
.twp-quote{margin:12px 0 0 0;color:var(--twp-muted);font-weight:700}

/* Accordion */
.twp-accordion{display:flex;flex-direction:column;gap:10px}
.twp-accordion details{border:var(--twp-border);border-radius:var(--twp-radius-sm);background:rgba(255,255,255,.65);padding:12px 14px;box-shadow:var(--twp-shadow-sm)}
.twp-accordion summary{cursor:pointer;font-weight:700}
.twp-accordion summary::-webkit-details-marker{display:none}
.twp-accordion summary:after{content:'+';float:right;opacity:.6}
.twp-accordion details[open] summary:after{content:'–'}
.twp-accordion .body{padding-top:8px;color:var(--twp-muted);line-height:1.6}

/* Counters */
.twp-stats{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.twp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.twp-stats{grid-template-columns:1fr}}
.twp-stat{display:flex;flex-direction:column;gap:6px}
.twp-stat .num{font-size:30px;font-weight:900;letter-spacing:-.02em}
.twp-stat .label{color:var(--twp-muted)}

/* Animations */
.twp-anim{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s ease}
.twp-anim.is-inview{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .twp-anim{opacity:1;transform:none;transition:none}
  .twp-slider__track{transition:none}
}

/* Back-compat mapping for existing shortcodes */
.themeswp-post-card{border:var(--twp-border);border-radius:var(--twp-radius);padding:14px;background:rgba(255,255,255,.65);box-shadow:var(--twp-shadow-sm)}
.themeswp-cta{border:var(--twp-border);border-radius:var(--twp-radius);padding:18px;margin:18px 0;background:rgba(255,255,255,.65);box-shadow:var(--twp-shadow-sm)}
.themeswp-cta__button{border-radius:999px;background:var(--twp-primary);border-color:transparent;color:#fff}

/* -------------------------------------------------------------------------
   Divi/Elementor-like UI components
---------------------------------------------------------------------------*/

/* Scroll progress */
.twp-scroll-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:99999;background:rgba(0,0,0,.08);pointer-events:none}
.twp-scroll-progress .bar{height:100%;width:0;background:var(--twp-primary);transition:width .08s linear}

/* Sticky header */
.twp-sticky-header{position:sticky;top:0;z-index:9999;background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(0,0,0,.08);transition:transform .22s ease, box-shadow .22s ease}
.twp-sticky-header.twp-sticky-active{box-shadow:0 8px 26px rgba(0,0,0,.08)}
.twp-sticky-header.twp-sticky-hidden{transform:translateY(-110%)}
.twp-site-header .twp-header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.twp-site-header .twp-brand{font-weight:900;text-decoration:none;color:var(--twp-foreground);letter-spacing:-.02em}
.twp-site-header .twp-navlinks{display:flex;gap:14px;flex-wrap:wrap}
.twp-site-header .twp-navlinks a{text-decoration:none;color:var(--twp-muted)}
.twp-site-header .twp-navlinks a:hover{color:var(--twp-foreground)}
@media(max-width:900px){
  .twp-site-header .twp-navlinks{display:none}
}

/* Drawer / off-canvas */
html.twp-drawer-open{overflow:hidden}
.twp-drawer{position:fixed;inset:0;z-index:100000;display:none}
.twp-drawer.is-open{display:block}
.twp-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.twp-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(420px, 86vw);background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);
  border-left:1px solid rgba(0,0,0,.10);box-shadow:var(--twp-shadow);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.twp-drawer.is-open .twp-drawer__panel{transform:translateX(0)}
.twp-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px;border-bottom:1px solid rgba(0,0,0,.08)}
.twp-icon-btn{appearance:none;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.85);border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.twp-drawer__nav{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.twp-drawer__nav a{padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--twp-foreground)}
.twp-drawer__nav a:hover{background:rgba(0,0,0,.05)}
.twp-drawer__footer{margin-top:auto;padding:16px;border-top:1px solid rgba(0,0,0,.08)}

/* Lightbox */
html.twp-lightbox-open{overflow:hidden}
.twp-lightbox{position:fixed;inset:0;z-index:110000;display:none}
.twp-lightbox.is-open{display:block}
.twp-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.twp-lightbox__dialog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
.twp-lightbox__img{max-width:min(1100px, 96vw);max-height:86vh;border-radius:var(--twp-radius);box-shadow:0 16px 70px rgba(0,0,0,.45);background:#111}
.twp-lightbox__close{position:absolute;top:16px;right:16px;appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;border-radius:999px;width:44px;height:44px;cursor:pointer;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center}

/* Pricing toggle */
.twp-pricing-toggle{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.twp-toggle-btn{appearance:none;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.75);border-radius:999px;padding:10px 12px;cursor:pointer}
.twp-toggle-btn.is-active{background:var(--twp-primary);border-color:transparent;color:#fff}

/* Masonry (CSS columns) */
.twp-masonry{column-gap:16px}
.twp-masonry.cols-2{columns:2 260px}
.twp-masonry.cols-3{columns:3 240px}
.twp-masonry.cols-4{columns:4 220px}
@media(max-width:900px){
  .twp-masonry.cols-2,.twp-masonry.cols-3,.twp-masonry.cols-4{columns:1}
}
.twp-masonry > *{break-inside:avoid;margin:0 0 16px 0}
.twp-thumb{display:block;border-radius:var(--twp-radius);overflow:hidden;border:1px solid rgba(0,0,0,.10);box-shadow:var(--twp-shadow-sm)}
.twp-thumb img{display:block;width:100%;height:auto}