/* ===================================================================== Fortrydelsesformular – custom styling Matchet til Kontakt Os-designet (Erfa Inventar A/S) Indsættes i assets/css/style.css (eller via "Indsæt CSS"). Targeter KUN .m-form på formularsiden – rører ikke engine/HTML. --------------------------------------------------------------------- Design-tokens (udtrukket fra /kontakt-os/): Primær rød : #942E28 Tekst : #333 Kant : #EEE Font : "Sen", sans-serif Radius : 10px (kort/hero) / 30px (knap/pill) ===================================================================== */ :root { --erfa-red: #942E28; --erfa-red-dark: #7a251f; --erfa-text: #333; --erfa-border: #eee; --erfa-radius: 10px; --erfa-radius-pill: 30px; } /* Begræns alt til formularsiden, så vi ikke påvirker andre m-form moduler. pageId454 (DK) og pageId455 (DE) sættes på . Begge formularsider rammes via :is(.pageId454, .pageId455). Tilføj flere ID'er her hvis I opretter formularsider på andre sproglag. */ :is(.pageId454, .pageId455) .m-form { max-width: 720px; margin: 0 auto 48px; font-family: "Sen", sans-serif; color: var(--erfa-text); } /* ---- Røde fadede hjørne-beslag KUN om feltblokken ---- */ /* Feltblokken = fieldset Input22 (først) → Input27 (sidst). Vi gør feltblokken til et sammenhængende område uden synlig ramme, og hænger fire fadede hjørner på første og sidste felt via pseudo-elementer. */ :is(.pageId454, .pageId455) .m-form-article form { position: static; padding: 0; } :is(.pageId454, .pageId455) .m-form .form-group { border: 0; margin-bottom: 0; padding: 14px 24px; background: none; } /* Lidt ekstra luft i top/bund af blokken så hjørnerne har plads */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementInput22 { position: relative; padding-top: 22px; } :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementTextarea464 { position: relative; padding-bottom: 22px; margin-bottom: 24px; } /* Hjørne-længde/tykkelse via variabler */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementInput22::before, :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementInput22::after, :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementTextarea464::before, :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementTextarea464::after { content: ""; position: absolute; width: 48px; height: 48px; pointer-events: none; background-repeat: no-repeat; } /* Øverste venstre hjørne (på første felt) */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementInput22::before { top: 0; left: 0; background-image: linear-gradient(90deg, var(--erfa-red), rgba(148,46,40,0)), linear-gradient(180deg, var(--erfa-red), rgba(148,46,40,0)); background-size: 48px 2px, 2px 48px; background-position: left top, left top; } /* Øverste højre hjørne (på første felt) */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementInput22::after { top: 0; right: 0; background-image: linear-gradient(270deg, var(--erfa-red), rgba(148,46,40,0)), linear-gradient(180deg, var(--erfa-red), rgba(148,46,40,0)); background-size: 48px 2px, 2px 48px; background-position: right top, right top; } /* Nederste venstre hjørne (på sidste felt) */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementTextarea464::before { bottom: 0; left: 0; background-image: linear-gradient(90deg, var(--erfa-red), rgba(148,46,40,0)), linear-gradient(0deg, var(--erfa-red), rgba(148,46,40,0)); background-size: 48px 2px, 2px 48px; background-position: left bottom, left bottom; } /* Nederste højre hjørne (på sidste felt) */ :is(.pageId454, .pageId455) .m-form .form-group.m-form-FormElementTextarea464::after { bottom: 0; right: 0; background-image: linear-gradient(270deg, var(--erfa-red), rgba(148,46,40,0)), linear-gradient(0deg, var(--erfa-red), rgba(148,46,40,0)); background-size: 48px 2px, 2px 48px; background-position: right bottom, right bottom; } /* ---- Ren overskrift (intet rødt banner) ---- */ :is(.pageId454, .pageId455) .m-form-header.page-title { background: none; padding: 0; margin-bottom: 4px; border-bottom: 0; } :is(.pageId454, .pageId455) .m-form-headline { color: var(--erfa-text); font-weight: 700; font-size: 30px; margin: 0; } /* ---- Brødtekst / introafsnit ---- */ :is(.pageId454, .pageId455) .m-form-article p { line-height: 1.6; font-size: 16px; } /* ---- Punktopstilling: genskab bullets (template nulstiller list-style globalt) ---- */ :is(.pageId454, .pageId455) .m-form-article ul { list-style: disc outside !important; padding-left: 22px; margin: 0 0 16px; } :is(.pageId454, .pageId455) .m-form-article ul li { list-style: disc outside !important; display: list-item; line-height: 1.6; margin-bottom: 4px; } /* Labels */ :is(.pageId454, .pageId455) .m-form .form-label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; } /* Påkrævet-stjerne i primærrød */ :is(.pageId454, .pageId455) .m-form .form-required { color: var(--erfa-red); margin-left: 2px; } /* ---- Inputfelter ---- */ :is(.pageId454, .pageId455) .m-form .form-input, :is(.pageId454, .pageId455) .m-form input[type="text"], :is(.pageId454, .pageId455) .m-form input[type="email"], :is(.pageId454, .pageId455) .m-form textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid #d8d8d8; border-radius: 8px; font-family: inherit; font-size: 15px; color: var(--erfa-text); transition: border-color .15s ease, box-shadow .15s ease; } :is(.pageId454, .pageId455) .m-form .form-input:focus, :is(.pageId454, .pageId455) .m-form input:focus, :is(.pageId454, .pageId455) .m-form textarea:focus { outline: none; border-color: var(--erfa-red); box-shadow: 0 0 0 3px rgba(148, 46, 40, .12); } /* ---- Radio (Fortryd hele ordren? Ja/Nej) ---- */ /* ScanNet pakker hver radio i en Bootstrap input-group med grå addon-boks. Fjern boksene og stil knap + tekst rent op. */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .input-group, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .input-group.trailing { display: inline-flex; align-items: center; margin-right: 24px; border: 0; vertical-align: middle; } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .input-group-addon { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; height: auto !important; line-height: 1 !important; width: auto !important; } /* Custom rund radio (appearance:none) — fuld kontrol, ingen firkantet highlight */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] input[type="radio"], :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .m-form-input { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 18px; height: 18px; margin: 0 8px 0 0; padding: 0; border: 2px solid #b9b9b9 !important; border-radius: 50% !important; background: #fff !important; box-shadow: none !important; outline: none !important; cursor: pointer; vertical-align: middle; position: relative; flex: 0 0 auto; transition: border-color .15s ease; } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] input[type="radio"]:checked, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .m-form-input:checked { border-color: var(--erfa-red) !important; } /* Indre prik ved valg */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] input[type="radio"]:checked::after, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .m-form-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--erfa-red); transform: translate(-50%, -50%); } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] input[type="radio"]:focus-visible, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .m-form-input:focus-visible { border-color: var(--erfa-red) !important; box-shadow: 0 0 0 3px rgba(148, 46, 40, .2) !important; } /* tekst-delen (Ja / Nej) sidder i .input-group-main med .form-label. Hæv specificitet (fieldset-klasse + to klasser) så den slår .form-label-reglen. */ :is(.pageId454, .pageId455) fieldset[class*="m-form-FormElementRadio"] .input-group-main.form-label, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .input-group-main { display: inline-flex !important; align-items: center; border: 0; background: none; padding: 0; margin: 0; font-weight: 400; font-size: 15px; line-height: 1; width: auto; } /* ---- Send-knap "Bekræft fortrydelse" som pill ---- */ :is(.pageId454, .pageId455) .m-form button[type="submit"], :is(.pageId454, .pageId455) .m-form input[type="submit"], :is(.pageId454, .pageId455) .m-form .form-submit { background-color: var(--erfa-red); color: #fff; font-weight: 700; font-family: inherit; font-size: 16px; border: 0; border-radius: var(--erfa-radius-pill); padding: 13px 32px; cursor: pointer; transition: background-color .15s ease; } :is(.pageId454, .pageId455) .m-form button[type="submit"]:hover, :is(.pageId454, .pageId455) .m-form input[type="submit"]:hover, :is(.pageId454, .pageId455) .m-form .form-submit:hover { background-color: var(--erfa-red-dark); } /* ---- reCAPTCHA-widget: ingen boks, bare luft ---- */ :is(.pageId454, .pageId455) .m-form .w-recatpcha, :is(.pageId454, .pageId455) .m-form .w-recaptcha { border: 0; background: none; padding: 0; margin: 8px 0 24px; } /* ---- Fjern de grå skillelinjer (hr) i formularen ---- */ :is(.pageId454, .pageId455) .m-form-article hr { border: 0; height: 0; margin: 0; background: none; } /* ---- Footer: knap flugtet med reCAPTCHA i højre side ---- */ /* reCAPTCHA (64px) står til venstre i sin egen række; knappen (50px) trækkes op via transform så midterne flugter (96px), uden at påvirke layout-flow. Footeren kollapses til 0 højde så der ikke står tomt rum tilbage. */ :is(.pageId454, .pageId455) .m-form .panel-footer { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; overflow: visible !important; text-align: right !important; } :is(.pageId454, .pageId455) .m-form .panel-footer .button, :is(.pageId454, .pageId455) .m-form .panel-footer button[type="submit"] { transform: translate(-15px, -96px); margin: 0 !important; } :is(.pageId454, .pageId455) .m-form .panel-body { border: 0 !important; } /* Panelet har en svag box-shadow (0 1px 1px) der ses som en grå streg under knappen. Fjern den. */ :is(.pageId454, .pageId455) .m-form .panel, :is(.pageId454, .pageId455) .m-form .panel.panel-border { box-shadow: none !important; } /* ---- OBS-note under "Hvem booker returforsendelse?" ---- Noten er wrappet i

direkte i tekst-boksens HTML (samme princip som .withdrawal-intro). Klassen er en del af indholdet og er derfor stabil — i modsætning til ScanNets m-form-NNN-numre. */ :is(.pageId454, .pageId455) .m-form .returnote { padding: 0 24px !important; margin-top: 4px !important; color: rgb(101, 103, 100) !important; font-size: 15px !important; line-height: 1.5 !important; } /* ---- Checkbox (forståelse: returforsendelse for egen regning) ---- Samme input-group-mønster som radioerne, men FIRKANTET boks. Generisk selektor så fremtidige checkboxe også rammes. */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .input-group, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .input-group.trailing { display: inline-flex; align-items: center; border: 0; vertical-align: middle; } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .input-group-addon { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; height: auto !important; line-height: 1 !important; width: auto !important; } /* Custom firkantet checkbox */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] input[type="checkbox"], :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .m-form-input { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 18px; height: 18px; margin: 0 8px 0 0; padding: 0; border: 2px solid #b9b9b9 !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important; outline: none !important; cursor: pointer; vertical-align: middle; position: relative; flex: 0 0 auto; transition: border-color .15s ease, background-color .15s ease; } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] input[type="checkbox"]:checked, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .m-form-input:checked { border-color: var(--erfa-red) !important; background: var(--erfa-red) !important; } /* Hvidt flueben ved valg */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] input[type="checkbox"]:checked::after, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .m-form-input:checked::after { content: ""; position: absolute; top: 1px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] input[type="checkbox"]:focus-visible, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .m-form-input:focus-visible { border-color: var(--erfa-red) !important; box-shadow: 0 0 0 3px rgba(148, 46, 40, .2) !important; } /* tekst-delen ("Ja") på linje, lys og normal vægt */ :is(.pageId454, .pageId455) fieldset[class*="m-form-FormElementCheckbox"] .input-group-main.form-label, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .input-group-main { display: inline-flex !important; align-items: center; border: 0; background: none; padding: 0; margin: 0; font-weight: 400; font-size: 15px; line-height: 1; width: auto; } /* ---- Valgt option: tekst mørk (som overskrift) + fed ---- input ligger i .input-group-addon, tekst i .input-group-main som er SØSKENDE til addon — derfor :has(input:checked) på addon + nabo-main. */ :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementRadio"] .input-group-addon:has(input:checked) + .input-group-main, :is(.pageId454, .pageId455) .m-form [class*="m-form-FormElementCheckbox"] .input-group-addon:has(input:checked) + .input-group-main { color: #111 !important; font-weight: 700 !important; } /* ---- Responsiv ---- */ @media (max-width: 767px) { :is(.pageId454, .pageId455) .m-form-header.page-title { padding: 22px 20px; } :is(.pageId454, .pageId455) .m-form-headline { font-size: 23px; } /* Ved <=767px gør ScanNet knappen fuld bredde, og der er ikke plads ved siden af reCAPTCHA. Nulstil transformen så footeren tager højde og knappen falder pænt ned UNDER reCAPTCHA. */ :is(.pageId454, .pageId455) .m-form .panel-footer { height: auto !important; text-align: left !important; margin-top: 16px !important; } :is(.pageId454, .pageId455) .m-form .panel-footer .button, :is(.pageId454, .pageId455) .m-form .panel-footer button[type="submit"] { transform: none !important; } }