/* ============================================================
   GynoLife — CF7 Mobile Responsive Layer
   Targets all Contact Form 7 forms + Bootstrap-like grid classes
   used by the theme (.dzForm, .row, .col-sm-*, .form-floating).
   Loaded site-wide; non-destructive — only adjusts mobile.
   ============================================================ */

/* Universal CF7 form: korumalar (her viewport) */
.wpcf7-form,
.wpcf7-form * {
    box-sizing: border-box;
}
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form button {
    max-width: 100%;
}

/* iOS auto-zoom onleme: tum form input'lari minimum 16px */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form input[type="datetime-local"],
.wpcf7-form input[type="month"],
.wpcf7-form input[type="week"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="password"],
.wpcf7-form select,
.wpcf7-form textarea {
    font-size: 16px;
    line-height: 1.4;
    min-height: 44px;          /* WCAG / iOS dokunma hedefi */
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

/* Date/Time iOS native picker'a sahip olsun ama appearance kalksin */
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
}

/* Native select için chevron */
.wpcf7-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237761DF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px !important;
}

/* Textarea minimum yukseklik */
.wpcf7-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Touch hedefi olarak buttonlar */
.wpcf7-form button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    min-height: 48px;
    font-size: 15px;
    cursor: pointer;
}

/* Spinner: butona bitisik, ovup/tasmasin */
.wpcf7-spinner {
    vertical-align: middle;
    margin: 0 0 0 8px !important;
    flex-shrink: 0;
}

/* Hata/basari mesaji okunabilir + tasma onleme */
.wpcf7-response-output {
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    border-width: 1px !important;
    word-break: break-word;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: #fecaca !important; background: #fef2f2; color: #b91c1c; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #bbf7d0 !important; background: #ecfdf5; color: #047857; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #fecaca !important; background: #fef2f2; color: #b91c1c; }

.wpcf7-not-valid-tip {
    font-size: 12.5px !important;
    margin-top: 4px;
    color: #dc2626 !important;
}

/* Checkbox/radio dokunma alani */
.wpcf7-form .wpcf7-list-item {
    margin: 0 12px 8px 0 !important;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
    width: 18px; height: 18px; min-height: 0;
    margin-right: 6px;
    flex-shrink: 0;
}
.wpcf7-form .wpcf7-list-item-label { font-size: 14px; }

/* ============================================================
   Mobil (≤ 768px) — Bootstrap kolonlarini stack et, padding'i
   sifirla, taşmayi onle. Theme'in dzForm grid'ini de kapsar.
   ============================================================ */
@media (max-width: 768px) {

    /* dzForm + Bootstrap row reset */
    .wpcf7 .dzForm,
    .wpcf7-form .dzForm {
        margin: 0;
        padding: 0;
    }
    .wpcf7-form .row,
    .wpcf7-form .dz-form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }
    .wpcf7-form [class*="col-xs-"],
    .wpcf7-form [class*="col-sm-"],
    .wpcf7-form [class*="col-md-"],
    .wpcf7-form [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 14px !important;
    }
    .wpcf7-form [class*="col-"]:last-child { margin-bottom: 0 !important; }

    /* Floating label korumasi */
    .wpcf7-form .form-floating,
    .wpcf7-form .floating-underline {
        margin-bottom: 14px !important;
        width: 100%;
    }
    .wpcf7-form .form-floating > .form-control,
    .wpcf7-form .form-floating > .wpcf7-form-control {
        height: auto;
        min-height: 56px;
        padding-top: 18px !important;
        padding-bottom: 6px !important;
        font-size: 16px !important;
    }
    .wpcf7-form .form-floating > label {
        font-size: 14px;
        padding: 16px 14px;
    }

    /* Margin/padding'i conservative tut */
    .wpcf7-form input,
    .wpcf7-form textarea,
    .wpcf7-form select {
        padding: 12px 14px !important;
        margin-bottom: 0;
    }

    /* Submit butonu full-width */
    .wpcf7-form button[type="submit"],
    .wpcf7-form input[type="submit"],
    .wpcf7-form .wpcf7-submit {
        width: 100% !important;
        display: block !important;
        margin-top: 6px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        white-space: normal;          /* uzun cevirilerde wrap */
        line-height: 1.3;
    }
    .wpcf7-form button[type="submit"] .right-icon,
    .wpcf7-form button[type="submit"] i {
        margin-left: 6px;
    }

    /* Acceptance / consent metni okunabilir */
    .wpcf7-form .wpcf7-acceptance,
    .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
        margin: 8px 0 !important;
        display: block !important;
    }
    .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Tasmayi onle */
    .wpcf7,
    .wpcf7-form { max-width: 100%; overflow-x: hidden; }

    /* Quform / glf-container baska theme kapsayicilarinda da padding kis */
    .glf-container,
    .glf-container .row { padding-left: 0 !important; padding-right: 0 !important; }

    /* Turnstile widget'i ortala ve overflow'a karsi olcekle */
    .wpcf7-form .cf-turnstile,
    .wpcf7-form [data-sitekey] {
        display: flex; justify-content: center;
        margin: 6px 0;
        max-width: 100%;
    }
}

