/* ═══════════════════════════════════════════════════════════════ calculator-modern.css — clean rewrite for residential calculator Activated when . Loaded AFTER calculator-residential.css to override legacy fights. Goals: professional, clean, mobile-first UI/UX matching the home page. Preserves every JS hook (.dirt-card, .cardd, .card-container, .service-card, .category-btn, .payment-card, .approximate-time-value, .total-price-value, .next-btn, .next-btn-2, .prev-btn, etc.). ═══════════════════════════════════════════════════════════════ */ /* Local variables */ body.cl-modern { --cm-primary: #0b47d4; --cm-primary-2: #2563eb; --cm-purple: #7c3aed; --cm-text: #0f172a; --cm-muted: #64748b; --cm-bg: #f8fafc; --cm-card: #ffffff; --cm-border: #e2e8f0; --cm-success: #10b981; --cm-amber: #f59e0b; --cm-radius: 16px; --cm-radius-lg: 22px; --cm-shadow-sm: 0 1px 3px rgba(15,23,42,.06); --cm-shadow-md: 0 8px 24px rgba(15,23,42,.10); --cm-shadow-lg: 0 16px 40px rgba(15,23,42,.14); background: var(--cm-bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--cm-text); margin: 0; } body.cl-modern * { box-sizing: border-box; } /* ─────────────────────────────────────────────────────────────── HERO BLOCK (above the form) ─────────────────────────────────────────────────────────────── */ .calc-hero { max-width: 1280px; margin: 28px auto 0; padding: 28px 24px 18px; text-align: center; } .calc-hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--cm-primary); text-transform: uppercase; margin-bottom: 12px; } .calc-hero h1 { font-size: clamp(28px, 4.5vw, 48px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; background: linear-gradient(135deg, #0b47d4 0%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .calc-hero-sub { font-size: 15px; line-height: 1.6; color: var(--cm-muted); max-width: 560px; margin: 0 auto 20px; } .calc-hero-trust { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; align-items: center; padding: 10px 22px; border-radius: 999px; background: var(--cm-card); border: 1px solid var(--cm-border); box-shadow: var(--cm-shadow-sm); font-size: 13px; color: var(--cm-text); font-weight: 600; } .calc-hero-trust .item { display: inline-flex; align-items: center; gap: 6px; } .calc-hero-trust .stars { color: #fbbf24; letter-spacing: 1px; } .calc-hero-trust i { color: var(--cm-primary); font-size: 12px; } .calc-hero-trust .sep { width: 1px; height: 14px; background: var(--cm-border); } /* ─────────────────────────────────────────────────────────────── STEPPER (1·2·3) — clickable ─────────────────────────────────────────────────────────────── */ .calc-stepper { max-width: 720px; margin: 18px auto 24px; padding: 0 28px; display: flex; align-items: center; } .calc-stepper-step { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; user-select: none; transition: opacity .15s; } .calc-stepper-step.disabled { cursor: not-allowed; opacity: .55; } .calc-stepper-step .num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #94a3b8; font-weight: 800; font-size: 13px; flex-shrink: 0; transition: all .25s; } .calc-stepper-step:hover .num { transform: scale(1.06); } .calc-stepper-step.active .num { background: linear-gradient(135deg, var(--cm-primary), var(--cm-purple)); color: #fff; box-shadow: 0 6px 16px rgba(11,71,212,.35); } .calc-stepper-step.done .num { background: var(--cm-success); color: #fff; } .calc-stepper-step .label { font-size: 13px; font-weight: 600; color: #94a3b8; white-space: nowrap; } .calc-stepper-step.active .label { color: var(--cm-text); } .calc-stepper-step.done .label { color: #475569; } .calc-stepper-bar { flex: 1; height: 2px; background: #e2e8f0; margin: 0 10px; border-radius: 1px; } .calc-stepper-bar.done { background: var(--cm-success); } @media (max-width: 600px) { .calc-stepper { padding: 0 16px; margin: 12px auto 16px; } .calc-stepper-step .label { display: none; } .calc-stepper-bar { margin: 0 6px; } } /* ─────────────────────────────────────────────────────────────── FORM CONTAINER + STEP LAYOUT ─────────────────────────────────────────────────────────────── */ body.cl-modern .form-container { max-width: 1280px; margin: 0 auto; padding: 0 16px 32px; background: transparent !important; box-shadow: none !important; border: none !important; } body.cl-modern fieldset.step { border: none; margin: 0; padding: 0; display: none; } body.cl-modern fieldset.step.active { display: block; animation: cmStepIn .35s ease-out; } @keyframes cmStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Hide the legacy h1.step-title and intro paragraph (we have the hero) */ body.cl-modern fieldset.step h1.step-title, body.cl-modern fieldset.step > p[style] { display: none !important; } /* Hide legacy h2 inside step content (we use our own section titles) */ body.cl-modern fieldset.step .step-content > h2 { display: none !important; } /* ────────────── 2-column step layout (main + sidebar) ────────────── */ body.cl-modern .step-content, body.cl-modern .step2-content, body.cl-modern fieldset.step .step-content { /* Reset to a flat block — we'll use our own grid */ background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; display: block !important; margin: 0 !important; width: 100% !important; max-width: none !important; } body.cl-modern .calc-2col { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px !important; grid-template-rows: auto !important; gap: 24px !important; align-items: start !important; align-content: start !important; } @media (max-width: 1024px) { body.cl-modern .calc-2col { grid-template-columns: 1fr !important; gap: 16px !important; } } body.cl-modern .calc-2col > .calc-main { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; display: flex !important; flex-direction: column !important; gap: 18px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.cl-modern .calc-2col > .calc-sidebar { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; display: flex !important; flex-direction: column !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; position: sticky !important; top: 24px !important; z-index: 5 !important; } @media (max-width: 1024px) { body.cl-modern .calc-2col > .calc-main, body.cl-modern .calc-2col > .calc-sidebar { grid-column: 1 !important; grid-row: auto !important; position: static !important; align-self: stretch !important; } } /* ────────────── Section wrapper (white card) ────────────── */ body.cl-modern .calc-card { background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: var(--cm-radius-lg); padding: 24px; box-shadow: var(--cm-shadow-sm); } @media (max-width: 600px) { body.cl-modern .calc-card { padding: 18px; border-radius: 18px; } } body.cl-modern .calc-card + .calc-card { margin-top: 0; } body.cl-modern .calc-card-h { font-size: 14px; font-weight: 800; color: var(--cm-text); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } body.cl-modern .calc-card-h::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--cm-primary), var(--cm-purple)); } /* ─────────────────────────────────────────────────────────────── CITY SELECTOR (top of step 1) ─────────────────────────────────────────────────────────────── */ body.cl-modern .city-selection-container { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; pointer-events: none !important; opacity: 0 !important; } body.cl-modern .cl-city-card { position: relative; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid rgba(11,71,212,.20); border-radius: var(--cm-radius); padding: 16px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 14px rgba(11,71,212,.08); } body.cl-modern .cl-city-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(11,71,212,.30); } body.cl-modern .cl-city-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.cl-modern .cl-city-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #1e40af; } body.cl-modern .cl-city-trigger { background: transparent; border: none; padding: 0; font-size: 18px; font-weight: 700; color: var(--cm-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; text-align: left; } body.cl-modern .cl-city-chev { font-size: 12px; color: var(--cm-muted); transition: transform .2s; } body.cl-modern .cl-city-trigger.open .cl-city-chev { transform: rotate(180deg); } body.cl-modern .cl-city-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--cm-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 6px; z-index: 50; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s, transform .18s; max-height: 320px; overflow-y: auto; } body.cl-modern .cl-city-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; } body.cl-modern .cl-city-option { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--cm-text); transition: background .15s, color .15s; } body.cl-modern .cl-city-option:hover { background: #f1f5f9; color: var(--cm-primary); } body.cl-modern .cl-city-option.active { background: rgba(11,71,212,.08); color: var(--cm-primary); font-weight: 700; } body.cl-modern .cl-city-option.active::after { content: '✓'; margin-left: auto; font-weight: 800; } /* ─────────────────────────────────────────────────────────────── DIRT LEVEL CARDS ─────────────────────────────────────────────────────────────── */ body.cl-modern .dirt-level-section { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } body.cl-modern .dirt-level-title { display: none !important; } body.cl-modern .dirt-level-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin: 0 !important; } @media (max-width: 700px) { body.cl-modern .dirt-level-cards { grid-template-columns: 1fr !important; } } body.cl-modern .dirt-card { position: relative; background: var(--cm-card) !important; border: 2px solid var(--cm-border) !important; border-radius: 16px !important; padding: 0 !important; cursor: pointer !important; text-align: left !important; transition: transform .2s, box-shadow .2s, border-color .2s !important; overflow: hidden; box-shadow: var(--cm-shadow-sm) !important; display: flex !important; flex-direction: column !important; width: auto !important; height: auto !important; } body.cl-modern .dirt-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cm-primary), var(--cm-purple)); opacity: 0; transition: opacity .25s; z-index: 4; } body.cl-modern .dirt-card:hover { transform: translateY(-3px); box-shadow: var(--cm-shadow-md) !important; border-color: rgba(11,71,212,.30) !important; } body.cl-modern .dirt-card.active { border-color: var(--cm-primary) !important; box-shadow: 0 14px 32px rgba(11,71,212,.20) !important; } body.cl-modern .dirt-card.active::before { opacity: 1; } body.cl-modern .dirt-card-image-wrap { width: 100% !important; aspect-ratio: 16/10; overflow: hidden; background: #f1f5f9; } body.cl-modern .dirt-card-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .35s; } body.cl-modern .dirt-card:hover .dirt-card-image { transform: scale(1.04); } body.cl-modern .dirt-card-content { padding: 14px 16px 16px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1; } body.cl-modern .dirt-card-title { font-size: 15px !important; font-weight: 700 !important; color: var(--cm-text) !important; letter-spacing: -.01em; } body.cl-modern .dirt-card-desc { font-size: 12.5px !important; color: var(--cm-muted) !important; line-height: 1.4 !important; flex: 1; } body.cl-modern .dirt-card-badge { display: inline-block; width: fit-content; margin-top: 8px; padding: 4px 10px !important; border-radius: 999px !important; background: rgba(11,71,212,.08) !important; color: var(--cm-primary) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em; } body.cl-modern .dirt-card.active .dirt-card-badge { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; color: #fff !important; } /* ─────────────────────────────────────────────────────────────── ROOMS / BATH / KITCHEN / BALCONY (.cardd) ─────────────────────────────────────────────────────────────── */ body.cl-modern .card-container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } body.cl-modern .card-container .card-row { display: contents !important; } body.cl-modern .card-container .card-container { display: contents !important; } @media (max-width: 600px) { body.cl-modern .card-container { grid-template-columns: 1fr !important; } } body.cl-modern .cardd { background: var(--cm-card) !important; border: 1.5px solid var(--cm-border) !important; border-radius: var(--cm-radius) !important; padding: 16px 18px !important; box-shadow: var(--cm-shadow-sm) !important; margin: 0 !important; width: auto !important; flex: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; transition: transform .15s, box-shadow .15s, border-color .15s; } body.cl-modern .cardd:hover { border-color: #c7d2fe !important; transform: translateY(-2px); box-shadow: var(--cm-shadow-md) !important; } body.cl-modern .cardd h3 { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--cm-text) !important; display: flex !important; align-items: center !important; gap: 8px !important; letter-spacing: -.005em; } body.cl-modern .cardd h3 i { width: 32px; height: 32px; border-radius: 9px; background: rgba(11,71,212,.08); color: var(--cm-primary) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } body.cl-modern .cardd select { width: 100% !important; padding: 10px 12px !important; font-size: 14px !important; font-family: inherit !important; color: var(--cm-text) !important; background: #f8fafc !important; border: 1px solid var(--cm-border) !important; border-radius: 10px !important; box-shadow: none !important; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; cursor: pointer; } body.cl-modern .cardd select:focus { outline: none; border-color: var(--cm-primary) !important; box-shadow: 0 0 0 3px rgba(11,71,212,.12) !important; } body.cl-modern .cardd label { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer; margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--cm-text) !important; } body.cl-modern .cardd label input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--cm-primary); cursor: pointer; transform: none !important; } body.cl-modern .cardd .price, body.cl-modern .cardd .price.bg-primary { display: inline-block; background: rgba(16,185,129,.10) !important; border: 1px solid rgba(16,185,129,.25) !important; color: #047857 !important; border-radius: 10px !important; padding: 7px 14px !important; font-size: 13.5px !important; font-weight: 700 !important; margin: 0 !important; width: fit-content; align-self: flex-start; } /* Balcony nested controls */ body.cl-modern #balconyDimensions { display: none; flex-direction: column; gap: 6px; margin-top: 4px; } body.cl-modern #balconyDimensions[style*="block"], body.cl-modern #balconyDimensions[style*="flex"] { display: flex !important; } body.cl-modern #balconyDimensions label { font-size: 12px !important; color: var(--cm-muted) !important; gap: 6px !important; } body.cl-modern #balconyDimensions input[type="number"] { width: 60px !important; padding: 6px 10px !important; font-size: 13px !important; border: 1px solid var(--cm-border) !important; border-radius: 8px !important; background: #f8fafc !important; font-family: inherit !important; color: var(--cm-text) !important; } body.cl-modern #balconyExtras { display: none; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--cm-border); } body.cl-modern #balconyExtras[style*="block"], body.cl-modern #balconyExtras[style*="flex"] { display: flex !important; } body.cl-modern #balconyExtras label { font-size: 12.5px !important; color: var(--cm-text) !important; } /* ─────────────────────────────────────────────────────────────── ADDITIONAL SERVICES ─────────────────────────────────────────────────────────────── */ body.cl-modern .additional-services { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } body.cl-modern .additional-services > h3 { display: none !important; } /* Categories — segmented control */ body.cl-modern .service-categories { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; background: #f1f5f9 !important; padding: 4px !important; border-radius: 14px !important; border: 1px solid var(--cm-border) !important; box-shadow: inset 0 1px 2px rgba(15,23,42,.04); margin: 0 0 16px !important; width: fit-content; max-width: 100%; justify-content: flex-start !important; } body.cl-modern .service-categories .category-btn, body.cl-modern .category-btn { width: auto !important; min-width: 0 !important; background: transparent !important; border: none !important; border-radius: 10px !important; padding: 9px 14px !important; color: var(--cm-muted) !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: all .18s !important; box-shadow: none !important; margin: 0 !important; text-transform: none !important; flex: 0 0 auto !important; aspect-ratio: auto !important; height: auto !important; } body.cl-modern .category-btn i, body.cl-modern .category-btn[data-category] i { font-size: 12px !important; color: inherit !important; margin: 0 !important; } body.cl-modern .category-btn:hover:not(.active) { color: var(--cm-primary) !important; background: rgba(11,71,212,.06) !important; } body.cl-modern .category-btn.active, body.cl-modern .category-btn.active[data-category] { background: #fff !important; color: var(--cm-primary) !important; box-shadow: 0 4px 12px rgba(15,23,42,.10) !important; font-weight: 700 !important; } body.cl-modern .category-btn.active i { color: var(--cm-primary) !important; } /* Mobile categories: 5-icon grid (no scroll) */ @media (max-width: 700px) { body.cl-modern .service-categories { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; width: 100% !important; gap: 4px !important; } body.cl-modern .category-btn { flex-direction: column !important; aspect-ratio: 1 !important; padding: 6px !important; gap: 3px !important; font-size: 9px !important; } body.cl-modern .category-btn span { font-size: 9px !important; text-align: center !important; line-height: 1.1 !important; white-space: normal !important; } body.cl-modern .category-btn i { font-size: 16px !important; } } @media (max-width: 400px) { body.cl-modern .category-btn span { display: none !important; } body.cl-modern .category-btn i { font-size: 18px !important; } } /* Service cards grid */ body.cl-modern .services-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } body.cl-modern .service-card { position: relative; background: var(--cm-card) !important; border: 1.5px solid var(--cm-border) !important; border-radius: 14px !important; padding: 14px 12px 12px !important; text-align: center; transition: all .2s !important; display: flex !important; flex-direction: column !important; align-items: center; gap: 6px; box-shadow: var(--cm-shadow-sm) !important; width: auto !important; margin: 0 !important; } body.cl-modern .service-card input[type="checkbox"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } body.cl-modern .service-card input[type="checkbox"] + span, body.cl-modern .service-card label > input[type="checkbox"] + span { display: none !important; } body.cl-modern .service-card label { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; margin: 0 !important; width: 100%; cursor: pointer; padding: 0 !important; } body.cl-modern .service-card label img { width: 42px !important; height: 42px !important; object-fit: contain !important; } body.cl-modern .service-card label span { font-size: 12.5px !important; font-weight: 600 !important; color: var(--cm-text) !important; line-height: 1.3 !important; text-align: center !important; } body.cl-modern .service-price-duration { font-size: 11px !important; color: var(--cm-muted) !important; background: #f1f5f9 !important; padding: 3px 8px !important; border-radius: 8px !important; display: inline-block; font-weight: 600 !important; margin: 2px 0 4px !important; } body.cl-modern .service-quantity { display: inline-flex !important; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--cm-border); border-radius: 999px; padding: 3px; margin-top: 4px; } body.cl-modern .service-quantity button, body.cl-modern .service-quantity .add-btn, body.cl-modern .service-quantity .remove-btn { width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid var(--cm-border) !important; color: var(--cm-primary) !important; font-weight: 700 !important; cursor: pointer !important; font-size: 14px !important; padding: 0 !important; transition: all .15s !important; display: inline-flex !important; align-items: center; justify-content: center; } body.cl-modern .service-quantity button:hover:not(:disabled) { background: var(--cm-primary) !important; color: #fff !important; border-color: transparent !important; } body.cl-modern .service-quantity button:disabled { opacity: .35; cursor: not-allowed !important; } body.cl-modern .service-quantity span { min-width: 22px; text-align: center; font-weight: 700; color: var(--cm-text); font-size: 13px; } /* Service card selected state */ body.cl-modern .service-card:has(input[type="checkbox"]:checked), body.cl-modern .service-card.selected { border-color: var(--cm-primary) !important; background: linear-gradient(180deg, rgba(11,71,212,.04), #fff) !important; box-shadow: 0 8px 24px rgba(11,71,212,.12) !important; } /* ─────────────────────────────────────────────────────────────── SUMMARY SIDEBAR (steps 1, 3) — premium card ─────────────────────────────────────────────────────────────── */ body.cl-modern .summary-block { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%) !important; border: 1px solid rgba(11,71,212,.18) !important; border-radius: var(--cm-radius-lg) !important; padding: 20px !important; box-shadow: 0 14px 36px rgba(11,71,212,.10) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0 !important; width: 100% !important; max-width: none !important; /* CRITICAL: legacy css applied position:absolute; top:220px; right:60px at @media (min-width: 992px) which yanked the summary OUT of our grid sidebar. Force it back into normal flow. */ position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; overflow: hidden; grid-row: auto !important; grid-column: auto !important; } body.cl-modern .summary-block::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 200px; height: 200px; background: radial-gradient(circle, rgba(124,58,237,.08), transparent 70%); pointer-events: none; } body.cl-modern .summary-block .summary-row { background: #fff !important; border: 1px solid rgba(11,71,212,.10) !important; border-radius: 14px !important; padding: 12px 16px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; text-align: left !important; position: relative; z-index: 1; } body.cl-modern .summary-block .summary-row::before { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; } body.cl-modern .summary-block .summary-row:nth-of-type(1)::before { content: '\f017'; background: linear-gradient(135deg, rgba(11,71,212,.10), rgba(124,58,237,.10)); color: var(--cm-primary); } body.cl-modern .summary-block .summary-row:has(.total-price-value)::before { content: '\f155'; background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(5,150,105,.10)); color: var(--cm-success); } body.cl-modern .summary-row-title { margin-right: auto !important; font-size: 11px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; display: block !important; margin-bottom: 0 !important; } body.cl-modern .approximate-time-value { font-size: 22px !important; font-weight: 800 !important; color: var(--cm-text) !important; } body.cl-modern .time-unit { font-size: 13px !important; color: var(--cm-muted) !important; font-weight: 600 !important; margin-left: 2px; } body.cl-modern .total-price-value { font-size: 28px !important; font-weight: 800 !important; background: linear-gradient(135deg, #0b47d4 0%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--cm-primary) !important; } body.cl-modern .zloty-symbol { font-size: 15px !important; color: var(--cm-muted) !important; font-weight: 700 !important; margin-left: 4px; } body.cl-modern .old-price { text-decoration: line-through; color: #94a3b8 !important; font-size: 13px !important; margin-left: 6px !important; } body.cl-modern .summary-block hr.divider, body.cl-modern .summary-block .divider { display: none !important; } /* Promo banner inside summary */ body.cl-modern .summary-block .promo-banner, body.cl-modern .promo-banner { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; border: 1px solid #fbbf24 !important; border-radius: 14px !important; padding: 12px 14px !important; margin: 0 !important; position: relative; z-index: 1; } body.cl-modern .promo-banner__icon { background: linear-gradient(135deg, var(--cm-amber), #d97706) !important; color: #fff !important; border-radius: 10px !important; } body.cl-modern .promo-banner__name { color: #78350f !important; font-weight: 800 !important; } body.cl-modern .promo-banner__badge { background: #92400e !important; color: #fff !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 800 !important; padding: 3px 8px !important; } body.cl-modern .promo-banner__desc { color: #78350f !important; font-size: 12px !important; } body.cl-modern .promo-banner__min, body.cl-modern .promo-banner__meta { color: #78350f !important; } /* Promo discount line */ body.cl-modern .promo-price-line { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; background: rgba(16,185,129,.08); border-radius: 10px; padding: 8px 12px; margin: 0 !important; position: relative; z-index: 1; } body.cl-modern .promo-price-label { font-size: 11px !important; font-weight: 800 !important; color: #047857 !important; text-transform: uppercase; letter-spacing: .04em; } body.cl-modern .promo-price-value { font-size: 16px !important; font-weight: 800 !important; color: #047857 !important; } /* Wybór usług inside summary */ body.cl-modern .summary-of-step1 { background: #fff !important; border: 1px solid var(--cm-border) !important; border-radius: 14px !important; padding: 14px 16px !important; margin: 0 !important; box-shadow: var(--cm-shadow-sm) !important; position: relative; z-index: 1; } body.cl-modern .summary-of-step1 h2 { font-size: 11px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .12em !important; margin: 0 0 10px !important; text-align: center !important; padding-bottom: 8px; border-bottom: 2px solid #e0f2fe; } body.cl-modern .summary-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } body.cl-modern .summary-list li { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; font-size: 12.5px !important; color: var(--cm-text) !important; padding: 4px 0 !important; } body.cl-modern .summary-list li + li { border-top: 1px dashed #f1f5f9; padding-top: 8px !important; } body.cl-modern .summary-list li i { color: var(--cm-primary) !important; font-size: 11px !important; } /* Min order pill */ body.cl-modern .cm-min-order-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: linear-gradient(135deg, rgba(11,71,212,.06), rgba(124,58,237,.04)); border: 1px solid rgba(11,71,212,.18); border-radius: 999px; color: #1e40af; font-size: 13px; font-weight: 600; width: fit-content; } body.cl-modern .cm-min-order-pill i { color: var(--cm-primary); font-size: 14px; } body.cl-modern .cm-min-order-pill #minOrderValue, body.cl-modern .cm-min-order-pill #minOrderText { font-weight: 800; color: var(--cm-primary); } /* Hide the legacy plain min-order div (we have our own pill) */ body.cl-modern fieldset.step-1 div[style*="display: flex"]:has(i.fa-info-circle):has(span#minOrderValue) { display: none !important; } body.cl-modern #dryMinOrderNotice { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.18); border-radius: 12px; font-size: 12.5px; color: var(--cm-text); } body.cl-modern #dryMinOrderNotice[style*="block"], body.cl-modern #dryMinOrderNotice[style*="flex"] { display: flex !important; } body.cl-modern .dry-addon-limit-note__icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(124,58,237,.10); color: var(--cm-purple) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } body.cl-modern .dry-addon-limit-note__title { font-size: 12px; font-weight: 800; color: var(--cm-purple); text-transform: uppercase; letter-spacing: .04em; } body.cl-modern .dry-addon-limit-note__text { font-size: 12.5px; color: var(--cm-muted); line-height: 1.4; } body.cl-modern .dry-addon-limit-note__text strong { color: var(--cm-purple); } /* ─────────────────────────────────────────────────────────────── BUTTONS (next, prev, submit) ─────────────────────────────────────────────────────────────── */ body.cl-modern .next-btn, body.cl-modern .next-btn-2, body.cl-modern #submit-btn, body.cl-modern .sidebar-primary-btn, body.cl-modern .green_bt { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; color: #fff !important; border: none !important; border-radius: 14px !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 700 !important; font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 8px 24px rgba(11,71,212,.30) !important; transition: transform .15s, box-shadow .15s !important; margin-top: 4px !important; position: relative; z-index: 1; } body.cl-modern .next-btn:hover, body.cl-modern .next-btn-2:hover, body.cl-modern #submit-btn:hover, body.cl-modern .sidebar-primary-btn:hover, body.cl-modern .green_bt:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,71,212,.40) !important; } body.cl-modern .prev-btn, body.cl-modern .sidebar-secondary-btn { background: #fff !important; border: 1.5px solid var(--cm-border) !important; color: var(--cm-text) !important; border-radius: 14px !important; padding: 12px 20px !important; font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important; text-transform: none !important; cursor: pointer; width: 100% !important; transition: all .15s !important; } body.cl-modern .prev-btn:hover, body.cl-modern .sidebar-secondary-btn:hover { border-color: var(--cm-primary) !important; color: var(--cm-primary) !important; } /* ─────────────────────────────────────────────────────────────── STEP 2: Calendar + Form ─────────────────────────────────────────────────────────────── */ body.cl-modern .step2-layout { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px !important; } @media (max-width: 1024px) { body.cl-modern .step2-layout { grid-template-columns: 1fr !important; } } body.cl-modern .step2-calendar-column, body.cl-modern .step2-form-column { min-width: 0; } /* Calendar card */ body.cl-modern .calendar-card { background: var(--cm-card) !important; border: 1px solid var(--cm-border) !important; border-radius: var(--cm-radius-lg) !important; padding: 28px !important; box-shadow: var(--cm-shadow-sm) !important; } @media (min-width: 1025px) { body.cl-modern .calendar-card { padding: 32px !important; } } @media (max-width: 600px) { body.cl-modern .calendar-card { padding: 18px !important; } } body.cl-modern .calendar-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 16px !important; margin: 0 0 14px !important; border-bottom: 1px solid #f1f5f9 !important; flex-wrap: nowrap !important; } body.cl-modern .calendar-header .current-date { font-size: 17px !important; font-weight: 800 !important; color: var(--cm-text) !important; margin: 0 !important; text-transform: capitalize !important; } body.cl-modern .calendar-header .btn-group { gap: 6px !important; display: flex !important; } body.cl-modern #prev, body.cl-modern #next, body.cl-modern .calendar-header .btn-primary { width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: #f8fafc !important; border: 1px solid var(--cm-border) !important; color: var(--cm-muted) !important; font-weight: 700 !important; font-size: 0 !important; cursor: pointer; transition: all .15s !important; padding: 0 !important; position: relative; } body.cl-modern #prev::before { content: '\f053'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; } body.cl-modern #next::before { content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; } body.cl-modern #prev:hover, body.cl-modern #next:hover { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; border-color: transparent !important; color: #fff !important; } /* Calendar grid */ body.cl-modern .calendar { padding: 0 !important; } body.cl-modern .week-days, body.cl-modern .days-number { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; } body.cl-modern .week-days { margin-bottom: 6px !important; } body.cl-modern .week-days li { text-align: center !important; font-size: 11px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .08em; padding: 6px 0 !important; border: none !important; background: transparent !important; } body.cl-modern .days-number li { aspect-ratio: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--cm-text) !important; cursor: pointer !important; position: relative; border: 1.5px solid transparent !important; background: transparent !important; padding: 0 !important; transition: all .15s !important; font-family: inherit !important; } body.cl-modern .days-number li.active-day, body.cl-modern .days-number li.day-number.active-day { background: rgba(255,255,255,.6) !important; border-color: var(--cm-border) !important; color: var(--cm-text) !important; } body.cl-modern .days-number li.active-day:hover, body.cl-modern .days-number li.day-number.active-day:hover { background: rgba(11,71,212,.08) !important; border-color: rgba(11,71,212,.30) !important; color: var(--cm-primary) !important; transform: scale(1.04); } body.cl-modern .days-number li.is-picked, body.cl-modern .days-number .day-number.is-picked { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 18px rgba(11,71,212,.40) !important; font-weight: 800 !important; transform: scale(1.04); } body.cl-modern .days-number li.inactive-day, body.cl-modern .days-number .inactive-day, body.cl-modern .days-number li.btn-outline-secondary { color: #cbd5e1 !important; cursor: not-allowed !important; opacity: .5; pointer-events: none; background: transparent !important; border-color: transparent !important; } /* Time picker */ body.cl-modern .time-picker { margin-top: 18px !important; padding-top: 18px !important; border-top: 1px solid #f1f5f9 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; gap: 8px !important; } body.cl-modern .time-picker > * { padding: 10px 12px !important; border-radius: 12px !important; border: 1.5px solid var(--cm-border) !important; background: #fff !important; font-size: 13px !important; font-weight: 700 !important; color: var(--cm-muted) !important; font-family: inherit !important; cursor: pointer; transition: all .15s !important; text-align: center !important; } body.cl-modern .time-picker > *:hover:not(.disabled):not(:disabled) { border-color: var(--cm-primary) !important; color: var(--cm-primary) !important; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11,71,212,.10); } body.cl-modern .time-picker > *.selected, body.cl-modern .time-picker > *.active { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 18px rgba(11,71,212,.30) !important; } body.cl-modern .time-picker > *.disabled, body.cl-modern .time-picker > *:disabled { opacity: .45; cursor: not-allowed !important; } /* Spinner overlay */ body.cl-modern #spinner-overlay { background: rgba(255,255,255,.92) !important; border-radius: 14px; } /* Step 2 form card */ body.cl-modern .form-card { background: var(--cm-card) !important; border: 1px solid var(--cm-border) !important; border-radius: var(--cm-radius-lg) !important; padding: 22px !important; box-shadow: var(--cm-shadow-sm) !important; } body.cl-modern .form-group-2 { display: flex !important; flex-direction: column !important; gap: 16px !important; } body.cl-modern .row-two { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 0 !important; } body.cl-modern .form-group { display: flex !important; flex-direction: column !important; gap: 5px !important; margin: 0 !important; } body.cl-modern .form-group label { font-size: 11px !important; font-weight: 700 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin: 0 !important; display: block; } /* Inputs */ body.cl-modern .step-2-input, body.cl-modern .step-3-input, body.cl-modern .input-rounded, body.cl-modern #date-input, body.cl-modern #time { width: 100% !important; padding: 11px 12px !important; font-size: 14px !important; font-family: inherit !important; color: var(--cm-text) !important; background: #fff !important; border: 1.5px solid var(--cm-border) !important; border-radius: 10px !important; box-shadow: none !important; background-image: none !important; transition: border-color .15s, box-shadow .15s !important; } body.cl-modern #time { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; cursor: pointer; } body.cl-modern .step-2-input:focus, body.cl-modern .step-3-input:focus, body.cl-modern .input-rounded:focus, body.cl-modern #date-input:focus, body.cl-modern #time:focus { outline: none !important; border-color: var(--cm-primary) !important; box-shadow: 0 0 0 3px rgba(11,71,212,.12) !important; background-image: none !important; } body.cl-modern #time:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%230b47d4'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important; } /* Address grid */ body.cl-modern .address-group { display: grid !important; grid-template-columns: 2fr 1fr 1fr !important; gap: 10px !important; margin: 0 !important; } body.cl-modern .address-group-item { display: flex !important; flex-direction: column !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } body.cl-modern .address-group-item label { font-size: 11px !important; font-weight: 700 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin: 0 !important; } @media (max-width: 600px) { body.cl-modern .address-group { grid-template-columns: 1fr 1fr !important; } body.cl-modern .row-two { grid-template-columns: 1fr !important; } } /* Step 2 buttons row */ body.cl-modern .step2-buttons { display: grid !important; grid-template-columns: 1fr 2fr !important; gap: 10px !important; margin-top: 18px !important; } @media (max-width: 600px) { body.cl-modern .step2-buttons { grid-template-columns: 1fr !important; } } /* ─────────────────────────────────────────────────────────────── STEP 3: Personal info / Extras / Payment / Sidebar ─────────────────────────────────────────────────────────────── */ body.cl-modern .step3-layout { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px !important; align-items: start; } @media (max-width: 1024px) { body.cl-modern .step3-layout { grid-template-columns: 1fr !important; } } body.cl-modern .step3-left, body.cl-modern .step3-right { min-width: 0; } body.cl-modern .step3-right .sidebar-wrapper { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 1024px) { body.cl-modern .step3-right .sidebar-wrapper { position: static; } } body.cl-modern .step3-left-card { background: var(--cm-card) !important; border: 1px solid var(--cm-border) !important; border-radius: var(--cm-radius-lg) !important; padding: 28px !important; box-shadow: var(--cm-shadow-sm) !important; display: flex !important; flex-direction: column !important; gap: 22px !important; position: relative; overflow: hidden; } body.cl-modern .step3-left-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cm-primary), var(--cm-primary-2), var(--cm-purple)); z-index: 1; } @media (max-width: 600px) { body.cl-modern .step3-left-card { padding: 22px !important; } } /* Form grid */ body.cl-modern .form-grid { margin: 0 !important; border: none !important; } body.cl-modern .form-grid .row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 0 !important; } body.cl-modern .form-grid .form-group { margin: 0 !important; padding: 0 !important; width: auto !important; border: none !important; } body.cl-modern .form-grid .form-group:has(#additional-info) { grid-column: 1 / -1; } @media (max-width: 600px) { body.cl-modern .form-grid .row { grid-template-columns: 1fr !important; } } /* Field icons via FA 6 */ body.cl-modern .form-grid label { display: inline-flex !important; align-items: center !important; gap: 6px !important; } body.cl-modern .form-grid label[for="name"]::before, body.cl-modern .form-grid label[for="surname"]::before, body.cl-modern .form-grid label[for="email"]::before, body.cl-modern .form-grid label[for="phone"]::before, body.cl-modern .form-grid label[for="additional-info"]::before { font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--cm-primary); font-size: 11px; margin: 0 !important; } body.cl-modern .form-grid label[for="name"]::before { content: '\f007'; } body.cl-modern .form-grid label[for="surname"]::before { content: '\f007'; } body.cl-modern .form-grid label[for="email"]::before { content: '\f0e0'; } body.cl-modern .form-grid label[for="phone"]::before { content: '\f095'; } body.cl-modern .form-grid label[for="additional-info"]::before { content: '\f249'; } /* Extras row (vacuum / pets) */ body.cl-modern .extras-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; border: none !important; } @media (max-width: 600px) { body.cl-modern .extras-row { grid-template-columns: 1fr !important; } } body.cl-modern .extra-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; background: #fff !important; border: 1.5px solid var(--cm-border) !important; border-radius: 14px !important; cursor: pointer; transition: all .18s !important; width: auto !important; margin: 0 !important; } body.cl-modern .extra-card:hover { border-color: #c7d2fe !important; transform: translateY(-2px); box-shadow: var(--cm-shadow-md) !important; } body.cl-modern .extra-card:has(input[type="checkbox"]:checked) { border-color: var(--cm-primary) !important; background: linear-gradient(180deg, rgba(11,71,212,.04), #fff) !important; box-shadow: 0 12px 28px rgba(11,71,212,.16) !important; } body.cl-modern .extra-card input[type="checkbox"] { width: 22px !important; height: 22px !important; flex-shrink: 0 !important; margin: 0 !important; cursor: pointer; accent-color: var(--cm-primary); } body.cl-modern .extra-card img { width: 44px !important; height: 44px !important; object-fit: contain !important; flex-shrink: 0 !important; background: #f8fafc; border-radius: 10px; padding: 6px; } body.cl-modern .extra-card-title { font-size: 14px !important; font-weight: 700 !important; color: var(--cm-text) !important; margin: 0 0 4px !important; display: block; } body.cl-modern .extra-card-price { display: inline-flex !important; align-items: center; gap: 5px; font-size: 12px !important; font-weight: 700 !important; color: #047857 !important; background: rgba(16,185,129,.10) !important; padding: 3px 10px !important; border-radius: 999px !important; border: 1px solid rgba(16,185,129,.25) !important; width: fit-content; } body.cl-modern .extra-card-price i { font-size: 9px; } /* Payment cards — premium redesign */ body.cl-modern .payment-label { font-size: 12px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin: 0 0 14px !important; display: block; } body.cl-modern .payment-method-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 0 !important; } @media (max-width: 600px) { body.cl-modern .payment-method-cards { grid-template-columns: 1fr !important; } } body.cl-modern .payment-card { position: relative !important; background: linear-gradient(180deg, #fff 0%, #fafbfd 100%) !important; border: 2px solid var(--cm-border) !important; border-radius: 18px !important; padding: 0 !important; cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1) !important; overflow: hidden; margin: 0 !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; } body.cl-modern .payment-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--cm-primary) 0%, var(--cm-primary-2) 50%, var(--cm-purple) 100%); opacity: 0; transform: translateY(-100%); transition: all .25s cubic-bezier(.4,0,.2,1); z-index: 2; } body.cl-modern .payment-card:hover { transform: translateY(-4px); border-color: #c7d2fe !important; box-shadow: 0 16px 36px rgba(15,23,42,.12) !important; } body.cl-modern .payment-card:has(input[type="radio"]:checked) { border-color: var(--cm-primary) !important; background: linear-gradient(180deg, #eff6ff 0%, #fff 60%) !important; box-shadow: 0 18px 36px rgba(11,71,212,.20) !important; transform: translateY(-2px); } body.cl-modern .payment-card:has(input[type="radio"]:checked)::before { opacity: 1; transform: translateY(0); } body.cl-modern .payment-card input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0; height: 0; } body.cl-modern .payment-card .pm-btn { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 22px 20px 18px !important; gap: 14px !important; height: 100%; position: relative; } body.cl-modern .payment-card .pm-left { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; flex: 1; } /* Premium icon block */ body.cl-modern .payment-card .pm-icon { width: 60px !important; height: 60px !important; border-radius: 16px !important; font-size: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; flex-shrink: 0; transition: all .25s; } body.cl-modern .payment-card .pm-icon::after { content: ''; position: absolute; inset: -3px; border-radius: 18px; background: inherit; filter: blur(14px); opacity: .35; z-index: -1; } body.cl-modern .payment-card.cash .pm-icon { background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(16,185,129,.30) !important; } body.cl-modern .payment-card.card .pm-icon { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(59,130,246,.30) !important; } body.cl-modern .payment-card:hover .pm-icon { transform: scale(1.06) rotate(-2deg); } body.cl-modern .pm-text { display: flex; flex-direction: column; gap: 5px; } body.cl-modern .pm-title { font-size: 17px !important; font-weight: 800 !important; color: var(--cm-text) !important; letter-spacing: -.015em; text-transform: none !important; line-height: 1.2; } body.cl-modern .pm-subtitle { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--cm-muted) !important; font-weight: 500; } body.cl-modern .pm-support { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-top: 8px !important; } body.cl-modern .pm-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 9px !important; border-radius: 7px !important; background: #f1f5f9 !important; font-size: 10px !important; font-weight: 800 !important; color: var(--cm-muted) !important; border: 1px solid var(--cm-border) !important; letter-spacing: .02em; } body.cl-modern .pm-pill i { font-size: 14px; line-height: 1; } body.cl-modern .pm-pill--blik { background: #fff !important; border-color: rgba(244,114,182,.30) !important; } body.cl-modern .pm-pill img.pm-blik-logo { height: 13px; display: block; } /* Footer row of card */ body.cl-modern .pm-right { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-direction: row !important; gap: 8px !important; padding-top: 14px !important; border-top: 1px dashed #e2e8f0 !important; margin-top: auto !important; } body.cl-modern .pm-badge { font-size: 10px !important; font-weight: 800 !important; padding: 4px 10px !important; border-radius: 999px !important; letter-spacing: .08em !important; text-transform: uppercase; } body.cl-modern .pm-badge:not(.pm-badge--muted) { background: linear-gradient(135deg, var(--cm-success), #059669) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(16,185,129,.30) !important; } body.cl-modern .pm-badge--muted { background: rgba(11,71,212,.08) !important; color: var(--cm-primary) !important; border: 1px solid rgba(11,71,212,.18); } body.cl-modern .pm-check { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f1f5f9 !important; border: 2px solid #e2e8f0 !important; color: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; transition: all .25s cubic-bezier(.4,0,.2,1); flex-shrink: 0; } body.cl-modern .payment-card:has(input[type="radio"]:checked) .pm-check { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 16px rgba(11,71,212,.40) !important; transform: scale(1.08); } /* ─────────────────────────────────────────────────────────────── STEP 3 SIDEBAR (sidebar-main-card) ─────────────────────────────────────────────────────────────── */ body.cl-modern .sidebar-wrapper { display: flex; flex-direction: column; gap: 14px; } body.cl-modern .sidebar-main-card { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%) !important; border: 1px solid rgba(11,71,212,.18) !important; border-radius: var(--cm-radius-lg) !important; padding: 22px !important; box-shadow: 0 14px 36px rgba(11,71,212,.10) !important; position: relative; overflow: hidden; display: flex !important; flex-direction: column !important; gap: 12px !important; } body.cl-modern .sidebar-main-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 200px; height: 200px; background: radial-gradient(circle, rgba(124,58,237,.08), transparent 70%); pointer-events: none; } body.cl-modern .sidebar-main-card > * { position: relative; z-index: 1; } body.cl-modern .sidebar-caption { font-size: 11px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin: 0 !important; text-align: center; } body.cl-modern .sidebar-time-row { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #fff !important; padding: 10px 18px !important; border-radius: 999px !important; border: 1px solid rgba(11,71,212,.12) !important; margin: 0 auto !important; width: fit-content; } body.cl-modern .sidebar-time-row::before { content: '\f017'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--cm-primary); font-size: 13px; } body.cl-modern .sidebar-time-value { font-size: 22px !important; font-weight: 800 !important; color: var(--cm-text) !important; } body.cl-modern .sidebar-separator { border: none !important; border-top: 1px solid rgba(11,71,212,.12) !important; margin: 4px 0 !important; } body.cl-modern .sidebar-price-row { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; margin: 0 !important; } body.cl-modern .sidebar-price-value { font-size: 36px !important; font-weight: 800 !important; background: linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } body.cl-modern .sidebar-price-currency { font-size: 18px !important; color: var(--cm-muted) !important; font-weight: 700; } body.cl-modern .sidebar-price-old { text-decoration: line-through; color: #94a3b8 !important; font-size: 14px !important; margin-left: 6px; } /* Promo code form */ body.cl-modern #promocodeFormGroup { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } body.cl-modern #promocodeFormGroup > label { font-size: 11px !important; font-weight: 800 !important; color: var(--cm-muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin: 0 !important; text-align: center; } body.cl-modern #promocodeFormGroup .input-group { display: flex !important; gap: 8px !important; } body.cl-modern #promocode { flex: 1 !important; padding: 11px 14px !important; border: 1.5px solid var(--cm-border) !important; border-radius: 12px !important; font-family: 'JetBrains Mono', 'Fira Mono', monospace !important; font-size: 13px !important; letter-spacing: .04em; text-transform: uppercase; background: #fff !important; height: auto !important; color: var(--cm-text) !important; } body.cl-modern #promocode:focus { outline: none; border-color: var(--cm-primary) !important; box-shadow: 0 0 0 3px rgba(11,71,212,.12) !important; } body.cl-modern #apply-code-btn, body.cl-modern .apply-btn { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 11px 18px !important; font-weight: 700 !important; font-size: 13px !important; font-family: inherit !important; cursor: pointer; height: auto !important; white-space: nowrap; box-shadow: 0 4px 12px rgba(11,71,212,.25); transition: transform .15s, box-shadow .15s; } body.cl-modern #apply-code-btn:hover, body.cl-modern .apply-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(11,71,212,.35); } body.cl-modern .promo-codes-container { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; } body.cl-modern .promo-code-card { background: #fff !important; border: 1.5px dashed #c7d2fe !important; border-radius: 10px !important; padding: 8px 12px !important; cursor: pointer !important; transition: all .15s !important; display: flex !important; align-items: center !important; gap: 8px; margin: 0 !important; } body.cl-modern .promo-code-card:hover { background: #eef2ff !important; border-color: var(--cm-primary) !important; border-style: solid !important; } body.cl-modern .promo-code-card .promo-icon { color: var(--cm-primary) !important; font-size: 14px !important; } body.cl-modern .promo-code-card .promo-code-text { color: var(--cm-text) !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .04em; } body.cl-modern .promo-code-card .promo-code-discount { font-size: 11px !important; color: var(--cm-muted) !important; } /* Terms checkbox — fully overrides legacy `display:none` on the native input AND the legacy ::before / span chrome so the user can actually click it. Uses a real native checkbox (accent-color) for reliability. NB: extra `label.custom-checkbox` selectors are intentional to beat `body.cl-modern .form-group label { text-transform:uppercase ...}`. */ body.cl-modern label.custom-checkbox, body.cl-modern .form-group label.custom-checkbox, body.cl-modern .custom-checkbox { display: flex !important; align-items: flex-start !important; gap: 12px !important; cursor: pointer !important; font-size: 13px !important; line-height: 1.55 !important; color: var(--cm-text) !important; background: #fff !important; padding: 14px 16px !important; border-radius: 14px !important; border: 1.5px solid var(--cm-border) !important; margin: 0 !important; padding-left: 16px !important; /* override legacy 35px */ position: relative !important; user-select: none; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; transition: all .15s !important; } body.cl-modern .custom-checkbox:hover { border-color: var(--cm-primary) !important; background: #f8fafc !important; } body.cl-modern .custom-checkbox:has(input[type="checkbox"]:checked) { border-color: var(--cm-primary) !important; background: linear-gradient(180deg, rgba(11,71,212,.04), #fff) !important; } /* Kill the legacy chrome */ body.cl-modern .custom-checkbox::before, body.cl-modern .custom-checkbox::after { display: none !important; content: none !important; } body.cl-modern .custom-checkbox > span, body.cl-modern .custom-checkbox span:empty { display: none !important; } /* Force the real checkbox visible (legacy css: display:none) */ body.cl-modern .custom-checkbox input[type="checkbox"] { display: inline-block !important; appearance: auto !important; -webkit-appearance: auto !important; width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; padding: 0 !important; flex-shrink: 0 !important; cursor: pointer !important; accent-color: var(--cm-primary) !important; position: static !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; transform: none !important; z-index: 1 !important; } body.cl-modern .custom-checkbox a { color: var(--cm-primary) !important; font-weight: 700 !important; text-decoration: none !important; display: inline !important; position: relative; z-index: 2; } body.cl-modern .custom-checkbox a:hover { text-decoration: underline !important; } /* Force normal-case for any descendant text inside the agreement label (the form-group label rule otherwise upper-cases inner text + adds letter-spacing, breaking word wrapping). */ body.cl-modern .custom-checkbox, body.cl-modern .custom-checkbox * { text-transform: none !important; letter-spacing: 0 !important; } /* Premium SVG icons inside payment cards */ body.cl-modern .payment-card .pm-icon svg { width: 28px !important; height: 28px !important; display: block !important; stroke: currentColor !important; fill: none !important; } /* ─────────────────────────────────────────────────────────────── MOBILE STICKY PRICE BAR ─────────────────────────────────────────────────────────────── */ .calc-mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--cm-border); padding: 10px 14px; align-items: center; gap: 12px; box-shadow: 0 -8px 24px rgba(15,23,42,.10); } .calc-mobile-bar-left { flex: 1; min-width: 0; } .calc-mobile-bar-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cm-muted); } .calc-mobile-bar-price { font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--cm-primary), var(--cm-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .calc-mobile-bar-cta { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)); color: #fff; padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; font-family: inherit; box-shadow: 0 6px 16px rgba(11,71,212,.30); } @media (max-width: 1024px) { body.cl-modern .calc-mobile-bar { display: flex; } body.cl-modern .form-container { padding-bottom: 90px; } } /* ─────────────────────────────────────────────────────────────── HELP FAB (above mobile bar) ─────────────────────────────────────────────────────────────── */ body.cl-modern .help-fab, body.cl-modern #helpFabBtn { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; border-radius: 999px !important; font-family: inherit !important; z-index: 950 !important; } @media (max-width: 1024px) { body.cl-modern .help-fab, body.cl-modern #helpFabBtn { bottom: 88px !important; right: 14px !important; padding: 0 !important; width: 48px !important; height: 48px !important; min-width: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 24px rgba(11,71,212,.40) !important; left: auto !important; top: auto !important; } body.cl-modern .help-fab span, body.cl-modern #helpFabBtn span { display: none !important; } body.cl-modern .help-fab i, body.cl-modern #helpFabBtn i { font-size: 22px !important; margin: 0 !important; line-height: 1 !important; } } /* ─────────────────────────────────────────────────────────────── SEO TEXT BLOCK ─────────────────────────────────────────────────────────────── */ body.cl-modern .seo-text { background: var(--cm-card) !important; border: 1px solid var(--cm-border) !important; border-radius: var(--cm-radius-lg) !important; border-image: none !important; max-width: 1100px !important; margin: 32px auto !important; padding: 36px 40px !important; box-shadow: var(--cm-shadow-sm) !important; position: relative; overflow: hidden; } body.cl-modern .seo-text::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cm-primary), var(--cm-primary-2), var(--cm-purple)); } body.cl-modern .seo-text h2 { color: var(--cm-text) !important; font-weight: 800 !important; letter-spacing: -.02em; font-size: clamp(22px, 3vw, 28px) !important; text-align: left !important; } body.cl-modern .seo-text h3 { color: var(--cm-primary) !important; font-size: 17px !important; font-weight: 700 !important; } body.cl-modern .seo-text p, body.cl-modern .seo-text li { color: #475569 !important; line-height: 1.7; font-size: 14.5px; } /* Modal — preserve legacy modal but cleaner buttons */ body.cl-modern .modal { font-family: inherit; } body.cl-modern .modal-content, body.cl-modern .promo-modal-content { border-radius: 18px !important; font-family: inherit !important; } body.cl-modern .modal-button { background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-2)) !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 12px 24px !important; font-weight: 700 !important; cursor: pointer; } /* ─────────────────────────────────────────────────────────────── MISC LEGACY OVERRIDES ─────────────────────────────────────────────────────────────── */ /* Kill any leftover Bootstrap form-control underlines */ body.cl-modern input.form-control, body.cl-modern select.form-control, body.cl-modern textarea.form-control { background-image: none !important; box-shadow: none !important; } /* Hide hidden inputs visually if accidentally shown */ body.cl-modern input[type="hidden"] { display: none !important; } /* Fix toggle controls (legacy) */ body.cl-modern .toggle__control { background: #e2e8f0 !important; } body.cl-modern .toggle__input:checked + .toggle__control { background: var(--cm-primary) !important; } /* ═══════════════════════════════════════════════════════════════ FIX PASS — addressing user feedback (PC alignment, godz dup, mobile categories, PC categories spacing, price pill colors) ═══════════════════════════════════════════════════════════════ */ /* FIX #2: hide the legacy time-unit span — JS already injects "godz." */ body.cl-modern .summary-block .time-unit, body.cl-modern .sidebar-main-card .time-unit { display: none !important; } /* FIX #6: force soft-mint pills on .cardd .price (override legacy inline colors AND Bootstrap .bg-primary). Adds explicit background-color + color with !important and IDs for max specificity. */ body.cl-modern .cardd .price, body.cl-modern .cardd .price.bg-primary, body.cl-modern .cardd #roomsPrice, body.cl-modern .cardd #bathroomsPrice, body.cl-modern .cardd #kitchenPrice, body.cl-modern .cardd #balconyPrice, body.cl-modern #roomsPrice.price, body.cl-modern #bathroomsPrice.price, body.cl-modern #kitchenPrice.price, body.cl-modern #balconyPrice.price { background: rgba(16,185,129,.12) !important; background-color: rgba(16,185,129,.12) !important; background-image: none !important; border: 1px solid rgba(16,185,129,.30) !important; color: #047857 !important; border-radius: 10px !important; padding: 7px 14px !important; font-size: 13.5px !important; font-weight: 700 !important; margin: 0 !important; width: fit-content !important; align-self: flex-start !important; display: inline-block !important; box-shadow: none !important; text-shadow: none !important; } /* FIX #5: PC categories — let segmented control breathe */ @media (min-width: 701px) { body.cl-modern .service-categories { width: auto !important; max-width: 100% !important; gap: 6px !important; padding: 6px !important; } body.cl-modern .service-categories .category-btn, body.cl-modern .category-btn { padding: 10px 18px !important; gap: 10px !important; font-size: 13.5px !important; } body.cl-modern .category-btn i { font-size: 14px !important; margin-right: 2px !important; } } /* FIX #4: Mobile categories — 5-col grid that always fits with labels */ @media (max-width: 700px) { body.cl-modern .service-categories { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; width: 100% !important; gap: 4px !important; padding: 4px !important; box-sizing: border-box !important; } body.cl-modern .service-categories .category-btn, body.cl-modern .category-btn { width: 100% !important; min-width: 0 !important; flex: none !important; aspect-ratio: auto !important; height: auto !important; flex-direction: column !important; padding: 8px 2px !important; gap: 4px !important; font-size: 9.5px !important; border-radius: 10px !important; line-height: 1.15 !important; } body.cl-modern .category-btn i { font-size: 17px !important; margin: 0 !important; } body.cl-modern .category-btn span { display: block !important; font-size: 9.5px !important; line-height: 1.1 !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; hyphens: auto; } } @media (max-width: 360px) { body.cl-modern .category-btn span { font-size: 8.5px !important; } body.cl-modern .category-btn i { font-size: 16px !important; } } /* FIX #1: PC sidebar — make every inner widget a uniform full-width white card so the gradient summary block looks aligned, not crooked. */ body.cl-modern .calc-sidebar .summary-block { width: 100% !important; box-sizing: border-box !important; } body.cl-modern .calc-sidebar .summary-block > * { width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; } body.cl-modern .calc-sidebar .summary-block .summary-row { margin: 0 !important; } body.cl-modern .calc-sidebar .summary-block .next-btn, body.cl-modern .calc-sidebar .summary-block button#next-btn { width: 100% !important; margin: 4px 0 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.cl-modern .calc-sidebar .summary-of-step1 { margin: 0 !important; } /* Remove the legacy hr.divider gap inside summary-block */ body.cl-modern .summary-block hr, body.cl-modern .summary-block .divider { display: none !important; margin: 0 !important; } /* Min-order pill alignment under sidebar */ body.cl-modern .calc-sidebar .cm-min-order-pill { margin: 0 !important; width: fit-content; max-width: 100%; } /* ═══════════════════════════════════════════════════════════════ FIX PASS 2 — service cards glued, sidebar wrap, znizka, 4+1, filter ═══════════════════════════════════════════════════════════════ */ /* FIX A: PC service cards — more breathing room */ body.cl-modern .services-container { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 16px !important; } @media (min-width: 1025px) { body.cl-modern .services-container { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 18px !important; } } body.cl-modern .service-card { padding: 16px 12px 14px !important; } /* FIX B: Category filter not working — JS sets style.display=none but our CSS uses !important on display:flex, so inline never won. Use attribute selector to give "[style*='display: none']" enough specificity to win. */ body.cl-modern .service-card[style*="display: none"], body.cl-modern .service-card[style*="display:none"] { display: none !important; } /* FIX C: Mobile categories — kill legacy nth-child(5) span-all-columns that was causing the 4+1 layout. Force every button to one cell. */ body.cl-modern .service-categories .category-btn, body.cl-modern .service-categories .category-btn:nth-child(1), body.cl-modern .service-categories .category-btn:nth-child(2), body.cl-modern .service-categories .category-btn:nth-child(3), body.cl-modern .service-categories .category-btn:nth-child(4), body.cl-modern .service-categories .category-btn:nth-child(5) { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; align-self: stretch !important; } @media (max-width: 700px) { body.cl-modern .service-categories .category-btn:nth-child(5) { grid-column: auto !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; justify-self: stretch !important; } } @media (min-width: 701px) { body.cl-modern .service-categories .category-btn:nth-child(1), body.cl-modern .service-categories .category-btn:nth-child(2), body.cl-modern .service-categories .category-btn:nth-child(3), body.cl-modern .service-categories .category-btn:nth-child(4), body.cl-modern .service-categories .category-btn:nth-child(5) { grid-column: auto !important; width: auto !important; } } /* FIX D: PC categories — extra breathing room between segments */ @media (min-width: 701px) { body.cl-modern .service-categories { gap: 8px !important; padding: 8px !important; } body.cl-modern .service-categories .category-btn, body.cl-modern .category-btn { padding: 11px 22px !important; gap: 12px !important; min-height: 0 !important; height: auto !important; } } /* FIX E: Sidebar summary-row — stack label & value vertically so the time "2 godz. 30 min" never wraps awkwardly next to the long uppercase label. */ body.cl-modern .summary-block .summary-row { display: grid !important; grid-template-columns: 36px 1fr auto !important; grid-template-areas: 'icon label value' !important; align-items: center !important; gap: 4px 12px !important; padding: 12px 14px !important; } body.cl-modern .summary-block .summary-row::before { grid-area: icon; margin: 0 !important; } body.cl-modern .summary-block .summary-row .summary-row-title { grid-area: label; margin: 0 !important; font-size: 10.5px !important; letter-spacing: .05em !important; line-height: 1.25 !important; } body.cl-modern .summary-block .summary-row .approximate-time-value, body.cl-modern .summary-block .summary-row .total-price-value { grid-area: value; white-space: nowrap; text-align: right !important; } body.cl-modern .summary-block .summary-row .approximate-time-value { font-size: 18px !important; } body.cl-modern .summary-block .summary-row .total-price-value { font-size: 24px !important; } body.cl-modern .summary-block .summary-row .zloty-symbol, body.cl-modern .summary-block .summary-row .old-price { grid-area: value; display: none !important; } body.cl-modern .summary-block .summary-row .total-price-value::after { content: ' zł'; font-size: 14px; color: var(--cm-muted); font-weight: 700; -webkit-text-fill-color: var(--cm-muted); background: none; } /* FIX F: belt-and-suspenders — promo-price-line hidden by default, only shown when JS adds .cm-show class (so old cached JS / future regressions never accidentally show "Znizka: 0 zł"). */ body.cl-modern .promo-price-line { display: none !important; } body.cl-modern .promo-price-line[style*="flex"] { display: flex !important; } /* Even when style*="flex": if value text is "0" or "0.00" the visual should be silent — but we can't read text in CSS, so we rely on the JS guard (already patched: promoApplied && promoDiscountAmount > 0). */