/* ==========================================================================
   Booksolut Booking — Frontend widgets
   ========================================================================== */

.booksolut-widget {
    --booksolut-primary: #2563eb;
    --booksolut-primary-dark: color-mix(in srgb, var(--booksolut-primary) 80%, #000);
    --booksolut-secondary: #0f172a;
    --booksolut-bg: #ffffff;
    --booksolut-surface: #f8fafc;
    --booksolut-border: #e2e8f0;
    --booksolut-muted: #64748b;
    --booksolut-text: #0f172a;
    --booksolut-success: #047857;
    --booksolut-warning: #b45309;
    --booksolut-danger: #b91c1c;

    box-sizing: border-box;
    max-width: 960px;
    margin: 24px auto;
    padding: 28px;
    background: var(--booksolut-bg-surface, var(--booksolut-bg));
    color: var(--booksolut-text-main, var(--booksolut-text));
    border: 1px solid var(--booksolut-border);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    font-family: var(--booksolut-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    line-height: 1.5;
}

.booksolut-widget *,
.booksolut-widget *::before,
.booksolut-widget *::after { box-sizing: inherit; }

.booksolut-widget h3 { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--booksolut-secondary); }
.booksolut-widget h4 { margin: 24px 0 12px; font-size: 16px; font-weight: 700; color: var(--booksolut-secondary); }
.booksolut-widget__lead { margin: 0 0 18px; color: var(--booksolut-muted); }

.booksolut-widget--empty { text-align: center; color: var(--booksolut-muted); padding: 24px; background: var(--booksolut-surface); border-style: dashed; }

/* ---------- Stepper ---------- */
.booksolut-stepper {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
    counter-reset: booksolut-step;
}
.booksolut-stepper li {
    flex: 1 1 140px;
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--booksolut-surface);
    border-radius: 999px;
    color: var(--booksolut-muted);
    font-weight: 600;
    font-size: 13px;
}
.booksolut-stepper li span {
    width: 24px; height: 24px; flex: none;
    background: #fff;
    color: var(--booksolut-muted);
    border: 1px solid var(--booksolut-border);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.booksolut-stepper li.is-active {
    background: color-mix(in srgb, var(--booksolut-primary) 12%, white);
    color: var(--booksolut-primary);
}
.booksolut-stepper li.is-active span {
    background: var(--booksolut-primary);
    color: #fff;
    border-color: var(--booksolut-primary);
}
.booksolut-stepper li.is-done span { background: var(--booksolut-success); color: #fff; border-color: var(--booksolut-success); }

/* ---------- Status messages ---------- */
.booksolut-widget__status {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--booksolut-surface);
    color: var(--booksolut-muted);
    font-size: 14px;
    min-height: 0;
}
.booksolut-widget__status:empty { display: none; }
.booksolut-widget__status[data-type="success"] { background: #ecfdf5; color: var(--booksolut-success); }
.booksolut-widget__status[data-type="warning"] { background: #fffbeb; color: var(--booksolut-warning); }
.booksolut-widget__status[data-type="error"]   { background: #fef2f2; color: var(--booksolut-danger); }

/* ---------- Grids ---------- */
.booksolut-grid { display: grid; gap: 14px; }
.booksolut-grid--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booksolut-grid--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.booksolut-grid--services { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.booksolut-grid--staff    { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.booksolut-grid--services[data-cols="2"] { --cols: 2; }
.booksolut-grid--services[data-cols="3"] { --cols: 3; }
.booksolut-grid--services[data-cols="4"] { --cols: 4; }
.booksolut-grid--services[data-cols="1"] { --cols: 1; }
.booksolut-grid--staff[data-cols="2"] { --cols: 2; }
.booksolut-grid--staff[data-cols="3"] { --cols: 3; }
.booksolut-grid--staff[data-cols="4"] { --cols: 4; }
.booksolut-grid--staff[data-cols="1"] { --cols: 1; }

/* ---------- Fields ---------- */
.booksolut-field { display: grid; gap: 6px; margin-bottom: 14px; }
.booksolut-field label { font-weight: 600; font-size: 14px; color: var(--booksolut-secondary); }
.booksolut-widget input[type="text"],
.booksolut-widget input[type="email"],
.booksolut-widget input[type="tel"],
.booksolut-widget input[type="number"],
.booksolut-widget input[type="date"],
.booksolut-widget input[type="time"],
.booksolut-widget select,
.booksolut-widget textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--booksolut-border);
    border-radius: 12px;
    color: var(--booksolut-text);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.booksolut-widget input:focus,
.booksolut-widget select:focus,
.booksolut-widget textarea:focus {
    border-color: var(--booksolut-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--booksolut-primary) 18%, transparent);
    outline: none;
}

/* ---------- Buttons ---------- */
.booksolut-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--booksolut-surface);
    color: var(--booksolut-secondary);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.booksolut-btn:hover { transform: translateY(-1px); }
.booksolut-btn:focus-visible { outline: 2px solid var(--booksolut-primary); outline-offset: 2px; }
.booksolut-btn--primary { background: var(--booksolut-primary); color: #fff; }
.booksolut-btn--primary:hover { background: var(--booksolut-primary-dark, var(--booksolut-primary)); }
.booksolut-btn--ghost   { background: transparent; border-color: var(--booksolut-border); color: var(--booksolut-muted); }
.booksolut-btn--danger  { background: #fef2f2; color: var(--booksolut-danger); border-color: #fecaca; }
.booksolut-btn--danger:hover { background: var(--booksolut-danger); color: #fff; }

.booksolut-step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}
.booksolut-step__actions .booksolut-btn--ghost { margin-right: auto; }

/* ---------- Slots ---------- */
.booksolut-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}
.booksolut-slot {
    min-width: 90px;
    text-align: center;
    padding: 10px 14px;
    border: 1px solid var(--booksolut-border);
    border-radius: 999px;
    background: #fff;
    color: var(--booksolut-secondary);
    font-weight: 600;
    cursor: pointer;
}
.booksolut-slot:hover     { border-color: var(--booksolut-primary); color: var(--booksolut-primary); }
.booksolut-slot.is-selected { background: var(--booksolut-primary); color: #fff; border-color: var(--booksolut-primary); }
.booksolut-slot[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Cards (service / staff inside widget) ---------- */
.booksolut-card-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--booksolut-border);
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.booksolut-card-tile:hover { border-color: var(--booksolut-primary); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07); }
.booksolut-card-tile.is-selected { border-color: var(--booksolut-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--booksolut-primary) 20%, transparent); }
.booksolut-card-tile__title { font-weight: 700; color: var(--booksolut-secondary); font-size: 15px; }
.booksolut-card-tile__meta  { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; color: var(--booksolut-muted); font-size: 13px; }
.booksolut-card-tile__meta span { display: inline-flex; align-items: center; gap: 4px; }
.booksolut-card-tile__price { font-weight: 700; color: var(--booksolut-primary); margin-top: 6px; }

/* ---------- Booking summary (manage) ---------- */
.booksolut-booking-summary {
    margin: 16px 0;
    padding: 16px 18px;
    background: var(--booksolut-surface);
    border-radius: 14px;
}
.booksolut-booking-summary h4 { margin: 0 0 6px; }
.booksolut-booking-summary dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14px; }
.booksolut-booking-summary dt { color: var(--booksolut-muted); font-weight: 600; }
.booksolut-booking-summary dd { margin: 0; color: var(--booksolut-text); }

/* ---------- Success ---------- */
.booksolut-success {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--booksolut-primary) 8%, white), #fff);
    border: 1px solid var(--booksolut-border);
    border-radius: 16px;
}
.booksolut-success__icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--booksolut-success);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700;
}
.booksolut-success__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--booksolut-secondary); }
.booksolut-success__detail { color: var(--booksolut-muted); }
.booksolut-success__code {
    display: inline-block;
    margin: 10px 0;
    padding: 6px 12px;
    background: #fff;
    border: 1px dashed var(--booksolut-border);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

/* ---------- Service catalog (shortcode) ---------- */
.booksolut-service-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--booksolut-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .15s ease;
}
.booksolut-service-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); }
.booksolut-service-card__media {
    aspect-ratio: 4 / 3;
    background: var(--booksolut-surface) center/cover no-repeat;
}
.booksolut-service-card__media--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--booksolut-muted);
}
.booksolut-service-card__media--placeholder .dashicons { font-size: 42px; width: 42px; height: 42px; }
.booksolut-service-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.booksolut-service-card__body h3 { margin: 0; font-size: 17px; color: var(--booksolut-secondary); }
.booksolut-service-card__body p  { margin: 0; color: var(--booksolut-muted); font-size: 14px; }
.booksolut-service-card__meta { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--booksolut-muted); font-size: 13px; }
.booksolut-service-card__meta li { display: inline-flex; align-items: center; gap: 4px; }
.booksolut-service-card .booksolut-btn { margin-top: auto; }

