/* ==========================================================================
   MiningCrypto.Online — additions on top of the Flathost theme (hosting.css)
   Flathost palette: green #2cc76a · blue #2db6d8 · red #f45c57
                     navy #202b34 · slate #34454e · footer #232a31
   Nothing in hosting.css is edited; everything pool-specific lives here.
   ========================================================================== */

html { scroll-behavior: smooth; }
/* Anchors land below the fixed navbar. */
[id] { scroll-margin-top: 90px; }

.mono { font-family: Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; }

/* ---------- Site logo (images/mco_logo.png, white on transparent) ---------- */
.navbar-brand.brand-logo {
  height: auto;
  padding: 0;
  margin: 17px 0 0 15px;
}
.navbar-brand.brand-logo img { display: block; width: auto; height: 46px; }
.brand-logo--muted { display: block; width: auto; height: 30px; opacity: 0.45; }
@media (max-width: 1199px) and (min-width: 992px) {
  .navbar-brand.brand-logo { margin-top: 22px; }
  .navbar-brand.brand-logo img { height: 36px; }
}
/* Tablet: the full menu is still shown, so shrink the logo and tighten the links to keep one row. */
@media (max-width: 991px) and (min-width: 768px) {
  .navbar-brand.brand-logo { margin-top: 26px; }
  .navbar-brand.brand-logo img { height: 28px; }
  .navbar .nav { padding-left: 0; padding-right: 0; }
  .navbar .nav > li > a { padding-left: 9px; padding-right: 9px; font-size: 13px; }
}
@media (max-width: 767px) {
  .navbar-brand.brand-logo { margin-top: 21px; }
  .navbar-brand.brand-logo img { height: 38px; max-width: calc(100vw - 110px); object-fit: contain; object-position: left center; }
}

/* ---------- Front page hero ---------- */
.jumbotron.masthead { margin-bottom: 0; }
.masthead .hero-unit h1 { font-size: 58px; }
.masthead .hero-unit h3 { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .jumbotron.masthead { height: auto; padding-bottom: 40px; }
  .masthead .hero-unit { padding: 60px 0 0; }
  .masthead .hero-unit h1 { font-size: 36px; }
  .masthead .hero-unit .btn-lg { display: block; margin: 10px 0; }
}

