/* E2-6445 - Patient portal: availabilities grouped by office place, loaded progressively.
   Prefix "abop" = Availability By Office Place. Colors follow the portal theme (--ed-main-color). */

.abop {
    background: #fff;
    border: 1px solid #e3e8ec;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
}

/***** GLOBAL PROGRESS *****/
.abop-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #f6f8f9;
    border-bottom: 1px solid #e3e8ec;
}

.abop-progress-meter {
    flex: 1;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    box-shadow: none;
    background: #e3e8ec;
}

.abop-progress-meter .progress-bar {
    background: var(--ed-main-color);
    box-shadow: none;
    transition: width .35s ease-out;
}

.abop-progress-text {
    font-size: 13px;
    color: #4d5b64;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/***** CARDS *****/
.abop-list {
    display: flex;
    flex-direction: column;
}

.abop-card {
    padding: 16px 18px;
    border-bottom: 1px solid #e3e8ec;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.abop-list > .abop-card:last-child {
    border-bottom: 0;
}

.abop-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.abop-rank {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1px solid #dce3e8;
    background: #f6f8f9;
    color: #4d5b64;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.abop-card.abop-top .abop-rank {
    background: var(--ed-main-color);
    border-color: var(--ed-main-color);
    color: #fff;
}

.abop-identity {
    flex: 1;
    min-width: 0;
}

.abop-name {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
}

.abop-meta {
    margin: 3px 0 0;
    font-size: 13px;
    color: #4d5b64;
}


.abop-first {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

/* Merged card: with no name to sit beside, the first availability leads the row instead of being
   pushed against the right edge by an empty space. */
.abop-card-head-bare .abop-first {
    flex: 1;
    align-items: flex-start;
    text-align: left;
}

.abop-eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4d5b64;
}

.abop-first-date {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.abop-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: #e3eef1;
    color: #21525c;
}

.abop-pill-early {
    background: #ddefe8;
    color: #126b52;
}

.abop-pill-late {
    background: #f6ead2;
    color: #8a5a00;
}

.abop-searching {
    font-size: 12.5px;
    color: #4d5b64;
    white-space: nowrap;
}

/***** SLOTS *****/
.abop-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.abop-day {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.abop-day-label {
    flex: none;
    width: 130px;
    font-size: 13px;
    color: #4d5b64;
}

.abop-slots {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

/* btn-u alone carries the EasyDoct green (--ed-main-color) and its darker hover, like every other
   primary button: btn-u-light-green was a mint green unrelated to the portal colour.
   Radius aligned on the app's rounded-4x utility. */
.abop-slots .abop-slot {
    margin: 0;
    border-radius: 20px;
}

/* Same footprint as a slot button, but clearly not bookable: it only reveals the hidden slots. */
.abop-slot-more {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 6px 11px;
    border: 1px dashed #b9c4cc;
    border-radius: 20px;
    background: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.42857;
    color: #4d5b64;
    cursor: pointer;
}

.abop-slot-more:hover,
.abop-slot-more:focus {
    border-color: var(--ed-main-color);
    color: var(--ed-main-color);
}

.abop-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #4d5b64;
}

.abop-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ed-main-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.abop-link:hover,
.abop-link:focus {
    color: var(--ed-main-color);
    filter: brightness(.85);
}

.abop-link[disabled] {
    cursor: default;
    opacity: .6;
    text-decoration: none;
}

.abop-more-none {
    font-size: 12.5px;
    color: #4d5b64;
}

.abop-state {
    margin: 0;
    font-size: 13.5px;
    color: #4d5b64;
}

.abop-more-error {
    color: #b94a48;
}

.abop-card.abop-empty .abop-name,
.abop-card.abop-error .abop-name {
    color: #4d5b64;
}

/***** SKELETON (place still being searched) *****/
.abop-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.abop-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.abop-bar {
    display: inline-block;
    width: 44px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #e3e8ec 25%, #f6f8f9 37%, #e3e8ec 63%);
    background-size: 400% 100%;
    animation: abopShimmer 1.4s ease-in-out infinite;
}

.abop-bar-label {
    width: 88px;
}

@keyframes abopShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/***** ARRIVAL HIGHLIGHT *****/
.abop-card.abop-flash {
    animation: abopFlash 1.1s ease-out;
}

@keyframes abopFlash {
    0% {
        background-color: #e3eef1;
    }

    100% {
        background-color: #fff;
    }
}

/***** COLLAPSED GROUP: no availability / error *****/
.abop-group {
    border-top: 1px solid #e3e8ec;
    background: #f6f8f9;
}

.abop-group-head {
    display: block;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #4d5b64;
    list-style: none;
}

.abop-group-head::-webkit-details-marker {
    display: none;
}

.abop-group-caret {
    display: inline-block;
    margin-right: 6px;
    transition: transform .2s ease;
}

.abop-group[open] .abop-group-caret {
    transform: rotate(90deg);
}

.abop-group-list .abop-card {
    background: #f6f8f9;
    padding-top: 13px;
    padding-bottom: 13px;
}

/***** GLOBAL NO AVAILABILITY / FOOTNOTE *****/
.abop-no-availability {
    margin: 18px;
    padding: 40px;
}

.abop-no-availability-title {
    font: normal 16px/22px Open Sans;
}

.abop-no-availability-text {
    font: normal 300 16px/22px Open Sans;
}

.abop-footnote {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid #e3e8ec;
    font-size: 12.5px;
    color: #4d5b64;
}

/***** SLOT TOOLTIP *****/
/* Placed against the viewport by positionSlotToolTip, and attached to the body: the list clips its
   own overflow. pointer-events none so the box never steals the hover from the slot underneath. */
.abop-tip-popup {
    position: fixed;
    z-index: 1060;
    width: 310px;
    max-width: calc(100vw - 16px);
    border: 1px solid #dce3e8;
    border-radius: 8px;
    background: #fff;
    color: #1f2a37;
    box-shadow: 0 8px 24px rgba(31, 42, 55, .18);
    pointer-events: none;
}

.abop-tip-popup[hidden] {
    display: none;
}

.abop-tip {
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

/* Second exam of a set: separated rather than run on, the way the old tooltip did with <br>. */
.abop-tip-section + .abop-tip-section {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eef0f3;
}

.abop-tip-day {
    margin: 0 0 2px;
    font-weight: 600;
}

.abop-tip-time {
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ed-main-color);
}

.abop-tip-convocation {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #6b7780;
}

.abop-tip-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    margin: 0;
}

.abop-tip-rows dt {
    font-weight: 400;
    color: #6b7780;
    white-space: nowrap;
}

.abop-tip-rows dd {
    margin: 0;
    font-weight: 600;
}

/* Label-less row: it takes both columns instead of leaving an empty one. */
.abop-tip-rows dd.abop-tip-row-full {
    grid-column: 1 / -1;
}

/***** RESPONSIVE (~360px) *****/
@media (max-width: 520px) {
    .abop-card {
        padding: 14px 12px;
    }

    /* The first-availability block sat beside the identity and, with its non-breaking date, left it
       a column barely two words wide: a long place name and its address then wrapped into a ribbon.
       It now takes a full-width row of its own, indented to line up under the name. */
    .abop-card-head {
        gap: 8px 10px;
        flex-wrap: wrap;
    }

    .abop-name {
        font-size: 16px;
    }

    .abop-first {
        flex: 1 0 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 4px 8px;
        /* Rank badge width plus the head gap. */
        padding-left: 34px;
        text-align: left;
    }

    /* E2-6463: the full date duplicated the first day label right below it and, at 13px light gray,
       that day label read as secondary text rather than the reading anchor for the card. Hiding the
       date keeps it accessible while the delay badge alone carries the header, and strengthening the
       day label makes each day block legible without a separator. */
    .abop-eyebrow,
    .abop-first-date {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .abop-days {
        gap: 24px;
    }

    .abop-day-label {
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        color: #2b3138;
    }

    .abop-slots .abop-slot,
    .abop-slot-more {
        min-width: 68px;
        height: 36px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .abop-no-availability {
        margin: 12px;
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abop-bar,
    .abop-card.abop-flash {
        animation: none;
    }

    .abop-progress-meter .progress-bar,
    .abop-group-caret {
        transition: none;
    }
}