/*
 * JEDI77.COM — Dark Side Crimson Lightsaber Theme & Responsive Architecture Override
 * Delivers Dark Jedi crimson plasma styling + zero-overlap, symmetrical responsive layout across 320px–2560px.
 */
@font-face {
  font-family: 'JediOrbitron';
  src: url('/fonts/Orbitron-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'JediCinzel';
  src: url('/fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-bg: #040001;
  --brand-primary: #e5001c;
  --brand-saber-core: #ff3b52;
  --brand-primary-dark: #5e0009;
  --brand-accent-gold: #fdf68f;
  --brand-accent-gold-dark: #d18b31;
  --brand-usdt: #1c8c69;
}

/* ==========================================================================
   1. ROOT OVERFLOW & SCROLLBAR HYGIENE (NO HORIZONTAL OR DOUBLE SCROLLBARS)
   ========================================================================== */
html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--brand-bg);
}

/* Keep SweetAlert2 modals above fixed headers/footers, and keep closed hamburger under welcome popup */
.swal2-container {
  z-index: 99999999 !important;
}
.cd-section {
  z-index: 99999 !important;
}
.modal-is-visible .cd-section {
  z-index: 999999999 !important;
}

/* ==========================================================================
   2. DARK SIDE CRIMSON VISUAL THEME
   ========================================================================== */
/* Top marquee bar — razor-sharp Sith crimson laser strip */
.tt_txd {
  background: linear-gradient(90deg, #520007 0%, #c80016 50%, #520007 100%) !important;
  border-bottom: 1px solid rgba(255, 90, 105, 0.65) !important;
  box-shadow: 0 2px 16px rgba(229, 0, 28, 0.55) !important;
}

/* Hero container — crimson lightsaber horizon edge */
.header_bg {
  border-bottom: 2px solid #ff223b !important;
  box-shadow: 0 6px 28px rgba(214, 0, 24, 0.48), inset 0 -10px 26px rgba(180, 0, 20, 0.25) !important;
}

/* Pulsing Dark Side Force & crimson saber aura on Hero Darth Vader */
@keyframes jediSaberAura {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(229, 0, 28, 0.58)) drop-shadow(0 0 36px rgba(140, 0, 16, 0.38));
    transform: translateY(0px);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255, 38, 62, 0.85)) drop-shadow(0 0 52px rgba(200, 0, 24, 0.52));
    transform: translateY(-4px);
  }
}

.tt_img_b1 img {
  animation: jediSaberAura 3.8s ease-in-out infinite;
  will-change: transform, filter;
}

