/**
 * TDP Geo — styles for country selects, flag badges and phone inputs.
 * (Client item #38 + Edits-3: the flag must render in every browser,
 * including Chrome on Windows where emoji flags show as letters — so the
 * badge shows the emoji flag AND the ISO-3166 alpha-2 code chip.)
 *
 * Round 15: .tdp-geo-badge-phone — the same badge shown next to the phone
 * label/dial code (client asked for the flag next to the country select
 * AND the phone field).
 *
 * Round 18: .tdp-geo-flag now carries an emoji flag (16px) + the ISO code
 * chip; the country select options are prefixed with the emoji flag by
 * tdp-geo.js.
 *
 * Round 20 — REAL FLAG IMAGES EVERYWHERE (client: "country flags are not
 * displayed in the desktop version"): Windows simply has no flag glyphs
 * in its emoji fonts, so the emoji approach could never work on desktop.
 * Flags are now self-hosted images (public/images/flags/{ISO2}.png) and the
 * country select is enhanced into a custom .tdp-geo-dd widget (button +
 * searchable panel) because native <option>s cannot display images.
 * Styles for both live below.
 *
 * @package Teach_Demy_Plus
 * @since 2.4.0
 */

.tdp-geo-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 34px;
        padding: 2px 6px;
        margin-right: 6px;
        border-radius: 6px;
        background: linear-gradient(135deg, #06272f, #087d72);
        color: #ffffff;
        line-height: 1.4;
        vertical-align: middle;
        box-shadow: 0 2px 6px rgba(6, 39, 47, 0.18);
}

/* Round 18: the emoji flag glyph inside the badge chip. */
.tdp-geo-flag-emoji {
        font-size: 15px;
        line-height: 1;
}

/* Round 20: the real flag IMAGE inside the badge chip (replaces the emoji
   on every OS — this is the only form of flag Windows desktops can show).
   The onerror handler in tdp-geo.js swaps it back to the emoji span if
   the image is ever missing. */
.tdp-geo-flag-img {
        display: inline-block;
        width: 22px;
        height: 15px;
        object-fit: cover;
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
        vertical-align: middle;
}

/* =========================================================
   Round 20 — CUSTOM COUNTRY DROPDOWN (real flag images)
   Built by tdp-geo.js over the native <select> (which stays in the
   DOM as the hidden value holder). The widget mirrors the standard
   TDP form look (same border/radius/height as select.tdp-geo-country)
   so it blends with the surrounding form fields.
   ========================================================= */
.tdp-geo-dd {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        font-family: inherit;
}

/* The hidden native select keeps its name/value for form submission. */
select.tdp-geo-native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
}

.tdp-geo-dd-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border: 1px solid #dce9e7;
        border-radius: 10px;
        padding: 10px 12px;
        background: #ffffff;
        color: #092b36;
        font-size: 13px;
        font-family: inherit;
        line-height: 1.4;
        min-height: 42px;
        cursor: pointer;
        text-align: left;
        transition: border-color .15s ease, box-shadow .15s ease;
}
.tdp-geo-dd-btn:hover { border-color: #9fd6c6; }
.tdp-geo-dd-btn:focus {
        outline: none;
        border-color: #087d72;
        box-shadow: 0 0 0 3px rgba(8, 125, 114, 0.15);
}
.tdp-geo-dd-btn .tdp-geo-flag-img { width: 26px; height: 18px; flex-shrink: 0; }
.tdp-geo-dd-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
}
.tdp-geo-dd-ph { flex: 1; color: #8ba0a7; font-weight: 500; }
.tdp-geo-dd-code {
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .4px;
        color: #087d72;
        background: rgba(8, 125, 114, 0.09);
        border-radius: 999px;
        padding: 3px 8px;
}
.tdp-geo-dd-chev {
        flex-shrink: 0;
        color: #087d72;
        transition: transform .18s ease;
}
.tdp-geo-dd.is-open .tdp-geo-dd-chev { transform: rotate(180deg); }

/* The dropdown panel (search + scrollable flag list). */
.tdp-geo-dd-panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 99999;
        background: #ffffff;
        border: 1px solid #dce9e7;
        border-radius: 12px;
        box-shadow: 0 18px 44px rgba(6, 39, 47, 0.16);
        overflow: hidden;
        animation: tdp-geo-dd-in .14s ease;
}
@keyframes tdp-geo-dd-in {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: none; }
}

.tdp-geo-dd-search {
        display: block;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #e8f1ef;
        border-radius: 0;
        padding: 11px 14px;
        font-size: 13px;
        font-family: inherit;
        background: #f8fbfa;
        color: #092b36;
}
.tdp-geo-dd-search:focus {
        outline: none;
        background: #fff;
        border-bottom-color: #b9ded2;
}

.tdp-geo-dd-list {
        max-height: 288px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px;
}

