/* ==========================================================================
   Country picker + "no stores here yet" note
   --------------------------------------------------------------------------
   The website's country (src/site_country.php): a flag-and-code button that
   opens the list of countries, on the home page, pricing and the marketplace
   header. Each country is a link (?cc_pick=KE), so it works without script.
   Loaded by landing.php (publicRenderMarketing) and marketplace.php.
   ========================================================================== */

.cc-pick { position: relative; display: inline-block; }
.cc-pick > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 10px; border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .9); color: #000;
    font: inherit; font-size: .82rem; font-weight: 800; line-height: 1;
}
.cc-pick > summary::-webkit-details-marker { display: none; }
.cc-pick > summary:hover { border-color: rgba(15, 23, 42, .28); background: #fff; }
.cc-pick > summary:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.cc-pick > summary .bi { font-size: .7rem; color: #475569; transition: transform .15s ease; }
.cc-pick[open] > summary .bi { transform: rotate(180deg); }
.cc-pick .cc-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }

.cc-pick-menu {
    position: absolute; z-index: 400; top: calc(100% + 8px); right: 0;
    width: min(420px, calc(100vw - 24px));
    padding: 10px; border-radius: 16px;
    background: #fff; color: #000;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .06);
}
.cc-pick-menu > p { margin: 2px 6px 8px; font-size: .78rem; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .06em; }
.cc-pick-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
    max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.cc-pick-list a {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 8px 9px; border-radius: 10px;
    color: #000; text-decoration: none; font-size: .86rem; font-weight: 650;
}
.cc-pick-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-pick-list a:hover, .cc-pick-list a:focus-visible { background: #f1f5f9; outline: none; }
.cc-pick-list a.is-on { background: #ecfdf5; font-weight: 800; }

/* Phones: the list opens as a sheet from the bottom (country-picker.js moves
   it to <body>, out of the frosted headers). */
.cc-pick-sheet {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 23, 42, .45);
}
.cc-pick-sheet .cc-pick-menu { position: static; width: 100%; max-width: 520px; }
.cc-pick-sheet .cc-pick-list { max-height: 60vh; }
html.cc-sheet-open, html.cc-sheet-open body { overflow: hidden; }

/* Website header: on the dark glass over the green hero */
.zlp-header.on-hero .cc-pick > summary { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
.zlp-header.on-hero .cc-pick > summary .bi { color: rgba(255, 255, 255, .85); }
.zlp-mobile-nav .cc-pick { margin: 6px 0; }
.zlp-mobile-nav .cc-pick-menu { left: 0; right: auto; }
.zlp-footer .cc-pick > summary { background: #fff; }
.zlp-footer .cc-pick-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

/* Marketplace header: the same size as the round icon buttons */
.m2-header-actions .cc-pick > summary { height: 40px; padding: 0 9px; }
@media (max-width: 767px) {
    .m2-header-actions .cc-pick > summary b, .m2-header-actions .cc-pick > summary .bi { display: none; }
    .m2-header-actions .cc-pick > summary { width: 40px; padding: 0; justify-content: center; }
}

/* Marketplace: a country with no stores yet shows every country's */
.mp-cc-note {
    max-width: 1240px; margin: 10px auto 0; padding: 10px 14px;
    border-radius: 14px; border: 1px solid #fde68a; background: #fffbeb;
    color: #000; font-size: .86rem; line-height: 1.5;
}
.mp-cc-note p { margin: 0; }
.mp-cc-note .cc-flag { display: inline-block; width: 20px; height: 15px; margin-right: 8px; vertical-align: -2px; border-radius: 2px; object-fit: cover; }
.mp-cc-note a { margin-left: 6px; color: #0f5f45; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mp-cc-note a:hover { text-decoration: underline; }
@media (max-width: 767px) { .mp-cc-note { margin: 8px 12px 0; } }

/* Home hero line: "For businesses in Kenya" with its flag */
.hero-mini .cc-flag { display: inline-block; width: 18px; height: 13px; margin-right: 7px; vertical-align: -1px; border-radius: 2px; object-fit: cover; }

/* Pricing: the local price, and what is charged */
.zlp-plan-charge { display: block; margin-top: 4px; font-size: .8rem; font-weight: 700; color: #475569; }