/* ==========================================================================
   SUDAIR PHARMA — E-REPORTING
   Patient Safety / Report Side Effects page (Pharmacovigilance, page 135) only.

   Loaded only on that page (inc/e-reporting.php), and every rule is also
   scoped under :is(.elementor-135, .elementor-97) — so no other form on the site can be reached,
   even if this file were loaded elsewhere by mistake.

   The forms keep the site's existing form look: they carry .sud-cr__form, the
   same Elementor Form styling used on Careers and Contact Us (careers.css) —
   fields, focus ring, submit button. This file only adds what those forms do not
   have: the reporter-type chooser, visible labels, group headings, guidance
   lines, dropdowns and the Gregorian / Hijri date switch.

   Colours, type and radii come from the design system tokens (and the .sud-cr
   aliases careers.css defines on the panel), not new values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANCHORS — land below the sticky header
   -------------------------------------------------------------------------- */

:is(.elementor-135, .elementor-97) #report-form,
:is(.elementor-135, .elementor-97) .sud-er__panel,
:is(.elementor-135, .elementor-97) .sud-er__title {
	scroll-margin-top: calc(var(--sud-hd-h, 86px) + 16px);
}

/* --------------------------------------------------------------------------
   THE CHOOSER — a native Elementor container of two native Button widgets,
   styled here as the page's own white option cards (styling only).
   -------------------------------------------------------------------------- */

:is(.elementor-135, .elementor-97) .e-con.sud-er__choose {
	--gap: clamp(.75rem, 1.4vw, 1rem);
	--row-gap: clamp(.75rem, 1.4vw, 1rem);
	--column-gap: clamp(.75rem, 1.4vw, 1rem);
	margin-block-start: clamp(1.5rem, 2.6vw, 2.25rem);
}

