/* ==========================================================================
   NorthBay Health Urgent Care Wait-Time Widget
   Valtech/Figma-aligned iframe styles
   --------------------------------------------------------------------------
   Confirmed values:
   - Open Sans throughout the standalone iframe widget
   - Patient counter core: 225px wide
   - Count box: 44px x 44px, 8px radius
   - Normal green: #459621; Closed gray: #65625f
   - Light NorthBay green: #8BC546
   - Busy / Brand Brick: #BA1E2E
   - Busy badge: 47px x 24px
   - Status badge precedes Updated on the second text line
   - Data Unavailable and Temporarily Closed share one gray token
   - Closing soon / Brand accent orange: #E65E00
   - Desktop iframe height: 44px; mobile iframe height: 44px
   ========================================================================== */

html,
body {
    margin: 0;
    padding: 0;
    width: 225px;
    height: 44px;
    overflow: hidden;
    background: transparent;
}

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

.uc-widget {
--nb-green-solid: #459621;
    --nb-green-light: #8BC546;
    --nb-green-text: #217F13;

    --nb-busy-base: #BA1E2E;

    /* Shared until Valtech supplies the exact NorthBay gray token. */
    --nb-status-gray: #666666;

    /* Confirmed NorthBay blue. */
    --nb-blue-base: #0070C0;
    --nb-blue-text: #0070C0;

    /* Confirmed NorthBay accent orange. */
    --nb-orange-base: #E65E00;
    --nb-orange-text: #E65E00;

    width: 225px;
    min-width: 0;
    height: 44px;
    overflow: hidden;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: var(--nb-green-text);
    background: transparent;
}

.uc-widget .uc-location__right {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* ==========================================================================
   Patient Counter
   ========================================================================== */

.uc-widget .uc-wait {
    display: grid;
    grid-template-columns: 44px 181px;
    grid-template-rows: 44px;
    row-gap: 0;
    align-items: start;
    justify-content: start;
    width: 225px;
    max-width: 100%;
    min-height: 44px;
    overflow: visible;
    background: transparent;
}

.uc-widget .uc-wait__number {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 8px;
    background: var(--nb-green-solid);
    color: #fff;
    font-family: inherit;
    font-size: 30px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
}

.uc-widget .uc-wait__content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex: 0 0 181px;
    flex-direction: column;
    align-items: flex-start;
    width: 181px;
    min-width: 0;
    padding: 0 0 0 16px;
    justify-content: center;
    height: 44px;
}

.uc-widget .uc-wait__label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--nb-green-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
}

.uc-widget .uc-updated {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    color: var(--nb-green-text);
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
}

.uc-widget .uc-updated[hidden] {
    display: none;
}

/* Busy is the only count state that changes the patient counter colors. */
.uc-widget.uc-location--busy .uc-wait__number {
    background: var(--nb-busy-base);
}
.uc-widget.uc-location--busy .uc-wait__label,
.uc-widget.uc-location--busy .uc-updated {
    color: var(--nb-busy-base) !important;
}






/* ==========================================================================
   Dynamic Status Indicators
   ========================================================================== */

