/* Wazi Meet UI. All rules are scoped to .cbw-widget so theme styles cannot leak in. */

.cbw-widget {
    --cbw-accent: #0f766e;
    --cbw-on-accent: #ffffff;
    --cbw-radius: 18px;
    --cbw-bg: #fbfcf8;
    --cbw-bg-soft: #eef4f2;
    --cbw-surface: #ffffff;
    --cbw-surface-raised: #ffffff;
    --cbw-border: #d6ded9;
    --cbw-text: #172026;
    --cbw-text-soft: #667a75;
    --cbw-shadow: 0 24px 70px rgba(27, 54, 49, 0.14);
    --cbw-logo-size: 44px;
    --cbw-logo-padding: 0px;
    --cbw-logo-bg: var(--cbw-surface-raised);
    --cbw-logo-border: var(--cbw-border);
    --cbw-logo-radius: 14px;
    --cbw-cal-arrow-bg: transparent;
    --cbw-cal-arrow-color: var(--cbw-text-soft);
    --cbw-cal-arrow-hover-bg: var(--cbw-date-hover-bg);
    --cbw-cal-arrow-hover-color: var(--cbw-date-hover-text);
    --cbw-field-bg: var(--cbw-surface-raised);
    --cbw-field-text: var(--cbw-text);
    --cbw-field-border: var(--cbw-border);
    --cbw-field-focus-bg: #ffffff;
    --cbw-field-focus-text: var(--cbw-text);
    --cbw-field-focus-border: var(--cbw-accent);
    /* The whole "green system" derives from the accent, so the Accent Color
       control recolors buttons, selected slots, the 12h/24h toggle, and the
       selected date together. The Buttons section still overrides these
       individually when set. */
    --cbw-button-bg: var(--cbw-accent);
    --cbw-button-text: var(--cbw-on-accent);
    --cbw-button-border: var(--cbw-accent);
    --cbw-button-hover-bg: color-mix(in srgb, var(--cbw-accent) 86%, #000000);
    --cbw-button-hover-text: var(--cbw-on-accent);
    --cbw-button-hover-border: color-mix(in srgb, var(--cbw-accent) 86%, #000000);
    --cbw-button-active-bg: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-button-active-text: var(--cbw-on-accent);
    --cbw-button-active-border: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-date-bg: #f7faf7;
    --cbw-date-text: #172026;
    --cbw-date-border: transparent;
    --cbw-date-hover-bg: #fdfdf8;
    --cbw-date-hover-text: #172026;
    --cbw-date-hover-border: #d6ded9;
    --cbw-date-active-bg: var(--cbw-accent);
    --cbw-date-active-text: var(--cbw-on-accent);
    --cbw-date-active-border: var(--cbw-accent);
    --cbw-date-disabled-text: #97a39e;
    --cbw-date-disabled-bg: #f1f4f1;
    --cbw-date-disabled-hover-bg: #f8f8f2;
    --cbw-slot-bg: var(--cbw-surface-raised);
    --cbw-slot-text: var(--cbw-text);
    --cbw-slot-border: var(--cbw-border);
    /* Slots derive from the accent directly — NOT from the button vars — so
       the Confirm-button controls never repaint the time slots. */
    --cbw-slot-hover-bg: var(--cbw-accent);
    --cbw-slot-hover-text: var(--cbw-on-accent);
    --cbw-slot-hover-border: var(--cbw-accent);
    --cbw-slot-active-bg: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-slot-active-text: var(--cbw-on-accent);
    --cbw-slot-active-border: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-scrollbar-track: color-mix(in srgb, var(--cbw-bg-soft) 72%, transparent);
    --cbw-scrollbar-thumb: color-mix(in srgb, var(--cbw-accent) 38%, var(--cbw-border));
    --cbw-toggle-bg: var(--cbw-bg-soft);
    --cbw-toggle-color: var(--cbw-text);
    --cbw-toggle-hover-bg: #dde8e3;
    --cbw-toggle-hover-color: var(--cbw-text);
    --cbw-toggle-active-bg: #d1dfd8;
    --cbw-toggle-active-color: var(--cbw-text);
    --cbw-toggle-border: var(--cbw-border);
    --cbw-back-bg: var(--cbw-bg-soft);
    --cbw-back-text: var(--cbw-text);
    --cbw-back-border: var(--cbw-border);
    /* Back button also derives from the accent, independent of the
       Confirm-button controls. */
    --cbw-back-hover-bg: var(--cbw-accent);
    --cbw-back-hover-text: var(--cbw-on-accent);
    --cbw-back-hover-border: var(--cbw-accent);
    --cbw-back-active-bg: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-back-active-text: var(--cbw-on-accent);
    --cbw-back-active-border: color-mix(in srgb, var(--cbw-accent) 72%, #000000);
    --cbw-back-radius: 999px;
    --cbw-summary-bg: color-mix(in srgb, var(--cbw-accent) 9%, var(--cbw-surface-raised));
    --cbw-summary-text: var(--cbw-text);
    --cbw-summary-border: color-mix(in srgb, var(--cbw-accent) 22%, var(--cbw-border));
    --cbw-clock-icon-size: 18px;
    --cbw-meet-icon-size: 18px;
    --cbw-form-bg: var(--cbw-surface);
    --cbw-form-border: transparent;
    --cbw-form-radius: 0px;

    position: relative;
    display: grid;
    grid-template-columns: minmax(245px, 30%) minmax(0, 1fr);
    max-width: 1120px;
    min-height: 500px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--cbw-text);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 34%),
        linear-gradient(135deg, var(--cbw-surface) 0%, var(--cbw-bg) 100%);
    border: 1px solid var(--cbw-border);
    border-radius: var(--cbw-radius);
    box-shadow: var(--cbw-shadow);
    font-family: inherit;
    line-height: 1.45;
}

.cbw-widget[data-theme="dark"] {
    --cbw-bg: #111111;
    --cbw-bg-soft: #1d1d1f;
    --cbw-surface: #141414;
    --cbw-surface-raised: #1b1b1d;
    --cbw-border: #2d2d31;
    --cbw-text: #f7f7f7;
    --cbw-text-soft: #b2b2b8;
    --cbw-accent: #ffffff;
    --cbw-on-accent: #111111;
    --cbw-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
    --cbw-field-bg: #171719;
    --cbw-field-text: #f7f7f7;
    --cbw-field-border: #34343a;
    --cbw-field-focus-bg: #202025;
    --cbw-field-focus-text: #ffffff;
    --cbw-field-focus-border: #ffffff;
    /* Same accent derivation as the light theme (default dark accent is
       white, so these resolve to the current white/gray buttons). */
    --cbw-button-bg: var(--cbw-accent);
    --cbw-button-text: var(--cbw-on-accent);
    --cbw-button-border: var(--cbw-accent);
    --cbw-button-hover-bg: color-mix(in srgb, var(--cbw-accent) 90%, #000000);
    --cbw-button-hover-text: var(--cbw-on-accent);
    --cbw-button-hover-border: color-mix(in srgb, var(--cbw-accent) 90%, #000000);
    --cbw-button-active-bg: color-mix(in srgb, var(--cbw-accent) 82%, #000000);
    --cbw-button-active-text: var(--cbw-on-accent);
    --cbw-button-active-border: color-mix(in srgb, var(--cbw-accent) 82%, #000000);
    --cbw-date-bg: #202025;
    --cbw-date-text: #f7f7f7;
    --cbw-date-border: transparent;
    --cbw-date-hover-bg: #2b2b30;
    --cbw-date-hover-text: #ffffff;
    --cbw-date-hover-border: #383840;
    --cbw-date-active-bg: #ffffff;
    --cbw-date-active-text: #111111;
    --cbw-date-active-border: #ffffff;
    --cbw-date-disabled-text: #8d8d95;
    --cbw-date-disabled-bg: #18181b;
    --cbw-date-disabled-hover-bg: #24242a;
    --cbw-slot-bg: #1b1b1d;
    --cbw-slot-text: #f7f7f7;
    --cbw-slot-border: #34343a;
    --cbw-slot-hover-bg: #ffffff;
    --cbw-slot-hover-text: #111111;
    --cbw-slot-hover-border: #ffffff;
    --cbw-slot-active-bg: #d7d7dc;
    --cbw-slot-active-text: #111111;
    --cbw-slot-active-border: #d7d7dc;
    --cbw-scrollbar-track: #171719;
    --cbw-scrollbar-thumb: #55555f;
    --cbw-toggle-bg: #202025;
    --cbw-toggle-color: #ffffff;
    --cbw-toggle-hover-bg: #2f2f35;
    --cbw-toggle-hover-color: #ffffff;
    --cbw-toggle-active-bg: #3a3a42;
    --cbw-toggle-active-color: #ffffff;
}

.cbw-widget *,
.cbw-widget *::before,
.cbw-widget *::after {
    box-sizing: border-box;
}

.cbw-widget button,
.cbw-widget input,
.cbw-widget select,
.cbw-widget textarea {
    font-family: inherit;
    box-shadow: none;
    text-shadow: none;
}

.cbw-widget button {
    background: transparent;
    color: var(--cbw-text);
    border-color: var(--cbw-border);
}

.cbw-widget input,
.cbw-widget select,
.cbw-widget textarea {
    background: var(--cbw-field-bg);
    color: var(--cbw-field-text);
    border-color: var(--cbw-field-border);
}

.cbw-widget button,
.cbw-widget a,
.cbw-widget input,
.cbw-widget select,
.cbw-widget textarea {
    outline-color: var(--cbw-accent);
    accent-color: var(--cbw-accent);
}

.cbw-widget a,
.cbw-widget a:hover,
.cbw-widget a:focus {
    color: var(--cbw-accent);
}

.cbw-widget button:focus,
.cbw-widget input:focus,
.cbw-widget select:focus,
.cbw-widget textarea:focus,
.cbw-widget a:focus {
    box-shadow: none !important;
}

.cbw-widget button:focus-visible,
.cbw-widget input:focus-visible,
.cbw-widget select:focus-visible,
.cbw-widget textarea:focus-visible,
.cbw-widget a:focus-visible {
    outline: 2px solid var(--cbw-accent) !important;
    outline-offset: 3px;
}

.cbw-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    min-width: 0;
    padding: 24px 24px;
    background: var(--cbw-bg-soft);
    background: color-mix(in srgb, var(--cbw-bg-soft) 64%, transparent);
    border-right: 1px solid var(--cbw-border);
}

.cbw-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* Keeps the brand row clear of the corner-pinned theme toggle. */
    padding-right: 52px;
}

.cbw-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cbw-logo-size);
    height: var(--cbw-logo-size);
    flex: 0 0 auto;
    overflow: hidden;
    padding: var(--cbw-logo-padding);
    border: 1px solid var(--cbw-logo-border);
    border-radius: var(--cbw-logo-radius);
    background: var(--cbw-logo-bg);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, padding 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* The logo doubles as a "start over" button. */
.cbw-logo-wrap:hover {
    border-color: color-mix(in srgb, var(--cbw-accent) 55%, var(--cbw-logo-border));
    transform: scale(1.05);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cbw-accent) 45%, transparent);
}

