/**
 * EG Care Frontend Stylesheet
 */

/* Main Container */
.eg-care-registration-container {
	max-width: 800px;
	margin: 40px auto;
	padding: 40px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 118, 110, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #334155;
	border: 1px solid #f1f5f9;
}

/* Header styling */
.eg-care-register-header {
	text-align: center;
	margin-bottom: 40px;
}

.eg-care-register-tagline {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #0d9488;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 8px;
}

.eg-care-register-title {
	font-size: 32px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px 0;
	letter-spacing: -0.5px;
}

.eg-care-register-desc {
	font-size: 15px;
	color: #64748b;
	margin: 0;
}

/* Form sections */
.eg-care-card-section {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 30px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.eg-care-card-section:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.eg-care-section-title {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px 0;
}

.eg-care-step-num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #0f766e;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	margin-right: 10px;
}

/* Fields Grid & inputs */
.eg-care-fields-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.eg-care-fields-grid.profile-fields,
.eg-care-fields-grid.meta-fields {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
	.eg-care-fields-grid {
		grid-template-columns: 1fr !important;
	}
	.eg-care-field.span-full {
		grid-column: span 1 !important;
	}
}

.eg-care-field {
	display: flex;
	flex-direction: column;
}

.eg-care-field.span-full {
	grid-column: span 2;
}

.eg-care-field label {
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 6px;
}

.eg-care-field input[type="text"],
.eg-care-field input[type="email"],
.eg-care-field input[type="password"],
.eg-care-field input[type="number"],
.eg-care-field input[type="date"],
.eg-care-field input[type="tel"],
.eg-care-field select,
.eg-care-field textarea {
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	background-color: #ffffff;
	color: #1e293b;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.eg-care-field input:focus,
.eg-care-field select:focus,
.eg-care-field textarea:focus {
	border-color: #0f766e;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
	outline: none;
}

/* Custom Modern File Upload & Toggle Buttons Styling */
.eg-care-hidden-file-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 10;
}

.eg-care-modern-upload-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 5px;
	position: relative;
}

.eg-care-modern-upload-label {
	padding: 8px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #f8fafc;
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-block;
	transition: all 0.2s ease;
	user-select: none;
}

.eg-care-modern-upload-label:hover {
	background-color: #cbd5e1;
	border-color: #94a3b8;
}

/* display:inline-block above beats the browser's own rule for [hidden], so
   the label needs to be told again once the file cap is reached. */
.eg-care-modern-upload-label[hidden] {
	display: none;
}

.eg-care-file-name {
	font-size: 13px;
	color: #64748b;
}

/* The reports chosen so far, one row each, with a way to take one back off. */
.eg-care-file-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.eg-care-file-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background-color: #f8fafc;
}

.eg-care-file-row-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eg-care-file-row-size {
	flex: 0 0 auto;
	font-size: 12px;
	color: #64748b;
}

.eg-care-file-list button.eg-care-file-row-remove {
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 50% !important;
	background-color: #ffffff !important;
	color: #64748b !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: all 0.15s !important;
}

.eg-care-file-list button.eg-care-file-row-remove:hover {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
	color: #dc2626 !important;
}

/* Modern Toggle Buttons */
.eg-care-toggle-buttons {
	display: flex;
	gap: 8px;
	margin-top: 5px;
}

.eg-care-toggle-btn {
	padding: 8px 18px;
	border: 1px solid #cbd5e1;
	background-color: #f8fafc;
	color: #475569;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.25s ease;
}

.eg-care-toggle-btn:hover {
	background-color: #f1f5f9;
	color: #1e293b;
	border-color: #94a3b8;
}

.eg-care-toggle-btn.active {
	background-color: #0f766e;
	color: #ffffff;
	border-color: #0f766e;
	box-shadow: 0 4px 10px rgba(15, 118, 110, 0.2);
}

/* Modern Attachment Box */
.eg-care-modern-attachment-box {
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	background-color: #f8fafc;
	padding: 20px;
	text-align: left;
	position: relative;
	transition: border-color 0.2s;
}

.eg-care-modern-attachment-box:hover {
	border-color: #0d9488;
}

.eg-care-attachment-uploader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}

.eg-care-attachment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}

.eg-care-attachment-label {
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.eg-care-attachment-help {
	font-size: 12px;
	color: #64748b;
	margin: 0;
}

/* Submit Block */
.eg-care-submit-wrap {
	text-align: center;
	margin-top: 30px;
}

.eg-care-btn-register {
	background-color: #0f766e !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3);
	transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.eg-care-btn-register:hover {
	background-color: #0d9488 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
}

.eg-care-btn-register:active {
	transform: translateY(0);
}

/* Alerts */
.eg-care-alert {
	display: flex;
	align-items: flex-start;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 30px;
	color: #991b1b;
}

.eg-care-alert-icon {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	flex-shrink: 0;
	color: #dc2626;
}

.eg-care-alert-content {
	font-size: 14px;
}

.eg-care-alert-content ul {
	margin: 5px 0 0 0;
	padding-left: 20px;
}

/* Success Card */
.eg-care-success-card {
	text-align: center;
	padding: 40px 20px;
}

.eg-care-success-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #dcfce7;
	color: #15803d;
	margin-bottom: 24px;
}

.eg-care-success-icon svg {
	width: 32px;
	height: 32px;
}

.eg-care-success-card h2 {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 12px 0;
}

.eg-care-success-msg {
	font-size: 16px;
	color: #475569;
	max-width: 500px;
	margin: 0 auto 16px auto;
	line-height: 1.6;
}

.eg-care-success-sub {
	font-size: 13px;
	color: #94a3b8;
	margin: 0;
}

/* ==========================================================================
   Phase 4: Patient Booking Steps & Checkout Styles
   ========================================================================== */

/* Step Progress Indicator Bar */
.eg-care-booking-steps-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	background: #ffffff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.eg-care-step-indicator {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #64748b;
	font-weight: 600;
	font-size: 14px;
	transition: color 0.3s;
}

.eg-care-step-indicator .step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #e2e8f0;
	color: #64748b;
	font-size: 12px;
	transition: all 0.3s;
}

.eg-care-step-indicator.active {
	color: #0f766e;
}

.eg-care-step-indicator.active .step-num {
	background-color: #0f766e;
	color: #ffffff;
}

.eg-care-step-line {
	flex-grow: 1;
	height: 2px;
	background-color: #e2e8f0;
	margin: 0 15px;
}

/* Specialties Grid (Step 1) */
.eg-care-specialties-container {
	animation: fadeIn 0.4s ease-out;
}

.eg-care-specialties-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.eg-care-specialty-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px 16px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.eg-care-specialty-card:hover {
	transform: translateY(-3px);
	border-color: #0d9488;
	box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.1);
}

.eg-care-specialty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #f0fdfa;
	margin-bottom: 16px;
	transition: background-color 0.2s;
}

.eg-care-specialty-card:hover .eg-care-specialty-icon {
	background-color: #ccfbf1;
}

.eg-care-specialty-name {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
}

