/*
 * Exact-host legacy layout parity for TOTAL4D, TOTALWLA, YYPAUS and BUSUR4D88.
 *
 * The body classes are emitted by meteor/desktop/partials/brand-body-class.ejs.
 * Every selector is scoped to .meteor-reference-brand so other Meteor tenants
 * and all v1-v7 templates retain their existing layout unchanged. This file
 * must not define a palette: every colour resolves through tokens supplied by
 * the Meteor Color Palette selected in the master panel. Tenant-uploaded logo,
 * background and banner assets remain authoritative.
 */

/* The legacy reference loads only these Lato faces. Keep the family name
   private to this exact-host layer so merely making the font available cannot
   change typography for other Meteor tenants. */
@font-face {
  font-family: "Meteor Reference Lato";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/meteor/fonts/lato/lato-thin.ttf") format("truetype");
}

@font-face {
  font-family: "Meteor Reference Lato";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("/meteor/fonts/lato/lato-thin-italic.ttf") format("truetype");
}

@font-face {
  font-family: "Meteor Reference Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/meteor/fonts/lato/lato-light.ttf") format("truetype");
}

@font-face {
  font-family: "Meteor Reference Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/meteor/fonts/lato/lato-regular.ttf") format("truetype");
}

body.meteor-reference-brand {
  background-color: var(--color-bg-body);
  color: var(--color-text);
  font-family: "Meteor Reference Lato", "Lato", sans-serif;
}

/* Bootstrap 5 adds a 1320px container at 1400px. The legacy Bootstrap 4 alpha
   shell stopped at 1140px, which is the dominant desktop composition cue. */
@media (min-width: 1200px) {
  body.meteor-reference-brand .container {
    max-width: 1140px;
  }
}

body.meteor-reference-brand #app-header,
body.meteor-reference-brand #app-header > .container,
body.meteor-reference-brand #app-header .top-nav {
  background-color: var(--navbar-bg, var(--color-bg-dark));
}

body.meteor-reference-brand #app-header .logo {
  max-width: none;
  padding: 4px;
}

body.meteor-reference-brand #app-header .logo img {
  width: auto;
  max-width: min(480px, 48vw);
  max-height: none;
  object-fit: contain;
}

body.meteor-reference-brand #app-header .header-info {
  margin-top: 16px;
}

body.meteor-reference-brand .form-header-signin .form-control {
  width: 170px;
  min-height: 31px;
  border-color: var(--form-border, var(--color-border-card));
  border-radius: 3px;
  background: var(--provider-logo-plate-bg, var(--provider-plate-bg));
  color: var(--color-text-on-light);
  font-size: 13px;
}

body.meteor-reference-brand .form-header-signin .btn {
  min-height: 31px;
  font-size: 12px;
}

body.meteor-reference-brand .header-info .social-media {
  margin-top: 8px;
}

body.meteor-reference-brand .header-info .social-media .icon-socmed {
  border-color: var(--mtr-line);
  background: var(--mtr-surface);
}

/* The home partial keeps the reference contact-card wrapper even when this
   tenant has no configured contacts. Collapse that empty shell instead of
   leaving a decorative black bar between login and the banner. */
body.meteor-reference-brand .card-socmed:not(:has(.icon-socmed)) {
  display: none;
}

body.meteor-reference-brand .navbar-large {
  border-top: 1px solid var(--mtr-line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  margin-bottom: 0.75em;
}

body.meteor-reference-brand .navbar-large .nav-link {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 0.2rem;
  color: var(--color-link);
  font-size: 13px;
  font-weight: 700;
}

body.meteor-reference-brand .navbar-large .nav-link:hover,
body.meteor-reference-brand .navbar-large .nav-link:focus {
  color: var(--color-link-hover);
}

body.meteor-reference-brand .navbar-large .nav-link.active {
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

body.meteor-reference-brand #homeCarousel {
  opacity: 1;
}

body.meteor-reference-brand #homeCarousel .carousel-inner,
body.meteor-reference-brand #homeCarousel .carousel-item,
body.meteor-reference-brand #homeCarousel img {
  border-radius: 0;
}

body.meteor-reference-brand .games-tab {
  background: var(--navbar-bg, var(--color-bg-dark));
  border-bottom-color: var(--color-primary);
}

body.meteor-reference-brand .all-markets {
  margin-bottom: 0.75em;
}

body.meteor-reference-brand .all-markets .table,
body.meteor-reference-brand .market-table {
  background-color: var(--color-bg-dark);
}

body.meteor-reference-brand .table-wrapper {
  border-color: var(--mtr-line);
  background: var(--mtr-surface);
}

body.meteor-reference-brand .card,
body.meteor-reference-brand .card-market {
  border: 1px solid var(--mtr-line);
  border-radius: 8px;
  background: var(--mtr-surface);
  color: var(--mtr-ink);
}

body.meteor-reference-brand .card .card-header,
body.meteor-reference-brand .card .card-footer {
  background-color: var(--mtr-surface-2);
}

body.meteor-reference-brand .card .card-header {
  border-bottom: 2px solid var(--color-primary);
}

body.meteor-reference-brand .widget-lucky-number {
  background-color: var(--mtr-surface);
}

body.meteor-reference-brand footer {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: var(--color-bg-footer);
}

