/* ================================================================
   PP Slot child theme — route component system
   Loaded after assets/css/design-system.css. Adds the component
   families the 25 route pages need (task rails, verification desks,
   discipline ledgers, wager boards, wallet tables, FAQ categories,
   news feed, trust desks, editorial splits) on top of the shared
   cobalt-command light-premium tokens. No new palette: every colour
   here resolves to a design-system variable.
   ================================================================ */

/* ---------------------------------------------------------------- section ledger */
.mk-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 14px;
}
.mk-section-head > h2{
  margin:0; padding-bottom:8px; font-size:clamp(22px,3vw,31px);
  color:var(--site-primary-dark); border-bottom:3px solid var(--site-accent);
  display:inline-block; line-height:1.6;
}
.mk-section-head .mk-section-meta{
  font-size:13px; font-weight:700; color:var(--site-ink-soft);
  background:var(--site-surface-2); border:1px solid var(--site-border);
  border-radius:999px; padding:5px 14px; white-space:nowrap;
}
.mk-section-intro{ font-size:16.5px; line-height:1.86; color:var(--site-ink-soft); margin:0 0 14px; max-width:88ch; }
.mk-section > p:last-child{ margin-bottom:0; }

/* Numbered definition ledger for step-by-step or rule-by-rule copy */
.mk-ledger{ list-style:none; margin:18px 0; padding:0; display:grid; gap:14px; }
.mk-ledger > li{
  background:var(--site-surface); border:1px solid var(--site-border);
  border-radius:var(--radius-md); padding:18px 20px;
}
.mk-ledger h4{ margin:0 0 6px; font-size:16.5px; color:var(--site-primary-dark); line-height:1.6; }
.mk-ledger p{ margin:0; font-size:15.5px; line-height:1.84; }
.mk-ledger .mk-ledger-tag{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-size:12px; font-weight:800; letter-spacing:.3px;
  background:var(--site-surface-2); border:1px solid var(--site-border);
  border-radius:999px; padding:2px 10px; color:var(--site-accent-dark);
}

/* Key-value fact box (limits, hours, thresholds) */
.mk-factbox{
  background:var(--site-surface-2); border:1px solid var(--site-border);
  border-radius:var(--radius-md); padding:16px 20px; margin:18px 0;
}
.mk-factbox h3{ margin:0 0 10px; font-size:16px; color:var(--site-primary-dark); }
.mk-factbox dl{ margin:0; display:grid; gap:8px; }
.mk-factbox dt{ font-size:13px; font-weight:800; color:var(--site-accent-dark); letter-spacing:.2px; }
.mk-factbox dd{ margin:0 0 4px; font-size:15.5px; line-height:1.78; }

