/**
 * EU Withdrawal Compliance — Epilepsialiitto
 *
 * Sovittaa peruutuslomakkeen, vahvistusvaiheen ja Oma tili -näkymän
 * Epilepsialiitto-teeman ulkoasuun.
 *
 * Arvot poimittu teemasta:
 *   wp-content/themes/epilepsialiitto/style.css
 *
 * Latautuu lisäosan oman frontend.css:n JÄLKEEN (riippuvuus
 * 'ayudawp-euw-frontend' functions.php-koodissa), joten samat selektorit
 * riittävät eikä !important-merkintöjä tarvita.
 */

.ayudawp-euw-wrapper {
	--euw-green: #50781b;
	--euw-green-dark: #2b5700;
	--euw-purple: #5a2982;
	--euw-text: #000;
	--euw-muted: #4a4a4a;
	--euw-border: #50781b;
	--euw-radius: 5px;
	--euw-radius-input: 3px;
	--euw-font: "Source Sans Pro", "Arial", "Helvetica Neue", "Helvetica", sans-serif;

	font-family: var(--euw-font);
	color: var(--euw-text);
}

/* ---------------------------------------------------------------- Typografia */

.ayudawp-euw-wrapper .ayudawp-euw-intro,
.ayudawp-euw-wrapper .ayudawp-euw-legal-note {
	color: var(--euw-muted);
	font-size: 16px;
	line-height: 1.5;
}

.ayudawp-euw-wrapper a {
	color: var(--euw-purple);
}

.ayudawp-euw-wrapper a:hover,
.ayudawp-euw-wrapper a:focus {
	color: var(--euw-green);
}

/* ------------------------------------------------------------------ Lomake */

