/* CrimeIncGraduation.css (PUBLIC PAGES) - consolidated */

/* ============================================================
   Crime Incorporated — Graduation (Pages / Listing System)
   File: /functions/css/CrimeIncGraduation.css
   Build: 2026-01-10-ALS-Header
   ============================================================ */

:root{
  --ci-bg: #050609;
  --ci-ink: #e9e9d1;

  --ci-gold: #ffbe3c;
  --ci-gold-soft: rgba(255,190,60,.35);

  --ci-glass: rgba(0,0,0,.38);
  --ci-glass-2: rgba(0,0,0,.55);

  --ci-border: rgba(255,190,60,.18);
  --ci-shadow: 0 18px 44px rgba(0,0,0,.70);

  --ci-radius: 22px;
  --ci-radius-sm: 14px;

  /* your sizing rules */
  --ci-maxw: 900px;
  --ci-safe: 440px;

  /* Listing System header height (you asked for smaller) */
  --als-header-h: 300px;
}

/* Base */
*{ box-sizing:border-box; }
img{ display:block; max-width:100%; }
hr{ border:0; height:1px; background: rgba(255,190,60,.18); margin: 12px 0 16px; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:.3px; }

.ci-als{
  color: var(--ci-ink);
}

/* ------------------------------------------------------------
   Listing System Header
   - 900w target, 300px tall
   - Crop edges, never squeeze
   ------------------------------------------------------------ */
.alsHeader{
  width: min(var(--ci-maxw), 100%);
  height: var(--als-header-h);
  margin: 0 auto 14px;
  border-radius: var(--ci-radius);
  overflow:hidden;
  position:relative;
  background: #000;
  border: 1px solid rgba(255,190,60,.14);
  box-shadow: var(--ci-shadow);
}

.alsHeaderImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;          /* CRITICAL: crop edges */
  object-position: 50% 50%;  /* tweak later if needed */
  filter: saturate(1.03) contrast(1.03);
}

/* overlay to help text/buttons readability later */
.alsHeaderOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 240px at 50% 55%, rgba(0,0,0,.08), rgba(0,0,0,.52)),
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.62));
}

.alsHeaderInner{
  width: min(var(--ci-safe), 92vw);
  margin: 0 auto;
  height: 100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 16px 12px 14px;
}

/* optional subtitle style (left for you if needed later) */
.alsSub{
  font-size: 13px;
  letter-spacing:.4px;
  opacity:.88;
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
}

/* ------------------------------------------------------------
   Sections / Cards
   ------------------------------------------------------------ */
.alsSection{
  width: min(var(--ci-maxw), 100%);
  margin: 0 auto;
  padding: 0 10px 16px;
}

.sales{
  border-radius: var(--ci-radius);
  background: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,.48));
  border: 1px solid rgba(255,190,60,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.66);
  padding: 14px 14px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sales h1{
  font-size: 18px;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
}

/* hosts where your JS injects content */
#postsContainer,
#merchGridHost{
  min-height: 60px;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 740px){
  :root{ --als-header-h: 260px; }
  .sales{ padding: 12px 12px 16px; }
}

@media (max-width: 520px){
  :root{ --als-header-h: 230px; }
  .alsSection{ padding: 0 8px 14px; }
}


/* --- merged: CrimeIncorporated.css --- */

/* CrimeIncorporated.css — starter front-page styles */
:root{
  --bg:#0a0a0a;
  --glass: rgba(255,255,255,0.06);
  --accent:#f04e2b;
  --text:#eaeaea;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Helvetica,Arial,sans-serif}
#CrimeIncRepresentation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
.header img{max-width:420px}
.pinInput input{font-size:1.25rem;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text)}
.crimeButton{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.navigationPopup{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.6);}
main{max-width:980px;margin:22px auto;padding:12px}
footer{padding:18px;text-align:center;font-size:0.9rem;opacity:0.8}
/* Simple glass card */
.glass{background:var(--glass);padding:18px;border-radius:12px}


/* --- merged: ci_legal.css --- */

/* ci_legal.css
   Scoped legal-page styling for Crime Incorporated.
   Keep selectors under .ciLegal to avoid impacting the rest of the site.
*/