:is(.elementor-135, .elementor-97) .e-con.sud-er__choose > .elementor-widget-button.sud-er__option {
	flex: 1 1 calc(50% - clamp(.75rem, 1.4vw, 1rem));
	min-inline-size: 0;
	inline-size: auto;
	max-inline-size: 100%;
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 4.5rem;
	padding: 1rem 1.1rem;
	background-color: var(--sud-surface, #fff);
	border: 1px solid var(--cr-line, #E3EAE6);
	border-radius: var(--sud-radius, 16px);
	box-shadow: 0 1px 2px rgba(11, 31, 23, .04);
	font-family: var(--sud-font-display, "Plus Jakarta Sans", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	text-align: start;
	color: var(--cr-ink, #0B1F17);
	fill: var(--cr-ink, #0B1F17);
	transition:
		border-color .25s var(--cr-ease, ease),
		box-shadow .25s var(--cr-ease, ease),
		background-color .25s var(--cr-ease, ease);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button-content-wrapper {
	flex: 1 1 auto;
	min-inline-size: 0;
	align-items: center;
	justify-content: flex-start;
	gap: .85rem;
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button-text {
	flex: 1 1 auto;
	min-inline-size: 0;
	white-space: normal;
	color: var(--cr-ink, #0B1F17);
}

/* The icon, in a soft green circle; solid green once chosen. */
:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	margin: 0;
	border-radius: 50%;
	background-color: rgba(0, 99, 68, .08);
	font-size: 1rem;
	color: var(--cr-green, #006344);
	fill: var(--cr-green, #006344);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button-icon svg {
	inline-size: 1rem;
	block-size: 1rem;
	fill: currentColor;
}

/* A chevron after the label: down, and up once that form is open. Drawn with
   borders and rotated about its own centre, so it has no direction to flip. */
:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button::after {
	content: "";
	flex: 0 0 auto;
	box-sizing: content-box;
	inline-size: .45rem;
	block-size: .45rem;
	margin-inline-start: .85rem;
	border-inline-end: 2px solid var(--cr-green, #006344);
	border-block-end: 2px solid var(--cr-green, #006344);
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	transition: transform .25s var(--cr-ease, ease);
}

[dir="rtl"] :is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button::after {
	transform: rotate(-45deg);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option.is-selected .elementor-button::after {
	transform: rotate(-135deg);
}

[dir="rtl"] :is(.elementor-135, .elementor-97) .elementor-element.sud-er__option.is-selected .elementor-button::after {
	transform: rotate(135deg);
}

@media (hover: hover) {
	:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button:hover {
		background-color: var(--sud-surface, #fff);
		border-color: var(--cr-green, #006344);
		box-shadow: 0 10px 24px rgba(0, 99, 68, .10);
	}
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button:focus-visible {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 3px;
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option.is-selected .elementor-button {
	background-color: #F2F8F5;
	border-color: var(--cr-green, #006344);
	box-shadow: inset 0 0 0 1px var(--cr-green, #006344);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option.is-selected .elementor-button-icon {
	background-color: var(--cr-green, #006344);
	color: #fff;
	fill: #fff;
}

/* --------------------------------------------------------------------------
   THE TWO FORM PANELS
   Hidden only once the page script has run (html.sud-er-ready). Without it,
   both forms show under their own titles and still work.
   -------------------------------------------------------------------------- */

html.sud-er-ready :is(.elementor-135, .elementor-97) .e-con.sud-er__panel:not(.is-open) {
	display: none;
}

:is(.elementor-135, .elementor-97) .e-con.sud-er__panel {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
	padding-block-start: clamp(1.5rem, 2.6vw, 2rem);
	border-block-start: 1px solid var(--cr-line, #E3EAE6);
}

/* Native Heading widget: the form's title. */
:is(.elementor-135, .elementor-97) .elementor-element.sud-er__title .elementor-heading-title {
	margin: 0;
	font-family: var(--sud-font-display, "Plus Jakarta Sans", sans-serif);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	text-align: start;
	color: var(--cr-green, #006344);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__title .elementor-heading-title:focus {
	outline: none;
}

/* Native Text Editor widget: the form's intro line. */
:is(.elementor-135, .elementor-97) .elementor-element.sud-er__intro {
	margin-block-start: .5rem;
	font-family: var(--sud-font-body, "Plus Jakarta Sans", sans-serif);
	font-size: .9375rem;
	line-height: 1.6;
	text-align: start;
	color: var(--cr-body, #55665E);
}

:is(.elementor-135, .elementor-97) .elementor-element.sud-er__intro p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   INSIDE THE FORMS
   Selectors carry the form widget's own classes so they outrank Elementor's
   generated form rules, as careers.css does.
   -------------------------------------------------------------------------- */

/*
 * Every field in these forms is full width. Elementor pads each field group by
 * half its column gap and pulls the row wrapper out by the same amount;
 * careers.css replaces the end padding for its two-column forms. Restoring the
 * same 5px on both sides makes fields line up exactly with the panel edges.
 */
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group,
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group.e-form__buttons {
	padding-inline: 5px;
}

/* Labels (the careers forms hide them; these forms need them). */
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group > .elementor-field-label {
	display: block;
	margin-block-end: .45rem;
	padding: 0;
	font-family: var(--sud-font-body, "Plus Jakarta Sans", sans-serif);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cr-ink, #0B1F17);
	text-align: start;
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-mark-required .elementor-field-label::after {
	content: "*";
	color: #B3261E;
	padding-inline-start: .2em;
}

/* Group headings ("About the patient", "Suspect drug(s)", …). */
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group.elementor-field-type-html {
	margin-block-end: .35rem;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er__group {
	inline-size: 100%;
	margin: clamp(1.1rem, 2vw, 1.5rem) 0 .35rem;
	padding-block-end: .55rem;
	border-block-end: 1px solid var(--cr-line, #E3EAE6);
	font-family: var(--sud-font-display, "Plus Jakarta Sans", sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cr-green, #006344);
	text-align: start;
}

:is(.elementor-135, .elementor-97) .sud-er__form .elementor-form-fields-wrapper > .elementor-field-type-html:first-child .sud-er__group {
	margin-block-start: 0;
}

/* Guidance under a field — smaller, as the workbook asks. */
:is(.elementor-135, .elementor-97) .sud-er__form .sud-er__hint {
	flex-basis: 100%;
	inline-size: 100%;
	margin: .45rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--cr-body, #55665E);
	text-align: start;
}

/* Dropdowns, matched to the text fields in careers.css. */
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-select-wrapper {
	inline-size: 100%;
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-select-wrapper select {
	inline-size: 100%;
	block-size: auto;
	min-block-size: 3.2rem;
	padding-block: .95rem;
	padding-inline: 1.1rem 2.75rem;
	background-color: var(--sud-surface, #fff);
	border: 1px solid var(--cr-line, #E3EAE6);
	border-radius: var(--sud-radius, 16px);
	font-family: var(--sud-font-body, "Plus Jakarta Sans", sans-serif);
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.4;
	color: var(--cr-ink, #0B1F17);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-select-wrapper select:focus {
	outline: none;
	border-color: var(--cr-green, #006344);
	box-shadow: 0 0 0 3px rgba(0, 99, 68, .14);
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group .elementor-select-wrapper .select-caret-down-wrapper {
	inset-inline-start: auto;
	inset-inline-end: 1.05rem;
	color: var(--cr-green, #006344);
	font-size: .75rem;
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group.elementor-error .elementor-select-wrapper select {
	border-color: #B3261E;
}

/* Text areas a little shorter than the careers message box. */
:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group textarea.elementor-field {
	min-block-size: 6.5rem;
}

/* --------------------------------------------------------------------------
   DATES — Gregorian / Hijri switch (added by e-reporting.js)
   -------------------------------------------------------------------------- */

:is(.elementor-135, .elementor-97) .sud-er__form .elementor-field-group.sud-er__cal {
	align-items: center;
}

:is(.elementor-135, .elementor-97) .sud-er__form.elementor-widget-form .elementor-form .elementor-field-group.sud-er__cal > .elementor-field-label {
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
	margin-inline-end: .75rem;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__switch {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 2px;
	margin-block-end: .45rem;
	padding: 3px;
	background-color: var(--sud-surface, #fff);
	border: 1px solid var(--cr-line, #E3EAE6);
	border-radius: 999px;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__switch .sud-er-cal__mode {
	margin: 0;
	padding: .3rem .8rem;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-family: var(--sud-font-body, "Plus Jakarta Sans", sans-serif);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cr-body, #55665E);
	cursor: pointer;
	transition: background-color .2s var(--cr-ease, ease), color .2s var(--cr-ease, ease);
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__switch .sud-er-cal__mode[aria-pressed="true"] {
	background-color: var(--cr-green, #006344);
	color: #fff;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__switch .sud-er-cal__mode:focus-visible {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 2px;
}

:is(.elementor-135, .elementor-97) .sud-er__form .elementor-field-group > .elementor-field,
:is(.elementor-135, .elementor-97) .sud-er__form .elementor-field-group > .flatpickr-mobile {
	flex-basis: 100%;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er__cal.is-hijri > .elementor-date-field,
:is(.elementor-135, .elementor-97) .sud-er__form .sud-er__cal.is-hijri > .flatpickr-mobile {
	display: none;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri {
	flex-basis: 100%;
	display: grid;
	grid-template-columns: minmax(4.5rem, .8fr) minmax(0, 1.7fr) minmax(5.5rem, 1fr);
	gap: .5rem;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri[hidden],
:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__out[hidden] {
	display: none;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 3.2rem;
	padding-block: .95rem;
	padding-inline: .9rem 2rem;
	background-color: var(--sud-surface, #fff);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--cr-green, #006344) 50%),
		linear-gradient(135deg, var(--cr-green, #006344) 50%, transparent 50%);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
	border: 1px solid var(--cr-line, #E3EAE6);
	border-radius: var(--sud-radius, 16px);
	font-family: var(--sud-font-body, "Plus Jakarta Sans", sans-serif);
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.4;
	color: var(--cr-ink, #0B1F17);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

[dir="rtl"] :is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select {
	background-position: 1.05rem 55%, .75rem 55%;
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select:focus {
	outline: none;
	border-color: var(--cr-green, #006344);
	box-shadow: 0 0 0 3px rgba(0, 99, 68, .14);
}

:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__out {
	flex-basis: 100%;
	margin: .45rem 0 0;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--cr-green, #006344);
	text-align: start;
}

/* The calendar pop-up is appended to <body>; it only exists on this page. */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
	background: var(--sud-green-700, #006344);
	border-color: var(--sud-green-700, #006344);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	:is(.elementor-135, .elementor-97) .e-con.sud-er__choose > .elementor-widget-button.sud-er__option {
		flex-basis: 100%;
	}
}

@media (max-width: 480px) {
	:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"month month"
			"day   year";
	}

	:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select:nth-child(1) { grid-area: day; }
	:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select:nth-child(2) { grid-area: month; }
	:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__hijri .sud-er-cal__select:nth-child(3) { grid-area: year; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button,
	:is(.elementor-135, .elementor-97) .elementor-element.sud-er__option .elementor-button::after,
	:is(.elementor-135, .elementor-97) .sud-er__form .sud-er-cal__switch .sud-er-cal__mode {
		transition: none;
	}
}