/* Nexmerce - shared responsive, mobile-first stylesheet */

:root {
  /* Brand palette derived from the Nexmerce logo (navy -> blue gradient). */
  --nx-primary: #0d1b4d;
  --nx-primary-dark: #081234;
  --nx-accent: #1a73e8;
  --nx-accent-light: #4da3ff;
  --nx-bg: #f5f7fb;
  --nx-surface: #ffffff;
  --nx-border: #e2e6f0;
  --nx-text: #131c3c;
  --nx-text-muted: #5b6480;
  --nx-danger: #b3261e;
  --nx-success: #1e7d3a;
  --nx-warning: #92600a;
  --nx-radius: 10px;
  --nx-shadow: 0 1px 3px rgba(13,27,77,0.10), 0 1px 2px rgba(13,27,77,0.08);
  --nx-max-width: 1180px;
  --nx-gradient: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-accent) 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--nx-bg);
  color: var(--nx-text);
  line-height: 1.5;
  font-size: 15px;
}
img { max-width: 100%; display: block; }
a { color: var(--nx-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.nx-container {
  max-width: var(--nx-max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Top bar ---------- */
.nx-topbar {
  background: var(--nx-surface);
  color: var(--nx-text);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--nx-shadow);
  border-bottom: 1px solid var(--nx-border);
}
.nx-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  max-width: var(--nx-max-width);
  margin: 0 auto;
}
.nx-brand { display: inline-flex; align-items: center; }
.nx-brand img { height: 30px; width: auto; display: block; }
.nx-topbar nav { display: none; gap: 2px; align-items: center; }
.nx-topbar nav a, .nx-topbar nav .nx-nav-user {
  color: var(--nx-text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .92rem;
  white-space: nowrap;
}
.nx-topbar nav a:hover { background: #eef3ff; text-decoration: none; }
.nx-topbar nav a.active { background: #e5eefc; color: var(--nx-accent); font-weight: 700; }
.nx-topbar nav .nx-nav-user { color: var(--nx-text-muted); }
.nx-menu-toggle {
  display: inline-flex;
  background: none; border: 1px solid var(--nx-border); color: var(--nx-text);
  border-radius: 8px; padding: 8px 10px; font-size: 1rem; cursor: pointer;
}
.nx-mobile-nav { display: none; flex-direction: column; background: var(--nx-surface); padding: 6px 12px 12px; border-top: 1px solid var(--nx-border); }
.nx-mobile-nav.open { display: flex; }
.nx-mobile-nav a { color: var(--nx-text); padding: 10px 6px; border-bottom: 1px solid var(--nx-border); }
.nx-mobile-nav a.active { color: var(--nx-accent); font-weight: 700; }

@media (min-width: 860px) {
  .nx-menu-toggle { display: none; }
  .nx-topbar nav { display: flex; }
  .nx-mobile-nav { display: none !important; }
}

/* ---------- Layout ---------- */
.nx-main { padding: 20px 0 60px; min-height: 60vh; }
.nx-page-head { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.nx-page-head h1 { font-size: 1.4rem; }
.nx-muted { color: var(--nx-text-muted); }
.nx-small { font-size: .85rem; }

.nx-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nx-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .nx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .nx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.nx-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 16px;
  box-shadow: var(--nx-shadow);
}
.nx-card + .nx-card { margin-top: 14px; }

/* ---------- Stat tiles ---------- */
.nx-stat { padding: 14px 16px; }
.nx-stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-text-muted); }
.nx-stat .value { font-size: 1.5rem; font-weight: 700; margin-top: 4px; }
.nx-stat .sub { font-size: .8rem; color: var(--nx-text-muted); margin-top: 2px; }

/* ---------- Forms ---------- */
.nx-form label { display: block; font-weight: 600; font-size: .88rem; margin: 14px 0 6px; }
.nx-form label:first-child { margin-top: 0; }
.nx-form input[type=text], .nx-form input[type=email], .nx-form input[type=password],
.nx-form input[type=number], .nx-form input[type=date], .nx-form input[type=tel],
.nx-form select, .nx-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--nx-border);
  border-radius: 8px;
  font-size: .95rem;
  background: #fff;
  color: var(--nx-text);
  font-family: inherit;
}
.nx-form input:focus, .nx-form select:focus, .nx-form textarea:focus {
  outline: 2px solid var(--nx-primary);
  outline-offset: 1px;
}
.nx-form .hint { font-size: .8rem; color: var(--nx-text-muted); margin-top: 4px; }
.nx-form .row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nx-form .row.cols-2 { grid-template-columns: 1fr 1fr; } .nx-form .row.cols-3 { grid-template-columns: repeat(3,1fr); } }

