/* ══════════════════════════════════════════════
   Counties Page — cn- prefix
   Page-specific styles only; shared components
   (bp-hero, bp-btn, bp-faq, bp-cta) live in base.css.
   ══════════════════════════════════════════════ */

/* ── Search Wrapper (continues hero gradient) ── */
.cn-search-wrap {
    background: linear-gradient(180deg, #fff 0%, #fff 100%);
    padding: 0 24px 40px;
    text-align: center;
}

/* ── Search Bar ── */
.cn-search {
    max-width: 480px; margin: 0 auto;
    position: relative;
}
.cn-search__input {
    width: 100%; padding: 16px 20px 16px 48px;
    border: 2px solid #D0E8FB; border-radius: 14px;
    font-size: 16px; font-family: 'Roboto', sans-serif;
    color: #282828; background: #fff; outline: none;
    box-shadow: 0 4px 16px rgba(72,176,247,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cn-search__input:focus {
    border-color: #48B0F7;
    box-shadow: 0 4px 24px rgba(72,176,247,0.15);
}
.cn-search__input::placeholder { color: #B8B8B8; }
.cn-search__icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; stroke: #A0A0A0;
}
.cn-search__count {
    text-align: center; margin-top: 12px;
    font-size: 13px; color: #A0A0A0;
}
.cn-search__count strong { color: #12C0C5; font-weight: 600; }

/* ── Popular Counties ── */
.cn-popular {
    max-width: 900px; margin: 0 auto;
    padding: 32px 24px 40px;
}
.cn-popular__label {
    font-family: 'Work Sans', sans-serif; font-weight: 700;
    font-size: 13px; color: #FE8B7B; text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 16px; text-align: center;
}
.cn-popular__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.cn-pop-card {
    background: #fff; border: 2px solid #E8E8E8;
    border-radius: 12px; padding: 20px 18px;
    text-decoration: none; text-align: center;
    transition: all 0.25s ease;
    position: relative;
}
.cn-pop-card:hover {
    border-color: #12C0C5;
    box-shadow: 0 8px 24px rgba(18,192,197,0.12);
    transform: translateY(-2px);
}
.cn-pop-card__name {
    font-family: 'Work Sans', sans-serif; font-weight: 700;
    font-size: 15px; color: #282828; margin-bottom: 2px;
}
.cn-pop-card__region {
    font-size: 12px; color: #A0A0A0;
}
.cn-pop-card__badge {
    position: absolute; top: -8px; right: -8px;
    background: #FE8B7B; color: #fff;
    font-family: 'Work Sans', sans-serif; font-weight: 800;
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px;
    padding: 3px 8px; border-radius: 6px;
}

/* ── All Counties Section ── */
.cn-all {
    max-width: 900px; margin: 0 auto; padding: 0 24px 48px;
}
.cn-all__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.cn-all__title {
    font-family: 'Work Sans', sans-serif; font-weight: 800;
    font-size: 22px; color: #282828;
}

/* ── Alpha Nav ── */
.cn-alpha {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.cn-alpha__btn {
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid #E8E8E8; background: #fff;
    font-family: 'Work Sans', sans-serif; font-weight: 700;
    font-size: 12px; color: #707070; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.cn-alpha__btn:hover { border-color: #48B0F7; color: #48B0F7; }
.cn-alpha__btn--disabled { color: #D0D0D0; cursor: default; border-color: #f0f0f0; }

/* ── Region Groups ── */
.cn-region { margin-bottom: 36px; }
.cn-region__label {
    font-family: 'Work Sans', sans-serif; font-weight: 700;
    font-size: 14px; color: #48B0F7; text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 2px solid #EAF4FE;
    text-align: left;
}
.cn-region__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}

/* ── County Card ── */
.cn-county {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid #E8E8E8;
    border-radius: 10px; padding: 14px 18px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.cn-county:hover {
    border-color: #12C0C5; background: #fafffe;
    box-shadow: 0 2px 10px rgba(18,192,197,0.08);
}
.cn-county__name {
    font-family: 'Work Sans', sans-serif; font-weight: 600;
    font-size: 14px; color: #282828;
}
.cn-county__arrow {
    font-size: 14px; color: #D0D0D0;
    transition: color 0.2s, transform 0.2s;
}
.cn-county:hover .cn-county__arrow { color: #12C0C5; transform: translateX(2px); }

/* ── No Results ── */
.cn-no-results {
    text-align: center; padding: 40px 20px;
    display: none;
}
.cn-no-results__emoji { font-size: 48px; margin-bottom: 12px; }
.cn-no-results__text {
    font-family: 'Work Sans', sans-serif; font-weight: 600;
    font-size: 16px; color: #707070;
}
.cn-no-results__sub { font-size: 14px; color: #A0A0A0; margin-top: 4px; }

/* ── SEO Content ── */
.cn-content {
    background: #f8f9fa; padding: 64px 24px;
}
.cn-content__inner { max-width: 720px; margin: 0 auto; text-align: left; }
.cn-content h2 {
    font-family: 'Work Sans', sans-serif; font-weight: 800;
    font-size: clamp(22px, 3.5vw, 28px);
    color: #282828; margin-bottom: 16px; line-height: 1.25;
}
.cn-content h3 {
    font-family: 'Work Sans', sans-serif; font-weight: 700;
    font-size: 18px; color: #282828; margin: 24px 0 8px;
}
.cn-content p {
    font-size: 16px; color: #585858; line-height: 1.75; margin-bottom: 14px;
}
.cn-content strong { color: #282828; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .cn-popular__grid { grid-template-columns: repeat(2, 1fr); }
    .cn-region__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cn-popular { padding: 24px 20px 32px; }
    .cn-popular__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cn-all { padding: 0 20px 40px; }
    .cn-region__grid { grid-template-columns: 1fr; }
    .cn-alpha { gap: 3px; }
    .cn-alpha__btn { width: 28px; height: 28px; font-size: 11px; }
    .cn-content { padding: 48px 20px; }
}