/* Desktop logo subtle crimson glow */
.logo_pc img {
  filter: drop-shadow(0 0 10px rgba(229, 0, 28, 0.42));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.logo_pc img:hover {
  filter: drop-shadow(0 0 18px rgba(255, 45, 65, 0.8));
  transform: scale(1.02);
}

/* Primary Login & Register Hero CTA buttons — ignited crimson blade style */
.bt_a1 {
  background: linear-gradient(180deg, #ff1e38 0%, #9e0010 100%) !important;
  border: 1px solid rgba(255, 160, 170, 0.65) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(229, 0, 28, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.bt_a1:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(255, 38, 62, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.bt_a2 {
  background: linear-gradient(180deg, #2b2b32 0%, #0b0b0e 100%) !important;
  border: 1px solid #ff243c !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(229, 0, 28, 0.45), inset 0 0 12px rgba(229, 0, 28, 0.22) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.bt_a2:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #420007 0%, #140003 100%) !important;
  box-shadow: 0 0 26px rgba(255, 38, 62, 0.85) !important;
}

/* Section headings & page title banners — obsidian-crimson Imperial bar */
.title_page {
  background: linear-gradient(90deg, #1a0003 0%, #7d000d 50%, #1a0003 100%) !important;
  border-top: 1px solid rgba(255, 70, 88, 0.55) !important;
  border-bottom: 2px solid #ff1e38 !important;
  box-shadow: 0 4px 18px rgba(214, 0, 24, 0.45) !important;
}

.h_slot span, .h_slot {
  text-shadow: 0 0 14px rgba(229, 0, 28, 0.65);
}

/* Provider cards & carousel items — crimson Force rim on hover */
.tt_col_3x figure,
.list_p4xx figure {
  border-radius: 10px;
  border: 1px solid rgba(214, 0, 24, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.tt_col_3x figure:hover,
.list_p4xx figure:hover {
  transform: translateY(-4px);
  border-color: #ff2b44;
  box-shadow: 0 8px 24px rgba(229, 0, 28, 0.6);
}

/* Bottom fixed navigation bar — sleek Dark Jedi command dock */
.fix_footer {
  background: linear-gradient(180deg, #520008 0%, #180003 100%) !important;
  border-top: 2px solid #ff223b !important;
  box-shadow: 0 -4px 22px rgba(229, 0, 28, 0.6) !important;
}
.fix_footer a:hover {
  background: linear-gradient(180deg, #9e0011 0%, #2e0005 100%) !important;
}

/* Hamburger menu trigger button */
.cd-modal-action [data-type="modal-trigger"] {
  background: linear-gradient(135deg, #e5001c 0%, #78000c 100%) !important;
  box-shadow: 0 0 16px rgba(229, 0, 28, 0.7) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Left sticky panel subtle crimson frame */
.img_l img {
  border: 1px solid rgba(229, 0, 28, 0.45);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.85), 0 0 14px rgba(214, 0, 24, 0.3);
}

/* ==========================================================================
   3. FLOATING SIDEBARS & MENU TRIGGER — ZERO OVERLAP ACROSS ALL VIEWPORTS
   ========================================================================== */
/* Never allow .tt_open_menu's invisible wrapper to span 20% width over content */
.tt_open_menu {
  width: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tt_open_menu i {
  float: none !important;
  margin-top: 0 !important;
  display: block;
}

.tt_open_menu .img_l {
  float: none !important;
  display: block;
}

.tt_open_menu img {
  float: none !important;
  margin-top: 0 !important;
}

/* Widescreen Desktops (>= 1580px): align left menu panel below marquee bar to mirror right #topbar */
@media screen and (min-width: 1580px) {
  .tt_open_menu {
    left: 12px !important;
    top: 36px !important;
  }
}

/* Medium-wide laptops (1421px–1579px): scale sidebars to fit cleanly inside side gutters */
@media screen and (min-width: 1421px) and (max-width: 1579px) {
  .tt_open_menu {
    left: 8px !important;
    top: 36px !important;
  }
  .tt_open_menu img,
  #topbar {
    width: 122px !important;
  }
  #topbar {
    right: 8px !important;
  }
  #topbar .tt_tx_line,
  #topbar .tt_tx_telegram {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding: 4px !important;
  }
}

/* Laptops & Landscape Tablets (981px–1420px): hide sidebars so .wrapper (1150px) is 100% unobstructed */
@media screen and (min-width: 981px) and (max-width: 1420px) {
  #topbar,
  #topbar2,
  .tt_open_menu .img_l,
  .tt_open_menu img {
    display: none !important;
  }
  .tt_open_menu {
    left: 10px !important;
    top: 4px !important;
    z-index: 1005 !important;
  }
  .tt_open_menu [data-type="modal-trigger"] {
    border-radius: 999px !important;
  }
  .tt_open_menu i {
    font-size: 18px !important;
    padding: 5px 15px !important;
    line-height: 18px !important;
  }
  .tt_txd {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .tt_txd > .wrapper {
    padding-left: 72px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}

/* Portrait Tablets & Mobile (<= 980px): unify .head_mc top bar + compact hamburger, zero floating card overlap */
@media screen and (max-width: 980px) {
  #topbar,
  #topbar2,
  .tt_open_menu .img_l,
  .tt_open_menu img {
    display: none !important;
  }
  .tt_open_menu {
    left: 10px !important;
    top: 6px !important;
    z-index: 1005 !important;
  }
  .tt_open_menu [data-type="modal-trigger"] {
    border-radius: 999px !important;
  }
  .tt_open_menu i {
    font-size: 18px !important;
    padding: 5px 15px !important;
    line-height: 18px !important;
  }
  /* Reserve space at page bottom for fixed .fix_footer dock */
  body {
    padding-bottom: 84px !important;
  }
}

/* ==========================================================================
   4. HERO SECTION SYMMETRY, LARGE DARTH VADER & NON-OVERLAPPING CTA BUTTONS
   ========================================================================== */
/* Collapse trailing empty <p>&nbsp;</p> inside Hero description across all 33 Hero pages */
.header .tt_txt_seo p + p {
  display: none !important;
}

/* Normalize CTA button container & disable asymmetric horizontal wobble on .b_pay */
.header .bt_ax {
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  box-sizing: border-box;
}

.header .b_pay {
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header .bt_ax a.bt_a1,
.header .bt_ax a.bt_a2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 999px !important;
}

/* Center Darth Vader inside .tt_rb at all screen sizes */
.header .tt_img_b1 {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 auto !important;
}

.header .tt_img_b1 img {
  width: 100%;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Desktop & Tablet 2-Column Balanced Hero (>= 801px, including iPad Air 820x1180, iPad Pro 834/1024, Laptops & Desktops) */
@media screen and (min-width: 801px) {
  .header {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header > .wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: space-between;
    gap: clamp(18px, 2.8vw, 44px);
    padding: clamp(20px, 2.6vw, 34px) clamp(18px, 2.4vw, 28px) !important;
    box-sizing: border-box;
  }
  .header > .wrapper::before,
  .header > .wrapper::after {
    display: none !important;
  }
  .header .tt_lb {
    flex: 1 1 52%;
    max-width: 52%;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header .tt_lb .logo_pc.show_pc {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    margin: 0 0 12px 0 !important;
  }
  .header .tt_lb .logo_pc.show_pc img {
    width: min(100%, 410px);
    height: auto !important;
    display: block;
  }
  .header .tt_txt_seo {
    float: none !important;
    width: 100% !important;
    padding: 4px 0 16px 0 !important;
    margin: 0 !important;
    font-size: clamp(14px, 1.32vw, 16px) !important;
    line-height: 1.62 !important;
    text-align: left;
  }
  .header .tt_txt_seo p {
    margin: 0 !important;
  }
  .header .bt_ax {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    max-width: 496px;
    gap: clamp(10px, 1.4vw, 18px);
    padding: 0 !important;
    margin: 4px auto 0 !important;
  }
  .header .b_pay {
    display: flex !important;
    width: 100% !important;
    max-width: none;
  }
  .header .bt_ax a.bt_a1,
  .header .bt_ax a.bt_a2 {
    width: 100% !important;
    max-width: none;
    min-height: clamp(44px, 4.2vw, 50px);
    padding: 10px clamp(10px, 1.5vw, 22px) !important;
    font-size: clamp(16.5px, 1.75vw, 21px) !important;
  }
  .header .tt_rb {
    flex: 1 1 48%;
    max-width: 48%;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header .tt_img_b1 img {
    width: 100%;
    max-width: 475px;
    height: auto !important;
  }
}

/* Compact Tablet / Phablet & Mobile Stacked Hero (<= 800px, including iPad Mini 768x1024 & Phones 320px–480px) */
@media screen and (max-width: 800px) {
  .head_mc > a.logo_m:not(.install_m) {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    background: #050001 !important;
    padding: 6px 12px !important;
    box-sizing: border-box;
  }
  .head_mc > a.logo_m:not(.install_m) img {
    width: min(100%, 520px);
    height: auto !important;
    display: block;
  }
  .header > .wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 18px clamp(16px, 4vw, 28px) 24px !important;
    box-sizing: border-box;
  }
  .header > .wrapper::before,
  .header > .wrapper::after {
    display: none !important;
  }
  .header .tt_lb {
    width: 100% !important;
    max-width: 640px;
    float: none !important;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header .logo_pc.show_m {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    margin: 0 0 10px 0 !important;
  }
  .header .logo_pc.show_m img {
    width: min(270px, 76vw);
    height: auto !important;
    display: block;
  }
  .header .tt_txt_seo {
    float: none !important;
    width: 100% !important;
    padding: 4px 4px 16px !important;
    margin: 0 !important;
    font-size: clamp(14px, 2.4vw, 15.5px) !important;
    line-height: 1.62 !important;
    text-align: center;
    box-sizing: border-box;
  }
  .header .tt_txt_seo p {
    margin: 0 !important;
  }
  .header .tt_rb {
    width: 100% !important;
    float: none !important;
    margin: 18px auto 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header .tt_img_b1 img {
    width: min(84vw, 410px) !important;
    max-width: 410px;
    height: auto !important;
  }
}

/* 481px–800px (e.g. iPad Mini 768x1024, 600x900): equal side-by-side CTA buttons */
@media screen and (min-width: 481px) and (max-width: 800px) {
  .header .bt_ax {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    max-width: 480px;
    gap: 14px;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .header .b_pay {
    display: flex !important;
    width: 100% !important;
  }
  .header .bt_ax a.bt_a1,
  .header .bt_ax a.bt_a2 {
    width: 100% !important;
    min-height: 48px;
    padding: 10px 16px !important;
    font-size: 19px !important;
  }
}

/* <= 480px (Phones 320px–480px): perfectly aligned full-width stacked CTA pills */
@media screen and (max-width: 480px) {
  .header .bt_ax {
    width: 100% !important;
    max-width: 340px;
    flex-direction: column;
    gap: 12px;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .header .b_pay {
    display: flex !important;
    width: 100% !important;
  }
  .header .bt_ax a.bt_a1,
  .header .bt_ax a.bt_a2 {
    width: 100% !important;
    min-height: 46px;
    padding: 10px 20px !important;
    font-size: 19px !important;
  }
}

/* ==========================================================================
   5. INNER CONTAINERS, GRIDS, CAROUSELS & SUBPAGES RESPONSIVE POLISH
   ========================================================================== */
/* Keep Owl Carousel arrows & decorative coin badges inside viewport on <= 1320px */
@media screen and (max-width: 1320px) {
  .owl-carousel .owl-nav .owl-prev {
    left: 8px !important;
  }
  .owl-carousel .owl-nav .owl-next {
    right: 8px !important;
  }
  .tx_h1 .-logo-coin {
    right: 0 !important;
  }
}

/* Ensure .wrapper-c has comfortable side breathing room on tablets & small laptops */
@media screen and (max-width: 1180px) {
  .wrapper-c {
    padding-left: clamp(12px, 2vw, 20px);
    padding-right: clamp(12px, 2vw, 20px);
    box-sizing: border-box;
  }
}

/* Symmetrical 3-column provider grid on mobile/small tablets so cards are dead-center */
@media screen and (max-width: 620px) {
  .bg_g1 .wrapper-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .bg_g1 .wrapper-c > .h_slot,
  .bg_g1 .wrapper-c > .tx_h2 {
    flex: 0 0 100%;
  }
  .bg_g1 .wrapper-c > .tt_col_3x {
    float: none !important;
    width: calc(33.333% - 6px) !important;
    margin: 0 !important;
  }
}

/* Prevent Bootstrap .row negative margins (-15px) from overflowing 10px-padded .tt_content */
@media screen and (max-width: 980px) {
  .tt_content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Member Card-Open (/cardopen) responsive 3x2 grid for legacy .col-xs-4 inside Bootstrap 4 */
.body_ > .col-xs-4 {
  box-sizing: border-box;
  padding: 8px;
}
@media screen and (max-width: 991px) {
  .body_ > .col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@media screen and (max-width: 575px) {
  .body_ .flip-card {
    height: auto !important;
    aspect-ratio: 207 / 300;
  }
  .txx {
    font-size: clamp(18px, 5vw, 26px) !important;
    padding: 8px 10px;
  }
}