.uc-widget .uc-widget__statuses {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.uc-widget .uc-status-provider-lunch,
.uc-widget .uc-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.uc-widget .uc-status-provider-lunch[hidden],
.uc-widget .uc-status-badge[hidden] {
    display: none;
}

/* Exact Figma Busy treatment. */
.uc-widget .uc-status-badge--busy {
    flex: 0 0 47px;
    width: 47px;
    height: 24px;
    min-height: 24px;
    padding: 4px 10px;
    color: var(--nb-busy-base);
    border-color: rgba(186, 30, 46, 0.8);
    background: rgba(186, 30, 46, 0.05);
}

/* Provider Lunch remains blue; token can be replaced in one place. */
.uc-widget .uc-status-provider-lunch {
    color: var(--nb-blue-text);
    border-color: rgba(0, 112, 192, 0.8);
    background: rgba(0, 112, 192, 0.08);
}

.uc-widget .uc-status-badge--closed {
    color: var(--nb-green-text);
    border-color: rgba(33, 127, 19, 0.8);
    background: rgba(33, 127, 19, 0.05);
}

.uc-widget .uc-status-badge--unavailable,
.uc-widget .uc-status-badge--temporarily-closed {
    color: #fff;
    border-color: var(--nb-status-gray);
    background: var(--nb-status-gray);
}

.uc-widget .uc-status-badge--closing-soon {
    color: var(--nb-orange-text);
    border-color: rgba(230, 94, 0, 0.8);
    background: rgba(230, 94, 0, 0.07);
}

/* ==========================================================================
   Closed / Unavailable / Temporarily Closed
   ========================================================================== */

.uc-widget.uc-location--closed .uc-wait,
.uc-widget.uc-location--unavailable .uc-wait,
.uc-widget.uc-location--temporarily-closed .uc-wait {
    display: inline-flex;
    width: 225px;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    background: transparent;
}

.uc-widget.uc-location--closed .uc-wait__number,
.uc-widget.uc-location--unavailable .uc-wait__number,
.uc-widget.uc-location--temporarily-closed .uc-wait__number {
    display: none;
}

.uc-widget.uc-location--closed .uc-wait__content,
.uc-widget.uc-location--unavailable .uc-wait__content,
.uc-widget.uc-location--temporarily-closed .uc-wait__content {
    display: block;
    width: auto;
    flex: none;
    padding: 0;
}

.uc-widget.uc-location--closed .uc-wait__label,
.uc-widget.uc-location--unavailable .uc-wait__label,
.uc-widget.uc-location--temporarily-closed .uc-wait__label {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px 10px;
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0;
    white-space: nowrap;
}

.uc-widget.uc-location--closed .uc-wait__label {
    background: var(--nb-green-solid);
}

.uc-widget.uc-location--unavailable .uc-wait__label,
.uc-widget.uc-location--temporarily-closed .uc-wait__label {
    background: var(--nb-status-gray);
}

.uc-widget.uc-location--closed .uc-updated,
.uc-widget.uc-location--closed .uc-widget__statuses,
.uc-widget.uc-location--unavailable .uc-updated,
.uc-widget.uc-location--unavailable .uc-widget__statuses,
.uc-widget.uc-location--temporarily-closed .uc-updated,
.uc-widget.uc-location--temporarily-closed .uc-widget__statuses {
    display: none;
}



/* Shared second line for status badges and Updated time. */
.uc-widget .uc-wait__details {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.uc-widget .uc-widget__statuses:has(> :not([hidden])) {
    flex: none;
}
.uc-widget .uc-widget__statuses:not(:has(> :not([hidden]))) {
    display: none;
}

.uc-widget .uc-wait__moon {
    display: none;
}

.uc-widget.uc-location--closed .uc-wait {
    display: grid;
    justify-content: start;
}
.uc-widget.uc-location--closed .uc-wait__number {
    display: flex;
    background: #65625f;
}
.uc-widget.uc-location--closed [data-wait-count] {
    display: none;
}
.uc-widget.uc-location--closed .uc-wait__moon {
    display: block;
}
.uc-widget.uc-location--closed .uc-wait__content {
    display: flex;
    padding: 0 0 0 16px;
}
.uc-widget.uc-location--closed .uc-wait__label {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #65625f;
    font-size: 16px;
    line-height: 20px;
}
.uc-widget.uc-location--closed .uc-wait__details {
    display: none;
}

/* Reduce only second-line text when a badge is displayed. */
.uc-widget .uc-wait__details:has(.uc-status-badge:not([hidden])) .uc-updated {
    font-size: 12px;
}
.uc-widget .uc-status-provider-lunch,
.uc-widget .uc-status-badge {
    flex: none;
    height: 24px;
    min-height: 24px;
    padding: 3px 4px;
    font-size: 12px;
    line-height: 16px;
}
.uc-widget .uc-status-badge--busy {
    width: 47px;
    padding: 3px 4px;
}
/* Longer badges need smaller second-line text in the fixed 225px width. */
.uc-widget .uc-status-provider-lunch,
.uc-widget .uc-status-badge--closing-soon {
    font-size: 10px;
}
.uc-widget .uc-wait__details:has(.uc-status-provider-lunch:not([hidden])) .uc-updated,
.uc-widget .uc-wait__details:has(.uc-status-badge--closing-soon:not([hidden])) .uc-updated {
    font-size: 10px;
}