/* ═══════════════════════════════════════════════════════════
   HAT Manager — Public Styles v2.6.0
   Theme: CarForYou (red #e8152a, dark navy #1e2d3d)
═══════════════════════════════════════════════════════════ */

:root {
    --atm-red:       #e8152a;
    --atm-red-dark:  #c0101f;
    --atm-navy:      #1e2d3d;
    --atm-navy-mid:  #2c3e52;
    --atm-gray:      #b0b8c1;
    --atm-gray-bg:   #f4f6f8;
    --atm-white:     #ffffff;
    --atm-text:      #2c3e50;
    --atm-border:    #dde2e8;
    --atm-shadow:    0 4px 18px rgba(30,45,61,.12);
    --atm-radius:    6px;
}

/* ══════════════════════════════════════════════════════════
   MAP
══════════════════════════════════════════════════════════ */

.atm-map-outer {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 32px;
}

.atm-map-main {
    flex: 1;
    min-width: 0;
}

.atm-map-legend {
    display: flex;
    gap: 24px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--atm-navy-mid);
}

.atm-legend-active  { color: var(--atm-red); font-weight: 600; }
.atm-legend-inactive { color: var(--atm-gray); }

.atm-map-container {
    width: 100%;
    background: #fff;
    border-radius: var(--atm-radius);
    box-shadow: var(--atm-shadow);
    overflow: hidden;
    max-height: var(--atm-map-max-height, 75vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

#atm-map-svg {
    width: 100%;
    height: 100%;
    max-height: var(--atm-map-max-height, 75vh);
    display: block;
}

/* State fills */
.atm-state { transition: fill .2s; }

.atm-state-active {
    fill: #f0d0d3;
    stroke: var(--atm-red);
    stroke-width: 1.5;
}

.atm-state-inactive {
    fill: var(--atm-gray-bg);
    stroke: #ccc;
    stroke-width: 0.5;
}

/* City pins */
.atm-city-pin { cursor: pointer; }

.atm-city-dot {
    fill: var(--atm-red);
    stroke: var(--atm-white);
    stroke-width: 1.5;
}

.atm-city-ring {
    fill: var(--atm-white);
    stroke: var(--atm-red);
    stroke-width: 1.5;
}

.atm-city-pin:hover .atm-city-dot,
.atm-city-pin:focus  .atm-city-dot { fill: var(--atm-red-dark); }

.atm-city-pulse {
    fill: none;
    stroke: var(--atm-red);
    stroke-width: 1;
    opacity: 0;
    animation: atm-pulse 2s ease-out infinite;
}

@keyframes atm-pulse {
    0%   { opacity: .6; r: 6; }
    100% { opacity: 0;  r: 18; }
}

.atm-city-label-halo {
    font-size: 9px;
    font-weight: 700;
    fill: none;
    stroke: white;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-family: inherit;
    pointer-events: none;
}

.atm-city-label {
    font-size: 9px;
    font-weight: 700;
    fill: var(--atm-navy);
    font-family: inherit;
    pointer-events: all;
    cursor: pointer;
    transition: fill .15s;
}

.atm-city-label:hover,
.atm-city-pin:hover .atm-city-label,
.atm-city-pin:focus  .atm-city-label { fill: var(--atm-red); cursor: pointer; }

/* Map sidebar */
.atm-map-sidebar {
    flex: 0 0 200px;
    background: var(--atm-white);
    border-radius: var(--atm-radius);
    box-shadow: var(--atm-shadow);
    overflow: hidden;
    border-top: 3px solid var(--atm-red);
}

.atm-map-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--atm-white);
    background: var(--atm-navy);
    margin: 0;
    padding: 12px 14px;
}

.atm-map-sidebar-event {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--atm-border);
    text-decoration: none;
    transition: background .15s;
}

.atm-map-sidebar-event:hover { background: #fef7f7; }

.atm-map-sidebar-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--atm-red);
    margin-bottom: 3px;
}

.atm-map-sidebar-city {
    font-size: 13px;
    font-weight: 700;
    color: var(--atm-navy);
    margin-bottom: 2px;
}

.atm-map-sidebar-loc {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}

.atm-map-sidebar-types { display: flex; flex-wrap: wrap; gap: 3px; }

.atm-map-sidebar-all {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--atm-red);
    text-decoration: none;
    text-align: center;
}