/* Step 2: Doctors List & Filters Grid Layout */
.eg-care-step2-wrapper {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 30px;
	animation: fadeIn 0.4s ease-out;
}

@media (max-width: 768px) {
	.eg-care-step2-wrapper {
		grid-template-columns: 1fr;
	}
}

.eg-care-filters-sidebar {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	height: fit-content;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.eg-care-filters-sidebar h3 {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 20px 0;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 10px;
}

.eg-care-filter-group {
	margin-bottom: 20px;
}

.eg-care-filter-group label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #475569;
	margin-bottom: 8px;
}

.eg-care-filter-group input[type="text"],
.eg-care-filter-group select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 13px;
	color: #334155;
	background-color: #ffffff;
}

.eg-care-filter-group input[type="range"] {
	width: 100%;
	accent-color: #0f766e;
	cursor: pointer;
}

.eg-care-filter-group .range-values {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #64748b;
	margin-top: 4px;
}

.eg-care-filter-group.checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.eg-care-filter-group.checkbox input[type="checkbox"] {
	accent-color: #0f766e;
}

/* A group heading that is not a <label>, because these groups hold several
   checkboxes rather than one field. */
.eg-care-filter-legend {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #475569;
	margin-bottom: 8px;
}

.eg-care-filter-checks {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-height: 210px;
	overflow-y: auto;
}

.eg-care-filter-group label.eg-care-filter-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	cursor: pointer;
}

.eg-care-filter-check input[type="checkbox"] {
	flex: 0 0 auto;
	accent-color: #0f766e;
	margin: 0;
}

.eg-care-filter-loading {
	font-size: 12px;
	color: #94a3b8;
	margin: 0;
}

/* "311 consultants available", beside the list heading. */
.eg-care-result-count {
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
	background-color: #f1f5f9;
	border-radius: 999px;
	padding: 3px 10px;
}

.eg-care-result-count[hidden] {
	display: none;
}

.eg-care-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.eg-care-load-more-wrap button[hidden] {
	display: none !important;
}

.eg-care-doctors-section button#btn-load-more {
	min-width: 180px !important;
}

/* On a doctor's own page the way back to the list is a link, not a button,
   because it leads to another page. It should still look like the button it
   replaces. */
a.eg-care-back-link {
	display: block;
	width: 100%;
	margin-top: 10px;
	text-align: center;
	text-decoration: none;
}

/* The optional specialty grid needs a way back to the list. */
button.eg-care-back-to-list {
	display: block !important;
	margin: 20px auto 0 !important;
	min-width: 180px !important;
}

/* Doctors Grids */
.eg-care-doctors-list-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.eg-care-doctors-section .section-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 15px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.online-indicator-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #22c55e;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.eg-care-doctors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* Doctor Card Item */
.eg-care-doctor-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.eg-care-doctor-card:hover {
	border-color: #0d9488;
	box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.05);
}

.eg-care-doctor-card-header {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.eg-care-doctor-card-avatar-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.eg-care-doc-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #f1f5f9;
}

.eg-care-doc-initials {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #f0fdfa;
	color: #0f766e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 20px;
	border: 2px solid #ccfbf1;
}

.eg-care-status-indicator {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #ffffff;
}

.eg-care-status-indicator.online {
	background-color: #22c55e;
}

.eg-care-status-indicator.offline {
	background-color: #94a3b8;
}

.eg-care-doctor-card-meta-summary {
	display: flex;
	flex-direction: column;
}

.eg-care-doctor-card-name {
	font-size: 15px;
	font-weight: 800;
	color: #1e293b;
	margin: 0 0 4px 0;
}

.eg-care-doctor-card-designation {
	font-size: 12px;
	color: #475569;
	margin: 0;
}

.eg-care-doctor-card-degree {
	font-size: 11px;
	color: #64748b;
	margin: 4px 0 0 0;
}

.eg-care-doctor-card-body {
	border-top: 1px solid #f1f5f9;
	padding-top: 12px;
	margin-bottom: 15px;
}

.eg-care-doctor-card-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.meta-item.spec-tag {
	font-size: 11px;
	font-weight: 700;
	color: #0f766e;
	background-color: #f0fdfa;
	padding: 3px 8px;
	border-radius: 4px;
}

.meta-item.rating-tag {
	font-size: 11px;
	color: #475569;
}

.eg-care-doctor-card-price-row {
	display: flex;
	justify-content: space-between;
	background-color: #f8fafc;
	padding: 10px;
	border-radius: 8px;
}

.fee-info, .experience-info {
	display: flex;
	flex-direction: column;
}

.fee-label, .exp-label {
	font-size: 9px;
	color: #64748b;
	text-transform: uppercase;
	font-weight: 700;
}

.fee-val, .exp-val {
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
}

.eg-care-btn-card-action {
	width: 100%;
	padding: 10px;
	background-color: #0f766e !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s;
}

.eg-care-btn-card-action:hover {
	background-color: #0d9488 !important;
}

/* Step 3: Doctor Details & Checkout Screen */
.eg-care-step3-wrapper {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	animation: fadeIn 0.4s ease-out;
}

/* A grid column is at least as wide as its widest child unless it is told
   otherwise, so one wide thing inside the panel (the date strip, a long
   unbroken word) drags the whole column past the screen edge on a phone.
   This lets the column shrink and the wide child scroll on its own. */
.eg-care-step3-wrapper > * {
	min-width: 0;
}

@media (max-width: 768px) {
	.eg-care-step3-wrapper {
		grid-template-columns: 1fr;
	}
}

.eg-care-doctor-detail-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.eg-care-detail-header {
	display: flex;
	gap: 24px;
	align-items: center;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.detail-avatar-wrap {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
}

.eg-care-detail-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #f1f5f9;
}

.eg-care-detail-avatar-placeholder {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: #f0fdfa;
	color: #0f766e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 28px;
	border: 3px solid #ccfbf1;
}

.detail-summary h2 {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px 0;
}

.detail-subtitle {
	font-size: 13px;
	color: #475569;
	margin: 0 0 4px 0;
}

.detail-rating-row {
	display: flex;
	gap: 12px;
	margin-top: 10px;
}

.rating-badge, .experience-badge {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	background-color: #f1f5f9;
	padding: 4px 10px;
	border-radius: 20px;
}

/* The institution a doctor sits at, under the degree line. */
.detail-organization {
	font-size: 13px;
	font-style: italic;
	color: #64748b;
	margin: 0 0 4px 0;
}

/* Experience / Patients / Fee / Follow-up, across the profile header. */
.eg-care-stat-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 20px 0 24px;
}

.eg-care-stat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background-color: #f8fafc;
	text-align: center;
}

.eg-care-stat-value {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
}

.eg-care-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

@media (max-width: 560px) {
	.eg-care-stat-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* What this consultation is and what it costs, where the choice is made. */
.eg-care-fee-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #ccfbf1;
	border-radius: 10px;
	background-color: #f0fdfa;
	margin-bottom: 10px;
}

.eg-care-fee-card-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.eg-care-fee-card-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: #0f766e;
	color: #ffffff;
}

.eg-care-fee-card-icon svg {
	width: 20px;
	height: 20px;
}

