/* Pagebuilder Theme — modern, premium UI for page previews (RTL-aware) */
:root{
  /* palette */
  --pb-bg: #fbfdff;
  --pb-contrast: #0b1220;
  --pb-muted: #6b7280;
  --pb-accent: #0066ff;
  --pb-accent-600: #004ad6;
  --pb-border: #e6eef8;

  /* layout */
  --pb-radius: 12px;
  --pb-gap: 1.25rem;
  --pb-max-width: 1200px;

  /* elevation */
  --pb-card-shadow: 0 16px 40px rgba(11,17,28,0.06);
  --pb-soft-shadow: 0 8px 20px rgba(11,17,28,0.045);

  --pb-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pb-transition: 220ms cubic-bezier(.2,.9,.2,1);
}

/* Base container */
.container.py-4{
  max-width: var(--pb-max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  color: var(--pb-contrast);
  font-family: var(--pb-font-sans);
  line-height: 1.65;
}

/* Typography */
h1{ font-size:2.4rem; font-weight:700; margin-bottom:.5rem; }
h2{ font-size:1.8rem; font-weight:700; margin-bottom:.5rem; }
h3{ font-size:1.25rem; font-weight:600; }
p{ color:var(--pb-muted); margin-bottom:1rem; }
.lead{ font-size:1.05rem; color:#344155; }

/* Cards: glass-ish elevated look */
.card, .pb-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,253,255,0.95));
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-card-shadow);
  padding: 1.15rem;
  transition: transform var(--pb-transition), box-shadow var(--pb-transition);
}
.card:hover, .pb-card:hover{ transform: translateY(-8px); box-shadow: var(--pb-soft-shadow); }

/* Soft utilities */
.pb-muted{ color:var(--pb-muted); }
.pb-badge{ display:inline-block; padding:.35rem .6rem; font-weight:600; border-radius:999px; background:#f1f6ff; color:var(--pb-accent); }

/* Images */
img.img-fluid.rounded{ border-radius:12px; box-shadow: var(--pb-soft-shadow); }

/* Carousel */
.carousel .carousel-item img{ border-radius:12px; }

/* CTA */
section.bg-primary{ color:#fff; border-radius:12px; padding:1.25rem; }

/* Timeline — polished, centered line with nodes */
/* Legacy timeline (.timeline-*) kept for backward compat */
.timeline-list{ list-style:none; padding:0; margin:0; position:relative; }
.timeline-list::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:4px; top:8px; bottom:8px; background:linear-gradient(180deg,var(--pb-border),transparent 60%); border-radius:4px; }
.timeline-item{ position:relative; width:50%; padding:1rem 2rem; box-sizing:border-box; }
.timeline-item.left{ left:0; text-align:right; transform-origin:right center; }
.timeline-item.right{ left:50%; text-align:left; transform-origin:left center; }
.timeline-item .timeline-node{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:4px solid var(--pb-accent); box-shadow:0 6px 18px rgba(13,110,253,0.12); }
.timeline-item .timeline-date{ display:block; font-weight:700; color:var(--pb-accent); margin-bottom:.5rem; }
.timeline-item .timeline-body{ background:transparent; }
.timeline-item h5{ margin:0 0 .25rem 0; font-weight:700; }

/* Pagebuilder timeline: polished, alternating, responsive */

.pb-timeline{ position:relative; padding:1.2rem 0; margin:0; }
.pb-timeline::before{ content:""; position:absolute; left:50%; top:8px; bottom:8px; width:3px; transform:translateX(-50%); background:linear-gradient(180deg,var(--pb-border),transparent 30%); border-radius:3px; }
.pb-timeline .pb-timeline-item{ position:relative; width:50%; box-sizing:border-box; padding:0 1rem; display:block; }
.pb-timeline .pb-timeline-item.card{ border-radius:12px; padding:.85rem; margin:.65rem 0; box-shadow: 0 10px 26px rgba(11,17,28,0.06); border:1px solid rgba(11,17,28,0.04); background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,253,255,0.99)); transition: transform var(--pb-transition), box-shadow var(--pb-transition); max-width:44%; }
.pb-timeline .pb-timeline-item:nth-child(odd){ margin-left:auto; margin-right:48px; text-align:right; }
.pb-timeline .pb-timeline-item:nth-child(even){ margin-right:auto; margin-left:48px; text-align:left; }
.pb-timeline .pb-timeline-item .pb-timeline-meta{ display:block; font-size:.85rem; color:var(--pb-muted); margin-bottom:.35rem; }
.pb-timeline .pb-timeline-item h6{ margin:0 0 .4rem 0; font-weight:700; color:var(--pb-contrast); font-size:1rem; }
.pb-timeline .pb-timeline-item p{ margin:0; color:var(--pb-muted); font-size:.95rem; }

