/* ============================================= GLOBAL DESIGN SYSTEM & CSS VARIABLES --------------------------------------------- FOURTEEN TOKENS DRIVE EVERYTHING BELOW. The --umf-* block is the only place a colour is written down. Every ramp underneath it (primary/secondary/accent/gray/status) is derived from those fourteen with var(), so the whole form can be recoloured by redefining fourteen properties and nothing else. That is exactly what the CF7 Email PDF plugin does: it prints a second :root block immediately after this stylesheet, filled from Umzug-PDF Manager > Vorlagen-Anpassung > "Formular auf der Website". Same selector, later in the cascade, so the admin's choice wins. The values here are the defaults and the fallback — open this file on its own and it still renders correctly. The defaults are the BER-LINE-TRANS (Impreza child) theme's own tokens, :root in the theme's assets/css/main.css: --umf-brand #4eb849 = theme --green (.btn-green) --umf-accent #4eb849 = theme --green --umf-ink #1a1a1a = theme --ink --umf-muted #4a4a4a = theme --body The previous palette was a different blue (#0A5FB4) with three green values (#136637, #0f522c, #0b3d21) left in the primary ramp from some earlier design, which is why "darker brand" states rendered green. --------------------------------------------- THE FOUR SURFACES, AND WHY THERE ARE FOUR --umf-surface #ffffff the form box — and the --white alias --umf-card #ffffff cards, blocks, open accordions --umf-field #ffffff input fills, choice tiles --umf-page #f5f5f5 the body the cards sit on (--umf-brand-soft #e3f4e2 is deeper still: header bars, step bar) A FIELD IS READ BY ITS OUTLINE, NOT BY ITS FILL --umf-field was briefly tinted (#f2f6fc) on the theory that a tinted fill would separate an input from the white card behind it. It did the opposite. Tinting the fill lowers the contrast of the text and the placeholder sitting ON it, while the outline — a 1px #dce3eb, which is 1.4:1 against white — stayed invisible. The result was a form of pale blue rectangles with no findable edges and grey-on-blue placeholders. So the fill is white again, and the EDGE does the work: --umf-field-border #7d93b3 3.1:1 against white --umf-placeholder #64738a 4.8:1 against white 3:1 is the WCAG 1.4.11 floor for the boundary of a form control, and 4.5:1 is the AA floor for the text inside it. Both are now met, which is what makes the field legible — not the fill. This used to be TWO. --umf-surface painted the box, the fields and the cards all at once, and --umf-page was #f8fafc — a 2% tint that does not survive a real screen. Everything therefore rendered as one flat white sheet with no card edge and no field edge, which is exactly how the form looked in the wild. It could not be fixed by tinting --umf-surface, because --white is an alias of it and --white is a TEXT colour further down this file: the caption on the dark header bar, the glyphs on the quantity buttons. Tinting the surface would have greyed the header text. So the surfaces that need to be tintable got their own tokens, the alias kept its white, and the defaults are a staircase where each step is visible against the one beneath it. All four are configurable under Vorlagen-Anpassung > "Nur Formular auf der Website"; --umf-page is the one that decides how white the form reads overall. ============================================= */ :root { /* ---- THE FOURTEEN. Everything else is derived from these. ---- */ --umf-brand: #4eb849; --umf-brand-dark: #3e903b; --umf-brand-soft: #e3f4e2; --umf-focus: #a7dca4; --umf-accent: #4eb849; --umf-ink: #1a1a1a; --umf-muted: #4a4a4a; --umf-surface: #ffffff; --umf-card: #ffffff; --umf-field: #ffffff; --umf-page: #f5f5f5; --umf-line: #e5e5e5; --umf-line-strong: #999999; --umf-field-border: #878787; --umf-placeholder: #767676; --umf-success: #2e7d32; --umf-error: #d32f2f; /* Translucent companions. Overridden by the plugin with values built from the brand colour; these literals are the standalone fallback. */ --umf-focus-ring: rgba(167, 220, 164, 0.35); --umf-brand-shadow: rgba(78, 184, 73, 0.20); --umf-error-soft: rgba(211, 47, 47, 0.12); /* Primary Brand */ --primary-50: var(--umf-brand-soft); --primary-100: var(--umf-brand-soft); --primary-200: var(--umf-muted); --primary-300: var(--umf-focus); --primary-400: var(--umf-brand); --primary-500: var(--umf-brand); /* Main Brand */ --primary-600: var(--umf-brand); --primary-700: var(--umf-brand-dark); --primary-800: var(--umf-brand-dark); --primary-900: var(--umf-brand-dark); /* Secondary / Dark Blue */ --secondary-50: var(--umf-page); --secondary-100: var(--umf-line); --secondary-200: var(--umf-line); --secondary-300: #97acc3; --secondary-400: #7591af; --secondary-500: var(--umf-muted); --secondary-600: var(--umf-muted); --secondary-700: var(--umf-ink); --secondary-800: var(--umf-ink); /* Main Secondary */ --secondary-900: var(--umf-ink); /* Accent */ --accent-50: var(--umf-brand-soft); --accent-100: var(--umf-brand-soft); --accent-200: var(--umf-muted); --accent-300: var(--umf-focus); --accent-400: var(--umf-focus); --accent-500: var(--umf-brand); /* Main Accent */ --accent-600: var(--umf-brand); --accent-700: var(--umf-brand-dark); --accent-800: var(--umf-brand-dark); --accent-900: var(--umf-brand-dark); /* Status Colors. --success-500 used to be the brand blue, so a "success" state was indistinguishable from an ordinary one. It is green again. */ --success-50: #f0fdf4; --success-100: #dcfce7; --success-500: var(--umf-success); --success-600: var(--umf-success); --success-700: var(--umf-success); --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706; --error-50: #fef2f2; --error-100: #fee2e2; --error-500: var(--umf-error); --error-600: var(--umf-error); /* Gray Scale */ --gray-50: var(--umf-page); --gray-100: #f3f4f6; --gray-200: var(--umf-line); /* Every use of --gray-300 in this file is a form-control BORDER, so it is the field outline token — see the note in the header about why the edge rather than the fill is what makes a field readable. */ --gray-300: var(--umf-field-border); --gray-400: var(--umf-line-strong); --gray-500: var(--umf-muted); --gray-600: var(--umf-muted); --gray-700: var(--umf-ink); --gray-800: var(--umf-ink); --gray-900: var(--umf-ink); /* Utility */ --white: var(--umf-surface); --black: var(--umf-ink); /* Container Widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* Responsive Breakpoints */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ============================================= ISOLATION FROM THE THEME --------------------------------------------- Two things make the form vulnerable to the active theme: 1. SOURCE ORDER IS AGAINST US. The Umzugsmaster theme prints its main.css from header.php AFTER wp_head(), while this stylesheet is enqueued inside wp_head(). The theme is therefore always later in the cascade and wins every specificity TIE. That is why every selector below is written .umf-scope.umf-scope rather than .umf-scope: the repeated class costs nothing, matches the same single wrapper element, and lifts every rule to three classes so a tie cannot arise in the first place. 2. THE THEME STYLES BARE ELEMENTS. It carries rules for *, a, p, h1-h4, ul, li, input, label, button, textarea, td, img and svg. Those reach inside the form wherever this stylesheet does not set the same property, which is how a theme margin ends up spacing out a form group. The block below neutralises exactly that: the structural properties a theme typically sets on those elements, and nothing else. Fonts and colours are deliberately NOT reset — the form is meant to inherit the site's typography, and the reference design was drawn with the theme's font active. :where() keeps the element list at zero specificity, so the whole selector weighs (0,2,0) — above the theme's element and single-class rules, and below every real rule in this file, which is what lets the form's own styling apply on top without !important anywhere. ============================================= */ .umf-scope.umf-scope, .umf-scope.umf-scope :where(*, *::before, *::after) { box-sizing: border-box; } .umf-scope.umf-scope :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, fieldset, legend, table) { margin: 0; padding: 0; } /* The form builds its own lists; a theme bullet or counter is never wanted. */ .umf-scope.umf-scope :where(ul, ol) { list-style: none; } /* Themes commonly underline links globally. Inside the form the only links are inside styled controls, which draw their own affordance. */ .umf-scope.umf-scope :where(a) { text-decoration: none; } /* Form controls must not inherit a theme's own field styling — the theme has rules for input, textarea, button and label. Neutral values here; every real appearance is set by the rules further down this file. */ .umf-scope.umf-scope :where(input, select, textarea, button) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } .umf-scope.umf-scope :where(img, svg) { max-width: 100%; } /* ============================================= BASE STYLES & RESETS ============================================= */ .umf-scope.umf-scope :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .umf-scope.umf-scope :focus:not(:focus-visible) { outline: none; } .umf-scope.umf-scope .custom-upload { position: relative; /*display: flex;*/ align-items: center; gap: 15px; } .umf-scope.umf-scope .custom-upload p br { display:none !important; } .umf-scope.umf-scope .file-input { display: none; } .umf-scope.umf-scope .upload-btn { /*display: inline-block;*/ padding: 8px 16px; border: 1px solid var(--umf-line); border-radius: 4px; background: var(--umf-field); cursor: pointer; padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.25rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); transition: all 150ms ease-in-out; background-color: var(--umf-field); border: 1px solid var(--gray-300); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); height: 50px; } .umf-scope.umf-scope .file-name { margin-left: 10px; color: var(--umf-muted); } /* ===== Multiple file upload (optional) ===== Scoped under .form-container and using !important on the critical rules so that third-party plugin/theme CSS cannot override the field's behaviour. */ .umf-scope.umf-scope .form-container .file-upload-wrap { margin-top: 10px; } .umf-scope.umf-scope .form-container .file-upload-hint { margin: 4px 0 10px; font-size: clamp(0.75rem, 2vw, 0.85rem); color: var(--umf-muted); line-height: 1.5; } /* Always hide the native input — the styled .upload-btn label triggers it */ .umf-scope.umf-scope .cf7-file-input, .umf-scope.umf-scope .form-container .cf7-file-input { display: none !important; } .umf-scope.umf-scope .form-container .file-upload-status { margin-left: 10px; color: var(--umf-muted); } .umf-scope.umf-scope .form-container .file-upload-list { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; } .umf-scope.umf-scope .form-container .file-upload-list li.file-upload-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid var(--gray-300, var(--umf-line)); border-radius: 8px; background: var(--umf-card, #fff); font-size: clamp(0.8rem, 2vw, 0.9rem); list-style: none !important; } .umf-scope.umf-scope .form-container .file-upload-list li.file-upload-item::before { content: none !important; } .umf-scope.umf-scope .form-container .file-upload-item-name { word-break: break-all; color: var(--gray-900); } .umf-scope.umf-scope .form-container .file-upload-remove { flex: 0 0 auto; width: 24px; height: 24px; line-height: 1; font-size: 18px; border: none; border-radius: 50%; background: var(--umf-error-soft); color: var(--umf-error); cursor: pointer; transition: all 150ms ease-in-out; } .umf-scope.umf-scope .form-container .file-upload-remove:hover { background: var(--umf-error); color: #fff; } .umf-scope.umf-scope .form-container .file-upload-error { color: var(--umf-error); display: none; margin-top: 6px; } /* ===== Google reCAPTCHA v2 ===== */ .umf-scope.umf-scope .form-container .recaptcha-group { margin: 16px 0; } .umf-scope.umf-scope .form-container .cf7-recaptcha { display: inline-block; max-width: 100%; overflow: hidden; } .umf-scope.umf-scope .form-container .recaptcha-error { display: none; color: var(--umf-error); margin-top: 6px; } .umf-scope.umf-scope .wpcf7 h1, .umf-scope.umf-scope .wpcf7 h2, .umf-scope.umf-scope .wpcf7 h3, .umf-scope.umf-scope .wpcf7 h4, .umf-scope.umf-scope .wpcf7 h5, .umf-scope.umf-scope .wpcf7 h6 { font-weight: 500; margin-bottom: 0; color: var(--gray-900); } .umf-scope.umf-scope .wpcf7 h1, .umf-scope.umf-scope .wpcf7 h2, .umf-scope.umf-scope .wpcf7 h3, .umf-scope.umf-scope .wpcf7 h4, .umf-scope.umf-scope .wpcf7 h5, .umf-scope.umf-scope .wpcf7 h6 { font-weight: 500; margin-bottom: 0; color: var(--gray-900); } .umf-scope.umf-scope .wpcf7 h1 { font-size: clamp(1.25rem, 4vw, 1.625rem); } .umf-scope.umf-scope .wpcf7 h2 { font-size: clamp(1rem, 3vw, 1.25rem); color: var(--umf-ink); } .umf-scope.umf-scope .wpcf7 h3 { font-size: clamp(0.875rem, 2.5vw, 1.125rem); } .umf-scope.umf-scope .wpcf7 h4 { font-size: clamp(0.875rem, 2vw, 1rem); } .umf-scope.umf-scope .wpcf7 p { margin-bottom: 1rem; line-height: 1.6; } .umf-scope.umf-scope .wpcf7 a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; transition: color 150ms ease-in-out; } .umf-scope.umf-scope .wpcf7 a:hover { color: var(--umf-ink); } .umf-scope.umf-scope svg, .umf-scope.umf-scope video, .umf-scope.umf-scope canvas, .umf-scope.umf-scope audio, .umf-scope.umf-scope iframe, .umf-scope.umf-scope embed, .umf-scope.umf-scope object { display: block; max-width: 100%; height: auto; } /* ============================================= LAYOUT & CONTAINER STYLES ============================================= */ .umf-scope.umf-scope .wpcf7 .container { width: 100%; max-width: var(--container-2xl); margin: 0 auto; padding: 0 clamp(0.5rem, 4vw, 1rem); } @media (min-width: 640px) { .umf-scope.umf-scope .wpcf7 .container { max-width: var(--container-sm); padding: 0 clamp(1rem, 4vw, 1.5rem); } } @media (min-width: 768px) { .umf-scope.umf-scope .wpcf7 .container { max-width: var(--container-md); } } @media (min-width: 1024px) { .umf-scope.umf-scope .wpcf7 .container { max-width: var(--container-lg); padding: 0 clamp(1.5rem, 4vw, 2rem); } } @media (min-width: 1280px) { .umf-scope.umf-scope .wpcf7 .container { max-width: var(--container-xl); } } @media (min-width: 1536px) { .umf-scope.umf-scope .wpcf7 .container { max-width: var(--container-2xl); } } /* ============================================= FORM CONTAINER STYLES ============================================= */ .umf-scope.umf-scope .form-container { background-color: var(--umf-surface); border-radius: clamp(0.75rem, 2vw, 1.5rem); box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; overflow: hidden; transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out; margin: clamp(1rem, 3vw, 1.5rem) auto; max-width: 1200px; border: 1px solid var(--umf-line); } .umf-scope.umf-scope .form-header { padding: clamp(0.75rem, 3vw, 1rem); background: var(--umf-brand); color: var(--white); text-align: center; position: relative; overflow: hidden; } .umf-scope.umf-scope .form-header h1 { color: #fff; margin: 0; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-size: clamp(1.25rem, 4vw, 1.625rem); } /* ============================================= PROGRESS INDICATOR STYLES ============================================= */ .umf-scope.umf-scope .form-progress { display: flex; justify-content: space-between; align-items: center; padding: clamp(1rem, 3vw, 1.5rem); background-color: var(--primary-50); position: relative; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; gap: 0.5rem; } .umf-scope.umf-scope .progress-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; min-width: 80px; } .umf-scope.umf-scope .progress-step.active .step-label { color: var(--umf-ink); font-weight: 600; border-bottom: 2px solid var(--umf-accent); } .umf-scope.umf-scope .progress-step.completed .step-label { color: var(--success-600); } .umf-scope.umf-scope .step-label { font-size: clamp(0.625rem, 2vw, 0.75rem); color: var(--umf-ink); text-align: center; font-weight: 500; transition: all 300ms ease-in-out; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; } .umf-scope.umf-scope .form-content { background: var(--umf-page); } /* ============================================= FORM CONTENT STYLES ============================================= */ .umf-scope.umf-scope .form-content { padding: clamp(1rem, 4vw, 2rem); } .umf-scope.umf-scope .step { display: none; animation: fadeIn 300ms ease-out; /* * NOT A NO-OP. DO NOT DELETE AS "PADDING THAT WAS ALREADY ZERO". * * `.step` is one of the class names this form shares with the Umzugsmaster * theme — it is the theme's process-timeline step, the one with the dot down * the left on the home, Berlin, Stadt, Über-uns and Leistungen pages. The * theme styles it UNSCOPED, in two places: * * .step { position: relative; padding-top: var(--s64); } main.css * @media … { .step { padding-top: var(--s32); } } main.css * * Scoping this stylesheet stops OUR rules escaping, and it wins any property * both files set — but it can only win a property it actually declares. This * rule declared display and animation, so the theme's padding-top fell * straight through and every step of the form opened with 64px (32px on * narrow screens) of empty space above it. * * Zeroing it here rather than editing the theme, because the theme's rule is * doing its job: deleting it would collapse the timeline on five templates. * The (0,3,0) of `.umf-scope.umf-scope .step` beats the theme's (0,1,0) at * every breakpoint, so this one declaration covers both of its rules and does * not depend on which stylesheet the page happens to load second. */ padding-top: 0; } .umf-scope.umf-scope .step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .umf-scope.umf-scope .step-title { font-size: clamp(1.125rem, 4vw, 1.5rem); color: var(--umf-ink); margin-bottom: clamp(1rem, 3vw, 1.5rem); padding-bottom: clamp(0.5rem, 2vw, 0.75rem); border-bottom: 2px solid var(--umf-accent); position: relative; } /* ============================================= FORM GROUP & CONTROL STYLES ============================================= */ .umf-scope.umf-scope .form-group { margin-bottom: 4px; position: relative; } .umf-scope.umf-scope .form-group.required label::after { content: '*'; color: var(--error-500); margin-left: 0.25rem; } .umf-scope.umf-scope label { display: block; margin-bottom: clamp(0.25rem, 1vw, 0.5rem); font-weight: 500; color: var(--gray-700); font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .form-control { width: 100%; height: clamp(2.25rem, 5vw, 2.5rem); padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 0.75rem); border: 1px solid var(--gray-300); border-radius: clamp(0.375rem, 1vw, 0.5rem); font-size: clamp(0.875rem, 2vw, 1rem); line-height: 1.5; color: var(--gray-900); background-color: var(--umf-field); transition: all 150ms ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .form-control:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); } .umf-scope.umf-scope .form-control:hover { border-color: var(--gray-400); } .umf-scope.umf-scope .form-control::placeholder { color: var(--umf-placeholder); font-style: italic; } .umf-scope.umf-scope .form-control.error { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--umf-error-soft); } .umf-scope.umf-scope .form-control.error:focus { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--umf-error-soft); } .umf-scope.umf-scope .error-msg { display: none; color: var(--error-600); font-size: clamp(0.625rem, 1.5vw, 0.75rem); margin-top: clamp(0.125rem, 0.5vw, 0.25rem); line-height: 1.25; font-weight: 500; } .umf-scope.umf-scope .form-group.error .error-msg, .umf-scope.umf-scope .error + .error-msg, .umf-scope.umf-scope .form-control.error + .error-msg { display: block; } .umf-scope.umf-scope textarea.form-control { min-height: clamp(80px, 20vw, 120px); padding-top: clamp(0.5rem, 1.5vw, 0.75rem); padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem); resize: vertical; } .umf-scope.umf-scope select.form-control, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-select.form-control { appearance: none; /* THE ARROW'S COLOUR IS NOT SET HERE. A background-image cannot be recoloured by CSS, so this chevron's fill used to be a literal — and it was #0A5FB4, the blue from the palette that came BEFORE this design system. It matched nothing else on the page and no picker could reach it. The plugin now builds the whole url() with the chosen colour baked into the SVG and hands it over as --umf-select-arrow; see cf7_email_pdf_select_arrow_css(). The literal below is only the fallback for opening this file without the plugin, and carries the brand colour rather than the old one. */ background-image: var(--umf-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233e903b' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E")); background-repeat: no-repeat; background-position: right clamp(0.75rem, 2vw, 1rem) center; background-size: clamp(14px, 3vw, 16px); padding-right: clamp(2rem, 5vw, 2.5rem); cursor: pointer; transition: all 150ms ease-in-out; border: 1px solid var(--gray-300); border-radius: clamp(0.375rem, 1vw, 0.5rem); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); color: var(--gray-900); /* Set default arrow color */ --select-arrow-color: var(--primary-500); } .umf-scope.umf-scope select.form-control:hover, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-select.form-control:hover { border-color: var(--primary-400); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Change arrow color on hover */ --select-arrow-color: var(--primary-400); } .umf-scope.umf-scope select.form-control:focus, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-select.form-control:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); background-color: var(--umf-field); /* Change arrow color on focus */ --select-arrow-color: var(--primary-500); } .umf-scope.umf-scope select.form-control option, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-select.form-control option { background-color: var(--umf-field); color: var(--gray-900); padding: 0.5rem; } /* ============================================= CHECKBOX & RADIO STYLES ============================================= */ .umf-scope.umf-scope .checkbox-group, .umf-scope.umf-scope .radio-group { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.5vw, 0.75rem); margin-bottom: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .wpcf7-form-control-wrap { position: relative; display: block; margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .wpcf7-form-control.wpcf7-checkbox, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-radio { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1.5vw, 1rem); margin-top: clamp(0.25rem, 1vw, 0.5rem); box-shadow: none; border: none; padding: 3px 0px; } .umf-scope.umf-scope .wpcf7-form-control.wpcf7-checkbox span.wpcf7-list-item.first, .umf-scope.umf-scope .wpcf7-form-control.wpcf7-radio span.wpcf7-list-item.first { margin: 0; } .umf-scope.umf-scope .wpcf7-list-item { position: relative; display: flex; align-items: flex-start; margin-bottom: 0; padding: 0; } .umf-scope.umf-scope .wpcf7-list-item.last { margin-bottom: 0; } .umf-scope.umf-scope .wpcf7-list-item label { display: flex; align-items: center; cursor: pointer; margin-bottom: 0; padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.25rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); transition: all 150ms ease-in-out; background-color: var(--umf-field); border: 1px solid var(--gray-300); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); width: auto; font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .wpcf7-list-item label:hover { background-color: var(--primary-50); border-color: var(--primary-300); transform: translateY(-1px); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"], .umf-scope.umf-scope .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label { position: relative; padding-left: clamp(1.5rem, 4vw, 2rem); display: flex; align-items: center; min-height: clamp(1.25rem, 3vw, 1.5rem); font-weight: 500; color: var(--gray-700); transition: color 150ms ease-in-out; } .umf-scope.umf-scope span#unknown-address { margin-left: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: clamp(1rem, 2.5vw, 1.25rem); height: clamp(1rem, 2.5vw, 1.25rem); border-radius: clamp(0.25rem, 0.75vw, 0.375rem); border: 2px solid var(--umf-field-border); background-color: var(--umf-field); transition: all 150ms ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before { background-color: var(--primary-500); border-color: var(--primary-500); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after { content: ''; position: absolute; /* left: clamp(0.25rem, 0.75vw, 0.35rem); */ left: 7px; top: 50%; transform: translateY(-50%) rotate(45deg); width: clamp(0.25rem, 0.75vw, 0.35rem); height: clamp(0.5rem, 1.25vw, 0.625rem); border: solid var(--umf-btn-text); border-width: 0 2px 2px 0; } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"]:hover + .wpcf7-list-item-label::before { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"]:focus + .wpcf7-list-item-label::before { outline: 2px solid var(--primary-500); outline-offset: 2px; } .umf-scope.umf-scope .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label { color: var(--umf-ink); } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label { position: relative; padding-left: clamp(1.75rem, 4.5vw, 2.25rem); display: flex; align-items: center; min-height: clamp(1.25rem, 3vw, 1.5rem); font-weight: 500; color: var(--gray-700); transition: color 150ms ease-in-out; } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: clamp(1rem, 2.5vw, 1.25rem); height: clamp(1rem, 2.5vw, 1.25rem); border-radius: 50%; border: 2px solid var(--umf-field-border); background-color: var(--umf-field); transition: all 150ms ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::before { background-color: var(--primary-500); border-color: var(--primary-500); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::after { content: ''; position: absolute; left: clamp(0.25rem, 0.75vw, 0.35rem); top: 50%; left: 8px; transform: translateY(-50%); width: clamp(0.375rem, 1vw, 0.5rem); height: clamp(0.375rem, 1vw, 0.5rem); border-radius: 50%; background-color: var(--umf-btn-text); } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"]:hover + .wpcf7-list-item-label::before { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"]:focus + .wpcf7-list-item-label::before { outline: 2px solid var(--primary-500); outline-offset: 2px; } .umf-scope.umf-scope .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label { color: var(--umf-ink); } .pdf-umzug-form .float-container-btns,.pdf-umzug-form a#scroll-top{ display: none !important; } /* ============================================= STEP 1: ADDRESS SECTION STYLES ============================================= */ .umf-scope.umf-scope .address-section { margin-bottom: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--umf-muted); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); overflow: hidden; transition: all 300ms ease-in-out; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); background: var(--umf-card); } .umf-scope.umf-scope .address-section:hover { border-color: var(--umf-muted); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .address-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; background: var(--primary-50); border-bottom: 1px solid var(--gray-200); margin-bottom: clamp(1rem, 2.5vw, 1.5rem); } .umf-scope.umf-scope .firststepwrapper { display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 1.5rem); } .umf-scope.umf-scope .firststepwrapper > div { width: 100%; } .umf-scope.umf-scope .form-section.datesection, .umf-scope.umf-scope .form-section.contactsection { background-color: var(--umf-card); border: 1px solid var(--gray-200); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); padding: clamp(0.75rem, 2vw, 1.25rem); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); transition: all 300ms ease-in-out; margin-bottom: clamp(1.5rem, 4vw, 2rem); } .umf-scope.umf-scope .fourcolwrapper { display: grid; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1rem); grid-template-columns: 14% 27% 27% 27%; } .umf-scope.umf-scope .form-group.contdetail { width: 100%; } .umf-scope.umf-scope .form-group.anderewrapper { width: 100%; } .umf-scope.umf-scope h2.step-title { margin-bottom: clamp(1rem, 2.5vw, 1.25rem); } .umf-scope.umf-scope .address-title { margin: 0; color: var(--umf-ink); font-size: clamp(0.875rem, 2.5vw, 1.125rem); font-weight: 600; display: flex; align-items: center; } .umf-scope.umf-scope .address-title::before, .umf-scope.umf-scope .section-title::before { content: ''; display: inline-block; width: clamp(6px, 1.5vw, 8px); height: clamp(6px, 1.5vw, 8px); background-color: var(--umf-accent); border-radius: 50%; margin-right: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .address-grid { display: grid; grid-template-columns: 1fr; gap: 0px 17px; padding: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .contactsection .address-grid { padding-left: 0; } .umf-scope.umf-scope [role="button"] { cursor: pointer; user-select: none; } .umf-scope.umf-scope .add-via-btn, .umf-scope.umf-scope .remove-via-btn { display: inline-flex; align-items: center; gap: clamp(0.375rem, 1vw, 0.5rem); padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem); color: var(--umf-ink); font-weight: 500; background: var(--primary-50); border: 1px solid var(--primary-200); border-radius: clamp(0.375rem, 1vw, 0.5rem); transition: all 150ms ease-in-out; cursor: pointer; font-size: clamp(0.75rem, 2vw, 0.875rem); margin-top: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .remove-via-btn { margin-top: 0; } .umf-scope.umf-scope .add-via-btn { margin-bottom: clamp(1.5rem, 4vw, 2rem); width: 100%; } .umf-scope.umf-scope .address-section .checkbox-group { margin: 0; } .umf-scope.umf-scope .add-via-btn:hover, .umf-scope.umf-scope .remove-via-btn:hover { color: var(--umf-ink); background: linear-gradient(to right, var(--primary-100), var(--primary-50)); border-color: var(--primary-300); transform: translateY(-1px); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .remove-via-btn { color: var(--error-600); background: linear-gradient(to right, var(--error-50), var(--white)); border-color: var(--error-200); } .umf-scope.umf-scope .remove-via-btn:hover { color: var(--error-700); background: linear-gradient(to right, var(--error-100), var(--error-50)); border-color: var(--error-300); } .umf-scope.umf-scope .map-container { border: 1px solid var(--gray-200); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); position: relative; } .umf-scope.umf-scope #map { width: 100%; height: 100%; background-color: var(--gray-100); } .umf-scope.umf-scope .map-error { color: var(--error-600); padding: clamp(1rem, 3vw, 1.5rem); text-align: center; font-weight: 600; background-color: var(--error-50); border-radius: clamp(0.375rem, 1vw, 0.5rem); margin: clamp(0.75rem, 2vw, 1rem) 0; font-size: clamp(0.75rem, 2vw, 0.875rem); display: flex; align-items: center; justify-content: center; height: 100%; } .umf-scope.umf-scope .distance-summary { display: none; } .umf-scope.umf-scope .distance-summary label { margin: 0; font-weight: 600; color: var(--gray-700); white-space: nowrap; font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .distance-summary .form-control { max-width: 100%; font-weight: 500; color: var(--umf-ink); background-color: var(--primary-50); border-color: var(--primary-200); } /* ============================================= STEP 2: MOVING DETAILS STYLES ============================================= */ .umf-scope.umf-scope .two-column-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.5rem); margin-bottom: clamp(1rem, 3vw, 1.5rem); } .umf-scope.umf-scope .column { background-color: var(--umf-card); border: 1px solid var(--gray-200); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); padding: clamp(0.75rem, 2vw, 1.25rem); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); transition: all 300ms ease-in-out; } .umf-scope.umf-scope .column:hover { border-color: var(--primary-200); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .twofieldswrapper { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .twofieldswrapper > div { width: 100%; } .umf-scope.umf-scope span#current-elevator, .umf-scope.umf-scope span#current-dismantle, .umf-scope.umf-scope span#current-kitchen, .umf-scope.umf-scope span#current-packing, .umf-scope.umf-scope span#new-elevator, .umf-scope.umf-scope span#new-assembly, .umf-scope.umf-scope span#new-unpacking { display: block; } .umf-scope.umf-scope span#current-elevator { margin-top: clamp(0.5rem, 1.5vw, 0.75rem) !important; } .umf-scope.umf-scope span#current-elevator label, .umf-scope.umf-scope span#current-dismantle label, .umf-scope.umf-scope span#current-kitchen label, .umf-scope.umf-scope span#current-packing label, .umf-scope.umf-scope span#new-elevator label, .umf-scope.umf-scope span#new-assembly label, .umf-scope.umf-scope span#new-unpacking label { width: 100%; } .umf-scope.umf-scope .section-title { color: var(--primary-600); font-size: clamp(0.875rem, 2.5vw, 1.125rem); margin-bottom: 0; position: relative; font-weight: 600; } .umf-scope.umf-scope .wrapperdategrp { display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .wrapperdategrp > .form-group { width: 100%; } .umf-scope.umf-scope .datewrapper { width: 100%; } .umf-scope.umf-scope .date-group { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .conditional-field { max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; margin-top: 0; opacity: 0; } .umf-scope.umf-scope input:checked ~ .conditional-field, .umf-scope.umf-scope select:valid ~ .conditional-field { max-height: 500px; margin-top: clamp(0.5rem, 1.5vw, 0.75rem); opacity: 1; } .umf-scope.umf-scope .input-with-dropdown { display: grid; grid-template-columns: 58% 40%; } .umf-scope.umf-scope .input-with-dropdown .form-control { flex: 1; } .umf-scope.umf-scope .form-group.wergrp { display: grid; grid-template-columns: 49% 49%; column-gap: 15px; } /* ============================================= STEP 3: MOVING SPECIFICS STYLES ============================================= */ .umf-scope.umf-scope .step-3 .form-group { margin-bottom: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .step-3 textarea { min-height: clamp(80px, 20vw, 120px); resize: vertical; } /* ============================================= STEP 4: INVENTORY LIST STYLES ============================================= */ .umf-scope.umf-scope .accordion-container { margin-bottom: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--primary-400); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .accordion-item { border-bottom: 1px solid var(--primary-400); transition: all 300ms ease-in-out; } .umf-scope.umf-scope .accordion-item .wpcf7-form-control-wrap { width: fit-content; margin-bottom: 0; } .umf-scope.umf-scope .accordion-item:last-child { border-bottom: none; } .umf-scope.umf-scope .accordion-item:hover { background-color: var(--gray-50); } .umf-scope.umf-scope .accordion-header { width: 100%; padding: clamp(0.75rem, 2vw, 1rem); background: var(--primary-50); text-align: left; display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 0.75rem); cursor: pointer; font-weight: 600; transition: all 300ms ease-in-out; min-height: clamp(3rem, 8vw, 4rem); position: relative; font-size: 18px; } .umf-scope.umf-scope .accordion-header p {display: flex;align-items: center;gap: 7px;} .umf-scope.umf-scope .accordion-header::after { content: '+'; position: absolute; right: clamp(0.75rem, 2vw, 1rem); top: 50%; transform: translateY(-50%); font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--primary-500); transition: transform 300ms ease-in-out; } .umf-scope.umf-scope .accordion-header:hover::after {color: #fff !important;} .umf-scope.umf-scope .accordion-item.active .accordion-header::after { transform: translateY(-50%) rotate(45deg); } .umf-scope.umf-scope .accordion-header:hover { background: var(--umf-brand); color: #ffffff; } .umf-scope.umf-scope .accordion-header:hover .accordion-icon { filter: invert(1); } .umf-scope.umf-scope .accordion-icon { width: clamp(1.25rem, 3vw, 1.5rem); height: clamp(1.25rem, 3vw, 1.5rem); flex-shrink: 0; color: var(--primary-500); } .umf-scope.umf-scope .accordion-content { max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; background-color: var(--umf-card); display: grid; grid-template-columns: 1fr; gap: clamp(0.5rem, 1.5vw, 0.75rem); padding: 0px 11px 0px 11px; } .umf-scope.umf-scope .accordion-item.active .accordion-content { max-height: 3000px; } .umf-scope.umf-scope .item-control-group { padding: 24px 15px 30px 15px; border-bottom: 1px solid var(--gray-100); transition: background-color 150ms ease-in-out; justify-self: center; } .umf-scope.umf-scope .item-control-group:last-child { border-bottom: none; } .umf-scope.umf-scope .item-control-group:hover { background-color: var(--gray-50); } .umf-scope.umf-scope .item-label { display: block; margin-bottom: clamp(0.25rem, 1vw, 0.5rem); font-weight: 500; color: var(--gray-700); font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .item-row { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .item-row p {margin-bottom: 0px !important;} .umf-scope.umf-scope .quantity-btn { width: clamp(2.25rem, 5vw, 2.25rem); height: clamp(2.25rem, 5vw, 2.25rem); border: 1px solid var(--gray-300); border-radius: clamp(0.375rem, 1vw, 0.5rem); font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 150ms ease-in-out; cursor: pointer; flex-shrink: 0; font-size: clamp(0.875rem, 2.5vw, 1.125rem); } .umf-scope.umf-scope .quantity-btn:hover { transform: scale(1.05); } .umf-scope.umf-scope .quantity-btn.decrement { background-color: var(--secondary-50); color: var(--secondary-600); border-color: var(--secondary-600); } .umf-scope.umf-scope .quantity-btn.decrement:hover { background-color: var(--umf-brand); border-color: var(--umf-brand); color: var(--white); } .umf-scope.umf-scope .quantity-btn.increment { background-color: var(--umf-brand); color: #fff; border-color: var(--success-200); } .umf-scope.umf-scope .quantity-btn p {margin-bottom: 0px !important;} .umf-scope.umf-scope h3.summary-card-title { color: var(--umf-ink); } .umf-scope.umf-scope .quantity-btn.increment:hover { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--white); } .umf-scope.umf-scope .smart-input { flex: 1; text-align: center; padding: clamp(0.375rem, 1vw, 0.5rem); border: 1px solid var(--gray-300); border-radius: clamp(0.25rem, 0.75vw, 0.375rem); min-width: clamp(3rem, 8vw, 4rem); max-width: 100%; font-weight: 500; color: var(--gray-800); } .umf-scope.umf-scope .packmaterialgrp .accordion-content { display: block; } .umf-scope.umf-scope .packing-instruction { margin-bottom: clamp(1rem, 3vw, 1.25rem); color: var(--gray-600); font-size: clamp(0.75rem, 2vw, 0.875rem); text-align: center; line-height: 1.5; padding: clamp(0.5rem, 1.5vw, 0.75rem); background-color: var(--primary-50); border-radius: clamp(0.375rem, 1vw, 0.5rem); border-left: 4px solid var(--primary-400); } .umf-scope.umf-scope .packing-subheader { margin: clamp(0.75rem, 2vw, 1rem) 0 clamp(0.5rem, 1.5vw, 0.75rem) 0; font-size: clamp(0.875rem, 2.5vw, 1rem); color: var(--gray-800); font-weight: 600; padding-bottom: clamp(0.375rem, 1vw, 0.5rem); border-bottom: 1px solid var(--gray-200); } .umf-scope.umf-scope .packmaterialgrp-wrapper { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 2vw, 1rem); padding: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .packing-total { display: flex; align-items: center; justify-content: center; margin: clamp(0.75rem, 2vw, 1rem) auto; padding-top: clamp(0.75rem, 2vw, 1rem); border-top: 1px solid var(--gray-200); font-size: clamp(0.875rem, 2.5vw, 1.125rem); text-align: center; width: 100%; max-width: 100%; font-weight: 600; color: var(--umf-ink); } .umf-scope.umf-scope .total-value { font-weight: 700; margin-left: clamp(0.5rem, 1.5vw, 0.75rem); padding: clamp(0.25rem, 0.75vw, 0.375rem) clamp(0.5rem, 1.5vw, 0.75rem); background-color: var(--primary-100); border-radius: clamp(0.375rem, 1vw, 0.5rem); color: var(--primary-800); } /* ============================================= SUMMARY SIDEBAR STYLES ============================================= */ .umf-scope.umf-scope .summary-card { position: fixed; bottom: clamp(1rem, 3vw, 1.25rem); right: clamp(1rem, 3vw, 1.25rem); width: clamp(280px, 70vw, 320px); max-height: 70vh; background: linear-gradient(135deg, var(--umf-surface), var(--umf-page)); border-radius: clamp(0.75rem, 2vw, 1rem); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); transform: translateY(150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .umf-scope.umf-scope .summary-card.active { transform: translateY(0); } .umf-scope.umf-scope .summary-card-header { display: flex; align-items: center; padding: clamp(0.75rem, 2vw, 1rem); background: var(--umf-brand); color: #fff; position: relative; overflow: hidden; height: auto; } .umf-scope.umf-scope .summary-card-header h3 { color: #fff !important; } .umf-scope.umf-scope .summary-card-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml;utf8,'); background-size: 40px 40px; opacity: 0.3; z-index: 0; } .umf-scope.umf-scope .scene-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .umf-scope.umf-scope .sky { position: absolute; top: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to bottom, rgba(135, 206, 235, 0.3), rgba(135, 206, 235, 0.1)); } .umf-scope.umf-scope .cloud { position: absolute; background: rgba(255, 255, 255, 0.7); border-radius: 50%; opacity: 0.8; } .umf-scope.umf-scope .cloud::before, .umf-scope.umf-scope .cloud::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.7); border-radius: 50%; } .umf-scope.umf-scope .cloud-1 { width: 25px; height: 10px; top: 15%; left: 20%; animation: float-cloud 20s linear infinite; } .umf-scope.umf-scope .cloud-1::before { width: 15px; height: 15px; top: -7px; left: 5px; } .umf-scope.umf-scope .cloud-1::after { width: 20px; height: 12px; top: -5px; right: 5px; } .umf-scope.umf-scope .cloud-2 { width: 20px; height: 8px; top: 25%; left: 70%; animation: float-cloud 25s linear infinite; animation-delay: -10s; } .umf-scope.umf-scope .cloud-2::before { width: 12px; height: 12px; top: -6px; left: 4px; } .umf-scope.umf-scope .cloud-2::after { width: 15px; height: 10px; top: -4px; right: 4px; } .umf-scope.umf-scope .road-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; perspective: 200px; overflow: hidden; } .umf-scope.umf-scope .road { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: var(--umf-muted); transform: rotateX(60deg); transform-origin: bottom; } .umf-scope.umf-scope .road-line { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: repeating-linear-gradient( 90deg, #fff, #fff 10px, transparent 10px, transparent 20px ); animation: road-move 1s linear infinite; } .umf-scope.umf-scope .road-line-2 { animation-delay: -0.5s; } .umf-scope.umf-scope .truck-container { position: absolute; bottom: 15px; left: -120px; width: 120px; height: 70px; animation: drive 8s linear infinite; } .umf-scope.umf-scope .moving-truck { width: 100%; height: 100%; } .umf-scope.umf-scope .wheel-front, .umf-scope.umf-scope .wheel-rear { animation: rotate 0.8s linear infinite; transform-origin: center; } .umf-scope.umf-scope .wheel-front-inner, .umf-scope.umf-scope .wheel-rear-inner { animation: rotate 0.8s linear infinite reverse; transform-origin: center; } .umf-scope.umf-scope .wheel-front-rim, .umf-scope.umf-scope .wheel-rear-rim { animation: rotate 0.8s linear infinite; transform-origin: center; } @keyframes drive { 0% { left: -120px; } 100% { left: 100%; } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes road-move { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } } @keyframes float-cloud { 0% { left: -30px; } 100% { left: 100%; } } .umf-scope.umf-scope .summary-card-title { flex: 1; font-size: clamp(0.875rem, 2.5vw, 1rem); font-weight: 600; margin: 0; position: relative; z-index: 2; color: #fff; letter-spacing: normal; } .umf-scope.umf-scope .summary-card-close { display: flex; align-items: center; justify-content: center; width: clamp(2rem, 5vw, 2.25rem); height: clamp(2rem, 5vw, 2.25rem); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); background: var(--umf-brand); border: none; color: white; cursor: pointer; transition: background 0.2s; position: relative; z-index: 2; } .umf-scope.umf-scope .summary-card-close:hover { background: rgba(255, 255, 255, 2555); color: var(--umf-brand); } .umf-scope.umf-scope .summary-card-body { padding: clamp(0.75rem, 2vw, 1rem); overflow-y: auto; flex: 1; } .umf-scope.umf-scope .summary-stats { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(1rem, 2.5vw, 1rem); padding: clamp(0.75rem, 2vw, 1rem); background: var(--umf-focus-ring); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .summary-stat { text-align: center; } .umf-scope.umf-scope .summary-stat-label { font-size: 14px; color: var(--umf-ink); margin-bottom: clamp(0.25rem, 0.75vw, 0.375rem); } .umf-scope.umf-scope .summary-stat-value { font-size: clamp(1rem, 2.5vw, 1.125rem); font-weight: 700; color: var(--umf-ink); } .umf-scope.umf-scope .summary-stat-divider { width: 1px; height: clamp(2.5rem, 6vw, 3rem); background: rgba(0, 0, 0, 0.08); } .umf-scope.umf-scope .summary-items-container { margin-bottom: clamp(1rem, 2.5vw, 1rem); } .umf-scope.umf-scope .summary-category { margin-bottom: clamp(0.75rem, 2vw, 1rem); padding: clamp(0.75rem, 2vw, 1rem); background: white; border-radius: clamp(0.5rem, 1.5vw, 0.75rem); border: 1px solid rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .summary-category h4 { font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 600; color: var(--gray-800); margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem) 0; display: flex; align-items: center; } .umf-scope.umf-scope .summary-category h4::before { content: ''; display: inline-block; width: clamp(6px, 1.5vw, 8px); height: clamp(6px, 1.5vw, 8px); border-radius: 50%; background: var(--primary-500); margin-right: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .summary-item { display: flex; justify-content: space-between; padding: clamp(0.375rem, 1vw, 0.5rem) 0; font-size: clamp(0.625rem, 1.5vw, 0.75rem); color: var(--gray-600); } .umf-scope.umf-scope .summary-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .summary-item .volume { font-weight: 600; color: var(--primary-600); } .umf-scope.umf-scope .summary-subtotal { display: flex; justify-content: space-between; padding: clamp(0.5rem, 1.5vw, 0.75rem) 0; margin-top: clamp(0.5rem, 1.5vw, 0.75rem); border-top: 1px dashed rgba(0, 0, 0, 0.1); font-size: clamp(0.625rem, 1.5vw, 0.75rem); font-weight: 600; color: var(--gray-700); } .umf-scope.umf-scope .summary-total { display: none; } .umf-scope.umf-scope .summary-toggle-button { position: fixed; bottom: clamp(6rem, 15vw, 8rem); right: clamp(1.5rem, 4vw, 2rem); width: clamp(2.5rem, 6vw, 3rem); height: clamp(2.5rem, 6vw, 3rem); border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--umf-ink)); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px var(--umf-focus-ring); z-index: 999; transition: all 0.3s ease; transform: scale(0); opacity: 0; } .umf-scope.umf-scope .summary-toggle-button.active { transform: scale(1); opacity: 1; } .umf-scope.umf-scope .summary-toggle-button:hover { transform: scale(1.1); box-shadow: 0 6px 16px var(--umf-focus-ring); } .umf-scope.umf-scope .summary-toggle-icon { position: relative; } .umf-scope.umf-scope .summary-toggle-badge { position: absolute; top: clamp(-0.5rem, -1.5vw, -0.75rem); right: clamp(-0.5rem, -1.5vw, -0.75rem); width: clamp(1.25rem, 3vw, 1.5rem); height: clamp(1.25rem, 3vw, 1.5rem); border-radius: 50%; background: var(--umf-accent); color: white; display: flex; align-items: center; justify-content: center; font-size: clamp(0.625rem, 1.5vw, 0.75rem); font-weight: 700; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* ============================================= ADDITIONAL COMPONENTS STYLES ============================================= */ .umf-scope.umf-scope .additional-notes { margin-top: clamp(1rem, 3vw, 1.5rem); padding: clamp(0.75rem, 2vw, 1.25rem); background-color: var(--gray-50); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); border: 1px solid var(--gray-200); } .umf-scope.umf-scope .additional-notes label { font-weight: 600; color: var(--gray-800); margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.875rem, 2.5vw, 1rem); } .umf-scope.umf-scope .privacy-notice { text-align: center; margin-top: clamp(1rem, 3vw, 1.5rem); font-size: clamp(0.75rem, 2vw, 0.875rem); color: var(--gray-600); padding: clamp(0.5rem, 1.5vw, 0.75rem); background-color: var(--gray-100); border-radius: clamp(0.375rem, 1vw, 0.5rem); border-left: 4px solid var(--primary-400); } .umf-scope.umf-scope div#current-elevator-fields, .umf-scope.umf-scope div#new-elevator-fields { border: 1px solid var(--primary-200); padding: 18px; margin-bottom: 32px !important; border-radius: 12px; } /* ============================================= FORM ACTIONS & NAVIGATION STYLES ============================================= */ .umf-scope.umf-scope .form-actions { display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1rem); margin-top: clamp(1.5rem, 4vw, 2rem); padding-top: clamp(1rem, 3vw, 1.5rem); border-top: 1px solid var(--gray-200); } .umf-scope.umf-scope .form-actions p { margin-bottom: 0px !important; } .umf-scope.umf-scope .umf-btn { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem); border-radius: 40px; font-weight: 500; font-size: 19px; line-height: 1.5; transition: all 150ms ease-in-out; display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.375rem, 1vw, 0.5rem); border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: clamp(2.75rem, 7vw, 3.5rem); width: 100%; position: relative; overflow: hidden; background: var(--umf-btn-next-grad); box-shadow: 0 12px 28px var(--umf-btn-next-shadow) !important; } /* .page-id-139 .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0)); transform: translateX(-100%); transition: transform 300ms ease-in-out; } */ .umf-scope.umf-scope .umf-btn:hover { box-shadow: 0 18px 40px var(--umf-btn-next-shadow-hover) !important; transform: translateY(-2px) !important; } .umf-scope.umf-scope .btn-primary { background: var(--umf-btn-next); color: var(--umf-btn-text); border-color: var(--umf-btn-next); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .btn-primary:active { transform: translateY(0); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .btn-outline { background: var(--umf-btn-prev); color: var(--umf-btn-text); border-color: var(--gray-300); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .btn-outline:hover { background: var(--umf-btn-prev-hover); border-color: var(--umf-btn-prev-hover); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .btn-outline:active { transform: translateY(0); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } /* ============================================= CF7 SPECIFIC STYLES ============================================= */ .umf-scope.umf-scope .wpcf7-form-control-wrap { display: block; margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); width: 100%; } .swal2-actions { width: 100%; column-gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .wpcf7-form-control { width: 100%; padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.5rem, 1.5vw, 0.75rem); border: 1px solid var(--gray-300); border-radius: clamp(0.375rem, 1vw, 0.5rem); font-size: clamp(0.875rem, 2vw, 1rem); line-height: 1.5; color: var(--gray-900); transition: all 150ms ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .umf-scope.umf-scope .wpcf7-form-control:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); } .umf-scope.umf-scope .wpcf7-form-control:hover { border-color: var(--gray-400); } .umf-scope.umf-scope .wpcf7-form-control::placeholder { color: var(--umf-placeholder); font-style: italic; } .umf-scope.umf-scope .wpcf7-form-control.error { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--umf-error-soft); } .umf-scope.umf-scope .wpcf7-form-control.error:focus { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--umf-error-soft); } .umf-scope.umf-scope .hidden-moebel, .umf-scope.umf-scope .hidden-moebel-title { display: none; } .umf-scope.umf-scope .Final-submit { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ============================================= FLATPICKR DATE PICKER CUSTOM STYLES ============================================= */ .flatpickr-calendar { background-color: var(--white); border: 1px solid var(--gray-200); border-radius: clamp(0.5rem, 1.5vw, 0.75rem); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: clamp(0.75rem, 2vw, 1rem); width: max-content; transition: all 300ms ease-in-out; color: var(--gray-900); max-width: 90vw; left: 50% !important; transform: translateX(-50%); } .flatpickr-months { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); } .flatpickr-current-month { font-weight: 600; font-size: clamp(0.875rem, 2vw, 1rem); color: var(--gray-900); padding: clamp(0.375rem, 1vw, 0.5rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); } .flatpickr-prev-month, .flatpickr-next-month { color: var(--primary-600); cursor: pointer; transition: all 150ms ease-in-out; padding: clamp(0.375rem, 1vw, 0.5rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); display: flex; align-items: center; justify-content: center; width: clamp(1.5rem, 4vw, 2rem); height: clamp(1.5rem, 4vw, 2rem); } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--primary-500); background-color: var(--primary-50); } .flatpickr-weekdays { display: flex; justify-content: space-between; margin-bottom: clamp(0.375rem, 1vw, 0.5rem); } .flatpickr-weekday { color: var(--gray-500); font-weight: 500; text-align: center; width: clamp(1.5rem, 4vw, 2rem); font-size: clamp(0.625rem, 1.5vw, 0.75rem); text-transform: uppercase; letter-spacing: 0.05em; } .flatpickr-days { display: flex; flex-wrap: wrap; } .flatpickr-day { width: clamp(1.5rem, 4vw, 2rem); height: clamp(1.5rem, 4vw, 2rem); line-height: clamp(1.5rem, 4vw, 2rem); text-align: center; border-radius: clamp(0.375rem, 1vw, 0.5rem); margin: clamp(0.125rem, 0.5vw, 0.25rem); cursor: pointer; transition: all 150ms ease-in-out; font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 500; } .flatpickr-day.today { background-color: var(--primary-100); color: var(--umf-ink); font-weight: 700; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background-color: var(--primary-600); color: var(--white); font-weight: 700; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange { background-color: var(--primary-100); color: var(--umf-ink); } .flatpickr-day:hover { background-color: var(--primary-100); color: var(--umf-ink); } .flatpickr-day.disabled { color: var(--gray-400); cursor: not-allowed; } .flatpickr-day.disabled:hover { background-color: transparent; } .flatpickr-time { border-top: 1px solid var(--gray-200); margin-top: clamp(0.75rem, 2vw, 1rem); padding-top: clamp(0.5rem, 1.5vw, 0.75rem); display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 0.75rem); } .flatpickr-time input { border: 1px solid var(--gray-300); border-radius: clamp(0.25rem, 0.75vw, 0.375rem); padding: clamp(0.375rem, 1vw, 0.5rem); width: clamp(2rem, 5vw, 3rem); text-align: center; transition: all 150ms ease-in-out; font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 500; } .flatpickr-time input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--umf-focus-ring); outline: none; } .flatpickr-wrapper { position: relative; } .flatpickr-calendar-icon { position: absolute; right: clamp(0.75rem, 2vw, 1rem); top: 50%; transform: translateY(-50%); pointer-events: none; font-size: clamp(1rem, 2.5vw, 1.2em); color: var(--primary-500); } .swal2-actions button { width: 44%; } /* ============================================= SWEETALERT CUSTOM STYLES ============================================= */ .swal2-popup { border-radius: clamp(0.75rem, 2vw, 1.5rem); padding: clamp(0.75rem, 2vw, 1.25rem); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 1px solid var(--gray-200); max-width: 90vw; } .swal2-title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--gray-900); } .swal2-content { font-size: clamp(0.875rem, 2vw, 1rem); color: var(--gray-700); } .swal2-confirm { background: var(--umf-btn-submit) !important; border: none !important; color: #fff !important; padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1.25rem) !important; border-radius: clamp(0.375rem, 1vw, 0.5rem) !important; font-weight: 600 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; transition: all 150ms ease-in-out !important; } .swal2-confirm:hover { background: var(--umf-btn-submit) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; color: #fff !important; } .swal2-cancel { background: var(--umf-btn-cancel) !important; border: 1px solid var(--gray-300) !important; color: var(--umf-btn-cancel-text) !important; padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1.25rem) !important; border-radius: clamp(0.375rem, 1vw, 0.5rem) !important; font-weight: 500 !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; transition: all 150ms ease-in-out !important; } .swal2-cancel:hover { background: var(--umf-btn-cancel-hover) !important; border-color: var(--gray-400) !important; color: var(--gray-800) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; } /* ============================================= UNKNOWN ADDRESS MESSAGE STYLES ============================================= */ .umf-scope.umf-scope .unknown-address-message { background-color: var(--warning-50); border-left: 4px solid var(--warning-500); padding: clamp(0.5rem, 1.5vw, 0.75rem); margin-bottom: clamp(0.75rem, 2vw, 1rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); color: var(--warning-700); font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 500; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } /* ============================================= ROUTE TEXT STYLES ============================================= */ .umf-scope.umf-scope #route-text { margin-top: clamp(0.75rem, 2vw, 1rem); padding: clamp(0.75rem, 2vw, 1rem); background-color: var(--gray-50); border-radius: clamp(0.375rem, 1vw, 0.5rem); border: 1px solid var(--gray-200); font-size: clamp(0.75rem, 2vw, 0.875rem); line-height: 1.5; } .umf-scope.umf-scope .route-segment { margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem); border-bottom: 1px dashed var(--gray-400); } .umf-scope.umf-scope .route-segment:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .umf-scope.umf-scope .route-total { margin-top: clamp(0.5rem, 1.5vw, 0.75rem); font-weight: 600; color: var(--umf-ink); } /* ============================================= PACKING MATERIAL TOTAL STYLES ============================================= */ .umf-scope.umf-scope .packing-material-total { margin-top: clamp(0.5rem, 1.5vw, 0.75rem); padding: clamp(0.375rem, 1vw, 0.5rem); background-color: var(--primary-50); border-radius: clamp(0.375rem, 1vw, 0.5rem); color: var(--umf-ink); font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 500; text-align: center; } /* ============================================= DIRECTIONS PANEL STYLES ============================================= */ .umf-scope.umf-scope #directions-panel { background-color: var(--umf-card); border-radius: 0; padding: 0px 15px 0px 15px; margin-top: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid var(--gray-200); overflow-y: auto; } .umf-scope.umf-scope .route-segment { padding: 22px 4px 15px 4px; border-bottom: 1px dashed var(--gray-400); margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .route-segment:last-child { border-bottom: none; margin-bottom: 0; } .umf-scope.umf-scope .route-name { color: var(--umf-ink); font-weight: 600; margin-bottom: clamp(0.375rem, 1vw, 0.5rem); font-size: clamp(0.875rem, 2vw, 1rem); } .umf-scope.umf-scope .route-addresses { margin-bottom: clamp(0.375rem, 1vw, 0.5rem); color: var(--gray-700); line-height: 1.5; } .umf-scope.umf-scope .route-distance { color: var(--gray-600); font-weight: 500; } .umf-scope.umf-scope .route-total { margin-top: clamp(0.5rem, 1.5vw, 0.75rem); padding: 7px 3px 17px 3px; color: var(--umf-ink); font-weight: 700; font-size: clamp(1rem, 2.5vw, 1.125rem); text-align: center; } .umf-scope.umf-scope .distances-arrow { color: var(--primary-500); margin: 0 clamp(0.375rem, 1vw, 0.5rem); } @media (max-width: 767.98px) { .umf-scope.umf-scope #directions-panel { padding: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .route-name { font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .route-addresses { font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .route-distance { font-size: clamp(0.75rem, 2vw, 0.875rem); } .umf-scope.umf-scope .route-total { font-size: clamp(0.875rem, 2vw, 1rem); } } /* ============================================= RESPONSIVE STYLES ============================================= */ @media (min-width: 768px) { .umf-scope.umf-scope .firststepwrapper { flex-direction: row; gap: clamp(1rem, 3vw, 1.5rem); } .umf-scope.umf-scope .firststepwrapper > div { width: 50%; } .umf-scope.umf-scope .fourcolwrapper { gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .two-column-grid { grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.5rem); } .umf-scope.umf-scope .twofieldswrapper > div { width: 48%; } .umf-scope.umf-scope .wrapperdategrp { flex-direction: row; gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .wrapperdategrp > .form-group { width: 33%; } .umf-scope.umf-scope .datewrapper { width: 67%; } .umf-scope.umf-scope .date-group { grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .input-with-dropdown { flex-direction: row; gap: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .accordion-content { grid-template-columns: 1fr 1fr; } .umf-scope.umf-scope .packmaterialgrp-wrapper { grid-template-columns: 1fr 1fr; } .umf-scope.umf-scope .form-actions { flex-direction: row; gap: clamp(1rem, 3vw, 1.75rem); } .umf-scope.umf-scope .umf-btn { width: 100%; min-width: 120px; } .umf-scope.umf-scope .address-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0px 17px; } .umf-scope.umf-scope .distance-summary { flex-direction: row; align-items: center; gap: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .distance-summary .form-control { max-width: 150px; } .umf-scope.umf-scope .wpcf7-form-control.wpcf7-radio { flex-wrap: nowrap; overflow-x: auto; padding-bottom: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .wpcf7-list-item { flex-shrink: 0; } } @media (min-width: 1024px) { .umf-scope.umf-scope .form-content { padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem); } .umf-scope.umf-scope .form-header { padding: clamp(1rem, 2.5vw, 1.5rem); } .umf-scope.umf-scope .form-container { margin: clamp(1.25rem, 3vw, 1.75rem) auto; } .umf-scope.umf-scope .summary-card { width: 320px; } } @media (min-width: 1280px) { .umf-scope.umf-scope .accordion-content { grid-template-columns: 33% 33% 33%; } .umf-scope.umf-scope .packmaterialgrp-wrapper { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (max-width: 800px) { .umf-scope.umf-scope .summary-card { /* Superseded by the bottom-bar clearance block at the end of this file, which accounts for the theme's fixed nav and the safe-area inset instead of guessing at 23vw. Left as the fallback for a viewport between 800px and 1100px. */ bottom: clamp(1rem, 23vw, 6.25rem); } .umf-scope.umf-scope .two-column-grid { grid-template-columns: 100%; } .umf-scope.umf-scope .fourcolwrapper { grid-template-columns: 48% 48%; } } @media (max-width: 575.98px) { .umf-scope.umf-scope .form-container { border-radius: clamp(0.5rem, 1.5vw, 0.75rem); margin: clamp(0.5rem, 1.5vw, 0.75rem) 0; } .umf-scope.umf-scope .form-header { padding: clamp(0.75rem, 2vw, 1rem); } .umf-scope.umf-scope .form-content { padding: clamp(0.75rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .form-header h1 { font-size: clamp(1rem, 2.5vw, 1.25rem); } .umf-scope.umf-scope .wpcf7 h1 { font-size: clamp(1rem, 2.5vw, 1.25rem); } .umf-scope.umf-scope .wpcf7 h2 { font-size: clamp(0.875rem, 2vw, 1rem); } .umf-scope.umf-scope .wpcf7 h3 { font-size: clamp(0.875rem, 2vw, 1rem); } .umf-scope.umf-scope .progress-step { flex: 1; } .umf-scope.umf-scope .address-header { flex-direction: column; align-items: flex-start; gap: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .accordion-header { padding: clamp(0.5rem, 1.5vw, 0.75rem); min-height: clamp(2.5rem, 6vw, 3rem); } .umf-scope.umf-scope .item-row { flex-direction: row; align-items: stretch; gap: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .smart-input { max-width: 100%; text-align: center; } .umf-scope.umf-scope .quantity-controls { display: flex; justify-content: center; gap: clamp(0.375rem, 1vw, 0.5rem); } .flatpickr-day { width: clamp(1.25rem, 3vw, 1.75rem); height: clamp(1.25rem, 3vw, 1.75rem); line-height: clamp(1.25rem, 3vw, 1.75rem); font-size: clamp(0.625rem, 1.5vw, 0.75rem); } .flatpickr-weekday { width: clamp(1.25rem, 3vw, 1.75rem); font-size: clamp(0.625rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .wpcf7-form-control.wpcf7-radio { flex-direction: row; gap: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .input-with-dropdown { grid-template-columns: 100%; } .umf-scope.umf-scope .fourcolwrapper { grid-template-columns: 100%; } .umf-scope.umf-scope .form-group.wergrp { grid-template-columns: 100%; } .umf-scope.umf-scope .checkbox-group, .umf-scope.umf-scope .radio-group { margin-bottom: 0; } } /* ============================================= HIGH RESOLUTION DISPLAYS ============================================= */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .umf-scope.umf-scope .form-container { border: 0.5px solid var(--gray-200); } .umf-scope.umf-scope .form-control, .umf-scope.umf-scope .wpcf7-form-control { border-width: 0.5px; } } /* ============================================= PRINT STYLES ============================================= */ @media print { .umf-scope.umf-scope .form-progress, .umf-scope.umf-scope .form-actions, .umf-scope.umf-scope .add-via-btn, .umf-scope.umf-scope .remove-via-btn, .umf-scope.umf-scope .summary-toggle, .umf-scope.umf-scope .summary-sidebar { display: none !important; } .umf-scope.umf-scope .form-container { box-shadow: none; border: 1px solid var(--gray-400); border-radius: 0; } .umf-scope.umf-scope .step { display: block !important; opacity: 1 !important; } .umf-scope.umf-scope .container { max-width: none; padding: 0; } .umf-scope.umf-scope .form-header { background: var(--gray-800) !important; color: var(--white) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ============================================= REDUCED MOTION SUPPORT ============================================= */ @media (prefers-reduced-motion: reduce) { .umf-scope.umf-scope *, .umf-scope.umf-scope *::before, .umf-scope.umf-scope *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .umf-scope.umf-scope .step { animation: none; } .umf-scope.umf-scope .umf-btn:hover { transform: none; } .umf-scope.umf-scope .quantity-btn:hover { transform: none; } .umf-scope.umf-scope .accordion-header::after { transition: none; } } /* ============================================= FOCUS VISIBLE STYLES ============================================= */ .umf-scope.umf-scope :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } .umf-scope.umf-scope :focus:not(:focus-visible) { outline: none; } /* ============================================= ORIENTATION-SPECIFIC STYLES ============================================= */ @media (max-width: 767.98px) and (orientation: landscape) { .umf-scope.umf-scope .form-container { max-height: 90vh; overflow-y: auto; } .umf-scope.umf-scope .form-header { padding: clamp(0.5rem, 1.5vw, 0.75rem); } .umf-scope.umf-scope .form-content { padding: clamp(0.5rem, 1.5vw, 0.75rem); } } /* ============================================= VERY LARGE SCREENS ============================================= */ @media (min-width: 1600px) { .umf-scope.umf-scope .wpcf7 .container { max-width: 1400px; } .umf-scope.umf-scope .form-container { max-width: 1400px; } } /* ============================================= CUSTOM SCROLLBAR STYLES ============================================= */ .umf-scope.umf-scope ::-webkit-scrollbar { width: clamp(6px, 1.5vw, 8px); height: clamp(6px, 1.5vw, 8px); } .umf-scope.umf-scope ::-webkit-scrollbar-track { background: var(--gray-100); border-radius: clamp(0.25rem, 0.75vw, 0.375rem); } .umf-scope.umf-scope ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: clamp(0.25rem, 0.75vw, 0.375rem); } .umf-scope.umf-scope ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } /* ============================================= FORM FOOTER COPYRIGHTSTYLE ============================================= */ .umf-scope.umf-scope .form-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 1.5rem); margin-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--gray-200); background-color: var(--gray-50); border-radius: 0 0 clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem); transition: all 300ms ease-in-out; } .umf-scope.umf-scope .footer-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.5vw, 0.75rem); text-decoration: none; color: var(--gray-700); transition: all 200ms ease-in-out; padding: clamp(0.5rem, 1.5vw, 0.75rem); border-radius: clamp(0.375rem, 1vw, 0.5rem); } .umf-scope.umf-scope .footer-link:hover { color: var(--primary-600); background-color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .umf-scope.umf-scope .footer-logo { height: clamp(2rem, 5vw, 2.5rem); width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); transition: all 200ms ease-in-out; } .umf-scope.umf-scope .footer-link:hover .footer-logo { transform: scale(1.05); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)); } .umf-scope.umf-scope .footer-text { font-size: clamp(0.75rem, 2vw, 0.875rem); font-weight: 500; text-align: center; transition: all 200ms ease-in-out; } /* ============================================= FOOTER RESPONSIVE STYLES ============================================= */ @media (min-width: 768px) { .umf-scope.umf-scope .form-footer { flex-direction: row; gap: clamp(1rem, 3vw, 1.5rem); } .umf-scope.umf-scope .footer-link { flex-direction: row; } } /* ============================================= FOOTER DARK MODE STYLES ============================================= */ /* The final submit action. Same shape as any other primary button, but its own colour token so "Formular absenden" can be made to stand out. */ .umf-scope.umf-scope #angebot-submit { background: var(--umf-btn-submit); border-color: var(--umf-btn-submit); color: var(--umf-btn-text); } .umf-scope.umf-scope #angebot-submit:hover { background: var(--umf-btn-submit-hover); border-color: var(--umf-btn-submit-hover); } /* ============================================= THANK-YOU PANEL --------------------------------------------- Shown in place of the form after a successful submission, by assets/form/thankyou.js. Every colour comes from the same tokens as the form itself, so it is repainted from the admin along with it. ============================================= */ .umf-scope.umf-scope .umf-thanks[hidden] { display: none; } .umf-scope.umf-scope .umf-thanks { background: var(--umf-surface); border: 1px solid var(--umf-line); border-radius: clamp(0.75rem, 2vw, 1rem); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06); padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); text-align: center; } /* The panel takes focus when it appears, so it must show that it has it — but only for keyboard users; a mouse click should not draw a ring. */ .umf-scope.umf-scope .umf-thanks:focus { outline: none; } .umf-scope.umf-scope .umf-thanks:focus-visible { outline: 2px solid var(--umf-focus); outline-offset: 3px; } .umf-scope.umf-scope .umf-thanks__inner { max-width: 46rem; margin: 0 auto; } .umf-scope.umf-scope .umf-thanks__mark { display: inline-flex; align-items: center; justify-content: center; width: clamp(3.5rem, 9vw, 4.5rem); height: clamp(3.5rem, 9vw, 4.5rem); margin-bottom: clamp(1rem, 3vw, 1.5rem); border-radius: 50%; background: var(--umf-brand-soft); color: var(--umf-success); } .umf-scope.umf-scope .umf-thanks__mark svg { width: 60%; height: 60%; } .umf-scope.umf-scope .umf-thanks__title { margin: 0 0 clamp(0.5rem, 2vw, 0.75rem); color: var(--umf-ink); font-size: clamp(1.375rem, 4.5vw, 1.875rem); font-weight: 700; line-height: 1.25; } .umf-scope.umf-scope .umf-thanks__text { color: var(--umf-muted); font-size: clamp(0.975rem, 2.5vw, 1.0625rem); line-height: 1.65; } .umf-scope.umf-scope .umf-thanks__text p { margin: 0 0 0.75rem; } .umf-scope.umf-scope .umf-thanks__text p:last-child { margin-bottom: 0; } .umf-scope.umf-scope .umf-thanks__text a { color: var(--umf-brand); text-decoration: underline; } .umf-scope.umf-scope .umf-thanks__actions { margin: clamp(1.5rem, 4vw, 2rem) 0 0; } /* Narrower than the form's full-width step buttons: this is one optional way onward, not the primary action of a step. */ .umf-scope.umf-scope .umf-thanks__btn { width: auto; min-width: 15rem; max-width: 100%; text-decoration: none; } .umf-scope.umf-scope .umf-thanks__note { margin: clamp(1rem, 3vw, 1.5rem) 0 0; color: var(--umf-muted); font-size: 0.8125rem; line-height: 1.5; } @media (prefers-reduced-motion: no-preference) { .umf-scope .umf-thanks { animation: umfThanksIn 320ms ease-out both; } } @keyframes umfThanksIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================= WIDTH & OUTER SPACING — HANDED BACK TO THE PAGE --------------------------------------------- The form used to be a standalone page and carried its own page furniture: .container ran a max-width ladder from 640px up to 1536px with its own horizontal padding, and .form-container capped itself at 1200px with auto margins on top of that. Embedded in the theme that is three competing width systems on one element. The theme's .wrap already applies the site's content measure (--content, 1350px) and the gutters that go with it at every breakpoint, so the form's own ladder only ever fought it — the result was a form narrower than the rest of the site, with doubled side padding and margins the design never asked for. So the form now simply fills what it is given. Width and outer spacing belong to the page; everything inside the card is still the form's own business. Appended at the end of the file on purpose: same specificity as the rules above, later in source order, so it wins without !important — and it overrides the media-query variants too, because a later rule of equal specificity beats an earlier one whether or not that earlier one sits inside a media query. ============================================= */ .umf-scope.umf-scope .container, .umf-scope.umf-scope .wpcf7 .container { width: 100%; max-width: none; margin: 0; padding: 0; } .umf-scope.umf-scope .form-container { width: 100%; max-width: none; margin: 0; } /* The card keeps its own inner padding — .form-header and .form-content provide that, and those are the form's business, not the page's. */ /* ============================================= CLEARING THE THEME'S FIXED BOTTOM BAR --------------------------------------------- The Umzugsmaster theme prints a fixed bottom bar on phones and tablets — Anruf / Anfrage / Leistungen / Menü — from listandsell_mobile_bar() in footer.php. It is `position: fixed; bottom: 0` below 1100px, about 68px tall plus the device's safe-area inset, at z-index 1010. This form has two fixed elements of its own in the same corner: the round summary toggle with the item count on it, and the summary panel it opens. Both sat low enough to run underneath that bar — and because the bar wins on z-index, what you saw was the top third of the button poking out above it, cut off, with its count badge half hidden. Raising the z-index would be the wrong fix. The bar is the site's navigation and should stay on top of a form's floating control; the button simply has to sit above it instead of behind it. The offset is expressed as a variable so both elements move together and the number exists once. env(safe-area-inset-bottom) is what keeps it clear of the home indicator on an iPhone, where the bar itself is taller than its 68px of content. 1100px is the theme's own breakpoint for showing the bar, not a guess — matching it means the offset appears exactly when the bar does. On a site running this form without that theme the media query still applies and simply lifts the button a little higher than it strictly needs to be, which is harmless. ============================================= */ @media (max-width: 1100px) { .umf-scope.umf-scope { --umf-bottombar: calc(68px + env(safe-area-inset-bottom, 0px)); } .umf-scope.umf-scope .summary-toggle-button { bottom: calc(var(--umf-bottombar) + 16px); } .umf-scope.umf-scope .summary-card { bottom: calc(var(--umf-bottombar) + 16px); /* The panel is taller than the button, so it also has to give back the height it now sits on top of, or it runs off the top of a short screen instead of the bottom. */ max-height: calc(100vh - var(--umf-bottombar) - 96px); } }