/* =========================================================
   FORYA • ÖDEME SAYFASI FINAL CSS v2 (TEMİZ)
   - Pills (radio)
   - Input valid/invalid (red/green)
   - Login button valid (green) + ORTALI
   - "Parolamı unuttum" modern
   - Password toggle button (FontAwesome)
   - Google butonu YOK
   NOTE: Only active when html has class: forya-odeme-page
========================================================= */

/* ---------- Pills (radio) ---------- */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 10px;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options .radio{
  margin:0 !important;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options label:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options label.forya-pill-active{
  background:#0f0f10;
  color:#fff;
  border-color:#0f0f10;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

/* ---------- Input states ---------- */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.forya-invalid{
  border-color:#ef4444 !important;
  background:#fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.10) !important;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.forya-valid{
  border-color:#22c55e !important;
  background:#f3fff7 !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.10) !important;
}

/* ---------- Login button valid ---------- */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .forya-login-valid{
  background:#22c55e !important;
  border-color:#22c55e !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(34,197,94,.25) !important;
}

html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .forya-login-valid:hover{
  background:#16a34a !important;
  border-color:#16a34a !important;
}

/* ---------- Oturum Aç butonu ORTALI ---------- */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form button.btn-primary,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.btn-primary,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form button.btn.btn-primary,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.btn.btn-primary{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* bazı temalarda buton sağa itiliyor -> bunları da ortala */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .buttons,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .pull-right,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .text-right{
  text-align:center !important;
  float:none !important;
}

/* ---------- Parolamı Unuttum ---------- */
html.forya-odeme-page .quick-checkout-wrapper a[href*="sifremi-unuttum"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#6b7280;
  text-decoration:none;
  margin-top:10px;
  transition:all .25s ease;
}

html.forya-odeme-page .quick-checkout-wrapper a[href*="sifremi-unuttum"]::before{
  content:"\f023"; /* fa-lock */
  font-family:"FontAwesome";
  font-size:13px;
}

html.forya-odeme-page .quick-checkout-wrapper a[href*="sifremi-unuttum"]:hover{
  color:#000;
  transform:translateX(4px);
}

/* ---------- Password Toggle ---------- */
html.forya-odeme-page .forya-pass-wrap{
  position:relative;
}

html.forya-odeme-page .forya-pass-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:12.5px;
  font-weight:700;
  color:#6b7280;
  cursor:pointer;
  user-select:none;

  padding:4px 8px;
  border-radius:999px;
  background:#f3f4f6;
  transition: all .2s ease;
}

html.forya-odeme-page .forya-pass-toggle:hover{
  color:#111;
  background:#e5e7eb;
}

html.forya-odeme-page .forya-pass-toggle i{
  font-family:"FontAwesome";
  font-style:normal;
  font-weight:normal;
  line-height:1;
}

@media (max-width: 480px){
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options{ gap:8px; }
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-options label{
    padding:10px 12px;
    font-size:12.5px;
  }
}

/* =========================================================
   FORYA • Login "Oturum Aç" butonu (DESKTOP FIX)
   - Sağda küçük kalmasın
   - Ortalansın + istersen daha geniş olsun
========================================================= */

/* 1) Butonun sağa itilmesini kır (kapsayıcıları ortala) */
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .pull-right,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .text-right,
html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form .buttons{
  float:none !important;
  text-align:center !important;
}

/* 2) Butonu ortala + desktop’ta daha “tok” dursun */
@media (min-width: 768px){
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form button.btn-primary,
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.btn-primary,
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form button.btn.btn-primary,
  html.forya-odeme-page .quick-checkout-wrapper .checkout-section.section-login .login-form input.btn.btn-primary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    /* genişlik ayarı (iki seçenek) */
    min-width: 240px !important;     /* küçük kalmasın */
    padding: 12px 22px !important;   /* daha premium */

    margin: 10px auto 0 !important;
    float:none !important;
  }
}

/* =========================================================
   FORYA • Oturum Aç Butonu Desktop Ortala (KESİN ÇÖZÜM)
========================================================= */

/* Buton containerını ortala */
html.forya-odeme-page 
.quick-checkout-wrapper 
.checkout-section.section-login 
.login-form .buttons,
html.forya-odeme-page 
.quick-checkout-wrapper 
.checkout-section.section-login 
.login-form .pull-right,
html.forya-odeme-page 
.quick-checkout-wrapper 
.checkout-section.section-login 
.login-form .text-right{

  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  float:none !important;
  width:100% !important;
}

/* Buton */
html.forya-odeme-page 
.quick-checkout-wrapper 
.checkout-section.section-login 
.login-form button.btn-primary,
html.forya-odeme-page 
.quick-checkout-wrapper 
.checkout-section.section-login 
.login-form input.btn-primary{

  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;

  width:100% !important;
  max-width:420px !important;

  margin:10px auto !important;
  float:none !important;
}

/* =========================================================
   FORYA • Login Disabled Warning (Hover + Mobile Tap)
   - input/button fark etmez (wrap üzerinden tooltip)
========================================================= */

html.forya-odeme-page .forya-login-btn-wrap{
  position:relative;
  display:inline-block;
  width:100%;
  max-width:420px; /* mevcut buton max ile uyumlu */
}

/* Kilitli görünüm */
html.forya-odeme-page .forya-login-btn-wrap.forya-login-disabled{
  opacity:.72;
}

html.forya-odeme-page .forya-login-btn-wrap.forya-login-disabled button,
html.forya-odeme-page .forya-login-btn-wrap.forya-login-disabled input{
  cursor:not-allowed !important;
}

/* Tooltip */
html.forya-odeme-page .forya-login-btn-wrap::after{
  content:"Eksik Bilgileri Lütfen Doldurunuz Yada KAYIT/MİSAFİR Sayfasından Devam Edin";
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);

  width:max-content;
  max-width:320px;

  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.25;

  padding:10px 12px;
  border-radius:10px;
  text-align:center;

  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:9999;
}

/* Desktop hover ile göster */
@media (hover:hover){
  html.forya-odeme-page .forya-login-btn-wrap.forya-login-disabled:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

/* Mobil dokunma ile 2 sn göster (JS class ekler) */
html.forya-odeme-page .forya-login-btn-wrap.forya-show-warning::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}