/**
 * Amelia booking widget — make the timezone indicator more prominent
 * so users notice they are booking in their local timezone.
 *
 * Amelia v3 styles `.am-advsc__time-zone span` (the inner pill) using CSS
 * variables. We override with !important on the same specificity so our
 * rules win regardless of stylesheet load order.
 *
 * The clock icon is a real <i class="bb-icon bb-icon-clock"> element
 * inserted by amelia-timezone.js — uses BuddyBoss's native icon markup.
 */

/* Parent flex container — bigger gap so the pill stands out from the calendar */
.am-advsc__time-zone {
    margin: 16px 0 8px !important;
    gap: 6px;
}

/* Plain "Your timezone:" prefix outside the pill */
.am-advsc__time-zone::before {
    content: "Your timezone:";
    align-self: center;
    font-weight: 500;
    font-size: 14px;
    color: #2c3e50;
}

.am-advsc__time-zone span {
    background-color: #e7f4ff !important;
    color: #0a66c2 !important;
    border: 1px solid #b9dcff !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Pill style for the suffix injected by amelia-timezone.js (slot heading
   and confirmation row). Same brand pill as the calendar step. */
.ww-amelia-tz-suffix {
    display: inline-block;
    background-color: #e7f4ff;
    color: #0a66c2;
    border: 1px solid #b9dcff;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* bb-icons is a multi-weight font where font-weight selects the visual
   variant: 100 = round-lined, 400 = lined (regular outline), 500 = box-lined,
   600 = box-filled. Amelia's widget scopes "Amelia Open Sans" onto every
   descendant with high specificity, which kills the bb-icons font-family
   and the `[class^="bb-icon-"]:before` content rule. Force both with
   !important on the icon AND on its ::before pseudo-element. */
.ww-amelia-tz-suffix .bb-icon,
.am-advsc__time-zone .bb-icon {
    font-family: 'bb-icons' !important;
    font-weight: 400 !important;
    margin-right: 4px;
    font-size: 0.95em;
    vertical-align: -1px;
}

.ww-amelia-tz-suffix .bb-icon-clock::before,
.am-advsc__time-zone .bb-icon-clock::before {
    font-family: 'bb-icons' !important;
    content: '\e884' !important;
}

/* Sidebar step selection: render as plain inline text on its own line under
   the date — the surrounding pill style would crowd the narrow sidebar. */
.am-fs-sb__step-selection .ww-amelia-tz-suffix {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

/* Slot-selection heading: render the pill inline with the heading text,
   transparent background — feels like part of the title rather than a tag.
   !important on font props because Amelia's `#amelia-container ...` rules
   have higher specificity than the simple class selector. */
.am-advsc__slots-heading .ww-amelia-tz-suffix {
    background: transparent;
    border: none;
    color: inherit;
    font-weight: 400 !important;
    font-size: 0.8em !important;
    padding: 0 5px;
}

/* Confirmation row: drop the pill chrome — we already have the value text
   right next to it ("Local Time: 13:30 Europe/Moscow"). */
.am-fs__congrats-info-app-time .ww-amelia-tz-suffix {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}