/* =============================================================================
 * CryptoLarz content-hub styles (Phase 2). A SEPARATE file (not app.css) on
 * purpose: app.css is served immutable/1-year via .htaccess and linked without a
 * version query, so editing it would be invisible to returning visitors. This
 * fresh URL avoids that. Uses the existing theme custom properties (--brand,
 * --surface, --text, --muted, --border, --bg) defined in app.css.
 * Classes here are additive; they never override app.css components.
 * ===========================================================================*/

/* Breadcrumbs */
.cl-crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1rem;}
.cl-crumbs a{color:var(--muted);text-decoration:none;}
.cl-crumbs a:hover{color:var(--brand);text-decoration:underline;}
.cl-crumbs .sep{opacity:.5;margin:0 .15rem;}
.cl-crumbs [aria-current="page"]{color:var(--text);}

/* Long-form article body: comfortable reading rhythm */
.cl-article-body{line-height:1.75;font-size:1.05rem;}
.cl-article-body h2{margin:1.8rem 0 .6rem;font-size:1.4rem;}
.cl-article-body p{margin:0 0 1rem;}
.cl-article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.cl-article-body a:hover{opacity:.8;}
.cl-article-body ol.cl-list,.cl-article-body ul.cl-list{margin:0 0 1rem;padding-left:1.25rem;}
.cl-article-body ol.cl-list li,.cl-article-body ul.cl-list li{margin:.4rem 0;list-style:revert;}

/* Clickable cards (guide tiles, listing tiles, seller listings) */
a.cl-card-link{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
a.cl-card-link:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 8px 24px rgba(0,0,0,.12);}
a.cl-card-link h3{color:var(--text);margin:0 0 .35rem;}
a.cl-card-link p{color:var(--muted);margin:0;}

/* FAQ block */
.cl-faq{margin-top:2.5rem;}
.cl-faq h2{font-size:1.4rem;margin-bottom:1rem;}
.cl-faq-item{border-top:1px solid var(--border);padding:1rem 0;}
.cl-faq-item h3{font-size:1.05rem;margin:0 0 .35rem;color:var(--text);}
.cl-faq-item p{margin:0;color:var(--muted);line-height:1.6;}

/* Related box */
.cl-related{margin-top:2.5rem;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;}
.cl-related h3{margin:0 0 .6rem;font-size:1.05rem;color:var(--text);}
.cl-related ul.cl-list{margin:0;padding-left:1.1rem;}
.cl-related ul.cl-list li{margin:.35rem 0;list-style:disc;}
.cl-related a{color:var(--brand);text-decoration:none;}
.cl-related a:hover{text-decoration:underline;}

/* Footer now has 4 columns (Brand + Company + Resources + Legal); app.css sets
   3. Override to a responsive auto-fit so it never overflows on any width. */
.cl-footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}
@media (max-width:760px){ .cl-footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:440px){ .cl-footer-grid{grid-template-columns:1fr;} }

/* Glossary definition list */
.cl-glossary-list dt{margin-top:1.1rem;font-weight:700;}
.cl-glossary-list dt a{color:var(--brand);text-decoration:none;}
.cl-glossary-list dt a:hover{text-decoration:underline;}
.cl-glossary-list dd{margin:.2rem 0 0;color:var(--muted);line-height:1.6;}

/* ---- Mobile containment fixes (found in Phase 3 visual test) ------------ */
/* On narrow screens the seller-profile lead and the .cl-grid of listing cards
   overflowed the viewport (clipped by html{overflow-x:hidden}). Two real
   causes, both fixed here:
   1) Grid tracks from repeat(auto-fit,minmax(240px,1fr)) don't shrink below
      their content's min-content width unless the items get min-width:0. On a
      ~358px-wide column a 240px track + non-shrinking card content overflowed.
   2) The lead is a single long line joined by "·" with no wrap opportunity. */