/* Cok kucuk ekranlar (≤ 380px) */
@media (max-width: 380px) {
    .wpcf7-form input,
    .wpcf7-form textarea,
    .wpcf7-form select {
        padding: 11px 12px !important;
    }
    .wpcf7-form button[type="submit"],
    .wpcf7-form input[type="submit"],
    .wpcf7-form .wpcf7-submit {
        font-size: 14px !important;
        padding: 13px 14px !important;
    }
}

/* RTL ince ayarlar */
body.rtl .wpcf7-form select {
    background-position: left 14px center;
    padding-right: 14px !important;
    padding-left: 38px !important;
}
body.rtl .wpcf7-form .wpcf7-list-item {
    margin: 0 0 8px 12px !important;
}
body.rtl .wpcf7-form .wpcf7-list-item input[type="checkbox"],
body.rtl .wpcf7-form .wpcf7-list-item input[type="radio"] {
    margin-right: 0;
    margin-left: 6px;
}

/* ============================================================
   DATE INPUT — "Tıkla tarih seç" PLACEHOLDER + MOBİL TAŞMA FİX
   ============================================================ */
/* Wrapper: konumlandırma + taşmasın */
.wpcf7-form .wpcf7-form-control-wrap:has(input[type="date"]),
.wpcf7-form-control-wrap[data-name="appointmentDate"] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Custom placeholder — input boşken sahte yazı göster */
.wpcf7-form .wpcf7-form-control-wrap:has(input[type="date"])::before,
.wpcf7-form-control-wrap[data-name="appointmentDate"]::before {
    content: "Tıkla tarih seç";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 48px);
    text-overflow: ellipsis;
    transition: opacity .18s ease;
}
/* Yazı varsa ya da focus'ta gizle */
.wpcf7-form .wpcf7-form-control-wrap:has(input[type="date"]:focus)::before,
.wpcf7-form .wpcf7-form-control-wrap:has(input[type="date"].has-value)::before,
.wpcf7-form-control-wrap[data-name="appointmentDate"]:has(input:focus)::before,
.wpcf7-form-control-wrap[data-name="appointmentDate"]:has(input.has-value)::before,
.wpcf7-form-control-wrap[data-name="appointmentDate"].is-filled::before {
    opacity: 0;
}

/* Native mm/dd/yyyy yazısı — boşken gizle (sadece :invalid + required olduğunda boş sayılır) */
.wpcf7-form input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
.wpcf7-form input[type="date"]:not(.has-value):not(:focus)::-webkit-datetime-edit {
    color: transparent;
    opacity: 0;
}
.wpcf7-form input[type="date"]:focus::-webkit-datetime-edit,
.wpcf7-form input[type="date"].has-value::-webkit-datetime-edit {
    color: inherit;
    opacity: 1;
}
/* Firefox: empty value göstergesini sakla */
.wpcf7-form input[type="date"]:not(:focus):placeholder-shown {
    color: transparent;
}
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="date"].has-value {
    color: inherit;
}

