/* =============================================================
   Tebarato Buying Guides — Stylesheet v1.0.2
   Brand colours: #007A74 | #43B3AE | #81D8D0 | #00CCFF
   Loads at priority 100 — after Astra, Elementor, and all themes
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────
   ASTRA + ELEMENTOR HARD RESET
   Targets every element Astra's button/link styles touch
   ───────────────────────────────────────────────────────────── */
.tbg-wrap,
.tbg-wrap *,
.tbg-wrap *::before,
.tbg-wrap *::after {
    box-sizing: border-box !important;
}

/* Kill Astra button styles on our tab buttons */
.tbg-wrap .tbg-tab,
.tbg-wrap .tbg-tab:link,
.tbg-wrap .tbg-tab:visited,
.tbg-wrap .tbg-tab:hover,
.tbg-wrap .tbg-tab:focus,
.tbg-wrap .tbg-tab:active,
.ast-separate-container .tbg-wrap .tbg-tab,
.site-content .tbg-wrap .tbg-tab,
.entry-content .tbg-wrap .tbg-tab,
body .tbg-wrap .tbg-tab,
button.tbg-tab,
.tbg-tabs button.tbg-tab {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #7a7169 !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    padding: 16px 22px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
}

.tbg-wrap .tbg-tab:hover,
body .tbg-wrap .tbg-tab:hover,
button.tbg-tab:hover {
    background: #f7f4ef !important;
    background-color: #f7f4ef !important;
    color: #007A74 !important;
    border-bottom-color: #d8d2c8 !important;
}

.tbg-wrap .tbg-tab--active,
body .tbg-wrap .tbg-tab--active,
button.tbg-tab.tbg-tab--active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #007A74 !important;
    border-bottom-color: #007A74 !important;
}

/* Kill Astra link styles on card links */
.tbg-wrap a,
.tbg-wrap a:link,
.tbg-wrap a:visited {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* ── Root tokens ── */
.tbg-wrap {
    --tbg-teal-deep:  #007A74;
    --tbg-teal-mid:   #43B3AE;
    --tbg-teal-light: #81D8D0;
    --tbg-cyan:       #00CCFF;
    --tbg-dark:       #0f1a1a;
    --tbg-ink:        #1a1a1a;
    --tbg-paper:      #f7f4ef;
    --tbg-cream:      #ece8e1;
    --tbg-muted:      #7a7169;
    --tbg-border:     #d8d2c8;
    --tbg-green:      #2d8a4e;
    --tbg-red-new:    #e84343;
    --tbg-radius:     4px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 300;
    color: #1a1a1a;
}

/* ── Tab bar ── */
.tbg-wrap .tbg-tabs {
    display: flex !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #d8d2c8 !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important;
}
.tbg-wrap .tbg-tabs::-webkit-scrollbar { display: none; }

/* ── Badge ── */
.tbg-wrap .tbg-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.58rem !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: #ece8e1 !important;
    background-color: #ece8e1 !important;
    color: #7a7169 !important;
    position: relative !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
.tbg-wrap .tbg-tab--active .tbg-badge {
    background: #007A74 !important;
    background-color: #007A74 !important;
    color: #ffffff !important;
}
.tbg-wrap .tbg-badge--new {
    background: #00CCFF !important;
    background-color: #00CCFF !important;
    color: #003a44 !important;
}
.tbg-wrap .tbg-tab--active .tbg-badge--new {
    background: #00CCFF !important;
    background-color: #00CCFF !important;
    color: #003a44 !important;
}

/* Pulsing red dot */
.tbg-wrap .tbg-badge__dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #e84343 !important;
    animation: tbg-pulse 1.6s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes tbg-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.65; }
}

/* ── Panel ── */
.tbg-wrap .tbg-panel {
    display: none !important;
    padding: 36px 0 48px !important;
    background: #f7f4ef !important;
}
.tbg-wrap .tbg-panel--active {
    display: block !important;
}

.tbg-wrap .tbg-panel__header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #d8d2c8 !important;
    background: none !important;
}
.tbg-wrap .tbg-panel__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.tbg-wrap .tbg-panel__meta {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #7a7169 !important;
}

/* ── Card grid ── */
.tbg-wrap .tbg-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Featured card */
.tbg-wrap .tbg-card--featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    background: #0f1a1a !important;
    background-color: #0f1a1a !important;
    border: 1px solid #1e3838 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}
