/* ==========================================================================
   VIE — Homepage theme override ("Ledger & Tap" applied to the landing page)
   --------------------------------------------------------------------------
   The homepage uses a separate purchased landing-page template
   (assets/css/home/main.css) with its own purple color scheme, completely
   disconnected from the "Ledger & Tap" identity used everywhere else on
   the site (member dashboard, faucet, admin). This creates a jarring
   mismatch the moment someone logs in.

   Rather than rewrite the whole landing page (30k+ lines of purchased
   template CSS, risky to touch directly), this file overrides just the
   ~10 color utility classes + 2 buttons the template funnels ALL of its
   color through (.color-primary, .gradient-bg, .btn-info, .btn-brand-02,
   etc.) — loaded AFTER main.css so it wins the cascade without editing
   the original file.

   NOTE: could not be visually verified in this environment (no browser).
   Please check on staging before going fully live.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@600&display=swap");

/* ---- Core theme colors (these 6 utility classes drive the whole template) ---- */
.color-primary   { color: #3e7a6b !important; }  /* verdigris */
.color-secondary { color: #c1793c !important; }  /* copper */
.color-accent    { color: #2f6e8c !important; }  /* drip-blue */
.primary-bg      { background: #3e7a6b !important; }
.secondary-bg    { background: #c1793c !important; }
.accent-bg       { background: #2f6e8c !important; }

/* Hero + section gradients (this is the actual source of the purple hero
   background — see [image-overlay]:before in main.css) */
.gradient-bg,
[image-overlay]:before,
[data-overlay-top]:before,
[data-overlay-bottom]:before,
[data-overlay-gradient]:before {
  background: linear-gradient(75deg, #2b5a4e, #3e7a6b) !important;
}

/* ---- Buttons ---- */
.btn-info {
  background-color: #3e7a6b;
  border-color: #2b5a4e;
}
.btn-info:hover, .btn-info:focus {
  background-color: #2b5a4e;
  border-color: #2b5a4e;
  box-shadow: 0 0 0 0.2rem rgba(62, 122, 107, 0.4);
}

.btn-brand-02 {
  background-color: #c1793c;
  border-color: #9c5f2c;
}
.btn-brand-02:hover, .btn-brand-02:focus {
  background-color: #9c5f2c;
  border-color: #9c5f2c;
}
.btn-brand-02.btn-transparent {
  background-color: rgba(193, 121, 60, 0.6);
}
.btn-brand-02.btn-transparent:hover, .btn-brand-02.btn-transparent:focus {
  background-color: rgba(193, 121, 60, 0.9);
}

/* ---- Typography — match the rest of the site ---- */
h1, h2, h3, h4, h5, h6,
.section-heading h1,
.section-heading h2 {
  font-family: "Fraunces", "Georgia", serif !important;
  font-weight: 700 !important;
}

/* Stats counters (Happy Users / Coins Earned / etc.) read like a meter,
   same treatment as the member dashboard's balance display */
.count-number {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* Same look as .count-number, but for values (like $ amounts with
   decimals) that must display exactly as rendered - never routed
   through the jquery.rcounterup.js animation, which has repeatedly
   mishandled decimals/cache. */
.count-static {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* ---- Login/Register hero buttons: match the site's "tap handle" claim
   button styling for a consistent first impression ---- */
.action-btns .app-download-btn {
  border-radius: 999px !important;
}

/* ==========================================================================
   Purple leftovers the first pass missed
   --------------------------------------------------------------------------
   The original pass overrode the six colour utility classes the template
   funnels most of its colour through. But the template also hardcodes
   #9629e6 / #4f1bc5 / #7b17c5 directly in ~45 component rules that never go
   near those utilities - so the mobile toggle menu, the sticky header, the
   FAQ accordion and a pile of hover states stayed purple while the hero and
   buttons went green. Someone tapping the menu on the landing page got a
   purple panel, then a green login screen.

   These are the same three colours mapped onto the site's palette:
     #9629e6 (flat purple)   -> #3e7a6b verdigris
     #4f1bc5 -> #7b17c5 grad -> #2b5a4e -> #3e7a6b
   Copper (#c1793c) is used where the template wanted an accent that stands
   apart from the primary, so the two don't collapse into one colour.
   ========================================================================== */

/* ---- Header: sticky bar + the mobile toggle panel ---- */
.affix,
.navbar,
.background-video:before,
.mask-65,
.promo-one-single:hover {
  background: linear-gradient(75deg, #2b5a4e, #3e7a6b) !important;
}
.white-bg.navbar .navbar-toggler span {
  color: #3e7a6b;
}
.menu li a:hover,
.menu li:hover > a {
  background: #3e7a6b;
}

/* ---- FAQ accordion ---- */
.faq-wrap .card .card-header {
  background: linear-gradient(75deg, #2b5a4e, #3e7a6b);
}

/* ---- Buttons / form controls ---- */
.btn-brand-02 {
  background-color: #c1793c;
}
.btn-outline-brand-02 {
  border-color: #c1793c;
}
.btn-brand-3d-02 {
  background-image: linear-gradient(0deg, #c1793c 0%, #daa06b 100%);
}
.btn-brand-3d-02:before {
  background-image: linear-gradient(0deg, #daa06b 0%, #c1793c 100%);
}
.newsletter-form button {
  background-color: #3e7a6b;
}

/* ---- Accents, icons and hover states ---- */
a:hover,
.features-single-wrap span,
.feature-icon,
.total-amount-wrap .total-amount .total.due,
.single-blog-card .card-body a:hover,
.single-blog-card .card-body a.detail-link span,
.post-header .post-title a:hover,
.post-meta li i,
.post-meta a:hover,
.widget a:hover,
.custom-pagination-nav ul li a.page-link,
.custom-pagination-nav ul li.page-item:first-child .page-link:hover,
.custom-pagination-nav ul li.page-item:last-child .page-link:hover {
  color: #3e7a6b;
}

.feature-item:hover .feature-icon i,
.counter-wrap:after,
.testimonial-content-wrap .testimonial-shape .testimonial-quote-wrap,
.video-promo-content a.video-play-icon-without-bip:hover,
.progress-bar,
.progress-line,
.comment-reply > a:hover,
.comment-reply > a:focus,
.comment-reply-shop > a:hover,
.comment-reply-shop > a:focus,
.tag-cloud > a:hover,
.post-tags > a:hover,
.custom-pagination-nav ul li a.page-link:hover,
.custom-pagination-nav ul li.page-item.active .page-link,
.customer-slider-wrap .shape-right:after,
#preloader .preloader-wrap .thecube .cube:before {
  background-color: #3e7a6b;
}

.discount-banner {
  border-color: #3e7a6b;
}
.single-pricing-pack.popular-price,
.single-pricing-pack:hover {
  border-top-color: #3e7a6b !important;
}
.post-content blockquote:hover {
  border-color: #3e7a6b;
}

/* ---- Payment Proofs: the tappable crypto/USD value ---- */
.proof-value {
  color: #3e7a6b;
}