.cl-prose{overflow-wrap:break-word;}
.cl-prose .lead{overflow-wrap:break-word;}
.cl-grid{max-width:100%;}
.cl-grid > *{min-width:0;}                 /* let grid items shrink to fit */
@media (max-width:560px){
  .cl-prose .cl-grid{grid-template-columns:1fr;}  /* single column on phones */
}

/* ---- Reputation & ratings (Phase 3) ------------------------------------- */
/* Read-only star display */
.cl-stars{display:inline-flex;gap:1px;vertical-align:middle;font-size:1rem;line-height:1;}
.cl-stars .on{color:#f5a623;}
.cl-stars .off{color:var(--border);}
.cl-rep{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.cl-rep-n{color:var(--muted);font-size:.85rem;}
.cl-badge-trust{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.12rem .5rem;border-radius:999px;background:var(--brand);color:#fff;}
/* Reviews list on the seller profile */
.cl-reviews .cl-review{border-top:1px solid var(--border);padding:.9rem 0;}
.cl-reviews .cl-review p{margin:.35rem 0 0;color:var(--muted);line-height:1.55;}
/* Rating form (interactive stars; CSS-only highlight via reverse-ordered radios) */
.cl-rate-form{display:flex;flex-direction:column;gap:.5rem;max-width:480px;margin-top:1rem;}
.cl-rate-form label{font-weight:600;}
.cl-rate-form textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:.6rem;
  background:var(--bg);color:var(--text);font:inherit;}
.cl-rate-form .cl-btn-lg{align-self:flex-start;cursor:pointer;border:0;}
.cl-rate-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem;font-size:1.9rem;line-height:1;}
.cl-rate-stars input{position:absolute;opacity:0;width:0;height:0;}
.cl-rate-stars label{color:var(--border);cursor:pointer;transition:color .1s ease;font-weight:400;}
.cl-rate-stars input:checked ~ label,
.cl-rate-stars label:hover,
.cl-rate-stars label:hover ~ label{color:#f5a623;}

/* ---- Offers, payment chips, filter bar (Phase 4) ------------------------ */
.cl-pm-chips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle;}
.cl-pm-chip{display:inline-block;font-size:.72rem;padding:.1rem .45rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);}
.cl-offer-box{margin:14px 0;padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;}
.cl-offer-row{display:flex;gap:.6rem;align-items:flex-start;margin:.3rem 0;font-size:.92rem;}
.cl-offer-k{flex:0 0 70px;color:var(--muted);font-weight:600;}
/* Filter / sort bar on browse + category pages */
.cl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cl-filters .form-control,.cl-filters .form-select{width:auto;min-width:120px;}
@media (max-width:560px){
  .cl-filters{flex-direction:column;align-items:stretch;}
  .cl-filters .form-control,.cl-filters .form-select{width:100%;min-width:0;max-width:none !important;}
}

/* ============================================================================
 * AUTHED / DASHBOARD pages — generic polish (UI overhaul Sub-phase 0).
 * The logged-in pages (tabs/*, marketplace/* internals) share the legacy
 * #myForm wrapper and build much of their markup via jQuery at runtime, so we
 * style them GENERICALLY here — no per-page markup edits, no money-flow risk.
 * Everything uses the existing theme vars so it themes in light + dark.
 * ==========================================================================*/

/* --- #myForm as a dashboard surface --------------------------------------- */
/* app.css already width-constrains #myForm; give it card padding + rhythm. */
#myForm{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1.6rem 1.5rem;
  margin:1.5rem auto;
  max-width:760px;
}
#myForm > h1, #myForm > h2, #heading{
  color:var(--text);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 1rem;
  font-size:1.5rem;
}
#myForm p{ color:var(--text); line-height:1.6; }
#myForm label, #myForm .labellin{ color:var(--text); font-weight:600; }
/* Wider surface for grid/list-heavy pages (marketplace index, mylisting). */
#myForm.cl-dash-wide, .cl-dash-wide #myForm{ max-width:1100px; }

