/* Patient Portal — standalone stylesheet, deliberately independent of the
   active theme's CSS so it can never be broken by a theme/Elementor update. */

:root {
	--ptx-primary: #2f6f6b;
	--ptx-primary-dark: #234f4c;
	--ptx-accent: #e9a23b;
	--ptx-bg: #f6f8f7;
	--ptx-surface: #ffffff;
	--ptx-border: #e1e6e4;
	--ptx-text: #23302e;
	--ptx-text-muted: #5c6b68;
	--ptx-success: #2f8f5b;
	--ptx-error: #c14343;
	--ptx-radius: 10px;
	--ptx-shadow: 0 1px 3px rgba(20, 40, 38, 0.08), 0 1px 2px rgba(20, 40, 38, 0.06);
}

* { box-sizing: border-box; }

body.ptx-body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--ptx-bg);
	color: var(--ptx-text);
	line-height: 1.5;
}

.ptx-topbar {
	background: var(--ptx-surface);
	border-bottom: 1px solid var(--ptx-border);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 10;
}

.ptx-brand {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ptx-primary-dark);
	text-decoration: none;
}

.ptx-topbar-links a {
	color: var(--ptx-text-muted);
	text-decoration: none;
	margin-left: 18px;
	font-size: 0.92rem;
}
.ptx-topbar-links a:hover { color: var(--ptx-primary); }

.ptx-shell {
	display: flex;
	min-height: calc(100vh - 57px);
}

.ptx-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: var(--ptx-surface);
	border-right: 1px solid var(--ptx-border);
	padding: 18px 0;
}

.ptx-sidebar a {
	display: block;
	padding: 10px 20px;
	color: var(--ptx-text-muted);
	text-decoration: none;
	font-size: 0.94rem;
	border-left: 3px solid transparent;
}
.ptx-sidebar a:hover { background: var(--ptx-bg); color: var(--ptx-primary-dark); }
.ptx-sidebar a.is-active {
	color: var(--ptx-primary-dark);
	font-weight: 600;
	border-left-color: var(--ptx-primary);
	background: var(--ptx-bg);
}

.ptx-main {
	flex: 1;
	padding: 28px 32px;
	max-width: 1080px;
}

.ptx-page-title {
	font-size: 1.5rem;
	margin: 0 0 20px;
	color: var(--ptx-primary-dark);
}

.ptx-card {
	background: var(--ptx-surface);
	border: 1px solid var(--ptx-border);
	border-radius: var(--ptx-radius);
	box-shadow: var(--ptx-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

.ptx-card h2, .ptx-card h3 {
	margin-top: 0;
	color: var(--ptx-primary-dark);
}

.ptx-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.ptx-stat {
	background: var(--ptx-surface);
	border: 1px solid var(--ptx-border);
	border-radius: var(--ptx-radius);
	padding: 18px;
	box-shadow: var(--ptx-shadow);
}
.ptx-stat .ptx-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--ptx-primary-dark); }
.ptx-stat .ptx-stat-label { font-size: 0.85rem; color: var(--ptx-text-muted); margin-top: 4px; }

.ptx-auth-wrap {
	max-width: 440px;
	margin: 48px auto;
	padding: 0 16px;
}

.ptx-form label {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 14px 0 6px;
	color: var(--ptx-text);
}
.ptx-form input[type=text],
.ptx-form input[type=email],
.ptx-form input[type=password],
.ptx-form input[type=tel],
.ptx-form input[type=date],
.ptx-form input[type=time],
.ptx-form input[type=number],
.ptx-form select,
.ptx-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ptx-border);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	background: var(--ptx-surface);
	color: var(--ptx-text);
}
.ptx-form textarea { min-height: 80px; resize: vertical; }
.ptx-form .ptx-checkbox-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; }
.ptx-form .ptx-checkbox-row input { margin-top: 4px; }
.ptx-form .ptx-checkbox-row label { margin: 0; font-weight: 400; }