.ciLegal {
  --ci-legal-bg: rgba(0, 0, 0, 0.78);
  --ci-legal-panel: rgba(15, 15, 15, 0.88);
  --ci-legal-border: rgba(255, 215, 0, 0.35);
  --ci-legal-border-strong: rgba(255, 215, 0, 0.55);
  --ci-legal-text: rgba(255, 255, 255, 0.92);
  --ci-legal-muted: rgba(255, 255, 255, 0.72);
  --ci-legal-link: #FFD700;
  --ci-legal-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

  color: var(--ci-legal-text);
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 12px 28px;
  box-sizing: border-box;
}

.ciLegal a {
  color: var(--ci-legal-link);
  text-decoration: none;
}

.ciLegal a:hover,
.ciLegal a:focus {
  text-decoration: underline;
}

.ciLegalCard {
  background: var(--ci-legal-bg);
  border: 1px solid var(--ci-legal-border);
  border-radius: 14px;
  box-shadow: var(--ci-legal-shadow);
  padding: 16px 16px;
}

.ciLegalHeader {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ciLegalHeaderMain h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ciLegalMeta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ci-legal-muted);
}

.ciLegalActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ciLegalBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--ci-legal-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ci-legal-text);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}

.ciLegalBtn:hover,
.ciLegalBtn:focus {
  border-color: var(--ci-legal-border-strong);
  background: rgba(255, 215, 0, 0.10);
  text-decoration: none;
}

.ciLegalLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 980px) {
  .ciLegalLayout {
    grid-template-columns: 300px 1fr;
  }

  .ciLegalToc {
    position: sticky;
    top: 14px;
    align-self: start;
  }
}

.ciLegalTocTitle {
  font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: 0.4px;
}

.ciLegalToc ol {
  margin: 0;
  padding-left: 18px;
}

.ciLegalToc li {
  margin: 7px 0;
}

.ciLegalToc a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}

.ciLegalToc a:hover,
.ciLegalToc a:focus {
  color: var(--ci-legal-link);
}

