/*
 * Patient portal responsive layer.
 * Kept separate from the base stylesheet so the existing portal behaviour and
 * branding remain stable while small-screen layout can evolve independently.
 */

.cpa-auth,
.cpa-public,
.cpa-account {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.cpa-auth *,
.cpa-public *,
.cpa-account * {
	box-sizing: border-box;
}

.cpa-auth img,
.cpa-public img,
.cpa-account img,
.cpa-auth svg,
.cpa-public svg,
.cpa-account svg {
	max-width: 100%;
	height: auto;
}

.cpa-auth form,
.cpa-public form,
.cpa-account form,
.cpa-auth fieldset,
.cpa-public fieldset,
.cpa-account fieldset,
.cpa-auth label,
.cpa-public label,
.cpa-account label,
.cpa-auth input,
.cpa-public input,
.cpa-account input,
.cpa-auth select,
.cpa-public select,
.cpa-account select,
.cpa-auth textarea,
.cpa-public textarea,
.cpa-account textarea {
	min-width: 0;
	max-width: 100%;
}

.cpa-auth input,
.cpa-public input,
.cpa-account input,
.cpa-auth select,
.cpa-public select,
.cpa-account select,
.cpa-auth textarea,
.cpa-public textarea,
.cpa-account textarea,
.cpa-auth button,
.cpa-public button,
.cpa-account button {
	font: inherit;
}

.cpa-auth input:not([type="checkbox"]):not([type="radio"]),
.cpa-public input:not([type="checkbox"]):not([type="radio"]),
.cpa-account input:not([type="checkbox"]):not([type="radio"]),
.cpa-auth select,
.cpa-public select,
.cpa-account select,
.cpa-auth textarea,
.cpa-public textarea,
.cpa-account textarea {
	width: 100%;
}

.cpa-auth a,
.cpa-public a,
.cpa-account a,
.cpa-auth button,
.cpa-public button,
.cpa-account button {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.cpa-auth :focus-visible,
.cpa-public :focus-visible,
.cpa-account :focus-visible {
	outline: 3px solid rgba( 18, 133, 123, .24 );
	outline-offset: 2px;
}

.cpa-auth-card,
.cpa-card,
.cpa-list-card,
.cpa-contact-card,
.cpa-book-confirm,
.cpa-success-card,
.cpa-message,
.cpa-identity > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Auth screen: stable three-tab control without theme-induced overflow. */
.cpa-auth {
	padding-inline: 16px;
}

.cpa-auth-card {
	width: min( 100%, 980px );
	margin-inline: auto;
}

.cpa-choice {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 6px;
	overflow: visible;
}

.cpa-choice button {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 8px;
	line-height: 1.25;
	white-space: normal;
}

.cpa-auth-panel[hidden] {
	display: none !important;
}

.cpa-auth-panel.is-active {
	animation: cpa-panel-in .18s ease-out;
}

@keyframes cpa-panel-in {
	from { opacity: 0; transform: translateY( 4px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

/* Account shell and navigation. */
.cpa-account {
	width: min( 1480px, calc( 100% - 24px ) );
	margin-inline: auto;
}

.cpa-account-head,
.cpa-account-grid,
.cpa-content,
.cpa-page-head,
.cpa-card,
.cpa-list-card {
	min-width: 0;
}

.cpa-user-chip {
	max-width: min( 310px, 48vw );
}

.cpa-user-chip > span {
	min-width: 0;
}

.cpa-user-chip strong,
.cpa-user-chip a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpa-horizontal,
.cpa-member-tabs {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.cpa-horizontal a,
.cpa-member-tabs label {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.cpa-horizontal::-webkit-scrollbar,
.cpa-member-tabs::-webkit-scrollbar {
	height: 4px;
}

.cpa-horizontal::-webkit-scrollbar-thumb,
.cpa-member-tabs::-webkit-scrollbar-thumb {
	background: rgba( 15, 115, 106, .28 );
	border-radius: 999px;
}

.cpa-account-grid {
	grid-template-columns: minmax( 220px, 240px ) minmax( 0, 1fr );
}

.cpa-side,
.cpa-side nav,
.cpa-side a {
	min-width: 0;
}

.cpa-side a {
	min-height: 48px;
	line-height: 1.3;
}

.cpa-list-card > div,
.cpa-list-card h3,
.cpa-list-card p,
.cpa-message h3,
.cpa-message p {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cpa-actions {
	flex-wrap: wrap;
	gap: 8px;
}

.cpa-actions a,
.cpa-actions button {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cpa-contact-card a,
.cpa-contact-card p,
.cpa-contact-card strong {
	overflow-wrap: anywhere;
}

/* Tablet: replace the very long sidebar with a compact two-column action tray. */
@media ( max-width: 900px ) {
	.cpa-account {
		width: 100%;
		margin: 0;
		border-radius: 0;
		border-inline: 0;
	}

	.cpa-account-grid {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
	}

	.cpa-side {
		padding: 12px;
	}

	.cpa-side nav {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 8px;
		width: 100%;
		overflow: visible;
	}

	.cpa-side a {
		width: 100%;
		min-width: 0;
		padding: 10px 12px;
		white-space: normal;
		text-align: left;
	}

	.cpa-side a > span {
		flex: 0 0 auto;
	}

	.cpa-user-chip > span {
		display: flex;
		flex-direction: column;
	}

	.cpa-list-card {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 14px;
	}

	.cpa-list-card .cpa-actions {
		justify-content: flex-start;
	}
}

/* Phones: comfortable spacing, full-width controls and no horizontal page drift. */
@media ( max-width: 640px ) {
	.cpa-auth,
	.cpa-public,
	.cpa-account {
		font-size: 16px;
		overflow-x: clip;
	}

	.cpa-auth {
		padding-inline: 10px;
		margin-block: 12px;
	}

	.cpa-auth-card {
		padding: 20px 14px;
		border-radius: 18px;
	}

	.cpa-auth-intro h1,
	.cpa-auth-intro h2 {
		font-size: clamp( 27px, 8vw, 36px );
		line-height: 1.12;
	}

	.cpa-auth-intro p {
		font-size: 15px;
	}

	.cpa-choice {
		gap: 4px;
		padding: 4px;
	}

	.cpa-choice button {
		min-height: 46px;
		padding: 8px 4px;
		font-size: 13px;
	}

	.cpa-auth-panel,
	.cpa-auth-form,
	.cpa-fields,
	.cpa-form-grid,
	.cpa-book-fields {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}

	.cpa-account-head {
		padding: 14px 12px;
		gap: 10px;
		align-items: center;
	}

	.cpa-account-head > div:first-child {
		min-width: 0;
	}

	.cpa-account-head h2 {
		font-size: 22px;
		line-height: 1.15;
	}

	.cpa-account-head > div:first-child > span {
		font-size: 12px;
	}

	.cpa-user-chip {
		max-width: 46%;
		gap: 8px;
	}

	.cpa-user-chip > b {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
	}

	.cpa-user-chip strong,
	.cpa-user-chip a {
		max-width: 112px;
		font-size: 13px;
	}

	.cpa-horizontal {
		padding-inline: 6px;
	}

	.cpa-horizontal a {
		min-height: 48px;
		padding: 13px 11px;
		font-size: 14px;
		white-space: nowrap;
	}

	.cpa-side {
		padding: 10px;
	}

	.cpa-side nav {
		gap: 7px;
	}

	.cpa-side a {
		min-height: 50px;
		padding: 9px 10px;
		font-size: 14px;
	}

	.cpa-content {
		padding: 20px 12px 28px;
	}

	.cpa-page-head {
		margin-bottom: 18px;
	}

	.cpa-page-head h1,
	.cpa-page-head h2 {
		font-size: clamp( 27px, 8vw, 34px );
		line-height: 1.15;
	}

	.cpa-page-head p {
		font-size: 15px;
	}

	.cpa-card,
	.cpa-book-confirm,
	.cpa-success-card,
	.cpa-contact-card,
	.cpa-message {
		padding: 16px 13px;
		border-radius: 16px;
	}

	.cpa-identity,
	.cpa-contact-grid,
	.cpa-credentials,
	.cpa-book-confirm-grid,
	.cpa-list-card {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}

	.cpa-identity > div {
		padding: 15px;
	}

	.cpa-list-card {
		gap: 13px;
		padding: 16px 13px;
	}

	.cpa-list-card > div {
		padding: 0;
	}

	.cpa-list-card .cpa-actions,
	.cpa-status-stack {
		align-items: stretch;
		justify-content: flex-start;
	}

	.cpa-actions a,
	.cpa-actions button,
	.cpa-auth-form > button[type="submit"],
	.cpa-card form > button[type="submit"] {
		width: 100%;
		min-height: 46px;
		text-align: center;
	}

	.cpa-member-tabs {
		gap: 8px;
		padding-bottom: 5px;
	}

	.cpa-member-tabs label {
		width: min( 250px, 82vw );
	}

	.cpa-message-head,
	.cpa-book-confirm-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.cpa-otp-row,
	.cpa-otp-entry,
	.cpa-auth-help,
	.cpa-auth-help-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.cpa-otp-row button,
	.cpa-otp-entry button,
	.cpa-auth-help-actions a {
		width: 100%;
		min-height: 46px;
		justify-content: center;
		text-align: center;
	}

	.cpa-public input[type="file"],
	.cpa-account input[type="file"] {
		font-size: 14px;
		overflow: hidden;
	}

	.cpa-public textarea,
	.cpa-account textarea {
		min-height: 112px;
	}

	.cpa-book-actions,
	.cpa-success-actions {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: 9px;
	}

	.cpa-book-actions a,
	.cpa-book-actions button,
	.cpa-success-actions a,
	.cpa-success-actions button {
		width: 100%;
		min-height: 46px;
		justify-content: center;
	}
}

@media ( max-width: 420px ) {
	.cpa-choice button {
		font-size: 12px;
		letter-spacing: -.01em;
	}

	.cpa-account-head h2 {
		font-size: 19px;
	}

	.cpa-user-chip strong,
	.cpa-user-chip a {
		max-width: 86px;
	}

	.cpa-side a {
		font-size: 13px;
	}
}

@media ( hover: hover ) {
	.cpa-horizontal a,
	.cpa-side a,
	.cpa-choice button,
	.cpa-actions a,
	.cpa-actions button {
		transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
	}

	.cpa-side a:hover,
	.cpa-actions a:hover,
	.cpa-actions button:hover {
		transform: translateY( -1px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cpa-auth *,
	.cpa-public *,
	.cpa-account * {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}