/* ===================================================================
   Giao diện cho Form Đăng ký (Simple Clinic Booking v2.5)
   =================================================================== */

/* --- Biến màu và Font chữ --- */
:root {
    --scb-primary-color: #0073aa;
    --scb-primary-hover: #005a87;
    --scb-accent-color: #e67e22;
    --scb-accent-hover: #d35400;
    
    /* Màu cho thông báo và lịch */
    --scb-success-bg: #eaf7ed;      /* Xanh nhạt */
    --scb-success-text: #1e6f39;
    --scb-success-border: #a3d9b1;
    --scb-error-bg: #fdecea;        /* ĐỎ NHẠT (thay cho hồng nhạt/xám) */
    --scb-error-text: #a4262c;
    --scb-error-border: #f1b7bc;
    --scb-warning-bg: #fff0f5;      /* Hồng */
    --scb-warning-text: #c51162;
    --scb-warning-border: #f8bbd0;

    --scb-border-color: #dde1e6;
    --scb-input-bg: #fff;
    --scb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Bố cục chung & các thành phần form --- */
.scb-booking-form-wrapper { max-width: 600px; margin: 2em auto; padding: 2.5em; border: 1px solid var(--scb-border-color); border-radius: 8px; font-family: var(--scb-font); background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
.scb-booking-form-wrapper p { margin: 0 0 1.5em 0; }
.scb-clinic-hours { background: #f7f9fc; padding: 1.5em; margin: -2.5em -2.5em 2em -2.5em; border-bottom: 1px solid var(--scb-border-color); border-radius: 8px 8px 0 0; }
.scb-clinic-hours h3 { margin-top: 0; color: var(--scb-primary-color); }
.scb-booking-form-wrapper label { display: block; font-weight: 600; margin-bottom: 0.5em; color: #333; }
.scb-booking-form-wrapper .required { color: var(--scb-error-text); margin-left: 2px; }
.scb-booking-form-wrapper input[type="text"], .scb-booking-form-wrapper input[type="email"], .scb-booking-form-wrapper input[type="tel"], .scb-booking-form-wrapper textarea { width: 100%; padding: 12px; border: 1px solid var(--scb-border-color); border-radius: 6px; background: var(--scb-input-bg); box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.scb-booking-form-wrapper input:focus, .scb-booking-form-wrapper textarea:focus { outline: none; border-color: var(--scb-primary-color); box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15); }
#scb-booking-date-display { cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
.scb-radio-group { display: flex; border: 1px solid var(--scb-border-color); border-radius: 6px; overflow: hidden; }
.scb-radio-label { flex: 1; text-align: center; padding: 12px; cursor: pointer; background: #f9f9f9; color: #555; font-weight: 500; transition: background-color 0.2s, color 0.2s; margin: 0; }
.scb-radio-label:not(:last-child) { border-right: 1px solid var(--scb-border-color); }
.scb-radio-label:hover { background-color: #fdf5ec; color: var(--scb-accent-hover); }
.scb-booking-form-wrapper input[type="radio"] { display: none; }
.scb-booking-form-wrapper input[type="radio"]:checked + .scb-radio-label { background-color: var(--scb-accent-color); border-color: var(--scb-accent-color); color: white; font-weight: 600; }
.scb-slot-notice { display: flex; align-items: center; gap: 0.5em; margin-top: 8px; padding: 0; font-size: 0.9em; font-weight: 500; min-height: 20px; }
.scb-slot-notice::before, .scb-messages::before { content: ''; flex-shrink: 0; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.scb-slot-notice.available { color: var(--scb-success-text); }
.scb-slot-notice.available::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231e6f39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>'); }
.scb-slot-notice.error { color: var(--scb-error-text); }
.scb-slot-notice.error::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23a4262c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>'); }
.scb-messages { display: flex; align-items: center; gap: 0.8em; padding: 1em; margin-top: 1.5em; border-radius: 6px; border: 1px solid transparent; font-weight: 500; }
.scb-messages::before { width: 20px; height: 20px; }
.scb-messages.success { background-color: var(--scb-success-bg); color: var(--scb-success-text); border-color: var(--scb-success-border); }
.scb-messages.success::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231e6f39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>'); }
.scb-messages.error { background-color: var(--scb-error-bg); color: var(--scb-error-text); border-color: var(--scb-error-border); }
.scb-messages.error::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23a4262c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>'); }
#scb-submit-btn { width: 100%; background-color: var(--scb-primary-color); color: white; padding: 14px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; font-weight: bold; transition: background-color 0.2s, transform 0.1s; }
#scb-submit-btn:hover:not(:disabled) { background-color: var(--scb-primary-hover); transform: translateY(-1px); }
#scb-submit-btn:disabled { background-color: #ccc; cursor: not-allowed; }
.ui-datepicker { z-index: 9999 !important; }

/* --- Giao diện Datepicker --- */
.ui-datepicker { width: 280px; padding: 1em; font-family: var(--scb-font); border: 1px solid var(--scb-border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 8px; }
.ui-datepicker-header { background: transparent; border: none; padding: 0 0 1em 0; position: relative; text-align: center; }
.ui-datepicker-title { font-size: 1.1em; font-weight: 600; }
.ui-datepicker-prev, .ui-datepicker-next { position: absolute; top: -2px; width: 32px; height: 32px; cursor: pointer; border-radius: 50%; transition: background-color 0.2s; }
.ui-datepicker-prev { left: 0; }
.ui-datepicker-next { right: 0; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { background: #f4f4f4; }
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>'); width: 16px; height: 16px; margin-top: 8px; margin-left: 8px; text-indent: -9999px; }
.ui-datepicker-next .ui-icon { transform: rotate(180deg); }
.ui-datepicker-calendar { width: 100%; border-collapse: collapse; }
.ui-datepicker-calendar thead th { padding-bottom: 0.8em; color: #888; font-size: 0.85em; font-weight: 500; text-transform: uppercase; }
.ui-datepicker-calendar tbody td { padding: 2px; }
.ui-datepicker-calendar .ui-state-default { display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; text-decoration: none; color: #333; border: 1px solid transparent; border-radius: 50%; transition: all 0.2s ease-in-out; }
.ui-datepicker-calendar .ui-state-hover { background: #fdf5ec; color: var(--scb-accent-hover); cursor: pointer; }
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active { background: var(--scb-accent-color) !important; color: #fff !important; border-color: var(--scb-accent-color) !important; }
.day-both-available .ui-state-default { background-color: var(--scb-success-bg) !important; border-color: var(--scb-success-border) !important; color: var(--scb-success-text) !important; font-weight: bold; }
.day-one-available .ui-state-default { background-color: var(--scb-warning-bg) !important; border-color: var(--scb-warning-border) !important; color: var(--scb-warning-text) !important; font-weight: bold; }
.day-full .ui-state-default { background-color: var(--scb-error-bg) !important; border-color: var(--scb-error-border) !important; color: var(--scb-error-text) !important; text-decoration: line-through; }
.unavailable-day .ui-state-default { text-decoration: line-through; color: #ccc; cursor: not-allowed; background: #f9f9f9; }
.unavailable-day .ui-state-hover { background: #f9f9f9; }

/* --- CSS cho Tooltip Chú thích màu sắc --- */
.scb-tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; vertical-align: middle; }
.scb-tooltip-icon { font-size: 0; border: none; width: 18px; height: 18px; display: inline-block; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: opacity 0.2s; }
.scb-tooltip:hover .scb-tooltip-icon { opacity: 0.8; }
.scb-tooltip .scb-tooltip-text { visibility: hidden; width: 240px; background-color: #333; color: #fff; text-align: left; border-radius: 6px; padding: 10px 15px; position: absolute; z-index: 1; bottom: 140%; left: 50%; margin-left: -120px; opacity: 0; transition: opacity 0.3s; font-weight: normal; font-size: 13px; line-height: 1.6; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.scb-tooltip .scb-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
.scb-tooltip:hover .scb-tooltip-text { visibility: visible; opacity: 1; }
.scb-tooltip-text .color-box { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); }
.scb-tooltip-text .color-box.green { background-color: var(--scb-success-bg); }
.scb-tooltip-text .color-box.pink { background-color: var(--scb-warning-bg); }
/* === THAY ĐỔI: Sửa lại màu xám thành màu đỏ nhạt === */
.scb-tooltip-text .color-box.red { background-color: var(--scb-error-bg); }