.cbw-logo-wrap:active {
    transform: scale(0.97);
}

.cbw-logo-wrap:focus-visible {
    outline: 2px solid var(--cbw-accent);
    outline-offset: 2px;
}

.cbw-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cbw-brand-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--cbw-on-accent);
    background: var(--cbw-accent);
    font-size: 16px;
    font-weight: 800;
}

.cbw-brand-copy {
    min-width: 0;
}

.cbw-brand-name {
    margin: 0;
    color: var(--cbw-text-soft);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cbw-event-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cbw-event-title {
    margin: 0;
    color: var(--cbw-text);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 760;
    line-height: 1.06;
    overflow-wrap: anywhere;
}

.cbw-event-desc {
    margin: -6px 0 0;
    color: var(--cbw-text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.cbw-event-meta {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.cbw-meta-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: var(--cbw-text);
    font-size: 14px;
    font-weight: 650;
}

.cbw-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--cbw-text-soft);
}

/* Sizing comes from the icon-size variables below (Elementor controls);
   a fixed size here would silently override those controls. */
.cbw-meta-icon svg {
    display: block;
}

.cbw-meta-icon-clock {
    color: var(--cbw-clock-color, var(--cbw-accent));
}

/* Clock is a single-color icon; currentColor picks up the accent above. */
.cbw-clock-logo {
    width: var(--cbw-clock-icon-size, 18px);
    height: var(--cbw-clock-icon-size, 18px);
    fill: currentColor;
}

/* Full-color Google brand logos. Both source SVGs are square (512x512),
   so width and height track the one provider-icon size cleanly. */
.cbw-google-meet-logo,
.cbw-google-calendar-logo {
    width: var(--cbw-meet-icon-size, 18px);
    height: var(--cbw-meet-icon-size, 18px);
}

.cbw-location-logo {
    width: var(--cbw-meet-icon-size, 18px);
    height: var(--cbw-meet-icon-size, 18px);
    color: var(--cbw-accent);
}

.cbw-toggle-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cbw-duration-badge {
    font: inherit;
}


.cbw-widget .cbw-theme-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbw-toggle-color) !important;
    background: var(--cbw-toggle-bg) !important;
    border: 1px solid var(--cbw-toggle-border) !important;
    border-radius: 999px;
    line-height: 1;
    appearance: none;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cbw-widget .cbw-theme-toggle:hover {
    color: var(--cbw-toggle-hover-color) !important;
    background: var(--cbw-toggle-hover-bg) !important;
    border-color: var(--cbw-toggle-hover-bg) !important;
    transform: translateY(-1px);
}

