/*
 * WEB-11553: LP formlarında inline (anlık) doğrulama uyarılarının konumu.
 * Sorun: uyarı alanın ALTINDA/sağında gösterilince form uzuyor/taşıyor, sayfa yapısı bozuluyor.
 * Çözüm: uyarıyı alanın kırmızı ÜST BORDER'ının üzerine, SAĞA yaslı yaz (border'ı kesen küçük
 * etiket gibi). Absolute konumlandırma form yüksekliğini artırmaz -> sayfa uzamaz/taşmaz.
 * Ortak form yapısına (.hero-form-input-wrapper + span.error / label.error) uygulanır.
 * RenderHtmlView.cshtml üzerinden tüm LP'lere merkezi enjekte edilir.
 */
.hero-form-input-wrapper {
    position: relative;
}

.hero-form-input-wrapper span.error,
.hero-form-input-wrapper label.error {
    position: absolute !important;
    top: 0 !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    max-width: calc(100% - 28px);
    font-size: 8px !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    color: #C10230 !important;
    background: #ffffff !important;
    border-radius: 3px;
    pointer-events: none;
    z-index: 4;
}

/*
 * WEB-11553: Etiketi ÜSTTE olan form alanlarında (ör. footer formları — wrapper flex-column
 * olup ".hero-form-input-wrapper__placeholder" etiketi input'un üstünde) hata mesajı, wrapper'ın
 * en üstü = ETİKET hizasına düşüyordu. Bunun yerine INPUT'un üst kenarına hizalanır: etiket alanı
 * (satır 21px + margin-bottom 10px + flex gap 5px = ~36px) kadar aşağı alınır. Etiketsiz (hero)
 * formlarda bu kural eşleşmez, davranış değişmez.
 */
.hero-form-input-wrapper:has(> .hero-form-input-wrapper__placeholder) span.error,
.hero-form-input-wrapper:has(> .hero-form-input-wrapper__placeholder) label.error {
    top: 36px !important;
}

/* Onay kutularında (KVKK/ETK) metin uyarısı GÖSTERİLMEZ; bunun yerine geçersizken
   checkbox kırmızı çerçeve (outline) + etiket yazısı kırmızı olur. */
.hero-form-input-wrapper.checkbox span.error,
.hero-form-input-wrapper.checkbox label.error {
    display: none !important;
}
.hero-form-input-wrapper.checkbox input.error {
    outline: 1.5px solid #C10230 !important;
    outline-offset: 1px;
    accent-color: #C10230;
}
.hero-form-input-wrapper.checkbox input.error ~ label,
.hero-form-input-wrapper.checkbox input.error ~ label * {
    color: #C10230 !important;
}
/* Footer formları koyu (bordo) zeminde; KVKK/ETK onay metni beyaz. Yukarıdaki kırmızı
   hata rengi yalnızca açık zeminli hero formları içindir. Footer'da metin beyaz (bold) kalır. */
.footer-form__gdpr-wrapper .hero-form-input-wrapper.checkbox input.error ~ label,
.footer-form__gdpr-wrapper .hero-form-input-wrapper.checkbox input.error ~ label * {
    color: #fff !important;
    font-weight: 700 !important;
}

/*
 * WEB-11553: "Daha fazla / Kapat" (geçerli hastaneler) butonu — birçok LP'de ortak.
 * Genişletilince JS bordo zemin ekliyor ama yazı gri kalıp okunmuyordu.
 * Her durumda bordo zemin + beyaz yazı (okunur, on-brand).
 */
.gecerli-hastaneler-section__button,
.gecerli-hastaneler-section__button:link,
.gecerli-hastaneler-section__button:visited,
.gecerli-hastaneler-section__button:hover,
.gecerli-hastaneler-section__button:focus {
    background-color: #C10230 !important;
    border-color: #C10230 !important;
    color: #ffffff !important;
}

/*
 * WEB-11553: "Sizi Arayalım" alt sabit barı (.we-call-you) mobilde içeriği ortalanır.
 * İç kap (.wcy-container) inline-flex olduğundan text-align:center onu yatayda ortalar.
 */
@media (max-width: 767px) {
    .we-call-you {
        text-align: center !important;
    }

    /*
     * WEB-11553: Mobilde ".ayricaliklar-section" üstündeki gereksiz büyük boşluk giderilir.
     * Masaüstünde form (.hero-form-container) bu bölümün üstüne bindiği (overlap) için
     * padding-top ile yer ayrılıyor; mobilde form normal akışta (position:relative)
     * olduğundan bu rezervasyon koca bir boş alan bırakıyor -> normal değere indir.
     */
    .ayricaliklar-section {
        padding-top: 40px !important;
    }
}

/*
 * WEB-11553: Menopoz LP — masaüstünde form (.hero-form-container, position:absolute)
 * "MEMORIAL MENOPOZ PAKETLERİMİZ" başlığının üzerine biniyordu. Bölümün üst boşluğunu
 * artırarak (100px -> 200px) form ile başlık arasında yeterli mesafe bırakılır.
 * SADECE menopoz'a özgü ".mp-packages-section" sınıfına uygulanır -> aynı ".ayricaliklar-section"
 * sınıfını paylaşan diğer LP'ler (kbb, ikinci-muayenede vb.) ETKİLENMEZ.
 */
@media (min-width: 768px) {
    .ayricaliklar-section.mp-packages-section {
        padding-top: 200px !important;
    }
}