.tdp-geo-dd-opt {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border: 0;
        background: transparent;
        color: #092b36;
        font-size: 13px;
        font-family: inherit;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        text-align: left;
        min-height: 40px;
}
.tdp-geo-dd-opt:hover,
.tdp-geo-dd-opt:focus {
        background: #eef8f4;
        outline: none;
}
.tdp-geo-dd-opt.is-active {
        background: rgba(8, 125, 114, 0.12);
        box-shadow: inset 0 0 0 1px rgba(8, 125, 114, 0.35);
}
.tdp-geo-dd-opt .tdp-geo-flag-img { width: 26px; height: 18px; flex-shrink: 0; }
.tdp-geo-dd-opt .tdp-geo-dd-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
}
.tdp-geo-dd-opt .tdp-geo-dd-code {
        background: transparent;
        color: #7d9490;
        padding: 0;
}
.tdp-geo-dd-opt--none .tdp-geo-dd-ph { color: #7d9490; }
.tdp-geo-dd-empty {
        padding: 18px 14px;
        text-align: center;
        color: #7d9490;
        font-size: 12.5px;
}

/* Dark mode for the custom widget. */
.dark-mode .tdp-geo-dd-btn,
.woodmart-dark .tdp-geo-dd-btn {
        background: #10262b;
        border-color: #1e3f42;
        color: #e6f2f0;
}
.dark-mode .tdp-geo-dd-panel,
.woodmart-dark .tdp-geo-dd-panel {
        background: #0d2225;
        border-color: #1e3f42;
}
.dark-mode .tdp-geo-dd-search,
.woodmart-dark .tdp-geo-dd-search {
        background: #10262b;
        color: #e6f2f0;
        border-bottom-color: #1e3f42;
}
.dark-mode .tdp-geo-dd-opt,
.woodmart-dark .tdp-geo-dd-opt { color: #e6f2f0; }
.dark-mode .tdp-geo-dd-opt:hover,
.dark-mode .tdp-geo-dd-opt:focus,
.woodmart-dark .tdp-geo-dd-opt:hover,
.woodmart-dark .tdp-geo-dd-opt:focus { background: #153236; }

/* Round 18: the ISO-2 code chip inside the badge (kept so Windows
   Chrome — which draws emoji flags as plain letters — still shows a
   recognizable badge). */
.tdp-geo-flag-code {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.5px;
}

/* Flag-only variant (no code chip) when a compact flag is enough. */
.tdp-geo-flag--emoji-only .tdp-geo-flag-code { display: none; }

/* Inline badge variant used next to labels. */
.tdp-geo-badge-wrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        vertical-align: middle;
}

/* Badge next to the phone label (dial-code side) — same navy chip. */
.tdp-geo-badge-phone {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
}

.tdp-geo-badge-phone .tdp-geo-flag {
        margin-right: 0;
}

/* Country + city selects share the standard TDP form look. */
select.tdp-geo-country,
select.tdp-geo-city {
        width: 100%;
        max-width: 100%;
        border: 1px solid #dce9e7;
        border-radius: 10px;
        padding: 10px 12px;
        background: #ffffff;
        color: #092b36;
        font-size: 13px;
        line-height: 1.4;
        min-height: 42px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23087d72' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px;
}

select.tdp-geo-city:disabled {
        background-color: #f4f7f6;
        color: #9aa8ae;
        cursor: not-allowed;
}

input.tdp-geo-phone {
        width: 100%;
        border: 1px solid #dce9e7;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 13px;
        min-height: 42px;
}

/* Dark mode */
.dark-mode .tdp-geo-flag,
.woodmart-dark .tdp-geo-flag {
        background: linear-gradient(135deg, #0a3f46, #0f9b7e);
}

.dark-mode select.tdp-geo-country,
.dark-mode select.tdp-geo-city,
.dark-mode input.tdp-geo-phone,
.woodmart-dark select.tdp-geo-country,
.woodmart-dark select.tdp-geo-city,
.woodmart-dark input.tdp-geo-phone {
        background-color: #10262b;
        border-color: #1e3f42;
        color: #e6f2f0;
}

/* =========================================================
   Round 17 — MOBILE PASS (phones)
   The geo cascade (country → city → phone badge) stays one column
   with full-width selects and 16px inputs (no iOS zoom).
   Round 20: the custom dropdown widget gets the same 16px/44px
   mobile treatment so it matches the native fields around it.
   ========================================================= */
@media (max-width:768px){
  .tdp-geo-country,
  .tdp-geo-city,
  .tdp-geo-phone,
  .tdp-geo-badge-wrap select,
  .tdp-geo-badge-wrap input{
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:16px !important;
    min-height:44px;
  }
  .tdp-geo-badge-wrap{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%;
  }
  .tdp-geo-flag{min-width:32px;height:28px}
  .tdp-geo-flag-emoji{font-size:14px}
  .tdp-geo-flag-code{font-size:9.5px}
  .tdp-geo-dd-btn{
    font-size:16px;
    min-height:48px;
  }
  .tdp-geo-dd-search{font-size:16px}
  .tdp-geo-dd-opt{font-size:15px;min-height:46px}
  .tdp-geo-dd-list{max-height:264px}
  /* Phone rows: badge + input side by side, flag visible. */
  .tdp-geo-dd-label{font-size:14px}
}