/* ============================================================ CF7 Popup v1.4.0 ============================================================ */ body.cf7-popup-open { overflow: hidden; } /* ----- Trigger button ----- */ .cf7-popup-btn { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; padding: 0px; background: #2563eb; color: #fff; font-size: 1rem; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; box-shadow: 0 2px 8px rgba(37,99,235,.3); } .cf7-popup-btn:hover { background: #1d4ed8; transform: translateY(-1px); } .cf7-popup-btn:active { transform: translateY(0); } /* ----- Overlay ----- */ .cf7-popup-overlay { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); display: flex !important; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .cf7-popup-overlay.is-open { opacity: 1; visibility: visible; } /* ----- Modal ----- */ .cf7-popup-modal { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.25); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 52px 40px 40px; box-sizing: border-box; transform: translateY(24px) scale(.97); transition: transform .28s cubic-bezier(.34,1.56,.64,1); } .cf7-popup-overlay.is-open .cf7-popup-modal { transform: none; } /* ----- Close button ----- */ .cf7-popup-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f3f4f6 !important; border: none !important; border-radius: 50% !important; font-size: 1.4rem !important; color: #6b7280 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; transition: background .15s, color .15s, transform .15s; line-height: 1; z-index: 2; } .cf7-popup-close:hover { background: #e5e7eb !important; color: #111827 !important; transform: rotate(90deg); } /* ----- Content reset ----- */ .cf7-popup-content { margin: 0; } .cf7-popup-content .wpcf7 { margin: 0 !important; } /* ============================================================= DZIEDZICZENIE STYLI MOTYWU Poniższe reguły wymuszają na elementach formularza wewnątrz popupu korzystanie z tych samych styli co na stronie. Używamy inherit żeby pobrać wartości z / motywu. ============================================================= */ .cf7-popup-content input, .cf7-popup-content textarea, .cf7-popup-content select, .cf7-popup-content button, .cf7-popup-content label, .cf7-popup-content p { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; } /* Inputy — pobierz border/background z arkusza motywu przez inherit, ale upewnij się że są widoczne jeśli motyw nic nie definiuje */ .cf7-popup-content input[type="text"], .cf7-popup-content input[type="email"], .cf7-popup-content input[type="tel"], .cf7-popup-content input[type="url"], .cf7-popup-content input[type="number"], .cf7-popup-content input[type="date"], .cf7-popup-content select, .cf7-popup-content textarea { display: block; width: 100%; box-sizing: border-box; } /* Submit */ .cf7-popup-content input[type="submit"], .cf7-popup-content button[type="submit"] { cursor: pointer; } /* ----- Spinner (podczas ładowania AJAX) ----- */ .cf7-popup-loader { display: flex; justify-content: center; align-items: center; min-height: 80px; } .cf7-popup-spinner { width: 36px; height: 36px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cf7spin .7s linear infinite; } @keyframes cf7spin { to { transform: rotate(360deg); } } /* ----- Scrollbar ----- */ .cf7-popup-modal::-webkit-scrollbar { width: 6px; } .cf7-popup-modal::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } @media (max-width: 600px) { .cf7-popup-modal { padding: 48px 20px 28px; } } /* ============================================================ Style formularza (vehica) ============================================================ */ /* pola formularza */ .cf7-popup-content .vehica-3-fields__middle input { width: 100%; height: 56px; padding: 0 20px; border-radius: 10px; border: 1px solid #cfd6dc; background: #f7f9fb; font-size: 16px; color: #2c3e50; outline: none; transition: all .2s ease; box-sizing: border-box; } /* focus */ .cf7-popup-content .vehica-3-fields__middle input:focus { border-color: #b71c1c; background: #ffffff; } /* odstępy między polami */ .cf7-popup-content .vehica-3-fields__middle { margin-bottom: 18px; } /* sekcja checkbox + button */ .cf7-popup-content .vehica-2-fields { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } /* checkbox */ .cf7-popup-content .vehica-checkbox-policy label { display: flex; align-items: center; font-size: 15px; color: #2c3e50; cursor: pointer; } .cf7-popup-content .vehica-checkbox-policy input[type="checkbox"] { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; } /* link polityki */ .cf7-popup-content .vehica-checkbox-policy a { color: #b71c1c; text-decoration: none; } .cf7-popup-content .vehica-checkbox-policy a:hover { text-decoration: underline; } /* przycisk */ .cf7-popup-content .vehica-button { background: #b71c1c; color: #fff; border: none; padding: 16px 34px; font-size: 16px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all .2s ease; } /* hover */ .cf7-popup-content .vehica-button:hover { background: #9f1717; } /* responsywność */ @media (max-width: 768px) { .cf7-popup-content .vehica-2-fields { flex-direction: column; align-items: flex-start; gap: 15px; } .cf7-popup-content .vehica-button { width: 100%; } } /* ============================================================ Zabezpieczenie z-index Overlay musi być zawsze na wierzchu — niezależnie od motywu, Elementora, Divi, WPBakery czy innych wtyczek. 2147483647 = maksymalna wartość z-index (limit 32-bit int). ============================================================ */ .cf7-popup-overlay { z-index: 2147483647 !important; /* Upewniamy się że overlay tworzy własny stacking context */ isolation: isolate; /* Pozycja fixed ignoruje transform rodziców — ale tylko jeśli żaden rodzic nie ma własnego stacking context z wyższym z-index. Przenosimy overlay bezpośrednio do przez JS. */ } .cf7-popup-modal { z-index: 2 !important; position: relative !important; }