/* Registreringsflödet (stegformulär + Bolagsverket) */
/* Typeform-liknande formulär ([data-stepper] form) */
.tf { min-height: 430px; display: flex; flex-direction: column; }
.tf > .grid { display: block; flex: 1; }
.tf-progress { margin-bottom: 40px; }
.tf-progress-bar { height: 4px; background: rgb(30 23 23 / .12); border-radius: 4px; overflow: hidden; }
.tf-progress-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .35s ease; }
.tf-count { margin-top: 10px; font-size: 14px; color: var(--body); }
.tf [data-step] { padding-block: 10px 30px; }
.tf [data-step].tf-in { animation: tf-slide .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tf-slide { from { opacity: 0; transform: translateY(calc(var(--tf-dir, 1) * 28px)); } to { opacity: 1; transform: none; } }
.tf [data-step] .form-label, .tf [data-step] legend { font-size: 26px; line-height: 1.25; font-weight: 500; margin-bottom: 18px; }
@media (min-width: 768px) { .tf [data-step] .form-label, .tf [data-step] legend { font-size: 32px; } }
.tf .form-input { font-size: 24px; padding: 8px 0; background: transparent; border: 0; border-bottom: 2px solid rgb(30 23 23 / .35); border-radius: 0; }
.tf .form-input:focus { box-shadow: none; border-bottom-color: var(--ink); }
.tf [data-step] label:has(input[type=radio]) { display: flex; align-items: center; gap: 14px; border: 2px solid rgb(30 23 23 / .3); border-radius: 8px; padding: 14px 16px; font-size: 18px; background: #fff; transition: border-color .15s, background-color .15s; }
.tf [data-step] label:has(input[type=radio]):hover, .tf [data-step] label:has(input[type=radio]:checked) { border-color: var(--ink); background: #fff; }
.tf [data-step] label:has(input[type=radio]) input { margin: 0; }
.tf [data-step] label[data-key]::before { content: attr(data-key); display: inline-flex; flex: none; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 4px; font-size: 13px; font-weight: 600; }
.tf [data-step] label:has(input[type=radio]) input { position: absolute; opacity: 0; pointer-events: none; }
.tf [data-step] label:has(input[type=radio]:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.tf-nav { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.tf-back { background: none; border: 0; cursor: pointer; font: 500 16px "Borna",sans-serif; color: var(--ink); padding: 8px 4px; }
.tf-hint { font-size: 14px; color: var(--body); }
.tf [data-submit] { margin-top: 0; }
.tf [hidden] { display: none !important; }

.tf-lead { font-size: 16px; line-height: 1.4; color: var(--body); margin-bottom: 8px; }
.form-help { margin: -8px 0 10px; font-size: 15px; color: var(--body); }
.tf-status { margin-top: 14px; font-size: 15px; color: var(--body); }
.tf-confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tf-card { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 16px 18px; font-size: 16px; line-height: 1.4; width: 100%; }
.tf-card strong { font-size: 20px; font-weight: 600; color: var(--ink); }
.tf-lead { font-size: 16px; line-height: 1.4; color: var(--body); margin-bottom: 8px; }

.tf-seats { display: flex; align-items: center; gap: 12px; }
.tf-seats .form-input { width: 110px; text-align: center; -moz-appearance: textfield; }
.tf-seats .form-input::-webkit-outer-spin-button, .tf-seats .form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tf-seat-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font: 500 24px/1 "Borna",sans-serif; cursor: pointer; color: var(--ink); transition: background-color .15s; }
.tf-seat-btn:hover { background: var(--brand); }
.tf-estimate { margin-top: 12px; min-height: 1.5em; font-size: 15px; color: var(--ink); font-weight: 500; }

.tf-summary { margin-bottom: 26px; }
.tf-summary h3 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.tf-summary dl > div { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(30 23 23 / .15); }
.tf-summary dt { grid-column: 1 / -1; font-size: 13px; color: var(--body); }
.tf-summary dd { font-size: 17px; line-height: 1.35; color: var(--ink); }
.tf-summary button { background: none; border: 0; padding: 0; cursor: pointer; font: 500 14px "Borna",sans-serif; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; align-self: end; }

/* Animerad kryssruta */
.check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check { flex: none; width: 28px; height: 28px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 7px; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, transform .2s, box-shadow .2s; }
.check svg { width: 20px; height: 20px; }
.check path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease .08s; }
label:hover > .check { box-shadow: 0 0 0 4px rgb(52 209 143 / .25); }
.check-input:checked ~ .check { background: var(--brand); border-color: var(--ink); animation: check-pop .3s ease; }
.check-input:checked ~ .check path { stroke-dashoffset: 0; }
.check-input:focus-visible ~ .check { outline: 3px solid var(--brand); outline-offset: 3px; }
@keyframes check-pop { 50% { transform: scale(1.18); } }
.tf [data-submit] { align-self: flex-start; }
[data-lang-toggle], [data-menu-toggle], .check, label { cursor: pointer; }


.rg{background:var(--mint,#e6ece9);border-radius:16px;padding:24px;max-width:708px;box-sizing:border-box}
@media(min-width:768px){.rg{padding:50px}}
.rg .rg-step{margin:0}
.rg-fields{display:block}
.form-label{display:block;font-weight:500;font-size:16px;color:var(--ink,#1e1717);margin-bottom:6px}
.form-input{width:100%;box-sizing:border-box;background:#fff;border:2px solid rgb(30 23 23/.25);border-radius:6px;padding:12px 14px;font:400 16px/1.4 "Borna",sans-serif;color:var(--ink,#1e1717)}
.form-input:focus{border-color:var(--brand,#34d18f);outline:none;box-shadow:0 0 0 3px rgb(52 209 143/.3)}
.form-input[aria-invalid="true"]{border-color:#b3261e}
.form-error{color:#b3261e;font-size:14px;margin-top:4px}
.sr-only-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden}
.btn-solid{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--ink,#1e1717);color:#fff;border:0;border-radius:50px;padding:14px 34px;font:600 16px/1.3 "Borna",sans-serif;letter-spacing:.5px;text-transform:uppercase;transition:background-color .15s,color .15s}
.btn-solid:hover{background:var(--brand,#34d18f);color:var(--ink,#1e1717)}
.rg-options{display:flex;flex-direction:column;gap:12px}
.rg-options label{position:relative}
.rg-check{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink,#1e1717)}
.rg-success{background:#fff;border-left:4px solid var(--brand,#34d18f);padding:20px;font-size:18px;color:var(--ink,#1e1717)}
.rg-errors{background:#fff;border-left:4px solid #b3261e;padding:14px 16px;margin-bottom:20px;font-size:15px}
.rg-errors p{margin:0;font-weight:500}.rg-errors ul{margin:6px 0 0;padding-left:18px}
.tf .rg-step{display:block}
.tf [data-step] fieldset{border:0;padding:0;margin:0;min-width:0}
.rg{background:none;padding:0;border-radius:0;max-width:none}
@media(min-width:768px){.rg{padding:0}}
.tf{min-height:380px}
.tf .form-input{font-size:22px}

/* Hello Elementors knappstil (rosa #c36) ska inte läcka in i våra knappar */
.rg button.tf-back,.rg button.tf-back:hover,.rg button.tf-back:focus{background:none;border:0;color:var(--ink,#1e1717);padding:8px 4px;font:500 16px "Borna",sans-serif;text-decoration:underline;text-decoration-color:var(--brand,#34d18f);text-decoration-thickness:2px;text-underline-offset:4px}
.rg button.tf-seat-btn,.rg button.tf-seat-btn:focus{background:#fff;color:var(--ink,#1e1717);border:2px solid var(--ink,#1e1717)}
.rg button.tf-seat-btn:hover{background:var(--brand,#34d18f);color:var(--ink,#1e1717)}
.rg .tf-summary button,.rg .tf-summary button:hover,.rg .tf-summary button:focus{background:none;border:0;color:var(--ink,#1e1717);padding:0}
.rg button.btn-solid,.rg button.btn-solid:focus{background:var(--ink,#1e1717);color:#fff;border:0}
.rg button.btn-solid:hover{background:var(--brand,#34d18f);color:var(--ink,#1e1717)}

/* Sammanfattning: svaren ska ligga i linje med etiketten (ingen standardindrag på dd) */
.rg .tf-summary dl,.rg .tf-summary dt,.rg .tf-summary dd{margin:0;padding-left:0}
.rg .tf-summary dd{margin-inline-start:0}
.rg-check span:last-child{line-height:1.5}

.tf-pw{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:var(--body,#363636)}
.tf-pw li{display:inline-flex;align-items:center;gap:8px}
.tf-pw li::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(30,23,23,.35);box-sizing:border-box;transition:background-color .2s,border-color .2s}
.tf-pw li.is-ok{color:var(--ink,#1e1717)}
.tf-pw li.is-ok::before{background:var(--brand,#34d18f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1717' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.8l4.2 4.2L18.8 7.6'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--brand,#34d18f)}

.tf-pw-tools{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}
.rg button.tf-link,.rg button.tf-link:hover,.rg button.tf-link:focus{background:none;border:0;padding:0;color:var(--ink,#1e1717);font:500 15px "Borna",sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:var(--brand,#34d18f);text-decoration-thickness:2px;text-underline-offset:4px}
.rg button.tf-link:hover{text-decoration-color:var(--ink,#1e1717)}

.tf-pair{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.tf-pair{grid-template-columns:1fr 1fr;gap:24px}}
.tf [data-step] .tf-pair .form-label{font-size:16px;line-height:1.4;font-weight:500;margin-bottom:4px}

.tf-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.tf-actions .tf-nav{margin-top:0}
.tf-actions [data-submit]{margin:0}

/* Stegformuläret: diskret fokus – bara understrykningen byter färg och blir tjockare */
.rg .tf .form-input:focus,.rg .tf .form-input:focus-visible{outline:none;box-shadow:none;border-radius:0;border-bottom:3px solid var(--brand,#34d18f);margin-bottom:-1px}