/* Node (circle) aligned to center line — smaller and crisper */
.pb-timeline .pb-timeline-item::before{ content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; background:var(--pb-accent); border:3px solid #fff; box-shadow:0 8px 26px rgba(2,46,128,0.12); }

/* Accent marker on the card closer to the line for visual connection */
.pb-timeline .pb-timeline-item:nth-child(odd) .card{ border-right:3px solid rgba(0,102,255,0.06); }
.pb-timeline .pb-timeline-item:nth-child(even) .card{ border-left:3px solid rgba(0,102,255,0.06); }

/* Hover effect: subtle lift */
.pb-timeline .pb-timeline-item.card:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11,17,28,0.07); }

/* Small screens: stack timeline with line at left and tighter spacing */
@media (max-width:991px){
  .pb-timeline::before{ left:20px; transform:none; }
  .pb-timeline .pb-timeline-item{ width:100%; padding-left:56px; padding-right:16px; margin:.6rem 0; }
  .pb-timeline .pb-timeline-item:nth-child(odd), .pb-timeline .pb-timeline-item:nth-child(even){ margin:0; text-align:left; }
  .pb-timeline .pb-timeline-item::before{ left:28px; transform:none; width:12px; height:12px; }
  .pb-timeline .pb-timeline-item.card{ max-width:100%; }
}

/* RTL support for pb-timeline */
[dir="rtl"] .pb-timeline::before{ left:auto; right:50%; transform:translateX(50%); }
[dir="rtl"] .pb-timeline .pb-timeline-item{ padding-left:16px; padding-right:64px; }
[dir="rtl"] @media (max-width:991px){ .pb-timeline .pb-timeline-item{ padding-left:16px; padding-right:64px; } }