.cbw-widget .cbw-theme-toggle:focus {
    color: var(--cbw-toggle-color) !important;
    background: var(--cbw-toggle-bg) !important;
    border-color: var(--cbw-toggle-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

.cbw-widget .cbw-theme-toggle:focus-visible {
    outline: 2px solid var(--cbw-toggle-active-bg) !important;
    outline-offset: 3px;
}

.cbw-widget .cbw-theme-toggle:active {
    color: var(--cbw-toggle-active-color) !important;
    background: var(--cbw-toggle-active-bg) !important;
    border-color: var(--cbw-toggle-active-bg) !important;
    transform: translateY(0);
}

.cbw-widget .cbw-theme-toggle svg {
    stroke: currentColor !important;
}

.cbw-toggle-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.cbw-toggle-light {
    display: none;
}

.cbw-widget[data-theme="dark"] .cbw-toggle-light {
    display: inline-flex;
}

.cbw-widget[data-theme="dark"] .cbw-toggle-dark {
    display: none;
}

.cbw-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cbw-body {
    display: grid;
    grid-template-columns: minmax(330px, 1fr) minmax(218px, 252px);
    min-width: 0;
    background: var(--cbw-surface);
}

.cbw-calendar-pane,
.cbw-slots-pane,
.cbw-form-pane,
.cbw-success-pane {
    min-width: 0;
    background: var(--cbw-form-bg);
    border: 1px solid var(--cbw-form-border);
    border-radius: var(--cbw-form-radius);
}

.cbw-calendar-pane {
    padding: 28px 30px;
    border-right: 1px solid var(--cbw-border);
}

.cbw-slots-pane {
    padding: 24px 20px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cbw-scrollbar-thumb) var(--cbw-scrollbar-track);
    background: var(--cbw-bg-soft);
    background: color-mix(in srgb, var(--cbw-bg-soft) 42%, transparent);
}

.cbw-slots-pane::-webkit-scrollbar {
    width: 10px;
}

.cbw-slots-pane::-webkit-scrollbar-track {
    background: var(--cbw-scrollbar-track);
}

.cbw-slots-pane::-webkit-scrollbar-thumb {
    background: var(--cbw-scrollbar-thumb);
    border: 2px solid var(--cbw-scrollbar-track);
    border-radius: 999px;
}

.cbw-slots-pane::-webkit-scrollbar-thumb:hover {
    background: var(--cbw-accent);
}

.cbw-form-pane,
.cbw-success-pane {
    grid-column: 1 / -1;
    padding: 22px 24px;
    background: var(--cbw-form-bg);
    border: 1px solid var(--cbw-form-border);
    border-radius: var(--cbw-form-radius);
}

.cbw-success-pane {
    align-self: center;
    text-align: center;
}

.cbw-options-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.cbw-inline-field {
    min-width: 0;
}

/* Dropdown indicator. The icon is drawn as a MASK rather than a background
   image, so a single asset picks up --cbw-field-text and stays correct in
   both the light and dark themes (and follows the Elementor field-text
   control). The shell anchors it to the select itself, so it stays centered
   no matter how tall the label above wraps. */
.cbw-select-shell {
    position: relative;
    display: block;
    min-width: 0;
}

.cbw-select-shell::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    pointer-events: none;
    opacity: 0.7;
    background-color: var(--cbw-field-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='m100 0h312a100.193 100.193 0 0 1 100 100v312a100.193 100.193 0 0 1 -100 100h-312a100.193 100.193 0 0 1 -100-100v-312a100.193 100.193 0 0 1 100-100zm300.51 177.112a18.784 18.784 0 0 0 -26.532 0l-117.978 117.978-118.006-117.978a18.741 18.741 0 1 0 -26.5 26.5l131.24 131.277a18.717 18.717 0 0 0 26.5 0l131.276-131.273a18.752 18.752 0 0 0 0-26.504z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='m100 0h312a100.193 100.193 0 0 1 100 100v312a100.193 100.193 0 0 1 -100 100h-312a100.193 100.193 0 0 1 -100-100v-312a100.193 100.193 0 0 1 100-100zm300.51 177.112a18.784 18.784 0 0 0 -26.532 0l-117.978 117.978-118.006-117.978a18.741 18.741 0 1 0 -26.5 26.5l131.24 131.277a18.717 18.717 0 0 0 26.5 0l131.276-131.273a18.752 18.752 0 0 0 0-26.504z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cbw-select-shell select {
    width: 100%;
}

.cbw-widget select.cbw-timezone-select,
.cbw-widget select.cbw-duration-select {
    min-height: 40px;
    padding: 9px 36px 9px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
}

/* Suppress every arrow the browser would draw, so only the icon above shows:
   the classic UA arrow, the old IE/Edge expander, and the customizable-select
   picker icon some Chromium builds paint INSIDE the box. Miss any one of
   these and you get the double arrow back. */
.cbw-widget select.cbw-timezone-select,
.cbw-widget select.cbw-duration-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

.cbw-timezone-select::-ms-expand,
.cbw-duration-select::-ms-expand {
    display: none;
}

@supports selector(::picker-icon) {
    .cbw-widget select.cbw-timezone-select::picker-icon,
    .cbw-widget select.cbw-duration-select::picker-icon {
        display: none;
        content: none;
    }
}

.cbw-time-format-field {
    display: grid;
    gap: 7px;
}

.cbw-time-format-label {
    display: block;
    color: var(--cbw-text-soft);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}

.cbw-time-format-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    background: var(--cbw-tf-track-bg, var(--cbw-field-bg));
    border: 1px solid var(--cbw-tf-track-border, var(--cbw-field-border));
    border-radius: 12px;
}

.cbw-widget .cbw-time-format-option {
    min-height: 32px;
    padding: 6px 10px;
    color: var(--cbw-tf-text, var(--cbw-text-soft)) !important;
    background: var(--cbw-tf-bg, transparent) !important;
    border: 0 !important;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 780;
    line-height: 1;
}

.cbw-widget .cbw-time-format-option:hover {
    color: var(--cbw-tf-hover-text, var(--cbw-text)) !important;
    background: var(--cbw-tf-hover-bg, color-mix(in srgb, var(--cbw-accent) 10%, transparent)) !important;
}

.cbw-widget .cbw-time-format-option.is-active,
.cbw-widget .cbw-time-format-option:active {
    /* Falls back to the accent, not the button vars, so the toggle stays
       independent of the Confirm-button controls. */
    color: var(--cbw-tf-active-text, var(--cbw-on-accent)) !important;
    background: var(--cbw-tf-active-bg, var(--cbw-accent)) !important;
}


.cbw-inline-field label,
.cbw-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--cbw-text-soft);
    font-size: 12px;
    font-weight: 750;
}