.atm-map-sidebar-all:hover { background: #fef7f7; color: var(--atm-red-dark); }

.atm-map-sidebar-empty {
    padding: 16px 14px;
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   SCHEDULE LAYOUT
══════════════════════════════════════════════════════════ */

.atm-schedule-wrap {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    font-family: inherit;
    color: var(--atm-text);
}

/* Sidebar */
.atm-sidebar { flex: 0 0 240px; min-width: 0; }

.atm-sidebar-inner {
    background: var(--atm-white);
    border-radius: var(--atm-radius);
    box-shadow: var(--atm-shadow);
    padding: 22px 20px;
    position: sticky;
    top: 20px;
}

/* Sidebar title — now a <button> that doubles as mobile toggle */
.atm-sidebar-title {
    display:         flex;
    align-items:     center;
    gap:             8px;
    width:           100%;
    font-size:       15px;
    font-weight:     700;
    color:           var(--atm-navy);
    margin:          0 0 18px;
    padding:         0 0 12px;
    border:          none;
    border-bottom:   2px solid var(--atm-red);
    background:      transparent;
    cursor:          default; /* desktop: not interactive */
    text-align:      left;
    text-transform:  uppercase;
    letter-spacing:  .05em;
}

/* Active filter count badge */
.atm-sidebar-active-badge {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    background:     var(--atm-red);
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    padding:        1px 6px;
    border-radius:  20px;
    line-height:    1.4;
    letter-spacing: 0;
    white-space:    nowrap;
}

/* Chevron — hidden on desktop, shown on mobile */
.atm-sidebar-chevron {
    display:    none;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .2s ease;
}

/* Collapsible body */
.atm-sidebar-body {
    overflow:   hidden;
    transition: max-height .28s ease, opacity .2s ease;
    max-height: 2000px; /* large enough for all content */
    opacity:    1;
}
.atm-sidebar-body.atm-collapsed {
    max-height: 0;
    opacity:    0;
}

/* Course Type sub-accordion */
.atm-filter-group--accordion { margin-bottom: 16px; }

.atm-accordion-toggle {
    display:        flex;
    align-items:    center;
    gap:            6px;
    width:          100%;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--atm-navy);
    background:     transparent;
    border:         none;
    padding:        0 0 8px;
    cursor:         pointer;
    text-align:     left;
}
.atm-accordion-toggle .atm-sidebar-chevron {
    display: block; /* always show chevron on this sub-toggle */
}
.atm-accordion-toggle[aria-expanded="true"] .atm-sidebar-chevron {
    transform: rotate(180deg);
}

.atm-accordion-body {
    overflow:   hidden;
    transition: max-height .24s ease, opacity .2s ease;
    max-height: 800px;
    opacity:    1;
}
.atm-accordion-body.atm-collapsed {
    max-height: 0;
    opacity:    0;
}

/* Mobile: make the sidebar toggle interactive */
@media (max-width: 840px) {
    .atm-sidebar-title {
        cursor:       pointer;
        margin-bottom: 0;
        padding:      12px 0;
    }
    .atm-sidebar-title .atm-sidebar-chevron {
        display: block;
    }
    .atm-sidebar-title[aria-expanded="true"] .atm-sidebar-chevron {
        transform: rotate(180deg);
    }
    /* When sidebar is collapsed, hide bottom border until open */
    .atm-sidebar-body.atm-collapsed + * { margin-top: 0; }
    .atm-sidebar-body:not(.atm-collapsed) { margin-top: 14px; }
}

.atm-filter-group { margin-bottom: 16px; }

.atm-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--atm-navy-mid);
    margin-bottom: 6px;
}

.atm-filter-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--atm-border);
    border-radius: var(--atm-radius);
    font-size: 14px;
    color: var(--atm-text);
    background: var(--atm-white);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231e2d3d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color .2s;
}

.atm-filter-group select:focus { outline: none; border-color: var(--atm-red); }

/* Course type checkbox list */
.atm-filter-type-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.atm-filter-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.atm-filter-type-row input[type=checkbox] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--atm-red);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.atm-filter-type-name { color: var(--atm-text); }

/* Filter action buttons */
.atm-filter-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--atm-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atm-btn-reset, .atm-btn-copy {
    width: 100%;
    padding: 9px 16px;
    border-radius: var(--atm-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--atm-border);
    transition: background .2s, border-color .2s, color .2s;
    text-align: center;
    box-sizing: border-box;
}

