/* ========================================================= HELCU — PUBLIC DOCTOR PROFILE TRACK APPOINTMENT FILE ------------------------------------------------------- main/static/css/public_profile/doctor/track.css RESPONSIBILITIES ------------------------------------------------------- • Track appointment action button • Track appointment form • Tracking ID / Appointment ID input • Track result / status • Track-specific responsive styling • Mobile-first responsive layout BREAKPOINTS ------------------------------------------------------- Base : 0px → 767.98px Tablet : 768px → 1199.98px Desktop : 1200px+ ========================================================= */ /* ========================================================= TRACK COLORS ========================================================= */ :root { --hc-track: #6B8E23; --hc-track-dark: #5F7F1F; --hc-track-soft: rgba(107, 142, 35, 0.08); --hc-track-border-soft: rgba(107, 142, 35, 0.20); } /* ========================================================= BASE — MOBILE FIRST 0px → 767.98px ========================================================= */ /* ========================================================= TRACK STEP ========================================================= */ .hc-track-step { width: 100%; margin: 0; padding: 0; text-align: left; } /* ========================================================= TRACK FIELD ========================================================= */ .hc-track-field { width: 100%; margin: 0 0 14px; padding: 0; } .hc-track-field:last-child { margin-bottom: 0; } /* ========================================================= TRACK LABEL ========================================================= */ .hc-track-field .hc-booking-label { display: block; width: 100%; margin: 0 0 6px; text-align: left; } /* ========================================================= TRACK INPUT ========================================================= */ .hc-track-field .hc-booking-input { display: block; width: 100%; min-width: 0; } /* ========================================================= TRACK HELP TEXT ========================================================= */ .hc-track-field .hc-booking-help { width: 100%; margin-top: 6px; text-align: left; } /* ========================================================= TRACK ACTION BUTTON ========================================================= */ .hc-public-doctor-track-appointment { display: inline-flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 40px; margin: 0; padding: 9px 13px; border: 1px solid var(--hc-track); border-radius: 9px; background: var(--hc-track); color: #FFFFFF; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; box-shadow: 0 4px 11px rgba(107, 142, 35, 0.12); -webkit-tap-highlight-color: transparent; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .hc-public-doctor-track-appointment:hover { border-color: var(--hc-track-dark); background: var(--hc-track-dark); color: #FFFFFF; box-shadow: 0 6px 15px rgba(107, 142, 35, 0.17); } .hc-public-doctor-track-appointment:active { border-color: var(--hc-track-dark); background: var(--hc-track-dark); transform: translateY(1px); } .hc-public-doctor-track-appointment:focus { outline: none; } .hc-public-doctor-track-appointment:focus-visible { outline: 2px solid rgba(107, 142, 35, 0.35); outline-offset: 2px; } /* ========================================================= TRACK ACTION ICON ========================================================= */ .hc-public-doctor-action-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; font-size: 13px; line-height: 1; } .hc-public-doctor-action-icon i { display: block; font-size: inherit; line-height: 1; } /* ========================================================= TRACK RESULT ========================================================= */ .hc-track-result { width: 100%; margin: 0; padding: 0; text-align: left; } /* ========================================================= TRACK RESULT STATUS ========================================================= */ .hc-track-result-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; margin: 0 0 14px; padding: 11px 12px; background: #ECFDF5; border: 1px solid #D1FAE5; border-radius: 9px; box-sizing: border-box; } /* ========================================================= STATUS LABEL ========================================================= */ .hc-track-result-status-label { flex: 0 0 auto; font-size: 11px; line-height: 1.4; font-weight: 500; color: #64748B; white-space: nowrap; } /* ========================================================= STATUS VALUE ========================================================= */ .hc-track-result-status-value { min-width: 0; max-width: 70%; font-size: 12px; line-height: 1.4; font-weight: 700; color: #0F766E; text-align: right; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================= TRACK SUMMARY ========================================================= */ .hc-track-result .hc-booking-summary { width: 100%; margin: 0; padding: 0; } /* ========================================================= TRACK SUMMARY ROW ========================================================= */ .hc-track-result .hc-booking-summary-row { width: 100%; min-width: 0; } /* ========================================================= TRACK SUMMARY VALUE ========================================================= */ .hc-track-result .hc-booking-summary-row strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================= TRACK MESSAGE ========================================================= */ .hc-track-result-message { width: 100%; margin-top: 13px; padding: 10px 11px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; box-sizing: border-box; font-size: 11px; line-height: 1.55; font-weight: 400; color: #475569; text-align: left; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================= TRACK-SPECIFIC SWEETALERT ========================================================= */ .hc-public-doctor-swal-html .hc-track-step { width: 100%; margin: 0; text-align: left; } .hc-public-doctor-swal-html .hc-track-result { width: 100%; margin: 0; text-align: left; } /* ========================================================= TRACK INPUT FOCUS ========================================================= */ .hc-track-field .hc-booking-input:focus-visible { outline: 2px solid rgba(107, 142, 35, 0.35); outline-offset: 2px; } /* ========================================================= TRACK BUTTON / FORM SAFETY ========================================================= */ .hc-track-step input, .hc-track-step button { box-sizing: border-box; } /* ========================================================= TRACK LINKS ========================================================= */ .hc-track-step a { color: var(--hc-track); text-decoration: none; } .hc-track-step a:hover { color: var(--hc-track-dark); } /* ========================================================= TABLET 768px → 1199.98px ========================================================= */ @media (min-width: 768px) { /* ===================================================== TRACK FORM ===================================================== */ .hc-track-field { margin-bottom: 15px; } /* ===================================================== LABEL ===================================================== */ .hc-track-field .hc-booking-label { margin-bottom: 7px; } /* ===================================================== HELP TEXT ===================================================== */ .hc-track-field .hc-booking-help { margin-top: 7px; } /* ===================================================== TRACK BUTTON ===================================================== */ .hc-public-doctor-track-appointment { min-height: 42px; padding: 10px 15px; border-radius: 10px; font-size: 11px; } .hc-public-doctor-action-icon { font-size: 14px; } /* ===================================================== STATUS ===================================================== */ .hc-track-result-status { margin-bottom: 15px; padding: 12px 13px; border-radius: 10px; } .hc-track-result-status-label { font-size: 11.5px; } .hc-track-result-status-value { max-width: 72%; font-size: 12px; } /* ===================================================== MESSAGE ===================================================== */ .hc-track-result-message { margin-top: 14px; padding: 11px 12px; font-size: 11.5px; line-height: 1.55; } } /* ========================================================= DESKTOP 1200px+ ========================================================= */ @media (min-width: 1200px) { /* ===================================================== TRACK FORM ===================================================== */ .hc-track-field { margin-bottom: 16px; } /* ===================================================== LABEL ===================================================== */ .hc-track-field .hc-booking-label { margin-bottom: 7px; } /* ===================================================== HELP TEXT ===================================================== */ .hc-track-field .hc-booking-help { margin-top: 7px; } /* ===================================================== TRACK BUTTON ===================================================== */ .hc-public-doctor-track-appointment { min-height: 44px; padding: 11px 17px; border-radius: 10px; font-size: 11.5px; } .hc-public-doctor-action-icon { font-size: 14px; } /* ===================================================== STATUS ===================================================== */ .hc-track-result-status { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; } .hc-track-result-status-label { font-size: 12px; } .hc-track-result-status-value { max-width: 75%; font-size: 12.5px; } /* ===================================================== MESSAGE ===================================================== */ .hc-track-result-message { margin-top: 15px; padding: 11px 13px; font-size: 12px; line-height: 1.6; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .hc-track-step *, .hc-track-result *, .hc-public-doctor-track-appointment { transition: none !important; animation: none !important; } }