/* ═══════════════════════════════════════════════════════════════
   Mr. Jhole — shared UI layer for the logged-in app (loaded last via <x-nav-left>)
   1. ONE button system, matching the marketing site
   2. Dark-mode modal surfaces
═══════════════════════════════════════════════════════════════ */
:root { --mj-red: #FF2F5E; --mj-red-h: #FF4572; --mj-red-d: #A50F37; }

/* ── 1. Buttons ─────────────────────────────────────────────── */
/* Primary: filled red, 14px radius, chunky bottom edge, presses down */
html body :is(.topbar-post-btn, .btn-post-offer, .open-modal, .le-btn, .hub-empty-btn, .btn-primary, .btn-msg, .btn-book,
  .seller-msg-btn, .pw-contact-btn, .biz-contact-btn, .btn-radar, .club-act-primary, .compose-action-btn.ca-sell,
  .hc-btn.primary, .flash-submit-btn, .cg-submit-btn, .btn-main) {
  background: var(--mj-red) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--mj-red-d) !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important;
  transition: transform .1s, box-shadow .1s, background .15s;
}
html body :is(.topbar-post-btn, .btn-post-offer, .open-modal, .le-btn, .hub-empty-btn, .btn-primary, .btn-msg, .btn-book,
  .seller-msg-btn, .pw-contact-btn, .biz-contact-btn, .btn-radar, .club-act-primary, .compose-action-btn.ca-sell,
  .hc-btn.primary, .flash-submit-btn, .cg-submit-btn, .btn-main):hover:not(:disabled) { background: var(--mj-red-h) !important; transform: translateY(-1px); box-shadow: 0 5px 0 var(--mj-red-d) !important; }
html body :is(.topbar-post-btn, .btn-post-offer, .open-modal, .le-btn, .hub-empty-btn, .btn-primary, .btn-msg, .btn-book,
  .seller-msg-btn, .pw-contact-btn, .biz-contact-btn, .btn-radar, .club-act-primary, .compose-action-btn.ca-sell,
  .hc-btn.primary, .flash-submit-btn, .cg-submit-btn, .btn-main):active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--mj-red-d) !important; }
html body :is(.topbar-post-btn, .btn-post-offer, .open-modal, .le-btn, .hub-empty-btn, .btn-primary, .btn-msg, .btn-book,
  .seller-msg-btn, .pw-contact-btn, .biz-contact-btn, .btn-radar, .club-act-primary, .flash-submit-btn, .cg-submit-btn, .btn-main):disabled { opacity: .55; box-shadow: 0 2px 0 var(--mj-red-d) !important; }