/* ---------- Live totals strip under the hero ---------- */
.pool-strip {
  background: #202b34;
  color: #fff;
  text-align: center;
  padding: 22px 0;
  margin-top: 0 !important;
}
.pool-strip strong { display: block; font-size: 30px; line-height: 1.2; color: #2cc76a; }
.pool-strip span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #9AA5AA; }
@media (max-width: 767px) {
  .pool-strip .col-xs-6 { margin: 8px 0; }
  .pool-strip strong { font-size: 24px; }
}

/* ---------- Coin cards (built on Flathost's pricing table) ---------- */
.coin-filter { margin: 10px 0 0; }
.coin-filter .btn { padding: 10px 22px; font-weight: bold; color: #70747A; }
.coin-filter .btn.active,
.coin-filter .btn.active:hover { background: #2cc76a; border-color: #25ad5b; color: #fff; box-shadow: none; }
.coin-filter .btn .badge { margin-left: 6px; background: rgba(0, 0, 0, 0.18); }

.coin-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.coin-grid .coin-card {
  width: calc(25% - 20px);
  margin: 100px 10px 0;
  display: flex;
  flex-direction: column;
}
.coin-grid .planFeatures { flex: 1; padding: 10px 18px; }
.coin-grid .planFeatures ul li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #dcdedf;
  font-size: 13px;
}
.coin-grid .planFeatures ul li:last-child { border-bottom: 0; }
.coin-grid .planFeatures .k { color: #70747A; }
.coin-grid .planFeatures .v { font-weight: bold; color: #202b34; text-align: right; }
.coin-grid .planName h3 { font-size: 20px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-grid .planName p { font-size: 12px; text-transform: uppercase; }
.coin-grid-status { width: 100%; margin: 60px 0 20px; text-align: center; font-size: 16px; }
@media (max-width: 991px) { .coin-grid .coin-card { width: calc(50% - 20px); } }
@media (max-width: 560px) { .coin-grid .coin-card { width: calc(100% - 20px); } }

/* Coin badge: reuses the round .price badge; shows a ticker or a logo. */
.PlanPricing .price.coin-badge,
.price.coin-badge {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border-radius: 100%;
  background: #2cc76a;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 90px;
  text-align: center;
  overflow: hidden;
}
.Recommended .price.coin-badge { background: #f45c57; }
.price.coin-badge.is-long { font-size: 19px; }
.price.coin-badge img { width: 90px; height: 90px; border-radius: 100%; object-fit: cover; background: #fff; vertical-align: top; }

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2cc76a;
  box-shadow: 0 0 0 3px rgba(44, 199, 106, 0.25);
  vertical-align: 1px;
}

/* ---------- "3 steps" ---------- */
.step { text-align: center; margin: 20px 0 10px; }
.step-num {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2db6d8;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 56px;
}
.step h4 { margin-top: 18px; }

/* ---------- Miner lookup band (Flathost .domain) ---------- */
.domain .PageHead { margin-top: 60px; }
.domain .input-group { width: 100%; }
.domain .lookup-coin { width: 130px; }
.domain .lookup-coin select {
  width: 130px;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: #e2e5e6;
  font-weight: bold;
  color: #34454e;
}
.domain .submitbtn { padding-top: 20px; padding-bottom: 60px; }

/* ---------- Coin / dashboard header band ---------- */
.jumbotron.masthead.pool-hero { height: auto; padding: 44px 0 40px; margin-bottom: 0; }
.pool-hero-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.pool-hero-text { flex: 1; min-width: 260px; }
.pool-hero h1 { margin: 0; font-size: 40px; }
.pool-hero h3 { margin: 8px 0 12px; font-size: 18px; font-weight: normal; color: #D5D5D5; }
.pool-hero-actions .btn-lg { padding: 16px 30px; font-size: 16px; }
.pool-tags { margin: 0; }
.pool-tags .label { display: inline-block; margin: 0 4px 4px 0; padding: 6px 10px; background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: normal; }
.price.coin-badge.coin-badge--hero { margin: 0; flex: 0 0 100px; }
@media (max-width: 767px) {
  .pool-hero h1 { font-size: 28px; }
  .pool-hero-actions { width: 100%; }
  .pool-hero-actions .btn-lg { margin: 0 8px 8px 0; }
}

.dash-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 680px; }
.dash-form select { flex: 0 0 110px; width: 110px; height: 46px; font-weight: bold; }
.dash-form input { flex: 1; min-width: 200px; height: 46px; }
.dash-form .btn { height: 46px; padding: 0 28px; }
.dash-address { margin: 30px 0 0; padding: 14px 18px; background: #f4f5f5; border-left: 4px solid #2cc76a; color: #202b34; word-break: break-all; }
.dash-address .pull-right { margin-left: 16px; word-break: normal; }

/* ---------- Stat tiles ---------- */
.stat-row { margin-top: 30px; }
.stat-tile {
  margin-bottom: 20px;
  padding: 18px 18px 14px;
  background: #e8e9ea;
  border-top: 4px solid #2cc76a;
  min-height: 118px;
}
.stat-tile span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #70747A; }
.stat-tile strong { display: block; margin: 6px 0 4px; font-size: 24px; line-height: 1.2; color: #202b34; word-break: break-word; }
.stat-tile strong.text-success { color: #25ad5b; }
.stat-tile strong.text-warning { color: #d98b12; }
.stat-tile strong.text-danger { color: #f45c57; }
.stat-tile em { display: block; font-style: normal; font-size: 12px; color: #70747A; }
@media (max-width: 480px) { .stat-tile strong { font-size: 18px; } .stat-tile { min-height: 104px; padding: 14px 12px 10px; } }

/* ---------- Chart ---------- */
.chart-box { position: relative; height: 300px; }

/* ---------- Tables ---------- */
.table-expanded > thead > tr > th {
  background: #202b34;
  color: #fff;
  border-color: #202b34;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.table-expanded > tbody > tr > td { padding: 12px; vertical-align: middle; color: #4e4e4e; }
.table-expanded > tbody > tr:nth-child(even) > td { background: #f7f8f8; }
.table-expanded > tbody > tr > td.text-success { color: #25ad5b; }
.table-expanded > tbody > tr > td.text-warning { color: #d98b12; }
.table-expanded > tbody > tr > td.text-danger { color: #f45c57; }
.table-more { margin: -8px 0 20px; text-align: center; }
.label-success { background: #2cc76a; }
.label-warning { background: #e8a23a; }
.text-success { color: #25ad5b; }
.progress-thin { height: 4px; margin: 4px 0 0; box-shadow: none; }

.pool-tabs { margin: 10px 0 20px; }
.pool-tabs > li > a { color: #70747A; font-weight: bold; }
.pool-tabs > li.active > a,
.pool-tabs > li.active > a:hover,
.pool-tabs > li.active > a:focus { color: #202b34; border-top: 3px solid #2cc76a; }
.pool-tabs .badge { margin-left: 4px; background: #9AA5AA; }

/* ---------- Connect / command builder ---------- */
#hosts-list li { margin-bottom: 8px; color: #70747A; font-size: 13px; word-break: break-all; }
#hosts-list li strong { color: #202b34; }
.gen-form label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #70747A; }
.gen-form .form-control { height: 44px; }
.gen-output {
  margin: 0 0 12px;
  padding: 18px;
  border: 0;
  border-radius: 3px;
  background: #202b34;
  color: #c9f3da;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}
.gen-note { margin-top: 12px; font-size: 13px; }

/* ---------- Dashboard ---------- */
.payout-progress { margin: 0 0 10px; }
.payout-progress p { color: #202b34; }
.payout-progress .progress { height: 12px; box-shadow: none; background: #e8e9ea; }
.payout-progress .progress-bar-success { background: #2cc76a; box-shadow: none; }

/* ---------- Dashboard dialog ---------- */
.LoginSignup select.input-lg { font-size: 14px; }
.modal-hint { margin: 0 0 10px; font-size: 13px; }

#page-alert .alert { margin: 30px 0 0; }
.footer .btn-small { margin-top: 6px; }

/* Equal-height stat tiles (floats leave gaps when a tile wraps to 3 lines). */
.stat-row { display: flex; flex-wrap: wrap; }
.stat-row:before, .stat-row:after { display: none; }
.stat-row > [class*="col-"] { display: flex; }
.stat-row .stat-tile { width: 100%; }
@media (max-width: 480px) { .coin-filter .btn { padding: 8px 10px; } }

/* ---------- Light / dark switch in the navbar (dark colours: pool-dark.css) ---------- */
.navbar .nav > li > a.theme-toggle { font-size: 16px; }