/* ========================================================================== SPRYTNA PACZKA - UX ENHANCEMENTS Mobile sticky bar,calculator improvements,navigation ========================================================================== */ /* ========================================================================== MOBILE STICKY BOTTOM BAR ========================================================================== */ .sp-sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:white;border-top:1px solid #e5e5e5;box-shadow:0 -4px 20px rgba(0,0,0,0.1);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0));display:none;gap:10px;transform:translateY(0);transition:transform 0.3s ease}@media (max-width:1023px){.sp-sticky-bar{display:flex}body{padding-bottom:80px}}.sp-sticky-bar.hidden{transform:translateY(100%)}.sp-sticky-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;font-size:14px;font-weight:700;border-radius:12px;transition:all 0.15s ease;text-decoration:none;border:2px solid transparent}.sp-sticky-btn--primary{background:#10b981;color:#fff;border-color:#10b981}.sp-sticky-btn--primary:hover,.sp-sticky-btn--primary:active{background:#059669;border-color:#059669}.sp-sticky-btn--secondary{background:#0A0A0A;color:white;border-color:#fff}.sp-sticky-btn--secondary:hover,.sp-sticky-btn--secondary:active{background:#1A1A1A;border-color:#1A1A1A}.sp-sticky-btn--phone{flex:0 0 52px;width:52px;padding:14px;background:white;border-color:#e5e5e5;color:#fff}.sp-sticky-btn--phone:hover{border-color:#10b981;background:#FFFDF7}.sp-sticky-btn svg{width:18px;height:18px;flex-shrink:0}/* ========================================================================== CALCULATOR RESULT BOX ========================================================================== */ .sp-calc-result{display:none;margin-top:24px;padding:24px;background:linear-gradient(135deg,#FFFDF7 0%,#FFF9E6 100%);border:2px solid #10b981;border-radius:16px;animation:slideUp 0.3s ease}.sp-calc-result.visible{display:block}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sp-calc-result__header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,208,0,0.3)}.sp-calc-result__icon{width:48px;height:48px;background:#10b981;border-radius:12px;display:flex;align-items:center;justify-content:center}.sp-calc-result__icon svg{width:24px;height:24px;color:#fff}.sp-calc-result__title{font-size:14px;font-weight:600;color:#525252;text-transform:uppercase;letter-spacing:0.5px}.sp-calc-result__prices{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px}.sp-calc-result__price-box{flex:1;min-width:140px;padding:16px;background:white;border-radius:12px;border:1px solid #e5e5e5}.sp-calc-result__price-label{font-size:12px;color:#737373;margin-bottom:4px}.sp-calc-result__price-value{font-size:32px;font-weight:800;color:#fff;line-height:1}.sp-calc-result__price-value small{font-size:18px;font-weight:600}.sp-calc-result__price-note{font-size:11px;color:#A3A3A3;margin-top:4px}.sp-calc-result__includes{margin-bottom:20px}.sp-calc-result__includes-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:10px}.sp-calc-result__includes-list{display:flex;flex-wrap:wrap;gap:8px}.sp-calc-result__includes-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:white;border-radius:20px;font-size:13px;color:#404040;border:1px solid #e5e5e5}.sp-calc-result__includes-item svg{width:14px;height:14px;color:#22C55E}.sp-calc-result__cta{display:flex;flex-direction:column;gap:12px}@media (min-width:640px){.sp-calc-result__cta{flex-direction:row}}.sp-calc-result__disclaimer{margin-top:16px;padding:12px;background:rgba(255,255,255,0.7);border-radius:8px;font-size:12px;color:#737373;display:flex;align-items:flex-start;gap:8px}.sp-calc-result__disclaimer svg{width:16px;height:16px;flex-shrink:0;color:#A3A3A3}/* ========================================================================== CENNIK - QUICK NAVIGATION ========================================================================== */ .sp-cennik-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding:16px;background:#FFFDF7;border-radius:12px;border:1px solid #e5e5e5}.sp-cennik-nav__title{width:100%;font-size:12px;font-weight:700;color:#737373;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}.sp-cennik-nav__item{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:white;border:1px solid #e5e5e5;border-radius:20px;font-size:13px;font-weight:600;color:#404040;text-decoration:none;transition:all 0.15s ease}.sp-cennik-nav__item:hover{border-color:#10b981;background:#FFF9E6;color:#fff}.sp-cennik-nav__item--popular{background:#10b981;border-color:#10b981;color:#fff}/* ========================================================================== TRACKING - HELP SECTION ========================================================================== */ .sp-tracking-help{margin-top:32px;padding:24px;background:#FFFDF7;border-radius:16px;border:1px solid #e5e5e5}.sp-tracking-help__title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#fff;margin-bottom:16px}.sp-tracking-help__title svg{width:20px;height:20px;color:#10b981}.sp-tracking-help__list{display:flex;flex-direction:column;gap:12px}.sp-tracking-help__item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:white;border-radius:10px;border:1px solid #e5e5e5}.sp-tracking-help__item-icon{width:32px;height:32px;background:#FFF9E6;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sp-tracking-help__item-icon svg{width:16px;height:16px;color:#fff}.sp-tracking-help__item-content h4{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}.sp-tracking-help__item-content p{font-size:13px;color:#737373;line-height:1.5}/* ========================================================================== ACCESSIBILITY & MOTION ========================================================================== */ @media (prefers-reduced-motion:reduce){.sp-calc-result,.sp-sticky-bar{animation:none;transition:none}}@media (min-width:1024px){.sp-sticky-bar{display:none !important}body{padding-bottom:0 !important}}/* ========================================================================== MISSING TAILWIND CLASSES FOR HEADER ========================================================================== */ .h-36{height:9rem}.border-gray-100{border-color:#f3f4f6}.text-gray-700{color:#374151}.text-gray-500{color:#6b7280}.text-gray-400{color:#9ca3af}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}@media (hover:hover){.hover\:text-black:hover{color:#000}.hover\:bg-gray-50:hover{background-color:#f9fafb}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-amber-50:hover{background-color:#fffbeb}.group-hover\:rotate-180:is(:where(.group):hover *){transform:rotate(180deg)}}.text-amber-500{color:#f59e0b}.bg-amber-50{background-color:#fffbeb}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.rounded-xl{border-radius:0.75rem}.max-w-7xl{max-width:80rem}.ml-0\.5{margin-left:0.125rem}/* ========================================================================== MOBILE-FIRST AUDIT FIXES (2026-03-29) Target:375px viewport (iPhone SE) ========================================================================== */ /* --- FIX 1:iOS zoom prevention on form inputs/selects/textareas --- iOS Safari zooms in when input font-size < 16px */ @media (max-width:767px){input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="url"],select,textarea,.form-input,.form-select{font-size:16px !important}}@media (max-width:479px){input[type="email"][class*="flex-1"]{min-width:0 !important;width:100% !important}}@media (max-width:479px){.bg-sp-black .grid.grid-cols-2{grid-template-columns:1fr !important;gap:1.5rem !important}}@media (max-width:639px){table[style*="max-width:56rem"]{display:block !important;width:100% !important}table[style*="max-width:56rem"] tbody{display:block !important}table[style*="max-width:56rem"] tr{display:flex !important;flex-direction:column !important;gap:1rem !important}table[style*="max-width:56rem"] td{display:block !important;width:100% !important;padding:0 !important}}@media (max-width:767px){#hero-calculator{max-width:100% !important}#hero-flex > .flex-shrink-0{max-width:100% !important;width:100% !important}}@media (max-width:767px){header .h-36{height:4.5rem !important}header .h-32{height:3.5rem !important}}@media (max-width:767px){main[style*="padding-top:160px"],main[style*="padding-top:160px"]{padding-top:90px !important}main[style*="padding-top:11rem"],main[style*="padding-top:11rem"]{padding-top:6rem !important}}@media (max-width:767px){section[style*="padding-top:220px"]{padding-top:120px !important}}@media (max-width:767px){.sp-cennik-nav__item,.sub-btn,.tab-btn,.nav-back{min-height:44px;display:inline-flex;align-items:center}}@media (max-width:374px){#countdown-days,#countdown-hours,#countdown-mins{font-size:1.5rem !important}.min-w-\[70px\]{min-width:50px !important;padding-left:0.5rem !important;padding-right:0.5rem !important}}html,body{overflow-x:hidden}img{max-width:100%;height:auto}@media (max-width:374px){.grid.grid-cols-2:not(.gap-1){grid-template-columns:1fr !important}}h1,h2,h3,h4,p,li,td,th,a,span,label{overflow-wrap:break-word;word-wrap:break-word}@media (max-width:479px){.calc-container{padding-left:0.5rem;padding-right:0.5rem}.calc-body{padding:0.75rem}}@media (max-width:479px){footer .grid.sm\:grid-cols-2{grid-template-columns:1fr !important}}@media (max-width:479px){.cta-group .btn-primary,.cta-group .btn-secondary{width:100%;justify-content:center}}@media (max-width:1023px){.wizard-container{padding-left:0.75rem !important;padding-right:0.75rem !important}}@media (max-width:374px){.sticky-quote{padding:0.625rem 0.75rem !important;gap:0.5rem !important}.sticky-quote .btn-primary{padding:0.75rem 1rem !important;font-size:0.8125rem !important;white-space:nowrap}}@media (max-width:639px){.hero-sprytek{display:none !important}}#mobile-menu{max-width:100vw;overflow-x:hidden}html{overflow-x:hidden}body{overflow-x:hidden;overflow-y:scroll}@media (max-width:1023px){#mobile-menu:not(.hidden){min-height:calc(100vh - 80px) !important;background:#fff !important}}/* ========================================================================== ACCESSIBILITY FIXES 2026-04-08 Lighthouse score:85 → target 95+ ========================================================================== */ /* --- A11Y FIX 1:btn-primary-hero contrast (green-600 → green-700) --- #16a34a + white = 3.26:1 FAIL #15803d + white = 4.58:1 PASS AA */ .btn-primary-hero{background:var(--sp-green-700) !important;box-shadow:0 4px 14px rgba(21,128,61,.25) !important}.btn-primary-hero:hover{background:var(--sp-green-800) !important;box-shadow:0 6px 20px rgba(21,128,61,.3) !important}/* --- A11Y FIX 2:type-expand-btn + measure-label + measure-unit contrast --- #64748b on dark bg (#0f172a calc area) = 4.05:1 FAIL #94a3b8 (slate-400) on dark bg = 6.45:1 PASS AA */ .type-expand-btn{color:#94a3b8 !important}.type-expand-btn:hover{color:#cbd5e1 !important}.measure-label{color:#94a3b8 !important}.measure-unit{color:#94a3b8 !important}button[aria-label^="Go to card"]{min-width:24px !important;min-height:24px !important;position:relative}button[aria-label^="Go to card"]::before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px}input[type="checkbox"],input[type="radio"]{min-width:20px;min-height:20px}label[for="cc-analytics"],label[for="cc-marketing"],label[for="consentTerms"],.cookie-consent label,.cc-checkbox-group label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;cursor:pointer}::placeholder{color:#6b7280 !important}footer h4{font-size:1rem}.text-slate-400{color:#64748b !important}.bg-sp-green-600{background-color:var(--sp-green-700,#15803d) !important}.text-slate-500,.text-\[11px\].text-slate-500{color:#475569 !important}.bg-sky-500{background-color:#0369a1 !important}.bg-orange-500,button.bg-orange-500,a.bg-orange-500{background-color:#9a3412 !important}.hover\:bg-orange-600:hover{background-color:#9a3412 !important}.bg-emerald-600{background-color:#047857 !important}#cc-accept-all{background:#9a3412 !important}/* --- A11Y FIX 8:Green text on white bg (links,badges) --- #16a34a (green-600) on white = 3.26:1 FAIL #15803d (green-700) on white = 4.58:1 PASS AA */ .text-sp-green-600,.text-green-600{color:var(--sp-green-700,#15803d) !important}span.border-b[class*="green"],a[class*="green"]{color:var(--sp-green-700,#15803d) !important}[class*="text-sp-green-600"]{color:#15803d !important}footer button[type="submit"]{background-color:#15803d !important}/* --- A11Y FIX 9:Footer contrast (dark bg) --- Footer bg:#0f172a (slate-900) #64748b (slate-500) on #1e293b = 3.27:1 FAIL #94a3b8 (slate-400) on #1e293b = 5.65:1 PASS */ footer a,footer p,footer span,footer li{color:#cbd5e1 !important}footer h3{color:#f1f5f9 !important}footer .text-slate-400,footer .text-slate-500,[class*="bg-slate-900"] .text-slate-400,[class*="bg-slate-900"] .text-slate-500,[class*="bg-slate-800"] .text-slate-400,[class*="bg-slate-800"] .text-slate-500{color:#94a3b8 !important}footer .text-emerald-300{color:#6ee7b7 !important}