/* ============================================================
   Elementor Appointment Field  — appointment.css
   ============================================================ */

.eaf-wrap {
    font-family: inherit;
    max-width: 420px;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Calendar shell ──────────────────────────────────────── */
.eaf-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9ff;
    border: 1px solid #dde1f0;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.eaf-month {
    font-weight: 700;
    font-size: 15px;
    color: #1a202c;
    letter-spacing: .3px;
}

.eaf-nav {
    background: none;
    border: 1px solid #d0d5e8;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #5a67d8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
    padding: 0;
}
.eaf-nav:hover   { background: #5a67d8; color: #fff; border-color: #5a67d8; }
.eaf-nav:disabled { opacity: .35; cursor: default; }

/* ── Calendar grid ───────────────────────────────────────── */
.eaf-cal-body {
    border: 1px solid #dde1f0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    background: #fff;
}

.eaf-dn { /* day-name row */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #eef0fb;
}
.eaf-dn span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 0;
}

.eaf-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* individual day cell */
.eaf-d {
    text-align: center;
    padding: 9px 0;
    font-size: 13px;
    color: #2d3748;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background .12s;
    position: relative;
}

.eaf-d:hover:not(.eaf-d-off):not(.eaf-d-blocked):not(.eaf-d-empty) {
    background: #ebedff;
    border-color: #5a67d8;
    border-radius: 6px;
    z-index: 1;
}

/* today dot */
.eaf-d-today { font-weight: 700; color: #5a67d8; }
.eaf-d-today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px; height: 4px;
    background: #5a67d8;
    border-radius: 50%;
}

/* selected */
.eaf-d-sel {
    background: #5a67d8 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700;
    border-color: #5a67d8 !important;
}
.eaf-d-sel.eaf-d-today::after { background: #fff; }

/* disabled weekday / out of range */
.eaf-d-off {
    color: #cbd5e0;
    cursor: not-allowed;
    background: #fafafa;
}

/* fully blocked / unavailable — red strikethrough */
.eaf-d-blocked {
    color: #e53e3e !important;
    background: #fff5f5 !important;
    cursor: not-allowed;
    text-decoration: line-through;
}

.eaf-d-empty { cursor: default; }

/* ── Time slot section ───────────────────────────────────── */
.eaf-slots-section { margin-top: 18px; }

.eaf-date-label {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 10px;
}

.eaf-slots {
    display: grid;
    grid-template-columns: repeat( var(--cols, 3), 1fr );
    gap: 8px;
}

/* slot button */
.eaf-slot {
    border: 1.5px solid #d0d5e8;
    border-radius: 7px;
    background: #fff;
    color: #2d3748;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 4px;
    cursor: pointer;
    transition: all .13s;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eaf-slot:hover:not(.eaf-slot-booked) {
    background: #5a67d8;
    color: #fff;
    border-color: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(90,103,216,.25);
}

/* selected slot */
.eaf-slot-sel {
    background: #5a67d8 !important;
    color: #fff !important;
    border-color: #5a67d8 !important;
    font-weight: 700;
}

/* booked / taken — crossed out, cannot click */
.eaf-slot-booked {
    background: #f7fafc;
    color: #a0aec0;
    border-color: #e2e8f0;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .7;
}
.eaf-slot-booked::after {
    content: 'Booked';
    font-size: 9px;
    letter-spacing: .3px;
    text-decoration: none;
    color: #e53e3e;
    font-weight: 700;
    margin-top: 2px;
    display: block;
}

/* loading pulse */
.eaf-slots.eaf-loading {
    opacity: .4;
    pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 400px) {
    .eaf-wrap { max-width: 100%; }
    .eaf-slot { font-size: 12px; padding: 7px 2px; }
    .eaf-d    { font-size: 12px; padding: 7px 0; }
}

/* ── Past time slots (today only) ──────────────────────────
   Same visual weight as booked but with a grey "Past" label
   instead of a red "Booked" label.                          */
.eaf-slot-past {
    background: #f7fafc;
    color: #c0c8d8;
    border-color: #e8ecf4;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .6;
}
.eaf-slot-past::after {
    content: 'Past';
    display: block;
    font-size: 9px;
    letter-spacing: .3px;
    text-decoration: none;
    color: #a0aec0;
    font-weight: 700;
    margin-top: 2px;
}