/* ===== AppStore GeoSwitch Page ===== */

/* Lang switcher */
.geo-lang-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.geo-lang-switcher .app-page-tag {
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 0.86em;
    flex-shrink: 0;
}
/* Active language: white pill + blue text */
.geo-lang-switcher .app-page-tag.active {
    background: rgba(255,255,255,0.95) !important;
    color: #0285e5 !important;
    font-weight: 700;
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Search bar */
.geo-search {
    max-width: 640px;
    margin: 0 auto;
}
.geo-search-inner {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    gap: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .2s;
}
.geo-search-inner:focus-within {
    background: rgba(255,255,255,0.28);
}
.geo-search-icon {
    width: 20px;
    height: 20px;
    fill: rgba(255,255,255,0.85);
    flex-shrink: 0;
}
.geo-search-inner input {
    flex: 1;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 1em;
    outline: none;
    width: auto;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}
/* Override app.css input[type=search]:focus which sets background:#fff */
.geo-search-inner input[type=search],
.geo-search-inner input[type=search]:focus {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-color: transparent;
    box-shadow: none;
    width: auto;
    padding: 0;
    color: #ffffff;
}
.geo-search-inner input::placeholder { color: rgba(255,255,255,0.6); }
.geo-search-btn {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    padding: 7px 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: background .2s;
}
.geo-search-btn:hover { background: rgba(255,255,255,0.35); }
.geo-search-hint {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    text-align: center;
    margin-top: 10px;
}

/* Main layout */
.geo-main {
    flex-direction: column !important;
    gap: 24px;
    padding-bottom: 40px;
}

/* Region nav */
.geo-region-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.geo-region-nav .app-page-tag {
    background: rgba(255,255,255,0.9);
    color: #0285e5;
    border: 1px solid rgba(2,133,229,0.2);
    font-weight: 600;
    transition: all .2s;
}
.geo-region-nav .app-page-tag:hover {
    background: #0285e5;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Section */
.geo-region-section {
    padding: 20px 24px 24px;
}
.geo-section-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #0285e5;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(2,133,229,0.12);
}

/* Country grid */
.geo-countrylist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.geo-countrylist > li { display: flex; }

/* SEO FAQ section */
.geo-seo-section { border-top: 1px solid rgba(2,133,229,0.1); }
.geo-faq { margin: 0; }
.geo-faq dt { font-weight: 600; color: #1a1a1a; margin: 14px 0 4px; font-size: 0.95em; }
.geo-faq dd { margin: 0; color: #555; font-size: 0.88em; line-height: 1.6; }

/* Country button */
.geo-block {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(2,133,229,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    transition: all .22s ease;
    font-size: 0.88em;
}
.geo-block:hover {
    background: linear-gradient(135deg, #e8f3ff 0%, #f5f9ff 100%);
    border-color: rgba(2,133,229,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2,133,229,0.12);
}
.geo-block:active { transform: translateY(0); }

/* Flag */
.geo-block .flag {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eee;
    margin: 0;
}

/* Caption */
.geo-caption {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}
.geo-cc {
    font-size: 0.72em;
    font-weight: 700;
    color: #0285e5;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.geo-name {
    font-size: 0.9em;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.geo-name-sub {
    font-size: 0.76em;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Language-driven name visibility */
/* zh: show Chinese as main, English as sub */
[data-lang="zh"] .geo-name  { display: block; }
[data-lang="zh"] .geo-name-sub { display: block; }
/* non-zh: show English only (main), hide sub */
[data-lang]:not([data-lang="zh"]) .geo-name-sub { display: none; }
[data-lang]:not([data-lang="zh"]) .geo-name { display: block; }

/* Toast */
.geo-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,0.92);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 0.95em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 9999;
    white-space: nowrap;
}
.geo-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .geo-region-section { padding: 14px; }
    .geo-countrylist { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .geo-block { padding: 8px 10px; gap: 8px; font-size: 0.84em; }
    .geo-region-nav { gap: 8px; }
    .geo-name { font-size: 0.88em; }
    .geo-name-sub { font-size: 0.74em; }
}

/* Mobile: horizontal-scroll lang switcher + compact layout */
@media (max-width: 600px) {
    /* Lang switcher: single scrollable row */
    .geo-lang-switcher {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        gap: 6px;
        margin-bottom: 14px;
    }
    .geo-lang-switcher::-webkit-scrollbar { display: none; }
    .geo-lang-switcher .app-page-tag { font-size: 0.8em; padding: 4px 10px; }

    /* Search */
    .geo-search-inner { padding: 5px 5px 5px 14px; gap: 6px; }
    .geo-search-icon { width: 16px; height: 16px; }

    /* Header text */
    .geo-search-btn { padding: 6px 12px; font-size: 0.82em; }
}

@media (max-width: 480px) {
    .geo-countrylist { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .geo-block { padding: 7px 8px; gap: 6px; }
    .geo-block .flag { width: 26px; height: 26px; background-size: contain; }
    .geo-name { font-size: 0.84em; }
}