/* ============================================================
   AceSpinz (ace-spinz.casino) - site overrides
   Sen headings, Afacad text, Sen ExtraBold in the logo image.
   Graphite ground, slate cards, white type, the mint of Sign Up and
   Get Bonus, the deep emerald of the Sign Up pill and the bronze of the
   VIP tier card, all taken from the supplied AceSpinz screens.
   Centred column, 1120 px. Split hero with a three deposit card.
   ============================================================ */
:root {
  --font-display: "Sen", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Afacad", "Segoe UI", Arial, sans-serif;
  --az-mint: #4fd1b5;
  --az-mint-2: #74ddc6;
  --az-emerald: #128a74;
  --az-emerald-2: #0f7a66;
  --az-bronze: #c8954a;
  --az-ink: #111314;
  --az-on-mint: #06221c;
  --az-card: #1b1e1f;
  --az-card-2: #232729;
  --az-rule: #2c3133;
  --az-text: #d3d8d6;
  --az-faint: #949c99;
}

body {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.66;
  color: var(--az-text);
  background: var(--color-bg);
}
.container { max-width: 1120px; }

/* ---------- Header: chip buttons ---------- */
.site-header.az-header { background: rgba(17, 19, 20, 0.95); border-bottom: 1px solid var(--az-rule); backdrop-filter: blur(10px); }
.site-header .site-logo img { height: 30px; width: auto; }
.nav-main--desktop { gap: 6px; }
.nav-main--desktop a {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0;
  padding: 0.42rem 0.9rem; border-radius: 999px; color: #e6eae8;
  background: var(--az-card-2); border: 1px solid var(--az-rule);
}
.nav-main--desktop a:hover { color: var(--az-on-mint); background: var(--az-mint); border-color: var(--az-mint); }
.btn { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; border-radius: 999px; }
.btn--primary, main a.btn--primary, .az-register {
  background: var(--az-mint); color: var(--az-on-mint) !important; border: 1px solid var(--az-mint);
  box-shadow: 0 6px 18px rgba(79, 209, 181, 0.18);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--az-mint-2); border-color: var(--az-mint-2); color: var(--az-on-mint) !important; }
.btn--outline { background: transparent; color: #f2f4f3; border: 1px solid #3f4648; }
.btn--outline:hover { background: rgba(79, 209, 181, 0.08); color: #ffffff; border-color: var(--az-mint); }
.site-header .az-register { background: var(--az-emerald); border-color: var(--az-emerald); color: #ffffff !important; box-shadow: none; }
.site-header .az-register:hover { background: var(--az-mint); border-color: var(--az-mint); color: var(--az-on-mint) !important; }

/* ---------- Language switcher ---------- */
.lang-switcher__toggle { border-radius: 999px; border-color: var(--az-rule); }
.az-code {
  display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--az-card-2); border: 1px solid var(--az-rule);
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; color: var(--az-mint);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 210px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr; gap: 2px;
  padding: 8px; background: var(--az-card); border: 1px solid var(--az-rule); border-radius: 14px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(79, 209, 181, 0.1); }
.lang-switcher__menu li[aria-selected="true"] .az-code { background: var(--az-mint); color: var(--az-on-mint); border-color: var(--az-mint); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; padding: 6px 8px; border-radius: 10px; }
.nav-mobile__lang.is-active { background: rgba(79, 209, 181, 0.1); }

/* ---------- Hero: copy left, welcome card right ---------- */
.az-hero {
  padding: 60px 0 36px; text-align: left; border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(17, 19, 20, 0) 0%, rgba(17, 19, 20, 0.5) 70%, #111314 100%),
    url("/assets/img/hero-bg.jpg") center top / cover no-repeat, var(--color-bg);
}
.az-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 46px; align-items: center; }
.az-hero .hero__content { max-width: none; margin: 0; text-align: left; display: block; }
.az-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 14px 5px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  color: #e6eae8; background: var(--az-card-2); border: 1px solid var(--az-rule);
}
.az-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--az-mint); box-shadow: 0 0 0 4px rgba(79, 209, 181, 0.18); }
.az-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.95rem, 3.2vw, 2.8rem); line-height: 1.14; color: #ffffff; letter-spacing: -0.015em;
}
.az-mint { color: var(--az-mint); }
.az-hero__lead p { margin: 0; max-width: 60ch; color: #cdd3d1; font-size: 1.16rem; }
.az-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.az-pack {
  position: relative; padding: 22px 22px 18px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, rgba(18, 138, 116, 0.34), rgba(27, 30, 31, 0.96) 52%), var(--az-card);
  border: 1px solid rgba(79, 209, 181, 0.28); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}