/* ---------------------------------------------------------------- hero variants */
.mk-hero.mk-hero-porcelain{
  background:linear-gradient(150deg,#ffffff 0%, #eef4f8 55%, #e2eef4 100%);
}
.mk-hero.mk-hero-ledger{
  background:linear-gradient(118deg,#f6fafc 0%, #e6eff5 100%);
  border-left:5px solid var(--site-accent);
}
.mk-hero.mk-hero-narrow{ max-width:960px; margin-left:auto; margin-right:auto; }
.mk-hero-kicker{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin:16px 0 0;
  font-size:13.5px; color:var(--site-ink-soft);
}
.mk-hero-kicker b{ color:var(--site-primary-dark); }

/* ---------------------------------------------------------------- task cards */
.mk-task-card{ display:flex; flex-direction:column; gap:8px; }
.mk-task-card .mk-task-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:var(--site-primary); color:#fff; font-weight:800; font-size:14px;
}
.mk-task-card .mk-task-head{ display:flex; align-items:center; gap:10px; }
.mk-task-card ul{ margin:0; padding-inline-start:20px; font-size:14.5px; line-height:1.8; }
.mk-task-card .mk-task-act{
  margin-top:auto; font-size:14px; font-weight:800; color:var(--site-primary);
  text-decoration:none;
}
.mk-task-card .mk-task-act:hover{ color:var(--site-accent-dark); text-decoration:underline; }

/* ---------------------------------------------------------------- split with caption */
.mk-split-figure{ margin:0; }
.mk-split-figure figcaption{ margin-top:8px; }
.mk-split.mk-split-tight{ gap:22px; align-items:flex-start; }
.mk-split > div > p{ line-height:1.88; font-size:16.5px; }
.mk-split > div > ul{ padding-inline-start:20px; line-height:1.86; font-size:16.5px; }

/* ---------------------------------------------------------------- step timeline */
.mk-steps.mk-steps-wide li{ padding-left:52px; margin-bottom:18px; }
.mk-steps.mk-steps-wide li::before{ width:36px; height:36px; font-size:15px; }
.mk-steps li p{ margin:8px 0 0; }
.mk-steps li strong{ color:var(--site-primary-dark); }

/* Caution / attention list, used for risk and rule warnings */
.mk-warn-list{ list-style:none; margin:16px 0; padding:0; display:grid; gap:12px; }
.mk-warn-list li{
  background:#fff8ec; border:1px solid #e8d0a0; border-left:4px solid var(--site-gold);
  border-radius:var(--radius-sm); padding:13px 16px; font-size:15px; line-height:1.8;
}

/* ---------------------------------------------------------------- verification desk */
.mk-verify{
  background:var(--site-surface); border:1px solid var(--site-border);
  border-radius:var(--radius-lg); padding:22px 24px; margin:22px 0; box-shadow:var(--shadow-soft);
}
.mk-verify-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.mk-verify-head h3{ margin:0; font-size:18px; color:var(--site-primary-dark); }
.mk-verify-head .mk-verify-badge{
  flex:0 0 auto; font-size:12.5px; font-weight:800; letter-spacing:.3px;
  background:var(--site-primary); color:#fff; border-radius:999px; padding:4px 12px;
}
.mk-verify ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.mk-verify li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.82; }
.mk-verify li::before{
  content:""; position:absolute; left:4px; top:10px; width:11px; height:11px;
  border:2px solid var(--site-accent); border-radius:3px;
}
.mk-verify li b{ color:var(--site-primary-dark); }

/* ---------------------------------------------------------------- discipline ledger (sports hubs) */
.mk-ledge{ width:100%; border-collapse:separate; border-spacing:0; margin:18px 0; font-size:15px; }
.mk-ledge thead th{
  background:var(--site-surface-2); color:var(--site-primary-dark);
  font-size:13.5px; font-weight:800; letter-spacing:.2px; text-align:left;
  padding:11px 14px; border-bottom:2px solid var(--site-accent);
}
.mk-ledge tbody td{
  padding:12px 14px; border-bottom:1px solid var(--site-border);
  line-height:1.78; vertical-align:top; background:var(--site-surface);
}
.mk-ledge tbody tr:nth-child(even) td{ background:var(--site-surface-2); }
.mk-ledge tbody th{
  padding:12px 14px; border-bottom:1px solid var(--site-border); text-align:left;
  font-size:15px; color:var(--site-primary-dark); background:var(--site-surface);
  white-space:nowrap;
}

/* Discipline hub strip: five equal cards, real discipline imagery */
.mk-sport-grid.mk-sport-grid-tall .mk-sportimgwrap{ aspect-ratio:4/5; }
.mk-sport-grid.mk-sport-grid-tall .mk-sport-card img{ object-position:center top; }
.mk-sport-grid .mk-sport-card .mk-sport-kicker{
  display:block; font-size:12px; font-weight:800; letter-spacing:.3px;
  color:var(--site-accent-dark); margin:0 0 3px;
}