/* Date picker ikonu mobilde her zaman erişilebilir + taşma yok */
.wpcf7-form input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 14px !important;
}
.wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
    padding: 8px;
    margin-right: -4px;
    filter: invert(38%) sepia(60%) saturate(680%) hue-rotate(220deg);
}

/* ============================================================
   MOBİLDE ÇOKLU-ADIM FORMU AÇ — TÜM ALANLARI GÖSTER
   (phoenix wizard'ında iç-scroll yerine sayfa scroll'u)
   ============================================================ */
@media (max-width: 900px) {
    /* Container artık sabit yükseklik dayatmasın */
    #gynolife-phoenix-form .phoenix-steps-container,
    .phoenix-steps-container {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    /* Aktif adım: doğal akışta ve TAM görünür */
    #gynolife-phoenix-form .phoenix-step,
    .phoenix-step {
        position: relative !important;
        inset: auto !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
    /* Pasif adımları DOM'dan kaldır → boş alan oluşmasın */
    #gynolife-phoenix-form .phoenix-step:not(.aktif),
    .phoenix-step:not(.aktif) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #gynolife-phoenix-form .phoenix-step.aktif,
    .phoenix-step.aktif {
        display: flex !important;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: phoenixStepFadeIn .35s ease both;
    }
    @keyframes phoenixStepFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Form'un kendisi page-flow'da: dış kenar boşlukları sade */
    #gynolife-phoenix-form {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Adımlardan sonra navigation butonları görünür kalsın */
    #gynolife-phoenix-form .phoenix-nav,
    .phoenix-nav {
        position: relative !important;
        margin-top: 1.25rem !important;
    }

    /* Date input mobilde ikon dahil tam genişlik */
    .wpcf7-form input[type="date"] {
        padding-right: 8px !important;
    }
    /* Placeholder font-size mobilde da 16px (zoom önleme) */
    .wpcf7-form .wpcf7-form-control-wrap:has(input[type="date"])::before,
    .wpcf7-form-control-wrap[data-name="appointmentDate"]::before {
        font-size: 16px;
        left: 14px;
    }
}

/* ============================================================
   PHOENIX FORM — NAV BUTONLARI EŞİT (Geri / İleri / Gönder)
   Both forms (#gynolife-phoenix-form) — appointment + IVF konsültasyon
   ============================================================ */
#gynolife-phoenix-form .phoenix-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    justify-content: space-between;
    gap: 0.75rem !important;
}
/* CF7 her butonu kendi <p> içine sarar — bu düzeni bozar; <p> şeffafla */
#gynolife-phoenix-form .phoenix-nav > p {
    margin: 0 !important;
    padding: 0 !important;
    display: contents;
}
/* İki buton — TAM AYNI gövde: yükseklik, padding, font, radius, transition */
#gynolife-phoenix-form .phoenix-button-secondary,
#gynolife-phoenix-form .phoenix-button-primary,
#gynolife-phoenix-form .phoenix-geri,
#gynolife-phoenix-form .phoenix-ileri,
#gynolife-phoenix-form .phoenix-gonder {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 1.5rem !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex: 1 1 0 !important;          /* eşit genişlik paylaşımı */
    min-width: 130px !important;
    max-width: none !important;
}
/* Buton içindeki <br> ve metin satırları — yüksekliği bozmasın */
#gynolife-phoenix-form .phoenix-button-secondary br,
#gynolife-phoenix-form .phoenix-button-primary br,
#gynolife-phoenix-form .phoenix-geri br,
#gynolife-phoenix-form .phoenix-ileri br,
#gynolife-phoenix-form .phoenix-gonder br {
    display: none !important;
}
/* Geri butonu varsa solda, yok ya da gizliyse İleri tek başına genişler */
#gynolife-phoenix-form .phoenix-button-secondary[style*="display: none"],
#gynolife-phoenix-form .phoenix-button-secondary[style*="display:none"] {
    display: none !important;
}