.tbg-wrap .tbg-card--featured:hover {
    border-color: #43B3AE !important;
}
.tbg-wrap .tbg-card__featured-body {
    padding: 32px 36px !important;
    background: none !important;
}
.tbg-wrap .tbg-card__eyebrow {
    display: block !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #43B3AE !important;
    margin-bottom: 12px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.tbg-wrap .tbg-card__featured-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.tbg-wrap .tbg-card__featured-title a,
.tbg-wrap .tbg-card__featured-title a:link,
.tbg-wrap .tbg-card__featured-title a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    background: none !important;
}
.tbg-wrap .tbg-card__featured-title a:hover {
    color: #81D8D0 !important;
}
.tbg-wrap .tbg-card__featured-excerpt {
    font-size: 0.9rem !important;
    color: #6a9090 !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: none !important;
}
.tbg-wrap .tbg-card__cta,
.tbg-wrap .tbg-card__cta:link,
.tbg-wrap .tbg-card__cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #00CCFF !important;
    border: 1px solid rgba(0,204,255,0.3) !important;
    padding: 9px 18px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.tbg-wrap .tbg-card__cta:hover {
    background: rgba(0,204,255,0.08) !important;
    color: #00CCFF !important;
}
.tbg-wrap .tbg-card__featured-visual {
    background: #091414 !important;
    background-color: #091414 !important;
    border-left: 1px solid #1e3838 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    min-height: 160px !important;
}
.tbg-wrap .tbg-card__featured-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.75 !important;
}
.tbg-wrap .tbg-card__placeholder-icon {
    font-size: 3.5rem !important;
    opacity: 0.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 160px !important;
    background: none !important;
}

