/* -- 29.09.2026 mk&claude-Opus-5.5 — Bayraklı telefon ülke kodu seçici (ai/phone-country-code FAZ 5, Scripts/Common/PhoneCountryInput.js) */

.pp-cc-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 3.25rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pp-cc-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: var(--bs-secondary-bg, #efefef);
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — koyu tema: BS 5.1'de --bs-secondary-bg yok, yukarıdaki açık fallback kalıyordu.
   Renkler Vuexy'nin koyu .input-group-text'i ile aynı. */
.dark-layout .pp-cc-btn:disabled {
    background-color: #283046;
    color: #B4B7BD;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — kenarlık: düğme btn-outline-secondary'nin koyu grisini (#82868b) taşıyordu,
   yanındaki input/select'in tonu (açık #d8d6de, koyu #404656) ve grup odaklanınca aldıkları birincil renk değil.
   !important: bundle-main.css ".btn-outline-secondary { border: … !important }" diğer her kuralı eziyor. */
.input-group .pp-cc-btn.btn-outline-secondary {
    border-color: #d8d6de !important;
}

.dark-layout .input-group .pp-cc-btn.btn-outline-secondary {
    border-color: #404656 !important;
}

.input-group:focus-within .pp-cc-btn.btn-outline-secondary {
    border-color: var(--bs-primary, #7367f0) !important;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — "merge" görünümü (Vuexy input-group-merge deseni): düğmenin sağ, numara kutusunun
   sol kenarlığı kalkar → bayrak + kod numara kutusunun İÇİNDEymiş gibi durur. Odakta :focus-within ikisini birlikte
   boyar. Tıklanabilir olduğu ▾ oku ve hover zemini ile belli edilir; kilitliyken gri blok yerine soluk metin, ok yok. */
.input-group .pp-cc-btn.btn-outline-secondary {
    border-right-width: 0 !important;
    background-color: transparent;
    color: #6e6b7b;
    padding-right: .4rem;
}

.dark-layout .input-group .pp-cc-btn.btn-outline-secondary {
    color: #b4b7bd;
}

.input-group .pp-cc-btn ~ .pp-cc-phone {
    border-left-width: 0;
    padding-left: .35rem;
}

.input-group .pp-cc-btn.btn-outline-secondary:not(:disabled):hover,
.input-group .pp-cc-btn.btn-outline-secondary:not(:disabled):focus-visible {
    background-color: var(--primary-hover, rgba(115, 103, 240, .08));
    color: var(--bs-primary, #7367f0);
}

.input-group .pp-cc-btn:not(:disabled)::after {
    content: "";
    border-top: .3em solid currentColor;
    border-left: .28em solid transparent;
    border-right: .28em solid transparent;
    opacity: .55;
}

.input-group .pp-cc-btn.btn-outline-secondary:disabled,
.dark-layout .input-group .pp-cc-btn.btn-outline-secondary:disabled {
    background-color: transparent;
    cursor: default;
    opacity: .75;
}

/* Vuexy dışı sayfalar (demo/açılış: <html>'de Vuexy layout'larının data-textdirection'ı yok): oradaki input'lar
   rgba(0,0,0,.08) kenarlıklı ve odakta renk değiştirmiyor → düğme de aynı tonda kalır, mora dönmez. */
html:not([data-textdirection]) .input-group .pp-cc-btn.btn-outline-secondary,
html:not([data-textdirection]) .input-group:focus-within .pp-cc-btn.btn-outline-secondary {
    border-color: rgba(0, 0, 0, .08) !important;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — Tahmin (seçici boş, sunucu "kayıtta bu kod yazılır" diyor, ör. "0546…" → Türkiye):
   bayrak + kod soluk; kullanıcı seçmedikçe kesinleşmez. Hover'da tam görünür. */
.pp-cc-btn.pp-cc-suggest .pp-cc-flag,
.pp-cc-btn.pp-cc-suggest .pp-cc-code {
    opacity: .45;
}

.pp-cc-btn.pp-cc-suggest:hover .pp-cc-flag,
.pp-cc-btn.pp-cc-suggest:hover .pp-cc-code {
    opacity: 1;
}

/* Kilitliyken kod numaranın kendisinde yazılı ("+44 +44 7400…" tekrarı olmasın): yalnız bayrak kalır, kod title'da. */
.input-group.pp-cc-locked .pp-cc-btn .pp-cc-code {
    display: none;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — dar ekranda numara kutusu ~45px'e iniyordu: kod yazısı gizlenir, bayrak kalır
   (kod title'da ve listede görünür). */
@media (max-width: 575.98px) {
    .pp-cc-btn {
        min-width: 0;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .pp-cc-btn .pp-cc-code {
        display: none;
    }
}

.pp-cc-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.333em;
}

.pp-cc-flag .fi {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.pp-cc-code:empty {
    display: none;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — transform: Vuexy (bootstrap-extended) .dropdown-menu'yü scale(1,0) ile gizler,
   yalnız ".show > .dropdown-menu" açar. Panel body'ye eklendiği için ebeveynde .show yok → yükseklik 0 kalıyordu. */
.pp-cc-panel {
    z-index: 1090;
    width: 18rem;
    max-width: calc(100vw - 16px);
    padding-top: .5rem;
    transform: none;
}

/* -- 29.09.2026 mk&claude-Opus-5.5 — overflow-x: uzun ülke adları yatay kaydırma çubuğu çıkarıyordu. */
.pp-cc-list {
    max-height: 16rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.pp-cc-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pp-cc-name {
    flex: 1 1 auto;
    min-width: 0; /* -- 29.09.2026 mk&claude-Opus-5.5 — flex öğesi ellipsis'e izin versin */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-cc-dial {
    color: var(--bs-secondary-color, #6e6b7b);
    font-variant-numeric: tabular-nums;
}