body.meteor-reference-brand :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* TOTAL4D keeps the reference proportions and square stepped surfaces, but
   every tone in the steps comes from the panel-selected Meteor palette. */
body.meteor-brand--total4d #app-header .logo img {
  max-width: min(380px, 48vw);
}

body.meteor-brand--total4d .navbar-large {
  border: 1px solid var(--mtr-line);
  background: linear-gradient(
    to bottom,
    var(--color-bg-dark) 0%,
    var(--color-bg-dark) 16%,
    var(--color-bg-medium) 41%,
    var(--color-bg-medium) 100%
  );
}

body.meteor-brand--total4d .navbar-large .nav-link {
  min-height: 43px;
  padding-top: 10px;
}

body.meteor-brand--total4d .navbar-large .nav-link.active {
  border-bottom-color: var(--color-primary);
  background-color: var(--color-bg-dark);
}

body.meteor-brand--total4d .card,
body.meteor-brand--total4d .card-market,
body.meteor-brand--total4d .banner-link {
  border-color: var(--mtr-line);
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-dark) 0%,
    var(--color-bg-dark) 16%,
    var(--color-bg-medium) 41%,
    var(--color-bg-medium) 100%
  );
}

body.meteor-brand--total4d footer {
  background-color: var(--color-bg-footer);
}

body.meteor-brand--yypaus #app-header .logo img {
  max-width: min(320px, 48vw);
}

/* BUSUR4D currently has no uploaded logo in node_member. Keep the honest
   site-name fallback, but give it the same visual mass as the reference logo
   rather than presenting a tiny utility label in a mostly empty header. */
body.meteor-brand--busur4d88 #app-header .brand-name {
  padding: 24px 0;
  font-size: 42px;
  line-height: 1;
}

@media (min-width: 768px) {
  body.meteor-brand--totalwla .widget-lucky-number,
  body.meteor-brand--busur4d88 .widget-lucky-number {
    right: 0;
    bottom: 0;
    padding: 16px;
    border-radius: 8px;
  }

  body.meteor-brand--yypaus .widget-lucky-number {
    right: 0;
    padding: 16px;
    border-radius: 8px;
  }
}

@media (max-width: 767.98px) {
  /* The legacy mobile body keeps a 0.75em content inset. node_member's mobile
     layout uses a full-bleed .container-fluid, so restore that inset here
     before reproducing the legacy row/column gutter below. */
  body.meteor-reference-brand #container-body > .content-main {
    padding-right: 0.75em;
    padding-left: 0.75em;
  }

  /* Bootstrap 5's .col-6 reads --bs-gutter-x (1.5rem by default), while the
     legacy grid used 0.375em on each column side. Without this bridge the
     market cards have a 24px centre gap instead of 12px and the row overflows
     the 320px viewport. */
  body.meteor-reference-brand .meteor-market-card-grid {
    --bs-gutter-x: 0.75rem;
  }

  body.meteor-reference-brand #app-header > .container {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.meteor-reference-brand #app-header .logo {
    min-height: 0;
    padding: 8px 4px 4px;
    text-align: left !important;
  }

  body.meteor-reference-brand #app-header .logo img,
  body.meteor-brand--total4d #app-header .logo img,
  body.meteor-brand--yypaus #app-header .logo img {
    width: auto;
    max-width: 100%;
    max-height: 132px;
  }

  body.meteor-reference-brand .mobile-menu {
    min-height: 44px;
    padding: 8px 4px;
  }

  body.meteor-reference-brand .mobile-menu .btn {
    border-color: var(--mtr-line-2);
    background: var(--mtr-surface-2);
    color: var(--mtr-accent);
  }

  body.meteor-reference-brand #container-body {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
  }

  body.meteor-reference-brand .form-home-signin {
    margin: 16px auto 12px;
  }

  body.meteor-reference-brand .form-home-signin .form-control {
    min-height: 48px;
    border-color: var(--form-border, var(--color-border-card));
    border-radius: 4px;
    background: var(--provider-logo-plate-bg, var(--provider-plate-bg));
    color: var(--color-text-on-light);
    font-size: 16px;
  }

  body.meteor-reference-brand .form-home-signin .btn-group {
    min-height: 44px;
  }

  body.meteor-reference-brand .form-home-signin .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 15px;
  }

  body.meteor-reference-brand .games-tab {
    margin-top: 0;
  }

  body.meteor-reference-brand .card-market {
    min-height: 174px;
  }

  body.meteor-reference-brand footer {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (max-width: 575.98px) {
  body.meteor-reference-brand .games-tab {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  body.meteor-reference-brand .games-tab-arrow {
    width: 30px;
    font-size: 20px;
  }

  body.meteor-reference-brand .games-tab .col-games-tab {
    flex-basis: 102px;
    width: 102px;
    min-width: 102px;
    max-width: 102px;
  }

  body.meteor-brand--busur4d88 #app-header .brand-name {
    padding: 24px 0 20px;
    font-size: 38px;
  }

  body.meteor-brand--total4d .form-home-signin .btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
  }

  body.meteor-brand--total4d .form-home-signin .btn-group > .btn {
    flex: 0 0 auto;
    width: 100% !important;
    border-radius: 4px !important;
  }

}