.ayudawp-euw-wrapper .ayudawp-euw-form {
	border: 1px solid #e1e1e1;
	border-radius: var(--euw-radius);
	padding: 1.75rem;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field > label {
	font-size: 16px;
	font-weight: 600;
	color: var(--euw-text);
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field input[type="text"],
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field input[type="email"],
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field input[type="date"],
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field select {
	height: 40px;
	padding: 0.4em 0.7em;
	border: 1px solid var(--euw-border);
	border-radius: var(--euw-radius-input);
	font-family: var(--euw-font);
	font-size: 16px;
	color: var(--euw-text);
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field textarea {
	padding: 0.4em 0.7em;
	border: 1px solid var(--euw-border);
	border-radius: var(--euw-radius-input);
	font-family: var(--euw-font);
	font-size: 16px;
	color: var(--euw-text);
	min-height: 110px;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field input:focus,
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field select:focus,
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field textarea:focus {
	outline: 2px solid var(--euw-green);
	outline-offset: 1px;
	border-color: #000;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-help {
	font-size: 14px;
	color: #5c5c5c;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-required {
	color: #b3261e;
}

/* ---------------------------------------------------------------- Painikkeet */

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button {
	min-width: 50px;
	padding: 9px 18px 10px;
	background: var(--euw-green);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--euw-radius);
	font-family: var(--euw-font);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	transition: background .3s ease-in-out, background-color .3s ease-in-out;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button:hover,
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button:focus {
	background: var(--euw-green-dark);
	color: #fff;
	border-color: transparent;
}

/* Vahvistusvaiheen "Muokkaa tietoja" — teeman toissijainen violetti. */
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button--secondary,
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button--secondary:visited {
	background: #fff;
	color: var(--euw-purple);
	border-color: var(--euw-purple);
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button--secondary:hover,
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-button--secondary:focus {
	background: var(--euw-purple);
	color: #fff;
	border-color: var(--euw-purple);
}

/* Vahvistusvaiheessa painikkeet vierekkäin — pidetään ne luettavina mobiilissa. */
.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-confirm-actions {
	gap: 0.75rem;
}

/* ------------------------------------------------- Vahvistusvaiheen yhteenveto */

/*
 * Lisäosa ei tyylitä tätä taulukkoa lainkaan, ja teema asettaa vain
 * border-collapse. Siksi taulukko kutistuu sisällön mukaan ja th on
 * selaimen oletuksena keskitetty. Korjataan molemmat.
 */

.ayudawp-euw-wrapper .ayudawp-euw-summary {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	table-layout: fixed;
}

.ayudawp-euw-wrapper .ayudawp-euw-summary th,
.ayudawp-euw-wrapper .ayudawp-euw-summary td {
	text-align: left;
	vertical-align: top;
	padding: 0.35rem 0.75rem 0.35rem 0;
	border: 0;
	font-family: var(--euw-font);
	font-size: 16px;
	line-height: 1.5;
	word-break: break-word;
}

.ayudawp-euw-wrapper .ayudawp-euw-summary th {
	width: 40%;
	font-weight: 600;
	color: var(--euw-text);
}

.ayudawp-euw-wrapper .ayudawp-euw-summary td {
	color: var(--euw-muted);
}

/* Kapealla näytöllä 40/60-jako ahdistaa pitkiä otsikoita: pinotaan riveiksi. */
@media (max-width: 480px) {

	.ayudawp-euw-wrapper .ayudawp-euw-summary,
	.ayudawp-euw-wrapper .ayudawp-euw-summary tbody,
	.ayudawp-euw-wrapper .ayudawp-euw-summary tr,
	.ayudawp-euw-wrapper .ayudawp-euw-summary th,
	.ayudawp-euw-wrapper .ayudawp-euw-summary td {
		display: block;
		width: 100%;
	}

	.ayudawp-euw-wrapper .ayudawp-euw-summary th {
		padding-bottom: 0.15rem;
		border-bottom: 0;
	}

	.ayudawp-euw-wrapper .ayudawp-euw-summary td {
		padding-top: 0;
	}
}

/* ------------------------------------------------ Vahvistusvaiheen painikkeet */

/*
 * Painikkeet ovat oman <form>-elementin sisällä, joka perii .ayudawp-euw-form
 * -laatikon (reunus, tausta, 1.75rem padding). Vahvistusvaiheessa laatikkoa ei
 * tarvita — riisutaan se, jolloin napit nousevat kiinni yhteenvetoon.
 *
 * Selektorissa kaksi luokkaa samassa elementissä, joten tämä voittaa lisäosan
 * oman .ayudawp-euw-form -säännön latausjärjestyksestä riippumatta.
 */

.ayudawp-euw-wrapper .ayudawp-euw-form.ayudawp-euw-confirm-form {
	padding: 0;
	margin: 20px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ayudawp-euw-wrapper .ayudawp-euw-confirm-form .ayudawp-euw-submit {
	margin: 0.5rem 0 0;
}

.ayudawp-euw-wrapper .ayudawp-euw-confirm-channel {
	margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------- Ilmoitukset */

.ayudawp-euw-wrapper .ayudawp-euw-notice {
	border-radius: var(--euw-radius);
	font-size: 16px;
	line-height: 1.5;
}

.ayudawp-euw-wrapper .ayudawp-euw-notice--success {
	background: #eef4e6;
	border-color: var(--euw-green);
	color: #22350a;
}

.ayudawp-euw-wrapper .ayudawp-euw-notice--error {
	background: #fbeceb;
	border-color: #b3261e;
	color: #5c1310;
}

.ayudawp-euw-wrapper .ayudawp-euw-notice--warning {
	background: #fdf6e3;
	border-color: #b8860b;
	color: #4a3505;
}

.ayudawp-euw-wrapper .ayudawp-euw-form .ayudawp-euw-field-error {
	color: #b3261e;
	font-size: 14px;
}

/* --------------------------------------------------- Oma tili: pyyntölistaus */

.ayudawp-euw-requests-table th,
.ayudawp-euw-requests-table td {
	font-family: var(--euw-font);
	font-size: 16px;
}

.ayudawp-euw-request-status--pending {
	color: #4a3505;
}

.ayudawp-euw-request-status--accepted,
.ayudawp-euw-request-status--completed {
	color: var(--euw-green-dark);
}

.ayudawp-euw-request-status--rejected {
	color: #b3261e;
}

/* ------------------------------------------------- Liite I.B -mallilomake */

.ayudawp-euw-annex-b {
	font-family: var(--euw-font);
	border-radius: var(--euw-radius);
}

.ayudawp-euw-annex-b__print .ayudawp-euw-button,
.ayudawp-euw-annex-b .ayudawp-euw-button {
	background: var(--euw-green);
	color: #fff;
	border-radius: var(--euw-radius);
	font-family: var(--euw-font);
	font-size: 18px;
	font-weight: 600;
	padding: 9px 18px 10px;
}

.ayudawp-euw-annex-b__print .ayudawp-euw-button:hover,
.ayudawp-euw-annex-b .ayudawp-euw-button:hover {
	background: var(--euw-green-dark);
	color: #fff;
}