.drsarj-otp-wrap,
.drsarj-otp-wrap * { box-sizing: border-box; }

.drsarj-otp-wrap{
  border: 1px solid #e5e7eb;
  padding: 16px;
  border-radius: 10px;
  margin: 18px 0;
  /* Form içindeki boş zemin (kırmızı ile işaretlenen alanlar) */
  background: #f3f4f6; /* açık gri */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.drsarj-otp-title{ margin: 0 0 12px 0; }

.drsarj-otp-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tema/ek CSS müdahalelerinde (özellikle select alanının tam satıra zorlanması) e-posta alanının aşağı kaymaması için
   cihaz + e-posta alanlarını masaüstünde kesin olarak 2 sütuna sabitle.
*/
@media (min-width: 721px){
  .drsarj-otp-grid .drsarj-otp-field-device{ grid-column: 1 / 2 !important; }
  .drsarj-otp-grid .drsarj-otp-field-email{ grid-column: 2 / 3 !important; }
}

.drsarj-otp-form{ margin:0 !important; }

/* Her temada tutarlı görünüm: field'ları dikey kolon ve sabit boşlukla düzenle */
.drsarj-otp-field{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}
.drsarj-otp-field-full{
  grid-column: 1 / -1;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}

.drsarj-otp-field label{
  display:block;
  font-weight:600;
  margin:0 !important;
  padding:0 !important;
  line-height:1.25;
}

.drsarj-otp-field input,
.drsarj-otp-field textarea,
.drsarj-otp-field select{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:12px 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111827 !important;
  /* Tema stillerinin (özellikle select margin/padding) form hizasını bozmaması için */
  margin:0 !important;
  display:block;
  font-size:16px;
  line-height:1.25;
  box-shadow:none !important;
}

/* Input ve select kutularını (özellikle mobilde) aynı yükseklikte tut */
.drsarj-otp-field input,
.drsarj-otp-field select{
  height:48px !important;
  min-height:48px !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

/* Şarj istasyonu marka seçimi: "Elle gir" alanı select'in altında küçük bir boşlukla açılsın */
.drsarj-otp-field .drsarj-device-manual{ margin-top:0 !important; }

.drsarj-otp-field select:disabled{
  background:#f3f4f6;
  color:#6b7280;
}

.drsarj-otp-actions{
  margin-top:0 !important;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.drsarj-otp-send,
.drsarj-otp-verify,
.drsarj-otp-resend,
.drsarj-otp-back{
  position:relative;
  padding:10px 14px;
  border:1px solid #111827;
  border-radius:10px;
  background:#111827;
  color:#fff;
  cursor:pointer;
}

.drsarj-otp-resend,
.drsarj-otp-back{
  background:transparent;
  color:#111827;
}

.drsarj-otp-alert{
  padding:10px 12px;
  border-radius:8px;
  margin:10px 0 14px 0;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.drsarj-otp-alert.is-error{ border-color:#fecaca; background:#fff1f2; }
.drsarj-otp-alert.is-ok{ border-color:#bbf7d0; background:#f0fdf4; }
.drsarj-otp-alert.is-info{ border-color:#bfdbfe; background:#eff6ff; }

.drsarj-otp-code-row{ display:flex; gap:10px; align-items:center; }
.drsarj-otp-code{
  flex:1 1 auto;
  min-width:0;
  padding:10px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
}

.drsarj-otp-successbox{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  padding:14px;
  border-radius:10px;
}

/* Onay sonrası kargo adresi */
.drsarj-otp-successbox .drsarj-cargo-address{
  margin:8px 0 10px;
  line-height:1.45;
}

.drsarj-otp-hp{ display:none; }

/* Loader */
@keyframes drsarjSpin{
  0%{ transform: translateY(-50%) rotate(0deg); }
  100%{ transform: translateY(-50%) rotate(360deg); }
}
.drsarj-otp-send.is-loading,
.drsarj-otp-verify.is-loading{
  opacity:.9;
  cursor:not-allowed;
  padding-right:42px;
}
.drsarj-otp-send.is-loading::after,
.drsarj-otp-verify.is-loading::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  animation: drsarjSpin .8s linear infinite;
}

@media (max-width: 720px){
  .drsarj-otp-grid{ grid-template-columns: minmax(0,1fr); }
  .drsarj-otp-code-row{ flex-direction:column; align-items:stretch; }
}

/* Not: Label yüksekliklerini sabitlemek bazı temalarda gereksiz boşluk oluşturabiliyor.
   Bu nedenle label yüksekliği zorlanmaz; hizalama grid + field gap ile korunur. */

/* Adres textarea: 2 satır varsayılan yükseklik (masaüstü + mobil) */
.drsarj-otp-field textarea[name="address"]{
  /* diğer alanlarla uyumlu padding */
  padding: 10px 12px !important;
  line-height: 1.4 !important;

  /* 2 satır görünüm: (2 * line-height) + (üst/alt padding) */
  height: calc(2 * 1.4em + 20px) !important;
  min-height: calc(2 * 1.4em + 20px) !important;
  overflow-y: auto;

  /* kullanıcı isterse büyütebilsin */
  resize: vertical;
  -webkit-appearance: none;
}

/* ===================== */
/* İNCE HİZALAMA (PX)    */
/* ===================== */
/* Bazı temalarda aşağıdaki elemanlar yukarıda kalabiliyor.
   Kullanıcı ölçümlerine göre piksel bazlı düzeltme uygulanır. */

   @media (max-width: 720px){
  .drsarj-otp-field-email > label{
    margin-top: -40px !important;  /* yukarı almak için eksi, aşağı için artı */
  }
}

/* “Marka seçiniz” select kutusu 10px yukarı kalıyor */
.drsarj-otp-field-device select#drsarj-device-select{
  margin-top: -18px !important;
}

/* Adres alanı: etiket 16px, textarea 14px yukarı kalıyor */
.drsarj-otp-field-address label{
  margin-top: -10px !important;
}
.drsarj-otp-field-address textarea[name="address"]{
  margin-top: -24px !important;
}

/* SADECE PC: Adres alanını yukarı taşı (mobil aynı kalsın) */
@media (min-width: 721px){
  .drsarj-otp-field-address label{
    margin-top: -50px !important;   /* PC’de yazıyı 16px yukarı alır (16 → 0) */
  }
  .drsarj-otp-field-address textarea[name="address"]{
    margin-top: -40px !important;   /* PC’de kutuyu 14px yukarı alır (14 → 0) */
  }
}


/* ===================== */
/* EK2/EK3 ONAY (MÜŞTERİ) */
/* ===================== */

.drsarj-ek23-wrap,
.drsarj-ek23-wrap * { box-sizing:border-box; }

.drsarj-ek23-wrap{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  margin:18px 0;
  /* EK2/EK3 bölümü için aynı açık gri zemin */
  background:#f3f4f6;
}

.drsarj-ek23-title{ margin:0 0 10px 0; }

.drsarj-ek23-alert{
  display:none;
  padding:10px 12px;
  border-radius:8px;
  margin:10px 0 14px 0;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.drsarj-ek23-alert.is-error{ display:block; border-color:#fecaca; background:#fff1f2; }
.drsarj-ek23-alert.is-ok{ display:block; border-color:#bbf7d0; background:#f0fdf4; }
.drsarj-ek23-alert.is-info{ display:block; border-color:#bfdbfe; background:#eff6ff; }

.drsarj-ek23-meta{ margin:0 0 12px 0; color:#111827; }

.drsarj-ek23-files{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}

.drsarj-ek23-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
  min-width:0;
}
.drsarj-ek23-card h4{ margin:0 0 10px 0; }

.drsarj-ek23-img{
  width:100%;
  max-width:100%;
  border-radius:10px;
  border:1px solid #e5e7eb;
}

.drsarj-ek23-pdf{
  width:100%;
  height:320px;
  border:1px solid #e5e7eb;
  border-radius:10px;
}


.drsarj-ek23-video{
  width: 100%;
  height: 320px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #000;
}
.drsarj-ek23-empty{
  color:#6b7280;
  padding:10px 0;
}

.drsarj-ek23-note{
  margin-top:8px;
  color:#374151;
  font-size:13px;
}

.drsarj-ek23-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.drsarj-ek23-link{
  display:inline-block;
  padding:8px 10px;
  border:1px solid #111827;
  border-radius:10px;
  text-decoration:none;
  color:#111827;
}

.drsarj-ek23-consent{
  margin-top:14px;
  padding:10px 12px;
  border:1px dashed #d1d5db;
  border-radius:10px;
  background:#f9fafb;
}
.drsarj-ek23-consent-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:600;
  color:#111827;
}
.drsarj-ek23-consent-row input{
  margin-top:3px;
  transform:scale(1.15);
}

.drsarj-ek23-row{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.drsarj-ek23-code{
  flex:1 1 auto;
  min-width:0;
  padding:10px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
}
.drsarj-ek23-approve{
  position:relative;
  padding:10px 14px;
  border:1px solid #111827;
  border-radius:10px;
  background:#111827;
  color:#fff;
  cursor:pointer;
}

.drsarj-ek23-approve.is-loading{
  opacity:.9;
  cursor:not-allowed;
  padding-right:42px;
}
.drsarj-ek23-approve.is-loading::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  animation: drsarjSpin .8s linear infinite;
}

.drsarj-ek23-success{
  margin-top:12px;
  display:none;
}
.drsarj-ek23-successbox{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  padding:14px;
  border-radius:10px;
}

@media (max-width: 900px){
  .drsarj-ek23-files{ grid-template-columns: minmax(0,1fr); }
  .drsarj-ek23-row{ flex-direction:column; align-items:stretch; }
}

/* EK2/EK3 müşteri onayı - checkbox daha büyük ve tıklaması kolay */
.drsarj-ek23-consent-row input[type="checkbox"]{
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  transform: none;          /* iOS/Android'de daha tutarlı */
  accent-color: #111827;    /* isteğe bağlı */
}

/* Mobilde biraz daha da büyüt */
@media (max-width: 600px){
  .drsarj-ek23-consent-row input[type="checkbox"]{
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .drsarj-ek23-consent-row{ gap: 12px; }
}


/* EK2 çoklu fotoğraf / EK3 çoklu video düzeni */
.drsarj-ek23-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}

.drsarj-ek23-video-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  margin-top:12px;
}

.drsarj-ek23-item{ min-width:0; }

.drsarj-ek23-gallery .drsarj-ek23-img{
  height:160px;
  object-fit:cover;
}

.drsarj-ek23-video-sm{
  height:220px;
}


/* Arıza tanımı textarea: 3 satır varsayılan yükseklik */
.drsarj-otp-field textarea[name="fault_desc"]{
  padding: 10px 12px !important;
  line-height: 1.4 !important;
  height: calc(3 * 1.4em + 20px) !important;
  min-height: calc(3 * 1.4em + 20px) !important;
  overflow-y: auto;
  resize: vertical;
  -webkit-appearance: none;
}