.eg-care-fee-card-text {
	display: block;
	min-width: 0;
}

.eg-care-fee-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.4;
}

.eg-care-live-badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #ffffff;
	background-color: #dc2626;
	border-radius: 4px;
	padding: 2px 6px;
	line-height: 1.4;
}

.eg-care-fee-card-status {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-top: 2px;
}

.eg-care-fee-card-status.online {
	color: #0f766e;
}

.eg-care-fee-card-status.offline {
	color: #94a3b8;
}

.eg-care-fee-card-price {
	display: block;
	text-align: right;
	margin-left: auto;
}

.eg-care-fee-card-amount {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: #0f766e;
	line-height: 1.3;
}

.eg-care-fee-card-note {
	display: block;
	font-size: 11px;
	color: #64748b;
}

.eg-care-fee-card-help {
	font-size: 12.5px;
	color: #64748b;
	margin: 0 0 20px;
}

/* The card's name and photo lead to the doctor's own page. */
.eg-care-doctor-card-name a.eg-care-doctor-card-link {
	color: inherit;
	text-decoration: none;
}

.eg-care-doctor-card-name a.eg-care-doctor-card-link:hover,
.eg-care-doctor-card-name a.eg-care-doctor-card-link:focus {
	color: #0f766e;
	text-decoration: underline;
}

.eg-care-doctor-card-photo-link {
	display: block;
	line-height: 0;
	/* The initials placeholder is text, and a bare link would underline
	   and recolour it. */
	color: inherit;
	text-decoration: none;
}

.eg-care-doctor-card-organization {
	font-size: 11px;
	font-style: italic;
	color: #64748b;
	margin: 3px 0 0 0;
}

.eg-care-doctor-card-organization[hidden],
.meta-item.patients-tag[hidden] {
	display: none;
}

.meta-item.patients-tag {
	font-size: 11px;
	font-weight: 600;
	color: #475569;
}

.eg-care-detail-body h3 {
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px 0;
}

.eg-care-detail-body p {
	font-size: 13px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 24px 0;
}

/* Appointment Customizer block */
.booking-options-block, .patient-details-block {
	border-top: 1px solid #f1f5f9;
	padding-top: 24px;
	margin-bottom: 24px;
}

/* Appointment type: two cards, each a radio the whole card belongs to. */
.eg-care-type-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.eg-care-type-cards label.eg-care-type-card {
	display: block;
	position: relative;
	padding: 16px 16px 16px 44px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	background-color: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
	margin: 0;
}

.eg-care-type-cards label.eg-care-type-card:hover {
	border-color: #94a3b8;
	background-color: #f8fafc;
}

.eg-care-type-cards label.eg-care-type-card.active {
	border-color: #0f766e;
	background-color: #f0fdfa;
	box-shadow: 0 0 0 1px #0f766e inset;
}

/* The radio itself sits where the card's left padding leaves room for it. */
.eg-care-type-cards label.eg-care-type-card input[type="radio"] {
	position: absolute;
	top: 19px;
	left: 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #0f766e;
}

.eg-care-type-card-body {
	display: block;
}

.eg-care-type-card-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}

.eg-care-type-card-desc {
	display: block;
	font-size: 13px;
	color: #64748b;
	margin-top: 2px;
	line-height: 1.5;
}

.eg-care-type-card-note {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: #0f766e;
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.eg-care-type-cards label.eg-care-type-card.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #f1f5f9;
	border-color: #e2e8f0;
}

.eg-care-type-cards label.eg-care-type-card.disabled:hover {
	border-color: #e2e8f0;
	background-color: #f1f5f9;
}

.eg-care-type-cards label.eg-care-type-card.disabled .eg-care-type-card-note {
	color: #94a3b8;
}

/* Date strip: arrows either side of a row of day cells. */
.eg-care-date-strip-label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #334155;
}