.az-pack__eyebrow { margin: 0 0 4px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--az-bronze); }
.az-pack__total { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 1.42rem; line-height: 1.22; color: #ffffff; }
.az-pack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.az-pack__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: rgba(17, 19, 20, 0.62); border: 1px solid var(--az-rule);
}
.az-pack__n {
  grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; color: var(--az-on-mint); background: var(--az-mint);
}
.az-pack__what { font-size: 0.88rem; line-height: 1.2; color: var(--az-faint); }
.az-pack__val { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: #ffffff; }
.az-pack__note { margin: 12px 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--az-faint); }
@media (max-width: 900px) {
  .az-hero { padding: 38px 0 24px; }
  .az-hero__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Key figures: six separate tiles ---------- */
.az-stats { padding: 6px 0 18px; }
.az-stats__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.az-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 16px;
  background: var(--az-card); border: 1px solid var(--az-rule); border-top: 3px solid var(--az-emerald);
}
.az-stat:nth-child(3n) { border-top-color: var(--az-bronze); }
.az-stat__v { font-family: var(--font-display); font-weight: 800; font-size: 1.34rem; line-height: 1.15; color: #ffffff; white-space: nowrap; }
.az-stat__l { font-size: 0.9rem; line-height: 1.25; color: var(--az-faint); }
@media (max-width: 1000px) { .az-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .az-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .az-stat { padding: 12px; }
  .az-stat__v { font-size: 1.16rem; }
}

/* ---------- Sections ---------- */
.content-section { padding: 54px 0 34px; background: transparent; border: 0; }
.content-section--alt { background: #161819; border-top: 1px solid #222628; border-bottom: 1px solid #222628; }
.content-section > .container { max-width: 1120px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.2;
  color: #ffffff; margin: 0 0 22px; padding: 0 0 0 18px; border: 0; max-width: none; position: relative;
}
.content-section h2::after { display: none !important; }
.content-section h2::before {
  content: "" !important; display: block !important; position: absolute; left: 0; top: 0.14em; bottom: 0.14em; width: 5px;
  border-radius: 4px; background: linear-gradient(180deg, var(--az-mint), var(--az-emerald));
}
.content-section h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; line-height: 1.32;
  color: #f2f4f3; margin: 30px 0 10px; padding: 0; border: 0; text-transform: none;
}
.content-section h3::before {
  content: ""; display: inline-block; width: 18px; height: 3px; margin: 0 10px 0.3em 0; vertical-align: middle;
  border-radius: 2px; background: var(--az-bronze);
}
.content-section p { margin-bottom: 1rem; color: var(--az-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--az-text); }
.content-section ul li::marker { color: var(--az-mint); }
.content-section a:not(.btn) { color: var(--az-mint-2); }
.content-section strong { color: #ffffff; }
.az-callout {
  display: flow-root; margin: 6px 0 20px !important; padding: 14px 18px; border-radius: 14px;
  background: rgba(200, 149, 74, 0.08); border: 1px solid rgba(200, 149, 74, 0.3); color: #eadcc6 !important;
}
@media (max-width: 900px) { .content-section { padding: 40px 0 24px; } }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 320px; max-width: 320px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -4px -6px 8px 28px; }
.content-section .section-illus--left { float: left; margin: -4px 28px 8px -6px; }
.az-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 270px; max-width: 78%; margin: 0 auto 12px; }
}

