/* ---- App shell ---- */
.cf-app { font-family: inherit; max-width: 780px; }

/* ---- Search label ---- */
.cf-label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ---- Tag input (search box) ---- */
.cf-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    min-height: 48px;
    cursor: text;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.cf-tag-input:focus-within {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,.12);
}

/* ---- Channel pill tags ---- */
.cf-tags { display: contents; }
.cf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f0fe;
    color: #174ea6;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 6px 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1;
}
.cf-tag-x {
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    opacity: .5;
    padding: 0 2px;
    border-radius: 50%;
    transition: opacity .1s, background .1s;
}
.cf-tag-x:hover { opacity: 1; background: rgba(23,78,166,.15); }

/* ---- Text input inside tag box ---- */
.cf-channel-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px;
    color: #333;
    min-width: 140px;
    flex: 1;
    background: transparent;
    line-height: 1.5;
}
.cf-channel-input::placeholder { color: #aaa; }

/* ---- Autocomplete dropdown ---- */
.cf-search-area { position: relative; }
.cf-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.cf-dropdown-item {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background .1s;
}
.cf-dropdown-item:last-child { border-bottom: none; }
.cf-dropdown-item:hover,
.cf-dropdown-item.active { background: #f0f6ff; }
.cf-dropdown-item .cf-cat { font-size: 12px; color: #aaa; }

/* ---- Results area ---- */
.cf-results { margin-top: 20px; }
.cf-results-label {
    font-size: 13px;
    color: #777;
    margin-bottom: 14px;
    letter-spacing: .01em;
}

/* ---- Result cards ---- */
.cf-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: box-shadow .15s;
}
.cf-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.cf-card.cf-best-choice { border: 2px solid #2e7d45; }
.cf-card.cf-best-price  { border: 2px solid #1565a0; }
.cf-card.cf-partial     { border: 1px solid #e4e4e4; opacity: .95; }

/* ---- Card header ---- */
.cf-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.cf-logo-col { display: flex; flex-direction: column; gap: 7px; }
.cf-logo {
    height: 34px;
    max-width: 130px;
    object-fit: contain;
    object-position: left center;
}
.cf-logo-placeholder {
    height: 34px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* ---- Best choice / best price / partial badges ---- */
.cf-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.cf-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .02em;
}
.cf-badge-best-choice { background: #d6f0de; color: #1a5c2a; }
.cf-badge-best-price  { background: #d0e8f7; color: #0c3d5e; }
.cf-badge-partial     { background: #fef3cd; color: #6b4c00; }

/* ---- Price block ---- */
.cf-price-block { text-align: right; flex-shrink: 0; }
.cf-price-main {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    line-height: 1;
    letter-spacing: -.01em;
}
.cf-price-main span { font-size: 14px; font-weight: 400; color: #666; }
.cf-price-sub { font-size: 12px; color: #999; margin-top: 3px; }

/* ---- Editorial note ---- */
.cf-editorial {
    font-size: 13px;
    color: #555;
    background: #f7f7f7;
    padding: 9px 12px;
    margin-bottom: 12px;
    line-height: 1.55;
    border-left: 3px solid #e0e0e0;
    border-radius: 0 8px 8px 0;
}

/* ---- Partial match missing banner ---- */
.cf-missing-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #7a4f00;
    background: #fff8e1;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.cf-missing-icon { flex-shrink: 0; margin-top: 1px; }

/* ---- Tier rows ---- */
.cf-tiers { display: flex; flex-direction: column; gap: 5px; }
.cf-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 12px;
    background: #f6f7f8;
    border-radius: 8px;
    gap: 10px;
}
.cf-tier-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}
.cf-tier-name { color: #333; }
.cf-tier-price { color: #555; white-space: nowrap; font-weight: 500; }
.cf-tier-price-then { font-size: 12px; color: #aaa; white-space: nowrap; }

/* ---- Promo badge on tier rows ---- */
.cf-promo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background: #d6f0de;
    color: #1a5c2a;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Add-on badge ---- */
.cf-addon-badge {
    font-size: 11px;
    background: #fff3cd;
    color: #6b4c00;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Regional geo icon + tooltip ---- */
.cf-geo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.cf-geo-icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cf-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.cf-geo-wrap:hover .cf-tooltip,
.cf-geo-wrap.active .cf-tooltip { display: block; }

/* ---- Card footer ---- */
.cf-divider { height: 1px; background: #f0f0f0; margin: 14px 0; }
.cf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.cf-short-term { font-size: 12px; color: #888; line-height: 1.4; }

/* ---- CTA button ---- */
.cf-cta-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #0073aa;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .15s, transform .1s;
}
.cf-cta-btn:hover { background: #005a87; color: #fff; text-decoration: none; }
.cf-cta-btn:active { transform: scale(.98); }

/* ---- Empty state ---- */
.cf-empty { font-size: 14px; color: #999; padding: 24px 0; }

/* ---- Responsive ---- */
@media (max-width: 540px) {
    .cf-card { padding: 14px 16px; }
    .cf-card-top { flex-direction: column; gap: 10px; }
    .cf-price-block { text-align: left; }
    .cf-price-main { font-size: 20px; }
    .cf-tier-row { flex-wrap: wrap; }
}

/* ---- Tier note (e.g. "Also available in 1, 3 & 7-day plans") ---- */
.cf-tier-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

/* ---- Price range note (e.g. "Price varies by ZIP") ---- */
.cf-tier-range-note {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
}

/* ---- cf_providers table ---- */
.cf-info-table { width:100%; border-collapse:collapse; font-size:13px; }
.cf-info-table th { text-align:left; padding:8px 12px; font-weight:500; color:#777; border-bottom:1px solid #eee; font-size:12px; }
.cf-info-table td { padding:9px 12px; border-bottom:0.5px solid #f0f0f0; vertical-align:middle; }
.cf-info-table tr:last-child td { border-bottom:none; }
.cf-info-table tr:hover td { background:#f9f9f9; }

/* ---- cf_channels list ---- */
.cf-channel-list { margin:0; padding-left:1.2em; font-size:14px; line-height:1.8; }

/* Free tier */
.cf-price-free { color: #1a7f4b; }
.cf-free-badge { display:inline-block; background:#d6f0de; color:#1a5c2a; font-size:11px; font-weight:600; padding:2px 8px; border-radius:5px; }

/* ---- Team Finder ---- */
.cf-zip-wrap{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.cf-zip-label{font-size:13px;color:var(--cf-muted,#888);}
.cf-zip-input{border:0.5px solid #ccc;border-radius:6px;padding:5px 10px;font-size:13px;width:88px;}
.cf-zip-btn{background:#1a6fc4;color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:13px;cursor:pointer;}
.cf-zip-status{font-size:12px;padding:3px 10px;border-radius:4px;background:#f0f0f0;color:#555;}
.cf-team-result-block{background:var(--cf-card-bg,#fff);border:0.5px solid var(--cf-border,#e5e5e5);border-radius:12px;padding:16px;margin-bottom:12px;}
.cf-team-result-header{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.cf-team-result-name{font-size:16px;font-weight:500;color:var(--cf-text,#111);}
.cf-team-result-meta{font-size:12px;color:var(--cf-muted,#888);}
.cf-team-channels{font-size:13px;color:var(--cf-text,#111);margin-bottom:10px;}
.cf-team-section-label{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--cf-muted,#888);margin-bottom:6px;}
.cf-team-platform-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid var(--cf-border,#e5e5e5);}
.cf-team-platform-row:last-child{border-bottom:none;}
.cf-team-platform-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cf-team-platform-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cf-team-price{font-size:14px;font-weight:500;color:var(--cf-text,#111);}
.cf-team-note{font-size:12px;color:var(--cf-muted,#888);font-style:italic;}
.cf-oom-badge{background:#faeeda;color:#633806;font-size:11px;padding:2px 8px;border-radius:4px;}
.cf-cta-sm{padding:5px 12px;font-size:12px;}
.cf-dropdown-hint{font-size:12px;color:var(--cf-muted,#888);margin-left:6px;}

/* ---- Team browse panel ---- */
.cf-browse-toggle{font-size:13px;color:var(--cf-link,#0073aa);text-decoration:none;display:inline-block;}
.cf-browse-toggle:hover{text-decoration:underline;}
.cf-browse-panel{border:0.5px solid var(--cf-border,#e5e5e5);border-radius:var(--border-radius-lg,12px);padding:14px;margin-top:8px;background:var(--cf-card-bg,#fff);}
.cf-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.cf-browse-group{display:flex;flex-direction:column;gap:3px;}
.cf-browse-league{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--cf-muted,#888);margin-bottom:4px;}
.cf-browse-team{background:none;border:0.5px solid var(--cf-border,#e5e5e5);border-radius:6px;padding:5px 10px;font-size:13px;text-align:left;cursor:pointer;color:var(--cf-text,#111);transition:background .1s;}
.cf-browse-team:hover{background:var(--cf-hover,#f5f5f5);}