.eg-care-date-strip {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.eg-care-date-strip-track {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.eg-care-date-strip button.eg-care-date-strip-nav {
	flex: 0 0 auto !important;
	width: 34px !important;
	padding: 0 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #475569 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: all 0.15s !important;
}

.eg-care-date-strip button.eg-care-date-strip-nav:hover:not(:disabled) {
	border-color: #0f766e !important;
	color: #0f766e !important;
	background-color: #f0fdfa !important;
}

.eg-care-date-strip button.eg-care-date-strip-nav:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.eg-care-date-strip-track button.eg-care-date-cell {
	display: block !important;
	width: 100% !important;
	padding: 10px 4px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #475569 !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
	line-height: 1.3 !important;
	transition: all 0.15s !important;
}

.eg-care-date-strip-track button.eg-care-date-cell:hover:not(:disabled) {
	border-color: #0f766e !important;
	color: #0f766e !important;
	background-color: #f0fdfa !important;
}

.eg-care-date-cell-day {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.eg-care-date-cell-num {
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin: 1px 0;
}

.eg-care-date-cell-mon {
	display: block;
	font-size: 11px;
	opacity: 0.75;
}

/* Today gets a marker even when it is not the chosen day. */
.eg-care-date-strip-track button.eg-care-date-cell.today:not(.active) {
	border-color: #99f6e4 !important;
	background-color: #f0fdfa !important;
}

.eg-care-date-strip-track button.eg-care-date-cell.active {
	background-color: #0f766e !important;
	border-color: #0f766e !important;
	color: #ffffff !important;
}

/* A day the provider does not sit on. */
.eg-care-date-strip-track button.eg-care-date-cell.closed,
.eg-care-date-strip-track button.eg-care-date-cell:disabled {
	background-color: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	color: #cbd5e1 !important;
	cursor: not-allowed !important;
}

@media (max-width: 640px) {
	/* Seven cells will not fit, so the row scrolls sideways instead of
	   hiding cells. Hiding them would put days inside the window that the
	   arrows had already paged past, which is how a date goes missing. */
	.eg-care-date-strip-track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.eg-care-date-strip-track button.eg-care-date-cell {
		flex: 0 0 62px !important;
		scroll-snap-align: start;
	}
}

/* "Available Time: 6:00 AM - 11:55 PM", above the slot grid. */
.eg-care-slots-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin-top: 16px;
}

.eg-care-slots-head h4 {
	margin: 0;
}

.eg-care-available-time {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #0f766e;
	background-color: #f0fdfa;
	border: 1px solid #ccfbf1;
	border-radius: 999px;
	padding: 3px 10px;
}

.eg-care-available-time[hidden] {
	display: none;
}

/* Hourly Slots Grid */
.eg-care-slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

/* "No consultation hours available" is a message, not a slot: it needs the
   whole row, otherwise it wraps inside one 80px column. */
.eg-care-slots-grid .eg-care-no-data {
	grid-column: 1 / -1;
	margin: 0;
}

/* Hourly Slots Grid */
.eg-care-slots-grid button.eg-care-slot-pill {
	padding: 8px !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.15s !important;
	box-shadow: none !important;
	line-height: 1.5 !important;
}

.eg-care-slots-grid button.eg-care-slot-pill:hover {
	border-color: #0f766e !important;
	color: #0f766e !important;
	background-color: #f0fdfa !important;
}

.eg-care-slots-grid button.eg-care-slot-pill.active {
	background-color: #0f766e !important;
	color: #ffffff !important;
	border-color: #0f766e !important;
}

.eg-care-slots-grid button.eg-care-slot-pill.active:hover {
	background-color: #0d9488 !important;
	color: #ffffff !important;
	border-color: #0d9488 !important;
}

.eg-care-slots-grid button.eg-care-slot-pill:disabled,
.eg-care-slots-grid button.eg-care-slot-pill.booked {
	background-color: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	color: #cbd5e1 !important;
	text-decoration: line-through !important;
	cursor: not-allowed !important;
}

/* Checkout Summary Side Panel */
.eg-care-checkout-panel-wrapper {
	height: fit-content;
	position: sticky;
	top: 30px;
}

.eg-care-checkout-summary-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.eg-care-checkout-title {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 20px 0;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 10px;
}

.eg-care-checkout-section {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #e2e8f0;
}

.eg-care-checkout-section.totals {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.eg-care-checkout-subtitle {
	font-size: 11px;
	font-weight: 800;
	color: #64748b;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

.eg-care-checkout-item {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 8px;
}

.eg-care-checkout-item .label {
	color: #64748b;
}

.eg-care-checkout-item .value {
	font-weight: 700;
	color: #334155;
	text-align: right;
}

.eg-care-checkout-item.total-row {
	border-top: 1px solid #e2e8f0;
	padding-top: 12px;
	margin-top: 8px;
	margin-bottom: 0;
}

.eg-care-checkout-item.total-row .label {
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
}

.eg-care-checkout-item.total-row .value {
	font-size: 18px;
	font-weight: 800;
	color: #0f766e;
}

.eg-care-btn-secondary {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #475569 !important;
	border-radius: 8px !important;
	padding: 12px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
}

.eg-care-btn-secondary:hover {
	background-color: #f8fafc !important;
	color: #1e293b !important;
	border-color: #94a3b8 !important;
}

/* Success Popup overlay screen */
.eg-care-booking-success-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(4px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: fadeIn 0.3s ease-out;
}

.eg-care-success-popup-card {
	background: #ffffff;
	border-radius: 16px;
	width: 100%;
	max-width: 440px;
	padding: 35px 30px;
	text-align: center;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eg-care-success-popup-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #dcfce7;
	margin-bottom: 20px;
}

.eg-care-success-popup-card h2 {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 10px 0;
}

.popup-desc {
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
	margin: 0 0 24px 0;
}

.popup-receipt-details {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	text-align: left;
}

.receipt-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 8px;
}

.receipt-row strong {
	color: #64748b;
	font-weight: 600;
}

.receipt-row span {
	color: #1e293b;
	font-weight: 700;
}

.receipt-row.total {
	border-top: 1px dashed #e2e8f0;
	padding-top: 8px;
	margin-top: 8px;
	margin-bottom: 0;
}

.receipt-row.total strong {
	color: #0f172a;
}

.receipt-row.total span {
	color: #0f766e;
	font-size: 15px;
}

/* Animations */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Phase 6: Doctor-Facing Dashboard Styles
   ========================================================================== */

.eg-care-dashboard-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	animation: fadeIn 0.4s ease-out;
}

.eg-care-dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px 30px;
	margin-bottom: 30px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
	.eg-care-dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

.eg-care-dashboard-header h2 {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px 0;
}

.role-caption {
	font-size: 13px;
	color: #0f766e;
	font-weight: 700;
	margin: 0;
}

.instant-status-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #f8fafc;
	padding: 10px 16px;
	border-radius: 30px;
	border: 1px solid #e2e8f0;
}

.instant-status-toggle .toggle-label {
	font-size: 13px;
	font-weight: 700;
	color: #334155;
}

/* Switch styling */
.eg-care-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.eg-care-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.eg-care-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cbd5e1;
	transition: .3s;
}

.eg-care-switch .slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .3s;
}

.eg-care-switch input:checked + .slider {
	background-color: #0f766e;
}

.eg-care-switch input:checked + .slider:before {
	transform: translateX(20px);
}

.eg-care-switch .slider.round {
	border-radius: 24px;
}

.eg-care-switch .slider.round:before {
	border-radius: 50%;
}

/* Stats Cards */
.eg-care-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.eg-care-stat-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.stat-icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.stat-icon.purple { background-color: #faf5ff; color: #7c3aed; }
.stat-icon.green { background-color: #f0fdf4; color: #16a34a; }
.stat-icon.blue { background-color: #eff6ff; color: #2563eb; }

.stat-details {
	display: flex;
	flex-direction: column;
}

.stat-details .stat-num {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}

.stat-details .stat-num.online-green {
	color: #16a34a;
}

.stat-details .stat-num.offline-gray {
	color: #64748b;
}

.stat-details .stat-label {
	font-size: 12px;
	color: #64748b;
	font-weight: 600;
	margin-top: 2px;
}

.stat-details .stat-help {
	font-size: 10px;
	color: #94a3b8;
	margin-top: 2px;
}

/* Tabs */
.eg-care-dashboard-tabs {
	display: flex;
	gap: 10px;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 24px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.eg-care-dashboard-tabs button.tab-trigger {
	padding: 12px 20px !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	line-height: 1.5 !important;
}

.eg-care-dashboard-tabs button.tab-trigger:hover {
	color: #0f766e !important;
	background: transparent !important;
}

.eg-care-dashboard-tabs button.tab-trigger.active {
	color: #0f766e !important;
	border-bottom: 2px solid #0f766e !important;
	background: transparent !important;
}

/* Tab panes */
.tab-pane {
	display: none;
	animation: fadeIn 0.3s ease-out;
}

.tab-pane.active {
	display: block;
}

.tab-pane h3 {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 16px 0;
}

.pane-desc {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 24px 0;
}

/* Tables */
.eg-care-table-responsive {
	overflow-x: auto;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
}

.eg-care-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 13px;
}

.eg-care-dashboard-table th {
	background-color: #f8fafc;
	color: #475569;
	font-weight: 700;
	padding: 14px 18px;
	border-bottom: 1px solid #e2e8f0;
}

.eg-care-dashboard-table td {
	padding: 14px 18px;
	border-bottom: 1px solid #f1f5f9;
	color: #334155;
	vertical-align: middle;
}

.eg-care-dashboard-table tr:last-child td {
	border-bottom: none;
}

.relation-tag {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 6px;
	background-color: #f1f5f9;
	border-radius: 4px;
	color: #64748b;
	margin-left: 6px;
}

.symptom-notes-cell {
	display: block;
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #64748b;
}

.loading-cell, .empty-cell, .error-cell {
	text-align: center;
	padding: 30px !important;
	color: #64748b;
	font-style: italic;
}

.error-cell {
	color: #dc2626;
}

/* Buttons */
.eg-care-btn-join-call {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
}

.eg-care-btn-join-call.active {
	background-color: #16a34a;
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2);
}

.eg-care-btn-join-call.active:hover {
	background-color: #15803d;
}

.eg-care-btn-join-call.disabled {
	background-color: #e2e8f0;
	color: #94a3b8;
	cursor: not-allowed;
}

/* Weekly slots configuration */
.schedules-weekly-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
}

.day-slot-row {
	display: flex;
	align-items: center;
	padding-bottom: 15px;
	border-bottom: 1px solid #f1f5f9;
}

.day-slot-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.day-slot-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

.day-label-column {
	width: 150px;
	flex-shrink: 0;
}

.day-checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: #1e293b;
}