/* ---------- Staff ---------- */
.booksolut-staff-card {
    background: #fff;
    border: 1px solid var(--booksolut-border);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
}
.booksolut-staff-card__avatar {
    width: 84px; height: 84px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--booksolut-surface) center/cover no-repeat;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--booksolut-muted);
    font-weight: 700;
}
.booksolut-staff-card__avatar--initials {
    background: color-mix(in srgb, var(--booksolut-primary) 12%, white);
    color: var(--booksolut-primary);
    font-size: 24px;
}
.booksolut-staff-card h4 { margin: 0 0 4px; }
.booksolut-staff-card__role { color: var(--booksolut-primary); font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.booksolut-staff-card__bio  { color: var(--booksolut-muted); margin: 0; font-size: 14px; }

/* ---------- Business card ---------- */
.booksolut-business-card {
    padding: 0;
    overflow: hidden;
    max-width: 420px;
}
.booksolut-business-card__cover {
    height: 140px;
    background: var(--booksolut-surface) center/cover no-repeat;
}
.booksolut-business-card__inner { padding: 20px 24px 24px; }
.booksolut-business-card__logo  { margin-top: -52px; margin-bottom: 12px; }
.booksolut-business-card__logo img {
    width: 80px; height: 80px;
    border-radius: 18px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    border: 4px solid #fff;
}
.booksolut-business-card h3 { margin: 0 0 4px; }
.booksolut-business-card__type { color: var(--booksolut-muted); margin: 0 0 14px; font-size: 14px; }
.booksolut-business-card__contact { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.booksolut-business-card__contact li { display: flex; align-items: center; gap: 8px; color: var(--booksolut-secondary); font-size: 14px; }
.booksolut-business-card__social { display: flex; gap: 10px; margin-bottom: 16px; }
.booksolut-business-card__social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--booksolut-surface);
    color: var(--booksolut-primary);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.booksolut-business-card__cta { width: 100%; }

/* ---------- Modal launcher ---------- */
.booksolut-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.booksolut-modal[hidden] { display: none !important; }
.booksolut-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}
.booksolut-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}
.booksolut-modal__dialog .booksolut-widget { margin: 0; box-shadow: none; border: none; }
.booksolut-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border: none;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--booksolut-secondary);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .booksolut-widget { padding: 20px; border-radius: 18px; }
    .booksolut-grid--two { grid-template-columns: 1fr; }
    .booksolut-grid--services,
    .booksolut-grid--staff   { grid-template-columns: 1fr; }
    .booksolut-stepper li { flex: 1 1 100px; font-size: 12px; padding: 8px 10px; }
}