/* --- Generic buttons inside #myForm (incl. jQuery-injected submits) -------- */
#myForm a.btn, #myForm button, #myForm input[type="submit"]{
  border-radius:10px;
  padding:.55rem 1.2rem;
  font-weight:600;
  cursor:pointer;
}
#myForm select, #myForm input[type="text"], #myForm input[type="number"], #myForm textarea{
  margin:.2rem 0 .6rem;
}

/* --- Generic tables (history, mygiftcard — server-echoed) ----------------- */
#myForm table, table.cl-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin:1rem 0;
  font-size:.92rem;
}
#myForm table th, table.cl-table th{
  background:var(--surface-2);
  color:var(--text);
  text-align:left;
  padding:.7rem .8rem;
  font-weight:700;
  border-bottom:1px solid var(--border);
}
#myForm table td, table.cl-table td{
  padding:.65rem .8rem;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
#myForm table tr:nth-child(even) td, table.cl-table tr:nth-child(even) td{
  background:color-mix(in srgb, var(--surface-2) 45%, transparent);
}
#myForm table tr:last-child td{ border-bottom:0; }

/* --- Chat bubbles (chat.php: .contain mine left, .contain.darkery theirs) --
 * Note the page also emits a typo class "dakery"; cover both. ------------- */
#myForm .contain{
  max-width:78%;
  margin:.4rem 0;
  padding:.6rem .9rem;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  width:fit-content;
}
#myForm .contain p{ margin:0; color:var(--text); }
#myForm .contain.darkery, #myForm .contain.dakery{
  margin-left:auto;                       /* right-align "their"/outgoing side */
  background:color-mix(in srgb, var(--brand) 16%, var(--surface));
  border-color:color-mix(in srgb, var(--brand) 30%, var(--border));
}

/* --- Message lists (messages.php / allmessages.php) ----------------------- */
#myForm ul{ list-style:none; padding:0; margin:1rem 0; }
#myForm li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.9rem 1rem;
  margin:.6rem 0;
}
#myForm li form{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
#myForm li a{ color:var(--text); text-decoration:none; }
/* the inline "status" pill <a style=...background-color:silver...> */
#myForm a[style*="background-color:silver"], #myForm a[style*="background-color: silver"]{
  display:inline-block;
  background:var(--surface-2) !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
  padding:.15rem .6rem !important;
  font-size:.75rem !important;
  font-weight:600 !important;
}

/* --- Product tiles (marketplace index / mylisting / buyme: inline bordered) */
#myForm div[style*="border:1px solid black"], #myForm div[style*="border: 1px solid black"]{
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow);
  padding:.9rem !important;
}
#myForm .search-container{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  margin-bottom:1.2rem;
}