.day-checkbox-wrapper input[type="checkbox"] {
	accent-color: #0f766e;
}

.time-inputs-column {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-grow: 1;
}

@media (max-width: 480px) {
	.time-inputs-column {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 10px;
	}
}

.time-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.time-group label {
	font-size: 10px;
	text-transform: uppercase;
	color: #64748b;
	font-weight: 700;
}

.time-group input[type="time"],
.time-group select {
	padding: 6px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 12px;
	color: #334155;
	background-color: #ffffff;
}

/* Agora Video Call Overlay Modal */
.eg-care-video-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: #0f172a !important; /* Deep dark slate */
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	color: #ffffff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.video-modal-header {
	padding: 20px !important;
	background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), transparent) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	z-index: 10 !important;
}

#video-call-title {
	font-weight: bold !important;
	font-size: 16px !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

#video-call-duration {
	background-color: rgba(0, 0, 0, 0.6) !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-size: 14px !important;
}

.video-grid-container {
	flex-grow: 1 !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
}

.remote-video-stream {
	width: 100% !important;
	height: 100% !important;
	background-color: #1e293b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

.remote-video-stream > div:not(.video-placeholder) {
	width: 100% !important;
	height: 100% !important;
}

/* The standby panel behind the remote video. It has three states, set on
   data-state: nobody has joined yet, they are here with the camera off, or
   their video is playing and the whole panel steps out of the way. */
.video-placeholder {
	font-size: 18px !important;
	color: #94a3b8 !important;
	text-align: center !important;
	position: absolute !important;
	z-index: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	padding: 20px !important;
}

#remote-placeholder[data-state="video"] {
	display: none !important;
}

#remote-placeholder[data-state="waiting"] .note-camera-off,
#remote-placeholder[data-state="camera-off"] .note-waiting {
	display: none !important;
}

.remote-standby-avatar {
	box-sizing: border-box;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1e293b;
	border: 2px solid #334155;
}

.remote-standby-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.remote-standby-avatar span {
	font-size: 38px;
	font-weight: 700;
	color: #cbd5e1;
	letter-spacing: .02em;
}

.remote-standby-name {
	font-size: 18px;
	font-weight: 700;
	color: #e2e8f0;
}

.remote-standby-note {
	font-size: 14px;
	color: #94a3b8;
}

/* The same idea in the corner: your own camera off is a state worth naming,
   not an unexplained black rectangle. */
/* [hidden] has to win over the display below, or the cover is up before
   anyone has touched the camera button. */
.local-video-off[hidden] {
	display: none !important;
}

.local-video-off {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 6px !important;
	background-color: #1e293b !important;
	color: #cbd5e1 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	z-index: 5 !important;
}

@media (max-width: 768px) {
	.remote-standby-avatar { width: 84px; height: 84px; }
	.remote-standby-avatar span { font-size: 28px; }
	.remote-standby-name { font-size: 16px; }
	.remote-standby-note { font-size: 13px; }
}

.local-video-stream {
	position: absolute !important;
	bottom: 100px !important;
	right: 20px !important;
	/* Landscape, like the camera - a 150x200 portrait box cropped faces. */
	width: 180px !important;
	height: 135px !important;
	background-color: #334155 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 2px solid #ffffff !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
	z-index: 5 !important;
}

/* Only the Agora player wrapper, never the "You" badge - the old
   descendant selector stretched the badge (and its 50% black
   background) across the whole picture-in-picture box. */
.local-video-stream > div:not(.local-video-badge) {
	width: 100% !important;
	height: 100% !important;
}

.local-video-stream > .local-video-badge {
	width: auto !important;
	height: auto !important;
}