/* Secondary: quiet surface, same radius, no shadow */
html body :is(.compose-action-btn.ca-deal, .compose-action-btn.ca-guff, .club-act-ghost, .hc-btn.secondary, .snippet-post-btn, .report-btn) {
  border-radius: 14px !important; font-weight: 700 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important; border: 1.5px solid var(--border-strong) !important;
}
html body :is(.compose-action-btn.ca-deal, .compose-action-btn.ca-guff, .club-act-ghost, .hc-btn.secondary, .snippet-post-btn, .report-btn):hover { border-color: var(--mj-red) !important; color: var(--mj-red) !important; }
html[data-theme="dark"] body :is(.compose-action-btn.ca-deal, .compose-action-btn.ca-guff, .club-act-ghost, .hc-btn.secondary, .snippet-post-btn, .report-btn) { color: #F5F7FC !important; border-color: rgba(255,255,255,.22) !important; }
html[data-theme="dark"] body :is(.compose-action-btn.ca-deal, .compose-action-btn.ca-guff, .club-act-ghost, .hc-btn.secondary, .snippet-post-btn, .report-btn):hover { color: #FF8FA9 !important; border-color: var(--mj-red) !important; }

/* Pills / tabs / toggles: active = same red, flat */
html body :is(.cat-tab.active, .filter-pill.active, .type-filter-btn.active, .pfm-pill.active, .view-btn.active, .pz-view-btn.active, .lc-pill.active, .tab-item.active) {
  background: var(--mj-red) !important; color: #fff !important; border-color: var(--mj-red) !important; box-shadow: none !important;
}
html body :is(.cat-tab, .filter-pill, .type-filter-btn, .pfm-pill, .lc-pill) { border-radius: 999px !important; font-weight: 700; }

/* ── 2. Dark modals ─────────────────────────────────────────── */
html[data-theme="dark"] body :is(.modal-content, .flash-modal-inner, .create-group-modal, .browse-modal, .snippet-modal, .report-modal, .gift-modal,
  .chat-drawer, .drop-sheet, .qr-claim-modal, .crop-modal, .modal) { background-color: #0A1B3A; color: #F5F7FC; border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] body .flash-modal-inner > *:first-child:not(.flash-modal-header) { background: #0D2044; }
html[data-theme="dark"] body :is(.modal-footer, .flash-modal-footer, .modal-header, .flash-modal-header) { background: transparent; border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] body :is(.modal-content, .flash-modal-inner, .create-group-modal, .browse-modal, .snippet-modal, .report-modal, .gift-modal, .chat-drawer, .drop-sheet, .qr-claim-modal, .crop-modal) :is(input, select, textarea) {
  background: #12264A; color: #F5F7FC; border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] body :is(.modal-content, .flash-modal-inner, .create-group-modal, .browse-modal, .snippet-modal, .report-modal, .gift-modal, .chat-drawer, .drop-sheet) :is(input, textarea)::placeholder { color: #8393B4; }

/* Two-pane modals (Flash Blast, Create Group, Post Offer): the left pane was a light gradient */
html[data-theme="dark"] body :is(.flash-left-panel, .radar-post-left, .cg-left, .cg-illus, [class*="modal-left"], [class*="left-panel"]):not(.left-panel) {
  background: linear-gradient(160deg, #0F2750 0%, #0A1B3A 100%) !important; color: #F5F7FC !important; border-color: rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] body :is(.flash-left-title, .flash-left-sub) { color: #F5F7FC !important; }
html[data-theme="dark"] body .flash-left-sub { color: #B4C1DC !important; }
html[data-theme="dark"] body .flash-left-title span, html[data-theme="dark"] body .flash-left-title em { color: #FF8FA9 !important; }
html[data-theme="dark"] body :is(.flash-left-step, .flash-left-perk) { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #F5F7FC !important; }
html[data-theme="dark"] body :is(.flash-price-wrap, .flash-qty-btn, .flash-qty-chip, .expire-btn, .flash-location-row, .flash-media-zone) { background: #12264A !important; color: #F5F7FC !important; border: 1px solid rgba(255,255,255,.14) !important; }
html[data-theme="dark"] body .flash-price-wrap input, html[data-theme="dark"] body .flash-price-wrap span { background: transparent !important; color: #F5F7FC !important; box-shadow: none !important; }
html[data-theme="dark"] body .expire-btn.active, html[data-theme="dark"] body .expire-btn.selected { background: #FF2F5E !important; border-color: #FF2F5E !important; color: #fff !important; }
html[data-theme="dark"] body .flash-location-row { color: #F5F7FC !important; }
html[data-theme="dark"] body :is(.flash-close-btn, .cg-close-btn, .modal-close, .close-modal) { background: rgba(255,255,255,.08) !important; color: #F5F7FC !important; border: 0 !important; }
html[data-theme="dark"] body :is(.radar-left-note, .radar-left-reward, .radar-reward, .pasal-left-reward, [class*="left-reward"], [class*="left-note"]) { background: rgba(255,194,74,.12) !important; border: 1px solid rgba(255,194,74,.35) !important; color: #FFD98A !important; }
html[data-theme="dark"] body :is(.radar-left-note, .radar-left-reward, .radar-reward, .pasal-left-reward, [class*="left-reward"], [class*="left-note"]) * { color: #FFD98A !important; }