/* ---------- My panel (logged-in WP user) ---------- */
.booksolut-mypanel{
    padding:28px;
    background:linear-gradient(160deg, color-mix(in srgb, var(--booksolut-primary) 8%, white), #fff);
}
.booksolut-mypanel h3{
    margin:0 0 8px;
    font-size:22px;
}
.booksolut-mypanel p{
    margin:0 0 16px;
    color:var(--booksolut-muted);
}
.booksolut-mypanel__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
}
.booksolut-mypanel__hint{
    font-size:13px;
    color:var(--booksolut-muted);
}

/* ---------- Prefill banner inside booking widget ---------- */
.booksolut-prefill{
    background:color-mix(in srgb, var(--booksolut-primary) 8%, white);
    border:1px solid color-mix(in srgb, var(--booksolut-primary) 22%, white);
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
}
.booksolut-prefill__email{
    color:var(--booksolut-muted);
    font-size:13px;
}
.booksolut-prefill__link{
    color:var(--booksolut-primary);
    font-weight:600;
    text-decoration:none;
    font-size:13px;
}
.booksolut-prefill__link:hover{
    text-decoration:underline;
}

/* ---------- Hero shortcode ---------- */
.booksolut-hero{
    --booksolut-primary: #2563eb;
    --booksolut-secondary: #0f172a;

    position:relative;
    overflow:hidden;
    border-radius:0;
    margin:0 0 32px;
    padding:0;
    color:#fff;
    min-height:340px;
    display:flex;
    align-items:flex-end;
}
.booksolut-hero__cover{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--booksolut-primary), var(--booksolut-secondary)) center/cover no-repeat;
}
.booksolut-hero__cover--placeholder{
    background:linear-gradient(135deg, var(--booksolut-primary), var(--booksolut-secondary));
}
.booksolut-hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.65) 100%);
}
.booksolut-hero__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:48px 24px;
    text-align:left;
}
.booksolut-hero__logo{
    margin-bottom:16px;
}
.booksolut-hero__logo img{
    width:74px;
    height:74px;
    border-radius:18px;
    object-fit:cover;
    background:#fff;
    box-shadow:0 12px 30px rgba(15,23,42,0.25);
    border:4px solid #fff;
}
.booksolut-hero__title{
    margin:0 0 8px;
    font-size:clamp(28px, 4vw, 44px);
    font-weight:800;
    color:#fff;
    line-height:1.05;
}
.booksolut-hero__subtitle{
    margin:0 0 22px;
    font-size:18px;
    color:rgba(255,255,255,0.92);
    text-transform:capitalize;
}
.booksolut-hero__cta.booksolut-btn{
    background:#fff;
    color:var(--booksolut-secondary);
    font-weight:700;
    padding:14px 28px;
    box-shadow:0 12px 30px rgba(15,23,42,0.25);
}
.booksolut-hero__cta.booksolut-btn:hover{
    transform:translateY(-2px);
    background:#fff;
}

/* When the hero is dropped inside the auto-managed Booksolut pages,
   stretch the cover to the full content area instead of being clipped
   by the theme's default content-size. */
.booksolut-tenant-page .booksolut-hero{
    margin-left:0;
    margin-right:0;
    border-radius:0;
}


/* ============================================================
   My panel — full client area inside WordPress
   ============================================================ */