.cbw-cal-nav {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.cbw-cal-month-label {
    color: var(--cbw-text);
    font-size: 18px;
    font-weight: 780;
    text-align: left;
}

.cbw-cal-nav button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    color: var(--cbw-cal-arrow-color);
    background: var(--cbw-cal-arrow-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cbw-cal-nav button::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
}

.cbw-cal-prev::before {
    transform: rotate(135deg);
    margin-left: 3px;
}

.cbw-cal-next::before {
    transform: rotate(-45deg);
    margin-right: 3px;
}

/* !important on every state: theme/kit button styles (e.g. Elementor's pink
   global hover) load after this sheet and would otherwise win the cascade. */
.cbw-widget .cbw-cal-nav button:hover {
    color: var(--cbw-cal-arrow-hover-color) !important;
    background: var(--cbw-cal-arrow-hover-bg) !important;
    border-color: var(--cbw-date-hover-border) !important;
    transform: translateY(-1px);
}

/* No separate pressed/focus color: clicking keeps the hover look. The
   !important guards stop theme "kit" button colors (the pink flash) from
   bleeding into these states. */
.cbw-widget .cbw-cal-nav button:active,
.cbw-widget .cbw-cal-nav button:focus,
.cbw-widget .cbw-cal-nav button:focus-visible {
    color: var(--cbw-cal-arrow-hover-color) !important;
    background: var(--cbw-cal-arrow-hover-bg) !important;
    border-color: var(--cbw-date-hover-border) !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translateY(0);
}

.cbw-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
    color: var(--cbw-text);
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
}