/* --- Status badges (.cl-status) for seller order visibility (Sub-phase 6a) - */
.cl-status{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  padding:.14rem .6rem;
  border-radius:999px;
  text-transform:capitalize;
}
.cl-status-ready{ background:#e7f6ec; color:#1a7f37; }
.cl-status-pending{ background:#fff3df; color:#a86400; }
.cl-status-complete{ background:#e7eefc; color:#2b5bd7; }
.cl-status-ondispute{ background:#fdecec; color:#a12; }
[data-theme="dark"] .cl-status-ready{ background:rgba(26,127,55,.22); color:#7ed79a; }
[data-theme="dark"] .cl-status-pending{ background:rgba(168,100,0,.25); color:#f0c070; }
[data-theme="dark"] .cl-status-complete{ background:rgba(43,91,215,.25); color:#9db8f5; }
[data-theme="dark"] .cl-status-ondispute{ background:rgba(170,17,34,.25); color:#f0a0a8; }

@media (max-width:560px){
  #myForm{ padding:1.1rem 1rem; }
  #myForm .contain{ max-width:90%; }
}

/* --- Authed account rail (sidetabs.php) — UI overhaul Sub-phase 1 --------- */
.cl-rail{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1.2rem 1rem;
  margin:1.5rem 0;
  position:sticky;
  top:5rem;
}
.cl-rail-id{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.cl-rail-avatar{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:50%;
  background:var(--brand); color:var(--brand-ink, #fff);
  display:grid; place-items:center;
  font-weight:800; font-size:1.1rem;
}
.cl-rail-who{ display:flex; flex-direction:column; min-width:0; }
.cl-rail-label{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.cl-rail-email{ color:var(--text); font-weight:600; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-rail-balance{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.7rem 0; margin-bottom:.7rem; }
.cl-rail-balance .showbal{ color:var(--brand); cursor:pointer; text-decoration:underline; font-size:.88rem; }
.cl-rail-balance .togglefund{ color:var(--text); margin-top:.3rem; }
.cl-rail-balance .togglefund strong{ color:var(--brand); }
.cl-rail-nav{ display:flex; flex-direction:column; gap:.15rem; }
.cl-rail-nav a{
  display:block;
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:.5rem .7rem;
  border-radius:9px;
  transition:background-color .15s ease, color .15s ease;
}
.cl-rail-nav a:hover{
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  color:var(--brand);
}
@media (max-width:768px){
  .cl-rail{ position:static; margin:1rem 0; }
}

/* --- Search box in marketplace index/mylisting (.search-container) -------- */
/* The submit uses <i class="fa fa-search"> but Font Awesome isn't loaded, so
   the button rendered empty. Give it a real magnifier glyph + button styling
   via CSS (no markup edit on the buy-adjacent page). */
.search-container form{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.search-container input[type="text"]{ flex:1 1 240px; min-width:0; }
.search-container button{
  background:var(--brand); color:var(--brand-ink, #fff);
  border:0; border-radius:10px; padding:.55rem 1.1rem; cursor:pointer; font-weight:600;
}
.search-container button .fa-search{ display:none; }   /* hide the dead icon */
.search-container button::after{ content:"Search"; }
.search-container > form > div{ text-align:center; }

/* --- Chat page message log (#scroll) + dispute/release buttons (chat.php) -- */
#myForm #scroll{
  border:1px solid var(--border) !important;
  border-radius:14px;
  background:var(--bg);
  padding:1rem;
  margin-top:1rem;
}
/* The Dispute/Release action links use inline border:solid black + red text;
   normalize them into proper buttons (CSS only, no markup edit). */
#myForm a#dispute, #myForm a#release{
  display:inline-block;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  padding:.45rem 1rem !important;
  font-weight:600;
  text-decoration:none !important;
  color:var(--text) !important;
  background:var(--surface) !important;
}
#myForm a#dispute{ color:#a12 !important; border-color:#e6b3b3 !important; }
#myForm a#release{ color:var(--brand-ink,#fff) !important; background:var(--brand) !important; border-color:var(--brand) !important; }

/* --- buyme.php section dividers (inline border-style:solid none) ---------- */
#myForm div[style*="border-style: solid none"], #myForm div[style*="border-style:solid none"]{
  border-color:var(--border) !important;
  border-width:1px 0 !important;
  padding:.4rem 0 !important;
  font-weight:700;
}

/* --- Marketplace social-proof strip (browse/category) -------------------- */
.cl-statstrip{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  margin:.8rem 0 1.2rem;color:var(--muted);font-size:.92rem;}
.cl-statstrip strong{color:var(--brand);font-size:1.05rem;}
.cl-statstrip span{display:inline-flex;align-items:center;gap:.3rem;}

/* --- Mobile: keep generic data tables fully visible (history, mygiftcard) ---
 * Without table-layout:fixed, a long cell (e.g. a crypto address) forces the
 * table wider than the viewport; html{overflow-x:hidden} then CLIPS the right
 * columns (Amount/Time) — unreachable on phones. Fixed layout + wrap keeps
 * every column on-screen. Verified at 390px (table was 712px wide). */
@media (max-width:560px){
  #myForm table, table.cl-table{ table-layout:fixed; width:100%; font-size:.82rem; }
  #myForm table th, table.cl-table th,
  #myForm table td, table.cl-table td{ padding:.5rem .45rem; word-break:break-word; overflow-wrap:anywhere; }
}