/* ============================================================ Turist-landingpage — scoped override-lag Indlæses KUN i app/Views/figma/country-package-turist.php. Bygger ovenpå de eksisterende lv-* design-tokens (--lv-primary m.fl.) fra resources/css/tourist-design.css (kompileret i ). Alt herinde er nye klasser (turist-*) eller eksplicit scopede overrides, så forsiden/andre sider ikke påvirkes. ============================================================ */ /* ---------- Hero: kompakt + parallax ---------- */ /* Hero-billedet (img.turist-hero-img sættes af landing.js). Original: h-[674px]. Det synlige hero-felt afgrænses nu af det hvide indholds-"ark" (.turist-sheet), der trækkes op over billedet — så vi behøver ikke skrøbelig pixel-matematik. Billedet skal blot være højt nok til at dække hero-båndet + give plads til parallax-bevægelsen. */ .turist-hero-img { height: 640px !important; top: 0 !important; will-change: transform; transform: translateY(0); } @media (max-width: 640px) { .turist-hero-img { height: 560px !important; } } /* Hvidt indholds-ark: rejser sig over hero-billedet med afrundet top. Sikrer at indhold altid har ren hvid baggrund (intet billede-gennemslag), uanset eksakt højde, og giver et mere kompakt hero. */ .turist-sheet { position: relative; z-index: 1; background-color: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px; margin-top: -88px; box-shadow: 0 -18px 40px -24px rgba(8, 12, 40, 0.18); } @media (max-width: 640px) { .turist-sheet { margin-top: -64px; border-top-left-radius: 22px; border-top-right-radius: 22px; } } /* Mørkere gradient-overlay for læsbar tekst på lyse billeder (genb. lv-hero-overlay-idé). Højde = hele billedet, så HELE hero-båndet mørklægges (det hvide ark dækker den nederste, ikke-synlige del). Gradient tunet til den synlige top-del. */ .turist-hero-overlay { position: absolute; top: 0; left: 0; right: 0; height: 640px; pointer-events: none; z-index: 0; /* Mørkere i toppen, fader ud mod bunden (ikke et solidt overlay) */ background: linear-gradient(to bottom, rgba(8, 12, 40, 0.62) 0%, rgba(8, 12, 40, 0.42) 28%, rgba(8, 12, 40, 0.22) 52%, rgba(8, 12, 40, 0.00) 80%); } @media (max-width: 640px) { .turist-hero-overlay { height: 560px; } } /* Hero-tekstblok: rykket højere op og mere kompakt, så teksten står flot centreret i det synlige hero-bånd (modvirker page-wrapperens gap-[91px]). */ .turist-hero { position: relative; z-index: 2; /* over .turist-sheet, så stats-kortet kan straddle grænsen */ margin-top: -96px; padding-top: 8px; padding-bottom: 104px; text-align: center; } @media (max-width: 640px) { .turist-hero { margin-top: -64px; padding-bottom: 96px; /* plads til den bund-pinnede stat-stribe (kan ombryde) */ } } /* Overskrift: aldrig mere end 2 linjer */ .turist-hero-h1 { max-width: 820px; margin: 0 auto; font-weight: 600; line-height: 1.14; font-size: clamp(1.9rem, 4.6vw, 3.25rem); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; /* pænere linjebalance i moderne browsere */ } .turist-hero-sub { max-width: 560px; margin: 14px auto 0; font-size: clamp(0.95rem, 1.7vw, 1.05rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); } /* Destinations-chip i hero: flag + land (tydelig indikation af hvor man ansøger til) */ .turist-hero__country { display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 16px; padding: 6px 14px 6px 7px; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.30); backdrop-filter: blur(4px); font-size: 0.9rem; color: #fff; line-height: 1; } .turist-hero__flag { width: 26px; height: 26px; object-fit: contain; /* runde flag-billeder vises som de er */ flex-shrink: 0; } .turist-hero__country strong { font-weight: 700; } /* ---------- Hero CTA'er ---------- */ .turist-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } .turist-hero-cta { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 9999px; font-weight: 600; font-size: 0.95rem; font-family: var(--lv-font-body); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; text-decoration: none; border: 1.5px solid transparent; } .turist-hero-cta:active { transform: scale(0.98); } .turist-hero-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } .turist-hero-cta-primary { background-color: #fff; color: hsl(var(--lv-primary)); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45); } .turist-hero-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5); } .turist-hero-cta-ghost { background-color: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(2px); } .turist-hero-cta-ghost:hover { background-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } /* ---------- Visumtype-kort: synlig "Ansøg her" + "Mere info"-toggle ---------- */ /* Tydeligere hover/aktiv-state end standard lv-visa-card */ .lv-visa-card:hover { transform: translateY(-2px); } .lv-visa-card[data-expanded="true"] { transform: none; } .turist-visa-head { display: flex; align-items: center; gap: 14px; padding: 16px; width: 100%; box-sizing: border-box; } @media (min-width: 640px) { .turist-visa-head { padding: 18px 20px; gap: 16px; } } .turist-visa-info { flex: 1; min-width: 0; } /* Pris-blok i header — synlig også på mobil */ .turist-visa-price { text-align: right; line-height: 1.1; flex-shrink: 0; } .turist-visa-price .turist-price-from { display: block; font-size: 0.68rem; color: hsl(var(--lv-muted-fg)); font-weight: 500; } .turist-visa-price .turist-price-amount { font-size: 1.05rem; font-weight: 700; color: hsl(var(--lv-primary)); white-space: nowrap; } @media (min-width: 640px) { .turist-visa-price .turist-price-amount { font-size: 1.2rem; } } .turist-visa-price .turist-price-vat { display: block; font-size: 0.66rem; color: #9ca3af; font-weight: 400; } /* Handlingskolonne: Ansøg her (primær) + Mere info (toggle) */ .turist-visa-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; } @media (min-width: 768px) { .turist-visa-actions { flex-direction: row; align-items: center; } } .turist-ansog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 9999px; background-color: hsl(var(--lv-primary)); color: #fff; font-weight: 600; font-size: 0.9rem; font-family: var(--lv-font-body); text-decoration: none; white-space: nowrap; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; } .turist-ansog-btn:hover { filter: brightness(1.1); box-shadow: var(--lv-shadow-md); transform: translateY(-1px); } .turist-ansog-btn:active { transform: scale(0.98); } .turist-ansog-btn:focus-visible { outline: 3px solid hsl(var(--lv-primary) / 0.35); outline-offset: 2px; } .turist-moreinfo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 42px; padding: 0 14px; border-radius: 9999px; background-color: transparent; border: 1.5px solid hsl(var(--lv-border)); color: hsl(var(--lv-muted-fg)); font-weight: 500; font-size: 0.85rem; font-family: var(--lv-font-body); cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .turist-moreinfo-btn:hover { border-color: hsl(var(--lv-primary) / 0.4); color: hsl(var(--lv-primary)); background-color: hsl(var(--lv-primary) / 0.04); } .turist-moreinfo-btn:focus-visible { outline: 3px solid hsl(var(--lv-primary) / 0.3); outline-offset: 2px; } .turist-moreinfo-btn svg { transition: transform 0.2s ease; } .turist-moreinfo-btn[aria-expanded="true"] svg { transform: rotate(180deg); } /* ---------- Sticky "Ansøg"-bar på mobil ---------- */ .turist-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); border-top: 1px solid hsl(var(--lv-border)); box-shadow: 0 -6px 20px -10px rgba(8, 12, 40, 0.25); transform: translateY(120%); transition: transform 0.25s ease; } .turist-sticky-cta.is-visible { transform: translateY(0); } .turist-sticky-cta__inner { max-width: 1076px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .turist-sticky-cta__info { display: flex; align-items: center; gap: 10px; min-width: 0; } .turist-sticky-cta__flag { width: 28px; height: 28px; object-fit: contain; /* runde flag-billeder vises som de er */ flex-shrink: 0; } .turist-sticky-cta__label { font-size: 0.9rem; font-weight: 500; color: hsl(var(--lv-foreground)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .turist-sticky-cta__label strong { font-weight: 700; } .turist-sticky-cta__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .turist-sticky-cta__help { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 9999px; color: hsl(var(--lv-primary)); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; } .turist-sticky-cta__help:hover { background: hsl(var(--lv-primary) / 0.06); } .turist-sticky-cta__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 22px; border-radius: 9999px; background-color: hsl(var(--lv-primary)); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: filter 0.15s ease, transform 0.15s ease; } .turist-sticky-cta__btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* ---------- Reducér fade-in delay-trappen (hurtigere oplevet load) ---------- */ .lv-animate-fade-in-up { animation-duration: 0.4s; } /* ---------- Grønne accenter (mere farve på siden) ---------- */ /* Visumtype-kortenes ikon-boks i grøn for liv/variation vs. alt-blåt */ #visumtyper .lv-icon-box { background-color: hsl(var(--lv-success) / 0.12); } #visumtyper .lv-icon-box svg { color: hsl(var(--lv-success)); } /* Grøn "fra"-label på pris for et farve-strejf i kortene */ .turist-visa-price .turist-price-from { color: hsl(var(--lv-success)); } /* ---------- "Alt dette er inkluderet": ryddelig 2-kolonne tjekliste ---------- */ .turist-included { background: hsl(var(--lv-success) / 0.05); border: 1px solid hsl(var(--lv-success) / 0.22); border-radius: 18px; padding: 22px; } @media (min-width: 640px) { .turist-included { padding: 28px 30px; } } .turist-included__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } /* Fritstående ikon (INGEN kasse) */ .turist-included__icon { display: flex; color: hsl(var(--lv-success)); flex-shrink: 0; } .turist-included__title { margin: 0; font-family: var(--lv-font-body); font-weight: 700; font-size: 1.15rem; color: hsl(var(--lv-foreground)); } .turist-included__sub { margin: 2px 0 0; font-size: 0.82rem; color: hsl(var(--lv-muted-fg)); } .turist-incl-grid { display: grid; grid-template-columns: 1fr; column-gap: 28px; row-gap: 2px; } @media (min-width: 768px) { /* Højre kolonne bredere -> plads til de længste punkter uden at de wrapper. 2-kolonne slår først til ved 768px, så boksen er bred nok (ellers 1 kolonne). */ .turist-incl-grid { grid-template-columns: 0.82fr 1.18fr; } } .turist-incl-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; font-size: 0.9rem; line-height: 1.45; color: hsl(var(--lv-foreground)); } /* Diskret skillelinje mellem rækker (ryddeligt, ikke stribet) */ .turist-incl-item + .turist-incl-item { border-top: 1px solid hsl(var(--lv-success) / 0.12); } @media (min-width: 768px) { /* I 2-kolonne: fjern toplinjen på de to øverste rækker-items */ .turist-incl-item:nth-child(1), .turist-incl-item:nth-child(2) { border-top: 0; } } .turist-incl-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 1.305rem; /* = tekstens linjehøjde (0.9rem * 1.45) -> centreret på 1. linje */ color: hsl(var(--lv-success)); } /* ---------- Proces-trin: bløde kort, fritstående ikon, diskret stort trin-nummer ---------- */ .turist-step { position: relative; overflow: hidden; background: #fff; border: 1px solid hsl(var(--lv-border) / 0.55); border-radius: 16px; padding: 22px 20px 20px; box-shadow: 0 2px 12px -6px hsl(235 30% 15% / 0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; } .turist-step:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px hsl(235 30% 15% / 0.20); } /* Stort, diskret trin-nummer som detalje (erstatter den løse prik) */ .turist-step__num { position: absolute; top: 6px; right: 16px; font-family: var(--lv-font-body); font-weight: 800; font-size: 3.2rem; line-height: 1; color: hsl(var(--lv-primary) / 0.10); pointer-events: none; user-select: none; } .turist-step__icon { position: relative; color: hsl(var(--lv-primary)); margin-bottom: 14px; } .turist-step__icon svg { width: 28px; height: 28px; } .turist-step__title { position: relative; margin: 0 0 6px; font-family: var(--lv-font-body); font-weight: 700; font-size: 0.95rem; color: hsl(var(--lv-foreground)); white-space: nowrap; /* aldrig 2 linjer */ overflow: hidden; text-overflow: ellipsis; } .turist-step__desc { position: relative; margin: 0; font-size: 0.8rem; line-height: 1.55; color: hsl(var(--lv-muted-fg)); } /* Konsistent farve på alle proces-trin (ingen alternering) */ /* ---------- Hero stat-stribe: små sjove fakta nederst i hero ---------- */ /* Lille række med ikon + tal + label, adskilt af hairline-dividere. */ /* Hvidt, kompakt stats-kort der straddler grænsen mellem hero og visumtype-sektionen. */ .turist-herostats { position: absolute; left: 50%; transform: translateX(-50%); bottom: -26px; /* halvt nede i sektionen -> centreret på grænsen */ z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: calc(100% - 32px); background: #fff; border-radius: 16px; box-shadow: 0 12px 32px -12px rgba(8, 12, 40, 0.28); padding: 9px 8px; } @media (max-width: 640px) { .turist-herostats { bottom: -22px; padding: 8px 4px; } } .turist-herostat { display: flex; align-items: center; gap: 9px; padding: 2px 16px; } /* Hairline-divider mellem fakta */ .turist-herostat + .turist-herostat { border-left: 1px solid hsl(var(--lv-border)); } .turist-herostat__icon { display: flex; flex-shrink: 0; color: hsl(var(--lv-primary)); } .turist-herostat__icon svg { width: 22px; height: 22px; } .turist-herostat__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; } .turist-herostat__value { font-size: 0.9rem; font-weight: 700; color: hsl(var(--lv-foreground)); } .turist-herostat__label { font-size: 0.7rem; font-weight: 400; color: hsl(var(--lv-muted-fg)); } @media (max-width: 640px) { .turist-herostat { padding: 2px 12px; } .turist-herostat + .turist-herostat { border-left: 0; } } /* Enkelt-stat (fx Cuba med 1 visumtype): vis inline "1 visumtype" på én linje i stedet for et kort tal med længere label nedenunder (ser mere harmonisk ud). */ .turist-herostats.is-single .turist-herostat { padding: 4px 20px; } .turist-herostats.is-single .turist-herostat__text { flex-direction: row; align-items: baseline; gap: 5px; line-height: 1; } .turist-herostats.is-single .turist-herostat__value { font-size: 0.95rem; } .turist-herostats.is-single .turist-herostat__label { font-size: 0.95rem; color: hsl(var(--lv-foreground)); text-transform: lowercase; } /* Top-luft i indholds-arket: plads til det straddlende stats-kort før overskriften (styret her i stedet for en Tailwind-klasse, som måske ikke er i bundlen). */ .turist-sheet-inner { padding-top: 62px; } @media (max-width: 640px) { .turist-sheet-inner { padding-top: 54px; } } /* Visumtype-kortets beskrivelse: kortere + klart mellemrum til prisen */ .turist-visa-desc { max-width: 32rem; } /* ---------- Konverterings-CTA-band (sender op til visumtyperne) ---------- */ .turist-cta-band { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, hsl(var(--lv-primary)) 0%, hsl(235 70% 32%) 100%); box-shadow: 0 18px 40px -20px hsl(var(--lv-primary) / 0.55); } @media (min-width: 640px) { .turist-cta-band { padding: 26px 32px; flex-wrap: nowrap; } } .turist-cta-band__flag { width: 48px; height: 48px; object-fit: contain; /* runde flag-billeder vises som de er */ flex-shrink: 0; } .turist-cta-band__text { flex: 1 1 auto; min-width: 0; } .turist-cta-band__title { margin: 0; font-family: var(--lv-font-body); font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: #fff; } .turist-cta-band__sub { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); } .turist-cta-band__actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; flex-shrink: 0; } .turist-cta-band__btn { display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 26px; border-radius: 9999px; background: #fff; color: hsl(var(--lv-primary)); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease, box-shadow 0.2s ease; } .turist-cta-band__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45); } .turist-cta-band__help { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; opacity: 0.95; } .turist-cta-band__help:hover { text-decoration: underline; } /* ---------- Mindre whitespace ned til anmeldelses-/trust-sektionen ---------- */ /* Modvirker page-wrapperens gap-[91px] mellem indholds-arket og full-width sektionerne. */ .turist-aftersheet { margin-top: -66px; } @media (max-width: 640px) { .turist-aftersheet { margin-top: -54px; } } /* ============================================================ WIZARD-SKAL (turist-flow trin) — fokuseret ansøgnings-funnel Falmet stemningsbillede + minimal header + diskret overskrift + kompakt trin-indikator + roligt indholds-område + simpel footer. ============================================================ */ /* Hero-billede på wizard-trin: starter i toppen og fader ned i felt-området */ .turist-hero-img--wizard { height: 560px !important; } @media (max-width: 640px) { .turist-hero-img--wizard { height: 480px !important; } } /* Billedet falmer roligt ud i sidens (hvide) baggrund, ned igennem felt-området: mørk top (læsbar header/overskrift/trin) -> billedet vises -> fader til hvid. */ .wizard-hero-fade { position: absolute; top: 0; left: 0; right: 0; height: 560px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 12, 40, 0.58) 0%, rgba(8, 12, 40, 0.42) 17%, rgba(8, 12, 40, 0.20) 31%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.88) 80%, rgba(255, 255, 255, 1) 100%); } @media (max-width: 640px) { .wizard-hero-fade { height: 480px; } } /* Samlet wrapper (transparent) — så hero-billedet ses bag header/overskrift. Negativ margin trækker header/indhold lidt højere op mod toppen (modvirker pt-9). */ .wizard-shell { position: relative; z-index: 1; margin-top: -22px; } /* ---------- Minimal header ---------- */ .wizard-header__inner { max-width: 1200px; margin: 0 auto; display: grid; /* 3 lige kolonner => logo 100% centreret */ grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 8px 20px; } .wizard-header__left { justify-self: start; display: inline-flex; align-items: center; gap: 12px; } .wizard-header__logo { justify-self: center; } .wizard-header__actions { justify-self: end; } .wizard-header__flag { width: 26px; height: 26px; object-fit: contain; /* runde flag-billeder vises som de er */ flex-shrink: 0; } .wizard-header__back, .wizard-header__login { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-family: var(--lv-font-body); font-weight: 500; font-size: 0.9rem; opacity: 0.92; transition: opacity 0.15s ease; } .wizard-header__back:hover, .wizard-header__login:hover { opacity: 1; } .wizard-header__logo img { height: 46px; width: auto; display: block; } .wizard-header__actions { display: flex; align-items: center; gap: 14px; } @media (max-width: 640px) { .wizard-header__inner { padding: 12px 14px; } .wizard-header__back-text, .wizard-header__login-text { display: none; } .wizard-header__logo img { height: 38px; } } /* ---------- Diskret overskrift ---------- */ .wizard-hero { position: relative; text-align: center; color: #fff; padding: 10px 16px 0; } .wizard-hero__heading { display: block; margin-bottom: 22px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40); } .wizard-hero__title { font-size: 1.45rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .wizard-hero__title strong { font-weight: 700; } .wizard-hero__sub { display: block; margin-top: 7px; font-size: 0.92rem; font-weight: 400; opacity: 0.92; } @media (max-width: 640px) { .wizard-hero__title { font-size: 1.2rem; } .wizard-hero__sub { font-size: 0.85rem; } } /* Når trin-indikatoren er skjult (trin 3): lidt mere luft under hero-overskriften */ .wizard-hero:not(:has(.wizard-steps)) .wizard-hero__heading { margin-bottom: 4px; } /* ---------- Trin-indikator i hvidt kort (altid tydelig på billedet) ---------- */ .wizard-steps { display: flex; max-width: 520px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -12px rgba(8, 12, 40, 0.30); padding: 14px 16px; } @media (max-width: 640px) { .wizard-steps { max-width: 94%; padding: 12px 10px; } } /* Hvert trin fylder lige meget -> ens gaps mellem cirkler */ .wizard-step { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Forbindelseslinje: gaar fra forrige cirkel-center til dette cirkel-center (bag cirklerne) */ .wizard-step::before { content: ""; position: absolute; top: 15px; /* halv cirkelhøjde (30px) -> midt på cirklen */ left: -50%; right: 50%; height: 2px; background: hsl(var(--lv-muted)); z-index: 0; } .wizard-step:first-child::before { display: none; } .wizard-step.is-line-done::before { background: hsl(var(--lv-success)); } .wizard-step-circle { position: relative; z-index: 1; /* cirkel oven på linjen */ width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: hsl(var(--lv-muted-fg)); background: hsl(var(--lv-muted)); } .wizard-step-circle.is-active { background: hsl(var(--lv-primary)); color: #fff; box-shadow: 0 0 0 4px hsl(var(--lv-primary) / 0.15); } .wizard-step-circle.is-done { background: hsl(var(--lv-success)); color: #fff; } .wizard-step-label { font-size: 0.7rem; line-height: 1.2; text-align: center; color: hsl(var(--lv-muted-fg)); } .wizard-step-label.is-active { color: hsl(var(--lv-primary)); font-weight: 600; } .wizard-step-label.is-done { color: hsl(var(--lv-foreground)); } @media (max-width: 560px) { /* Kompakt på mobil: kun aktiv label vises, resten er bare cirkler */ .wizard-step-label { display: none; } .wizard-step-label.is-active { display: block; } } /* ---------- Indholds-område (billedet fader ind bag felterne, sidens hvide bg) ---------- */ .wizard-body { position: relative; z-index: 1; padding: 40px 0 24px; /* luft mellem trin-indikator og felt-boksen */ } @media (max-width: 640px) { .wizard-body { padding-top: 30px; } } /* Inkluderet-boks i samme bredde som formularen */ .wizard-included { max-width: 760px; margin: 22px auto 0; } /* Trustpilot i egen sektion med adskilt baggrund (tydelig opdeling) */ .wizard-trust-section { position: relative; z-index: 1; background: #f3f5f9; border-top: 1px solid hsl(var(--lv-border)); margin-top: 32px; padding: 28px 0; } /* ---------- Simpel footer (hvid + top-linje -> adskilt fra den grå trust-sektion) ---------- */ .wizard-footer { position: relative; z-index: 1; background: #fff; border-top: 1px solid hsl(var(--lv-border)); } /* Fjern page-wrapperens store bund-padding (pb-[90px]) på wizard-trin -> intet whitespace under footer */ body:has(.wizard-shell) > [class*="pb-[90px]"] { padding-bottom: 0 !important; } /* Page-wrapperens overflow-hidden bryder position:sticky -> tillad sticky sidebar på wizard-trin */ body:has(.wizard-shell) > [class*="overflow-hidden"] { overflow: visible; } .wizard-footer__inner { max-width: 1076px; margin: 0 auto; /* 3 kolonner med lige brede sider -> midter-kolonnen (copyright) er 100% centreret */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 24px; } .wizard-footer__co2 { justify-self: start; } /* venstre */ .wizard-footer__copy { justify-self: center; /* præcist centreret */ font-size: 0.82rem; color: hsl(var(--lv-muted-fg)); } .wizard-footer__links { justify-self: end; display: flex; gap: 18px; } /* højre */ .wizard-footer__links a { font-size: 0.82rem; color: hsl(var(--lv-muted-fg)); text-decoration: none; } .wizard-footer__links a:hover { color: hsl(var(--lv-primary)); text-decoration: underline; } .wizard-footer__co2 img { height: 34px; width: auto; display: block; opacity: 0.9; } @media (max-width: 640px) { /* Mobil: stak centreret */ .wizard-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; } .wizard-footer__co2, .wizard-footer__copy, .wizard-footer__links { justify-self: center; } } /* ============================================================ WIZARD FELT-SYSTEM (tw-*) — scoped til turist-wizard. Fast feltdesign, indrammede sektioner, konsistent spacing, tydelig forskel paa label vs. hjaelpetekst. Genbruges i hele wizarden. Bevarer funktionelle klasser/attrs (form-input, child-filed, data-*). ============================================================ */ .tw-form-wrap { width: 100%; max-width: 760px; margin: 0 auto; } .tw-form { width: 100%; display: flex; flex-direction: column; gap: 18px; } /* Indrammet sektion */ .tw-section { background: #fff; border: 1px solid hsl(var(--lv-border)); border-radius: 16px; padding: 20px; box-shadow: var(--lv-shadow); } @media (min-width: 640px) { .tw-section { padding: 24px 26px; } } /* Sektioner i skema-/dokument-panelet skal have samme luft som resten. Panelet gav ingen gap -> felt-boksene stod klods op ad hinanden. */ .tw-skema-panel, .tw-docs-panel { display: flex; flex-direction: column; gap: 18px; } .tw-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .tw-section__icon { display: flex; flex-shrink: 0; color: hsl(var(--lv-primary)); } .tw-section__title { margin: 0; font-family: var(--lv-font-body); font-weight: 700; font-size: 1.05rem; color: hsl(var(--lv-foreground)); } .tw-section__sub { margin: 3px 0 16px; font-size: 0.8rem; color: hsl(var(--lv-muted-fg)); } .tw-subhead { margin: 6px 0 12px; font-size: 0.82rem; font-weight: 600; color: hsl(var(--lv-muted-fg)); text-transform: uppercase; letter-spacing: 0.03em; } /* Responsivt grid. Row-gap (felt->felt) er den korrekte mekanisme til luft MELLEM felter — ikke en label-højde-reserve (som lavede stort tomrum mellem label og felt på korte labels). */ .tw-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 640px) { .tw-grid { grid-template-columns: 1fr 1fr; gap: 18px; } } .tw-grid--3 { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 640px) { .tw-grid--3 { grid-template-columns: 1fr 1fr 1fr; gap: 18px; } } .tw-col-full { grid-column: 1 / -1; } /* felt der fylder hele rækken */ /* Felt — label tæt på sit input (korrekt association), luften ligger i grid-row-gap */ .tw-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .tw-label { font-family: var(--lv-font-body); font-weight: 600; font-size: 0.82rem; line-height: 1.3; color: hsl(var(--lv-foreground)); } .tw-help { font-size: 0.74rem; line-height: 1.4; color: hsl(var(--lv-muted-fg)); } /* Input / select / textarea */ .tw-input { width: 100%; height: 42px; box-sizing: border-box; border-radius: 10px; border: 1px solid hsl(var(--lv-border)); background: #fff; padding: 0 14px; font-size: 0.92rem; color: hsl(var(--lv-foreground)); font-family: var(--lv-font-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea.tw-input { height: auto; min-height: 84px; padding: 9px 14px; resize: vertical; line-height: 1.5; } .tw-input::placeholder { color: #9ca3af; } .tw-input:focus { outline: none; border-color: hsl(var(--lv-primary)); box-shadow: 0 0 0 3px hsl(var(--lv-primary) / 0.14); } .tw-input:disabled, .tw-input[readonly] { background: #f3f4f6; color: hsl(var(--lv-muted-fg)); cursor: not-allowed; } input[type="file"].tw-input { padding: 9px 14px; height: auto; } /* Postnr + by paa samme raekke (postnr smal ~ 4 tal) */ .tw-zipcity { display: grid; grid-template-columns: 110px 1fr; gap: 14px 18px; } /* To dato-felter side om side (parres af landing.js) */ .tw-daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } @media (max-width: 480px) { .tw-daterow { grid-template-columns: 1fr; } } /* Forudvalgt (laast) visumtype: altid foerst i gridet */ .tw-visa-locked { order: -2; } /* "Antal indrejser": lige efter visumtypen (ved siden af, naar synlig) */ .tw-entries { order: -1; } /* Laast felt (fx forudvalgt visumtype) */ .tw-locked { display: flex; align-items: center; width: 100%; height: 42px; box-sizing: border-box; border-radius: 10px; border: 1px solid hsl(var(--lv-primary) / 0.25); background: hsl(var(--lv-primary) / 0.05); padding: 0 14px; font-size: 0.92rem; font-weight: 600; color: hsl(var(--lv-primary)); } /* Radio / checkbox-grupper */ .tw-choice { display: flex; flex-direction: column; gap: 9px; } .tw-choice--row { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; } .tw-choice__item { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: hsl(var(--lv-foreground)); cursor: pointer; } .tw-choice__item input { width: 18px; height: 18px; margin: 0; accent-color: hsl(var(--lv-primary)); flex-shrink: 0; } /* Info-/krav-note (collapsible
, default lukket) */ .tw-note { grid-column: 1 / -1; order: -3; /* dokumentkrav-boksen øverst — før visumtype (-2) og antal indrejser (-1) */ border-radius: 12px; border: 1px solid hsl(var(--lv-primary) / 0.20); background: hsl(var(--lv-primary) / 0.04); overflow: hidden; } .tw-note__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; transition: background 0.15s ease; } .tw-note__summary:hover { background: hsl(var(--lv-primary) / 0.09); } .tw-note__summary::-webkit-details-marker { display: none; } .tw-note__lead { display: flex; align-items: center; gap: 11px; min-width: 0; } .tw-note__icon { width: 22px; height: 22px; flex-shrink: 0; color: hsl(var(--lv-primary)); } .tw-note__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .tw-note__title { font-size: 0.9rem; font-weight: 700; color: hsl(var(--lv-foreground)); } .tw-note__hint { font-size: 0.74rem; color: hsl(var(--lv-muted-fg)); } /* +/- toggle med animeret plus -> minus (lodret bjælke skrumper væk) */ .tw-note__toggle { position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--lv-primary) / 0.14); color: hsl(var(--lv-primary)); } .tw-note__toggle::before, .tw-note__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.28s ease; } .tw-note__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } /* lodret -> plus */ .tw-note.is-open .tw-note__toggle::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); } /* skrumper -> minus */ .tw-note.is-open .tw-note__summary { border-bottom: 1px solid hsl(var(--lv-primary) / 0.15); } .tw-note__list { box-sizing: border-box; list-style: none; padding: 12px 16px 14px; margin: 0; display: flex; flex-direction: column; gap: 6px; } .tw-note__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: hsl(var(--lv-foreground)); } .tw-note__list svg { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; color: hsl(var(--lv-success)); } /* Dokumentkrav-noter ("-"-linjer fra dashboardet): undertekst til kravet, ikke et selvstændigt punkt */ .tw-note__sub { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 400; color: hsl(var(--lv-muted-fg)); line-height: 1.35; } /* Note under et dokumentkrav (fx "Gyldigt mindst 6 mdr.") — dæmpet med blå accent-kant. */ .tw-doc-note { display: block; margin: 0; padding: 2px 0 2px 10px; border-left: 2px solid hsl(var(--lv-primary) / 0.35); font-size: 0.75rem; line-height: 1.4; color: hsl(var(--lv-muted-fg)); } /* Dokument-uploads: kort strækkes til rækkehøjde og knappen sidder i bunden, så "Vælg fil"-knapperne flugter selv når labels/noter har forskellig højde. */ .tw-docs-section .tw-field { height: 100%; } .tw-docs-section .tw-upload { margin-top: auto; } /* ===== Token-baserede dokument-sider (order/wp) i turist step-3-stil ===== */ .tw-docpage { position: relative; z-index: 1; } .tw-dochero { text-align: center; margin-bottom: 22px; } .tw-dochero__title { font-family: var(--lv-font-body); font-size: 1.55rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .tw-dochero__title strong { font-weight: 800; } .tw-dochero__sub { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; margin-top: 4px; } .tw-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .tw-badge--neutral { background: hsl(var(--lv-muted) / 0.6); color: hsl(var(--lv-muted-fg)); } .tw-badge--info { background: #dbeafe; color: #1d4ed8; } .tw-badge--warning { background: #fef3c7; color: #b45309; } .tw-badge--success { background: #dcfce7; color: #15803d; } .tw-optional { font-size: 0.8rem; font-weight: 400; color: hsl(var(--lv-muted-fg)); } .tw-revbox { margin: 2px 0 12px; padding: 11px 14px; border-radius: 11px; background: #fef7e6; border: 1px solid #f4d58a; } .tw-revbox strong { display: block; color: #8a5a00; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; } .tw-revbox p { margin: 0; color: #7a5a12; font-size: 0.9rem; line-height: 1.45; } .tw-received { font-size: 0.82rem; color: hsl(var(--lv-muted-fg)); margin: 0 0 10px; } .tw-approved { display: flex; align-items: center; gap: 6px; color: hsl(var(--lv-success)); font-weight: 600; margin: 2px 0 0; } .tw-uploadform { margin-top: 10px; } .tw-uploadform .tw-upload { margin: 0; } .tw-uploadhint { display: block; margin-top: 6px; font-size: 0.74rem; color: hsl(var(--lv-muted-fg)); } /* Label + status-badge på samme linje i doc-cellen */ .tw-doclabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tw-doclabel__name { font-size: 0.92rem; font-weight: 600; color: hsl(var(--lv-foreground)); line-height: 1.3; } /* 2-kolonne doc-grid: hold upload-feltet i bunden så dropzonerne flugter pr. række */ .tw-docs-section .tw-uploadform { margin-top: auto; } .tw-docs-section .tw-approved { margin-top: auto; } /* ÉT dokument-kort med kravene i 2 kolonner (felter — IKKE individuelle kort). margin-top giver luft mellem info-boksen (callout) og dokument-boksen. */ .tw-docbox { margin-top: 18px; background: #fff; border: 1px solid hsl(var(--lv-border)); border-radius: 16px; box-shadow: var(--lv-shadow); padding: 20px 22px; display: grid; grid-template-columns: 1fr; gap: 22px 28px; } @media (min-width: 720px) { .tw-docbox { grid-template-columns: 1fr 1fr; } } .tw-docitem { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .tw-docbox .tw-uploadform { margin-top: auto; } /* Full-bleed hero-billede til token-siderne: samme højde som fade -> ingen udstikkende bund */ .tw-dochero-img { width: 100%; height: 560px; position: absolute; top: 0; left: 0; object-fit: cover; margin: 0; } .tw-docflash { margin-bottom: 16px; padding: 12px 15px; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; } .tw-docflash--ok { background: #ecfdf3; border: 1px solid #abefc6; color: #166534; } .tw-docflash--err { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; } /* select2 -> matcher tw-input (kun i wizard-formen) */ .tw-form .select2-container { width: 100% !important; } .tw-form .select2-container--default .select2-selection--single { height: 42px; border-radius: 10px; border: 1px solid hsl(var(--lv-border)); background: #fff; display: flex; align-items: center; padding: 0 12px; } .tw-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; padding: 0; color: hsl(var(--lv-foreground)); font-size: 0.92rem; } .tw-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; } .tw-form .select2-container--default.select2-container--disabled .select2-selection--single { background: #f3f4f6; } .tw-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; } /* Navigation */ .tw-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; } /* Tryghedstekst ved Næste */ .tw-reassure { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8rem; line-height: 1.4; color: hsl(var(--lv-muted-fg)); } .tw-reassure svg { color: hsl(var(--lv-success)); flex-shrink: 0; } @media (min-width: 640px) { .tw-actions { flex-direction: row; justify-content: space-between; align-items: center; } .tw-actions--end { justify-content: flex-end; } } /* Knapper: ens metrik (højde/padding/gap/radius som felterne), kun farve adskiller -> harmonisk */ .tw-actions a { text-decoration: none; } .tw-actions .lv-btn-outline, .tw-actions .lv-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1; } .tw-actions .indicator-label { display: inline-flex; align-items: center; gap: 8px; line-height: 1; } .tw-actions svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } /* #4 — Tydeligere required-stjerne (scoped til wizard-formen) */ .tw-form .required::after { color: hsl(var(--lv-destructive)); font-weight: 700; } /* #3 — Inline-validering: fejl-state ved felt + besked */ .tw-field--error .tw-input, .tw-field--error .select2-container--default .select2-selection--single { border-color: hsl(var(--lv-destructive)) !important; box-shadow: 0 0 0 3px hsl(var(--lv-destructive) / 0.12); } .tw-error-msg { display: block; margin-top: 2px; font-size: 0.74rem; line-height: 1.4; color: hsl(var(--lv-destructive)); } /* Fallback uden JS: marker felter brugeren har rørt og som er ugyldige */ .tw-form .tw-input:user-invalid { border-color: hsl(var(--lv-destructive)); } /* #2 — Sticky Næste-bar (kun mobil) */ .wizard-sticky-submit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); border-top: 1px solid hsl(var(--lv-border)); box-shadow: 0 -6px 20px -10px rgba(8, 12, 40, 0.25); } .wizard-sticky-submit__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border: 0; border-radius: 10px; background: hsl(var(--lv-primary)); color: #fff; font-family: var(--lv-font-body); font-weight: 700; font-size: 1rem; cursor: pointer; } .wizard-sticky-submit__btn svg { display: block; } @media (min-width: 768px) { .wizard-sticky-submit { display: none; } } @media (max-width: 767px) { /* Plads i bunden (footer) så intet skjules bag den mobile sticky-bar */ .wizard-footer__inner { padding-bottom: 84px; } } /* ============================================================ TRIN 2 — Tilvalg-cards (tw-addon) ============================================================ */ .tw-addons { display: flex; flex-direction: column; gap: 12px; } .tw-addon { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; border: 1.5px solid hsl(var(--lv-border)); background: #fff; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .tw-addon:hover { border-color: hsl(var(--lv-primary) / 0.35); box-shadow: var(--lv-shadow); } .tw-addon.is-selected { border-color: hsl(var(--lv-primary) / 0.55); background: hsl(var(--lv-primary) / 0.04); box-shadow: var(--lv-shadow); } .tw-addon__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: hsl(var(--lv-primary) / 0.10); color: hsl(var(--lv-primary)); } /* DHL-logo: hvid "brand-chip" i stedet for farvet ikon-boks */ .tw-addon__icon--logo { width: auto; min-width: 64px; padding: 0 12px; background: #fff; border: 1px solid hsl(var(--lv-border)); } .tw-addon__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tw-addon__name { font-size: 0.95rem; font-weight: 600; color: hsl(var(--lv-foreground)); } .tw-addon__desc { font-size: 0.78rem; line-height: 1.4; color: hsl(var(--lv-muted-fg)); } .tw-addon__price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; white-space: nowrap; } .tw-addon__amount { font-size: 1.05rem; font-weight: 700; line-height: 1.1; color: hsl(var(--lv-foreground)); } .tw-addon__vat { font-size: 0.7rem; margin-top: 1px; color: hsl(var(--lv-muted-fg)); } .tw-addon__check { width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; accent-color: hsl(var(--lv-primary)); border-radius: 6px; } .tw-addons__vat { margin: 12px 2px 0; font-size: 0.76rem; color: hsl(var(--lv-muted-fg)); } @media (max-width: 480px) { .tw-addon { gap: 11px; padding: 12px 13px; flex-wrap: wrap; } .tw-addon__price { order: 3; } } /* ============================================================ TRIN 4 — Gennemgå og send (checkout/review) ============================================================ */ .tw-checkout-wrap { width: 100%; } .tw-checkout__title { margin: 0 0 18px; font-family: var(--lv-font-body); font-weight: 700; font-size: 1.4rem; text-align: center; color: hsl(var(--lv-foreground)); } .tw-checkout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } @media (min-width: 900px) { .tw-checkout { grid-template-columns: minmax(0, 1fr) 380px; } } .tw-checkout__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .tw-checkout__side { min-width: 0; } @media (min-width: 900px) { .tw-checkout__side { position: sticky; top: 16px; } } /* Fælles info-liste (Visumoplysninger + Oplysninger om dig): [ikon] label .... værdi + dividers */ .tw-info { display: flex; flex-direction: column; } .tw-info__row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid hsl(var(--lv-border)); } .tw-info__row:first-child { border-top: 0; padding-top: 2px; } /* Flerlinjede rækker (fx adresse): ikon + label i toppen, ikke centreret */ .tw-info__row--top { align-items: flex-start; } .tw-info__row--top .tw-info__ricon { margin-top: 1px; } .tw-info__ricon { display: flex; flex-shrink: 0; color: hsl(var(--lv-primary)); } .tw-info__label { font-size: 0.85rem; color: hsl(var(--lv-muted-fg)); } .tw-info__value { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 0.9rem; font-weight: 600; color: hsl(var(--lv-foreground)); word-break: break-word; min-width: 0; } .tw-info__value--email { word-break: break-all; } /* hele emailen, cuttes ikke */ .tw-info__value-sub { font-weight: 600; font-size: 0.9rem; color: hsl(var(--lv-foreground)); } /* postnr/by: samme farve som adressen */ .tw-info__country { display: inline-flex; align-items: center; gap: 7px; } .tw-info__flag { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } /* Ordre-oversigt sidebar */ .tw-summary { background: #fff; border: 1px solid hsl(var(--lv-border)); border-radius: 16px; padding: 16px; box-shadow: var(--lv-shadow); } .tw-summary > div { width: 100% !important; row-gap: 0; } /* override visapackage xl:w-[406px] */ /* --- Poleret prisopstilling (receipt-look). Scoped til turist-sidebaren, så de DELTE package-stubs (også brugt i det gamle flow) ikke påvirkes andre steder. --- */ .tw-summary { padding: 20px 22px; } /* Hver sektion (Pakke / Tilvalg / Levering / Totaler) er sit eget grid. Gør dem til rene 2 kolonner: [label | beløb], ens luft + skillelinje imellem. */ .tw-summary > div > div[class*="grid-cols-3"] { grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 8px; align-items: baseline; padding: 14px 0 0; margin: 0; border-top: 1px solid hsl(var(--lv-border)); } .tw-summary > div > div[class*="grid-cols-3"]:first-child { border-top: 0; padding-top: 0; } /* Kolonne-placering (neutraliserer Tailwinds col-span-2 i det nye 2-kol layout) */ .tw-summary [class*="col-span-3"] { grid-column: 1 / -1; margin-bottom: 0; } .tw-summary [class*="justify-self-start"] { grid-column: 1; } .tw-summary [class*="justify-self-end"] { grid-column: 2; } /* Sektions-overskrift = dæmpet versal-label */ .tw-summary .card-header { width: auto !important; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--lv-muted-fg)); margin: 0 0 2px; } /* Labels (venstre) + beløb (højre) */ .tw-summary [class*="justify-self-start"] { font-size: 0.9rem; font-weight: 500; line-height: 1.35; color: hsl(var(--lv-foreground)); } .tw-summary [class*="justify-self-end"] { text-align: right; font-size: 0.9rem; font-weight: 600; white-space: nowrap; color: hsl(var(--lv-foreground)); } /* Moms-underlinje under beløbet: lille, dæmpet, egen linje (ingen klemning) */ .tw-summary [class*="justify-self-end"] .text-xs, .tw-summary [class*="justify-self-end"] .text-gray-400 { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 400; line-height: 1.3; white-space: nowrap; color: hsl(var(--lv-muted-fg)); } /* Slutsum (sidste sektion, de font-semibold rækker) — fremhævet i brand-blå */ .tw-summary > div > div[class*="grid-cols-3"]:last-of-type { padding-top: 14px; } .tw-summary > div > div[class*="grid-cols-3"]:last-of-type [class*="font-semibold"] { font-size: 1.02rem; font-weight: 700; color: hsl(var(--lv-primary)); } /* Inkluderet-boks i den smalle venstre kolonne -> altid 1 kolonne (ingen ord-wrap) */ .tw-checkout__main .turist-incl-grid { grid-template-columns: 1fr; } .tw-checkout__main .turist-incl-item:nth-child(1), .tw-checkout__main .turist-incl-item:nth-child(2) { border-top: 1px solid hsl(var(--lv-success) / 0.12); } .tw-checkout__main .turist-incl-item:first-child { border-top: 0; } /* ============================================================ TRIN 3 — Stor ansøgningsformular (skema, betingede grupper, uploads) ============================================================ */ /* På TRIN 3 er js-form-filed-div en ren delegation-rod (wrapper om .number_of_traveller) -> display:contents, så sektioner spaces af .tw-form's gap. VIGTIGT: på trin 1/2 sidder SAMME klasse direkte på selve gridet (
). Derfor :not(.tw-grid) — ellers ville display:contents nuke gridet (og dermed gap'et) på de trin. */ .tw-form .js-form-filed-div:not(.tw-grid) { display: contents; } .tw-form .number_of_traveller { display: flex; flex-direction: column; gap: 18px; } /* Rejsende-skille (kun ved flere rejsende) */ .tw-traveller { display: flex; align-items: center; gap: 11px; margin: 6px 2px 0; } .tw-traveller__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--lv-primary)); color: #fff; font-size: 0.85rem; font-weight: 700; } .tw-traveller__title { font-size: 1rem; font-weight: 700; color: hsl(var(--lv-foreground)); } /* Skema-række: ja/nej-spørgsmål som "Spørgsmål .......... [Ja] [Nej]" */ .tw-field--schema .tw-field__q { margin: 0; } @media (min-width: 640px) { .tw-field--schema { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; row-gap: 4px; padding: 11px 14px; border: 1px solid hsl(var(--lv-border)); border-radius: 11px; background: hsl(var(--lv-muted) / 0.35); } .tw-field--schema .tw-choice--row { justify-content: flex-end; flex-wrap: nowrap; } .tw-field--schema .tw-help { grid-column: 1 / -1; } /* Mange valg (>3): spørgsmål OVER valgene, pills venstrestillet + ombrydende (ellers klemmes labelen i den smalle venstre kolonne). */ .tw-field--schema.tw-field--wrap { grid-template-columns: 1fr; align-items: stretch; row-gap: 10px; } .tw-field--schema.tw-field--wrap .tw-choice--row { justify-content: flex-start; flex-wrap: wrap; } } @media (max-width: 639px) { /* Mobil: spørgsmål over valgene, men stadig kompakt */ .tw-field--schema { gap: 8px; } } /* Skema-valg som "pills" -> hurtigt overblik, stort klikmål */ .tw-field--schema .tw-choice__item { border: 1px solid hsl(var(--lv-border)); border-radius: 9px; padding: 6px 13px; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; } .tw-field--schema .tw-choice__item:hover { border-color: hsl(var(--lv-primary) / 0.45); } .tw-field--schema .tw-choice__item:has(input:checked) { border-color: hsl(var(--lv-primary)); background: hsl(var(--lv-primary) / 0.07); } /* Betinget blok: trigger-spørgsmål + ekstra-felter samlet i ét kort */ .tw-cond { border: 1px solid hsl(var(--lv-primary) / 0.22); border-radius: 13px; background: hsl(var(--lv-primary) / 0.035); padding: 14px 16px; } /* Trigger-spørgsmålet selv: ingen ekstra ramme inde i kortet (kortet ER rammen) */ .tw-cond > .tw-field--schema { border: 0; background: transparent; padding: 0; } /* Ekstra-felter: dukker op LIGE UNDER spørgsmålet, samlet — ikke spredt til siden */ .tw-cond__extra { display: grid; grid-template-columns: 1fr; gap: 14px 18px; } @media (min-width: 640px) { .tw-cond__extra { grid-template-columns: 1fr 1fr; } } .tw-cond__extra .tw-field--schema { grid-column: 1 / -1; } .tw-cond__extra .tw-col-full { grid-column: 1 / -1; } /* Separator + luft vises KUN når mindst ét ekstra-felt er synligt (sat af landing.js) */ .tw-cond__extra.is-active { margin-top: 13px; padding-top: 14px; border-top: 1px dashed hsl(var(--lv-primary) / 0.28); } /* Upload-felt (dynamiske file-felter + dokumentkrav) */ .tw-upload { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; box-sizing: border-box; padding: 7px 12px; border: 1px dashed hsl(var(--lv-border)); border-radius: 10px; background: hsl(var(--lv-muted) / 0.4); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .tw-upload:hover { border-color: hsl(var(--lv-primary) / 0.5); background: hsl(var(--lv-primary) / 0.04); } .tw-upload__btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 6px 13px; border-radius: 8px; background: hsl(var(--lv-primary)); color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1; } .tw-upload__btn svg { display: block; } .tw-upload__name { font-size: 0.84rem; color: hsl(var(--lv-muted-fg)); word-break: break-word; min-width: 0; } .tw-upload--done { border-style: solid; border-color: hsl(var(--lv-success) / 0.45); background: hsl(var(--lv-success) / 0.06); } .tw-upload__check { color: hsl(var(--lv-success)); font-weight: 600; } /* Info-callout (informationspunkter fra dokumentkrav) */ .tw-callout { border: 1px solid hsl(var(--lv-primary) / 0.22); border-radius: 14px; /* Frostet-hvid glas: læsbar oven på det lyse hero-billede (glassmorphism som header'en) */ background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 24px -12px rgba(8, 12, 40, 0.30); padding: 16px 18px; } .tw-callout__head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.92rem; color: hsl(var(--lv-foreground)); margin-bottom: 8px; } .tw-callout__head svg { color: hsl(var(--lv-primary)); flex-shrink: 0; } .tw-callout__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tw-callout__list li { position: relative; padding-left: 18px; font-size: 0.86rem; line-height: 1.45; color: hsl(var(--lv-foreground)); } .tw-callout__list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 9999px; background: hsl(var(--lv-primary) / 0.55); } /* Samtykke-rækker */ .tw-consent { border: 1px solid hsl(var(--lv-border)); border-radius: 14px; background: #fff; padding: 16px 18px; box-shadow: var(--lv-shadow); display: flex; flex-direction: column; gap: 11px; } .tw-consent__row { display: flex; align-items: flex-start; gap: 11px; font-size: 0.88rem; line-height: 1.45; color: hsl(var(--lv-foreground)); cursor: pointer; } .tw-consent__row input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: hsl(var(--lv-primary)); } .tw-consent__terms { margin: 2px 0 0; font-size: 0.82rem; color: hsl(var(--lv-muted-fg)); } .tw-consent__terms a { color: hsl(var(--lv-primary)); text-decoration: underline; } /* Gem-og-fortsæt + Indsend grupperet til højre */ .tw-actions__group { display: flex; flex-direction: column; gap: 12px; width: 100%; } @media (min-width: 640px) { .tw-actions__group { flex-direction: row; align-items: center; width: auto; } } .tw-actions__group .lv-btn-outline, .tw-actions__group .lv-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1; } .tw-actions__group svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } /* Dato-gruppe: 2-3 dato-del-felter (År/Måned/Dag) samlet i ÉT felt */ .tw-fieldgroup__row { display: flex; gap: 8px; } .tw-fieldgroup__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tw-fieldgroup__col--wide { flex: 1.5; } /* år (4 cifre) lidt bredere */ .tw-fieldgroup__col--narrow { flex: 1; } .tw-fieldgroup .tw-input { text-align: center; padding: 0 8px; } .tw-fieldgroup__sub { text-align: center; font-size: 0.72rem; color: hsl(var(--lv-muted-fg)); } /* Inputs flugter fordi 2-kolonne-felter har korte (1-linjes) labels: lange labels (der ellers ville ombryde til 2 linjer og skubbe feltet skævt) sendes til egen fuld række via PHP-reglen (mb_strlen > 46). Derfor INGEN label-højde-reserve her -> intet spildt whitespace mellem label og felt. */ /* ============================================================ Kvitterings-modal (SweetAlert) efter submit — kun turist-flow. Klassen 'turist-swal' sættes kun når isTuristFlow(); company-flowet loader ikke denne CSS og beholder standard-modalen. ============================================================ */ .turist-swal.swal2-popup { width: 600px; max-width: 92vw; box-sizing: border-box; border-radius: 18px; padding: 30px 32px 24px; font-family: var(--lv-font-body); } /* Lille grøn "kvittering"-markør øverst (ren CSS, ingen ekstra markup) */ .turist-swal .swal2-html-container { margin: 4px 2px 0; padding: 0; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--lv-foreground)); text-align: center; max-height: 60vh; /* scroll først ved RIGTIG meget tekst */ overflow-y: auto; } /* Popup-indholdet er struktureret HTML med figma-klasserne h2/h3.card-header (blå poppins) — omstil dem til turist-designets tokens, så modalen matcher resten af flowet. Skal stå EFTER tailwind-bundlet (gør den: landing.css loades sidst på turist-siderne). */ .turist-swal h2.card-header, .turist-swal h3.card-header { font-family: var(--lv-font-body); color: hsl(var(--lv-foreground)); font-weight: 700; line-height: 1.25; } .turist-swal h2.card-header { font-size: 1.35rem; } .turist-swal h3.card-header { font-size: 1.05rem; } /* Mindre tomrum mellem tekst og knap */ .turist-swal .swal2-actions { margin-top: 18px; gap: 10px; } .turist-swal .swal2-confirm { height: 44px; padding: 0 32px; border-radius: 10px; background: hsl(var(--lv-primary)) !important; font-weight: 600; font-size: 0.95rem; } @media (max-width: 640px) { .turist-swal.swal2-popup { padding: 24px 20px 20px; } .turist-swal .swal2-html-container { font-size: 0.9rem; } } /* ============================================================ MOBIL-TILGÆNGELIGHED (≤640px) — gælder hele turist-flowet (landing, trin 1/2/3, kassen). Mål: læsbart for ældre + nemt at ramme med fingeren, og ingen iOS "zoom-on-focus" (kræver felt-font ≥16px). Desktop er uændret (mus + mere plads). ============================================================ */ @media (max-width: 640px) { /* Felter: 16px font (ingen auto-zoom) + højere touch-mål + tydeligere labels */ .tw-input, .tw-form .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px; } .tw-input { height: 48px; } textarea.tw-input { height: auto; min-height: 96px; } input[type="file"].tw-input { height: auto; } .tw-form .select2-container--default .select2-selection--single { height: 48px; } .tw-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } .tw-locked { height: 48px; font-size: 16px; } .tw-fieldgroup .tw-input { font-size: 16px; } .tw-label { font-size: 0.92rem; } /* ~14.7px -> mere læsbart for ældre */ .tw-help { font-size: 0.82rem; } /* Radio/checkbox: større klikflade + større kontrol */ .tw-choice__item { font-size: 1rem; min-height: 44px; } .tw-choice__item input { width: 22px; height: 22px; } /* Ja/nej-skema: behold spørgsmål + valg, men med god touch-højde på "pills" */ .tw-field--schema .tw-choice__item { padding: 9px 15px; } /* Dato-gruppe (År/Måned/Dag): 16px + lidt højere, så de er nemme at udfylde */ .tw-fieldgroup .tw-input { height: 48px; } /* Upload-felter: større touch-mål + læsbar knap */ .tw-upload { min-height: 50px; } .tw-upload__btn { font-size: 0.9rem; padding: 9px 15px; } .tw-upload__name { font-size: 0.9rem; } /* Samtykke: større afkrydsning + tekst */ .tw-consent__row { font-size: 0.95rem; } .tw-consent__row input { width: 22px; height: 22px; } /* Knapper: fuld bredde-knapper får komfortabel højde (let at ramme) */ .tw-actions .lv-btn-outline, .tw-actions .lv-btn-primary, .tw-actions__group .lv-btn-outline, .tw-actions__group .lv-btn-primary { height: 50px; font-size: 1rem; } /* Landing: "Ansøg her" stor nok til touch */ .turist-ansog-btn { height: 48px; font-size: 0.95rem; } .turist-moreinfo-btn { height: 44px; } /* Sektioner en anelse mere kompakte i toppen, så vi sparer scroll uden at klemme */ .tw-section { padding: 18px 16px; } } /* Ekstra smalle skærme (≤380px): undgå at dato-gruppens 3 felter bliver for trange */ @media (max-width: 380px) { .tw-fieldgroup__row { gap: 6px; } .tw-fieldgroup .tw-input { padding: 0 4px; } } /* Landing visumtype-kort på telefon: stak hovedet, så titlen ikke klemmes mellem ikon, pris og handlingskolonnen. Række 1: ikon + info (+ pris). Række 2: knapper i fuld bredde -> stort, let-at-ramme "Ansøg her". */ @media (max-width: 600px) { .turist-visa-head { flex-wrap: wrap; align-items: center; } .turist-visa-info { flex: 1 1 0; min-width: 0; } .turist-visa-actions { flex: 1 1 100%; flex-direction: row; align-items: stretch; margin-top: 14px; } .turist-ansog-btn { flex: 1; } /* primær knap fylder bredden */ .turist-moreinfo-btn { flex: 0 0 auto; } } /* ============================================================ TRIN 3 — Person-tabs + skema/dokument-undertabs Progressiv: panels skjules KUN når JS er klar (.js-tabs-ready), så siden aldrig er "låst" hvis JS ikke er kørt. ============================================================ */ .js-tabs-ready .is-hidden { display: none !important; } /* Person-pills (øverste akse — altid ved flere rejsende) */ .tw-persons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .tw-person { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border: 1.5px solid hsl(var(--lv-border)); border-radius: 9999px; background: #fff; font-family: var(--lv-font-body); font-size: 0.92rem; font-weight: 600; color: hsl(var(--lv-foreground)); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .tw-person:hover { border-color: hsl(var(--lv-primary) / .45); } .tw-person.is-active { border-color: hsl(var(--lv-primary)); background: hsl(var(--lv-primary)); color: #fff; } .tw-person__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--lv-muted)); color: hsl(var(--lv-muted-fg)); font-size: 0.8rem; font-weight: 700; } .tw-person.is-active .tw-person__num { background: rgba(255,255,255,.25); color: #fff; } .tw-person__name { white-space: nowrap; } /* Status-prik: ✓ komplet / ! mangler (sættes af JS) */ .tw-person__status { display: none; align-items: center; justify-content: center; width: 19px; height: 19px; flex-shrink: 0; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; line-height: 1; } .tw-person.is-complete .tw-person__status, .tw-person.is-incomplete .tw-person__status { display: inline-flex; } .tw-person.is-complete .tw-person__status { background: hsl(var(--lv-success)); color: #fff; } .tw-person.is-complete .tw-person__status::before { content: "✓"; } .tw-person.is-incomplete .tw-person__status { background: hsl(var(--lv-destructive) / .15); color: hsl(var(--lv-destructive)); } .tw-person.is-incomplete .tw-person__status::before { content: "!"; } .tw-person.is-active.is-incomplete .tw-person__status { background: rgba(255,255,255,.28); color: #fff; } /* Persistent kontekst-header (sticky) — man ved ALTID hvem man udfylder for */ .tw-person-context { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.85); border: 1px solid hsl(var(--lv-primary) / .20); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 24px -12px rgba(8, 12, 40, 0.30); font-size: 0.9rem; color: hsl(var(--lv-foreground)); } .tw-person-context__label { color: hsl(var(--lv-muted-fg)); } .tw-person-context strong { color: hsl(var(--lv-primary)); } /* Segment-kontrol (skema / dokumenter) */ .tw-segments { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 11px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 24px -12px rgba(8, 12, 40, 0.30); } .tw-seg { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; font-family: var(--lv-font-body); font-size: 0.9rem; font-weight: 600; color: hsl(var(--lv-muted-fg)); cursor: pointer; transition: background .15s ease, color .15s ease; } .tw-seg.is-active { background: #fff; color: hsl(var(--lv-primary)); box-shadow: var(--lv-shadow); } .tw-seg__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9999px; background: hsl(var(--lv-muted)); color: hsl(var(--lv-muted-fg)); font-size: 0.7rem; font-weight: 700; } .tw-seg__count.is-complete { background: hsl(var(--lv-success) / .16); color: hsl(var(--lv-success)); } .tw-seg__count.is-incomplete { background: hsl(var(--lv-destructive) / .15); color: hsl(var(--lv-destructive)); } /* Heads-up boks (kun ved split, så dokumenter aldrig overses) */ .tw-headsup { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.86); border: 1px solid hsl(var(--lv-primary) / .22); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 24px -12px rgba(8, 12, 40, 0.30); font-size: 0.88rem; line-height: 1.45; color: hsl(var(--lv-foreground)); } .tw-headsup svg { color: hsl(var(--lv-primary)); flex-shrink: 0; margin-top: 1px; } /* Submit-feedback ("Rejsende 2 mangler 2 dokumenter") */ .tw-submit-msg { display: none; align-items: center; gap: 9px; margin-bottom: 14px; padding: 12px 15px; border-radius: 11px; background: hsl(var(--lv-destructive) / .08); border: 1px solid hsl(var(--lv-destructive) / .3); color: hsl(var(--lv-destructive)); font-size: 0.9rem; font-weight: 500; } .tw-submit-msg.is-visible { display: flex; } .tw-submit-msg svg { flex-shrink: 0; } /* Manglende upload markeres ved Indsend */ .tw-field--missing .tw-upload { border-style: solid; border-color: hsl(var(--lv-destructive)); box-shadow: 0 0 0 3px hsl(var(--lv-destructive) / .12); } @media (max-width: 640px) { .tw-person { font-size: 0.88rem; padding: 8px 13px 8px 9px; } .tw-segments { display: flex; width: 100%; } .tw-seg { flex: 1; justify-content: center; } .tw-person-context { font-size: 0.85rem; } } /* ============================================================ Trust-stribe (3 punkter) over Trustpilot — hele turist-flowet. Kompakt, tekst-baseret med små ikoner; stakker på mobil. ============================================================ */ .turist-trustbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; max-width: 940px; margin: 0 auto 18px; padding: 2px 8px; text-align: center; } .turist-trustbar__item { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lv-font-body); font-size: 0.9rem; line-height: 1.3; color: hsl(var(--lv-muted-fg)); } .turist-trustbar__item strong { color: hsl(var(--lv-foreground)); font-weight: 700; } .turist-trustbar__item svg { width: 18px; height: 18px; flex-shrink: 0; color: hsl(var(--lv-success)); } .turist-trustbar__sep { width: 1px; height: 16px; flex-shrink: 0; background: hsl(var(--lv-border)); } @media (max-width: 760px) { .turist-trustbar { flex-direction: column; gap: 11px; margin-bottom: 16px; } .turist-trustbar__sep { display: none; } .turist-trustbar__item { font-size: 0.88rem; } }