/* ============================================================
   Puerto Phone Input — Custom Dropdown with Country Flags
   ------------------------------------------------------------
   Brand renkleri: cream, green-deep, terracotta, sand
   Bağımlılık: flag-icons CSS (head'de yüklü olmalı)

   Kullanım:
   <div class="ppc-phone" data-input-id="telefon"
        data-pp-phone-init="true"
        data-initial-value="+90 5326980929"></div>
   <input type="tel" id="telefon" ...>
   ============================================================ */

/* Container — flex (trigger + input yan yana) */
.ppc-phone {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

/* Trigger button (kapalı durum) */
.ppc-phone .ppc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 44px;
  padding: 0 12px 0 14px;
  background: var(--cream, #f5f0e8);
  border: 1px solid rgba(29, 53, 32, 0.12);
  border-right: none;
  border-radius: 2px 0 0 2px;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px;
  color: var(--green-deep, #1d3520);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.ppc-phone .ppc-trigger:hover {
  background: var(--cream-light, #f8f2e3);
}
.ppc-phone .ppc-trigger:focus,
.ppc-phone .ppc-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--terracotta, #b8542f);
  background: var(--cream-light, #f8f2e3);
  z-index: 2;
}

/* Bayrak ikonu — flag-icons "fi" class'ı normalde inline. Trigger'da biraz büyütüyoruz */
.ppc-phone .ppc-flag {
  display: inline-block;
  width: 22px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 2px;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 0 1px rgba(29, 53, 32, 0.08);
}

/* Trigger içinde +90 kodu */
.ppc-phone .ppc-code {
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Alt ok */
.ppc-phone .ppc-arrow {
  font-size: 10px;
  margin-left: 2px;
  color: var(--green-soft, #5a6f54);
  transition: transform 0.2s;
}
.ppc-phone .ppc-trigger[aria-expanded="true"] .ppc-arrow {
  transform: rotate(180deg);
}

/* Açılır panel */
.ppc-phone .ppc-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  width: 320px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid rgba(29, 53, 32, 0.12);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29, 53, 32, 0.12), 0 2px 6px rgba(29, 53, 32, 0.06);
  overflow: hidden;
}

/* Search input bölümü */
.ppc-phone .ppc-search-wrap {
  padding: 10px;
  border-bottom: 1px solid rgba(29, 53, 32, 0.08);
  background: var(--cream-light, #f8f2e3);
}
.ppc-phone .ppc-search {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  color: var(--green-deep, #1d3520);
  background: #fff;
  border: 1px solid rgba(29, 53, 32, 0.16);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
}
.ppc-phone .ppc-search:focus {
  border-color: var(--terracotta, #b8542f);
}
.ppc-phone .ppc-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Options listesi — scroll'lu */
.ppc-phone .ppc-options {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Tek option satırı */
.ppc-phone .ppc-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--green-deep, #1d3520);
  user-select: none;
  transition: background 0.12s;
}
.ppc-phone .ppc-opt:hover,
.ppc-phone .ppc-opt[aria-selected="true"] {
  background: var(--cream-light, #f8f2e3);
}
.ppc-phone .ppc-opt-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppc-phone .ppc-opt-code {
  flex: 0 0 auto;
  color: var(--green-soft, #5a6f54);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Popular ile diğerleri arasındaki ince ayraç çizgisi */
.ppc-phone .ppc-sep {
  height: 1px;
  margin: 6px 14px;
  background: rgba(29, 53, 32, 0.10);
  list-style: none;
}

/* Sonuç yok mesajı */
.ppc-phone .ppc-no-results {
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--green-soft, #5a6f54);
  font-style: italic;
}

/* Scrollbar — sade, brand-uyumlu */
.ppc-phone .ppc-options::-webkit-scrollbar {
  width: 8px;
}
.ppc-phone .ppc-options::-webkit-scrollbar-track {
  background: transparent;
}
.ppc-phone .ppc-options::-webkit-scrollbar-thumb {
  background: rgba(29, 53, 32, 0.15);
  border-radius: 4px;
}
.ppc-phone .ppc-options::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 53, 32, 0.30);
}

/* ============================================================
   Telefon container wrapper — Trigger + Input yan yana
   Kullanıcı .ppc-phone-row class'ı içine ppc-phone + tel input koyar
   ============================================================ */
.ppc-phone-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.ppc-phone-row .ppc-phone {
  flex: 0 0 auto;
}
.ppc-phone-row input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0 2px 2px 0;
}

/* ============================================================
   Mobile responsive — küçük ekranda panel daha geniş, trigger sade
   ============================================================ */
@media (max-width: 480px) {
  .ppc-phone .ppc-panel {
    width: 280px;
    left: 0;
  }
  .ppc-phone .ppc-options {
    max-height: 260px;
  }
}