/* Front-end styles */
.spl-wrap{--spl-accent:#59b5a9;--spl-text:#2b2b2b;--spl-muted:#6b7280;--spl-line:#eaeaea}
.spl-wrap{color:var(--spl-text);font-family:var(--spl-item-font,inherit)}
.spl-header{display:flex;gap:18px;justify-content:space-between;align-items:flex-end;margin:6px 0 10px}
.spl-tabs{display:flex;gap:18px;list-style:none;margin:0;padding:0;justify-content:var(--spl-tabs-align,flex-start)}
.spl-tab{background:var(--spl-tab-inactive-bg,transparent);border:none;padding:8px 12px;cursor:pointer;color:var(--spl-tabs-inactive,#6b7280);position:relative;font-family:var(--spl-tabs-font,inherit);font-size:var(--spl-tabs-size,14px);font-weight:var(--spl-tabs-weight,600);letter-spacing:var(--spl-tabs-ls,0);text-transform:var(--spl-tabs-upper,none);border-radius:8px}
.spl-tab.is-active{color:var(--spl-tabs-active,#59b5a9); background:var(--spl-tab-active-bg,transparent)}
.spl-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--spl-accent)}
.spl-search input{border:1px solid var(--spl-line);border-radius:20px;padding:8px 12px;min-width:220px;background:var(--spl-search-bg,#fff)}
.spl-sticky-tabs .spl-header{position:sticky; top:0; background:#fff; z-index:2; padding-top:8px}

.spl-category{display:none}
.spl-category.is-active{display:block}

.spl-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.spl-item{display:grid;grid-template-columns:1fr auto;gap:8px 14px;border-top:1px solid var(--spl-line);padding:14px 0;background:var(--spl-item-bg,transparent);border:1px solid var(--spl-item-border,transparent);border-radius:var(--spl-item-radius,0)}
.spl-item:first-child{border-top:0}
.spl-item__main{display:contents}
.spl-item__name{font-weight:600;font-size:var(--spl-item-name-size,15px); color:var(--spl-item-name-color,var(--spl-text)); line-height:var(--spl-item-line-height,1.35); display:flex; align-items:center; gap:8px}
.spl-ico{width:18px;height:18px;object-fit:contain}
.spl-badge{margin-left:8px;background:var(--spl-badge-bg,#eaf6f4);border:1px solid #d4ece7;color:var(--spl-badge-text,#2e7d73);font-size:11px;border-radius:8px;padding:2px 6px}
.spl-item__price{justify-self:end;white-space:nowrap;font-size:var(--spl-item-price-size,15px); color:var(--spl-item-price-color,var(--spl-text))}
.spl-old{text-decoration:line-through;color:var(--spl-item-old-color,#999);margin-right:6px}
.spl-now{color:var(--spl-price-color, var(--spl-accent));font-weight:700}
.spl-item__meta{grid-column:1/-1;color:var(--spl-muted);font-size:13px}
.spl-cta{justify-self:end;border:1px solid var(--spl-cta-border,var(--spl-accent));color:var(--spl-cta-text,var(--spl-accent));padding:6px 10px;border-radius:8px;font-size:13px;text-decoration:none;background:var(--spl-cta-bg,#e8f6f4)}
.spl-cta:hover{background:var(--spl-cta-bg,#def1ee)}

.spl-content[data-columns="1"] .spl-list{grid-template-columns:1fr}
@media (max-width:900px){ .spl-list{grid-template-columns:1fr} }

/* Tab styles */
.spl-wrap[data-tab-style="pill"] .spl-tab{padding:6px 12px; border:1px solid transparent; border-radius:999px}
.spl-wrap[data-tab-style="pill"] .spl-tab.is-active{background:var(--spl-tab-active-bg,var(--spl-accent)); color:#fff}
.spl-wrap[data-tab-style="box"] .spl-tab{padding:6px 12px; border:1px solid var(--spl-tab-border,var(--spl-line)); border-radius:8px; background:var(--spl-tab-inactive-bg,transparent)}
.spl-wrap[data-tab-style="box"] .spl-tab.is-active{border-color:var(--spl-tab-active-bg,var(--spl-accent)); color:var(--spl-tabs-active,var(--spl-accent)); background:var(--spl-tab-active-bg,transparent)}

/* Leaders (dotted) */
.spl-wrap[data-leaders="1"] .spl-item__main{display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 12px}
.spl-wrap[data-leaders="1"] .spl-item__name{position:relative; padding-right:8px}
.spl-wrap[data-leaders="1"] .spl-item__name:after{content:''; border-bottom:1px dotted var(--spl-line); position:absolute; left: calc(100% + 8px); right: -999px; top: 60%}

/* Themes beyond classic/minimal/lined/cards */
.spl-wrap[data-theme="cards"] .spl-item{border:1px solid var(--spl-item-border,var(--spl-line));padding:14px;border-radius:var(--spl-item-radius,10px);margin:10px 0;background:var(--spl-item-bg,#fff)}
.spl-wrap[data-theme="cards"] .spl-item:first-child{border-top:1px solid var(--spl-line)}
.spl-wrap[data-theme="lined"] .spl-item{border-top:1px dashed var(--spl-line)}
.spl-wrap[data-theme="minimal"] .spl-item__price .spl-now{color:inherit;font-weight:600}

.spl-wrap[data-theme="bordered"] .spl-item{border-left:4px solid var(--spl-accent); padding-left:12px}
.spl-wrap[data-theme="elegant"] .spl-item{border:1px solid var(--spl-elegant-item-border, var(--spl-item-border,var(--spl-line))); border-radius:12px; padding:14px; margin:8px 0; background:linear-gradient(180deg, var(--spl-elegant-grad-top, var(--spl-item-bg,#fff)), var(--spl-elegant-grad-bottom, var(--spl-item-bg,#fbfbff)));}
.spl-wrap[data-theme="elegant"] .spl-tab.is-active{color:var(--spl-tab-active-text,var(--spl-tabs-active,#5a43d1))}
.spl-wrap[data-theme="contrast"] .spl-header{background:#111; border-radius:12px; padding:10px}
.spl-wrap[data-theme="contrast"] .spl-tab{color:#ddd}
.spl-wrap[data-theme="contrast"] .spl-tab.is-active{color:#fff}
.spl-wrap[data-theme="contrast"] .spl-search input{background:#1a1a1a; color:#eee; border-color:#333}

.spl-wrap[data-theme="pricing"] .spl-list{grid-template-columns: repeat(3, 1fr)}
.spl-wrap[data-theme="pricing"] .spl-item{border:1px solid var(--spl-line); border-radius:12px; padding:16px; text-align:center; display:grid; grid-template-columns:1fr; gap:10px}
.spl-wrap[data-theme="pricing"] .spl-item__price{font-size:calc(var(--spl-item-price-size,15px) * 1.25)}
.spl-wrap[data-theme="pricing"] .spl-item.is-featured{background:#fff7e6; border-color:#ffd699}
@media (max-width: 980px){ .spl-wrap[data-theme="pricing"] .spl-list{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .spl-wrap[data-theme="pricing"] .spl-list{grid-template-columns: 1fr} }

/* Filters (chips) */
.spl-filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.spl-chip{border:1px solid var(--spl-line); background:var(--spl-chip-bg,#fff); border-radius:999px; padding:6px 10px; cursor:pointer; font-size:12px}
.spl-chip.is-active{background:var(--spl-chip-active-bg,var(--spl-accent)); color:var(--spl-chip-active-text,#fff); border-color:var(--spl-chip-active-bg,var(--spl-accent))}

/* Animations */
.spl-category.fade-in{animation: splFadeIn .25s ease both}
.spl-category.fade-out{animation: splFadeOut .25s ease both}
.spl-category.slide-in{animation: splSlideIn .25s ease both}
.spl-category.slide-out{animation: splSlideOut .25s ease both}
.spl-category.before-enter{opacity:0}
@keyframes splFadeIn{from{opacity:0} to{opacity:1}}
@keyframes splFadeOut{from{opacity:1} to{opacity:0}}
@keyframes splSlideIn{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}
@keyframes splSlideOut{from{opacity:1; transform:none} to{opacity:0; transform: translateY(-10px)}}


/* v2.2 tooltips */
.spl-tip{margin-left:6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--spl-line);background:#fff;color:var(--spl-muted);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;cursor:help}
.spl-tooltip{position:absolute;background:#111;color:#fff;font-size:12px;padding:6px 8px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.2);display:none;pointer-events:none;z-index:99999;max-width:260px}
.spl-tooltip:after{content:'';position:absolute;left:50%;bottom:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #111;transform:translateX(-50%)}

/* duration_note_colors */
.spl-duration, .spl-item__duration, .spl-time { color: var(--spl-duration-color, var(--spl-muted)); }
.spl-note, .spl-item__note, .spl-desc { color: var(--spl-note-color, var(--spl-muted)); }

/* v2.2.7: Mobile tab scroller */
.spl-tabs{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.spl-tabs::-webkit-scrollbar{display:none}
@media (max-width:768px){
  .spl-tabs{flex-wrap:nowrap;gap:10px}
  .spl-tabs>li{flex:0 0 auto}
  .spl-header{overflow:hidden}
}
.spl-tab{scroll-snap-align:start}