/* ========================================================= HELCU — PUBLIC PHARMACY PROFILE TRACK APPOINTMENT FILE ------------------------------------------------------- main/static/css/public_profile/pharmacy/track.css RESPONSIBILITIES ------------------------------------------------------- • Track appointment action button • Track appointment form • Tracking ID / Appointment ID input • Track result / status • Track-specific responsive styling • Track SweetAlert 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; padding: 0; color: #334155; font-size: 12px; font-weight: 650; line-height: 1.4; text-align: left; } /* ========================================================= TRACK INPUT ========================================================= */ .hc-track-field .hc-booking-input { display: block; width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 9px; background: #FFFFFF; color: #0F172A; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.4; box-sizing: border-box; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .hc-track-field .hc-booking-input::placeholder { color: #94A3B8; opacity: 1; } .hc-track-field .hc-booking-input:hover { border-color: #94A3B8; background: #FFFFFF; } .hc-track-field .hc-booking-input:focus { border-color: var(--hc-track); background: #FFFFFF; outline: none; box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.10); } /* ========================================================= TRACK HELP TEXT ========================================================= */ .hc-track-field .hc-booking-help { width: 100%; margin-top: 6px; padding: 0; color: #64748B; font-size: 10.5px; font-weight: 400; line-height: 1.5; text-align: left; } /* ========================================================= TRACK ACTION BUTTON ========================================================= */ .hc-public-pharmacy-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-pharmacy-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-pharmacy-track-appointment:active { border-color: var(--hc-track-dark); background: var(--hc-track-dark); transform: translateY(1px); } .hc-public-pharmacy-track-appointment:focus { outline: none; } .hc-public-pharmacy-track-appointment:focus-visible { outline: 2px solid rgba(107, 142, 35, 0.35); outline-offset: 2px; } /* ========================================================= TRACK ACTION ICON ========================================================= */ .hc-public-pharmacy-action-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; font-size: 13px; line-height: 1; } .hc-public-pharmacy-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 ========================================================= */ /* ========================================================= TRACK POPUP ========================================================= */ .hc-public-pharmacy-swal-popup { width: min(92vw, 430px) !important; max-width: 430px !important; margin: 0 auto !important; padding: 0 18px 0 !important; border: 0 !important; border-radius: 14px !important; background: #FFFFFF !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16) !important; } /* ========================================================= TRACK POPUP TITLE ========================================================= */ .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { margin: 0 !important; padding: 20px 0 7px !important; color: #0F172A !important; font-family: inherit !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; } /* ========================================================= TRACK HTML CONTAINER ========================================================= */ .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 4px 0 0 !important; color: #334155 !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.5 !important; text-align: left !important; box-sizing: border-box !important; } /* ========================================================= TRACK FORM WRAPPER ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-step { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; box-sizing: border-box !important; } /* ========================================================= TRACK FIELD WRAPPER ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-field { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= TRACK FORM LABEL ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-label { display: block !important; width: 100% !important; margin: 0 0 7px !important; padding: 0 !important; color: #334155 !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.4 !important; text-align: left !important; } /* ========================================================= TRACK FORM INPUT ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid #CBD5E1 !important; border-radius: 9px !important; background: #FFFFFF !important; color: #0F172A !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input::placeholder { color: #94A3B8 !important; opacity: 1 !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input:hover { border-color: #94A3B8 !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input:focus { border-color: var(--hc-track) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.10) !important; } /* ========================================================= TRACK HELP TEXT ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-help { display: block !important; width: 100% !important; margin: 6px 0 0 !important; padding: 0 !important; color: #64748B !important; font-size: 10.5px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; } /* ========================================================= TRACK POPUP ACTIONS ========================================================= */ .hc-public-pharmacy-swal-popup .swal2-actions { position: relative !important; z-index: 50 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 14px 0 18px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= TRACK CONFIRM BUTTON ========================================================= */ .hc-public-pharmacy-swal-popup .swal2-confirm { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 128px !important; min-height: 42px !important; margin: 0 !important; padding: 9px 17px !important; border: 1px solid #0F766E !important; border-radius: 9px !important; outline: none !important; background: #0F766E !important; color: #FFFFFF !important; font-family: inherit !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.2 !important; text-align: center !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(15, 118, 110, 0.16) !important; box-sizing: border-box !important; } .hc-public-pharmacy-swal-popup .swal2-confirm:hover { border-color: #115E59 !important; background: #115E59 !important; } .hc-public-pharmacy-swal-popup .swal2-confirm:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important; } /* ========================================================= TRACK CANCEL BUTTON ========================================================= */ .hc-public-pharmacy-swal-popup .swal2-cancel { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 90px !important; min-height: 42px !important; margin: 0 !important; padding: 9px 17px !important; border: 1px solid #CBD5E1 !important; border-radius: 9px !important; outline: none !important; background: #FFFFFF !important; color: #334155 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; cursor: pointer !important; box-shadow: none !important; box-sizing: border-box !important; } .hc-public-pharmacy-swal-popup .swal2-cancel:hover { border-color: #94A3B8 !important; background: #F8FAFC !important; color: #1E293B !important; } /* ========================================================= TRACK VALIDATION MESSAGE ========================================================= */ .hc-public-pharmacy-swal-popup .swal2-validation-message { width: 100% !important; margin: 8px 0 0 !important; padding: 8px 10px !important; border: 1px solid #FECACA !important; border-radius: 8px !important; background: #FEF2F2 !important; color: #B91C1C !important; font-size: 10.5px !important; line-height: 1.45 !important; text-align: left !important; box-sizing: border-box !important; } /* ========================================================= TRACK RESULT SWEETALERT ========================================================= */ .hc-public-pharmacy-swal-html .hc-track-result { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* ========================================================= 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-pharmacy-track-appointment { min-height: 42px; padding: 10px 15px; border-radius: 10px; font-size: 11px; } .hc-public-pharmacy-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; } /* ===================================================== TRACK POPUP ===================================================== */ .hc-public-pharmacy-swal-popup { width: min(90vw, 450px) !important; max-width: 450px !important; padding: 0 20px !important; border-radius: 15px !important; } .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { padding: 22px 0 8px !important; font-size: 18px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input { min-height: 45px !important; padding: 10px 13px !important; font-size: 12px !important; } .hc-public-pharmacy-swal-popup .swal2-actions { gap: 10px !important; padding: 14px 0 18px !important; } } /* ========================================================= 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-pharmacy-track-appointment { min-height: 44px; padding: 11px 17px; border-radius: 10px; font-size: 11.5px; } .hc-public-pharmacy-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; } /* ===================================================== TRACK POPUP ===================================================== */ .hc-public-pharmacy-swal-popup { width: min(88vw, 470px) !important; max-width: 470px !important; padding: 0 22px !important; border-radius: 15px !important; } .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { padding: 23px 0 9px !important; font-size: 18px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input { min-height: 46px !important; padding: 11px 13px !important; font-size: 12.5px !important; } .hc-public-pharmacy-swal-popup .swal2-actions { gap: 10px !important; padding: 15px 0 19px !important; } } /* ========================================================= MOBILE 0px → 480px ========================================================= */ @media (max-width: 480px) { .hc-public-pharmacy-swal-popup { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; padding: 0 14px !important; border-radius: 13px !important; } .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { padding: 17px 0 6px !important; font-size: 16px !important; } .hc-public-pharmacy-swal-html { padding: 3px 0 0 !important; font-size: 11.5px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-label { margin-bottom: 6px !important; font-size: 11.5px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input { min-height: 42px !important; padding: 9px 11px !important; border-radius: 8px !important; font-size: 11.5px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-help { margin-top: 5px !important; font-size: 10px !important; } .hc-public-pharmacy-swal-popup .swal2-actions { justify-content: center !important; gap: 9px !important; padding: 12px 0 15px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .hc-public-pharmacy-swal-popup .swal2-confirm { min-width: 118px !important; min-height: 40px !important; padding: 9px 14px !important; font-size: 11px !important; } .hc-public-pharmacy-swal-popup .swal2-cancel { min-width: 82px !important; min-height: 40px !important; padding: 9px 14px !important; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE 0px → 360px ========================================================= */ @media (max-width: 360px) { .hc-public-pharmacy-swal-popup { width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; padding: 0 12px !important; } .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { padding: 15px 0 5px !important; font-size: 15px !important; } .hc-public-pharmacy-swal-html .hc-track-field .hc-booking-input { min-height: 40px !important; padding: 8px 10px !important; font-size: 11px !important; } .hc-public-pharmacy-swal-popup .swal2-actions { gap: 8px !important; padding: 11px 0 14px !important; } .hc-public-pharmacy-swal-popup .swal2-confirm { min-width: 110px !important; min-height: 39px !important; padding: 8px 12px !important; font-size: 10.5px !important; } .hc-public-pharmacy-swal-popup .swal2-cancel { min-width: 78px !important; min-height: 39px !important; padding: 8px 12px !important; font-size: 10.5px !important; } } /* ========================================================= SHORT VIEWPORT ========================================================= */ @media (max-height: 600px) { .hc-public-pharmacy-swal-popup .hc-public-pharmacy-swal-title { padding-top: 12px !important; padding-bottom: 5px !important; } .hc-public-pharmacy-swal-popup .swal2-actions { gap: 8px !important; padding-top: 8px !important; padding-bottom: 10px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .hc-track-step *, .hc-track-result *, .hc-public-pharmacy-track-appointment, .hc-public-pharmacy-swal-popup .hc-booking-input { transition: none !important; animation: none !important; } }