@media (max-width: 600px) {
    #gynolife-phoenix-form .phoenix-nav {
        gap: 0.5rem !important;
    }
    #gynolife-phoenix-form .phoenix-button-secondary,
    #gynolife-phoenix-form .phoenix-button-primary,
    #gynolife-phoenix-form .phoenix-geri,
    #gynolife-phoenix-form .phoenix-ileri,
    #gynolife-phoenix-form .phoenix-gonder {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 0.9rem !important;
        font-size: 14px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
}

/* ============================================================
   TURNSTILE — MANTIKLI YERLEŞİM, KAYDIRMA YOK
   ============================================================ */
.phoenix-turnstile,
#gynolife-phoenix-form .phoenix-turnstile,
.wpcf7-form .phoenix-turnstile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 1.25rem !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-height: 78px !important;
    background: var(--gl-surface-2, #fafbff) !important;
    border: 1.5px solid var(--gl-border, #e5e7eb) !important;
    border-radius: 12px !important;
}
/* Turnstile widget kendisi — taşmasın, ortalansın */
.phoenix-turnstile .cf-turnstile,
.phoenix-turnstile [data-sitekey],
.phoenix-turnstile iframe,
#gynolife-phoenix-form .phoenix-turnstile .cf-turnstile,
#gynolife-phoenix-form .phoenix-turnstile [data-sitekey],
#gynolife-phoenix-form .phoenix-turnstile iframe {
    margin: 0 auto !important;
    max-width: 100% !important;
    display: block !important;
}
.phoenix-turnstile iframe,
#gynolife-phoenix-form .phoenix-turnstile iframe {
    width: 100% !important;
    max-width: 300px !important;
    border-radius: 8px !important;
}
/* Mobilde küçük ekrana sığma garantisi */
@media (max-width: 380px) {
    .phoenix-turnstile,
    #gynolife-phoenix-form .phoenix-turnstile {
        padding: 8px !important;
        min-height: 70px !important;
    }
    .phoenix-turnstile .cf-turnstile,
    #gynolife-phoenix-form .phoenix-turnstile .cf-turnstile {
        transform: scale(0.92);
        transform-origin: center;
    }
}

/* ============================================================
   TURNSTILE — SADECE AKTİF STEP 4'TE GÖRÜNSÜN
   Cloudflare ?render=auto sayfa yüklenirken TÜM .cf-turnstile
   div'lerini iframe ile doldurur. Inactive step'lerin display:none
   olması iframe'i gizlemeli ama Cloudflare bazen kendi CSS'iyle
   force-show ediyor → defansif olarak her seviyede kapat.
   ============================================================ */
/* Step container'ı içindeki turnstile — pasif step'te kesin gizli */
#gynolife-phoenix-form .phoenix-step:not(.aktif) .phoenix-turnstile,
#gynolife-phoenix-form .phoenix-step:not(.aktif) .cf-turnstile,
#gynolife-phoenix-form .phoenix-step:not(.aktif) iframe[src*="challenges.cloudflare.com"],
.phoenix-step:not(.aktif) .phoenix-turnstile,
.phoenix-step:not(.aktif) .cf-turnstile,
.phoenix-step:not(.aktif) iframe[src*="challenges.cloudflare.com"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    clip: rect(0,0,0,0) !important;
}

/* Call popup gizliyken içindeki turnstile da gizli kalsın */
.gl-call-popup[hidden] .gl-call-turnstile,
.gl-call-popup[hidden] .cf-turnstile,
.gl-call-popup[hidden] iframe[src*="challenges.cloudflare.com"],
.gl-call-popup:not(.is-open) .gl-call-turnstile,
.gl-call-popup:not(.is-open) .cf-turnstile,
.gl-call-popup:not(.is-open) iframe[src*="challenges.cloudflare.com"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Cloudflare bazen body'ye direkt iframe yerleştiriyor (interstitial)
   — sayfanın ana akışında olmadığı sürece gizle */
body > iframe[src*="challenges.cloudflare.com"]:not([title]),
body > iframe[src*="turnstile/v0"]:not([title]) {
    display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpcf7-form * { transition: none !important; animation: none !important; }
}

/* Print: form gizle */
@media print {
    .wpcf7 { display: none; }
}