/* ===================================================================
   COMPLETE & FINAL CSS (v27 - Dynamic Timezone & Header Marker)
   =================================================================== */

/* ===================================================================
   PART 1: LAYOUT & GENERAL FILTERS
   =================================================================== */
body.modal-open {
    overflow: hidden;
}
.page-template-template-find-a-teacher-php .container.nv-container,
.page-template-find-a-teacher .container.nv-container {
    max-width: 1200px !important;
}

.modern-filters { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: flex-start; padding: 20px 0; margin-bottom: 25px; }
.modern-filter-group { flex-grow: 0; flex-shrink: 0; width: 200px; }
.search-filter-group { flex-grow: 1; min-width: 250px; }
.teacher-filter-control { width: 100%; padding: 12px 15px; font-size: 16px; color: #333; background-color: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; text-align: left; }
.teacher-filter-control:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); }
.custom-select-wrapper { position: relative; }
.custom-select-wrapper select.teacher-filter-control { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; padding-right: 35px !important; cursor: pointer; }
.custom-select-wrapper::after { content: '\25BC'; font-size: 0.8em; color: #888; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.price-filter-container { position: relative; }
#price-filter-button { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 500; }
#price-filter-button svg { transition: transform 0.2s ease-in-out; stroke: #555; }
#price-filter-dropdown { display: none; position: absolute; top: calc(100% + 5px); left: 0; width: 300px; background: #fff; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 20px; z-index: 1000; }
#price-filter-dropdown h4 { margin-top: 0; margin-bottom: 25px; font-size: 16px; text-align: center; color: #333; }
#price-range-display { font-size: 15px; font-weight: 500; color: #333; text-align: center; margin-top: 15px; }
#price-slider { width: 100%; }
.noUi-target { background: #e0e0e0; height: 5px; border-radius: 3px; border: none; box-shadow: none; }
.noUi-connect { background: #007bff; }
.noUi-handle { border: 2px solid #fff; border-radius: 50%; background: #007bff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); cursor: grab; height: 18px; width: 18px; top: -7px; right: -9px; }


/* ===================================================================
   PART 2: TEACHER CARD STYLES
   =================================================================== */
#teacher-cards-container { display: flex; flex-direction: column; gap: 25px; max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.teacher-card-long { display: flex; gap: 25px; padding: 20px; border: 1px solid #e9ecef; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.teacher-card-long:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); }
.card-long-content { flex: 1 1 68%; min-width: 0; display: flex; gap: 20px; }
.card-long-right { flex: 0 0 30%; max-width: 320px; display: flex; flex-direction: column; }
.card-long-left { flex: 0 0 100px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.card-long-main { flex: 1 1 auto; min-width: 0; }
.teacher-photo-container { position: relative; width: 90px; height: 90px; }
.teacher-photo-long { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #f0f0f0; }
.country-flag-overlay { position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); object-fit: cover; overflow: hidden; }
.teacher-reviews-long { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.teacher-reviews-long .star-rating { font-size: 16px; color: #f5a623; }
.teacher-reviews-long .rating-value { font-weight: 700; color: #333; }
.teacher-reviews-long .review-count-long { color: #777; }
.main-info-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.teacher-name-long { font-size: 21px; font-weight: 700; margin: 0; color: #222; }
.verified-teacher-icon { display: inline-flex; align-items: center; justify-content: center; color: #0073e6; line-height: 1; cursor: pointer; }
.verified-teacher-icon svg { width: 21px; height: 21px; fill: currentColor; }
.teacher-badge { display: inline-flex; align-items: center; gap: 6px; background-color: #eaf6f5; color: #3b5956; padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; line-height: 1; }
.teacher-bio-long { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.teacher-extra-info { display: flex; flex-direction: column; gap: 15px; }
.info-item { display: flex; align-items: flex-start; }
.info-label { color: #495057; font-weight: 600; flex-shrink: 0; margin-right: 10px; min-width: 75px; font-size: 14px; padding-top: 5px; }
.specialties-display { display: flex; flex-wrap: wrap; gap: 8px; }
.specialty-tag { display: inline-flex; align-items: center; gap: 6px; background-color: #f1f3f5; color: #495057; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.specialty-icon { display: inline-flex; align-items: center; }
.specialty-icon svg { width: 16px; height: 16px; fill: #868e96; }
.language-display { display: flex; flex-wrap: wrap; align-items: center; column-gap: 15px; row-gap: 8px; font-size: 15px; color: #333; }
.language-item { background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.lang-name { font-weight: 600; }
.lang-level-tag.native { background-color: #e0f8f4; color: #009688; padding: 3px 10px; border-radius: 16px; font-size: 13px; font-weight: 700; }
.lang-level-bars { display: flex; align-items: center; gap: 2px; cursor: help; }
.lang-level-bars span { width: 3px; height: 12px; background-color: #ced4da; border-radius: 2px; display: block; }
.lang-level-bars[data-level="a1"] span, .lang-level-bars[data-level="a2"] span { background-color: #f76707; }
.lang-level-bars[data-level="b1"] span, .lang-level-bars[data-level="b2"] span { background-color: #17a2b8; }
.lang-level-bars[data-level="c1"] span, .lang-level-bars[data-level="c2"] span { background-color: #20c997; }
.card-long-right { background-color: transparent; padding: 0; position: relative; }
.teacher-video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 0; background-color: #000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.video-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: opacity 0.3s ease; }
.play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background-color: rgba(0,0,0,0.5); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.3s ease; }
.teacher-card-long:hover .play-icon-overlay { transform: translate(-50%, -50%) scale(1.1); background-color: rgba(220, 30, 30, 0.8); }
.video-iframe-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.video-iframe-container iframe { width: 100%; height: 100%; border: none; }
.teacher-card-long.video-active .video-iframe-container { opacity: 1; visibility: visible; }
.teacher-card-long.video-active .video-placeholder { opacity: 0; }
.booking-details { padding: 15px 10px 0 10px; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: auto; gap: 10px; }
.price-display-long { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 0; }
.price-display-long span { font-size: 14px; font-weight: 400; color: #777; }
.book-trial-btn { display: block; width: 100%; text-align: center; padding: 12px; background-color: #0073e6; color: #fff; font-weight: bold; font-size: 16px; border: none; border-radius: 8px; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; }
.book-trial-btn:hover { background-color: #0052cc; transform: scale(1.03); }
.favorite-btn { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0, 0, 0, 0.4); border: none; cursor: pointer; padding: 6px; border-radius: 50%; color: #fff; transition: all 0.2s ease; }
.favorite-btn:hover { background: rgba(0, 0, 0, 0.6); transform: scale(1.1); }
.favorite-btn.is-favorite { color: #e64980; }
.favorite-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.view-availability-btn { width: 100%; padding: 10px; font-size: 15px; font-weight: 600; color: #0073e6; background-color: #e7f5ff; border: 1px solid #bde0fe; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; order: -1; }
.view-availability-btn:hover { background-color: #d0ebff; border-color: #90caff; }
.card-mobile-footer { display: none; }

/* ===================================================================
   FINAL: "SCREENSHOT" CALENDAR DESIGN
   =================================================================== */

/* --- Buttons --- */
.am-button-gray { /* Book Trial button */
    background-color: #e9ecef; 
    border: none;
    padding: 10px 24px; 
    border-radius: 8px; 
    font-weight: 500; 
    cursor: pointer; 
    font-size: 14px; 
    color: #343a40; 
    transition: background-color 0.2s; 
}
.am-button-gray:hover { background-color: #dee2e6; }
.am-button-gray:disabled { background-color: #e9ecef; color: #adb5bd; cursor: not-allowed; opacity: 0.7; }

/* --- Modal Layout --- */
.availability-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(33, 37, 41, 0.75); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.availability-modal-content {
    background: #fff;
    border-radius: 16px; 
    padding: 20px;
    width: 100%;
    max-width: 980px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.close-modal-btn { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; font-size: 24px; color: #868e96; background-color: #f1f3f5; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 100; }
.close-modal-btn:hover { background-color: #e9ecef; color: #495057; transform: rotate(90deg); }

#modal-calendar-container {
    flex-grow: 1; 
    min-height: 0; 
    display: flex; 
    flex-direction: column;
}
.calendar-loader, .calendar-error { text-align: center; padding: 40px; font-size: 16px; color: #868e96; }

/* --- Header --- */
.calendar-top-header { flex-shrink: 0; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
.calendar-nav-btn { 
    background-color: #f1f3f5; /* Light gray background */
    border: 1px solid #dee2e6; 
    border-radius: 8px;
    width: 32px; 
    height: 32px; 
    font-size: 20px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.calendar-nav-btn.prev::after { content: '<'; }
.calendar-nav-btn.next::after { content: '>'; }
.range-label { font-size: 16px; font-weight: 500; color: #212529; margin: 0 15px; }
.calendar-sub-header { text-align: center; font-size: 12px; color: #868e96; margin-bottom: 10px; }

/* --- Calendar Grid --- */
.calendar-grid-wrapper { flex-grow: 1; overflow-y: auto; border-top: 1px solid #e9ecef; min-height: 0; }
.today-marker-row {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    padding-top: 5px;
}
.today-marker-cell {
    padding: 0 5px;
}
.today-marker-label {
    display: block;
    background-color: #e7f5ff;
    color: #1c7ed6;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 0;
    text-align: center;
    border-radius: 4px;
}
.calendar-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); }
.time-column { grid-column: 1 / 2; }
.day-column { grid-column: auto; display: flex; flex-direction: column; }
.day-header { text-align: center; padding: 4px 0; border-left: 1px solid #e9ecef; border-top: 1px solid #e9ecef; height: 50px; display: flex; flex-direction: column; justify-content: center; font-size: 12px; color: #868e96; position: sticky; top: 0; background: #fff; z-index: 10; }
.day-header.is-today { font-weight: bold; } /* Removed background, marker handles it */
.time-column .day-header { border-left: none; }
.timezone-header { font-size: 11px; font-weight: 500; color: #adb5bd; border-right: 1px solid #e9ecef; }
.time-label { height: 30px; font-size: 12px; color: #212529; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.time-slot { height: 30px; border-top: 1px solid #e9ecef; border-left: 1px solid #e9ecef; transition: all 0.2s ease; box-sizing: border-box; }
.time-column .time-slot { border-left: none; border-right: 1px solid #e9ecef; }

/* --- Slot Styles --- */
.time-slot.available { background-color: #28a745; cursor: pointer; }
.time-slot.selected { background-color: #218838; } 
.time-slot.booked {
    background-color: #f8d7da;
    cursor: not-allowed;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(0,0,0,0.05) 4px, rgba(0,0,0,0.05) 8px);
}
.time-slot.not-working { background-color: #fff; cursor: not-allowed; }

/* --- Footer --- */
.calendar-footer { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #e9ecef; margin-top: 15px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 15px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #495057; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch.available { background-color: #28a745; }
.swatch.booked { background-color: #f8d7da; }
.swatch.not-working { background-color: #fff; border: 1px solid #dee2e6; }


/* ===================================================================
   MOBILE RESPONSIVENESS
   =================================================================== */
@media (max-width: 992px) {
    .teacher-card-long { flex-direction: column; }
    .card-long-right { max-width: 450px; width: 100%; margin: 15px auto 0; }
}
@media (max-width: 768px) {
    .modern-filters { flex-direction: column; align-items: stretch; }
    .modern-filter-group { width: 100% !important; }
    .card-long-content { flex-direction: column; gap: 15px; }
    .card-long-left { flex-basis: auto; width: 100%; align-items: center; }
    .card-long-right { display: none; }
    .card-long-main { text-align: center; }
    .main-info-header { flex-direction: column; justify-content: center; gap: 5px; margin-bottom: 15px; }
    .teacher-bio-long, .info-item { text-align: left; }
    .teacher-extra-info { width: 100%; }
    .info-item { display: grid; grid-template-columns: 70px 1fr; align-items: flex-start; gap: 8px; }
    .info-label { padding-top: 1px; margin-right: 0; font-size: 13px; text-align: left; }
    .language-display, .specialties-display { font-size: 13px; flex-wrap: nowrap; white-space: nowrap; width: 100%; gap: 10px; display: flex; align-items: center; }
    .language-display .language-item, .specialties-display .specialty-tag { background: none; padding: 0; font-size: inherit; color: inherit; }
    .specialties-display .specialty-icon { display: none; }
    .language-display .language-item:nth-child(n + 3), .specialties-display .specialty-tag:nth-child(n + 3) { display: none; }
    .language-display::after, .specialties-display::after { display: none; content: '... +' calc(attr(data-total-count) - 2); background-color: #f1f3f5; color: #555; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 600; margin-left: 4px; }
    .language-display[data-total-count='3']::after, .specialties-display[data-total-count='3']::after { content: '... +1'; }
    .language-display[data-total-count='4']::after, .specialties-display[data-total-count='4']::after { content: '... +2'; }
    .language-display[data-total-count='5']::after, .specialties-display[data-total-count='5']::after { content: '... +3'; }
    .language-display[data-total-count='6']::after, .specialties-display[data-total-count='6']::after { content: '... +4'; }
    .language-display[data-total-count='3']::after, .language-display[data-total-count='4']::after, .language-display[data-total-count='5']::after, .language-display[data-total-count='6']::after, .specialties-display[data-total-count='3']::after, .specialties-display[data-total-count='4']::after, .specialties-display[data-total-count='5']::after, .specialties-display[data-total-count='6']::after { display: inline-block; }
    .card-mobile-footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
    .mobile-price { grid-column: 1 / 2; justify-self: start; font-size: 18px; font-weight: 700; color: #333; }
    .mobile-price span { font-size: 14px; font-weight: 400; color: #777; margin-left: 2px; }
    .card-mobile-footer .favorite-btn { grid-column: 2 / 3; justify-self: end; position: static; background: none; color: #adb5bd; padding: 5px; }
    .card-mobile-footer .favorite-btn.is-favorite { color: #e64980; }
    .card-mobile-footer .favorite-btn svg { width: 26px; height: 26px; }
    .mobile-availability-btn { grid-column: 3 / 4; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
    .mobile-book-btn { grid-column: 4 / 5; justify-self: end; padding: 12px 20px; background-color: #0073e6; color: #fff; font-weight: bold; font-size: 14px; border: none; border-radius: 8px; text-decoration: none; }
    .availability-modal-content { padding: 15px; }
    .range-label { font-size: 14px; }
    .calendar-grid-wrapper { overflow-x: auto; } 
    .calendar-grid { min-width: 600px; } 
    .time-column { position: sticky; left: 0; z-index: 5; background: #fff; }
}

a.teacher-profile-link,
a.teacher-profile-link:hover {
    text-decoration: none;
    color: inherit; /* This makes the name use the color from the h3 tag */
}