.video-controls-toolbar {
	position: absolute !important;
	bottom: 20px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	display: flex !important;
	gap: 20px !important;
	padding: 15px 25px !important;
	background-color: rgba(30, 41, 59, 0.8) !important;
	border-radius: 50px !important;
	backdrop-filter: blur(10px) !important;
	z-index: 10 !important;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.control-btn {
	width: 50px !important;
	height: 50px !important;
	/* Astra gives every <button> 15px 30px of padding. With border-box that
	   left a zero-width content box, and the SVG - a flex item - shrank to
	   0px, so the icons were invisible. */
	padding: 0 !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	border-radius: 50% !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
}

.control-btn.mic-on {
	background-color: #475569 !important;
	color: #ffffff !important;
}
.control-btn.mic-off {
	background-color: #ef4444 !important;
	color: #ffffff !important;
}

.control-btn.cam-on {
	background-color: #475569 !important;
	color: #ffffff !important;
}
.control-btn.cam-off {
	background-color: #ef4444 !important;
	color: #ffffff !important;
}

/* No transform here: the hangup SVG already carries rotate(135deg) inline.
   Both together made 270deg, and :hover scale() wiped the rotation. */
.control-btn.end-call {
	background-color: #ef4444 !important;
	color: #ffffff !important;
}

.control-btn.end-call:hover {
	background-color: #dc2626 !important;
}
.control-btn:hover {
	opacity: 0.9 !important;
	transform: scale(1.05) !important;
}

/* Ensure SVG icons in video call controls are visible and styled consistently */
.control-btn .video-icon {
	width: 20px !important;
	height: 20px !important;
	/* Belt and braces: never let flex shrink the icon away again. */
	min-width: 20px !important;
	flex: 0 0 auto !important;
	color: #ffffff !important;
	fill: none !important;
	display: block !important;
	margin: 0 auto !important;
	stroke: currentColor !important;
	stroke-width: 2.5px !important;
}

/* The picture-in-picture box takes a smaller share of a phone screen. */
@media (max-width: 768px) {
	.local-video-stream {
		width: 120px !important;
		height: 90px !important;
		bottom: 110px !important;
	}
}

/* Custom Responsive Overrides for Mobile Telemedicine Portals */
@media (max-width: 768px) {
	.eg-care-stats-row {
		grid-template-columns: 1fr !important;
	}
	.eg-care-fields-grid {
		grid-template-columns: 1fr !important;
	}
	.eg-care-field.span-full {
		grid-column: span 1 !important;
	}
	.eg-care-dashboard-header {
		padding: 16px 20px !important;
	}
	.day-slot-row {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.day-label-column {
		flex: 0 0 auto !important;
		padding-top: 0 !important;
	}
}

.eg-care-dashboard-table {
	width: 100% !important;
	min-width: 750px !important;
}

.eg-care-patient-table {
	width: 100% !important;
	min-width: 750px !important;
	border-collapse: collapse !important;
	text-align: left !important;
	font-size: 13px !important;
}

/* Medical reports attached to an appointment. */
.eg-care-report-links {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #475569;
}

.eg-care-report-links a,
a.eg-care-report-link {
	color: #2563eb;
	text-decoration: underline;
	word-break: break-all;
}

.eg-care-report-links a:hover,
a.eg-care-report-link:hover {
	color: #1d4ed8;
}



/* ==========================================================================
   Who the appointment is for: saved family members
   ========================================================================== */

.eg-care-family-members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: 6px;
}

.eg-care-family-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 14px 14px 13px;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #0f172a !important;
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.eg-care-family-card:hover {
	border-color: #99c9c4 !important;
}

.eg-care-family-card:focus-visible {
	outline: 2px solid #0f766e;
	outline-offset: 2px;
}

.eg-care-family-card.active {
	border-color: #0f766e !important;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

.eg-care-family-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	background: #0f766e;
	color: #fff;
}

.eg-care-family-badge.alt {
	background: #eef4f3;
	color: #0f766e;
}

.eg-care-family-name {
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
	padding-right: 62px;
	line-height: 1.35;
}

.eg-care-family-meta {
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.45;
}

.eg-care-family-card.add {
	border-style: dashed;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #0f766e;
}

.eg-care-family-card.add .eg-care-family-name {
	padding-right: 0;
	color: #0f766e;
}

.eg-care-family-add-icon {
	font-size: 22px;
	line-height: 1;
	color: #0f766e;
}

.eg-care-family-form {
	margin-top: 14px;
	padding: 16px 16px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
}

.eg-care-family-form h4 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.eg-care-family-form-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.eg-care-family-form-actions button {
	width: auto;
	padding: 9px 18px;
}

.eg-care-family-form-error {
	margin: 10px 0 0;
	font-size: 13px;
	color: #b91c1c;
}

.eg-care-field-hint {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #64748b;
}

@media (max-width: 600px) {
	.eg-care-family-members {
		grid-template-columns: 1fr;
	}
}


/* Edit / Remove buttons on the dashboard's family cards */
.eg-care-family-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.eg-care-family-actions button {
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.eg-care-family-actions button:hover {
	border-color: #0f766e;
	color: #0f766e;
}

.eg-care-family-actions .eg-care-family-delete:hover {
	border-color: #b91c1c;
	color: #b91c1c;
}

.eg-care-family-actions button:disabled {
	opacity: .5;
	cursor: default;
}

/* ==========================================================================
   Instant consultation request: ask for whoever is free
   ========================================================================== */

.eg-care-instant-wrapper {
	max-width: 1080px;
	margin: 0 auto;
}

/* What we need from the patient on the left, what they get on the right. */
.eg-care-instant-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.eg-care-instant-main,
.eg-care-instant-side {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.eg-care-instant-block {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.eg-care-instant-block[hidden] {
	display: none;
}

.eg-care-instant-block h3 {
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 14px;
}

.eg-care-instant-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.eg-care-instant-block-head h3 {
	margin-bottom: 14px;
}

button.eg-care-linkish {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #0f766e !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	box-shadow: none !important;
	width: auto !important;
}

button.eg-care-linkish[hidden] {
	display: none !important;
}

.eg-care-instant-loading {
	font-size: 13px;
	color: #94a3b8;
	margin: 0;
}

/* ---- documents ---- */

.eg-care-instant-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 16px;
	border: 1.5px dashed #cbd5e1;
	border-radius: 10px;
	background-color: #f8fafc;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.eg-care-instant-dropzone:hover {
	border-color: #0f766e;
	background-color: #f0fdfa;
}

.eg-care-instant-dropzone.full {
	cursor: default;
	border-style: solid;
	background-color: #f1f5f9;
}

.eg-care-instant-dropzone.full:hover {
	border-color: #cbd5e1;
	background-color: #f1f5f9;
}

.eg-care-instant-dropzone-plus {
	font-size: 22px;
	font-weight: 700;
	color: #0f766e;
	line-height: 1;
}

.eg-care-instant-dropzone-text {
	font-size: 13px;
	color: #475569;
}

.eg-care-instant-dropzone-hint {
	font-size: 11.5px;
	color: #94a3b8;
}

/* ---- payment summary ---- */

.eg-care-instant-summary {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.eg-care-instant-summary th,
.eg-care-instant-summary td {
	padding: 11px 14px;
	font-size: 13px;
	border-bottom: 1px solid #f1f5f9;
}

.eg-care-instant-summary th {
	text-align: left;
	font-weight: 500;
	color: #64748b;
}

.eg-care-instant-summary td {
	text-align: right;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
}

.eg-care-instant-summary tr.total th,
.eg-care-instant-summary tr.total td {
	border-bottom: 0;
	background-color: #f8fafc;
	font-weight: 800;
	color: #0f172a;
	font-size: 14px;
}

.eg-care-instant-summary tr.total td {
	color: #0f766e;
}

/* ---- who is on duty ---- */

.eg-care-instant-onduty {
	font-size: 14px;
	font-weight: 700;
	color: #0f766e;
	margin: 0 0 12px;
}

.eg-care-instant-onduty.none {
	color: #94a3b8;
}

.eg-care-instant-faces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.eg-care-instant-faces:empty {
	display: none;
}

.eg-care-instant-face {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #f0fdfa;
	border: 1.5px solid #99f6e4;
}

.eg-care-instant-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eg-care-instant-face-initials {
	font-size: 13px;
	font-weight: 800;
	color: #0f766e;
}

/* ---- subject chips ---- */

.eg-care-instant-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.eg-care-instant-chips button.eg-care-instant-chip {
	padding: 7px 13px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 999px !important;
	background-color: #ffffff !important;
	color: #475569 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	width: auto !important;
	transition: all 0.15s !important;
}

.eg-care-instant-chips button.eg-care-instant-chip:hover {
	border-color: #0f766e !important;
	color: #0f766e !important;
}

.eg-care-instant-chips button.eg-care-instant-chip.active {
	background-color: #0f766e !important;
	border-color: #0f766e !important;
	color: #ffffff !important;
}

/* ---- terms and submit ---- */

.eg-care-instant-terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	color: #475569;
	line-height: 1.5;
	cursor: pointer;
	margin: 0;
}

.eg-care-instant-terms input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
	accent-color: #0f766e;
}

.eg-care-instant-submit-block button:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}

@media (max-width: 860px) {
	.eg-care-instant-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The way out belongs at the end of the form on a narrow screen, not
	   above the questions it depends on. */
	.eg-care-instant-side {
		order: 2;
	}
}

.eg-care-instant-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.eg-care-instant-panel[hidden] {
	display: none;
}

.eg-care-instant-head {
	margin-bottom: 20px;
}

.eg-care-instant-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #dc2626;
	border-radius: 4px;
	padding: 3px 8px;
	margin-bottom: 10px;
}

.eg-care-instant-panel h2 {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.eg-care-instant-lede {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.6;
}

.eg-care-instant-fee-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #ccfbf1;
	border-radius: 10px;
	background-color: #f0fdfa;
	margin: 18px 0 6px;
}