.atm-btn-reset { background: var(--atm-gray-bg); color: var(--atm-navy); }
.atm-btn-reset:hover { background: var(--atm-border); }

.atm-btn-copy { background: var(--atm-white); color: var(--atm-navy); }
.atm-btn-copy:hover { border-color: var(--atm-red); color: var(--atm-red); }

/* Main table area */
.atm-schedule-main { flex: 1; min-width: 0; }

.atm-table-header { margin-bottom: 10px; }

.atm-result-count { font-size: 13px; color: var(--atm-navy-mid); font-weight: 500; }

.atm-table-wrap {
    background: var(--atm-white);
    border-radius: var(--atm-radius);
    box-shadow: var(--atm-shadow);
    overflow: auto;
}

.atm-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.atm-table thead tr { background: var(--atm-navy); color: var(--atm-white); }

.atm-table thead th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: .03em;
}

.atm-sortable { cursor: pointer; user-select: none; transition: background .15s; }
.atm-sortable:hover { background: var(--atm-navy-mid); }
.atm-sortable.atm-sorted { background: var(--atm-red); }
.atm-sort-icon { opacity: .7; font-size: 11px; margin-left: 4px; }

.atm-table tbody tr { border-bottom: 1px solid var(--atm-border); transition: background .1s; }
.atm-table tbody tr:last-child { border-bottom: none; }
.atm-table tbody tr:hover { background: #fef7f7; }
.atm-table tbody td { padding: 13px 18px; vertical-align: middle; }

.atm-row-past td { color: var(--atm-gray); font-style: italic; }

/* Course type badges in table */
.atm-badges-cell { white-space: normal; }

.atm-ct-badge-link {
    display: inline-block;
    background: var(--atm-red);
    color: var(--atm-white) !important;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin: 2px 3px 2px 0;
    transition: background .2s;
}

.atm-ct-badge-link:hover { background: var(--atm-red-dark); color: var(--atm-white) !important; }

.atm-ct-badge-sm {
    display: inline-block;
    background: var(--atm-navy-mid);
    color: var(--atm-white);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 3px 2px 0;
}

.atm-loading { text-align: center; padding: 40px !important; color: var(--atm-gray); font-style: italic; }

.atm-no-results {
    background: var(--atm-gray-bg);
    border-radius: var(--atm-radius);
    padding: 32px;
    text-align: center;
    color: var(--atm-navy-mid);
    margin-top: 12px;
}

.atm-link-btn {
    background: none;
    border: none;
    color: var(--atm-red);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   COURSE TYPE CARDS  [hat_course_types]
══════════════════════════════════════════════════════════ */

.atm-course-grid {
    display: grid;
    grid-template-columns: repeat(var(--atm-cols, 4), minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.atm-course-card {
    background: #fff;
    border: 1px solid var(--atm-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s;
}

/* When course card is an <a> link */
a.atm-course-card--linked {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.atm-course-card--linked:hover {
    box-shadow: var(--atm-shadow);
    transform: translateY(-2px);
    transition: box-shadow .18s, transform .18s;
}

.atm-course-card:hover { box-shadow: var(--atm-shadow); }

.atm-card-footer {
    margin-top: auto;
    padding-top: 12px;
}

.atm-card-view-schedule {
    display:        inline-block;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--atm-red);
    transition:     color .15s;
}

a.atm-course-card--linked:hover .atm-card-view-schedule {
    color: var(--atm-red-dark);
}

.atm-card-top {
    background: #1c1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    position: relative;
    padding: 16px;
}

.atm-course-icon {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: #fff;
    color: #fff;
    display: block;
}

.atm-course-icon img { width: 100%; height: 100%; object-fit: contain; }

.atm-card-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.atm-card-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }

.atm-card-name { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; color: #111; }

.atm-card-duration { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; margin: 0 0 8px; }

.atm-card-desc { font-size: 12.5px; color: #555; line-height: 1.55; margin: 0; flex: 1; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .atm-course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .atm-map-outer { flex-direction: column; }
    .atm-map-sidebar { flex: none; width: 100%; }

    .atm-schedule-wrap { flex-direction: column; }
    .atm-sidebar { flex: none; width: 100%; }
    .atm-sidebar-inner { position: static; }

    .atm-city-label { font-size: 8px; }
}

@media (max-width: 540px) {
    .atm-course-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   SCHEDULE v3 — Card Grid View
   Matches CarForYou used-car card aesthetic
══════════════════════════════════════════════════════════ */

/* ── Layout shell (sidebar now on the RIGHT) ── */
.atm-schedule-wrap {
    display:        flex;
    gap:            28px;
    align-items:    flex-start;
    width:          100%;
}

/* Sidebar moves to the right */
.atm-sidebar {
    order:     2;
    flex:      0 0 260px;
    min-width: 0;
}

/* Main content takes the left */
.atm-schedule-main {
    order: 1;
    flex:  1;
    min-width: 0;
}

.atm-sidebar-inner {
    background:    var(--atm-white);
    border-radius: var(--atm-radius);
    box-shadow:    var(--atm-shadow);
    border-top:    3px solid var(--atm-red);
    padding:       20px 18px;
    position:      sticky;
    top:           24px;
}



/* Filter groups */
.atm-filter-group { margin-bottom: 18px; }

.atm-filter-group > label {
    display:       block;
    font-size:     11px;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:         var(--atm-navy-mid);
    margin-bottom: 6px;
}

.atm-filter-select {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--atm-border);
    border-radius: var(--atm-radius);
    font-size:     13px;
    color:         var(--atm-text);
    background:    #fff;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231e2d3d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right:  30px;
    cursor:         pointer;
    transition:     border-color .15s;
}

.atm-filter-select:focus {
    outline:      none;
    border-color: var(--atm-red);
    box-shadow:   0 0 0 2px rgba(232,21,42,.12);
}

/* Course type checkboxes */
.atm-filter-type-list  { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }

.atm-filter-type-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   13px;
    line-height: 1.3;
}

.atm-filter-type-row input[type=checkbox] {
    accent-color: var(--atm-red);
    width:  15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.atm-filter-type-name { color: var(--atm-text); }

/* Action buttons */
.atm-filter-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.atm-btn-reset {
    width:          100%;
    padding:        9px 0;
    background:     var(--atm-navy);
    color:          #fff;
    border:         none;
    border-radius:  var(--atm-radius);
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    transition:     background .15s;
}
.atm-btn-reset:hover { background: var(--atm-red); }

.atm-btn-copy {
    width:          100%;
    padding:        8px 0;
    background:     transparent;
    color:          var(--atm-navy-mid);
    border:         1px solid var(--atm-border);
    border-radius:  var(--atm-radius);
    font-size:      12px;
    cursor:         pointer;
    transition:     border-color .15s, color .15s;
}
.atm-btn-copy:hover { border-color: var(--atm-red); color: var(--atm-red); }

/* ── Cards header bar ── */
.atm-cards-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    min-height:      32px;
}

.atm-result-count {
    font-size:   13px;
    color:       var(--atm-navy-mid);
    font-weight: 600;
}

/* View toggle buttons */
.atm-view-toggle {
    display:       flex;
    gap:           2px;
    background:    var(--atm-gray-bg);
    border-radius: var(--atm-radius);
    padding:       3px;
}

.atm-view-btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         32px;
    height:        28px;
    background:    transparent;
    border:        none;
    border-radius: 4px;
    color:         var(--atm-navy-mid);
    cursor:        pointer;
    transition:    background .15s, color .15s;
}

.atm-view-btn:hover { background: var(--atm-border); color: var(--atm-navy); }

.atm-view-btn.atm-view-active {
    background: var(--atm-red);
    color:      #fff;
}

/* ── Card grid ── */
.atm-cards-grid-view {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   22px;
}

/* ── List view ── */
.atm-cards-list {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.atm-cards-list .atm-event-card {
    flex-direction: row;
    max-width:      100%;
}

.atm-cards-list .atm-event-card__top {
    flex:           0 0 120px;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    border-right:   none;
    border-bottom:  none;
    border-radius:  var(--atm-radius) 0 0 var(--atm-radius);
    padding:        20px 16px;
    min-height:     unset;
}

.atm-cards-list .atm-event-card__icon-wrap {
    width:  64px;
    height: 64px;
}

.atm-cards-list .atm-event-card__body {
    padding: 16px 20px;
}

/* ── Individual event card ── */
.atm-event-card {
    background:    var(--atm-white);
    border-radius: var(--atm-radius);
    box-shadow:    0 2px 10px rgba(30,45,61,.09);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    transition:    box-shadow .2s, transform .18s;
    border:        1px solid var(--atm-border);
    cursor:        pointer;
}

.atm-event-card:hover {
    box-shadow: 0 8px 28px rgba(30,45,61,.18);
    transform:  translateY(-3px);
}

.atm-event-card--past { opacity: .65; }

/* Card top: icon area + red label badge */
.atm-event-card__top {
    position:        relative;
    background:      var(--atm-gray-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         22px 16px 16px;
    border-bottom:   1px solid var(--atm-border);
    min-height:      110px;
}

/* Red label badge — top-left corner like the car listing tags */
.atm-event-card__label {
    position:       absolute;
    top:            10px;
    left:           10px;
    background:     var(--atm-red);
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  3px;
    line-height:    1.4;
    white-space:    nowrap;
}

/* Icon */
.atm-event-card__icon-wrap {
    width:   80px;
    height:  80px;
    display: flex;
    align-items:     center;
    justify-content: center;
}

.atm-event-icon {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* Card body */
.atm-event-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.atm-event-card__name {
    font-size:   15px;
    font-weight: 700;
    color:       var(--atm-navy);
    margin:      0 0 10px;
    line-height: 1.3;
}

/* Meta row: duration + city */
.atm-event-card__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px 14px;
    margin:    0 0 8px;
}

.atm-event-card__meta-item {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   12px;
    color:       #555;
}

.atm-event-card__meta--duration svg,
.atm-event-card__meta--city svg { color: var(--atm-red); flex-shrink: 0; }

/* Date row */
.atm-event-card__date {
    display:      flex;
    align-items:  center;
    gap:          5px;
    font-size:    12px;
    font-weight:  600;
    color:        var(--atm-red);
    margin-bottom:10px;
}

.atm-event-card__date svg { flex-shrink: 0; }

/* Description */
.atm-event-card__desc {
    font-size:    12.5px;
    color:        #666;
    line-height:  1.55;
    margin:       0 0 12px;
    flex:         1;
}

/* Footer: register button */
.atm-event-card__footer { margin-top: auto; }

.atm-event-card__register {
    display:        inline-block;
    padding:        8px 18px;
    background:     var(--atm-red);
    color:          #fff;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius:  var(--atm-radius);
    text-decoration: none;
    transition:     background .15s;
    position:       relative; /* ensure it sits above the card click zone */
    z-index:        1;
}

.atm-event-card__register:hover { background: var(--atm-red-dark); color: #fff; }

/* Loading / no-results */
.atm-card-loading {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     48px 0;
    color:       var(--atm-gray);
    font-size:   14px;
}

.atm-no-results {
    text-align: center;
    padding:    48px 20px;
    color:      var(--atm-navy-mid);
    font-size:  14px;
}

.atm-link-btn {
    background:  none;
    border:      none;
    color:       var(--atm-red);
    cursor:      pointer;
    font-size:   inherit;
    text-decoration: underline;
    padding:     0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .atm-cards-grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .atm-schedule-wrap { flex-direction: column; }
    .atm-sidebar { flex: none; width: 100%; order: 1; }
    .atm-schedule-main { order: 2; width: 100%; }
    .atm-sidebar-inner { position: static; }
    .atm-cards-grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .atm-cards-grid-view { grid-template-columns: 1fr; }
    .atm-cards-list .atm-event-card { flex-direction: column; }
    .atm-cards-list .atm-event-card__top {
        flex: none;
        border-radius: var(--atm-radius) var(--atm-radius) 0 0;
        min-height: 100px;
    }
}

/* ══════════════════════════════════════════════════════════
   SCHEDULE LIST MODE  [atm_schedule mode="list"]
   Compact event table for home page / sidebar use.
   No sort controls, no view toggle — links out to card page.
══════════════════════════════════════════════════════════ */

.atm-schedule-list-mode {
    display: block; /* single column, no sidebar */
}

.atm-list-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
    min-height:      28px;
}

/* Table */
.atm-list-table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--atm-white);
    border-radius:   var(--atm-radius);
    box-shadow:      var(--atm-shadow);
    overflow:        hidden;
    font-size:       14px;
}

.atm-list-table thead tr {
    background:  var(--atm-navy);
    color:       var(--atm-white);
}

.atm-list-table thead th {
    padding:     10px 14px;
    text-align:  left;
    font-size:   12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.atm-list-table tbody tr {
    border-bottom: 1px solid var(--atm-border);
    transition:    background .12s;
}

.atm-list-table tbody tr:last-child { border-bottom: none; }
.atm-list-table tbody tr:hover      { background: #fef7f7; }

.atm-list-table td {
    padding:        10px 14px;
    vertical-align: middle;
    color:          var(--atm-text);
}

/* Column-specific styles */
.atm-list-date {
    white-space: nowrap;
    font-weight: 600;
    color:       var(--atm-red);
    font-size:   13px;
    min-width:   110px;
}

.atm-list-city {
    font-weight: 600;
    white-space: nowrap;
}

.atm-list-city-link {
    color:           var(--atm-navy);
    text-decoration: none;
    transition:      color .15s;
}
.atm-list-city-link:hover { color: var(--atm-red); }

.atm-list-location {
    color:     #555;
    font-size: 13px;
}

.atm-list-courses {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
}

.atm-list-action {
    text-align: right;
    white-space: nowrap;
}

/* "View Classes →" button in list rows */
.atm-list-view-btn {
    display:        inline-block;
    padding:        5px 12px;
    background:     var(--atm-red);
    color:          var(--atm-white);
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius:  var(--atm-radius);
    text-decoration:none;
    transition:     background .15s;
    white-space:    nowrap;
}
.atm-list-view-btn:hover { background: var(--atm-red-dark); color: var(--atm-white); }

/* "View all N classes →" footer row */
.atm-list-more-row td {
    text-align:  center;
    padding:     14px;
    background:  var(--atm-gray-bg);
}

.atm-list-more-link {
    color:           var(--atm-red);
    font-weight:     600;
    font-size:       13px;
    text-decoration: none;
}
.atm-list-more-link:hover { color: var(--atm-red-dark); text-decoration: underline; }

/* Past event dimming */
.atm-list-table tr.atm-row-past { opacity: .6; }

/* Responsive: collapse to stacked cards on small screens */
@media (max-width: 640px) {
    .atm-list-table,
    .atm-list-table thead,
    .atm-list-table tbody,
    .atm-list-table th,
    .atm-list-table td,
    .atm-list-table tr { display: block; }

    .atm-list-table thead { display: none; } /* hide column headers */

    .atm-list-table tbody tr {
        margin-bottom:  12px;
        border:         1px solid var(--atm-border);
        border-radius:  var(--atm-radius);
        padding:        10px 14px;
    }

    .atm-list-table td {
        padding: 4px 0;
    }

    .atm-list-date    { font-size: 12px; }
    .atm-list-action  { text-align: left; padding-top: 8px; }
    .atm-list-courses { margin-top: 4px; }
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════ */

/* Prevent body scroll when lightbox is open */
body.atm-lightbox-open { overflow: hidden; }

/* Overlay */
#atm-lightbox-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(15, 20, 30, 0.72);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    backdrop-filter: blur(3px);
}

/* Panel */
#atm-lightbox-panel {
    background:    #fff;
    border-radius: var(--atm-radius) !important;
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    overflow-y:    auto;
    position:      relative;
    box-shadow:    0 24px 64px rgba(0,0,0,.32);
    animation:     atm-lb-in .18s ease;
}

@keyframes atm-lb-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Close button */
#atm-lightbox-close {
    position:    absolute;
    top:         14px;
    right:       16px;
    background:  rgba(0,0,0,.07);
    border:      none;
    border-radius: 50%;
    width:       32px;
    height:      32px;
    font-size:   18px;
    line-height: 1;
    cursor:      pointer;
    color:       #444;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 0 1px 0; /* nudge × glyph to true optical center */
    transition:  background .15s;
    z-index:     1;
}
#atm-lightbox-close:hover { background: rgba(0,0,0,.15); color: #111; }

/* Content wrapper */
#atm-lightbox-content { padding: 28px 28px 24px; }

/* Header: icon + title */
.atm-lb-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-bottom: 20px;
    padding-right: 24px; /* clear the X button */
}
.atm-lb-icon-wrap {
    width:        56px;
    height:       56px;
    background:   var(--atm-red, #c0392b);
    border-radius: var(--atm-radius);
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
    padding:      10px;
}
.atm-lb-icon {
    width:  100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* force icon to white */
}
.atm-lb-header-text { flex: 1; min-width: 0; }
.atm-lb-label {
    display:        inline-block;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--atm-red, #c0392b);
    margin-bottom:  4px;
}
.atm-lb-title {
    font-size:   20px;
    font-weight: 700;
    margin:      0;
    line-height: 1.2;
    color:       #111;
}

/* Meta grid: date / duration / city / location */
.atm-lb-meta-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px 16px;
    margin-bottom:         20px;
    padding:               14px 16px;
    background:            #f5f6f8;
    border-radius:         var(--atm-radius);
}
.atm-lb-meta-item {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   13px;
    color:       #444;
}
.atm-lb-meta-item svg { flex-shrink: 0; color: #888; }

/* Full description */
.atm-lb-desc {
    font-size:     14px;
    line-height:   1.65;
    color:         #333;
    margin:        0 0 20px;
}

/* Sibling classes section */
.atm-lb-siblings {
    border-top:    1px solid #eee;
    padding-top:   16px;
    margin-bottom: 20px;
}
.atm-lb-siblings-label {
    font-size:     11px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         #888;
    margin:        0 0 10px;
}
.atm-lb-siblings-list { display: flex; flex-direction: column; gap: 8px; }
.atm-lb-sibling {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   13px;
}
.atm-lb-sibling-name { flex: 1; color: #222; }
.atm-lb-sibling-dur  { font-size: 12px; color: #888; white-space: nowrap; }
.atm-lb-sibling-reg  {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          #fff;
    background:     var(--atm-red, #c0392b);
    padding:        4px 10px;
    border-radius:  20px;
    text-decoration: none;
    white-space:    nowrap;
    transition:     background .15s;
}
.atm-lb-sibling-reg:hover { background: var(--atm-red-dark, #96281b); }

/* Footer register button */
.atm-lb-footer {
    border-top:  1px solid #eee;
    padding-top: 18px;
    text-align:  right;
}
.atm-lb-register {
    display:        inline-block;
    padding:        11px 28px;
    background:     var(--atm-red, #c0392b);
    color:          #fff;
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius:  var(--atm-radius, 6px);
    text-decoration: none;
    transition:     background .15s, transform .12s;
}
.atm-lb-register:hover {
    background: var(--atm-red-dark, #96281b);
    transform:  translateY(-1px);
}

/* Card register button (direct link, bypasses lightbox) */
.atm-event-card__register--direct {
    pointer-events: all; /* override the span rule from before */
}

/* Responsive lightbox */
@media (max-width: 600px) {
    #atm-lightbox-panel  { border-radius: var(--atm-radius) var(--atm-radius) 0 0 !important; margin-top: auto; max-height: 85vh; }
    #atm-lightbox-overlay { align-items: flex-end; padding: 0; }
    #atm-lightbox-content { padding: 22px 18px 20px; }
    .atm-lb-meta-grid { grid-template-columns: 1fr; }
    .atm-lb-title { font-size: 17px; }
}

/* ── Course type card — modal trigger (no underline, cursor pointer) ──────── */
.atm-course-card--modal {
    cursor: pointer;
    text-decoration: none;
}
.atm-course-card--modal:focus-visible {
    outline: 2px solid var(--atm-red, #c0392b);
    outline-offset: 2px;
}

/* ── Rich-text lightbox description (full_description HTML content) ─────────  */
.atm-lb-desc--rich {
    margin: 16px 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: inherit;
}
.atm-lb-desc--rich p        { margin: 0 0 10px; }
.atm-lb-desc--rich p:last-child { margin-bottom: 0; }
.atm-lb-desc--rich ul,
.atm-lb-desc--rich ol       { margin: 0 0 10px; padding-left: 22px; }
.atm-lb-desc--rich li        { margin-bottom: 4px; }
.atm-lb-desc--rich strong    { font-weight: 700; }
.atm-lb-desc--rich em        { font-style: italic; }

/* ── Hunter Account lightbox — register button image ────────────────────────  */
.atm-account-img-wrap {
    margin: 0 0 20px;
    text-align: center;
}
.atm-account-register-vid {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
.atm-account-img-placeholder {
    padding: 14px 20px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    color: #999;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}