.freyza-prescription-gate {
	border: 1px solid var(--freyza-color-border, #e5e7eb);
	border-radius: var(--freyza-radius-card, 12px);
	background: var(--freyza-color-surface, #ffffff);
	padding: clamp(20px, 4vw, 32px);
}

.freyza-prescription-gate__eyebrow,
.freyza-prescription-form__hint {
	color: var(--freyza-color-muted, #6b7280);
	font-size: 0.82rem;
}

.freyza-prescription-gate__eyebrow {
	margin: 0 0 8px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.freyza-prescription-gate__title {
	margin: 0 0 12px;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.25;
}

.freyza-prescription-gate__text {
	margin: 0 0 12px;
	color: var(--freyza-color-text, #1f2937);
	line-height: 1.65;
}

.freyza-prescription-gate__details {
	margin-top: 20px;
}

.freyza-prescription-gate__details summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.freyza-prescription-gate__details summary::-webkit-details-marker {
	display: none;
}

.freyza-prescription-gate__form {
	margin-top: 24px;
}

.freyza-prescription-form {
	display: grid;
	gap: 28px;
}

.freyza-prescription-form label {
	color: var(--freyza-color-muted);
	font-size: 0.82rem;
	font-weight: 400;
	margin-bottom: 8px;
}

.freyza-prescription-form .form-row {
	margin: 0;
}

.freyza-prescription-form__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Native file inputs can't be restyled as a whole, but the button half can,
   which is what the design actually specifies — the "no file chosen" text
   beside it is the browser's own. */

.freyza-prescription-form__file {
	background: none;
	border: 0;
	color: var(--freyza-color-muted);
	font-size: 0.85rem;
	min-height: 0;
	padding: 0;
}

.freyza-prescription-form__file::file-selector-button {
	background: #eef1f5;
	border: 1px solid #dce2e9;
	border-radius: var(--freyza-radius-button);
	color: var(--freyza-color-primary);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	margin-right: 12px;
	padding: 11px 18px;
}

.freyza-prescription-form__file::file-selector-button:hover {
	background: #e3e8ef;
}

.freyza-prescription-form__hint {
	display: block;
	margin-top: 8px;
}

/* Product rows are divided by a rule rather than boxed, so a request for
   several products reads as one list instead of a stack of cards. */

.freyza-prescription-form__products {
	border-top: 1px solid var(--freyza-color-border);
	display: grid;
	gap: 16px;
	padding-top: 24px;
}

.freyza-prescription-form__product-row {
	align-items: end;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 160px) auto;
}

.freyza-prescription-form__product-row + .freyza-prescription-form__product-row {
	border-top: 1px solid var(--freyza-color-border);
	padding-top: 16px;
}

.freyza-prescription-form__remove,
.freyza-prescription-form__add {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0;
	text-align: left;
}

.freyza-prescription-form__remove {
	color: var(--freyza-color-primary);
	padding-bottom: 14px;
}

.freyza-prescription-form__add {
	color: var(--freyza-color-secondary);
	justify-self: start;
	margin-top: -12px;
}

.freyza-prescription-form__remove:hover,
.freyza-prescription-form__add:hover {
	text-decoration: underline;
}

.freyza-prescription-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.freyza-prescription-form__submit,
.freyza-prescription-form__cancel {
	align-items: center;
	border-radius: var(--freyza-radius-button);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9rem;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	text-decoration: none;
	transition: background-color var(--freyza-transition-fast), border-color var(--freyza-transition-fast), color var(--freyza-transition-fast);
}

.freyza-prescription-form__submit {
	background: var(--freyza-color-primary);
	border: 1px solid var(--freyza-color-primary);
	color: #ffffff;
	font-weight: 500;
}

.freyza-prescription-form__submit:hover,
.freyza-prescription-form__submit:focus-visible {
	background: var(--freyza-color-secondary);
	border-color: var(--freyza-color-secondary);
	color: #ffffff;
}

.freyza-prescription-form__cancel {
	background: none;
	border: 1px solid #dce2e9;
	color: var(--freyza-color-primary);
}

.freyza-prescription-form__cancel:hover,
.freyza-prescription-form__cancel:focus-visible {
	background: #eef1f5;
	color: var(--freyza-color-primary);
}

@media (max-width: 760px) {
	.freyza-prescription-form__grid {
		grid-template-columns: 1fr;
	}

	/* Quantity and Remove stay on one line on mobile, per the design — only
	   the product select drops to its own row. */
	.freyza-prescription-form__product-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.freyza-prescription-form__product-row .form-row:first-child {
		grid-column: 1 / -1;
	}

	.freyza-prescription-form__actions {
		flex-direction: column-reverse;
	}

	.freyza-prescription-form__submit,
	.freyza-prescription-form__cancel {
		width: 100%;
	}
}

/* Account > Prescription Requests */

.freyza-account-prescriptions {
	display: flex;
	flex-direction: column;
	gap: var(--freyza-space-5);
	min-width: 0;
}

.freyza-account-prescriptions__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--freyza-space-4);
	justify-content: space-between;
}

.freyza-account-prescriptions__header .freyza-account-dashboard__title {
	margin: 0;
}

.freyza-account-prescriptions__upload-button {
	align-items: center;
	background: var(--freyza-color-primary);
	border: 1px solid var(--freyza-color-primary);
	border-radius: var(--freyza-radius-button);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 500;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	transition: background-color var(--freyza-transition-fast), border-color var(--freyza-transition-fast);
}

.freyza-account-prescriptions__upload-button:hover,
.freyza-account-prescriptions__upload-button:focus-visible {
	background: var(--freyza-color-secondary);
	border-color: var(--freyza-color-secondary);
	color: #ffffff;
}

.freyza-account-prescriptions__form {
	border: 1px solid var(--freyza-color-border);
	border-radius: var(--freyza-radius-card);
	max-width: 900px;
	padding: var(--freyza-space-6);
}

/* The shared form's multi-column rows only collapse below 760px of viewport,
   but here they sit inside the account panel beside the sidebar, so they run
   out of room while the viewport is still wide. Stack them sooner. */

@media (max-width: 1100px) {
	.freyza-account-prescriptions__form .freyza-prescription-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.freyza-account-prescriptions__form .freyza-prescription-form__product-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.freyza-account-prescriptions__form .freyza-prescription-form__product-row .form-row:first-child {
		grid-column: 1 / -1;
	}
}

.freyza-account-prescriptions__list {
	display: flex;
	flex-direction: column;
	gap: var(--freyza-space-5);
}

.freyza-account-prescription-card {
	border: 1px solid var(--freyza-color-border);
	border-radius: var(--freyza-radius-card);
	overflow: hidden;
}

.freyza-account-prescription-card__head {
	align-items: center;
	background: #eef1f5;
	color: var(--freyza-color-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: var(--freyza-space-3);
	justify-content: space-between;
	padding: 14px var(--freyza-space-5);
}

.freyza-account-prescription-card__status {
	background: #f6efe3;
	border-radius: 999px;
	color: #b08a46;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 6px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.freyza-account-prescription-card__status--approved,
.freyza-account-prescription-card__status--partially_approved {
	background: #e9f3ec;
	color: #3e7a52;
}

.freyza-account-prescription-card__status--rejected,
.freyza-account-prescription-card__status--expired,
.freyza-account-prescription-card__status--cancelled {
	background: #f8e9e7;
	color: #b3453e;
}

.freyza-account-prescription-card__body {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--freyza-space-4);
	justify-content: space-between;
	padding: var(--freyza-space-5);
}

.freyza-account-prescription-card__file {
	align-items: center;
	display: flex;
	gap: var(--freyza-space-4);
	min-width: 0;
}

.freyza-account-prescription-card__icon {
	align-items: center;
	background: #eef1f5;
	border-radius: var(--freyza-radius-input);
	display: flex;
	flex-shrink: 0;
	font-size: 1.25rem;
	height: 56px;
	justify-content: center;
	width: 56px;
}

.freyza-account-prescription-card__details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.freyza-account-prescription-card__products {
	color: var(--freyza-color-primary);
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0;
	overflow-wrap: anywhere;
}

.freyza-account-prescription-card__meta {
	color: var(--freyza-color-muted);
	font-size: 0.85rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.freyza-account-prescription-card__actions {
	display: flex;
	flex-shrink: 0;
	gap: var(--freyza-space-3);
}

.freyza-account-prescription-card__action {
	align-items: center;
	border: 1px solid #dce2e9;
	border-radius: var(--freyza-radius-button);
	color: var(--freyza-color-primary);
	display: inline-flex;
	font-size: 0.85rem;
	justify-content: center;
	min-height: 40px;
	padding: 8px 18px;
	text-decoration: none;
	transition: background-color var(--freyza-transition-fast), border-color var(--freyza-transition-fast), color var(--freyza-transition-fast);
}

.freyza-account-prescription-card__action:hover,
.freyza-account-prescription-card__action:focus-visible {
	background: #eef1f5;
	color: var(--freyza-color-primary);
}

.freyza-account-prescription-card__action--primary,
.freyza-account-prescription-card__action--primary:hover,
.freyza-account-prescription-card__action--primary:focus-visible {
	background: var(--freyza-color-primary);
	border-color: var(--freyza-color-primary);
	color: #ffffff;
	font-weight: 500;
}

@media (max-width: 640px) {
	.freyza-account-prescriptions__header {
		align-items: stretch;
		flex-direction: column;
	}

	.freyza-account-prescriptions__upload-button {
		width: 100%;
	}

	/* Dashed outline on mobile, per the design — it reads as an affordance
	   rather than competing with the page's primary actions. */
	.freyza-account-prescriptions__upload-button {
		background: none;
		border: 1px dashed var(--freyza-color-secondary);
		color: var(--freyza-color-secondary);
	}

	.freyza-account-prescriptions__upload-button:hover,
	.freyza-account-prescriptions__upload-button:focus-visible {
		background: #eef1f5;
		border-color: var(--freyza-color-secondary);
		color: var(--freyza-color-secondary);
	}

	/* The mobile design drops the panel border and lets the form run edge to
	   edge in the page's own padding. */
	.freyza-account-prescriptions__form {
		border: 0;
		padding: 0;
	}

	/* The upload screen is a screen of its own on mobile, titled by the compact
	   bar at the top, so the page heading and its button would only repeat it. */
	.freyza-account-prescriptions--upload .freyza-account-prescriptions__header {
		display: none;
	}

	.freyza-account-prescription-card__body {
		align-items: stretch;
		flex-direction: column;
	}

	.freyza-account-prescription-card__action {
		min-height: 44px;
		width: 100%;
	}
}