/**
 * DT Tickets PA – modulo "Richiesta assistenza" (grafica Bootstrap Italia del tema).
 *
 * Digital-Tech Web Agency – https://www.digital-tech.cloud
 */
.dtk-f {
	--dtk-p: var(--bs-primary, #0b6e3e);
	--dtk-line: #d9dadb;
	--dtk-muted: #5c6f82;
	--dtk-soft: #f2f7f4;
	--dtk-err: #cc334d;
	padding-bottom: 3rem;
}
.dtk-f [hidden] { display: none !important; }
.dtk-f .icon { flex: 0 0 auto; }

/* Scorciatoie */
.dtk-f-kicker { margin: .5rem 0 .75rem; font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dtk-muted); }
.dtk-f-short { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-bottom: 2.5rem; }
.dtk-f-sc { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.125rem; border: 1px solid var(--dtk-line); border-radius: 6px; background: #fff; color: #1a1a1a; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .04); transition: border-color .15s, box-shadow .15s; }
.dtk-f-sc:hover, .dtk-f-sc:focus { border-color: var(--dtk-p); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); color: #1a1a1a; }
.dtk-f-sc .icon { width: 28px; height: 28px; margin-top: 2px; }
.dtk-f-sc span { display: flex; flex-direction: column; gap: .125rem; font-size: .875rem; line-height: 1.4; color: var(--dtk-muted); }
.dtk-f-sc strong { font-size: 1rem; color: var(--dtk-p); }

/* Griglia modulo + colonna */
.dtk-f-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.dtk-f-card { margin-bottom: 1.5rem; padding: 1.75rem 2rem 1rem; border: 1px solid var(--dtk-line); border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.dtk-f-h { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; }
.dtk-f-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dtk-p); color: #fff; font-size: 1rem; }
.dtk-f-spid, .dtk-f-logged { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: -.25rem 0 1.25rem; padding: .625rem .875rem; border-radius: 6px; background: var(--dtk-soft); font-size: .9375rem; }
.dtk-f-spid a { font-weight: 600; color: var(--dtk-p); }
.dtk-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.dtk-f-field { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.dtk-f-field label { margin-bottom: .375rem; font-size: 1rem; font-weight: 600; color: #1a1a1a; }
.dtk-f .dtk-f-field abbr[title], .dtk-f .dtk-f-privacy abbr[title] { border: 0; text-decoration: none; cursor: default; color: var(--dtk-err); }
.dtk-f-opt { font-weight: 400; color: var(--dtk-muted); }
.dtk-f .dtk-f-field .form-control, .dtk-f .dtk-f-field .form-select { width: 100%; height: auto; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid #8a9aa9; border-radius: 4px; background-color: #fff; font-size: 1rem; box-shadow: none; }
.dtk-f .dtk-f-field textarea.form-control { min-height: 9rem; line-height: 1.5; resize: vertical; }
.dtk-f .dtk-f-field .form-control:focus, .dtk-f .dtk-f-field .form-select:focus { border-color: var(--dtk-p); outline: 2px solid #f90; outline-offset: 1px; }
.dtk-f .dtk-f-field .form-select:disabled { background-color: #f5f6f7; color: var(--dtk-muted); }
.dtk-f-help { margin-top: .375rem; font-size: .875rem; color: var(--dtk-muted); }
.dtk-f-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.dtk-f-count.is-near { color: #a66300; font-weight: 600; }
.dtk-f-err { font-size: .875rem; font-weight: 600; color: var(--dtk-err); }
.dtk-f-err:empty { display: none; }
.dtk-f-err::before { content: "! "; }
.dtk-f .is-invalid { border-color: var(--dtk-err) !important; }
.dtk-f-privacy { margin: .5rem 0 1.5rem; }
.dtk-f-privacy .form-check { margin: 0; }
.dtk-f-privacy .form-check-label { font-size: 1rem; font-weight: 600; }
.dtk-f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dtk-f-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.dtk-f-send .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; font-size: 1.0625rem; }
.dtk-f-send .btn[disabled] { opacity: .7; }
.dtk-f-req { font-size: .875rem; color: var(--dtk-muted); }
.dtk-f-alert { margin-bottom: 1.25rem; padding: .875rem 1rem; border-left: 4px solid var(--dtk-err); border-radius: 4px; background: #fdf0f2; font-weight: 600; color: #8f1d32; }

/* Colonna "Cosa succede dopo" */
.dtk-f-aside { position: sticky; top: 1.5rem; }
.dtk-f-howbox { padding: 1.5rem; border-radius: 8px; background: var(--dtk-soft); border-top: 4px solid var(--dtk-p); }
.dtk-f-howh { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; }
.dtk-f-how { margin: 0; padding: 0; list-style: none; counter-reset: dtk; }
.dtk-f-how li { position: relative; margin-bottom: 1rem; padding-left: 2.25rem; font-size: .9375rem; line-height: 1.45; color: #33475b; counter-increment: dtk; }
.dtk-f-how li::before { content: counter(dtk); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border: 2px solid var(--dtk-p); border-radius: 50%; font-size: .8125rem; font-weight: 700; color: var(--dtk-p); background: #fff; }
.dtk-f-how strong { display: block; color: #1a1a1a; }

/* Esito */
.dtk-f-done { max-width: 760px; margin: 1rem 0 3rem; padding: 2.5rem; border: 1px solid var(--dtk-line); border-top: 6px solid #008055; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); outline: 0; }
.dtk-f-done-i { width: 56px; height: 56px; margin-bottom: .5rem; }
.dtk-f-done-n { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 6px; background: var(--dtk-soft); font-size: 1.0625rem; }
.dtk-f-done-n strong { font-family: "Roboto Mono", Menlo, monospace; font-size: 1.25rem; color: var(--dtk-p); }
.dtk-f-done-b { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

@media (max-width: 991.98px) {
	.dtk-f-grid { grid-template-columns: 1fr; gap: 0; }
	.dtk-f-aside { position: static; order: -1; margin-bottom: 1.5rem; }
	.dtk-f-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.dtk-f-how li { margin: 0; }
}
@media (max-width: 767.98px) {
	.dtk-f-row { grid-template-columns: 1fr; }
	.dtk-f-card { padding: 1.25rem 1rem .5rem; }
	.dtk-f-how { grid-template-columns: 1fr; }
	.dtk-f-done { padding: 1.5rem 1.25rem; }
	.dtk-f-send .btn { width: 100%; justify-content: center; }
}
.dtk-f .dtk-f-field .form-select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235c6f82' d='M12 15.5 6.5 10l1-1 4.5 4.5L16.5 9l1 1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 1.5rem; }
.dtk-f .dtk-f-field .form-control::placeholder { font-weight: 400; color: #8a9aa9; }