/* ===== Đặt Lịch Khám v3.1 ===== */

.dlk-wrap *, .dlk-wrap *::before, .dlk-wrap *::after { box-sizing: border-box; }

.dlk-wrap {
    max-width: 600px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1a1a2e;
}
.dlk-sub   { font-size:14px; color:#2980b9; margin:0 0 20px; }
.dlk-label { font-size:13px; color:#2980b9; font-weight:600; margin:0 0 10px; }

/* Doctor card & selector */
.dlk-field-doctor { margin-bottom: 2px; }
.dlk-wrap .dlk-form select.dlk-doctor-select {
    font-weight: 600;
    color: #1a3a5c;
    background-color: #fff;
    border: 1.5px solid #bcd5ea;
}
.dlk-wrap .dlk-form select.dlk-doctor-select:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41,128,185,.15);
}
.dlk-doctor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f0f7ff;
    border: 1px solid #d0e8f8;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 4px;
    transition: all .2s ease;
}
.dlk-doctor-img  { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid #2980b9; flex-shrink:0; }
.dlk-doctor-avatar-fallback {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eaf2fb;
    border: 2px solid #2980b9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.dlk-doctor-info { flex: 1; min-width: 0; }
.dlk-doctor-name { font-size:15px; font-weight:700; color:#1a3a5c; margin:0 0 2px; }
.dlk-doctor-spec { font-size:13px; color:#2980b9; font-weight:500; margin:0; }

/* Notice */
.dlk-notice  { padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:16px; }
.dlk-success { background:#eafaf1; color:#1e8449; border:1px solid #a9dfbf; }
.dlk-error   { background:#fdecea; color:#c0392b; border:1px solid #f5b7b1; }

/* Form */
.dlk-form { display:flex; flex-direction:column; gap:12px; }

.dlk-wrap .dlk-form input[type="text"],
.dlk-wrap .dlk-form input[type="tel"],
.dlk-wrap .dlk-form input[type="email"],
.dlk-wrap .dlk-form input[type="date"],
.dlk-wrap .dlk-form input[type="number"],
.dlk-wrap .dlk-form select,
.dlk-wrap .dlk-form textarea {
    width:100%; padding:11px 14px; border:1.5px solid #d5dbe5; border-radius:8px;
    font-size:14px; color:#1a1a2e; background:#fff; outline:none;
    transition:border-color .2s, box-shadow .2s; font-family:inherit; margin:0;
}
.dlk-wrap .dlk-form input:focus,
.dlk-wrap .dlk-form select:focus,
.dlk-wrap .dlk-form textarea:focus { border-color:#2980b9; box-shadow:0 0 0 3px rgba(41,128,185,.12); }
.dlk-wrap .dlk-form .dlk-invalid   { border-color:#e74c3c !important; box-shadow:0 0 0 3px rgba(231,76,60,.1) !important; }
.dlk-wrap .dlk-form select {
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; cursor:pointer;
}
.dlk-wrap .dlk-form textarea { resize:vertical; min-height:88px; line-height:1.5; }

/* ══════════════════════════════════
   DATEPICKER DROPDOWN
══════════════════════════════════ */
.dlk-datepicker-wrap {
    position: relative;
    width: 100%;
}

/* Ô input giả – click để mở */
.dlk-datepicker-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d5dbe5;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    color: #aaa;
}
.dlk-datepicker-input.has-date { color: #1a1a2e; }
.dlk-datepicker-input.open,
.dlk-datepicker-input:hover    { border-color: #2980b9; }
.dlk-datepicker-input.open     { box-shadow: 0 0 0 3px rgba(41,128,185,.12); border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color: transparent; }
.dlk-datepicker-input.dlk-invalid { border-color:#e74c3c !important; box-shadow:0 0 0 3px rgba(231,76,60,.1) !important; }
.dlk-datepicker-input.dlk-disabled { background:#f8fafc; color:#718096; }

.dlk-datepicker-icon { font-size:16px; flex-shrink:0; margin-left:8px; }

/* Dropdown calendar 2 tuần */
.dlk-calendar-wrap {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    border: 1.5px solid #2980b9;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    overflow-y: auto;
    max-height: 440px;
}

.dlk-cal-sec {
    border-bottom: 1px dashed #d5dbe5;
}
.dlk-cal-sec:last-child {
    border-bottom: none;
}

/* Header tuần */
.dlk-cal-header {
    display: flex; align-items: center; justify-content: center;
    background: #2980b9; color: #fff; padding: 8px 12px;
    text-align: center;
}
.dlk-cal-title { font-size:13px; font-weight:700; color:#fff; }

/* Thứ */
.dlk-cal-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    background: #eaf2fb;
    border-bottom: 1px solid #d5dbe5;
    margin:0; padding:0;
}
.dlk-cal-weekdays span {
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:#2980b9; padding:8px 0; margin:0;
}
.dlk-cal-weekdays span:last-child { color:#e74c3c; }

/* Ngày */
.dlk-cal-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    padding: 6px; gap: 2px; margin:0;
}
.dlk-cal-empty { height:40px; }
.dlk-cal-day {
    display: flex !important; align-items:center; justify-content:center;
    height:40px; font-size:14px; font-weight:500;
    border-radius:6px; cursor:default;
    transition:background .12s, color .12s;
    position:relative; margin:0; padding:0; line-height:1;
    float: none !important;
}

/* Có lịch – sáng nền xanh nhạt */
.dlk-cal-day.active {
    background: #d6eaf8;
    color: #154360;
    font-weight: 700;
    cursor: pointer;
}
.dlk-cal-day.active:hover { background:#2980b9; color:#fff; }
.dlk-cal-day.active::after {
    content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:#2980b9;
}
.dlk-cal-day.active:hover::after { background:#fff; }

/* Đã chọn */
.dlk-cal-day.selected {
    background: #2980b9 !important; color:#fff !important;
    font-weight:700; cursor:pointer;
}
.dlk-cal-day.selected::after { background:#fff !important; }

/* Không có lịch – tối */
.dlk-cal-day.inactive { color:#ccc; background:transparent; }

/* Đang chờ load data – shimmer nhẹ */
.dlk-cal-day.loading {
    color: #ddd;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: dlk-shimmer 1.2s infinite;
}
@keyframes dlk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Quá khứ */
.dlk-cal-day.past { color:#ddd; background:transparent; }

/* Submit */
.dlk-wrap .dlk-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:#27ae60; color:#fff; border:none; border-radius:50px;
    padding:13px 32px; font-size:14px; font-weight:700; letter-spacing:.5px;
    cursor:pointer; transition:background .2s, transform .1s;
    align-self:center; margin:8px auto 0;
}
.dlk-wrap .dlk-btn:hover   { background:#219a52; }
.dlk-wrap .dlk-btn:active  { transform:scale(.98); }
.dlk-wrap .dlk-btn:disabled { background:#95a5a6; cursor:not-allowed; }

@media (max-width:480px) {
    .dlk-cal-day, .dlk-cal-empty { height:36px; }
    .dlk-cal-day { font-size:13px; }
}

/* ══════════════════════════════════════════
   FORM TRA CỨU LỊCH
══════════════════════════════════════════ */
.dlk-tracuu-wrap .dlk-title {
    font-size: 22px; font-weight: 700; color: #1a3a5c; margin: 0 0 6px;
}
.dlk-tracuu-wrap .dlk-btn {
    padding: 11px 22px; font-size: 14px; border-radius: 8px; margin: 0;
}

/* Card kết quả */
.dlk-tc-card {
    background: #fff;
    border: 1.5px solid #d5dbe5;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: box-shadow .15s;
}
.dlk-tc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.dlk-tc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.dlk-tc-info { flex: 1; }

.dlk-tc-name {
    font-size: 16px; font-weight: 700; color: #1a3a5c;
    margin: 0 0 6px;
}
.dlk-tc-bs, .dlk-tc-time, .dlk-tc-lydo, .dlk-tc-created {
    font-size: 13px; color: #555; margin: 0 0 4px;
}
.dlk-tc-time    { color: #2980b9; font-weight: 600; }
.dlk-tc-created { color: #aaa; font-size: 12px; margin-top: 6px; }

.dlk-tracuu-form input[type="tel"] {
    padding: 11px 14px; border: 1.5px solid #d5dbe5; border-radius: 8px;
    font-size: 14px; outline: none; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.dlk-tracuu-form input[type="tel"]:focus {
    border-color: #2980b9; box-shadow: 0 0 0 3px rgba(41,128,185,.12);
}

.dlk-tc-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.dlk-btn-cancel {
    background: #fff;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.dlk-btn-cancel:hover {
    background: #e74c3c;
    color: #fff;
}

.dlk-btn-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Popup Thông Báo */
.dlk-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: dlkFadeIn .2s ease;
}
.dlk-modal-box {
    background: #fff;
    padding: 28px 24px;
    border-radius: 12px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: dlkPopIn .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dlk-modal-icon {
    width: 56px;
    height: 56px;
    background: #eafaf1;
    color: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    margin: 0 auto 14px;
    border: 2px solid #a9dfbf;
}
.dlk-modal-title {
    margin: 0 0 10px;
    font-size: 18px;
    color: #1e8449;
    font-weight: 700;
}
.dlk-modal-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.dlk-modal-btn {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.dlk-modal-btn:hover {
    background: #219150;
}

/* Modal Error Styles */
.dlk-modal-icon-error {
    background: #fdecea !important;
    color: #e74c3c !important;
    border-color: #f5b7b1 !important;
}
.dlk-modal-title-error {
    color: #c0392b !important;
}
.dlk-modal-btn-error {
    background: #e74c3c !important;
}
.dlk-modal-btn-error:hover {
    background: #c0392b !important;
}

@keyframes dlkFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlkPopIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════
   LOADING INDICATOR FOR FORM SLOTS
   ══════════════════════════════════════════ */
.dlk-form-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f0f7ff;
    border: 1.5px solid #bce0fd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #2980b9;
    margin: 4px 0 8px 0;
    animation: dlkFadeIn 0.2s ease;
}

.dlk-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(41, 128, 185, 0.2);
    border-top-color: #2980b9;
    border-radius: 50%;
    animation: dlkSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes dlkSpin {
    to { transform: rotate(360deg); }
}

.dlk-form.dlk-is-loading .dlk-gio {
    opacity: 0.75;
    background-color: #f8fafc;
}