.ptx-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .ptx-row-2 { grid-template-columns: 1fr; } }

.ptx-btn {
	display: inline-block;
	background: var(--ptx-primary);
	color: #fff;
	border: none;
	padding: 11px 20px;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	margin-top: 18px;
}
.ptx-btn:hover { background: var(--ptx-primary-dark); }
.ptx-btn.ptx-btn-outline { background: transparent; color: var(--ptx-primary); border: 1px solid var(--ptx-primary); }
.ptx-btn.ptx-btn-danger { background: var(--ptx-error); }
.ptx-btn.ptx-btn-sm { padding: 6px 12px; font-size: 0.85rem; margin-top: 0; }

.ptx-alert {
	padding: 12px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 0.92rem;
}
.ptx-alert-error { background: #fbeaea; color: var(--ptx-error); border: 1px solid #f2c6c6; }
.ptx-alert-success { background: #e9f6ef; color: var(--ptx-success); border: 1px solid #bfe6d0; }

.ptx-links-row { margin-top: 14px; font-size: 0.88rem; }
.ptx-links-row a { color: var(--ptx-primary); }

table.ptx-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
table.ptx-table th, table.ptx-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ptx-border);
}
table.ptx-table th { color: var(--ptx-text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }

.ptx-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
}
.ptx-badge-scheduled { background: #e6f0fd; color: #1c5fbf; }
.ptx-badge-completed { background: #e9f6ef; color: var(--ptx-success); }
.ptx-badge-cancelled, .ptx-badge-failed { background: #fbeaea; color: var(--ptx-error); }
.ptx-badge-no_show { background: #f2f0ea; color: #8a7a3f; }
.ptx-badge-paid { background: #e9f6ef; color: var(--ptx-success); }
.ptx-badge-unpaid, .ptx-badge-created { background: #fff4e3; color: #a5670b; }

.ptx-search-row { display: flex; gap: 10px; margin-bottom: 18px; }
.ptx-search-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--ptx-border); border-radius: 6px; }

.ptx-pagination { margin-top: 16px; display: flex; gap: 8px; }
.ptx-pagination a, .ptx-pagination span {
	padding: 6px 12px; border: 1px solid var(--ptx-border); border-radius: 6px; text-decoration: none; color: var(--ptx-text);
	font-size: 0.85rem;
}
.ptx-pagination .is-current { background: var(--ptx-primary); color: #fff; border-color: var(--ptx-primary); }

.ptx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ptx-border); margin-bottom: 18px; flex-wrap: wrap; }
.ptx-tabs a {
	padding: 10px 14px; text-decoration: none; color: var(--ptx-text-muted); font-size: 0.9rem;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ptx-tabs a.is-active { color: var(--ptx-primary-dark); border-bottom-color: var(--ptx-primary); font-weight: 600; }

.ptx-muted { color: var(--ptx-text-muted); font-size: 0.88rem; }
.ptx-empty { color: var(--ptx-text-muted); font-style: italic; padding: 20px 0; }

@media (max-width: 820px) {
	.ptx-shell { flex-direction: column; }
	.ptx-sidebar { width: 100%; display: flex; overflow-x: auto; padding: 8px 0; border-right: none; border-bottom: 1px solid var(--ptx-border); }
	.ptx-sidebar a { padding: 8px 14px; white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
	.ptx-sidebar a.is-active { border-left-color: transparent; border-bottom-color: var(--ptx-primary); }
	.ptx-main { padding: 18px; }
	table.ptx-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ==========================================================================
   Patient Login / Registration redesign ("auth2")
   Scoped entirely to its own namespace -- nothing above this line is
   changed, renamed or removed, so the dashboard, admin pages, and the
   forgot-password/reset-password/admin-login screens (which still use the
   original .ptx-auth-wrap/.ptx-card/.ptx-form styles above) are completely
   unaffected by anything below.
   ========================================================================== */

:root {
	--ptx2-mint: #eaf4f1;
	--ptx2-mint-deep: #d8ece5;
	--ptx2-ink: #1c2b29;
	--ptx2-ink-soft: #56645f;
	--ptx2-line: #e3ece8;
	--ptx2-radius-lg: 20px;
	--ptx2-radius-md: 12px;
	--ptx2-shadow: 0 12px 32px -12px rgba(31, 74, 68, 0.18);
}

/* Soft neutral page background so the compact white card reads as a
   card, not a full-bleed panel -- the whole login/register experience is
   a bounded, centered element, never something that fills the viewport. */
.ptx2-body { background: #f3f6f5; }

.ptx2-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	box-sizing: border-box;
}

.ptx2-card-outer {
	width: 100%;
	max-width: 900px;
	background: #ffffff;
	border-radius: var(--ptx2-radius-lg);
	box-shadow: var(--ptx2-shadow);
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 62%);
	align-items: stretch;
}

.ptx2-visual {
	background: linear-gradient(160deg, var(--ptx2-mint) 0%, var(--ptx2-mint-deep) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	position: relative;
	overflow: hidden;
}

.ptx2-visual-inner { position: relative; z-index: 1; text-align: center; max-width: 100%; }

/* Explicit pixel size, not just a max-width -- this is the actual
   rendered size regardless of container width, so the illustration can
   never balloon to fill its column even if some other rule is ever
   missing or overridden. The <svg> itself also carries width/height
   attributes (see templates/auth/emblem.php) as a second, CSS-independent
   safety net against the same failure mode. */
.ptx2-emblem { width: 200px; height: 200px; max-width: 100%; margin: 0 auto 20px; display: block; }

.ptx2-brand-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ptx2-ink);
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}

.ptx2-brand-tag {
	font-size: 0.84rem;
	color: var(--ptx2-ink-soft);
	line-height: 1.55;
	margin: 0;
}

.ptx2-blob {
	position: absolute;
	border-radius: 50%;
	opacity: 0.55;
	filter: blur(2px);
}
.ptx2-blob-a { width: 140px; height: 140px; background: #ffffff; top: -40px; left: -50px; opacity: 0.45; }
.ptx2-blob-b { width: 100px; height: 100px; background: #c3e3d9; bottom: -30px; right: -24px; }

.ptx2-formpanel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36px 32px;
	background: #ffffff;
	min-width: 0;
}

.ptx2-card { width: 100%; max-width: 420px; }

.ptx2-mobile-brand { display: none; text-align: center; margin-bottom: 18px; }
.ptx2-mobile-brand .ptx2-emblem { width: 140px; height: 140px; margin-bottom: 10px; }
.ptx2-mobile-brand .ptx2-brand-name { font-size: 1.05rem; margin-bottom: 2px; }

.ptx2-heading { font-size: 1.7rem; font-weight: 700; color: var(--ptx2-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.ptx2-subtext { font-size: 0.96rem; color: var(--ptx2-ink-soft); line-height: 1.6; margin: 0 0 28px; }

.ptx2-form { display: flex; flex-direction: column; gap: 18px; }

.ptx2-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ptx2-ink);
	margin-bottom: 7px;
}

.ptx2-input-wrap { position: relative; }

.ptx2-field input[type=text],
.ptx2-field input[type=email],
.ptx2-field input[type=password],
.ptx2-field input[type=tel],
.ptx2-field input[type=date],
.ptx2-field select,
.ptx2-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--ptx2-line);
	border-radius: var(--ptx2-radius-md);
	font-size: 0.96rem;
	font-family: inherit;
	color: var(--ptx2-ink);
	background: #fbfdfc;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ptx2-field textarea { min-height: 76px; resize: vertical; }

.ptx2-field input:hover, .ptx2-field select:hover, .ptx2-field textarea:hover { border-color: #bcd8cf; }

.ptx2-field input:focus, .ptx2-field select:focus, .ptx2-field textarea:focus,
.ptx2-toggle-visibility:focus-visible, .ptx2-btn:focus-visible, .ptx2-footer-link:focus-visible,
.ptx2-check input:focus-visible {
	outline: none;
	border-color: var(--ptx-primary);
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(47, 111, 107, 0.14);
}

.ptx2-input-wrap.has-toggle input { padding-right: 46px; }

.ptx2-toggle-visibility {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ptx2-ink-soft);
}
.ptx2-toggle-visibility:hover { background: var(--ptx2-mint); color: var(--ptx-primary); }
.ptx2-toggle-visibility svg { width: 19px; height: 19px; }

.ptx2-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ptx2-between-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: -4px;
}

.ptx2-check { display: flex; align-items: center; gap: 8px; }
.ptx2-check input[type=checkbox] {
	width: 18px; height: 18px; margin: 0; accent-color: var(--ptx-primary); cursor: pointer; border-radius: 4px;
}
.ptx2-check label { font-size: 0.88rem; color: var(--ptx2-ink-soft); cursor: pointer; margin: 0; }

.ptx2-check-consent { align-items: flex-start; margin-top: 2px; }
.ptx2-check-consent input { margin-top: 3px; }
.ptx2-check-consent label { font-size: 0.84rem; line-height: 1.55; }

.ptx2-forgot-link { font-size: 0.87rem; color: var(--ptx-primary); font-weight: 600; text-decoration: none; }
.ptx2-forgot-link:hover { text-decoration: underline; }

.ptx2-btn {
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: var(--ptx2-radius-md);
	background: var(--ptx-primary);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	margin-top: 4px;
	box-shadow: 0 8px 20px -8px rgba(47, 111, 107, 0.55);
	transition: background 0.15s ease, transform 0.1s ease;
}
.ptx2-btn:hover { background: var(--ptx-primary-dark); }
.ptx2-btn:active { transform: translateY(1px); }

.ptx2-footer { text-align: center; margin-top: 26px; font-size: 0.9rem; color: var(--ptx2-ink-soft); }
.ptx2-footer-link { color: var(--ptx-primary); font-weight: 700; text-decoration: none; }
.ptx2-footer-link:hover { text-decoration: underline; }

.ptx2-alert {
	padding: 12px 14px;
	border-radius: var(--ptx2-radius-md);
	margin-bottom: 18px;
	font-size: 0.9rem;
}
.ptx2-alert-error { background: #fbeaea; color: var(--ptx-error); border: 1px solid #f2c6c6; }
.ptx2-alert-success { background: #e9f6ef; color: var(--ptx-success); border: 1px solid #bfe6d0; }

.ptx2-strength { margin-top: 6px; }
.ptx2-strength-track { height: 5px; border-radius: 999px; background: var(--ptx2-line); overflow: hidden; }
.ptx2-strength-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--ptx-error); transition: width 0.2s ease, background 0.2s ease; }
.ptx2-strength-label { display: block; font-size: 0.78rem; color: var(--ptx2-ink-soft); margin-top: 5px; }

@media (max-width: 900px) {
	.ptx2-shell { padding: 0; }
	.ptx2-card-outer { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; min-height: 100vh; }
	.ptx2-visual { display: none; }
	.ptx2-mobile-brand { display: block; }
	.ptx2-formpanel { padding: 32px 20px 44px; }
	.ptx2-row-2 { grid-template-columns: 1fr; gap: 18px; }
}

@media (min-width: 901px) {
	.ptx2-shell { padding: 40px 20px; }
}

@media (max-width: 420px) {
	.ptx2-heading { font-size: 1.4rem; }
	.ptx2-card { max-width: 100%; }
	.ptx2-mobile-brand .ptx2-emblem { width: 120px; height: 120px; }
}