.ciLegalNote {
  border-left: 3px solid var(--ci-legal-border-strong);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.ciLegalNote strong {
  font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.35px;
}

.ciLegalNote ul {
  margin: 10px 0 0 18px;
  padding: 0;
}

.ciLegalDoc {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.ciLegalDoc h2,
.ciLegalDoc h3,
.ciLegalDoc h4 {
  scroll-margin-top: 16px;
}

.ciLegalDoc h2 {
  margin: 22px 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.35px;
  border-left: 3px solid rgba(255, 215, 0, 0.45);
  padding-left: 10px;
}

.ciLegalDoc h3 {
  margin: 16px 0 8px;
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.ciLegalDoc h4 {
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.ciLegalDoc p {
  margin: 10px 0;
}

.ciLegalDoc ul {
  margin: 10px 0 10px 22px;
}

.ciLegalDoc li {
  margin: 6px 0;
}

.ciLegalDoc hr {
  border: 0;
  border-top: 1px solid rgba(255, 215, 0, 0.18);
  margin: 18px 0;
}

.ciLegalFooter .ciLegalMeta {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ciLegal * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .ciLegal {
    padding: 0;
    max-width: none;
  }

  .ciLegalCard {
    box-shadow: none;
    border-color: #ccc;
    background: #fff;
    color: #111;
  }

  .ciLegalActions,
  .ciLegalToc {
    display: none !important;
  }

  .ciLegal a {
    color: #111;
    text-decoration: underline;
  }
}


/* --- merged: advertisementListingSystem.css --- */

/*
  advertisementListingSystem.css

  Purpose
  - Styles the public, PIN-gated advertisement directory page:
      /pages/advertisementListingSystem.php
  - Loaded by: /functions/js/pinscript.js after PIN unlock.

  Notes
  - Intentionally page-scoped.
  - Content is derived from index_unlock.css (kept as a legacy/backup stylesheet).

  Build: HOTFIX_012 (2026-01-10)
*/

#advertisementListingSystem { display: block; }

/* --- BEGIN: index_unlock.css --- */
/* index_unlock.css
 * BUILD: 2026-01-04-pack-041-restore-listing-cards
 * Purpose: styles loaded AFTER successful PIN unlock
 *          (advertisement directory grid/cards + listing modal)
 *
 * This file matches:
 *   - /security/pin_merch.php  (controls + cards)
 *   - /functions/js/merchscript.js       (modal)
 */

/* --- Advertisement / Merch directory (PIN-unlocked) --- */

.merchDirectoryRoot{
  max-width: 850px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Controls row above the listings */
.merchControls{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  margin: 0 auto 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(20, 11, 11, 0.65);
}

.merchSections{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* PIN scope section toggles */
label.merchSectionToggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}
label.merchSectionToggle input{
  transform: scale(1.05);
  accent-color: #FFD700;
}

.merchPrefs{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.merchPrefs label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
}

.merchPrefs select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.merchPrefs select:focus{
  outline: none;
  box-shadow: none;
}

.merchEmpty{
  font-size: 14px;
  opacity: 0.85;
  padding: 8px 0 4px;
}

/* Role sections (Services / Merch / Misc)
   - Only shown for public pins (seller pins can scope to one role)
*/
.merchRoleSection{
  margin: 14px 0 18px;
}

.merchRoleTitle{
  margin: 10px 0 10px;
  font-size: 18px;
  letter-spacing: 0.5px;
}

/* --- Listing grid --- */
.merchGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  justify-items: center;
  gap: 12px;
  margin: 10px auto 20px;
  max-width: 100%;
}

@media (max-width: 760px){
  .merchGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* --- Listing cards ---
   Target footprint: ~210w x ~300h (matches 3-per-row desktop / 2-per-row mobile)
*/
.merchCard{
  --ciAccent: var(--ci-card-accent, #D6B35E); /* compatible with JS + fallback */

  position: relative;
  width: 100%;
  height: 320px;

  border-radius: 18px;
  overflow: hidden;

  cursor: pointer;
  display: flex;
  flex-direction: column;

  background: linear-gradient(180deg, rgba(18,18,18,0.72), rgba(0,0,0,0.52));
  border: 2px solid color-mix(in srgb, var(--ciAccent) 78%, rgba(0,0,0,0.35));
  box-shadow:
    0 10px 22px rgba(0,0,0,0.65),
    0 0 18px color-mix(in srgb, var(--ciAccent) 28%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Soft glow ring + highlight sweep (subtle, no “neon flood”) */
.merchCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 28px color-mix(in srgb, var(--ciAccent) 22%, transparent);
  opacity: .9;
  z-index: 0;
}

.merchCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.10), rgba(255,255,255,0) 62%);
  opacity: .85;
  z-index: 0;
}

.merchCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ciAccent) 92%, rgba(0,0,0,0.2));
  box-shadow:
    0 14px 30px rgba(0,0,0,0.72),
    0 0 26px color-mix(in srgb, var(--ciAccent) 34%, transparent);
}

.merchCard:active{
  transform: translateY(0px) scale(0.99);
}

.merchCard:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ciAccent) 85%, white);
  outline-offset: 3px;
}

/* Ensure content is above glow layers */
.merchCard > *{ position: relative; z-index: 1; }

@media (max-width: 520px){
  .merchCard{ height: 340px; }
}


