/* 24Livestream — components: buttons, cards, chips, forms, image slots */

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; border-radius:var(--r-pill); cursor:pointer; transition:.18s; white-space:nowrap; text-align:center; }
.btn-primary{ padding:15px 30px; border:none; background:var(--brand-grad); color:#fff; box-shadow:var(--shadow-brand-lg); }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); color:#fff; }
.btn-ghost{ padding:15px 28px; border:1px solid var(--line-4); background:var(--fill-2); color:var(--text); }
.btn-ghost:hover{ background:var(--fill-3); border-color:var(--line-4); color:var(--text); }
.btn-sm{ padding:12px 24px; font-size:14px; }
.btn-block{ width:100%; }
.btn-dark{ background:var(--text); color:#fff; border:none; padding:15px 34px; }
.btn-dark:hover{ transform:translateY(-2px); color:#fff; }

/* Nav pill button */
.nav-link{ padding:9px 16px; border:none; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-weight:500; font-size:14.5px; white-space:nowrap; transition:.15s; }
.nav-link:hover{ color:var(--text); background:var(--fill-3); }
.nav-link.is-active{ background:var(--fill-3); color:var(--text); }

/* Cards */
.card{ display:block; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line-2); background:var(--surface-1); transition:.2s; color:inherit; }
.card:hover{ border-color:rgba(255,46,99,.45); transform:translateY(-5px); color:inherit; }
.card__media{ position:relative; }
.card__body{ padding:20px 22px 22px; }
.card__title{ font-weight:600; font-size:20px; margin:0 0 5px; }
.card__tag{ margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.55; }

/* Feature card */
.feature{ padding:28px; border-radius:var(--r-card); border:1px solid var(--line-2); background:var(--surface-1); box-shadow:var(--shadow-float); transition:.2s; }
.feature:hover{ border-color:rgba(255,46,99,.4); transform:translateY(-4px); }
.feature__icon{ width:52px; height:52px; border-radius:var(--r-icon); display:grid; place-items:center; margin-bottom:18px; }
.feature__title{ font-weight:600; font-size:19px; margin:0 0 8px; }
.feature__desc{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }
.ico-pink{ background:rgba(255,46,99,.12); }
.ico-orange{ background:rgba(255,107,61,.12); }
.ico-green{ background:rgba(46,230,168,.12); }

/* Chip / badge */
.chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-badge); background:var(--glass); backdrop-filter:blur(6px); font-size:12px; font-weight:600; color:var(--text); }
.chip--abs{ position:absolute; top:12px; left:12px; pointer-events:none; }
.pill-outline{ padding:10px 20px; border:1px solid var(--line-3); border-radius:var(--r-pill); background:var(--fill-1); font-weight:500; font-size:14.5px; color:var(--text-3); }
.badge-live{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border:1px solid rgba(255,46,99,.4); border-radius:var(--r-pill); background:rgba(255,46,99,.08); font-size:13px; font-weight:600; letter-spacing:.5px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-pink); }
.dot--pulse{ animation:livepulse 1.3s infinite; }
.dot--green{ background:var(--success); }

/* Price text */
.price{ font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--brand-link); }

/* Forms */
.field-label{ display:block; font-size:13.5px; color:var(--text-2); margin-bottom:8px; }
.field{ width:100%; padding:14px 16px; border-radius:var(--r-input); border:1px solid var(--line-3); background:var(--surface-2); color:var(--text); font-size:15px; transition:border-color .15s; }
.field:focus{ outline:none; border-color:var(--brand-link); }
textarea.field{ resize:vertical; min-height:96px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Plan selector (booking) */
.plan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.plan-opt{ display:block; text-align:center; padding:12px 6px; border-radius:var(--r-input); cursor:pointer; font-size:13.5px; font-weight:500; border:1px solid var(--line-3); background:var(--surface-2); color:var(--text); transition:.15s; }
.plan-opt input{ position:absolute; opacity:0; pointer-events:none; }
.plan-opt.is-active{ border-color:transparent; background:var(--brand-grad); color:#fff; }

/* Image slot */
.ls24-slot{ position:absolute; inset:0; background:var(--surface-3); }
.ls24-slot--rel{ position:relative; inset:auto; width:100%; height:100%; }
.ls24-slot__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ls24-slot__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted-3); text-align:center; padding:16px; font-size:13px; }
.ls24-slot__ph svg{ opacity:.7; }

/* Check list item */
.checkline{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text-3); line-height:1.55; }
.check-ico{ flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(46,230,168,.14); margin-top:2px; }

/* Notice / success box */
.ls24-notice{ padding:16px 18px; border-radius:14px; border:1px solid var(--line-2); background:var(--fill-1); margin-bottom:16px; font-size:14.5px; }
.ls24-notice--error{ border-color:rgba(255,46,99,.4); background:rgba(255,46,99,.08); }
.ls24-notice--ok{ border-color:rgba(46,230,168,.4); background:rgba(46,230,168,.08); }