.cbw-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

/* .cbw-widget prefix keeps these above the generic `.cbw-widget button`
   reset — without it the component background/color variables never apply. */
.cbw-widget .cbw-day {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    color: var(--cbw-date-text);
    background: var(--cbw-date-bg);
    border: 1px solid var(--cbw-date-border);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 760;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cbw-day::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cbw-date-active-bg);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.cbw-day-number {
    position: relative;
    z-index: 1;
}

.cbw-day:hover:not(:disabled):not(.cbw-day-empty) {
    color: var(--cbw-date-hover-text) !important;
    background: var(--cbw-date-hover-bg) !important;
    border-color: var(--cbw-date-hover-border);
    transform: translateY(-2px);
}

.cbw-day-selected,
.cbw-day-selected:hover:not(:disabled) {
    color: var(--cbw-date-active-text) !important;
    background: var(--cbw-date-active-bg, var(--cbw-date-bg)) !important;
    border-color: var(--cbw-date-active-border);
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.20);
}

.cbw-day-selected::before,
.cbw-day:active:not(:disabled):not(.cbw-day-empty)::before {
    transform: scaleY(1);
}

.cbw-widget[data-theme="dark"] .cbw-day-selected,
.cbw-widget[data-theme="dark"] .cbw-day-selected:hover:not(:disabled) {
    box-shadow: 0 12px 26px rgba(255, 255, 255, 0.12);
}

.cbw-day-disabled,
.cbw-day:disabled {
    color: var(--cbw-date-disabled-text) !important;
    background: var(--cbw-date-disabled-bg) !important;
    border-color: var(--cbw-date-border) !important;
    opacity: 0.58;
    cursor: not-allowed;
}

.cbw-day-disabled:hover,
.cbw-day:disabled:hover {
    color: var(--cbw-date-disabled-text) !important;
    background: var(--cbw-date-disabled-hover-bg) !important;
    border-color: var(--cbw-border) !important;
    transform: none !important;
    box-shadow: none !important;
}

.cbw-day-disabled::before,
.cbw-day:disabled::before,
.cbw-day-empty::before {
    display: none;
}

.cbw-day-empty {
    visibility: hidden;
    cursor: default;
}

.cbw-slots-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.cbw-slots-label {
    margin: 0;
    color: var(--cbw-text);
    font-size: 17px;
    font-weight: 780;
}

.cbw-slots-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cbw-widget .cbw-slot-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--cbw-slot-text);
    background: var(--cbw-slot-bg);
    border: 1px solid var(--cbw-slot-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 760;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cbw-widget .cbw-slot-btn:hover:not(:disabled) {
    color: var(--cbw-slot-hover-text) !important;
    background: var(--cbw-slot-hover-bg) !important;
    border-color: var(--cbw-slot-hover-border) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.16);
}

.cbw-slot-btn:active:not(:disabled) {
    color: var(--cbw-slot-active-text);
    background: var(--cbw-slot-active-bg);
    border-color: var(--cbw-slot-active-border);
    transform: translateY(0);
}

.cbw-widget[data-theme="dark"] .cbw-slot-btn:hover:not(:disabled) {
    box-shadow: 0 12px 26px rgba(255, 255, 255, 0.10);
}

.cbw-slot-disabled,
.cbw-slot-disabled:hover,
.cbw-slot-disabled:active {
    color: var(--cbw-text-soft) !important;
    background: transparent !important;
    border-color: var(--cbw-border) !important;
    opacity: 0.52;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.cbw-slots-hint {
    margin: 0 0 12px;
    padding: 0;
    color: var(--cbw-text-soft);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}
.cbw-slots-empty,
.cbw-slots-loading {
    margin: 0;
    padding: 14px;
    color: var(--cbw-text-soft);
    background: var(--cbw-surface-raised);
    border: 1px solid var(--cbw-border);
    border-radius: 13px;
    font-size: 13px;
}

.cbw-form-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cbw-border);
}

.cbw-widget .cbw-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 13px 7px 8px;
    cursor: pointer;
    color: var(--cbw-back-text) !important;
    background: var(--cbw-back-bg) !important;
    border: 1px solid var(--cbw-back-border) !important;
    border-radius: var(--cbw-back-radius);
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    appearance: none;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.cbw-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, transparent);
}

.cbw-back-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cbw-widget .cbw-back-btn:hover {
    color: var(--cbw-back-hover-text) !important;
    background: var(--cbw-back-hover-bg) !important;
    border-color: var(--cbw-back-hover-border) !important;
    transform: translateY(-1px);
}

