/**
 * Contact Form 7 - Custom Styles
 * Styly pro kontaktní formulář a kontaktní sekci podle designu Figma
 */

/* ========================================
   CONTACT SECTION
   ======================================== */

/* Kontaktní sekce - vnitřní wrapper s max-width 90% */
.contact-section {
    max-width: 90%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Bez padding - padding je na .container-small */
}

.contact-content {
    text-align: left;
    width: 100%;
    margin-bottom: 2rem;
}

.contact-content .section-title {
    text-align: left;
    /* Všechny vlastnosti (font-size, line-height, letter-spacing, font-family, font-weight, color) jsou nyní v globálním h2 */
    margin-bottom: 24px;
}

.contact-form-wrapper {
    width: 100%;
}

/* ========================================
   FORM HEADING
   ======================================== */

.contact-section .section-description {
    font-size: 1.125rem;
    color: #e5e5e5;
    text-align: left;
    margin-bottom: 2rem;
}

/* ========================================
   CONTACT FORM 7 - FORM ELEMENTS
   ======================================== */

.wpcf7-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.wpcf7-form p {
    margin: 0;
}

/* První tři pole (jméno, email, tel) - vedle sebe */
.wpcf7-form p:has(input[type="text"]),
.wpcf7-form p:has(input[type="email"]),
.wpcf7-form p:has(input[type="tel"]) {
    width: 100%;
}

/* Pole "Zpráva" (textarea) - celá šířka */
.wpcf7-form p:has(textarea) {
    grid-column: 1 / -1;
    width: 100%;
}

.wpcf7-form label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #98EFD1;
    margin-bottom: 0.5rem;
    text-align: left;
    width: 100%;
}

/* ========================================
   INPUT FIELDS
   ======================================== */

.wpcf7-form .cf7-input,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #98EFD1;
    padding: 0.75rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #ffffff;
    outline: none;
    transition: border-color 0.3s ease;
}

.wpcf7-form .cf7-input:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus {
    border-bottom-color: #22c55e;
}

.wpcf7-form .cf7-input::placeholder,
.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder {
    color: #888;
    opacity: 0.7;
}

/* ========================================
   TEXTAREA
   ======================================== */

.wpcf7-form .cf7-textarea,
.wpcf7-form textarea {
    width: 100%;
    height: 47px;
    min-height: 47px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #98EFD1;
    padding: 0.75rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #ffffff;
    outline: none;
    resize: vertical; /* Možnost roztáhnout vertikálně */
    transition: border-color 0.3s ease;
    line-height: 1.5;
    overflow-x: hidden !important; /* Skrýt horizontální scrollbar - důležité */
    overflow-y: hidden; /* Skrýt vertikální scrollbar při defaultní výšce */
    word-wrap: break-word; /* Zalamování dlouhých slov */
    box-sizing: border-box; /* Zahrnout padding do výšky */
    white-space: pre-wrap; /* Zachovat mezery a zalamovat text */
}

.wpcf7-form .cf7-textarea:focus,
.wpcf7-form textarea:focus {
    border-bottom-color: #22c55e;
}

/* Třída pro roztáhnutou textarea - zobrazit scroll */
.wpcf7-form .cf7-textarea.resized,
.wpcf7-form textarea.resized {
    overflow-y: auto;
}

.wpcf7-form .cf7-textarea::placeholder,
.wpcf7-form textarea::placeholder {
    color: #888;
    opacity: 0.7;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */


.wpcf7-form .cf7-submit,
.wpcf7-form input[type="submit"] {
    width: 300px;
    height: 85px;
    background: transparent;
    border: 2px solid #98EFD1;
    border-radius: 68px;
    padding: 18px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #98EFD1;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    align-self: flex-start; /* Zarovnání vlevo */
    text-align: center; /* Text zarovnaný na střed */
    box-sizing: border-box; /* Padding a border započítány do width/height */
    display: inline-block; /* Pro správné zobrazení */
}

.wpcf7-form .cf7-submit:hover,
.wpcf7-form input[type="submit"]:hover {
    background-color: #98EFD1;
    color: #1a1a1a;
    transform: translateY(-2px);
}

.wpcf7-form .cf7-submit:active,
.wpcf7-form input[type="submit"]:active {
    transform: translateY(0);
}

/* ========================================
   FORM LAYOUT - RESPONSIVE GRID
   ======================================== */

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Submit button wrapper - samostatný řádek, zarovnaný vlevo */
.wpcf7-form p:has(.cf7-submit),
.wpcf7-form p:has(input[type="submit"]) {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2rem;
}

/* Formulář zůstává ve sloupci na všech rozlišeních */

/* ========================================
   VALIDATION MESSAGES
   ======================================== */

.wpcf7-response-output {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.wpcf7-mail-sent-ok {
    background-color: rgba(152, 239, 209, 0.1);
    border: 1px solid #98EFD1;
    color: #98EFD1;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.wpcf7-spam {
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid #fbbf24;
    color: #fbbf24;
}

/* ========================================
   ERROR MESSAGES
   ======================================== */

.wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 14px;
    margin-top: 0.5rem;
    display: block;
}

.wpcf7-not-valid {
    border-bottom-color: #ef4444 !important;
}

/* ========================================
   LOADING STATE
   ======================================== */

.wpcf7-form .ajax-loader {
    display: inline-block;
    margin-left: 1rem;
    vertical-align: middle;
}

.wpcf7-form.submitting .cf7-submit,
.wpcf7-form.submitting input[type="submit"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet - 992px a méně */
@media (max-width: 992px) {
    .contact-section {
        max-width: 90%;
    }
}

/* Mobil - 768px a méně */
@media (max-width: 767px) {
    .contact-section {
        max-width: 90%;
    }
    
    /* .contact-content .section-title používá globální h2 */
    
    .wpcf7-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Na mobilu všechna pole pod sebou */
    .wpcf7-form p:has(input[type="text"]),
    .wpcf7-form p:has(input[type="email"]),
    .wpcf7-form p:has(input[type="tel"]),
    .wpcf7-form p:has(textarea) {
        grid-column: auto;
        width: 100%;
    }
    
    .wpcf7-form .cf7-submit,
    .wpcf7-form input[type="submit"] {
        width: 100%;
        max-width: 300px;
    }
}

/* Mobil malý - 480px a méně */