/* ---------- Tables: emerald head ---------- */
.az-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--az-rule); border-radius: 16px; overflow: hidden; background: var(--az-card); }
.az-table-wrap .az-table-title {
  margin: 0; padding: 12px 18px; max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #ffffff; background: var(--az-card-2);
}
.az-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .az-table-wrap table { width: 100%; min-width: 500px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 1rem; }
.content-section .az-table-wrap th, .content-section .az-table-wrap td { padding: 9px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--az-rule); white-space: normal; }
.content-section .az-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .az-table-wrap thead th {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  color: #ffffff; background: var(--az-emerald-2);
}
.content-section .az-table-wrap tbody tr:hover td { background: rgba(79, 209, 181, 0.05); }
.content-section .az-table-wrap td:first-child { color: #ffffff; font-weight: 600; }
.az-table-note { font-size: 0.94rem; color: var(--az-faint); padding: 10px 16px; margin: 0 !important; border-top: 1px solid var(--az-rule); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .az-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.9rem; }
  .content-section .az-table-wrap th, .content-section .az-table-wrap td { padding: 8px 8px; overflow-wrap: break-word; hyphens: auto; }
}

/* ---------- Numbered steps: bronze rings ---------- */
.az-steps { display: flow-root; counter-reset: azstep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.az-steps li { counter-increment: azstep; position: relative; padding: 3px 0 6px 46px; margin-bottom: 10px; }
.az-steps li::before {
  content: counter(azstep); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--az-bronze);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--az-bronze); background: transparent;
}

/* ---------- FAQ: cards with a plus ---------- */
.az-faq { clear: both; margin: 18px 0 8px; display: grid; gap: 10px; }
.az-faq details { border: 1px solid var(--az-rule); border-radius: 14px; background: var(--az-card); }
.az-faq summary { cursor: pointer; list-style: none; padding: 15px 50px 15px 18px; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; color: #ffffff; }
.az-faq summary::-webkit-details-marker { display: none; }
.az-faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; background: var(--az-card-2); color: var(--az-mint); font-size: 1.1rem; line-height: 1;
}
.az-faq details[open] summary::after { content: "\2212"; background: var(--az-mint); color: var(--az-on-mint); }
.az-faq details p { padding: 0 18px 16px; margin: 0; }

/* ---------- Sign up strip, footer, sticky bar ---------- */
.az-join { padding: 46px 0 52px; }
.az-join__panel {
  display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 20px;
  background: linear-gradient(100deg, var(--az-emerald-2), #173c35 46%, var(--az-card) 100%);
  border: 1px solid rgba(79, 209, 181, 0.28);
}
.az-join__suit { flex-shrink: 0; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: rgba(17, 19, 20, 0.5); color: var(--az-mint); font-size: 2rem; line-height: 1; }
.az-join__text { flex: 1 1 auto; min-width: 0; }
.az-join__text .az-join__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; color: #ffffff; }
.az-join__text p { margin: 0; max-width: 64ch; color: #dbe7e3; }
.az-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .az-join__panel { flex-direction: column; align-items: flex-start; padding: 22px 20px; } }
.site-footer.az-footer { background: #0b0c0d; border-top: 1px solid var(--az-rule); }
.site-footer h5 { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; text-transform: none; color: var(--az-bronze); }
.site-footer .site-logo img { height: 28px; width: auto; }
.footer-badge { border-color: var(--az-rule); border-radius: 999px; color: #e6eae8; }
.sticky-cta { border-top: 1px solid rgba(79, 209, 181, 0.3); background: rgba(17, 19, 20, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 700; color: #ffffff; }
.sticky-cta__bonus { color: var(--az-mint); font-weight: 700; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 22px; width: auto; }
  .site-header .site-logo { min-width: 0; flex-shrink: 0; margin-right: 2px; }
  .nav-toggle { flex-shrink: 0; margin-left: 2px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.8rem !important; padding: 0.5rem 0.85rem !important; white-space: nowrap; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.95rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.7rem !important; padding: 0.45rem 0.55rem !important; } }

.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; overflow: visible; }
.content-section h3 { clear: none; display: flow-root; }
.content-section ul, .content-section ol.az-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section ol.az-steps { padding-left: 0; }
.hero h1, .content-section h2, .content-section h3, .az-table-wrap .az-table-title { text-transform: none; }