.cbw-widget .cbw-back-btn:focus {
    color: var(--cbw-back-text) !important;
    background: var(--cbw-back-bg) !important;
    border-color: var(--cbw-back-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

.cbw-widget .cbw-back-btn:focus-visible {
    outline: 2px solid var(--cbw-back-active-bg) !important;
    outline-offset: 3px;
}

.cbw-widget .cbw-back-btn:active {
    color: var(--cbw-back-active-text) !important;
    background: var(--cbw-back-active-bg) !important;
    border-color: var(--cbw-back-active-border) !important;
    transform: translateY(0);
}

.cbw-selected-slot {
    margin: 0;
    color: var(--cbw-summary-text);
    font-size: 14px;
    font-weight: 760;
}

.cbw-left-selected-slot {
    padding: 11px 13px;
    background: var(--cbw-summary-bg);
    border: 1px solid var(--cbw-summary-border);
    border-radius: 13px;
    line-height: 1.45;
}

.cbw-left-selected-slot:empty {
    display: none;
}

.cbw-selected-slot ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cbw-selected-slot li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    color: var(--cbw-summary-text);
}

.cbw-selected-slot li::before {
    content: none;
}

.cbw-selected-slot li span {
    color: var(--cbw-text-soft);
    font-size: 12px;
    font-weight: 750;
}

.cbw-selected-slot li strong {
    min-width: 0;
    color: var(--cbw-summary-text);
    font-size: 13px;
    font-weight: 780;
    overflow-wrap: anywhere;
}

.cbw-form-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.cbw-field {
    margin-bottom: 12px;
}

.cbw-form-grid .cbw-field {
    flex: 0 0 var(--cbw-field-width, 100%);
    max-width: var(--cbw-field-width, 100%);
    padding: 0 8px;
}

.cbw-widget .cbw-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    color: var(--cbw-field-text);
    background: var(--cbw-field-bg);
    border: 1px solid var(--cbw-field-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cbw-widget textarea.cbw-input {
    min-height: 82px;
    resize: vertical;
}

.cbw-input:focus {
    color: var(--cbw-field-focus-text);
    background: var(--cbw-field-focus-bg);
    border-color: var(--cbw-field-focus-border);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbw-field-focus-border) 18%, transparent) !important;
}

.cbw-input::placeholder {
    color: var(--cbw-text-soft);
    opacity: 0.72;
}

/* Chrome autofill paints its own white background, which glows in dark
   theme. The inset-shadow trick is the only supported override. */
.cbw-widget input.cbw-input:-webkit-autofill,
.cbw-widget input.cbw-input:-webkit-autofill:hover,
.cbw-widget input.cbw-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--cbw-field-bg) inset !important;
    -webkit-text-fill-color: var(--cbw-field-text);
    caret-color: var(--cbw-field-text);
}

.cbw-checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: var(--cbw-text) !important;
}

.cbw-checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: var(--cbw-accent);
}

.cbw-wa-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

/* Country-code button: shows the selected dial code + caret; the real
   <select> sits invisibly on top so a click/tap opens the native list. */
.cbw-wa-cc-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 12px;
    min-height: 40px;
    background: var(--cbw-field-bg);
    border: 1px solid var(--cbw-field-border);
    border-radius: 10px;
}

.cbw-wa-cc-wrap:focus-within {
    border-color: var(--cbw-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbw-accent) 18%, transparent);
}

.cbw-wa-caret {
    width: 6px;
    height: 6px;
    border: solid var(--cbw-field-text);
    border-width: 0 2px 2px 0;
    opacity: 0.75;
    transform: rotate(45deg) translateY(-2px);
}

.cbw-wa-cc-wrap .cbw-wa-cc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
}

.cbw-wa-cc-wrap .cbw-wa-code {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--cbw-field-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
}

.cbw-wa-row .cbw-wa-number {
    flex: 1 1 auto;
    min-width: 0;
}

.cbw-hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cbw-widget .cbw-submit-btn {
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    cursor: pointer;
    color: var(--cbw-button-text);
    background: var(--cbw-button-bg);
    border: 1px solid var(--cbw-button-border);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.cbw-submit-btn:hover:not(:disabled) {
    color: var(--cbw-button-hover-text);
    background: var(--cbw-button-hover-bg);
    border-color: var(--cbw-button-hover-border);
    transform: translateY(-1px);
}

.cbw-submit-btn:active:not(:disabled),
.cbw-widget .cbw-meet-link:active {
    color: var(--cbw-button-active-text);
    background: var(--cbw-button-active-bg);
    border-color: var(--cbw-button-active-border);
    transform: translateY(0);
}

.cbw-submit-btn:disabled {
    opacity: 0.62;
    cursor: default;
    transform: none;
}

.cbw-form-error {
    min-height: 18px;
    margin: 11px 0 0;
    color: #ef4444;
    font-size: 13px;
}

.cbw-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: #ffffff;
    background: #16a34a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.cbw-success-text {
    margin: 0 0 18px;
    color: var(--cbw-text-soft);
}

.cbw-widget .cbw-meet-link {
    display: inline-block;
    padding: 12px 20px;
    color: var(--cbw-button-text);
    background: var(--cbw-button-bg);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.cbw-widget .cbw-meet-link:hover,
.cbw-widget .cbw-meet-link:focus {
    color: var(--cbw-button-hover-text);
    background: var(--cbw-button-hover-bg);
    transform: translateY(-1px);
}


/* ---------- Stage-driven visibility (replaces inline display switching) ----------
   The widget carries data-stage="date|time|form|success"; CSS decides what shows. */

.cbw-form-pane,
.cbw-success-pane {
    display: none;
}

.cbw-widget[data-stage="form"] .cbw-form-pane {
    display: block;
}

.cbw-widget[data-stage="success"] .cbw-success-pane {
    display: block;
}

.cbw-widget[data-stage="form"] .cbw-calendar-pane,
.cbw-widget[data-stage="form"] .cbw-slots-pane,
.cbw-widget[data-stage="success"] .cbw-calendar-pane,
.cbw-widget[data-stage="success"] .cbw-slots-pane {
    display: none;
}

.cbw-widget .is-hidden {
    visibility: hidden;
}

.cbw-widget a.cbw-meet-link.is-hidden {
    display: none;
}

/* ---------- Mobile step bar (hidden on desktop) ---------- */

.cbw-step-bar {
    display: none;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 0;
}

.cbw-step-bar.cbw-step-bar-done {
    display: none;
}

.cbw-widget .cbw-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    color: var(--cbw-back-text) !important;
    background: var(--cbw-back-bg) !important;
    border: 1px solid var(--cbw-back-border) !important;
    border-radius: 999px;
    transition: background 0.18s ease, color 0.18s ease;
}