/* ---------------------------------------------------------------- wager board (live tables / match boards) */
.mk-board{ margin:20px 0; border:1px solid var(--site-border); border-radius:var(--radius-md); overflow:hidden; background:var(--site-surface); }
.mk-board-head{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:baseline;
  padding:14px 18px; background:var(--site-surface-2); border-bottom:1px solid var(--site-border);
}
.mk-board-head h3{ margin:0; font-size:17px; color:var(--site-primary-dark); }
.mk-board-head .mk-board-tag{
  font-size:12.5px; font-weight:800; color:var(--site-accent-dark);
  background:var(--site-surface); border:1px solid var(--site-border);
  border-radius:999px; padding:3px 12px;
}
.mk-board-body{ padding:16px 18px; }
.mk-board-body p{ margin:0 0 10px; font-size:15.5px; line-height:1.82; }
.mk-board-body p:last-child{ margin-bottom:0; }
.mk-board-rows{ list-style:none; margin:0; padding:0; }
.mk-board-rows li{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px dashed var(--site-border); font-size:15px; line-height:1.7;
}
.mk-board-rows li:last-child{ border-bottom:0; }
.mk-board-rows .mk-board-k{ color:var(--site-ink-soft); }
.mk-board-rows .mk-board-v{ font-weight:800; color:var(--site-primary-dark); }

/* Market chip row for match/odds context (informational, no live prices) */
.mk-market-row{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.mk-market{
  font-size:14px; font-weight:700; color:var(--site-ink-soft);
  background:var(--site-surface-2); border:1px solid var(--site-border);
  border-radius:999px; padding:8px 16px;
}

/* ---------------------------------------------------------------- payment / wallet */
.mk-pay-card .mk-pay-meta{ margin:10px 0 0; font-size:13px; color:var(--site-ink-soft); line-height:1.7; }
.mk-pay-card .mk-pay-meta b{ color:var(--site-primary-dark); }
.mk-pay-card ul{ margin:10px 0 0; padding-inline-start:18px; font-size:14.5px; line-height:1.78; }
.mk-method-badge{
  display:inline-block; margin:0 8px 8px 0; font-size:13px; font-weight:800;
  background:var(--site-surface); border:1px solid var(--site-border);
  border-radius:999px; padding:6px 14px; color:var(--site-primary-dark);
}

/* Wallet comparison table keeps long Myanmar labels readable on handsets */
.mk-table.mk-table-wallet td, .mk-table.mk-table-wallet th{ min-width:120px; }

/* ---------------------------------------------------------------- FAQ categories */
.mk-faq-cat{ margin:0 0 26px; }
.mk-faq-cat > h3{
  font-size:18px; color:var(--site-primary-dark); margin:0 0 4px;
  padding:0 0 6px; border-bottom:2px solid var(--site-border);
}
.mk-faq-cat > .mk-faq-cat-note{ font-size:14.5px; color:var(--site-ink-soft); margin:8px 0 6px; line-height:1.78; }
.mk-faq-nav{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.mk-faq-nav a{
  font-size:13.5px; font-weight:800; text-decoration:none;
  background:var(--site-surface); border:1px solid var(--site-border);
  border-radius:999px; padding:8px 16px; color:var(--site-primary-dark);
}
.mk-faq-nav a:hover{ border-color:var(--site-primary); color:var(--site-primary); }

/* ---------------------------------------------------------------- news feed extras */
.mk-feed.mk-feed-dense .mk-feed-item{ padding:16px 18px; }
.mk-feed-item .mk-feed-tag{
  display:inline-block; margin-left:8px; font-size:11.5px; font-weight:800;
  letter-spacing:.3px; color:var(--site-accent-dark);
  background:var(--site-surface-2); border:1px solid var(--site-border);
  border-radius:999px; padding:2px 10px; vertical-align:middle;
}
.mk-feed-item h3{ line-height:1.6; }
.mk-editorial-note{
  background:var(--site-surface); border:1px solid var(--site-border);
  border-left:4px solid var(--site-primary); border-radius:var(--radius-md);
  padding:16px 20px; margin:22px 0; font-size:15px; line-height:1.82;
}
.mk-editorial-note h3{ margin:0 0 8px; font-size:16.5px; color:var(--site-primary-dark); }

/* ---------------------------------------------------------------- shelf + figure */
.mk-shelf{ margin:22px 0; }
.mk-shelf-title{
  font-size:16.5px; color:var(--site-primary-dark); margin:0 0 4px;
  display:flex; align-items:center; gap:10px;
}
.mk-shelf-title::after{
  content:""; flex:1 1 auto; height:1px; background:var(--site-border);
}
.mk-shelf .mk-card-grid{ margin-top:12px; }
.mk-figure{ margin:22px 0; }
.mk-figure img{
  width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); display:block;
}
.mk-figure figcaption{ margin-top:9px; }

/* ---------------------------------------------------------------- trust desk */
.mk-trust-strip .mk-trust-group{ margin-top:18px; }
.mk-trust-strip .mk-trust-group h3{
  margin:0 0 10px; font-size:15.5px; color:var(--site-primary-dark);
}
.mk-trust-strip .mk-trust-row.mk-trust-row-sm img{ height:28px; }
.mk-trust-strip .mk-note{ border-left:0; background:transparent; padding:0; }

/* ---------------------------------------------------------------- disclosure variants */
.mk-disclosure.mk-disclosure-quiet{
  background:var(--site-surface-2); border-color:var(--site-border);
}
.mk-disclosure h3{
  margin:0 0 8px; font-size:16px; color:var(--site-primary-dark);
}

/* ---------------------------------------------------------------- inline CTA strip */
.mk-inline-cta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  background:var(--site-surface); border:1px solid var(--site-border); border-left:5px solid var(--site-accent);
  border-radius:var(--radius-md); padding:18px 22px; margin:26px 0;
}
.mk-inline-cta p{ margin:0; font-size:15.5px; line-height:1.8; max-width:62ch; }
.mk-inline-cta .mk-cta-row{ margin:0; }

