/* ==========================================================================
   Smart Medical Plugin - Public / Front-end Styles
   Modern "glass dashboard" look, mobile-first, RTL, dark-mode ready.
   ========================================================================== */

:root {
	--smp-primary: #6c5ce7;
	--smp-primary-dark: #5647c9;
	--smp-secondary: #00cec9;
	--smp-success: #27ae60;
	--smp-warning: #f39c12;
	--smp-danger: #e74c3c;
	--smp-bg: #f7f7fc;
	--smp-card-bg: rgba(255,255,255,0.75);
	--smp-text: #222;
	--smp-radius: 16px;
	--smp-shadow: 0 8px 30px rgba(108,92,231,0.12);
}

.smp-dark {
	--smp-bg: #14141f;
	--smp-card-bg: rgba(30,30,45,0.75);
	--smp-text: #f1f1f7;
	--smp-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.smp-root, .smp-doctor-grid, .smp-search-wrap, .smp-dashboard, .smp-booking-widget {
	direction: rtl;
	text-align: right;
	font-family: "Vazirmatn", Tahoma, sans-serif;
	color: var(--smp-text);
	box-sizing: border-box;
}
.smp-root *, .smp-doctor-grid *, .smp-search-wrap *, .smp-dashboard *, .smp-booking-widget * { box-sizing: border-box; }

/* ---- Buttons ---- */
.smp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: linear-gradient(135deg, var(--smp-primary), var(--smp-primary-dark));
	color: #fff; border: none; border-radius: 10px; padding: 10px 20px;
	font-size: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.smp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(108,92,231,.35); color:#fff; }
.smp-btn.smp-btn-outline { background: transparent; color: var(--smp-primary); border: 2px solid var(--smp-primary); }
.smp-btn.smp-btn-sm { padding: 6px 14px; font-size: 12px; }
.smp-btn.smp-btn-danger { background: linear-gradient(135deg, #e74c3c, #c0392b); }

/* ---- Search widget ---- */
.smp-search-wrap {
	background: var(--smp-card-bg); backdrop-filter: blur(14px);
	border-radius: var(--smp-radius); box-shadow: var(--smp-shadow);
	padding: 20px; margin-bottom: 24px;
}
.smp-search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.smp-search-grid select, .smp-search-grid input {
	width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #e1e1ef;
	background: #fff; font-size: 14px;
}
.smp-search-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Doctor cards ---- */
.smp-doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.smp-doctor-card {
	background: var(--smp-card-bg); backdrop-filter: blur(14px);
	border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); overflow: hidden;
	transition: transform .2s ease;
	position: relative;
}
.smp-doctor-card:hover { transform: translateY(-4px); }
.smp-doctor-card .smp-card-photo { width: 100%; height: 180px; object-fit: cover; background: #eee; }
.smp-doctor-card .smp-card-body { padding: 16px; }
.smp-doctor-card h3 { margin: 0 0 6px; font-size: 17px; }
.smp-doctor-card .smp-specialty { color: var(--smp-primary); font-size: 13px; margin-bottom: 8px; }
.smp-doctor-card .smp-meta-row { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin: 6px 0; }
.smp-verified-badge {
	position: absolute; top: 12px; left: 12px; background: var(--smp-success); color: #fff;
	font-size: 11px; padding: 3px 8px; border-radius: 999px;
}
.smp-rating-stars { color: #f1c40f; }
.smp-favorite-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #ccc; }
.smp-favorite-btn.active { color: #e74c3c; }

/* ---- Doctor profile ---- */
.smp-doctor-header { display: flex; gap: 20px; flex-wrap: wrap; background: var(--smp-card-bg); backdrop-filter: blur(14px); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 24px; margin-bottom: 20px; }
.smp-doctor-header img { width: 140px; height: 140px; object-fit: cover; border-radius: 20px; }
.smp-tabs { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.smp-tab-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.smp-tab-btn.active { background: var(--smp-primary); color: #fff; border-color: var(--smp-primary); }
.smp-tab-panel { display: none; background: var(--smp-card-bg); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 20px; }
.smp-tab-panel.active { display: block; }

/* ---- Booking widget ---- */
.smp-booking-widget { background: var(--smp-card-bg); backdrop-filter: blur(14px); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 20px; }
.smp-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin: 14px 0; }
.smp-slot { padding: 8px 4px; border: 1px solid #ddd; border-radius: 8px; text-align: center; cursor: pointer; background: #fff; font-size: 13px; }
.smp-slot.selected { background: var(--smp-primary); color: #fff; border-color: var(--smp-primary); }
.smp-slot.disabled { opacity: .35; cursor: not-allowed; }

/* ---- Dashboards ---- */
.smp-dashboard { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.smp-dashboard-nav { background: var(--smp-card-bg); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 14px; height: fit-content; }
.smp-dashboard-nav a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--smp-text); text-decoration: none; margin-bottom: 4px; }
.smp-dashboard-nav a.active, .smp-dashboard-nav a:hover { background: var(--smp-primary); color: #fff; }
.smp-dashboard-content { background: var(--smp-card-bg); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 20px; }
@media (max-width: 720px) { .smp-dashboard { grid-template-columns: 1fr; } }

/* ---- Chat / Telemedicine ---- */
.smp-chat-box { display: flex; flex-direction: column; height: 420px; background: var(--smp-card-bg); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); overflow: hidden; }
.smp-chat-messages { flex: 1; overflow-y: auto; padding: 14px; }
.smp-msg { max-width: 70%; padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
.smp-msg.mine { background: var(--smp-primary); color: #fff; margin-right: auto; margin-left: 0; }
.smp-msg.theirs { background: #eee; margin-left: auto; }
.smp-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eee; }
.smp-chat-input input { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid #ddd; }
.smp-video-frame { width: 100%; height: 480px; border: none; border-radius: var(--smp-radius); }

/* ---- AI Assistant ---- */
.smp-ai-box { background: var(--smp-card-bg); border-radius: var(--smp-radius); box-shadow: var(--smp-shadow); padding: 20px; }
.smp-ai-messages { min-height: 160px; margin-bottom: 12px; }
.smp-ai-disclaimer { font-size: 12px; color: #888; margin-top: 10px; border-top: 1px dashed #ddd; padding-top: 8px; }

/* Animations */
@keyframes smpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.smp-doctor-card, .smp-tab-panel.active, .smp-msg { animation: smpFadeIn .25s ease; }