/*
 * CSB-College overview list – deltas to EXT:csb product-database.less.
 *
 * The college list drops the inline A-Z anchor row under the search field but
 * keeps the floating .product-database__sticky-links pill (its styles live in
 * product-database.less and are inherited here).
 */

/* -------------------------------------------------------------------------
   "Jetzt anmelden und Termin vereinbaren!" - Termin and Veranstaltungsort
   selector, rendered directly above the HubSpot form. The Termin picker is a
   <details>/<summary> made to look like a dropdown (closed: current value +
   chevron; open: the other Termine as radios) - a real <select> can't show
   the bold language prefix in its closed state, this can.
   Functional styling only - the visual design follows the detail-page mockup.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   "Jetzt anmelden und Termin vereinbaren!" - Termin and Veranstaltungsort
   selector, rendered directly above the HubSpot form. The Termin picker is a
   pure-CSS dropdown (hidden checkbox + <label>) made to look like a real
   <select> (closed: current value + chevron; open: the other Termine as
   radios) - a real <select> can't show the bold language prefix in its
   closed state, this can.
   Functional styling only - the visual design follows the detail-page mockup.
   ------------------------------------------------------------------------- */

.csb-college-date-picker__select {
    position: relative;
    border: 0;
}

.csb-college-date-picker__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.csb-college-date-picker__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 4px;
    border-bottom: 1px solid #d8d8d8;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.csb-college-date-picker__summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid #3C3C3B;
    border-bottom: 2px solid #3C3C3B;
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin-left: auto;
}

.csb-college-date-picker__toggle:checked ~ .csb-college-date-picker__summary::after {
    transform: rotate(-135deg);
}

.csb-college-date-picker__toggle:focus-visible ~ .csb-college-date-picker__summary {
    outline: 2px solid #007bc4;
    outline-offset: 2px;
}

.csb-college-date-picker__options {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .25s ease;
}

.csb-college-date-picker__options > * {
    min-height: 0;
}

.csb-college-date-picker__toggle:checked ~ .csb-college-date-picker__options {
    grid-template-rows: 1fr;
}

.csb-college-date-picker__toggle:checked ~ .csb-college-date-picker__options .csb-college-date-picker__options-inner {
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 4px;
}

.csb-college-date-picker__options-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.csb-college-date-picker__option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.csb-college-date-picker__location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 4px;
}

/*
 * Author CSS beats the browser's default `[hidden] { display: none }` UA rule
 * regardless of selector specificity - without this, college-date-picker.js
 * setting .hidden on the inactive Termin's Veranstaltungsort block above still
 * rendered as visible (its now-disabled radios showing up greyed out).
 */
.csb-college-date-picker__location[hidden] {
    display: none;
}

.csb-college-date-picker__location-prompt,
.csb-college-date-picker__location-fixed {
    margin: 0;
}

.csb-college-date-picker__location-prompt {
    flex-basis: 100%;
    font-weight: 500;
    color: #007bc4;
}

.csb-college-date-picker__location-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}