/* Standard card */
.tbg-wrap .tbg-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #d8d2c8 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    transition: border-color 0.18s, transform 0.15s !important;
}
.tbg-wrap .tbg-card:hover {
    border-color: #43B3AE !important;
    transform: translateY(-2px) !important;
}
.tbg-wrap .tbg-card__thumb {
    height: 130px !important;
    background: #0f1a1a !important;
    background-color: #0f1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}
.tbg-wrap .tbg-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.tbg-wrap .tbg-card__new-pill {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: #00CCFF !important;
    background-color: #00CCFF !important;
    color: #003a44 !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.58rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 3px 9px !important;
    border-radius: 10px !important;
    border: none !important;
}
.tbg-wrap .tbg-card__body {
    padding: 16px 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: none !important;
}
.tbg-wrap .tbg-card__tag {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #007A74 !important;
    margin-bottom: 7px !important;
    display: block !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}
.tbg-wrap .tbg-card__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    flex: 1 !important;
    background: none !important;
    border: none !important;
}
.tbg-wrap .tbg-card__title a,
.tbg-wrap .tbg-card__title a:link,
.tbg-wrap .tbg-card__title a:visited {
    color: #1a1a1a !important;
    text-decoration: none !important;
}
.tbg-wrap .tbg-card__title a:hover { color: #007A74 !important; }
.tbg-wrap .tbg-card__excerpt {
    font-size: 0.85rem !important;
    color: #5a5248 !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
}
.tbg-wrap .tbg-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    border-top: 1px solid #ece8e1 !important;
    margin-top: auto !important;
    background: none !important;
}
.tbg-wrap .tbg-card__meta {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #aaa49c !important;
}
.tbg-wrap .tbg-card__read,
.tbg-wrap .tbg-card__read:link,
.tbg-wrap .tbg-card__read:visited {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #007A74 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.tbg-wrap .tbg-card__read:hover { color: #43B3AE !important; }

/* ── Empty state ── */
.tbg-wrap .tbg-empty {
    text-align: center !important;
    padding: 56px 24px !important;
    color: #7a7169 !important;
    background: none !important;
}
.tbg-wrap .tbg-empty__icon {
    font-size: 2.2rem !important;
    display: block !important;
    margin-bottom: 12px !important;
    opacity: 0.4 !important;
}
.tbg-wrap .tbg-empty p {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #7a7169 !important;
    background: none !important;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .tbg-wrap .tbg-card--featured {
        grid-template-columns: 1fr !important;
    }
    .tbg-wrap .tbg-card__featured-visual {
        border-left: none !important;
        border-top: 1px solid #1e3838 !important;
        min-height: 120px !important;
    }
    .tbg-wrap .tbg-card__featured-body { padding: 24px 20px !important; }
}
@media (max-width: 480px) {
    .tbg-wrap .tbg-tab { padding: 14px 14px !important; font-size: 0.62rem !important; }
    .tbg-wrap .tbg-tab__icon { display: none !important; }
    .tbg-wrap .tbg-cards { grid-template-columns: 1fr !important; }
}

/* =============================================================
   ELEMENTOR KIT + ASTRA GLOBAL BUTTON OVERRIDE
   Targets the exact selectors seen in browser inspector
   ============================================================= */

/* Elementor Kit override */
.elementor-kit-18 button.tbg-tab,
.elementor-kit-18 .tbg-wrap button,
.elementor-kit-18 .tbg-tab,
.e-con .tbg-wrap .tbg-tab,
.e-con-boxed .tbg-wrap .tbg-tab,
.elementor .tbg-wrap .tbg-tab,
.elementor-element .tbg-wrap .tbg-tab {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: #7a7169 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 16px 22px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Elementor Kit active state */
.elementor-kit-18 button.tbg-tab.tbg-tab--active,
.elementor-kit-18 .tbg-wrap button.tbg-tab--active,
.elementor .tbg-wrap .tbg-tab--active,
.e-con .tbg-wrap .tbg-tab--active,
.e-con-boxed .tbg-wrap .tbg-tab--active {
    color: #007A74 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom: 3px solid #007A74 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Elementor Kit hover state */
.elementor-kit-18 button.tbg-tab:hover,
.elementor .tbg-wrap .tbg-tab:hover,
.e-con .tbg-wrap .tbg-tab:hover {
    color: #007A74 !important;
    background-color: #f7f4ef !important;
    background: #f7f4ef !important;
    box-shadow: none !important;
}

/* Elementor Kit badge override */
.elementor-kit-18 .tbg-badge,
.elementor .tbg-wrap .tbg-badge,
.e-con .tbg-wrap .tbg-badge {
    font-family: 'DM Mono', monospace !important;
    font-size: 0.58rem !important;
    font-weight: 500 !important;
    background-color: #ece8e1 !important;
    background: #ece8e1 !important;
    color: #7a7169 !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 8px !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
}

.elementor-kit-18 .tbg-tab--active .tbg-badge,
.elementor .tbg-wrap .tbg-tab--active .tbg-badge,
.e-con .tbg-wrap .tbg-tab--active .tbg-badge {
    background-color: #007A74 !important;
    background: #007A74 !important;
    color: #ffffff !important;
}

.elementor-kit-18 .tbg-badge--new,
.elementor .tbg-wrap .tbg-badge--new,
.e-con .tbg-wrap .tbg-badge--new {
    background-color: #00CCFF !important;
    background: #00CCFF !important;
    color: #003a44 !important;
}

/* =============================================================
   FINAL BORDER + RADIUS FIX — removes Astra/Elementor borders
   ============================================================= */
.tbg-wrap .tbg-tabs,
.tbg-wrap .tbg-tab,
.tbg-wrap .tbg-tab:hover,
.tbg-wrap .tbg-tab:focus,
.tbg-wrap .tbg-tab:active,
.tbg-wrap .tbg-tab--active,
button.tbg-tab,
button.tbg-tab:hover,
button.tbg-tab:focus,
button.tbg-tab:active,
.elementor-kit-18 button.tbg-tab,
.elementor-kit-18 button.tbg-tab:hover,
.e-con button.tbg-tab,
.e-con-boxed button.tbg-tab,
.ast-separate-container button.tbg-tab,
body button.tbg-tab {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Active tab — teal bottom border only */
.tbg-wrap .tbg-tab--active,
button.tbg-tab.tbg-tab--active,
.elementor-kit-18 button.tbg-tab.tbg-tab--active,
.e-con button.tbg-tab.tbg-tab--active,
body button.tbg-tab.tbg-tab--active {
    border-bottom: 3px solid #007A74 !important;
    color: #007A74 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Inactive tab — transparent bottom border */
.tbg-wrap .tbg-tab:not(.tbg-tab--active),
button.tbg-tab:not(.tbg-tab--active),
body button.tbg-tab:not(.tbg-tab--active) {
    border-bottom: 3px solid transparent !important;
    color: #7a7169 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Tab bar bottom border */
.tbg-wrap .tbg-tabs {
    border-bottom: 1px solid #d8d2c8 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}