/* ---------------------------------------------------------------- faq container */
/* The .mk-faq wrapper groups <details> items; spacing belongs to the container so
   a standalone faq() block and a faq_groups() category both breathe the same. */
.mk-faq{ margin:0 0 10px; }
.mk-faq > .mk-faq-item:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------- footer blocks */
.mk-custom-footer .mk-footer-address-block{ margin-top:12px; }

/* ---------------------------------------------------------------- responsive polish */
@media (max-width:780px){
  .mk-ledger > li{ padding:15px 16px; }
  .mk-verify{ padding:18px 16px; }
  .mk-board-body{ padding:14px 14px; }
  .mk-inline-cta{ padding:16px 16px; }
  .mk-table.mk-table-wallet th, .mk-table.mk-table-wallet td{ font-size:14px; padding:9px 10px; }
  .mk-ledge thead th, .mk-ledge tbody td, .mk-ledge tbody th{ padding:10px 10px; font-size:14px; }
  .mk-factbox{ padding:14px 16px; }
}
@media (max-width:600px){
  .mk-sport-grid.mk-sport-grid-tall{ grid-template-columns:repeat(2,1fr); }
  .mk-task-grid{ grid-template-columns:1fr; }
  .mk-pay-grid{ grid-template-columns:1fr; }
  .mk-board-head{ padding:12px 14px; }
  .mk-section-head{ align-items:flex-start; }
}

/* ---------------------------------------------------------------- breadcrumb */
/* Rendered by mkpp_echo_breadcrumb_trail() on astra_entry_top for every
   non-front page. It sits above the route hero, so it stays quiet: soft ink,
   no background, and it wraps rather than overflowing on a narrow handset. */
.mk-breadcrumb{
  max-width:1180px; margin:14px auto 0; padding:0 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:13px; color:var(--site-ink-soft);
}
.mk-breadcrumb a{ color:var(--site-primary); text-decoration:none; font-size:13px; }
.mk-breadcrumb a:hover{ color:var(--site-accent-dark); text-decoration:underline; }
.mk-breadcrumb-sep{ color:var(--site-ink-soft); opacity:.55; }
.mk-breadcrumb [aria-current="page"]{ color:var(--site-ink-soft); }

/* ---------------------------------------------------------------- footer brand */
/* `.mk-footer-brand` is the brand column wrapper inside .mk-footer-top. */
.mk-footer-brand{ min-width:0; }
.mk-footer-brand .mk-footer-social-label{
  display:block; font-size:12.5px; font-weight:800; letter-spacing:.3px;
  text-transform:none; color:var(--site-accent); margin:0 0 8px;
}