.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--nx-primary); color: #fff; border: none;
  padding: 10px 18px; border-radius: 8px; font-size: .92rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.nx-btn:hover { background: var(--nx-primary-dark); text-decoration: none; color: #fff; }
.nx-btn.secondary { background: #fff; color: var(--nx-primary); border: 1px solid var(--nx-primary); }
.nx-btn.secondary:hover { background: #eefaf1; color: var(--nx-primary); }
.nx-btn.danger { background: var(--nx-danger); }
.nx-btn.danger:hover { background: #8a1e18; }
.nx-btn.accent { background: var(--nx-accent); }
.nx-btn.accent:hover { background: #1257b3; }
.nx-btn.small { padding: 6px 12px; font-size: .82rem; }
.nx-btn:disabled { opacity: .5; cursor: not-allowed; }
.nx-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Badges ---------- */
.nx-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #eef1ee; color: var(--nx-text-muted);
}
.nx-badge.ok { background: #e4f6e9; color: var(--nx-success); }
.nx-badge.warn { background: #fdf1de; color: var(--nx-warning); }
.nx-badge.bad { background: #fbe6e4; color: var(--nx-danger); }
.nx-badge.info { background: #e5eefc; color: #1d4ed8; }

/* ---------- Tables -> cards on mobile ---------- */
.nx-table-wrap { overflow-x: auto; }
table.nx-table { width: 100%; border-collapse: collapse; background: var(--nx-surface); }
table.nx-table th, table.nx-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--nx-border); font-size: .88rem; }
table.nx-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-text-muted); background: #fafbf9; white-space: nowrap; }
table.nx-table tr:last-child td { border-bottom: none; }

@media (max-width: 700px) {
  table.nx-responsive-cards, table.nx-responsive-cards thead, table.nx-responsive-cards tbody, table.nx-responsive-cards tr, table.nx-responsive-cards td {
    display: block; width: 100%;
  }
  table.nx-responsive-cards thead { display: none; }
  table.nx-responsive-cards tr {
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius); margin-bottom: 12px; padding: 6px 12px; background: var(--nx-surface);
  }
  table.nx-responsive-cards td {
    border-bottom: 1px dashed var(--nx-border); padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; font-size: .88rem;
  }
  table.nx-responsive-cards td:last-child { border-bottom: none; }
  table.nx-responsive-cards td::before {
    content: attr(data-label); font-weight: 600; color: var(--nx-text-muted); margin-right: 10px; flex-shrink: 0;
  }
}

/* ---------- Flash / alerts ---------- */
.nx-alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.nx-alert.success { background: #e4f6e9; color: var(--nx-success); border: 1px solid #bfe8cb; }
.nx-alert.error { background: #fbe6e4; color: var(--nx-danger); border: 1px solid #f3c3bf; }
.nx-alert.warn { background: #fdf1de; color: var(--nx-warning); border: 1px solid #f3ddb0; }
.nx-alert.info { background: #e5eefc; color: #1d4ed8; border: 1px solid #c6d9fb; }

/* ---------- Product / listing grid ---------- */
.nx-product-card { display: flex; flex-direction: column; height: 100%; }
.nx-product-card .thumb {
  aspect-ratio: 1/1; background: linear-gradient(135deg,#eef1ee,#e2e8e3);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--nx-text-muted); font-size: .8rem; margin-bottom: 10px; overflow: hidden;
}
.nx-product-card h3 { font-size: .98rem; margin-bottom: 4px; }
.nx-price { font-weight: 800; font-size: 1.1rem; color: var(--nx-primary); }
.nx-price.strike { color: var(--nx-text-muted); text-decoration: line-through; font-weight: 400; font-size: .85rem; }

/* ---------- Misc ---------- */
.nx-footer { text-align: center; padding: 18px 16px 28px; color: rgba(255,255,255,.65); font-size: .8rem; background: var(--nx-primary-dark); }
.nx-footer a { color: rgba(255,255,255,.85); }
.nx-empty { text-align: center; padding: 40px 16px; color: var(--nx-text-muted); }
.nx-divider { border: none; border-top: 1px solid var(--nx-border); margin: 18px 0; }
.nx-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .9rem; border-bottom: 1px dashed var(--nx-border); }
.nx-kv:last-child { border-bottom: none; }
.nx-kv .k { color: var(--nx-text-muted); }
.nx-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-sidebar-layout { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .nx-sidebar-layout { grid-template-columns: 220px 1fr; align-items: start; } }
.nx-sidenav { display: flex; flex-direction: column; gap: 2px; }
.nx-sidenav a { padding: 9px 12px; border-radius: 8px; color: var(--nx-text); font-size: .9rem; }
.nx-sidenav a:hover { background: #eef1ee; text-decoration: none; }
.nx-sidenav a.active { background: var(--nx-primary); color: #fff; font-weight: 600; }
.nx-progress-steps { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; }
.nx-progress-steps span { padding: 4px 10px; border-radius: 999px; background: #eef1ee; color: var(--nx-text-muted); }
.nx-progress-steps span.done { background: var(--nx-primary); color: #fff; }
.nx-progress-steps span.current { background: var(--nx-accent); color: #fff; font-weight: 700; }

/* ---------- Landing / CMS page sections ----------
   Everything below is scoped under .nx-landing (the class nx_header() puts
   on <main> when fullBleed=true - in practice only ever the standalone
   nexmerce-landing/ app's index.php/page.php), so none of it touches the
   marketplace app's own storefront/admin/portal pages. */
.nx-main.nx-landing {
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.nx-main.nx-landing > .nx-container { max-width: none; padding: 0; }

/* A little extra breathing room on the nav specifically when it sits above
   a landing page (a modern browser feature; on one that doesn't support
   :has() the nav just keeps its normal spacing - purely cosmetic either way). */
header.nx-topbar:has(+ main.nx-landing) .nx-topbar-inner { padding: 14px 16px; }
header.nx-topbar:has(+ main.nx-landing) .nx-brand img { height: 34px; }

/* ---- Hero ---- */
.nx-landing .nx-hero {
  position: relative;
  background: var(--nx-gradient);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 96px 20px 108px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.nx-landing .nx-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(560px 360px at 88% -10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(480px 320px at 6% 110%, rgba(77,163,255,.30), transparent 60%);
  z-index: -1;
}
.nx-landing .nx-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}
.nx-landing .nx-hero-inner { max-width: 780px; margin: 0 auto; position: relative; }
.nx-landing .nx-hero h1 { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.14; margin-bottom: .45em; }
.nx-landing .nx-hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.86); max-width: 600px; margin: 0 auto 1.6em; line-height: 1.6; }
@media (min-width: 700px) {
  .nx-landing .nx-hero { padding: 128px 20px 140px; }
  .nx-landing .nx-hero h1 { font-size: 3.4rem; }
  .nx-landing .nx-hero-sub { font-size: 1.2rem; }
}

.nx-landing .nx-hero .nx-btn {
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.nx-landing .nx-hero .nx-btn.accent { background: #fff; color: var(--nx-primary); }
.nx-landing .nx-hero .nx-btn.accent:hover { background: #f2f6ff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); }
.nx-landing .nx-hero .nx-btn.secondary { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55) !important; box-shadow: none; }
.nx-landing .nx-hero .nx-btn.secondary:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* ---- Section rhythm + headings ---- */
.nx-landing .nx-section { max-width: var(--nx-max-width); margin: 0 auto; padding: 72px 20px; }
.nx-landing .nx-section-heading {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--nx-primary);
  margin: 0 auto;
  max-width: 620px;
}
.nx-landing .nx-section-heading::after {
  content: '';
  display: block;
  width: 52px; height: 4px;
  margin: 18px auto 34px;
  border-radius: 999px;
  background: var(--nx-gradient);
}
/* Static pages (page.php) render a standalone title block ahead of the
   page's own sections - without this, its bottom spacing plus the very
   next section's own top padding stack into an oversized empty gap. */
.nx-landing .nx-page-title-wrap { padding-bottom: 0 !important; }
.nx-landing .nx-page-title-wrap + .nx-section { padding-top: 0; }

/* ---- Feature cards ---- */
.nx-landing .nx-feature-card {
  text-align: left;
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nx-landing .nx-feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(13,27,77,.12); }
.nx-landing .nx-feature-icon {
  font-size: 1.5rem;
  width: 52px; height: 52px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: var(--nx-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(26,115,232,.28);
}
.nx-landing .nx-feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.nx-landing .nx-feature-card p { margin: 0; }

/* ---- Stats band ---- */
.nx-landing .nx-stats-band {
  background: var(--nx-primary);
  background-image: radial-gradient(600px 300px at 15% 0%, rgba(77,163,255,.25), transparent 60%);
  border-radius: 0;
  color: #fff;
  padding: 64px 20px;
}
.nx-landing .nx-stats-band .nx-section-heading { color: #fff; }
.nx-landing .nx-stats-band .nx-section-heading::after { background: linear-gradient(135deg, var(--nx-accent-light), #fff); }
.nx-landing .nx-stats-band .nx-grid.cols-4 { max-width: var(--nx-max-width); margin: 0 auto; }
.nx-landing .nx-stat-block { text-align: center; padding: 12px 10px; position: relative; }
@media (min-width: 860px) {
  .nx-landing .nx-stat-block:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.16);
  }
}
.nx-landing .nx-stat-block .value {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff, var(--nx-accent-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nx-landing .nx-stat-block .label {
  font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.78);
  margin-top: 6px; text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Testimonials ---- */
.nx-landing .nx-testimonial-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 24px; border-radius: 16px; position: relative; overflow: hidden; }
.nx-landing .nx-testimonial-card::before {
  content: '\201C'; position: absolute; top: -6px; left: 18px; font-size: 3.6rem; font-weight: 800;
  color: var(--nx-border); line-height: 1; font-family: Georgia, serif;
}
.nx-landing .nx-testimonial-logo { height: 28px; width: auto; object-fit: contain; }
.nx-landing .nx-testimonial-quote { font-style: normal; color: var(--nx-text); flex-grow: 1; position: relative; z-index: 1; }
.nx-landing .nx-testimonial-author { display: flex; align-items: center; gap: 10px; }
.nx-landing .nx-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ---- FAQ ---- */
.nx-landing .nx-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.nx-landing .nx-faq-item { padding: 18px 22px; border-radius: 14px; transition: box-shadow .15s ease, border-color .15s ease; }
.nx-landing .nx-faq-item:hover { box-shadow: var(--nx-shadow); border-color: var(--nx-accent-light); }
.nx-landing .nx-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; font-weight: 600; cursor: pointer;
}
.nx-landing .nx-faq-item summary::-webkit-details-marker { display: none; }
.nx-landing .nx-faq-item summary::after {
  content: '+'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #eef3ff; color: var(--nx-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; transition: transform .15s ease;
}
.nx-landing .nx-faq-item[open] summary::after { content: '\2212'; }
.nx-landing .nx-faq-item p { margin: 10px 0 0; padding-top: 4px; color: var(--nx-text-muted); }

/* ---- Final CTA ---- */
.nx-landing .nx-final-cta {
  text-align: center; background: var(--nx-gradient); color: #fff;
  border-radius: 0; max-width: none; padding: 80px 20px; position: relative; overflow: hidden;
}
.nx-landing .nx-final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 80% 0%, rgba(255,255,255,.18), transparent 60%);
}
.nx-landing .nx-final-cta h2 { font-size: 2rem; font-weight: 800; position: relative; }
.nx-landing .nx-final-cta p { color: rgba(255,255,255,.88); font-size: 1.05rem; max-width: 560px; margin-left: auto; margin-right: auto; position: relative; }
.nx-landing .nx-final-cta .nx-btn { position: relative; padding: 14px 32px; border-radius: 999px; font-weight: 700; background: #fff; color: var(--nx-primary); }
.nx-landing .nx-final-cta .nx-btn:hover { background: #f2f6ff; color: var(--nx-primary); }

/* ---- Footer columns ---- */
.nx-landing .nx-footer-columns { background: var(--nx-primary-dark); color: rgba(255,255,255,.85); max-width: none; padding: 56px 20px 12px; }
.nx-landing .nx-footer-columns .nx-footer-brand { max-width: var(--nx-max-width); margin: 0 auto 28px; display: flex; align-items: center; gap: 10px; }
.nx-landing .nx-footer-columns .nx-footer-brand img { height: 28px; width: auto; }
.nx-landing .nx-footer-columns h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.nx-landing .nx-footer-columns a { display: inline-block; padding: 3px 0; color: rgba(255,255,255,.7); transition: color .15s ease; }
.nx-landing .nx-footer-columns a:hover { color: #fff; }
.nx-landing .nx-footer-columns > .nx-grid { max-width: var(--nx-max-width); margin: 0 auto; }

/* ---- Rich text (About/Terms/Privacy static pages) ---- */
.nx-rich-text { max-width: 820px; }
.nx-rich-text img { border-radius: var(--nx-radius); }
.nx-rich-text h2 { color: var(--nx-primary); margin-top: 1.2em; }
.nx-landing .nx-rich-text { margin: 0 auto; line-height: 1.7; }
.nx-landing .nx-rich-text h2 { font-weight: 800; letter-spacing: -.01em; }

/* ---- Scroll reveal (progressive enhancement - see assets/js/app.js) ----
   .js-reveal-ready is only ever added by JS once it has actually found
   IntersectionObserver support AND targets to observe, so content with no
   JS (or an old browser) simply never gets opacity:0 in the first place. */
.js-reveal-ready .nx-landing [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal-ready .nx-landing [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Admin CMS editor ---------- */
.nx-cms-page-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--nx-border); }
.nx-cms-page-row:last-child { border-bottom: none; }
.nx-cms-section-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius); margin-bottom: 10px; background: var(--nx-surface); }
.nx-cms-section-row.hidden-section { opacity: .6; background: #f4f5f9; }
.nx-cms-section-row .type-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-text-muted); }
.nx-repeater-item { border: 1px dashed var(--nx-border); border-radius: var(--nx-radius); padding: 12px; margin-bottom: 10px; position: relative; background: #fafbfe; }
.nx-repeater-item .remove-row { position: absolute; top: 8px; right: 8px; }
.nx-thumb-preview { max-width: 140px; max-height: 90px; border-radius: 6px; border: 1px solid var(--nx-border); display: block; margin: 6px 0; object-fit: cover; }
.nx-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--nx-border); background: #fff; color: var(--nx-text); cursor: pointer; font-size: .9rem; text-decoration: none; }
.nx-icon-btn:hover { background: #eef3ff; text-decoration: none; }