/* Compact timeline variant: left-aligned line, compact nodes, ideal for sidebars */
.pb-timeline-compact{ position:relative; padding:1rem 0; }
.pb-timeline-compact::before{ content:""; position:absolute; left:12px; top:8px; bottom:8px; width:3px; background:linear-gradient(180deg,var(--pb-border),transparent 36%); border-radius:2px; }
.pb-timeline-compact .pb-timeline-item{ position:relative; padding:0.6rem 0 0.6rem 44px; border-bottom:1px solid rgba(11,17,28,0.03); }
.pb-timeline-compact .pb-timeline-item:last-child{ border-bottom:0; }
.pb-timeline-compact .pb-timeline-item::before{ content:""; position:absolute; left:8px; top:18px; width:10px; height:10px; border-radius:50%; background:var(--pb-accent); border:2px solid #fff; box-shadow:0 6px 18px rgba(2,46,128,0.08); }
.pb-timeline-compact .pb-timeline-item h6{ margin:0 0 .2rem 0; font-size:0.95rem; font-weight:700; }
.pb-timeline-compact .pb-timeline-item .meta{ display:block; color:var(--pb-muted); font-size:0.84rem; margin-bottom:0.28rem; }
.pb-timeline-compact .pb-timeline-item p{ margin:0; color:var(--pb-muted); font-size:0.94rem; }

@media (max-width:480px){ .pb-timeline-compact{ padding-left:8px; } .pb-timeline-compact::before{ left:8px; } .pb-timeline-compact .pb-timeline-item{ padding-left:40px; } }

/* Make timeline stack on small screens */
@media (max-width:991px){
  .timeline-list::before{ left:20px; transform:none; }
  .timeline-item{ width:100%; padding-left:56px; padding-right:16px; text-align:left; }
  .timeline-item .timeline-node{ left:24px; transform:none; }
}

/* RTL tweaks */
[dir="rtl"] .timeline-list::before{ left:auto; right:50%; transform:translateX(50%); }
[dir="rtl"] .timeline-item.left{ left:50%; }
[dir="rtl"] .timeline-item.right{ left:0; }
[dir="rtl"] .timeline-item{ padding-left:16px; padding-right:56px; }
@media (max-width:991px){
  [dir="rtl"] .timeline-item{ padding-left:16px; padding-right:56px; }
}

/* Parse-friendly fallback for admin HTML blocks */
.pb-form{ border-radius:10px; padding:1rem; background:linear-gradient(180deg,#fbfdff,#f8fbff); border:1px dashed rgba(11,17,28,0.04); }
.pb-form .form-control{ border-radius:8px; box-shadow:none; }

/* Entry animations & accessibility */
@keyframes pb-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pb-animate{ animation: pb-fade-up .38s cubic-bezier(.2,.9,.2,1) both; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* Focus */
:focus{ outline: 3px solid rgba(0,102,255,0.16); outline-offset:3px; }

/* High contrast fallback */
@media (prefers-contrast: more){ :root{ --pb-border:#ccc; } }

/* ------- Advanced UI/UX additions ------- */
/* Block wrapper expected on pagebuilder blocks: `.pb-block` */
.pb-block{ position:relative; border-radius:12px; transition: box-shadow .18s ease, transform .18s ease; }
.pb-block:hover{ transform: translateY(-4px); }

/* Highlight overlay */
.pb-highlight::before{
  content:""; pointer-events:none; position:absolute; inset:0; border-radius:12px;
  box-shadow: 0 8px 30px rgba(6,24,72,0.08), inset 0 1px 0 rgba(255,255,255,0.3);
  border:1px solid rgba(0,102,255,0.12);
  transition: opacity .18s ease, transform .18s ease;
  opacity:1;
}



/* Hover/click focus states */
.pb-block:focus-within, .pb-block.pb-highlight{ outline: none; }



/* Micro-interactions for images and media */
.pb-media { overflow:hidden; border-radius:12px; transition: transform .28s cubic-bezier(.2,.9,.2,1), filter .28s ease; }
.pb-media:hover img{ transform:scale(1.03); }

/* Soft card variants */
.pb-card--muted{ background: linear-gradient(180deg,#fbfdff,#f7f9fc); border-color: rgba(11,17,28,0.04); }
.pb-card--accent{ border-left:4px solid var(--pb-accent); }

/* Small utility for subtle separators */
.pb-sep{ height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent); margin:1.2rem 0; }

/* Accessibility: ensure contrast for timeline nodes */
.timeline-item .timeline-node{ border-color:var(--pb-accent); background:#fff; }

/* Dark mode helpers (toggle `pb-alt-theme` on body) */
.pb-alt-theme{ --pb-bg:#071026; --pb-contrast:#e6eef8; --pb-muted:#9fb0c8; --pb-accent:#3ea6ff; --pb-accent-600:#2b8bff; background:#071026; color:var(--pb-contrast); }
.pb-alt-theme .card{ background: linear-gradient(180deg, rgba(10,18,28,0.6), rgba(8,12,18,0.4)); border-color: rgba(255,255,255,0.04); }

/* Utility: visually hidden for accessible labels */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }