/*
 *  Styles for the Contact and Appointment pages, moved here from the <style>
 *  block that _section.php used to print on those two pages only.
 *
 *  Linked last in _head.php, after jquery.ui.css, so it sits after every other
 *  stylesheet exactly as the inline block did. index.php puts
 *  t01-section-<type> on <body>, and each rule is prefixed with
 *  :where(.t01-section-contact, .t01-section-appointment): it applies on those
 *  pages only, and :where() adds no specificity, so every rule wins and loses
 *  exactly as before. Cache-busted with FYN_ASSET_VERSION (functions.php).
 */

/* Time Slot Dropdown CSS */
:where(.t01-section-contact, .t01-section-appointment) .panel-dropdown { position: relative; width: 100%; }
:where(.t01-section-contact, .t01-section-appointment) .panel-dropdown.active .panel-dropdown-content { display: block !important; }

:where(.t01-section-contact, .t01-section-appointment) .time-slot {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: 0.2s;
}
:where(.t01-section-contact, .t01-section-appointment) .time-slot:hover { background-color: #f9f9f9; }
:where(.t01-section-contact, .t01-section-appointment) .time-slot.selected { background-color: #e0f3ff; border-left: 3px solid #00a8ff; }

:where(.t01-section-contact, .t01-section-appointment) .time-slot label { margin-bottom: 0; cursor: pointer; display: block; }
:where(.t01-section-contact, .t01-section-appointment) .time-slot input { display: none; }
:where(.t01-section-contact, .t01-section-appointment) .time-slot strong { display: block; color: #333; font-size: 14px; }
:where(.t01-section-contact, .t01-section-appointment) .time-slot span { font-size: 12px; color: #888; }

/* Datepicker Customization */
:where(.t01-section-contact, .t01-section-appointment) .ui-datepicker { z-index: 9999 !important; }
:where(.t01-section-contact, .t01-section-appointment) .ui-datepicker-unselectable { opacity: 0.5; background: #eee; }

/* This hides it by default */
:where(.t01-section-contact, .t01-section-appointment) .panel-dropdown-content { display: none; position: absolute; z-index: 100; width: 100%; background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

:where(.t01-section-contact, .t01-section-appointment) form input[type="text"],
:where(.t01-section-contact, .t01-section-appointment) form input[type="email"],
:where(.t01-section-contact, .t01-section-appointment) form select {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ccc;
    padding: 0 15px;
    color: #555;
    text-decoration: none;
    background: #fff;
    margin-bottom:15px;
}