.cbw-widget .cbw-step-back:hover {
    color: var(--cbw-back-hover-text) !important;
    background: var(--cbw-back-hover-bg) !important;
    border-color: var(--cbw-back-hover-border) !important;
}

.cbw-step-back svg {
    display: block;
}

.cbw-step-label {
    color: var(--cbw-text-soft);
    font-size: 13px;
    font-weight: 750;
}

.cbw-step-dots {
    display: inline-flex;
    gap: 5px;
    margin-left: auto;
}

.cbw-step-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cbw-accent) 18%, var(--cbw-border));
    transition: background 0.18s ease;
}

.cbw-step-dot.is-active {
    background: var(--cbw-accent);
}

/* ---------- Selected slot (persistent, distinct from hover) ---------- */

.cbw-slot-btn.cbw-slot-selected,
.cbw-slot-btn.cbw-slot-selected:hover:not(:disabled) {
    color: var(--cbw-slot-active-text);
    background: var(--cbw-slot-active-bg);
    border-color: var(--cbw-slot-active-border);
    transform: none;
    box-shadow: none;
}

/* ---------- Today marker (distinct from selected) ---------- */

.cbw-day-today:not(.cbw-day-disabled) {
    border-color: color-mix(in srgb, var(--cbw-accent) 45%, transparent);
}

.cbw-day-today::after {
    content: "";
    position: absolute;
    bottom: 15%;
    left: 50%;
    z-index: 1;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--cbw-accent);
    transform: translateX(-50%);
}

.cbw-day-today.cbw-day-selected::after {
    background: var(--cbw-date-active-text);
}

.cbw-day-today.cbw-day-disabled::after {
    background: var(--cbw-date-disabled-text);
}

/* ---------- Success state ---------- */

.cbw-success-icon svg {
    display: block;
}

