/* ============================================================
   Kreator Briefu Hodowli – Własne style CSS
   Tailwind CSS obsługuje większość layoutu.
   Poniższe style naprawiają konflikty z motywami WP.
   ============================================================ */

/* Resetowanie styli typowych motywów WP dla kontenera wtyczki */
.kbh-wrapper *,
.kbh-wrapper *::before,
.kbh-wrapper *::after {
    box-sizing: border-box;
}

/* Kroki formularza */
.kbh-wrapper .kbh-step {
    display: none;
}

.kbh-wrapper .kbh-step.active {
    display: block;
    animation: kbh-fadeIn 0.4s ease-out;
}

@keyframes kbh-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nagłówki – nadpisanie styli motywu (np. margin) */
.kbh-wrapper h2,
.kbh-wrapper h3 {
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Inputy – upewniamy się że nie dziedziczą styli motywu */
.kbh-wrapper input[type="text"],
.kbh-wrapper input[type="url"],
.kbh-wrapper input[type="email"],
.kbh-wrapper textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1e293b;
    transition: box-shadow 0.2s, border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.kbh-wrapper input[type="text"]:focus,
.kbh-wrapper input[type="url"]:focus,
.kbh-wrapper textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Strefa drag & drop */
.kbh-wrapper .kbh-dropzone {
    transition: border-color 0.2s, background-color 0.2s;
}

.kbh-wrapper .kbh-dropzone:hover {
    border-color: #2563eb;
    background-color: #eff6ff;
}

/* Przyciski nawigacji */
.kbh-wrapper #kbh-next,
.kbh-wrapper #kbh-prev {
    font-family: inherit;
}

.kbh-wrapper #kbh-next:hover {
    transform: translateY(-2px);
}

/* Responywność na urządzeniach mobilnych */
@media (max-width: 640px) {
    .kbh-wrapper .md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .kbh-wrapper .md\:col-span-2 {
        grid-column: span 1 !important;
    }

    .kbh-wrapper #kbh-next,
    .kbh-wrapper #kbh-prev {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
}

/* Twarde wymuszenie Imienia i Telefonu w jednym rzêdzie */
.kbh-wrapper .kbh-contact-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
}
.kbh-wrapper .kbh-contact-row > input {
    flex: 1 1 50% !important;
    width: auto !important;
}
@media (max-width: 640px) {
    .kbh-wrapper .kbh-contact-row {
        flex-direction: column !important;
    }
    .kbh-wrapper .kbh-contact-row > input {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}