.booksolut-mypanel{
    --booksolut-primary:#2563eb;
    --booksolut-secondary:#0f172a;
    max-width:980px;
    margin:24px auto;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
}
.booksolut-mypanel__hero{
    text-align:center;
    background:linear-gradient(135deg, var(--booksolut-primary), var(--booksolut-secondary));
    color:#fff;
    border-radius:22px;
    padding:36px 28px;
    margin-bottom:28px;
    box-shadow:0 12px 40px rgba(15,23,42,0.15);
}
.booksolut-mypanel__hero-icon{
    font-size:42px;
    margin-bottom:10px;
    opacity:0.9;
}
.booksolut-mypanel__title{
    margin:0 0 6px;
    font-size:26px;
    font-weight:800;
    color:inherit;
}
.booksolut-mypanel__lead{
    margin:0 0 18px;
    color:rgba(255,255,255,0.92);
    font-size:15px;
}
.booksolut-mypanel__hero .booksolut-mypanel__lead{color:rgba(255,255,255,0.92);}
.booksolut-mypanel__greet .booksolut-mypanel__lead{color:#475569;}
.booksolut-mypanel__greet{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:22px 26px;
    margin-bottom:22px;
    box-shadow:0 6px 24px rgba(15,23,42,0.04);
}
.booksolut-mypanel__greet-text{flex:1;min-width:240px;}
.booksolut-mypanel__greet .booksolut-mypanel__title{
    color:#0f172a;
    font-size:22px;
    margin-bottom:4px;
}
.booksolut-mypanel__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}
.booksolut-mypanel__hero .booksolut-btn--primary{
    background:#fff;
    color:var(--booksolut-secondary);
}
.booksolut-mypanel__hero .booksolut-btn--ghost{
    border-color:rgba(255,255,255,0.5);
    color:#fff;
    background:transparent;
}
.booksolut-mypanel__hero .booksolut-btn--ghost:hover{background:rgba(255,255,255,0.12);}
.booksolut-mypanel__bookings{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:22px 26px;
    box-shadow:0 6px 24px rgba(15,23,42,0.04);
}
.booksolut-mypanel__loading,
.booksolut-mypanel__error{
    text-align:center;
    padding:40px 20px;
    color:#64748b;
}
.booksolut-mypanel__error{color:#b91c1c;}
.booksolut-mypanel__empty{
    text-align:center;
    padding:48px 20px;
    color:#64748b;
}
.booksolut-mypanel__empty i{font-size:42px;opacity:0.25;display:block;margin-bottom:10px;}
.booksolut-mypanel__empty h3{margin:0 0 6px;color:#0f172a;}
.booksolut-mypanel__section{margin-bottom:24px;}
.booksolut-mypanel__section:last-child{margin-bottom:0;}
.booksolut-mypanel__section-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}
.booksolut-mypanel__section-title i{color:var(--booksolut-primary);}
.booksolut-mypanel__count{
    background:rgba(0,0,0,0.06);
    color:#64748b;
    font-size:12px;
    font-weight:600;
    padding:2px 10px;
    border-radius:999px;
    margin-left:auto;
}
.booksolut-mypanel__list{
    display:grid;
    gap:12px;
}
.booksolut-mypanel__card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#fafbff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:14px 18px;
    transition:transform .12s ease, box-shadow .15s ease;
}
.booksolut-mypanel__card:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(15,23,42,0.07);}
.booksolut-mypanel__card.is-past{opacity:0.7;background:#f8fafc;}
.booksolut-mypanel__card-date{
    flex:none;
    width:64px;
    text-align:center;
    background:linear-gradient(135deg, color-mix(in srgb, var(--booksolut-primary) 12%, white), #fff);
    border:1px solid color-mix(in srgb, var(--booksolut-primary) 22%, white);
    border-radius:12px;
    padding:10px 4px;
}
.booksolut-mypanel__card-day{
    display:block;
    font-size:24px;
    font-weight:800;
    color:var(--booksolut-primary);
    line-height:1;
}
.booksolut-mypanel__card-mon{
    display:block;
    font-size:11px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:2px;
}
.booksolut-mypanel__card-body{flex:1;min-width:0;}
.booksolut-mypanel__card-body h4{margin:0 0 4px;font-size:15px;color:#0f172a;font-weight:700;}
.booksolut-mypanel__card-meta{
    margin:0 0 6px;
    color:#64748b;
    font-size:13px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.booksolut-mypanel__card-meta i{margin-right:4px;}
.booksolut-mypanel__status{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    padding:2px 10px;
    border-radius:999px;
    background:rgba(0,0,0,0.05);
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.04em;
}
.booksolut-mypanel__status.is-confirmed{background:#dcfce7;color:#15803d;}
.booksolut-mypanel__status.is-pending-approval{background:#fef3c7;color:#92400e;}
.booksolut-mypanel__status.is-pending-payment{background:#fef3c7;color:#92400e;}
.booksolut-mypanel__status.is-canceled{background:#fee2e2;color:#991b1b;}
.booksolut-mypanel__status.is-completed{background:#e0e7ff;color:#3730a3;}
.booksolut-mypanel__card-actions{flex:none;}
.booksolut-btn--sm{padding:6px 12px;font-size:13px;}
.booksolut-mypanel__divider{
    text-align:center;
    margin:28px 0 18px;
    position:relative;
    color:#94a3b8;
    font-size:13px;
}
.booksolut-mypanel__divider::before{
    content:"";
    position:absolute;
    inset:50% 0 auto 0;
    height:1px;
    background:#e2e8f0;
    z-index:0;
}
.booksolut-mypanel__divider span{
    background:#fff;
    padding:0 14px;
    position:relative;
    z-index:1;
}
.booksolut-mypanel__manage-toggle{
    margin-top:24px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:14px 22px;
}
.booksolut-mypanel__manage-toggle summary{
    cursor:pointer;
    font-weight:600;
    color:#0f172a;
    list-style:none;
    user-select:none;
}
.booksolut-mypanel__manage-toggle summary::after{
    content:"+";
    float:right;
    font-size:20px;
    color:#94a3b8;
}
.booksolut-mypanel__manage-toggle[open] summary::after{content:"−";}
.booksolut-mypanel__manage-toggle .booksolut-widget--manage{
    margin:14px -10px -4px;
    padding:18px;
    border:none;
    box-shadow:none;
    background:#f8fafc;
}
html[data-theme="dark"] .booksolut-mypanel__manage-toggle{
    background:var(--bg-card, #141414);
    border-color:var(--border-card-dark, rgba(255,255,255,0.16));
    color:var(--text-primary, #f3f3f3);
}
html[data-theme="dark"] .booksolut-mypanel__manage-toggle summary{
    color:var(--text-primary, #f3f3f3);
}
html[data-theme="dark"] .booksolut-mypanel__manage-toggle summary::after{
    color:var(--text-secondary, rgba(243,243,243,0.72));
}
html[data-theme="dark"] .booksolut-widget--manage{
    background:var(--bg-card, #141414);
    color:var(--text-primary, #f3f3f3);
    border-color:var(--border-card-dark, rgba(255,255,255,0.16));
}
html[data-theme="dark"] .booksolut-mypanel__manage-toggle .booksolut-widget--manage{
    background:transparent;
    border:none;
    box-shadow:none;
}
html[data-theme="dark"] .booksolut-widget--manage h3,
html[data-theme="dark"] .booksolut-widget--manage h4,
html[data-theme="dark"] .booksolut-widget--manage .booksolut-field label{
    color:var(--text-primary, #f3f3f3);
}
html[data-theme="dark"] .booksolut-widget--manage p,
html[data-theme="dark"] .booksolut-widget--manage .booksolut-widget__lead{
    color:var(--text-secondary, rgba(243,243,243,0.78));
}
html[data-theme="dark"] .booksolut-widget--manage input,
html[data-theme="dark"] .booksolut-widget--manage textarea{
    background:var(--bg-input, #0a0a0a);
    color:var(--text-primary, #f3f3f3);
    border-color:var(--border-card-dark, rgba(255,255,255,0.22));
}
html[data-theme="dark"] .booksolut-widget--manage .booksolut-btn--primary{
    background:var(--booksolut-primary, #f3f3f3);
    color:#fff;
    border:1px solid rgba(255,255,255,0.45);
}

/* Make the inline buttons inside the hero work without the dark scheme. */
.booksolut-mypanel__hero .booksolut-btn{box-shadow:0 4px 14px rgba(15,23,42,0.18);}
@media(max-width:640px){
    .booksolut-mypanel__greet{flex-direction:column;align-items:stretch;}
    .booksolut-mypanel__card{flex-direction:column;align-items:flex-start;}
    .booksolut-mypanel__card-actions{align-self:stretch;}
    .booksolut-mypanel__card-actions .booksolut-btn{width:100%;justify-content:center;}
}


/* ============================================================
   Services hero + grid (1:1 with the booksolut.com tenant page)
   Replicates the .sv-* classes from the public tenant frontend.
   ============================================================ */
.booksolut-shortcode-host--services,
.booksolut-services-catalog,
.booksolut-tenant-page .booksolut-services-page,
.booksolut-services-page,
.booksolut-tenant-page .sv-hero{
    --sv-accent: var(--booksolut-primary, var(--primary, #2563eb));
    --sv-secondary: var(--booksolut-secondary, var(--secondary, #37acfb));
    --sv-accent-soft: color-mix(in srgb, var(--sv-accent) 16%, transparent);
    --sv-accent-glow: color-mix(in srgb, var(--sv-accent) 20%, transparent);
    --sv-page-bg: var(--bg-body, var(--booksolut-bg-body, #ffffff));
    --sv-card-bg: #ffffff;
    --sv-card-text: #0f172a;
    --sv-text-muted: #64748b;
    --sv-border: #e2e8f0;
}

.booksolut-services-page{margin:0 auto;}
.sv-main{
    position:relative;
    z-index:3;
    padding:0 0 3rem;
    margin-top:-3rem;
    min-height:40vh;
    width:100%;
    background:var(--sv-page-bg);
}
.sv-main > .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

/* ----- Hero with morphing blobs ----- */
.sv-hero{
    position:relative;
    z-index:2;
    background:linear-gradient(160deg, var(--primary, var(--sv-accent, #2563eb)) 0%, var(--secondary, var(--sv-secondary, #37acfb)) 100%);
    padding:5rem 0 7rem;
    overflow:clip;
    color:#fff;
}
.sv-hero-morph{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.sv-morph-blob{
    position:absolute;
    border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
    filter:blur(40px);
    opacity:0.35;
    animation:bsMorphBlob 12s ease-in-out infinite;
}
.sv-morph-blob--1{
    width:50%;
    height:120%;
    background:rgba(255,255,255,0.3);
    top:-30%;
    left:-10%;
}
.sv-morph-blob--2{
    width:40%;
    height:100%;
    background:rgba(255,255,255,0.2);
    bottom:-20%;
    right:-5%;
    animation-delay:6s;
    animation-direction:reverse;
}
@keyframes bsMorphBlob{
    0%,100%{border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;}
    25%   {border-radius:70% 30% 50% 50% / 30% 70% 30% 70%;}
    50%   {border-radius:30% 60% 70% 40% / 50% 60% 30% 60%;}
    75%   {border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;}
}
.sv-hero-noise{
    position:absolute;
    inset:0;
    opacity:0.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
    pointer-events:none;
    mix-blend-mode:overlay;
}
.sv-hero-inner{
    position:relative;
    z-index:2;
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
    text-align:center;
}
.sv-hero-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    margin-bottom:14px;
    backdrop-filter:blur(8px);
}
.sv-chip-pulse{
    position:relative;
    width:8px;
    height:8px;
    background:#22c55e;
    border-radius:50%;
}
.sv-chip-pulse::after{
    content:"";
    position:absolute;
    inset:-4px;
    border:2px solid #22c55e;
    border-radius:50%;
    opacity:0.5;
    animation:bsPulse 1.5s ease-out infinite;
}
@keyframes bsPulse{
    0%{transform:scale(0.8);opacity:0.6;}
    100%{transform:scale(1.6);opacity:0;}
}
.sv-hero-title{
    margin:0 0 12px;
    font-size:clamp(32px, 5vw, 52px);
    font-weight:800;
    line-height:1.1;
    color:#fff;
}
.sv-hero-lead{
    margin:0 0 16px;
    font-size:clamp(16px, 1.6vw, 19px);
    color:rgba(255,255,255,0.92);
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}
.sv-hero-brand{
    margin-top:8px;
    font-weight:700;
    font-size:15px;
    color:rgba(255,255,255,0.95);
    letter-spacing:0.04em;
    text-transform:uppercase;
}
.sv-hero-divider{
    position:absolute;
    bottom:-2px;
    left:-1px;
    right:-1px;
    width:calc(100% + 2px);
    height:80px;
    fill:var(--sv-page-bg, var(--bg-body, #ffffff));
    z-index:2;
    color:var(--sv-page-bg, var(--bg-body, #ffffff));
}
.sv-hero-divider path{
    fill:var(--sv-page-bg, var(--bg-body, #ffffff));
}

/* ----- Services grid + cards ----- */
.sv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:1.75rem;
    max-width:none;
    margin:0 auto;
    padding:0;
}
.sv-card-hit{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
}
.sv-card-hit > .sv-card{
    flex:1 1 auto;
    height:100%;
}
.sv-card{
    background:var(--sv-card-bg);
    color:var(--sv-card-text);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 4px 24px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    display:flex;
    flex-direction:column;
    position:relative;
    animation:bsCardIn 0.5s ease-out both;
    animation-delay:var(--delay, 0s);
}
@keyframes bsCardIn{
    from{opacity:0;transform:translateY(16px);}
    to{opacity:1;transform:translateY(0);}
}
.sv-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(15,23,42,0.1), 0 0 0 1px rgba(15,23,42,0.06);
}
.sv-card-top{
    display:flex;
    justify-content:center;
    padding:28px 24px 14px;
}
.sv-card-icon-wrap{
    position:relative;
    width:64px;
    height:64px;
}
.sv-card-icon-bg{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
    border-radius:18px;
    transform:rotate(8deg);
    opacity:0.2;
}
.sv-card-icon{
    position:relative;
    width:100%;
    height:100%;
    background:linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
    border-radius:18px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 6px 20px -6px var(--sv-accent);
}
.sv-card-content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:1.25rem 1.5rem;
    text-align:center;
}
.sv-card-title{
    margin:0 0 8px;
    font-size:18px;
    font-weight:700;
    color:var(--sv-card-text);
    line-height:1.25;
}
.sv-card-desc{
    margin:0 0 16px;
    color:var(--sv-text-muted);
    font-size:14px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.sv-metrics{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    margin:0.5rem 0 1.25rem;
    padding:0.625rem 0.75rem;
    background:rgba(0,0,0,0.02);
    border-radius:0.75rem;
    border:1px solid rgba(0,0,0,0.06);
}
.sv-policies{
    background:var(--sv-accent-soft, rgba(37,99,235,0.1));
    border:1px solid var(--sv-accent-glow, rgba(37,99,235,0.2));
    border-radius:0.875rem;
    padding:0.75rem;
    margin-top:0.5rem;
    text-align:left;
}
.sv-policies-title{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.6875rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--sv-accent, var(--primary, #2563eb));
    margin-bottom:0.5rem;
}
.sv-policies-grid{display:grid;gap:0.375rem;}
.sv-policy-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.4rem 0.5rem;
    background:#fff;
    border-radius:0.5rem;
}
.sv-policy-item i{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4f4f5;
    border-radius:0.375rem;
    color:#6b7280;
    font-size:0.75rem;
    flex-shrink:0;
}
.sv-policy-text{display:flex;flex-direction:column;gap:0.125rem;min-width:0;}
.sv-policy-text strong{font-size:0.8125rem;font-weight:600;color:#111827;}
.sv-policy-text span{font-size:0.75rem;color:#6b7280;}
.sv-card-action{padding:0 1.5rem 1.5rem;margin-top:auto;}
.sv-metric{
    display:flex;
    align-items:center;
    gap:6px;
}
.sv-metric-icon{
    color:var(--sv-accent);
    font-size:14px;
}
.sv-metric-data{
    display:flex;
    align-items:baseline;
    gap:3px;
}
.sv-metric-value{
    font-weight:700;
    color:var(--sv-card-text);
    font-size:15px;
}
.sv-metric-unit{
    font-size:0.75rem;
    color:var(--sv-text-muted, #6b7280);
    font-weight:500;
}
.sv-metric--divider{
    width:1px;
    height:18px;
    background:var(--sv-border);
}
.sv-metric--price{
    color:var(--sv-accent);
    font-weight:700;
    font-size:15px;
}
.sv-metric--price .sv-metric-currency{
    font-size:13px;
    margin-right:2px;
    opacity:0.85;
}
.sv-book-btn{
    position:relative;
    margin:0 auto;
    margin-top:auto;
    width:100%;
    background:linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
    color:#fff;
    border:none;
    border-radius:14px;
    padding:13px 18px;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 6px 18px -8px var(--sv-accent);
    transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.sv-book-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px -8px var(--sv-accent);
    color:#fff;
}
.sv-book-btn-icon{font-size:13px;}

.sv-toolbar{
    position:relative;
    z-index:10;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:center;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:1.125rem 1.5rem;
    border-radius:1.25rem;
    box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.06);
    margin-bottom:2rem;
}
.sv-search{
    flex:1;
    min-width:200px;
    position:relative;
}
.sv-search i{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:#9ca3af;
    pointer-events:none;
}
.sv-search input{
    width:100%;
    padding:0.875rem 1rem 0.875rem 2.75rem;
    border:1.5px solid var(--sv-border, #e5e7eb);
    border-radius:0.875rem;
    font-size:0.9375rem;
    background:#f4f4f5;
    color:var(--sv-card-text);
    transition:all 0.25s ease;
}
.sv-search input:focus{
    outline:none;
    background:#fff;
    border-color:var(--sv-accent);
    box-shadow:0 0 0 4px var(--sv-accent-soft);
}
.sv-filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}
.sv-pill{
    padding:0.625rem 1.125rem;
    border:none;
    border-radius:100px;
    background:#f4f4f5;
    color:#6b7280;
    font-size:0.8125rem;
    font-weight:500;
    cursor:pointer;
    transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
}
.sv-pill:hover{
    background:var(--sv-accent-soft);
    color:var(--sv-accent);
}
.sv-pill.active{
    background:var(--sv-accent);
    color:#fff;
    box-shadow:0 4px 12px rgba(99, 102, 241, 0.3);
}
.sv-no-results{
    text-align:center;
    padding:48px 24px;
    color:var(--sv-text-muted);
}
.sv-no-results i{font-size:42px;opacity:0.25;display:block;margin-bottom:14px;}
@media(max-width:760px){
    .sv-toolbar{flex-direction:column;align-items:stretch;}
    .sv-filter-pills{overflow-x:auto;flex-wrap:nowrap;}
    .sv-pill{flex-shrink:0;}
}

/* Services page container */
.booksolut-services-page{
    position:relative;
    z-index:3;
}

/* View All Services button */
.sv-view-all-wrapper{
    padding:0 24px;
}
.sv-view-all-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(37,99,235,0.35);
}

.sv-empty{
    text-align:center;
    padding:64px 24px;
    color:var(--sv-text-muted);
}
.sv-empty i{font-size:42px;opacity:0.25;display:block;margin-bottom:14px;}
.sv-empty h3{margin:0 0 6px;color:var(--sv-card-text);}

/* ============================================================
   Hero shortcode (used on the "Inicio" page).
   Reuses the same morphing blob design as the services hero.
   ============================================================ */
.booksolut-hero{
    position:relative;
    overflow:clip;
    border-radius:0;
    margin:0 0 32px;
    padding:0;
    color:#fff;
    background:linear-gradient(160deg, var(--booksolut-primary, #2563eb) 0%, var(--booksolut-secondary, #0f172a) 100%);
    min-height:380px;
    display:flex;
    align-items:flex-end;
}
.booksolut-hero__cover{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}
.booksolut-hero__cover--placeholder{background:transparent;}
.booksolut-hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.55) 100%);
}
.booksolut-hero::before{
    content:"";
    position:absolute;
    width:50%;
    height:120%;
    border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
    background:rgba(255,255,255,0.25);
    filter:blur(50px);
    opacity:0.4;
    animation:bsMorphBlob 14s ease-in-out infinite;
    top:-30%;
    left:-10%;
    z-index:1;
}
.booksolut-hero::after{
    content:"";
    position:absolute;
    width:40%;
    height:100%;
    border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
    background:rgba(255,255,255,0.15);
    filter:blur(60px);
    opacity:0.4;
    animation:bsMorphBlob 14s ease-in-out 6s infinite reverse;
    bottom:-20%;
    right:-5%;
    z-index:1;
}
.booksolut-hero__inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:64px 24px 48px;
}
.booksolut-hero__chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.3);
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    margin-bottom:14px;
    backdrop-filter:blur(8px);
    color:#fff;
}
.booksolut-hero__chip::before{
    content:"";
    width:8px;
    height:8px;
    background:#22c55e;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(34,197,94,0.3);
}
.booksolut-hero__logo{margin-bottom:18px;}
.booksolut-hero__logo img{
    width:74px;
    height:74px;
    border-radius:18px;
    object-fit:cover;
    background:#fff;
    border:4px solid #fff;
    box-shadow:0 12px 30px rgba(15,23,42,0.25);
}
.booksolut-hero__title{
    margin:0 0 8px;
    font-size:clamp(32px, 5vw, 52px);
    font-weight:800;
    line-height:1.05;
    color:#fff;
}
.booksolut-hero__subtitle{
    margin:0 0 24px;
    font-size:clamp(15px, 1.5vw, 18px);
    color:rgba(255,255,255,0.92);
    max-width:580px;
}
.booksolut-hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.booksolut-hero__cta.booksolut-btn{
    background:#fff;
    color:var(--booksolut-secondary, #0f172a);
    font-weight:700;
    padding:13px 26px;
    box-shadow:0 12px 30px rgba(15,23,42,0.25);
    border:none;
}
.booksolut-hero__cta.booksolut-btn:hover{transform:translateY(-2px);}
.booksolut-hero__cta--ghost{
    background:transparent !important;
    color:#fff !important;
    border:2px solid rgba(255,255,255,0.5) !important;
}
.booksolut-hero__cta--ghost:hover{background:rgba(255,255,255,0.12) !important;}

.booksolut-tenant-page .booksolut-hero{margin-bottom:0;}

/* ============================================================
   Bookly Time Slots (compact, same as booksolut.com)
   ============================================================ */
.bookly-time-slot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    min-height: 34px;
    height: auto;
    overflow: hidden;
    padding: 8px 6px;
    border: 2px solid var(--border-color, #e5e5e5);
    border-radius: 8px;
    background: var(--surface-color, #ffffff);
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bookly-time-slot:hover:not(.selected) {
    border-color: var(--bookly-accent, #8177f4);
    background: color-mix(in srgb, var(--bookly-accent, #8177f4) 6%, transparent);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transform: none;
}

.bookly-time-slot.selected {
    background: linear-gradient(135deg, var(--bookly-accent, #8177f4) 0%, var(--bookly-secondary, #37acfb) 100%);
    color: #fff;
    border-color: var(--bookly-accent, #8177f4);
    box-shadow: none;
}

.bookly-time-slot .bookly-slot-time {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.bookly-time-slot .bookly-slot-staff {
    display: none !important;
}

.bookly-time-end-hint {
    display: inline;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
    white-space: nowrap;
}

.bookly-time-slot.selected .bookly-time-end-hint {
    opacity: 0.9;
}

/* Time slots container */
.bookly-time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: none;
    overflow-y: visible;
    padding: 4px;
    align-content: start;
}

/* Staff pill in step 2 header */
.bookly-step2-staff-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary, #f1f5f9) !important;
    color: var(--text-secondary, #64748b) !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
.bookly-step2-staff-pill--clickable {
    cursor: pointer !important;
    border-color: color-mix(in srgb, var(--bookly-accent, #8177f4) 30%, transparent) !important;
    user-select: none !important;
}
.bookly-step2-staff-pill--clickable:hover,
.bookly-step2-staff-pill--clickable:focus {
    background: color-mix(in srgb, var(--bookly-accent, #8177f4) 10%, transparent) !important;
    color: var(--bookly-accent, #8177f4) !important;
    border-color: var(--bookly-accent, #8177f4) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    outline: none;
}
.bookly-staff-dropdown-menu {
    position: absolute;
    z-index: 2000;
    display: none;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 0.5rem 0;
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-primary, #1e293b);
    text-align: left;
    list-style: none;
    background-color: var(--bookly-card-bg, #ffffff);
    background-clip: padding-box;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}
.bookly-staff-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem;
    clear: both;
    font-weight: 500;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.bookly-staff-dropdown-item:hover,
.bookly-staff-dropdown-item:focus {
    background-color: color-mix(in srgb, var(--bookly-accent, #8177f4) 10%, transparent);
    color: var(--bookly-accent, #8177f4);
    outline: none;
}
.bookly-staff-dropdown-item.active {
    background-color: var(--bookly-accent, #8177f4) !important;
    color: #fff !important;
}

/* Staff group in step 1 */
.bookly-staff-group {
    margin-top: 16px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .bookly-time-slot {
        min-width: 80px;
        padding: 8px 12px;
    }
    
    .bookly-time-slot .bookly-slot-time {
        font-size: 14px;
    }
    
    .bookly-time-slot .bookly-slot-staff {
        font-size: 10px;
    }
}

/* ==========================================================================
   v1.3.3 — Front widget polish (SaaS parity)
   ========================================================================== */

.booksolut-widget {
    --booksolut-primary: var(--primary, #6366f1);
    --booksolut-primary-dark: var(--primary-dark, #4f46e5);
}

.booksolut-widget.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.booksolut-widget.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(1px);
}

.booksolut-stepper li {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.booksolut-stepper li.is-active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.booksolut-btn:disabled,
.booksolut-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.booksolut-btn--primary:disabled:hover {
    background: var(--booksolut-primary);
    color: #fff;
}

.booksolut-slot:focus-visible {
    outline: 2px solid var(--booksolut-primary);
    outline-offset: 2px;
}

.booksolut-card-tile:focus-visible {
    outline: 2px solid var(--booksolut-primary);
    outline-offset: 2px;
}

.booksolut-widget__status {
    transition: background 0.2s ease, color 0.2s ease;
}

.booksolut-widget .booksolut-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--booksolut-muted);
    font-size: 14px;
    font-weight: 500;
}

.booksolut-widget .booksolut-loading-inline::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--booksolut-border);
    border-top-color: var(--booksolut-primary);
    border-radius: 50%;
    animation: booksolut-spin 0.7s linear infinite;
}

@keyframes booksolut-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 782px) {
    .booksolut-widget {
        margin: 16px auto;
        padding: 20px 16px;
        border-radius: 16px;
    }

    .booksolut-stepper li {
        flex: 1 1 100%;
        border-radius: 12px;
    }

    .booksolut-grid--two {
        grid-template-columns: 1fr;
    }

    .booksolut-step__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .booksolut-step__actions .booksolut-btn--ghost {
        margin-right: 0;
    }
}