.merchCardImgWrap{
  width: 100%;
  height: 190px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.merchCardImg{
  width: 100%;
  height: 100%;
  object-fit: contain; /* prevents "zoomed" crops */
  display: block;
}

.merchCardBody{
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.merchCardPrice{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.merchCardField{
  font-size: 12.5px;
  opacity: 0.90;
  line-height: 1.2;
}

.merchCardField .k{
  opacity: 0.85;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
}

.merchCardField .v{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 760px){
  .merchCard{
    max-width: 210px;
    height: 300px;
  }
}

/* JS-rendered card meta (merchscript.js) */
.merchCardMeta{
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.merchCardTag{
  font-size: 12.5px;
  opacity: 0.92;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- Listing modal (JS builds this UI) --- */
.merchModalOverlay{
  --ciAccent: rgba(212,175,55,0.75);

  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  z-index: 9999;
}

.merchModalOverlay.open{
  display: flex;
}

.merchModal{
  width: min(920px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid var(--ciAccent);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 24px rgba(0,0,0,0.55),
    0 0 22px var(--ciAccent);
  display: flex;
  flex-direction: column;
}

.merchModalHeader{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.merchModalTitle{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.4px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merchModalHeaderActions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.merchActionBtn,
.merchModalClose{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.merchActionBtn:hover,
.merchModalClose:hover{
  border-color: var(--ciAccent);
  box-shadow: 0 0 12px var(--ciAccent);
}

.merchModalContent{
  padding: 14px 16px 16px;
  overflow: auto;
}

.merchModalMedia{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}

.merchModalMainImg{
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

.merchImgNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
}

.merchImgNav:hover{
  border-color: var(--ciAccent);
  box-shadow: 0 0 14px var(--ciAccent);
}

.merchImgNav.merchPrev{ left: 10px; }
.merchImgNav.merchNext{ right: 10px; }

.merchModalThumbs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 6px;
}

.merchThumbBtn{
  width: 62px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.merchThumbBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Support both historic classnames and current JS behaviour */
.merchThumbBtn.active,
.merchThumbBtn.isActive{
  border-color: var(--ciAccent);
  box-shadow: 0 0 12px var(--ciAccent);
}

.merchModalDetails{
  margin-top: 10px;
}

.merchDetailTop{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.merchDetailPrice{
  font-size: 22px;
  font-weight: 900;
}

.merchDetailRetail{
  font-size: 13px;
  opacity: 0.85;
}

.merchDetailGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.merchDetailCell{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.24);
  border-radius: 14px;
  padding: 10px 12px;
}

.merchDetailCell .k{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.merchDetailCell .v{
  font-size: 14px;
  line-height: 1.25;
}

.merchDetailNote{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.24);
  border-radius: 14px;
  padding: 10px 12px;
}

.merchDetailNote .k{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.merchModalCTA{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.merchCtaBtn{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--ciAccent);
  background: rgba(0,0,0,0.22);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.4px;
  cursor: pointer;
  opacity: 1;
}

.merchCtaBtn:disabled{
  cursor: not-allowed;
  opacity: 0.75;
}

.merchSecondaryBtn{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.merchRequestForm{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.merchRequestRow{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.merchRequestRow label{
  font-size: 12px;
  opacity: 0.86;
}

.merchRequestRow input,
.merchRequestRow textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: #fff;
  font-size: 14px;
  outline: none;
}

.merchRequestActions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.merchRequestStatus{
  min-height: 18px;
  font-size: 13px;
  opacity: 0.9;
}

.merchRequestSuccess{
  font-weight: 900;
  margin-bottom: 10px;
}

.merchCtaNote{
  font-size: 13px;
  opacity: 0.82;
}

.merchLoading{
  padding: 10px;
  font-size: 14px;
  opacity: 0.85;
}

.merchError{
  padding: 10px;
  font-size: 14px;
  color: #ffb3b3;
}

@media (max-width: 760px){
  .merchModalMainImg{ max-height: 320px; }
  .merchDetailGrid{ grid-template-columns: 1fr; }
}

/* Mobile: keep nav popup usable when unlocked */
@media (max-width: 760px){
  .navOpenBtn{ display: block; }

  /* reduce duplicate hamburger inside the PIN row */
  #pinEntrySystem #navigationButton{ display: none; }

  .navigationPopup{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 76px;
    height: auto;
    max-height: calc(100vh - 110px);
    border-radius: 14px;
    border: 2px solid rgba(212,175,55,0.85);
    box-shadow: 0 0 22px rgba(212,175,55,0.55);
  }

  .navHeader{ padding: 6px 18px; }
  .navList{ list-style: none; padding-left: 18px; }
  .navList li a{ margin-right: 18px; }
  .navigationPopup a{ padding: 10px 14px; font-size: 18px; }
}


/* --- WOW PASS: Modal polish --- */
.merchModalOverlay{
  animation: ciFadeIn .18s ease both;
}

.merchModal{
  border-radius: 18px;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.78),
    0 0 28px color-mix(in srgb, var(--ciAccent) 28%, transparent);
}

.merchModalHeader{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55));
  backdrop-filter: blur(10px);
}

.merchModalClose{
  border-radius: 14px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.merchModalClose:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ciAccent) 35%, transparent);
  border-color: color-mix(in srgb, var(--ciAccent) 78%, rgba(255,255,255,0.15));
}

.merchImgNav{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.merchImgNav:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ciAccent) 80%, rgba(255,255,255,0.18));
  box-shadow: 0 0 18px color-mix(in srgb, var(--ciAccent) 30%, transparent);
}

@media (max-width: 760px){
  .merchModal{
    width: 96vw;
    max-height: 92vh;
    border-radius: 18px;
  }
  .merchImgNav{
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
}

@keyframes ciFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* --- END: index_unlock.css --- */