.eg-care-instant-fee-label {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}

.eg-care-instant-fee-amount {
	font-size: 20px;
	font-weight: 800;
	color: #0f766e;
}

.eg-care-instant-wrapper .eg-care-field {
	margin-top: 16px;
}

.eg-care-instant-wrapper button.eg-care-btn-register,
.eg-care-instant-wrapper button.eg-care-btn-secondary {
	width: 100% !important;
	margin-top: 20px !important;
	padding: 14px !important;
	font-size: 15px !important;
}

.eg-care-instant-error {
	margin: 14px 0 0;
	padding: 10px 12px;
	border: 1px solid #fecaca;
	border-radius: 8px;
	background-color: #fef2f2;
	color: #b91c1c;
	font-size: 13px;
}

.eg-care-instant-error[hidden] {
	display: none;
}

/* ---- waiting ---- */

.eg-care-instant-waiting,
.eg-care-instant-accepted,
.eg-care-instant-closed {
	text-align: center;
}

.eg-care-instant-pulse {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}

.eg-care-instant-pulse span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #0f766e;
	animation: eg-care-instant-bounce 1.2s infinite ease-in-out both;
}

.eg-care-instant-pulse span:nth-child(1) { animation-delay: -0.24s; }
.eg-care-instant-pulse span:nth-child(2) { animation-delay: -0.12s; }

@keyframes eg-care-instant-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

/* Someone watching a spinner deserves a still frame, not a strobe. */
@media (prefers-reduced-motion: reduce) {
	.eg-care-instant-pulse span {
		animation: none;
		opacity: 0.8;
	}
}

.eg-care-instant-countdown {
	font-size: 13px;
	font-weight: 700;
	color: #0f766e;
	margin: 16px 0 0;
}

/* ---- a doctor accepted ---- */

.eg-care-instant-doctor {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.eg-care-instant-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #99f6e4;
}

.eg-care-instant-avatar.placeholder {
	display: grid;
	place-items: center;
	background-color: #f0fdfa;
	color: #0f766e;
	font-size: 24px;
	font-weight: 800;
}

/* ---- doctor dashboard: the instant queue ---- */

.eg-care-dashboard-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
}

.eg-care-queue-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 6px;
	border-radius: 999px;
	background-color: #dc2626;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.eg-care-queue-count[hidden] {
	display: none;
}

.eg-care-pane-lede {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 16px;
	line-height: 1.6;
}

#instant-queue-target {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.eg-care-queue-card {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	background-color: #ffffff;
}

.eg-care-queue-card.claimed {
	border-color: #99f6e4;
	background-color: #f0fdfa;
}

.eg-care-queue-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.eg-care-queue-name {
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
}

.eg-care-queue-age {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}

.eg-care-queue-waited {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
}

/* What the patient said the call is about, when they said. */
.eg-care-queue-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #0f766e;
	background-color: #f0fdfa;
	border-radius: 4px;
	padding: 3px 8px;
	margin-bottom: 8px;
}

.eg-care-queue-symptoms {
	font-size: 13px;
	color: #475569;
	margin: 0 0 12px;
	line-height: 1.5;
	/* A long description should not stretch the card past its neighbours. */
	overflow-wrap: anywhere;
}

.eg-care-queue-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.eg-care-queue-fee {
	font-size: 15px;
	font-weight: 800;
	color: #0f766e;
}

#instant-queue-target button.eg-care-queue-accept {
	padding: 8px 18px !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	width: auto !important;
}

.eg-care-queue-contact {
	font-size: 13px;
	color: #0f172a;
	margin: 0 0 8px;
}

.eg-care-queue-note {
	font-size: 12px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

.eg-care-queue-note.error {
	color: #b91c1c;
	margin-top: 10px;
}

/* ==========================================================================
   Access gate: the screen shown instead of a portal you cannot see yet
   ========================================================================== */

.eg-care-gate {
	display: flex;
	justify-content: center;
	padding: 10px 0 30px;
}

.eg-care-gate-card {
	width: 100%;
	max-width: 520px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 34px 32px 30px;
	text-align: center;
	box-shadow: 0 10px 25px -12px rgba(15, 23, 42, 0.12);
}

.eg-care-gate-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 16px;
	background-color: #f0fdfa;
	color: #0f766e;
}

.eg-care-gate-icon svg {
	width: 26px;
	height: 26px;
}

.eg-care-gate-title {
	font-size: 21px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 8px;
	line-height: 1.3;
}