@keyframes cbw-pop-in {
    from {
        opacity: 0;
        transform: scale(0.55);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cbw-widget[data-stage="success"] .cbw-success-icon {
    animation: cbw-pop-in 0.35s cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* ---------- Left sidebar: pin the selected summary to the bottom ---------- */

.cbw-left-selected-slot {
    margin-top: auto;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cbw-widget,
    .cbw-widget *,
    .cbw-widget *::before,
    .cbw-widget *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 980px) {
    .cbw-widget {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .cbw-header {
        border-right: 0;
        border-bottom: 1px solid var(--cbw-border);
    }

    .cbw-body {
        grid-template-columns: 1fr;
    }

    .cbw-calendar-pane {
        border-right: 0;
        border-bottom: 1px solid var(--cbw-border);
    }

    .cbw-slots-pane {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .cbw-widget {
        min-height: 0;
        border-radius: 16px;
    }

    .cbw-header,
    .cbw-calendar-pane,
    .cbw-slots-pane,
    .cbw-form-pane,
    .cbw-success-pane {
        padding: 20px;
    }

    .cbw-header {
        gap: 18px;
    }

    .cbw-event-title {
        font-size: 28px;
    }

    .cbw-options-row {
        grid-template-columns: 1fr;
    }

    .cbw-cal-grid,
    .cbw-cal-weekdays {
        gap: 5px;
    }

    .cbw-day {
        border-radius: 10px;
        font-size: 13px;
    }

    .cbw-form-grid .cbw-field {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* ---------- Mobile step-by-step flow ----------
       One panel per step instead of a long stacked page. The Elementor
       editor preview is exempt so all panels stay stylable there. */

    .cbw-step-bar {
        display: flex;
    }

    .cbw-step-bar.cbw-step-bar-done {
        display: none;
    }

    .cbw-widget:not(.cbw-editor-preview)[data-stage="date"] .cbw-slots-pane {
        display: none;
    }

    .cbw-widget:not(.cbw-editor-preview)[data-stage="time"] .cbw-calendar-pane {
        display: none;
    }

    .cbw-widget:not(.cbw-editor-preview)[data-stage="time"] .cbw-slots-pane {
        max-height: none;
    }

    /* The form has its own back button; hide the step bar's duplicate. */
    .cbw-widget[data-stage="form"] .cbw-step-bar {
        display: none;
    }
}

/* ============================================================
   Theme-matching dropdown menus (timezone & duration)
   ============================================================ */

/* Baseline: option lists inherit the field colors. Chromium and Firefox
   honor these on the native popup; Safari ignores them gracefully. */
.cbw-widget select.cbw-input option,
.cbw-widget select.cbw-input optgroup {
    background: var(--cbw-field-bg);
    color: var(--cbw-field-text);
    font-weight: 500;
}

/* NOTE: no `appearance: base-select` anywhere. The customizable-select mode
   draws the browser's own picker icon INSIDE the closed control (a stray "▼"
   under the value) on top of our icon. The selects stay native with
   appearance:none + the .cbw-select-shell icon — one arrow, every browser. */

/* ============================================================
   Event type picker ([wazi_meet_menu])
   Neutral palette on purpose: the cards sit OUTSIDE any themed
   widget, on the host page's own background.
   ============================================================ */

.cbw-menu-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.cbw-menu-cards[hidden],
.cbw-menu-panel[hidden] {
    display: none;
}

.cbw-menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px;
    text-align: left;
    background: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cbw-menu-card:hover,
.cbw-menu-card:focus-visible {
    transform: translateY(-2px);
    border-color: #94a3b8;
    box-shadow: 0 12px 28px -14px rgba(2, 6, 23, 0.28);
}

.cbw-menu-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.cbw-menu-card-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: #4b5563;
}

.cbw-menu-card-meta {
    font-size: 12.5px;
    font-weight: 650;
    color: #6b7280;
}

.cbw-menu-card-cta {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f766e;
}

.cbw-menu-back {
    display: inline-block;
    margin: 0 0 14px;
    padding: 8px 14px;
    background: transparent;
    color: inherit;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    font-family: inherit;
}

.cbw-menu-back:hover {
    border-color: #94a3b8;
}

/* ============================================================
   Premium cursor (Style -> Theme -> Premium Cursor)
   ============================================================ */

/* Two fixed variants that read well on both themes: a white arrow with a
   dark outline for resting, and its inverse over anything clickable.
   Cursor images cannot use CSS variables, hence the fixed colors. */
.cbw-widget.cbw-cursor-fancy {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3.2v16.6l4.6-3.9 2.7 5.9 2.9-1.3-2.7-5.8 6.2-.6z' fill='%23ffffff' stroke='%231e293b' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, default;
}

.cbw-widget.cbw-cursor-fancy button:not(:disabled):not(.cbw-day-disabled),
.cbw-widget.cbw-cursor-fancy select,
.cbw-widget.cbw-cursor-fancy a,
.cbw-widget.cbw-cursor-fancy .cbw-logo-wrap,
.cbw-widget.cbw-cursor-fancy .cbw-slot-btn:not(:disabled) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3.2v16.6l4.6-3.9 2.7 5.9 2.9-1.3-2.7-5.8 6.2-.6z' fill='%231e293b' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer;
}

/* Typing areas keep the familiar I-beam; disabled things say so. */
.cbw-widget.cbw-cursor-fancy input:not([type="checkbox"]):not([type="radio"]),
.cbw-widget.cbw-cursor-fancy textarea {
    cursor: text;
}

.cbw-widget.cbw-cursor-fancy button:disabled,
.cbw-widget.cbw-cursor-fancy .cbw-day-disabled {
    cursor: not-allowed;
}

/* ============================================================
   Design presets (Style -> Theme -> Design Preset, or the
   admin Booking Form editor). Each preset re-tints the accent
   and the button/slot colour set. Placed after the dark-theme
   block so an equal-specificity preset wins in both themes,
   giving a coloured accent even over the monochrome dark base.
   The default look uses no preset class.
   ============================================================ */
.cbw-widget.cbw-preset-ocean {
    --cbw-accent: #2563eb;
    --cbw-button-bg: #2563eb;
    --cbw-button-border: #2563eb;
    --cbw-button-hover-bg: #1d4ed8;
    --cbw-button-hover-border: #1d4ed8;
    --cbw-button-active-bg: #1e40af;
    --cbw-button-active-border: #1e40af;
}

.cbw-widget.cbw-preset-violet {
    --cbw-accent: #7c3aed;
    --cbw-button-bg: #7c3aed;
    --cbw-button-border: #7c3aed;
    --cbw-button-hover-bg: #6d28d9;
    --cbw-button-hover-border: #6d28d9;
    --cbw-button-active-bg: #5b21b6;
    --cbw-button-active-border: #5b21b6;
}

.cbw-widget.cbw-preset-emerald {
    --cbw-accent: #059669;
    --cbw-button-bg: #059669;
    --cbw-button-border: #059669;
    --cbw-button-hover-bg: #047857;
    --cbw-button-hover-border: #047857;
    --cbw-button-active-bg: #065f46;
    --cbw-button-active-border: #065f46;
}

.cbw-widget.cbw-preset-sunset {
    --cbw-accent: #ea580c;
    --cbw-button-bg: #ea580c;
    --cbw-button-border: #ea580c;
    --cbw-button-hover-bg: #c2410c;
    --cbw-button-hover-border: #c2410c;
    --cbw-button-active-bg: #9a3412;
    --cbw-button-active-border: #9a3412;
}

.cbw-widget.cbw-preset-rose {
    --cbw-accent: #e11d48;
    --cbw-button-bg: #e11d48;
    --cbw-button-border: #e11d48;
    --cbw-button-hover-bg: #be123c;
    --cbw-button-hover-border: #be123c;
    --cbw-button-active-bg: #9f1239;
    --cbw-button-active-border: #9f1239;
}

.cbw-widget.cbw-preset-slate {
    --cbw-accent: #475569;
    --cbw-button-bg: #475569;
    --cbw-button-border: #475569;
    --cbw-button-hover-bg: #334155;
    --cbw-button-hover-border: #334155;
    --cbw-button-active-bg: #1e293b;
    --cbw-button-active-border: #1e293b;
}