@import url('https://fonts.googleapis.com/css2?family=Amaranth:wght@400;700&family=Rubik:wght@300;400;500;600;700&display=swap');
/* ── Booking System Admin Styles ─────────────────────────────────── */

.bs-admin { max-width: 1400px; --bs-brand-pink: #FE4980; --bs-brand-navy: #3A3D72; }
.bs-admin, .bs-admin .form-table, .bs-admin input, .bs-admin select, .bs-admin textarea, .bs-admin button {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bs-admin h1, .bs-admin h2, .bs-admin h3 { font-family: 'Amaranth', 'Rubik', sans-serif; color: #3A3D72; }

/* Inline SVG icons */
.bs-ico { display: inline-block; vertical-align: -.18em; flex-shrink: 0; }
.bs-kpi-icon svg, .bs-stat-icon svg { width: 24px; height: 24px; }
.bs-insight-ico svg { width: 20px; height: 20px; }
.bs-wk-alert svg, .bs-cal-chip svg, .bs-cal-add-hint svg, .bs-fin-liab-row svg,
.bs-eb-tab svg, .bs-eb-open svg, .bs-eb-media svg, #bs-btn-delete svg, .bs-step-line svg { vertical-align: -.2em; margin-right: 4px; }
/* Force border-box everywhere in both the wp-admin UI and the front-end staff
   portal, so the theme's box model can't push boxes past the viewport. */
.bs-admin, .bs-admin *, .bs-admin *::before, .bs-admin *::after,
.bs-fe-admin, .bs-fe-admin *, .bs-fe-admin *::before, .bs-fe-admin *::after { box-sizing: border-box !important; }
.bs-fe-admin, .bs-fe-admin .wrap { max-width: 100%; overflow-x: hidden; }
.bs-fe-admin img, .bs-fe-admin input, .bs-fe-admin select, .bs-fe-admin textarea { max-width: 100%; }
.bs-fe-admin table { max-width: 100%; }

/* ── Shortcode card ──────────────────────────────────────────────── */
.bs-shortcode-card {
    background: linear-gradient(135deg,#eef2ff 0%,#f0fdf4 100%);
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 13px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.bs-shortcode-card code {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    color: #4f46e5;
    user-select: all;
    font-family: Consolas,monospace;
    font-weight: 600;
}

/* ── Analytics header ────────────────────────────────────────────── */
.bs-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.bs-dash-title { font-size: 1rem; font-weight: 700; color: #1f2937; margin: 0; }
.bs-analytics-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-analytics-filters select,
.bs-analytics-filters input[type="date"] {
    height: 34px; padding: 0 10px;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px; background: #fff; color: #374151;
}
#bs-analytics-custom { display: flex; align-items: center; gap: 6px; }

/* ── KPI Grid ────────────────────────────────────────────────────── */
.bs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width:1100px) { .bs-kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .bs-kpi-grid { grid-template-columns: 1fr; } }

.bs-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .2s;
}
.bs-kpi-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.bs-kpi-card::before {
    content:'';
    position: absolute;
    top:0;left:0;right:0;height:4px;
    border-radius: 12px 12px 0 0;
    background: #9ca3af;
}
.bs-kpi-card--indigo::before  { background: linear-gradient(90deg,#4f46e5,#7c3aed); }
.bs-kpi-card--emerald::before { background: linear-gradient(90deg,#10b981,#059669); }
.bs-kpi-card--amber::before   { background: linear-gradient(90deg,#f59e0b,#d97706); }
.bs-kpi-card--rose::before    { background: linear-gradient(90deg,#f43f5e,#e11d48); }

.bs-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.bs-kpi-card--indigo  .bs-kpi-icon { background: #eef2ff; }
.bs-kpi-card--emerald .bs-kpi-icon { background: #ecfdf5; }
.bs-kpi-card--amber   .bs-kpi-icon { background: #fffbeb; }
.bs-kpi-card--rose    .bs-kpi-icon { background: #fff1f2; }

.bs-kpi-label { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.bs-kpi-value { font-size: 2rem; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 6px; }
.bs-kpi-sub   { font-size: 12px; color: #6b7280; }

/* ── Charts row ──────────────────────────────────────────────────── */
.bs-charts-row {
    display: grid;
    grid-template-columns: 240px 1fr 220px;
    gap: 16px;
    margin-bottom: 26px;
    align-items: start;
}
@media (max-width:1100px) { .bs-charts-row { grid-template-columns: 1fr 1fr; } }
@media (max-width:640px)  { .bs-charts-row { grid-template-columns: 1fr; } }

.bs-chart-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.bs-chart-box h3 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Donut */
.bs-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bs-donut-wrap svg { width: 160px; height: 160px; flex-shrink: 0; }
.bs-chart-legend { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.bs-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bs-legend-dot  { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bs-legend-type { flex: 1; color: #374151; text-transform: capitalize; }
.bs-legend-pct  { color: #9ca3af; font-size: 11px; }

/* Monthly chart */
#bs-chart-monthly { min-height: 180px; }
.bs-chart-legend-row { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 6px; }
.bs-chart-legend-row span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; }
.bs-chart-legend-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.bs-no-data { color: #9ca3af; font-size: 13px; text-align: center; padding: 40px 0; margin: 0; }

/* Payment breakdown */
.bs-breakdown-list { display: flex; flex-direction: column; gap: 14px; }
.bs-bdown-row      { display: flex; flex-direction: column; gap: 5px; }
.bs-bdown-header   { display: flex; justify-content: space-between; align-items: center; }
.bs-bdown-label    { font-size: 12px; font-weight: 600; color: #374151; }
.bs-bdown-count    { font-size: 11px; color: #6b7280; font-weight: 600; }
.bs-bdown-bar-wrap { background: #f3f4f6; border-radius: 4px; height: 8px; overflow: hidden; }
.bs-bdown-bar      { height: 100%; border-radius: 4px; transition: width .5s ease; }

/* ── Bookings section card ───────────────────────────────────────── */
.bs-section-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 24px;
}
.bs-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.bs-section-card-header h2 { margin: 0; font-size: 13px; font-weight: 700; color: #1f2937; }

.bs-filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.bs-filters input[type="date"],
.bs-filters select {
    height: 30px; padding: 0 8px;
    border: 1px solid #d1d5db; border-radius: 5px;
    font-size: 12px; background: #fff; color: #374151;
}

/* Table */
#bs-bookings-table-wrap { overflow-x: auto; }
#bs-bookings-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
#bs-bookings-table-wrap thead th {
    background: #f9fafb;
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
#bs-bookings-table-wrap tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    color: #374151;
}
#bs-bookings-table-wrap tbody tr:last-child td { border-bottom: none; }
#bs-bookings-table-wrap tbody tr.bs-booking-row:hover td { background: #f9fafb; cursor: pointer; }

.bs-table-empty,
.bs-table-loading {
    padding: 60px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-table-loading::after {
    content: '';
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: bs-spin .8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* Type pills */
.bs-type-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.bs-type-pill--session { background: #d1fae5; color: #065f46; }
.bs-type-pill--table_party { background: #ffe4e6; color: #9d174d; }
.bs-type-pill--party   { background: #dbeafe; color: #1e40af; }
.bs-type-pill--school  { background: #cffafe; color: #155e75; }
.bs-type-pill--event   { background: #ede9fe; color: #5b21b6; }

/* Status badges */
.bs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.bs-badge--pending   { background: #fef3c7; color: #92400e; }
.bs-badge--confirmed { background: #d1fae5; color: #065f46; }
.bs-badge--cancelled { background: #fee2e2; color: #991b1b; }

.bs-pay-badge { font-size: 12px; font-weight: 600; white-space: nowrap; }
.bs-pay-badge--unpaid       { color: #ef4444; }
.bs-pay-badge--deposit_paid { color: #f59e0b; }
.bs-pay-badge--paid         { color: #10b981; }
.bs-pay-badge--cash         { color: #10b981; }

/* ── Booking detail grid inside modal ────────────────────────────── */
.bs-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 4px;
}
.bs-detail-row { display: contents; }
.bs-detail-row dt,
.bs-detail-row dd {
    padding: 9px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    margin: 0;
}
.bs-detail-row:last-child dt,
.bs-detail-row:last-child dd { border-bottom: none; }
.bs-detail-row dt {
    background: #f9fafb;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
}
.bs-detail-row dd { background: #fff; color: #111827; }

/* ── Shared modal ────────────────────────────────────────────────── */
/* Booking-detail modal must sit ABOVE the day-editor modal when opened from it */
#bs-booking-modal { z-index: 100002; }
/* Clickable booking rows inside the day-slot view */
.bs-slot-bk-row { cursor: pointer; transition: background .12s; }
.bs-slot-bk-row:hover { background: #fff2f6; }
.bs-slot-bk-caret { color: #FE4980; font-weight: 700; margin-left: 4px; }

.bs-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.bs-modal-inner {
    background: #fff;
    border-radius: 14px;
    padding: 0;
    max-width: 540px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    position: relative;
}
.bs-modal-inner--wide { max-width: 740px; }

.bs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f3f4f6;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.bs-modal-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }

.bs-modal-close {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: #f3f4f6;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s,color .15s;
    line-height: 1; padding: 0;
}
.bs-modal-close:hover { background: #fee2e2; color: #ef4444; }

.bs-modal-body { padding: 18px 22px; }

.bs-modal-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 22px;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
    border-radius: 0 0 14px 14px;
    position: sticky; bottom: 0;
}

/* ── Calendar ────────────────────────────────────────────────────── */
.bs-cal-hint { color: #6b7280; font-size: 13px; margin: -6px 0 16px; }

/* Stat cards row */
.bs-stat-row {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width:1100px) { .bs-stat-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px)  { .bs-stat-row { grid-template-columns: repeat(2,1fr); } }

.bs-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.bs-stat-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
.bs-stat-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.bs-stat-card--indigo  .bs-stat-icon { background: #eef2ff; }
.bs-stat-card--emerald .bs-stat-icon { background: #ecfdf5; }
.bs-stat-card--sky     .bs-stat-icon { background: #eff6ff; }
.bs-stat-card--violet  .bs-stat-icon { background: #f5f3ff; }
.bs-stat-card--rose    .bs-stat-icon { background: #fff1f2; }
.bs-stat-value { font-size: 1.6rem; font-weight: 800; color: #111827; line-height: 1; }
.bs-stat-label { font-size: 11px; color: #6b7280; font-weight: 600; margin-top: 4px; }

.bs-cal-loading { grid-column: span 7; padding: 56px 20px; text-align: center; color: #9ca3af; background: #fff; font-size: 14px; }

/* Centered nav below calendar */
.bs-cal-nav  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 16px 0 14px;
}
.bs-cal-nav-btn { border-radius: 7px !important; }
.bs-cal-month-label { font-size: 18px; font-weight: 700; min-width: 200px; text-align: center; color: #111827; }

.bs-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.bs-cal-header {
    background: #1e293b;
    color: rgba(255,255,255,.65);
    text-align: center;
    padding: 10px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.bs-cal-day {
    background: #fff;
    min-height: 96px;
    padding: 8px 7px;
    position: relative;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.bs-cal-day--empty     { background: #f8fafc; min-height: 96px; }
.bs-cal-day--clickable { cursor: pointer; }
.bs-cal-day--clickable:hover { background: #f0f4ff; }
.bs-cal-day--blocked   { background: #fff5f5; }
.bs-cal-day--today     { background: #eef2ff; }
.bs-cal-day--today .bs-cal-day-num { color: #4f46e5; }

.bs-cal-day-num {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bs-cal-count {
    background: #4f46e5;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 14px;
}
.bs-cal-chip {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bs-chip-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-chip-count {
    flex-shrink: 0;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bs-cal-chip--session { background: #d1fae5; color: #065f46; }
.bs-cal-chip--table_party { background: #ffe4e6; color: #9d174d; }
.bs-cal-chip--party   { background: #dbeafe; color: #1e40af; }
.bs-cal-chip--school  { background: #cffafe; color: #155e75; }
.bs-cal-chip--event   { background: #ede9fe; color: #5b21b6; }
.bs-cal-chip--blocked { background: #fee2e2; color: #991b1b; font-weight: 700; }
.bs-cal-chip--more    { background: #f3f4f6; color: #6b7280; }

.bs-cal-add-hint {
    position: absolute; bottom: 5px; right: 6px;
    font-size: 10px; color: #a5b4fc;
    opacity: 0; transition: opacity .1s;
}
.bs-cal-day--clickable:hover .bs-cal-add-hint { opacity: 1; }

.bs-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.bs-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7280; }
.bs-leg::before { content:''; width:10px; height:10px; border-radius:3px; display:inline-block; }
.bs-leg--blocked::before { background:#fee2e2; border:1px solid #fca5a5; }
.bs-leg--session::before { background:#d1fae5; }
.bs-leg--party::before   { background:#dbeafe; }
.bs-leg--event::before   { background:#ede9fe; }

/* Day modal inner sections */
.bs-day-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
#bs-day-existing h3,
#bs-day-add-booking h3 {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 10px;
}
#bs-day-bookings-list table { width: 100%; border-collapse: collapse; font-size: 12px; }
#bs-day-bookings-list th {
    background: #f9fafb;
    padding: 6px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid #e5e7eb;
}
#bs-day-bookings-list td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
#bs-day-bookings-list tr:last-child td { border-bottom: none; }

/* Form in day modal */
.bs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bs-form-col { display: flex; flex-direction: column; gap: 4px; }
.bs-form-col--full { grid-column: span 2; }
.bs-form-col label {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bs-form-col input,
.bs-form-col select,
.bs-form-col textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
    color: #111827;
}
.bs-form-col input:focus,
.bs-form-col select:focus,
.bs-form-col textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.bs-inline-error {
    color: #dc2626;
    font-size: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* ── Availability page ───────────────────────────────────────────── */
.bs-avail-panel {
    background: #fff;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 20px;
    max-width: 520px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bs-avail-panel label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12px; color: #6b7280; }
.bs-avail-panel input[type="date"],
.bs-avail-panel input[type="time"],
.bs-avail-panel input[type="text"] {
    height: 34px; padding: 0 10px;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px;
    transition: border-color .15s;
}
.bs-avail-panel input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

.bs-slot-preview { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.bs-slot-badge { background: #4f46e5; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.bs-no-slots { color: #ef4444; font-weight: 600; font-size: 13px; }

/* ── Notices ─────────────────────────────────────────────────────── */
.bs-notice { padding: 10px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.bs-notice--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bs-notice--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.bs-hr { margin: 24px 0; border: none; border-top: 1px solid #f3f4f6; }

/* ── Front-end admin portal ─────────────────────────────────────────── */
.bs-fe-admin {
    --bs-fe-pink: #FE4980;
    --bs-fe-pink-dark: #e32d68;
    --bs-fe-navy: #3A3D72;
    --bs-fe-grad: linear-gradient(135deg, #FE4980, #ff7d5e);
    --bs-fe-head: 'Amaranth', 'Rubik', sans-serif;
    max-width: 1320px; margin: 0 auto;
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #3A3D72;
    display: flex; gap: 24px; align-items: flex-start;
}
.bs-fe-admin h1, .bs-fe-admin h2, .bs-fe-admin h3, .bs-fe-brand { font-family: var(--bs-fe-head); }
.bs-fe-admin .wrap { margin: 0; max-width: none; }

/* Fixed (sticky) left sidebar */
.bs-fe-side {
    position: sticky; top: 24px; width: 214px; flex-shrink: 0;
    background: #fff; border-radius: 18px; padding: 16px;
    box-shadow: 0 6px 22px rgba(180,60,110,.10);
}
.bs-fe-brand { font-weight: 800; color: var(--bs-fe-pink); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 12px 14px; }
.bs-fe-nav { display: flex; flex-direction: column; gap: 6px; }
.bs-fe-tab {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 9px 12px; border: none; background: transparent; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: #3A3D72; cursor: pointer;
}
.bs-fe-tab span { font-size: 15px; display: inline-flex; align-items: center; }
.bs-fe-tab span svg { width: 18px; height: 18px; }
.bs-fe-tab.is-active { background: var(--bs-fe-grad); color: #fff; box-shadow: 0 3px 9px rgba(254,73,128,.25); }
.bs-fe-tab:not(.is-active):hover { background: #fdf2f8; }

.bs-fe-main { flex: 1; min-width: 0; }

@media (max-width: 860px) {
    .bs-fe-admin { flex-direction: column; }
    .bs-fe-side { position: static; width: 100%; }
    /* Vertical 2-up grid — never a horizontal scroll bar. */
    .bs-fe-nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
    .bs-fe-tab { width: 100% !important; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 460px) {
    .bs-fe-nav { grid-template-columns: 1fr; }
}

/* Hide the shortcode alert + shrink duplicate page titles inside the portal */
.bs-fe-admin .bs-shortcode-card { display: none; }
.bs-fe-admin .wrap > h1 { font-size: 1.4rem; margin-top: 0; }

/* Pink/orange accent text */
.bs-fe-admin h1, .bs-fe-admin h2, .bs-fe-admin h3,
.bs-fe-admin .bs-kpi-label, .bs-fe-admin .bs-kpi-value,
.bs-fe-admin .bs-stat-value, .bs-fe-admin .bs-dash-title,
.bs-fe-admin .bs-section-card-header h2, .bs-fe-admin .bs-chart-box h3 {
    color: var(--bs-fe-pink) !important;
}

/* Distinct, softly shadowed light boxes */
.bs-fe-admin .bs-kpi-card, .bs-fe-admin .bs-chart-box,
.bs-fe-admin .bs-section-card, .bs-fe-admin .bs-stat-card {
    background: #fffdfe; border: 1px solid #f6e6ef;
    box-shadow: 0 4px 16px rgba(180,60,110,.07);
}
.bs-fe-admin .bs-section-card-header { background: #fdf2f8; }

/* WP admin class shims (styles them off wp-admin) */
.bs-fe-admin .button {
    display: inline-block; padding: 7px 14px; border-radius: 8px; border: 1px solid #f0cadd;
    background: #fff; color: #3A3D72; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.bs-fe-admin .button-primary { background: var(--bs-fe-grad); border: none; color: #fff; }
.bs-fe-admin .button-small { padding: 4px 10px; font-size: 12px; }
.bs-fe-admin .button-link-delete { color: #dc2626; border-color: #fecaca; background: #fff; }
.bs-fe-admin input[type="text"], .bs-fe-admin input[type="email"], .bs-fe-admin input[type="number"],
.bs-fe-admin input[type="date"], .bs-fe-admin input[type="time"], .bs-fe-admin input[type="tel"], .bs-fe-admin input[type="password"],
.bs-fe-admin select, .bs-fe-admin textarea {
    padding: 8px 10px; border: 1px solid #e7cad9; border-radius: 8px; font-size: 13px; background: #fff; box-sizing: border-box; color: #4a2036;
}
.bs-fe-admin .form-table { width: 100%; border-collapse: collapse; }
.bs-fe-admin .form-table th { text-align: left; padding: 10px 12px 10px 0; vertical-align: top; font-size: 13px; width: 200px; }
.bs-fe-admin .form-table td { padding: 10px 0; }
.bs-fe-admin .widefat { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #f6e6ef; border-radius: 10px; overflow: hidden; }
.bs-fe-admin .widefat th, .bs-fe-admin .widefat td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #fbeef4; font-size: 13px; }
.bs-fe-admin .nav-tab-wrapper { border-bottom: 1px solid #f6e6ef; margin-bottom: 16px; display: flex; gap: 4px; }
.bs-fe-admin .nav-tab { padding: 9px 14px; background: #fdf2f8; border: 1px solid #f6e6ef; border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #b06; text-decoration: none; }
.bs-fe-admin .nav-tab-active { background: #fff; color: var(--bs-fe-pink); }
.bs-fe-admin .description, .bs-fe-admin .bs-cal-hint, .bs-fe-admin .bs-muted { color: #b07894; }

/* ── Your week ahead (dashboard) — works in wp-admin + front-end ─────── */
.bs-week-card {
    background: linear-gradient(135deg, #fdf2f8, #fff7ed);
    border: 1px solid #fbcfe8; border-radius: 14px; padding: 16px 18px; margin-bottom: 22px;
    box-shadow: 0 4px 16px rgba(180,60,110,.07);
}
.bs-week-title { font-weight: 700; font-size: 15px; color: #e32d68; margin: 0 0 12px; }
.bs-week-range { font-weight: 500; font-size: 12px; color: #b07894; margin-left: 6px; }

.bs-wk-carousel {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.bs-wk-carousel::-webkit-scrollbar { display: none; height: 0; }
.bs-wk-carousel.is-dragging { cursor: grabbing; }
.bs-wk-card {
    flex: 0 0 calc((100% - 42px) / 4); min-width: 150px;
    background: #fff !important; border: 1px solid #f3d9e6 !important; border-radius: 16px !important;
    padding: 26px 18px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-align: center; user-select: none;
    box-shadow: 0 8px 22px rgba(180,60,110,.12) !important;
    transition: box-shadow .15s, transform .1s;
}
.bs-wk-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(180,60,110,.18) !important; }
.bs-wk-card.is-active { box-shadow: 0 0 0 2px #FE4980, 0 8px 22px rgba(180,60,110,.14) !important; }
.bs-wk-card-num { font-size: 34px; font-weight: 800; color: var(--bs-fe-pink, #FE4980) !important; line-height: 1; }
.bs-wk-card-lbl { font-size: 12px; color: var(--bs-fe-pink, #FE4980) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .bs-wk-card { flex-basis: calc((100% - 14px) / 2); } }

.bs-wk-detail { margin-top: 6px; }
.bs-wk-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-bottom: 1px solid #fce7f3; font-size: 13px; border-radius: 8px; cursor: pointer; }
.bs-wk-row:hover { background: #fff; }
.bs-wk-row:last-child { border-bottom: none; }
.bs-wk-when { font-weight: 600; min-width: 150px; color: #3A3D72; }
.bs-wk-name { flex: 1; color: #4a2036; }
.bs-wk-size { color: #b07894; font-size: 12px; }
.bs-wk-go { color: #d18ab0; font-size: 18px; font-weight: 700; }
.bs-wk-alert { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 9px 13px; margin-bottom: 12px; font-size: 13px; }

/* ── Unified pink palette on cards (overrides the multi-colour stripes) ── */
.bs-kpi-card::before,
.bs-kpi-card--indigo::before, .bs-kpi-card--emerald::before,
.bs-kpi-card--amber::before, .bs-kpi-card--rose::before {
    background: linear-gradient(90deg, #FE4980, #f59e0b) !important;
}
.bs-kpi-card--indigo .bs-kpi-icon, .bs-kpi-card--emerald .bs-kpi-icon,
.bs-kpi-card--amber .bs-kpi-icon, .bs-kpi-card--rose .bs-kpi-icon { background: #fdf2f8 !important; }
.bs-stat-card--indigo .bs-stat-icon, .bs-stat-card--emerald .bs-stat-icon,
.bs-stat-card--sky .bs-stat-icon, .bs-stat-card--violet .bs-stat-icon,
.bs-stat-card--rose .bs-stat-icon { background: #fdf2f8 !important; }

/* Warm type pills everywhere (no blue/green) */
.bs-type-pill--session, .bs-cal-chip--session { background: #fce7f3 !important; color: #9d174d !important; }
.bs-type-pill--party,   .bs-cal-chip--party   { background: #fef3c7 !important; color: #92400e !important; }
.bs-type-pill--event,   .bs-cal-chip--event   { background: #f3e8ff !important; color: #6b21a8 !important; }

/* ── Insights strip ─────────────────────────────────────────────────── */
.bs-insights-title { font-size: 14px; font-weight: 800; color: #e32d68; margin: 4px 0 12px; }
.bs-insights-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 1100px) { .bs-insights-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .bs-insights-grid { grid-template-columns: repeat(2, 1fr); } }
.bs-insight {
    background: #fffdfe; border: 1px solid #f6e6ef; border-radius: 14px; padding: 14px;
    display: flex; align-items: flex-start; gap: 11px; box-shadow: 0 3px 12px rgba(180,60,110,.06);
}
.bs-insight > div { min-width: 0; flex: 1; }
.bs-insight-ico { font-size: 20px; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fdf2f8; border-radius: 11px; }
.bs-insight-val { font-size: 18px; font-weight: 800; color: #e32d68; line-height: 1.25; min-height: 1.25em; }
.bs-insight-lbl { font-size: 11px; color: #3A3D72; font-weight: 600; margin-top: 3px; line-height: 1.3; }

/* ── Seamless bookings toolbar ──────────────────────────────────────── */
.bs-toolbar {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 14px 20px; background: #fffafc; border-bottom: 1px solid #f6e6ef;
}
.bs-tb-field { display: flex; flex-direction: column; gap: 4px; }
.bs-tb-field > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b07894; }
.bs-tb-field input, .bs-tb-field select {
    height: 38px !important; padding: 0 12px !important; border: 1px solid #f0cadd !important; border-radius: 10px !important;
    font-size: 13px; background: #fff; color: #4a2036; min-width: 150px; width: auto;
}
.bs-tb-btn { height: 38px; align-self: flex-end; }

/* ── Mass-add sessions ───────────────────────────────────────────── */
.bs-massadd-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 14px 16px;
    margin-top: 12px;
}
.bs-massadd-controls .bs-form-col { gap: 5px; }
.bs-massadd-controls input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}
.bs-weekday-col { flex: 1; min-width: 240px; }
.bs-weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-weekday-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    user-select: none;
}
.bs-weekday-chip input { margin: 0; }

/* ── Day slot-manager modal ──────────────────────────────────────── */
.bs-muted { color: #9ca3af; font-size: 13px; margin: 0; }
.bs-hint-text { color: #9ca3af; font-size: 12px; margin: 8px 0 0; font-style: italic; }

.bs-day-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.bs-blocked-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.bs-modal-section { margin-bottom: 22px; }
.bs-modal-section:last-child { margin-bottom: 0; }
.bs-modal-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}
.bs-modal-section-head h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.bs-slots-list { margin-bottom: 14px; }
.bs-slot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bs-slot-table th {
    background: #f9fafb;
    padding: 7px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid #e5e7eb;
}
.bs-slot-table td { padding: 9px 10px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.bs-slot-table tr:last-child td { border-bottom: none; }
.bs-slot-table .button-link { cursor: pointer; text-decoration: none; font-size: 12px; }
.bs-slot-table .bs-remove-slot { color: #ef4444; }
.bs-slot-table .bs-view-slot { color: #4f46e5; }
.bs-slot-table .button-link:hover { text-decoration: underline; }
.bs-slot-table .button-link[disabled] { color: #d1d5db; cursor: not-allowed; }
.bs-slot-table .bs-sep { color: #d1d5db; font-size: 11px; }

.bs-slot-detail {
    display: none;
    margin-top: 12px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}
.bs-slot-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
}
.bs-slot-detail-close { background: none; border: none; cursor: pointer; color: #6b7280; font-size: 12px; }
.bs-slot-detail-close:hover { color: #111827; }
.bs-slot-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bs-slot-detail th { background: #fff; padding: 7px 10px; text-align: left; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #e5e7eb; }
.bs-slot-detail td { padding: 8px 10px; border-bottom: 1px solid #eef0f2; color: #374151; vertical-align: top; }
.bs-slot-detail tr:last-child td { border-bottom: none; }

/* Add-slot inline form */
.bs-add-slot-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 14px;
}
.bs-add-slot-form .bs-form-col { flex: 1; min-width: 110px; gap: 4px; }
.bs-add-slot-form .button { height: 36px; }
.bs-add-slot-form input,
.bs-add-slot-form select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

#bs-day-bookings-list { margin-bottom: 14px; }
#bs-day-bookings-list table { width: 100%; border-collapse: collapse; font-size: 12px; }
#bs-day-bookings-list th {
    background: #f9fafb; padding: 7px 10px; text-align: left;
    font-size: 10px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #e5e7eb;
}
#bs-day-bookings-list td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: #374151; }
#bs-day-bookings-list tr:last-child td { border-bottom: none; }

#bs-day-add-booking {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 16px;
    margin-top: 4px;
}

/* ── Consistency pass: typography + buttons (front-end portal) ────────── */
.bs-insights-title { font-size: 15px !important; font-weight: 700 !important; }
.bs-fe-admin .wrap > h1 { font-size: 1.25rem; font-weight: 700; }
.bs-fe-admin h2, .bs-fe-admin .bs-dash-title, .bs-fe-admin .bs-section-card-header h2 { font-size: 15px !important; font-weight: 700 !important; }
.bs-fe-admin h3, .bs-fe-admin .bs-chart-box h3 { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; }

/* Consistent, compact buttons everywhere in the portal */
.bs-fe-admin .button,
.bs-fe-admin .button-primary,
.bs-fe-admin .button-small,
.bs-fe-admin input[type="submit"] {
    -webkit-appearance: none !important; appearance: none !important;
    text-transform: none !important; letter-spacing: normal !important;
    padding: 8px 15px !important; font-size: 13px !important; font-weight: 600 !important;
    border-radius: 9px !important; line-height: 1.3 !important; height: auto !important;
    box-shadow: none !important; cursor: pointer;
}
.bs-fe-admin .button-primary,
.bs-fe-admin input[type="submit"] { background: var(--bs-fe-grad) !important; color: #fff !important; border: none !important; }
.bs-fe-admin .button-small { padding: 5px 11px !important; font-size: 12px !important; }

/* Link-style buttons (Remove / View) — readable, not giant pills */
.bs-fe-admin .button-link,
.bs-fe-admin .bs-remove-slot,
.bs-fe-admin .bs-view-slot,
.bs-fe-admin .bs-gc-void {
    -webkit-appearance: none !important; appearance: none !important;
    background: none !important; border: none !important; box-shadow: none !important;
    padding: 4px 6px !important; font-size: 12px !important; font-weight: 600 !important;
    border-radius: 6px !important; cursor: pointer; text-transform: none !important; width: auto !important;
}
.bs-fe-admin .bs-remove-slot, .bs-fe-admin .bs-gc-void { color: #dc2626 !important; }
.bs-fe-admin .bs-view-slot { color: #e32d68 !important; }
.bs-fe-admin .button-link:hover { text-decoration: underline; }

/* Slightly smaller, consistent input text */
.bs-fe-admin input, .bs-fe-admin select, .bs-fe-admin textarea { font-size: 12.5px !important; }

/* Modal buttons (day manager, booking detail) reset from theme too */
.bs-modal .button, .bs-modal .button-primary, .bs-modal .button-small, .bs-modal .button-link, .bs-modal .bs-remove-slot, .bs-modal .bs-view-slot {
    -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: normal;
}
.bs-modal .button { padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 9px; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; }
.bs-modal .button-primary { background: var(--bs-fe-grad, linear-gradient(135deg,#FE4980,#f59e0b)); color: #fff; border: none; }
.bs-modal .bs-remove-slot { background: none; border: none; color: #dc2626; padding: 4px 8px; font-size: 12px; box-shadow: none; }
.bs-modal .bs-view-slot { background: none; border: none; color: #e32d68; padding: 4px 8px; font-size: 12px; box-shadow: none; }

/* ── Marketing page ──────────────────────────────────────────────────── */
.bs-mk-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .bs-mk-layout { grid-template-columns: 1fr; } }
.bs-mk-list { display: flex; flex-direction: column; gap: 6px; }
.bs-mk-item {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 12px 14px; border: 1px solid #f0e0ea; border-radius: 11px; background: #fff; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #3A3D72;
}
.bs-mk-item:hover { background: #fdf2f8; }
.bs-mk-item.is-active { border-color: #FE4980; box-shadow: 0 0 0 2px rgba(236,72,153,.12); }
.bs-mk-dot { width: 9px; height: 9px; border-radius: 50%; }
.bs-mk-dot.on { background: #10b981; }
.bs-mk-dot.off { background: #d1d5db; }
.bs-mk-editor .bs-form-col { display: flex; flex-direction: column; gap: 5px; }
.bs-mk-editor label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.bs-mk-editor input[type="text"], .bs-mk-editor textarea { width: 100%; padding: 9px 11px; border: 1px solid #e7cad9; border-radius: 8px; box-sizing: border-box; }
.bs-mk-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: none; letter-spacing: 0; }

/* ── Month-ahead: show more + modal ─────────────────────────────────── */
.bs-wk-more {
    display: block; width: 100%; margin-top: 8px; padding: 10px 14px;
    border: 1px dashed #eab8d3; border-radius: 10px; background: #fff;
    color: #3A3D72; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bs-wk-more:hover { background: #fdf2f8; border-style: solid; }

.bs-wk-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.bs-wk-modal.is-open { display: block; }
.bs-wk-modal-backdrop { position: absolute; inset: 0; background: rgba(30,10,25,.45); }
.bs-wk-modal-box {
    position: relative; margin: 6vh auto 0; max-width: 640px; width: calc(100% - 32px);
    max-height: 82vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden;
}
.bs-wk-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid #f3e0eb;
    background: linear-gradient(135deg,#fdf2f8,#fff7ed);
}
.bs-wk-modal-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #3A3D72; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bs-wk-modal-close {
    border: none; background: #fff; width: 30px; height: 30px; border-radius: 8px;
    font-size: 14px; color: #3A3D72; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.bs-wk-modal-close:hover { background: #fce8f2; }
.bs-wk-modal-body { padding: 12px 16px 18px; overflow-y: auto; }

/* ── Flow builder ───────────────────────────────────────────────────── */
.bs-flow-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.bs-flow-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid #f0e0ea; border-radius: 11px; background: #fff;
}
.bs-flow-item-main { flex: 1; min-width: 0; }
.bs-flow-item-name { font-weight: 700; color: #1f2937; font-size: 14px; }
.bs-flow-item-sub  { font-size: 12px; color: #9ca3af; margin-top: 2px; text-transform: capitalize; }

.bs-flow-editor { margin-top: 16px; }
.bs-flow-ed { border: 1px solid #f0d7e6; border-radius: 14px; background: #fdf7fb; padding: 16px 18px; }
.bs-flow-ed-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bs-flow-name { flex: 1; min-width: 200px; font-size: 15px; font-weight: 700; padding: 9px 12px; border: 1px solid #e7cad9; border-radius: 8px; }
.bs-flow-when { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bs-flow-when label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.bs-flow-when select { padding: 8px 10px; border: 1px solid #e7cad9; border-radius: 8px; background: #fff; font-weight: 600; color: #3A3D72; }

.bs-flow-steps { display: flex; flex-direction: column; gap: 8px; position: relative; }
.bs-flow-empty { color: #9ca3af; font-size: 13px; padding: 14px; border: 1px dashed #e7cad9; border-radius: 10px; background: #fff; text-align: center; }

.bs-step {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #fff; border: 1px solid #ecd3e1; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.bs-step.is-dragging { opacity: .45; }
.bs-step.is-over { border-color: #FE4980; box-shadow: 0 0 0 2px rgba(236,72,153,.18); }
.bs-step-drag { cursor: grab; color: #cbb3c2; font-weight: 700; user-select: none; letter-spacing: -2px; }
.bs-step-drag:active { cursor: grabbing; }
.bs-step-body { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-step-body select, .bs-step-body input { padding: 7px 9px; border: 1px solid #e2c7d6; border-radius: 7px; background: #fff; font-size: 13px; }
.bs-step-lbl { font-size: 13px; color: #6b7280; }
.bs-step-note { font-size: 12px; color: #b08aa0; font-style: italic; }
.bs-step-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }
.bs-step-tag--email { background: #eef2ff; color: #4f46e5; }
.bs-step-tag--wait  { background: #fffbeb; color: #b45309; }
.bs-step-tag--cond  { background: #ecfdf5; color: #047857; }
.bs-step-order { font-size: 11px; font-weight: 700; color: #cbb3c2; min-width: 16px; text-align: center; }
.bs-step-del { border: none; background: transparent; color: #d199b6; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.bs-step-del:hover { background: #fce8f2; color: #e32d68; }

.bs-flow-addrow { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.bs-flow-ed-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

/* ── Visual email builder ───────────────────────────────────────────── */
.bs-eb-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.bs-eb-tab {
    padding: 8px 16px; border: 1px solid #e7cad9; border-radius: 9px 9px 0 0; background: #fbeef5;
    color: #3A3D72; font-size: 13px; font-weight: 700; cursor: pointer; border-bottom: none;
}
.bs-eb-tab.is-active { background: #fff; color: #e32d68; box-shadow: 0 -2px 0 #FE4980 inset; }

.bs-eb { display: grid; grid-template-columns: 170px 1fr 240px; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .bs-eb { grid-template-columns: 1fr; } }

.bs-eb-palette { border: 1px solid #f0e0ea; border-radius: 12px; padding: 12px; background: #fdf7fb; }
.bs-eb-palette-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #b08aa0; margin-bottom: 8px; }
.bs-eb-pal {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 6px;
    border: 1px solid #ecd3e1; border-radius: 9px; background: #fff; cursor: grab;
    font-size: 13px; font-weight: 600; color: #6b3350; user-select: none;
}
.bs-eb-pal:hover { border-color: #FE4980; }
.bs-eb-pal:active { cursor: grabbing; }
.bs-eb-pal-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #fce8f2; border-radius: 6px; font-size: 13px; }
.bs-eb-ph { display: flex; flex-wrap: wrap; gap: 5px; }
.bs-eb-phchip { border: 1px dashed #e0b7cf; background: #fff; color: #3A3D72; border-radius: 999px; padding: 3px 9px; font-size: 11px; cursor: pointer; }
.bs-eb-phchip:hover { background: #fce8f2; border-style: solid; }

.bs-eb-canvas {
    min-height: 320px; border: 2px dashed #ecd3e1; border-radius: 12px; padding: 16px;
    background: #faf5f8; display: flex; flex-direction: column; gap: 4px;
}
.bs-eb-canvas.is-drop { border-color: #FE4980; background: #fdeef6; }
.bs-eb-empty { margin: auto; text-align: center; color: #b08aa0; font-size: 14px; line-height: 1.7; }
.bs-eb-empty span { font-size: 12px; color: #cbb3c2; }

.bs-eb-block { position: relative; border: 1px solid transparent; border-radius: 8px; background: #fff; padding: 10px 12px; cursor: pointer; }
.bs-eb-block:hover { border-color: #f3c9de; }
.bs-eb-block.is-sel { border-color: #FE4980; box-shadow: 0 0 0 2px rgba(236,72,153,.15); }
.bs-eb-block-tools { position: absolute; top: 4px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.bs-eb-block:hover .bs-eb-block-tools, .bs-eb-block.is-sel .bs-eb-block-tools { opacity: 1; }
.bs-eb-drag { cursor: grab; color: #cbb3c2; font-weight: 700; letter-spacing: -2px; padding: 2px 4px; }
.bs-eb-del { border: none; background: #fce8f2; color: #e32d68; border-radius: 5px; cursor: pointer; font-size: 11px; padding: 2px 6px; }
.bs-eb-preview { pointer-events: none; }

.bs-eb-settings { border: 1px solid #f0e0ea; border-radius: 12px; padding: 14px; background: #fff; }
.bs-eb-settings-empty { color: #b08aa0; font-size: 13px; }
.bs-eb-settings-h { font-size: 12px; font-weight: 800; color: #3A3D72; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.bs-eb-fld { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.bs-eb-fld label { font-size: 11px; font-weight: 700; color: #6b7280; }
.bs-eb-fld input[type="text"], .bs-eb-fld input[type="number"], .bs-eb-fld textarea {
    width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #e2c7d6; border-radius: 7px; font-size: 13px;
}
.bs-eb-fld input[type="color"] { width: 46px; height: 30px; padding: 0; border: 1px solid #e2c7d6; border-radius: 6px; background: #fff; }
.bs-eb-align { display: inline-flex; gap: 4px; }
.bs-eb-align button { width: 30px; height: 30px; border: 1px solid #e2c7d6; background: #fff; border-radius: 6px; cursor: pointer; font-weight: 700; color: #3A3D72; }
.bs-eb-align button.is-on { background: #FE4980; color: #fff; border-color: #FE4980; }
.bs-eb-del-btn { margin-top: 6px; color: #e32d68; }

/* ── Email builder: columns ─────────────────────────────────────────── */
.bs-eb-colwrap { display: flex; gap: 10px; }
.bs-eb-col {
    flex: 1; min-width: 0; min-height: 70px; border: 1px dashed #e0c3d5; border-radius: 8px;
    padding: 8px; background: #fdf7fb; display: flex; flex-direction: column; gap: 4px;
}
.bs-eb-col.is-drop { border-color: #FE4980; background: #fdeef6; }
.bs-eb-col-empty { margin: auto; color: #cbb3c2; font-size: 12px; padding: 12px 0; text-align: center; }
.bs-eb-child { background: #fff; }
.bs-eb-cols.is-sel { border-color: #FE4980; box-shadow: 0 0 0 2px rgba(236,72,153,.15); }

/* ══════════════════════════════════════════════════════════════════════
   DE-BULK RESETS — the front-end theme paints every <button> as a big pink
   gradient pill. These override that so plugin controls stay compact.
   ══════════════════════════════════════════════════════════════════════ */
.bs-fe-admin button,
.bs-eb-modal button {
    -webkit-appearance: none !important; appearance: none !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-family: inherit !important; width: auto;
}

/* Sidebar nav: ghost by default, gradient only when active */
.bs-fe-admin .bs-fe-tab {
    background: transparent !important; background-image: none !important;
    color: #3A3D72 !important; box-shadow: none !important;
    padding: 8px 11px !important; font-size: 13px !important; font-weight: 600 !important;
    border: none !important; border-radius: 10px !important; text-align: left !important;
}
.bs-fe-admin .bs-fe-tab.is-active {
    background: var(--bs-fe-grad) !important; color: #fff !important;
    box-shadow: 0 3px 9px rgba(254,73,128,.22) !important;
}
.bs-fe-admin .bs-fe-tab:not(.is-active):hover { background: #fdf2f8 !important; }
.bs-fe-brand { padding: 4px 10px 12px !important; font-size: 11px !important; }

/* Marketing template list: compact rows, not pills */
#bs-mk-list .bs-mk-item {
    background: #fff !important; background-image: none !important; box-shadow: none !important;
    color: #3A3D72 !important; text-align: left !important; justify-content: space-between !important;
    padding: 10px 13px !important; font-size: 13px !important; font-weight: 600 !important;
    border: 1px solid #f0e0ea !important; border-radius: 10px !important; width: 100% !important;
}
#bs-mk-list .bs-mk-item:hover { background: #fdf2f8 !important; }
#bs-mk-list .bs-mk-item.is-active { border-color: #FE4980 !important; box-shadow: 0 0 0 2px rgba(236,72,153,.12) !important; }

/* Placeholder chips: small pills */
.bs-eb-phchip {
    background: #fff !important; background-image: none !important; box-shadow: none !important;
    color: #3A3D72 !important; border: 1px dashed #e0b7cf !important; border-radius: 999px !important;
    padding: 3px 10px !important; font-size: 11px !important; font-weight: 600 !important; width: auto !important;
}
.bs-eb-phchip:hover { background: #fce8f2 !important; border-style: solid !important; }

/* Palette blocks + builder tabs */
.bs-eb-pal {
    background: #fff !important; background-image: none !important; box-shadow: none !important;
    color: #6b3350 !important; padding: 8px 10px !important; font-size: 12.5px !important;
    font-weight: 600 !important; border: 1px solid #ecd3e1 !important; border-radius: 9px !important;
}
.bs-eb-tab {
    background: #fbeef5 !important; background-image: none !important; box-shadow: none !important;
    color: #3A3D72 !important; padding: 7px 14px !important; font-size: 13px !important; font-weight: 700 !important;
    border: 1px solid #e7cad9 !important; border-bottom: none !important; border-radius: 9px 9px 0 0 !important;
}
.bs-eb-tab.is-active { background: #fff !important; color: #e32d68 !important; box-shadow: 0 -2px 0 #FE4980 inset !important; }
.bs-eb-del, .bs-step-del {
    background: #fce8f2 !important; background-image: none !important; color: #e32d68 !important;
    box-shadow: none !important; padding: 2px 6px !important; font-size: 11px !important; border-radius: 5px !important;
}

/* ── Visual builder popup (modal) ───────────────────────────────────── */
.bs-eb-open { display: inline-flex !important; align-items: center; gap: 6px; }
.bs-eb-thumb { margin-top: 12px; border: 1px solid #f0e0ea; border-radius: 12px; overflow: hidden; background: #faf5f8; }
.bs-eb-thumb-inner { max-height: 260px; overflow: hidden; padding: 14px; background: #fff; }
.bs-eb-thumb-cap { padding: 8px 12px; font-size: 12px; color: #9ca3af; }
.bs-eb-thumb-empty { padding: 26px 16px; text-align: center; color: #b08aa0; font-size: 13px; }

.bs-eb-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.bs-eb-modal.is-open { display: block; }
.bs-eb-modal-backdrop { position: absolute; inset: 0; background: rgba(30,10,25,.5); }
.bs-eb-modal-box {
    position: relative; margin: 3vh auto 0; width: calc(100% - 40px); max-width: 1040px;
    height: 92vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.bs-eb-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #f3e0eb; background: linear-gradient(135deg,#fdf2f8,#fff7ed);
}
.bs-eb-modal-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #3A3D72; }
.bs-eb-modal-close {
    border: none !important; background: #fff !important; width: 30px; height: 30px; border-radius: 8px !important;
    font-size: 14px; color: #3A3D72 !important; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.bs-eb-modal-close:hover { background: #fce8f2 !important; }
.bs-eb-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; background: #fdfbfd; }
.bs-eb-modal-body .bs-eb { height: 100%; }
.bs-eb-modal-body .bs-eb-canvas { min-height: 100%; }
.bs-eb-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid #f3e0eb; }
@media (max-width: 700px) { .bs-eb-modal-box { width: 100%; height: 100%; margin: 0; border-radius: 0; } }

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL BUTTON DE-BULK v2 — icon/close/delete/align buttons everywhere.
   The theme forces buttons into round pink pills (border-radius:999px,
   min-width, big padding). These win regardless of where the button lives
   (portal or a body-appended modal).
   ══════════════════════════════════════════════════════════════════════ */

/* Compact square icon buttons (the ✕ / delete controls) */
.bs-eb-del, .bs-step-del,
.bs-eb-modal-close, .bs-wk-modal-close, .bs-modal-close, .bsa-modal-x {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 28px !important; height: 28px !important; min-width: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important;
    background: #fce8f2 !important; background-image: none !important; color: #e32d68 !important;
    border: none !important; border-radius: 8px !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.bs-eb-del:hover, .bs-step-del:hover,
.bs-eb-modal-close:hover, .bs-wk-modal-close:hover, .bs-modal-close:hover, .bsa-modal-x:hover {
    background: #fbd0e4 !important; color: #9d174d !important;
}
.bs-eb-modal-close, .bs-wk-modal-close, .bs-modal-close, .bsa-modal-x {
    background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}

/* Alignment L/C/R selector */
.bs-eb-align { display: inline-flex !important; gap: 4px !important; }
.bs-eb-align button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 34px !important; height: 32px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    background: #fff !important; background-image: none !important; color: #3A3D72 !important;
    border: 1px solid #e2c7d6 !important; border-radius: 7px !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.bs-eb-align button.is-on { background: #FE4980 !important; color: #fff !important; border-color: #FE4980 !important; }

/* Placeholder chips (belt-and-braces, wherever they render) */
.bs-eb-phchip {
    display: inline-block !important; width: auto !important; min-width: 0 !important;
    background: #fff !important; background-image: none !important; color: #3A3D72 !important;
    border: 1px dashed #e0b7cf !important; border-radius: 999px !important; box-shadow: none !important;
    padding: 3px 10px !important; margin: 0 !important; font-size: 11px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important;
}
.bs-eb-phchip:hover { background: #fce8f2 !important; border-style: solid !important; }

/* Secondary/text delete-style buttons should not be pink slabs either */
.bs-eb-del-btn, .bs-flow-del, .bs-del-session, .bs-del-ticket {
    background: #fff !important; background-image: none !important; color: #e32d68 !important;
    border: 1px solid #f0c9db !important; box-shadow: none !important; border-radius: 8px !important;
    padding: 6px 12px !important; font-size: 13px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; width: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — one consistent look for every plugin button in
   the portal and its modals, overriding the front-end theme's pink pills.
   Icon/close/align buttons keep their own square rules above (not .button).
   ══════════════════════════════════════════════════════════════════════ */

/* Secondary (default) buttons */
.bs-fe-admin .button:not(.button-primary),
.bs-eb-modal  .button:not(.button-primary),
.bs-wk-modal  .button:not(.button-primary) {
    background: #fff !important; background-image: none !important; color: #3A3D72 !important;
    border: 1px solid #e7cad9 !important; box-shadow: none !important; border-radius: 8px !important;
    padding: 6px 13px !important; height: auto !important; min-height: 0 !important; line-height: 1.5 !important;
    font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
    letter-spacing: 0 !important; width: auto !important; text-shadow: none !important;
}
.bs-fe-admin .button:not(.button-primary):hover,
.bs-eb-modal  .button:not(.button-primary):hover,
.bs-wk-modal  .button:not(.button-primary):hover { background: #fdf2f8 !important; border-color: #e0b7cf !important; }

/* Primary buttons */
.bs-fe-admin .button-primary,
.bs-eb-modal  .button-primary,
.bs-wk-modal  .button-primary {
    background-image: linear-gradient(135deg,#FE4980,#f59e0b) !important; background-color: #FE4980 !important;
    color: #fff !important; border: none !important; box-shadow: none !important; border-radius: 8px !important;
    padding: 8px 16px !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important;
    font-size: 13px !important; font-weight: 700 !important; text-transform: none !important;
    letter-spacing: 0 !important; width: auto !important; text-shadow: none !important;
}
.bs-fe-admin .button-primary:hover,
.bs-eb-modal  .button-primary:hover,
.bs-wk-modal  .button-primary:hover { filter: brightness(1.05) !important; }

/* Text-link buttons (View bookings / Remove / Close) stay plain links */
.bs-fe-admin .button-link {
    background: none !important; background-image: none !important; border: none !important;
    box-shadow: none !important; color: #e32d68 !important; padding: 0 !important;
    font-size: 12px !important; font-weight: 600 !important; text-decoration: underline !important;
    text-transform: none !important; letter-spacing: 0 !important; width: auto !important; height: auto !important;
}
.bs-fe-admin .button-link:hover { color: #9d174d !important; }
.bs-fe-admin .button-link[disabled] { color: #cbb3c2 !important; text-decoration: none !important; cursor: default; }

/* ── Staff front-end login ───────────────────────────────────────────── */
.bs-stafflogin-wrap {
    display: flex; justify-content: center; align-items: flex-start;
    padding: 40px 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bs-stafflogin-card {
    width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 28px 26px;
    box-shadow: 0 12px 40px rgba(180,60,110,.14); border: 1px solid #f3d9e6;
}
.bs-stafflogin-brand { font-size: 20px; font-weight: 800; color: #e32d68; margin-bottom: 6px; }
.bs-stafflogin-note { font-size: 14px; color: #6b7280; margin: 0 0 18px; line-height: 1.5; }
.bs-stafflogin-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.bs-stafflogin-field label { font-size: 12px; font-weight: 700; color: #3A3D72; }
.bs-stafflogin-field input {
    width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #e7cad9;
    border-radius: 10px; font-size: 15px; background: #fff;
}
.bs-stafflogin-field input:focus { outline: none; border-color: #FE4980; box-shadow: 0 0 0 3px rgba(236,72,153,.12); }
.bs-stafflogin-btn {
    width: 100%; padding: 12px 16px; border: none; border-radius: 11px; cursor: pointer;
    background: linear-gradient(135deg,#FE4980,#f59e0b); color: #fff; font-size: 15px; font-weight: 700;
    -webkit-appearance: none; appearance: none;
}
.bs-stafflogin-btn:hover { filter: brightness(1.05); }
.bs-stafflogin-btn:disabled { opacity: .7; cursor: default; }
.bs-stafflogin-msg { font-size: 13px; color: #dc2626; font-weight: 600; margin-bottom: 10px; min-height: 1em; }

/* ── Staff access-level badges ──────────────────────────────────────── */
.bs-lvl-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.bs-lvl-badge--mgr { background: #ede9fe; color: #6d28d9; }
.bs-lvl-badge--std { background: #f1f5f9; color: #475569; }

/* ── WRKFLW credit (portal sidebar) ─────────────────────────────────── */
.bs-credit { margin-top: 16px; padding: 12px 10px 4px; font-size: 12px; color: #b08aa0; text-align: center; }
.bs-credit .bs-credit-heart { color: #ef4444; }
.bs-credit a { color: #3A3D72 !important; font-weight: 700; text-decoration: none; }
.bs-credit a:hover { text-decoration: underline; }

/* ── Settings view inside the front-end portal ──────────────────────── */
.bs-fe-admin .form-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.bs-fe-admin .form-table th { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; width: 240px; font-size: 13px; font-weight: 700; color: #4b3340; }
.bs-fe-admin .form-table td { padding: 10px 0; }
.bs-fe-admin .form-table .description { color: #9ca3af; font-size: 12px; margin: 4px 0 0; }
.bs-fe-admin .regular-text { width: 100%; max-width: 420px; padding: 9px 11px; border: 1px solid #e2c7d6; border-radius: 8px; box-sizing: border-box; }
.bs-fe-admin .small-text { padding: 7px 9px; border: 1px solid #e2c7d6; border-radius: 8px; }
.bs-fe-admin .nav-tab-wrapper { border-bottom: 1px solid #f0d7e6; margin: 0 0 18px; display: flex; gap: 4px; flex-wrap: wrap; }
.bs-fe-admin .nav-tab {
    padding: 8px 16px !important; border: 1px solid #e7cad9 !important; border-bottom: none !important;
    border-radius: 9px 9px 0 0 !important; background: #fbeef5 !important; color: #3A3D72 !important;
    font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer;
}
.bs-fe-admin .nav-tab-active { background: #fff !important; color: #e32d68 !important; box-shadow: 0 -2px 0 #FE4980 inset !important; }
.bs-fe-admin .form-table h3 { color: #3A3D72; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — admin dashboard + front-end staff portal
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    /* Portal: sidebar becomes a horizontal scrolling tab strip on top */
    .bs-fe-admin { flex-direction: column; gap: 14px; }
    .bs-fe-side { position: static; width: 100%; border-radius: 14px; padding: 10px 10px 6px; }
    .bs-fe-brand { padding: 2px 8px 8px !important; }
    .bs-fe-nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .bs-fe-tab { flex: 0 0 auto !important; white-space: nowrap; }
    .bs-credit { display: none; }
}

@media (max-width: 782px) {
    .bs-admin, .bs-fe-main { max-width: 100%; }

    /* Grids collapse */
    .bs-kpi-grid   { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bs-charts-row { grid-template-columns: 1fr; }
    .bs-insights-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .bs-stat-row   { grid-template-columns: 1fr 1fr !important; }

    /* Headers / toolbars stack */
    .bs-dash-header, .bs-section-card-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .bs-analytics-filters, .bs-filters { flex-wrap: wrap; }
    .bs-analytics-filters select, .bs-analytics-filters input[type="date"] { flex: 1 1 auto; }

    /* All data tables scroll sideways instead of squashing */
    .bs-admin table, .bs-fe-admin table, .bs-slot-table {
        display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    }

    /* Modals fill the screen */
    .bs-modal { padding: 0; align-items: stretch; }
    .bs-modal-inner, .bs-modal-inner--wide {
        max-width: none; width: 100%; min-height: 100%; max-height: 100%; border-radius: 0;
    }

    /* Builder / flow / marketing panels already stack via their own queries */
    .bs-massadd-controls { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
    .bs-kpi-grid, .bs-insights-grid { grid-template-columns: 1fr !important; }
    .bs-stat-row { grid-template-columns: 1fr !important; }

    /* Calendar → compact tap grid: just the day number + a count badge.
       Chips/labels are hidden (too cramped); tap a day to manage it. */
    .bs-calendar-grid { gap: 3px; }
    .bs-cal-day, .bs-cal-day--empty { min-height: 46px !important; padding: 4px 2px !important; }
    .bs-cal-chip { display: none !important; }
    .bs-cal-add-hint { display: none !important; }
    .bs-cal-header { font-size: 9px !important; padding: 6px 1px !important; }
    .bs-cal-day-num { flex-direction: column; align-items: center; gap: 2px; margin-bottom: 0; font-size: 13px; }
    .bs-cal-count { font-size: 9px; padding: 0 5px; }
    .bs-cal-day--clickable { -webkit-tap-highlight-color: rgba(236,72,153,.2); }

    /* Settings form-table stacks label above field */
    .bs-fe-admin .form-table th, .bs-fe-admin .form-table td { display: block; width: auto; padding: 4px 0; }
    .bs-fe-admin .regular-text { max-width: none; }

    .bs-shortcode-card { flex-direction: column; align-items: flex-start; }
}

/* ── Calendar month nav: below on desktop, above the grid on mobile ──── */
.bs-cal-area { display: flex; flex-direction: column; }
@media (max-width: 560px) {
    .bs-cal-area .bs-cal-nav { order: -1; margin: 0 0 12px; }
}

/* ── Finances ───────────────────────────────────────────────────────── */
.bs-fin-navbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; flex-wrap: wrap; }
.bs-fin-month { font-size: 18px; font-weight: 800; color: #3A3D72; min-width: 180px; text-align: center; }
.bs-fin-today { margin-left: auto; }

.bs-fin-health { margin-bottom: 20px; }
.bs-fin-health-card { border-radius: 16px; padding: 18px 20px; border: 1px solid #eee; }
.bs-fin-health--ok    { background: linear-gradient(135deg,#ecfdf5,#f0fdf4); border-color: #a7f3d0; }
.bs-fin-health--watch { background: linear-gradient(135deg,#fffbeb,#fff7ed); border-color: #fde68a; }
.bs-fin-health--alert { background: linear-gradient(135deg,#fef2f2,#fff1f2); border-color: #fecaca; }
.bs-fin-health-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bs-fin-health-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px; background: #fff; color: #374151; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bs-fin-health-title { font-weight: 700; color: #1f2937; }
.bs-fin-health-body { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; }
@media (max-width: 700px) { .bs-fin-health-body { grid-template-columns: 1fr; } }
.bs-fin-proj-num { font-size: 30px; font-weight: 800; color: #3A3D72; display: block; line-height: 1; }
.bs-fin-proj-lbl { font-size: 12px; color: #6b7280; }
.bs-fin-flags { display: flex; flex-direction: column; gap: 6px; }
.bs-fin-flag { font-size: 13px; font-weight: 600; color: #92400e; background: rgba(255,255,255,.6); border-radius: 8px; padding: 8px 12px; }
.bs-fin-flag--ok { color: #065f46; }

.bs-fin-charts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 18px 0; }
@media (max-width: 1000px) { .bs-fin-charts { grid-template-columns: 1fr; } }

.bs-fin-trend { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.bs-fin-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.bs-fin-bar-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bs-fin-bar-gross { width: 100%; background: #f3c9de; border-radius: 5px 5px 0 0; position: relative; min-height: 2px; display: flex; align-items: flex-end; }
.bs-fin-bar.is-current .bs-fin-bar-gross { background: #FE4980; }
.bs-fin-bar-col { width: 100%; background: #3A3D72; border-radius: 5px 5px 0 0; opacity: .55; }
.bs-fin-bar-lbl { font-size: 10px; color: #9ca3af; }

.bs-fin-liab-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; }
.bs-fin-liab-row:last-of-type { border-bottom: none; }
.bs-fin-liab-row b { color: #3A3D72; }

/* ── Customer profile modal ─────────────────────────────────────────── */
.bs-prof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bs-prof-name { font-size: 18px; font-weight: 800; color: #3A3D72; }
.bs-prof-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 8px; }
@media (max-width: 700px) { .bs-prof-stats { grid-template-columns: repeat(3, 1fr); } }
.bs-prof-stat { background: #fdf7fb; border: 1px solid #f0e0ea; border-radius: 12px; padding: 12px; text-align: center; font-size: 11px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.bs-prof-stat span { display: block; font-size: 22px; font-weight: 800; color: #3A3D72; text-transform: none; letter-spacing: 0; }
.bs-prof-h3 { font-size: 13px; font-weight: 700; color: #3A3D72; margin: 16px 0 8px; }

/* Loyalty card — mirrors the redesigned customer "My account" card */
.bs-prof-loyalty { --bsa-primary: #FE4980; }
.bs-prof-loyalty .bs-prof-h3 { margin-top: 0; }
.bs-prof-loyalty .bsa-loyalty { max-width: 440px; margin: 0; }
.bs-prof-loyalty .bsa-loy-hero {
    background: linear-gradient(135deg, var(--bsa-primary), #ff7d5e);
    color: #fff; border-radius: 18px; padding: 20px; text-align: center;
    box-shadow: 0 10px 24px -12px rgba(124,58,237,.55);
}
.bs-prof-loyalty .bsa-loy-hero-ico { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.bs-prof-loyalty .bsa-loy-hero-num { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.bs-prof-loyalty .bsa-loy-hero-lbl { font-size: 12px; opacity: .92; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
.bs-prof-loyalty .bsa-loy-claim { margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center; line-height: 1.4; }
.bs-prof-loyalty .bsa-loy-cardbox { background: #fff; border: 1px solid #f0e0ea; border-radius: 16px; padding: 14px 16px 18px; margin-top: 14px; }
.bs-prof-loyalty .bsa-loy-cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bs-prof-loyalty .bsa-loy-cardhead > span:first-child { font-weight: 700; color: #3a2230; font-size: 14px; }
.bs-prof-loyalty .bsa-loy-count { font-size: 12px; font-weight: 700; color: var(--bsa-primary); background: #fdeef6; padding: 3px 10px; border-radius: 999px; }
.bs-prof-loyalty .bsa-punchcard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bs-prof-loyalty .bsa-stamp {
    aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px dashed #e7cede; color: #c79ab3; font-weight: 700; font-size: 15px; background: #fdf7fb;
}
.bs-prof-loyalty .bsa-stamp.is-filled { background: linear-gradient(135deg, var(--bsa-primary), #ff7d5e); color: #fff; border-style: solid; border-color: transparent; box-shadow: 0 4px 10px -4px rgba(124,58,237,.5); }
.bs-prof-loyalty .bsa-stamp.is-drink:not(.is-filled) { border-color: #f59e0b; color: #b45309; background: #fff7ed; }
.bs-prof-loyalty .bsa-stamp.is-free:not(.is-filled)  { border-color: #FE4980; color: #e32d68; background: #fdf2f8; }
.bs-prof-loyalty .bsa-loy-rewards { margin-top: 16px; display: grid; gap: 12px; }
.bs-prof-loyalty .bsa-loy-reward-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #4b5563; margin-bottom: 6px; }
.bs-prof-loyalty .bsa-loy-reward-top span { font-weight: 600; }
.bs-prof-loyalty .bsa-loy-reward-top strong { color: var(--bsa-primary); font-size: 12.5px; }
.bs-prof-loyalty .bsa-progress-bar { height: 9px; background: #f1e5ee; border-radius: 999px; overflow: hidden; }
.bs-prof-loyalty .bsa-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--bsa-primary), #f59e0b); border-radius: 999px; transition: width .5s ease; }

/* Gift card user picker */
.bs-gc-picker { position: relative; }
.bs-gc-results { position: absolute; z-index: 5; left: 0; right: 0; background: #fff; border: 1px solid #e2c7d6; border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.bs-gc-result { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.bs-gc-result:hover { background: #fdf2f8; }
.bs-gc-result small { color: #9ca3af; }

/* Calendar month overview modal */
.bs-ov-group { margin-bottom: 20px; }
.bs-ov-group-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; border-bottom: 2px solid #f1dae6; padding-bottom: 6px; }
.bs-ov-group-head h3 { margin: 0; font-size: 15px; }
.bs-ov-group-head span { font-size: 13px; font-weight: 700; color: #e32d68; }
.bs-ov-empty { color: #9ca3af; font-size: 13px; margin: 4px 0 0; }
.bs-ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bs-ov-table td { padding: 7px 6px; border-bottom: 1px solid #f4e8ef; }
.bs-ov-table tr:last-child td { border-bottom: none; }

/* Bookings month navigator */
.bs-month-nav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-month-label { font-weight: 700; color: #e32d68; min-width: 130px; text-align: center; }