.eg-care-gate-message {
	font-size: 14px;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

/* What is behind the door, so the visitor knows they are in the right place. */
.eg-care-gate-points {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #f1f5f9;
	text-align: left;
	display: grid;
	gap: 10px;
}

.eg-care-gate-points li {
	position: relative;
	padding-left: 26px;
	font-size: 13.5px;
	color: #334155;
	line-height: 1.5;
	margin: 0;
}

.eg-care-gate-points li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	width: 6px;
	height: 10px;
	border: solid #0f766e;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.eg-care-gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

/* Links styled as the buttons they stand in for. The theme's own anchor
   colours would otherwise win here. */
.eg-care-gate-actions a.eg-care-gate-btn {
	flex: 1 1 180px;
	display: block;
	padding: 13px 18px;
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	background-color: #ffffff;
	color: #334155;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: all 0.15s;
}

.eg-care-gate-actions a.eg-care-gate-btn:hover,
.eg-care-gate-actions a.eg-care-gate-btn:focus {
	background-color: #f8fafc;
	border-color: #94a3b8;
	color: #0f172a;
	text-decoration: none;
}

.eg-care-gate-actions a.eg-care-gate-btn.primary {
	background-color: #0f766e;
	border-color: #0f766e;
	color: #ffffff;
}

.eg-care-gate-actions a.eg-care-gate-btn.primary:hover,
.eg-care-gate-actions a.eg-care-gate-btn.primary:focus {
	background-color: #0d9488;
	border-color: #0d9488;
	color: #ffffff;
}

.eg-care-gate-footnote {
	font-size: 12.5px;
	color: #94a3b8;
	line-height: 1.5;
	margin: 16px 0 0;
}

@media (max-width: 480px) {
	.eg-care-gate-card {
		padding: 26px 20px 24px;
	}

	/* Side by side, two buttons on a phone are each too narrow to read. */
	.eg-care-gate-actions a.eg-care-gate-btn {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   Dashboards on a phone
   --------------------------------------------------------------------------
   The patient dashboard carries most of its layout in inline style attributes
   (a hard three-column stats grid, a space-between header, 20-25px padding),
   which no plain rule can reach - hence !important on those, and only those.
   The doctor dashboard is class-driven, so its rules stay ordinary.
   ========================================================================== */

@media (max-width: 768px) {

	/* ---- shell ---- */

	.eg-care-patient-dashboard {
		padding: 14px !important;
	}

	.eg-care-patient-dashboard .eg-care-dashboard-section {
		padding: 16px !important;
		margin-bottom: 18px !important;
	}

	.eg-care-patient-dashboard img,
	.eg-care-dashboard-wrapper img {
		max-width: 100%;
		height: auto;
	}

	/* ---- patient: header ---- */

	.eg-care-patient-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
		padding-bottom: 16px !important;
		margin-bottom: 20px !important;
	}

	.eg-care-patient-header h2 {
		font-size: 20px !important;
		line-height: 1.3 !important;
		overflow-wrap: anywhere;
	}

	.eg-care-patient-header p {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	/* ---- patient: the three summary tiles ---- */

	.eg-care-patient-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		margin-bottom: 20px !important;
	}

	/* Three tiles in two columns: the last one takes the whole row
	   rather than sitting half-width next to nothing. */
	.eg-care-patient-stats > div:last-child {
		grid-column: 1 / -1 !important;
	}

	.eg-care-patient-stats > div {
		padding: 12px 10px !important;
	}

	.eg-care-patient-stats > div > span {
		font-size: 11px !important;
		line-height: 1.35 !important;
		display: block;
	}

	/* 28px numbers were the loudest thing on the screen. */
	.eg-care-patient-stats > div > h3 {
		font-size: 20px !important;
		margin-top: 6px !important;
		overflow-wrap: anywhere;
	}

	/* ---- section headings, both dashboards ---- */

	.eg-care-patient-dashboard .eg-care-dashboard-section > h3 {
		font-size: 16px !important;
		line-height: 1.35 !important;
		margin-bottom: 14px !important;
	}

	.tab-pane h3 {
		font-size: 16px;
		line-height: 1.35;
	}

	/* ---- doctor: header and the two duty switches ---- */

	.eg-care-dashboard-header {
		margin-bottom: 20px;
	}

	.eg-care-dashboard-header h2 {
		font-size: 19px;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	.eg-care-dashboard-switches {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	/* Label left, switch right - a phone has the width for exactly that. */
	.instant-status-toggle {
		justify-content: space-between;
		padding: 10px 14px;
	}

	.instant-status-toggle .toggle-label {
		font-size: 12px;
	}

	/* ---- doctor: stat cards ---- */

	.eg-care-stats-row {
		gap: 12px !important;
		margin-bottom: 20px;
	}

	.eg-care-stat-card {
		padding: 14px;
		gap: 14px;
	}

	.stat-icon {
		width: 38px;
		height: 38px;
		font-size: 17px;
		flex: 0 0 auto;
	}

	.stat-details {
		min-width: 0;
	}

	.stat-details .stat-num {
		font-size: 17px;
		overflow-wrap: anywhere;
	}

	/* ---- doctor: tab strip stays one swipeable line ---- */

	.eg-care-dashboard-tabs {
		gap: 2px;
		margin-bottom: 18px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.eg-care-dashboard-tabs::-webkit-scrollbar {
		display: none;
	}

	.eg-care-dashboard-tabs button.tab-trigger {
		padding: 10px 12px !important;
		font-size: 13px !important;
	}

	/* ==================================================================
	   Tables become cards
	   A 750px-wide table inside a horizontally scrolling box means the
	   reader has to scroll sideways for every single row. Below 768px each
	   row becomes its own card and each cell prints its column name from
	   data-label, so nothing is lost and nothing runs off the screen.
	   ================================================================== */

	.eg-care-table-responsive {
		overflow-x: visible !important;
		border: none !important;
		background: transparent !important;
		border-radius: 0 !important;
	}

	table.eg-care-dashboard-table,
	table.eg-care-patient-table {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	/* The column names live in each cell now. */
	.eg-care-dashboard-table thead,
	.eg-care-patient-table thead {
		display: none !important;
	}

	.eg-care-dashboard-table tbody,
	.eg-care-patient-table tbody {
		display: block !important;
	}

	.eg-care-dashboard-table tbody tr,
	.eg-care-patient-table tbody tr {
		display: block !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px !important;
		background: #ffffff !important;
		padding: 6px 16px !important;
		margin-bottom: 12px !important;
	}

	.eg-care-dashboard-table tbody tr:last-child,
	.eg-care-patient-table tbody tr:last-child {
		margin-bottom: 0 !important;
	}

	/* Label above, value below, both starting at the same left edge.
	   These were two columns with the value hard against the right border,
	   which left a wide empty gutter down the middle and pushed a long
	   doctor's name into a ragged block jammed at the card's edge. Stacking
	   gives every value the full width of the card and nothing ends up
	   crowding the border. */
	.eg-care-dashboard-table tbody td,
	.eg-care-patient-table tbody td {
		display: block !important;
		position: relative !important;
		padding: 10px 0 !important;
		border-bottom: 1px solid #f1f5f9 !important;
		text-align: left !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
		min-height: 20px;
		overflow-wrap: anywhere;
	}

	.eg-care-dashboard-table tbody tr td:last-child,
	.eg-care-patient-table tbody tr td:last-child {
		border-bottom: none !important;
	}

	.eg-care-dashboard-table tbody td::before,
	.eg-care-patient-table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		text-align: left;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: #64748b;
		line-height: 1.5;
	}

	/* The full-width "loading" / "nothing here" / "failed" rows have no
	   column of their own, so they keep the centred single-cell shape. */
	.eg-care-dashboard-table tbody td.loading-cell,
	.eg-care-dashboard-table tbody td.empty-cell,
	.eg-care-dashboard-table tbody td.error-cell,
	.eg-care-patient-table tbody td[colspan] {
		padding: 22px 10px !important;
		text-align: center !important;
	}

	.eg-care-dashboard-table tbody td.loading-cell::before,
	.eg-care-dashboard-table tbody td.empty-cell::before,
	.eg-care-dashboard-table tbody td.error-cell::before,
	.eg-care-patient-table tbody td[colspan]::before {
		content: none;
	}

	/* Symptoms were clipped to one 250px line for the table layout; in a
	   card they can simply wrap. */
	.symptom-notes-cell {
		max-width: none !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.eg-care-report-links {
		display: block;
		margin-top: 4px;
	}

	/* ---- forms and uploads ---- */

	/* Under 16px, Safari on iOS zooms the whole page in when a field takes
	   focus and never zooms back out. */
	.eg-care-field input[type="text"],
	.eg-care-field input[type="email"],
	.eg-care-field input[type="password"],
	.eg-care-field input[type="number"],
	.eg-care-field input[type="date"],
	.eg-care-field input[type="tel"],
	.eg-care-field select,
	.eg-care-field textarea,
	.time-group input[type="time"],
	.time-group select {
		font-size: 16px;
	}

	.eg-care-field label {
		font-size: 13px;
	}

	.eg-care-modern-upload-wrapper {
		flex-wrap: wrap;
		gap: 10px;
	}

	.eg-care-file-name {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.eg-care-patient-dashboard .eg-care-btn-register,
	.eg-care-dashboard-wrapper .eg-care-btn-register {
		width: 100%;
		padding: 13px 20px;
		font-size: 15px;
	}

	.eg-care-family-form-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* Two tiles side by side stop being readable somewhere around here. */
@media (max-width: 344px) {
	.eg-care-patient-stats {
		grid-template-columns: minmax(0, 1fr) !important;
	}

}