/*
 * Neron Signals — Site-wide modernization layer.
 * Sits ON TOP of bootstrap-based legacy classes so existing pages can opt in
 * without a full HTML rewrite. Loads design-tokens.css before this.
 *
 * Strategy:
 *   - Keep Bootstrap grid + base utilities working.
 *   - Override key surfaces (cards, hero, list rows, footer, sticky bars)
 *     to look like a 2026 product, not a 2020 mobile template.
 *   - Add "ns-" component classes for new patterns we introduce.
 */

/* ── Base body modernization (only when site.css is loaded) ─── */
body:not(.ns-chatbot-page) {
  background: var(--ns-surface-0);
  color: var(--ns-text-1);
  font-family: var(--ns-font-sans);
}
body:not(.ns-chatbot-page) #appCapsule {
  background: var(--ns-surface-0);
}

/* ── Hero / gradient sections ─────────────────────────────────── */
.gradientSection,
.gradientSection2 {
  background: var(--ns-grad-hero) !important;
  border-radius: 0 0 var(--ns-radius-xl) var(--ns-radius-xl);
  position: relative;
  overflow: hidden;
}
.gradientSection2::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(245,180,23,.18), transparent 70%);
  pointer-events: none;
}

/* ── Wallet card / hero block ────────────────────────────────── */
.wallet-card {
  padding: var(--ns-space-6) var(--ns-space-5) !important;
}
.wallet-card .balance .left { padding: 0 !important; }
.wallet-card .balance .title {
  color: var(--ns-text-3);
  font-size: var(--ns-text-sm);
  font-weight: 500;
  display: block; margin-bottom: var(--ns-space-2);
}
.wallet-card .balance .total {
  color: var(--ns-text-1) !important;
  font-size: var(--ns-text-lg) !important;
  font-weight: 500 !important;
  line-height: var(--ns-leading-relax) !important;
  letter-spacing: -.01em;
}
.wallet-footer {
  background: rgba(255,255,255,.04) !important;
  border-radius: var(--ns-radius-lg) !important;
  margin-top: var(--ns-space-5) !important;
  padding: var(--ns-space-3) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wallet-footer .item a {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ns-space-2);
  color: var(--ns-text-1) !important;
  text-decoration: none;
  transition: transform var(--ns-dur-fast) var(--ns-ease);
}
.wallet-footer .item a:hover { transform: translateY(-2px); }
.wallet-footer .icon-wrapper {
  width: 44px; height: 44px;
  border-radius: var(--ns-radius-md) !important;
  display: grid; place-items: center;
  font-size: 1.25em;
}
.wallet-footer .icon-wrapper.bg-danger  { background: var(--ns-grad-danger)  !important; color: white; }
.wallet-footer .icon-wrapper.bg-warning { background: var(--ns-grad-brand)   !important; color: #1a1300; }
.wallet-footer .icon-wrapper.bg-success { background: var(--ns-grad-success) !important; color: white; }
.wallet-footer .icon-wrapper:not(.bg-danger):not(.bg-warning):not(.bg-success) {
  background: var(--ns-surface-3) !important; color: var(--ns-text-1);
}
.wallet-footer .item strong {
  font-weight: 600 !important;
  font-size: var(--ns-text-xs) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ns-text-2) !important;
}

/* ── Section headings ─────────────────────────────────────────── */
.section-heading {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--ns-space-5) 0 var(--ns-space-3);
  padding: 0 var(--ns-space-1);
}
.section-heading .title {
  font-weight: 700 !important;
  font-size: var(--ns-text-lg) !important;
  color: var(--ns-text-1) !important;
  display: flex; align-items: center; gap: var(--ns-space-2);
  margin: 0 !important;
}
.section-heading .title::before {
  content: ''; display: inline-block;
  width: 4px; height: 18px; border-radius: 2px;
  background: var(--ns-grad-brand);
}
.section-heading .link {
  color: var(--ns-brand) !important;
  font-size: var(--ns-text-sm) !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.section-heading .link:hover { color: var(--ns-brand-deep) !important; }

/* ── Cards & list-style rows ──────────────────────────────────── */
.card {
  background: var(--ns-surface-1) !important;
  border: 1px solid var(--ns-surface-2) !important;
  border-radius: var(--ns-radius-lg) !important;
  box-shadow: var(--ns-shadow-md);
  overflow: hidden;
}
.card .card-body { padding: var(--ns-space-5) !important; }

/* Whale alert / transactions list (used in index, whale, etc.) */
.transactions {
  display: flex; flex-direction: column; gap: var(--ns-space-2);
}
.transactions .item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ns-space-3);
  padding: var(--ns-space-4);
  background: var(--ns-surface-1);
  border: 1px solid var(--ns-surface-2);
  border-radius: var(--ns-radius-md);
  text-decoration: none !important; color: var(--ns-text-1) !important;
  transition: background var(--ns-dur-fast) var(--ns-ease),
              border-color var(--ns-dur-fast) var(--ns-ease),
              transform var(--ns-dur-fast) var(--ns-ease);
}
.transactions .item:hover {
  background: var(--ns-surface-2);
  border-color: var(--ns-surface-3);
  transform: translateY(-1px);
}
.transactions .item .detail {
  display: flex; align-items: center; gap: var(--ns-space-3);
  min-width: 0; flex: 1;
}
.transactions .item .detail img.image-block {
  width: 40px !important; height: 40px !important;
  border-radius: var(--ns-radius-pill) !important;
  background: var(--ns-surface-2);
  padding: 4px;
  border: 1px solid var(--ns-surface-3);
}
.transactions .item .detail strong {
  font-weight: 700; font-size: var(--ns-text-base);
  color: var(--ns-text-1);
}
.transactions .item .detail p {
  margin: 0 !important;
  font-size: var(--ns-text-xs);
  color: var(--ns-text-3);
  text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600;
}
.transactions .item .right {
  text-align: right;
}
.transactions .item .right .price {
  font-weight: 700; font-size: var(--ns-text-base);
  margin-bottom: 2px;
}
.transactions .item .right .price.text-success,
.transactions .item .right .price .text-success { color: var(--ns-success) !important; }
.transactions .item .right .price.text-danger,
.transactions .item .right .price .text-danger  { color: var(--ns-danger)  !important; }
.transactions .item .right .text-small {
  color: var(--ns-text-3);
  font-size: var(--ns-text-xs);
}

/* ── Carousel coin cards (Splide trend coins) ────────────────── */
.carousel-small {
  padding: 0 var(--ns-space-1);
}
.carousel-small .splide__slide { padding: 0 6px; }
.user-card {
  background: var(--ns-surface-1);
  border: 1px solid var(--ns-surface-2);
  border-radius: var(--ns-radius-lg);
  padding: var(--ns-space-4);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ns-space-2);
  transition: transform var(--ns-dur-fast) var(--ns-ease),
              border-color var(--ns-dur-fast) var(--ns-ease);
}
.user-card:hover {
  border-color: var(--ns-brand);
  transform: translateY(-3px);
}
.user-card img.imaged.w-100 {
  width: 44px !important; height: 44px !important;
  border-radius: var(--ns-radius-pill);
  background: var(--ns-surface-2);
  padding: 4px;
}
.user-card strong {
  font-size: var(--ns-text-sm); font-weight: 700;
  color: var(--ns-text-1);
}
.user-card p {
  margin: 0; font-size: var(--ns-text-xs); font-weight: 600;
  padding: 2px 8px; border-radius: var(--ns-radius-pill);
}
.user-card p.text-success { background: var(--ns-success-soft); color: var(--ns-success) !important; }
.user-card p.text-danger  { background: var(--ns-danger-soft);  color: var(--ns-danger)  !important; }

/* ── Coin detail page ────────────────────────────────────────── */
.coin-head {
  text-align: center; padding: var(--ns-space-6) var(--ns-space-4) !important;
}
.coin-head .search-form .form-control {
  background: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-surface-3) !important;
  color: var(--ns-text-1) !important;
  border-radius: var(--ns-radius-md) !important;
  height: 44px;
}
.coin-head .search-form .form-control:focus {
  border-color: var(--ns-brand) !important;
  box-shadow: var(--ns-brand-glow) !important;
}

/* ── Search box (form-group.searchbox) — modern dark theme ────
 * Used by coinDetay.php, liveTrade.php, liveChart.php for the coin
 * search input + ARA button. Bootstrap mobile template ships a light
 * "pill" search; we replace with a flush dark composite input.
 */
.form-group.searchbox {
  position: relative;
  background: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-surface-3) !important;
  border-radius: var(--ns-radius-pill) !important;
  padding: 4px !important;
  display: flex; align-items: center;
  transition: border-color var(--ns-dur-fast) var(--ns-ease),
              box-shadow var(--ns-dur-fast) var(--ns-ease);
  margin: var(--ns-space-3) 0 !important;
  min-height: 52px;
}
.form-group.searchbox:focus-within {
  border-color: var(--ns-brand) !important;
  box-shadow: var(--ns-brand-glow) !important;
}
.form-group.searchbox .form-control {
  flex: 1 1 auto;
  height: 44px !important;
  padding: 0 var(--ns-space-3) 0 var(--ns-space-10) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ns-text-1) !important;
  font-size: var(--ns-text-base) !important;
  letter-spacing: .01em;
  outline: none !important;
  box-shadow: none !important;
}
.form-group.searchbox .form-control::placeholder {
  color: var(--ns-text-3) !important;
  font-weight: 500;
}
/* Magnifier icon — left of the input */
.form-group.searchbox .input-icon {
  position: absolute;
  left: var(--ns-space-4);
  top: 50%; transform: translateY(-50%);
  color: var(--ns-text-3);
  font-size: 1.15em;
  pointer-events: none;
  display: flex; align-items: center;
}
.form-group.searchbox:focus-within .input-icon { color: var(--ns-brand); }
/* The "ARA" submit button — pill-shaped, brand gradient */
.form-group.searchbox .btn,
.form-group.searchbox button[type="button"],
.form-group.searchbox button[type="submit"] {
  background: var(--ns-grad-brand) !important;
  color: #1a1300 !important;
  border: 0 !important;
  border-radius: var(--ns-radius-pill) !important;
  height: 40px !important;
  padding: 0 var(--ns-space-5) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--ns-text-xs) !important;
  margin: 0 !important;
  flex: 0 0 auto;
  transition: transform var(--ns-dur-fast) var(--ns-ease),
              box-shadow var(--ns-dur-fast) var(--ns-ease);
}
.form-group.searchbox .btn:hover,
.form-group.searchbox button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245,180,23,.30);
  color: #1a1300 !important;
}
/* Loose ARA button without text (icon only) inside searchbox */
.form-group.searchbox .btn-icon {
  width: 40px !important; min-width: 40px !important;
  padding: 0 !important;
}
.coin-details img#coinLogo {
  width: 64px !important; height: 64px !important;
  border-radius: var(--ns-radius-pill);
  background: var(--ns-surface-2);
  padding: 8px;
  border: 1px solid var(--ns-surface-3);
}
.coin-details .total {
  color: var(--ns-text-1) !important;
  font-size: var(--ns-text-3xl) !important; font-weight: 800 !important;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--ns-text-1), var(--ns-brand));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  margin-top: var(--ns-space-3) !important;
}
.coin-details .caption {
  color: var(--ns-text-3) !important;
  font-size: var(--ns-text-sm) !important;
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600;
}

/* ── Generic listview rows used on coin detail / whale / etc. ── */
.listview > li {
  background: transparent !important;
  border-bottom: 1px solid var(--ns-surface-2) !important;
  padding: var(--ns-space-3) var(--ns-space-1) !important;
  color: var(--ns-text-1);
}
.listview > li:last-child { border-bottom: 0 !important; }
.listview > li .text-muted {
  color: var(--ns-text-3) !important;
  font-size: var(--ns-text-sm);
}

/* ── Buttons (Bootstrap overrides) ──────────────────────────── */
.btn-primary {
  background: var(--ns-grad-brand) !important;
  border: none !important; color: #1a1300 !important;
  font-weight: 600;
  border-radius: var(--ns-radius-md) !important;
  transition: transform var(--ns-dur-fast) var(--ns-ease),
              box-shadow var(--ns-dur-fast) var(--ns-ease) !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(245,180,23,.30);
  color: #1a1300 !important;
}
.btn-icon {
  height: 44px !important; min-width: 44px !important;
  border-radius: var(--ns-radius-md) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.appFooter {
  border-top: 1px solid var(--ns-surface-2) !important;
  padding: var(--ns-space-4) !important;
}
.appFooter .footer-title {
  color: var(--ns-text-3) !important;
  font-size: var(--ns-text-xs) !important;
  letter-spacing: .04em;
}

/* ── Empty state helper used across pages ───────────────────── */
.ns-empty {
  text-align: center;
  padding: var(--ns-space-10) var(--ns-space-4);
  color: var(--ns-text-3);
}
.ns-empty ion-icon {
  font-size: 56px;
  color: var(--ns-text-4);
  margin-bottom: var(--ns-space-3);
}
.ns-empty h4 {
  font-size: var(--ns-text-lg);
  color: var(--ns-text-2);
  margin-bottom: var(--ns-space-2);
}
.ns-empty p { font-size: var(--ns-text-sm); margin: 0; }

/* ── Live trade specific tweaks (keeps existing apex-charts CSS work) ── */
.coin-head .total.mt-2,
.coin-head .total.mt-3 {
  font-size: var(--ns-text-2xl) !important; font-weight: 700 !important;
  color: var(--ns-text-1) !important;
}
#tradeSizeSlider {
  accent-color: var(--ns-brand);
}
.accordion-item {
  background: var(--ns-surface-1) !important;
  border: 1px solid var(--ns-surface-2) !important;
  border-radius: var(--ns-radius-md) !important;
  margin-bottom: var(--ns-space-2);
  overflow: hidden;
}
/* Override every Bootstrap accordion CSS variable in one place so the
 * default white surface, white borders, blue focus ring and divider
 * line all disappear in our dark theme. Done at the .accordion scope
 * so site-wide accordions inherit the dark look automatically. */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: var(--ns-radius-md);
  --bs-accordion-inner-border-radius: var(--ns-radius-md);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--ns-text-1);
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--ns-brand-soft);
  --bs-accordion-active-color: var(--ns-brand);
  --bs-accordion-body-bg: transparent;
  --bs-accordion-body-color: var(--ns-text-2);
}
/* Hard kill any white pixel that legacy CSS or Bootstrap leaves on the
 * accordion building blocks. Backgrounds and borders are then restated
 * by our own dark surface rules below. */
.accordion,
.accordion-item,
.accordion-header,
.accordion-button,
.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.accordion-collapse,
.accordion-body {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.accordion-button {
  background: transparent !important;
  color: var(--ns-text-1) !important;
  border: 0 !important;
  font-size: var(--ns-text-sm); font-weight: 600;
  border-radius: 0 !important;
}
.accordion-header.bg-success,
.accordion-header.bg-danger {
  /* Bootstrap's .bg-success/.bg-danger paint with !important — we want a
   * softer brand-tinted surface, with the entire header strip coloured. */
  border: 0 !important;
  margin: 0 !important;
}
.accordion-header.bg-success { background: var(--ns-success-soft) !important; }
.accordion-header.bg-danger  { background: var(--ns-danger-soft)  !important; }
/* Make the button stretch to fill the whole header so no white pixels leak
 * around the edges, and lift the content colour to match the header tone. */
.accordion-header.bg-success .accordion-button,
.accordion-header.bg-danger  .accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.accordion-header.bg-success .accordion-button { color: var(--ns-success) !important; }
.accordion-header.bg-danger  .accordion-button { color: var(--ns-danger)  !important; }
/* Bootstrap chevron is a white SVG; tint it to the accent colour. */
.accordion-header.bg-success .accordion-button::after {
  filter: invert(64%) sepia(95%) saturate(360%) hue-rotate(95deg) brightness(95%);
}
.accordion-header.bg-danger .accordion-button::after {
  filter: invert(40%) sepia(98%) saturate(2200%) hue-rotate(330deg) brightness(105%);
}

/* ─────────────────────────────────────────────────────────────
 * Polish layer (added 2026-04-25, second pass)
 *   - .gradientSection edge-to-edge inside the centred container
 *   - Whale-alert / list rows get a softer, less harsh card style
 *   - .image-listview rows (used in premium.php İletişim list) get
 *     a modern row treatment with hover and better icon framing
 *   - .accordion (premium.php SSS) gets clean spacing + open state
 *     accent
 * ──────────────────────────────────────────────────────────── */

/* Hero / gradient sections need to BREAK OUT of the centred container
 * so the gradient runs to the screen edges instead of stopping at the
 * appCapsule's max-width and looking like a clipped band. The negative
 * inline-margin neutralises the parent's padding-inline. */
@media (min-width: 768px) {
  body:not(.ns-chatbot-page) #appCapsule .section.full,
  body:not(.ns-chatbot-page) #appCapsule .gradientSection,
  body:not(.ns-chatbot-page) #appCapsule .gradientSection2 {
    margin-inline: calc(-1 * var(--ns-space-4));
    border-radius: 0 0 var(--ns-radius-xl) var(--ns-radius-xl);
  }
}
@media (min-width: 1024px) {
  body:not(.ns-chatbot-page) #appCapsule .section.full,
  body:not(.ns-chatbot-page) #appCapsule .gradientSection,
  body:not(.ns-chatbot-page) #appCapsule .gradientSection2 {
    margin-inline: calc(-1 * var(--ns-space-6));
  }
}
.gradientSection .in,
.gradientSection2 .in {
  padding-inline: var(--ns-space-5);
}

/* Whale-alert / transactions list — softer rows */
.transactions { gap: var(--ns-space-3); padding: var(--ns-space-1); }
.transactions .item {
  padding: var(--ns-space-4) var(--ns-space-5);
  background: linear-gradient(180deg, var(--ns-surface-1), var(--ns-surface-2));
  border: 1px solid var(--ns-surface-2);
  border-radius: var(--ns-radius-lg);
  box-shadow: var(--ns-shadow-sm);
  position: relative;
  overflow: hidden;
}
/* Side accent bar — green for buy / red for sell */
.transactions .item::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 4px 4px 0;
  background: var(--ns-surface-3);
  transition: background var(--ns-dur-fast) var(--ns-ease);
}
.transactions .item:has(.text-success)::before,
.transactions .item:has(.bg-success)::before { background: var(--ns-success); }
.transactions .item:has(.text-danger)::before,
.transactions .item:has(.bg-danger)::before  { background: var(--ns-danger); }
.transactions .item:hover::before { width: 4px; }
.transactions .item .detail img.image-block {
  width: 44px !important; height: 44px !important;
  box-shadow: var(--ns-shadow-sm);
}
.transactions .item .right .price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* image-listview rows (premium.php İletişim) */
.image-listview {
  background: transparent !important;
  display: flex; flex-direction: column; gap: var(--ns-space-2);
  padding: 0 !important;
}
.image-listview > li {
  background: var(--ns-surface-1);
  border: 1px solid var(--ns-surface-2);
  border-radius: var(--ns-radius-md);
  overflow: hidden;
  transition: transform var(--ns-dur-fast) var(--ns-ease),
              border-color var(--ns-dur-fast) var(--ns-ease);
}
.image-listview > li:hover {
  border-color: var(--ns-brand);
  transform: translateY(-1px);
}
.image-listview > li > .item {
  padding: var(--ns-space-3) var(--ns-space-4) !important;
  display: flex; align-items: center; gap: var(--ns-space-3);
  text-decoration: none !important; color: var(--ns-text-1) !important;
}
.image-listview > li .icon-box {
  width: 40px !important; height: 40px !important;
  border-radius: var(--ns-radius-md) !important;
  display: grid; place-items: center;
  font-size: 1.1em; flex: 0 0 auto;
}
.image-listview > li .icon-box.bg-secondary { background: var(--ns-info)    !important; color: white; }
.image-listview > li .icon-box.bg-success   { background: var(--ns-success) !important; color: white; }
.image-listview > li .icon-box.bg-primary   { background: var(--ns-grad-brand) !important; color: #1a1300; }
.image-listview > li .in {
  font-weight: 600; color: var(--ns-text-1);
  flex: 1; min-width: 0;
}
.image-listview > li .in > div { font-weight: 600; }

/* Accordion (premium.php SSS) */
.accordion.custom-accordion,
.accordion#accordionExample1 {
  background: transparent;
  display: flex; flex-direction: column; gap: var(--ns-space-2);
}
/* Per-item dark surface (overrides the transparent reset above). */
.accordion .accordion-item {
  background: var(--ns-surface-1) !important;
  border: 1px solid var(--ns-surface-2) !important;
  border-radius: var(--ns-radius-md) !important;
  overflow: hidden;
  margin-bottom: 0 !important;
}
.accordion .accordion-button {
  background: var(--ns-surface-1) !important;
  color: var(--ns-text-1) !important;
  font-size: var(--ns-text-base) !important;
  font-weight: 600 !important;
  padding: var(--ns-space-4) var(--ns-space-5) !important;
  transition: background var(--ns-dur-fast) var(--ns-ease);
}
.accordion .accordion-button:hover { background: var(--ns-surface-2) !important; }
.accordion .accordion-button:not(.collapsed) {
  background: var(--ns-brand-soft) !important;
  color: var(--ns-brand) !important;
}
.accordion .accordion-button:not(.collapsed)::after {
  filter: invert(70%) sepia(80%) saturate(550%) hue-rotate(360deg) brightness(95%);
}
.accordion .accordion-body {
  background: var(--ns-surface-2) !important;
  color: var(--ns-text-2) !important;
  padding: var(--ns-space-5) !important;
  line-height: var(--ns-leading-relax);
  /* No divider — header → body must read as one continuous dark surface */
  border-top: 0 !important;
}

/* section-title used by premium / settings — give it the same heading
 * treatment as .section-heading .title (vertical accent bar). */
.section-title {
  font-weight: 700 !important;
  font-size: var(--ns-text-lg) !important;
  color: var(--ns-text-1) !important;
  display: flex; align-items: center; gap: var(--ns-space-2);
  margin: var(--ns-space-5) 0 var(--ns-space-3) !important;
}
.section-title::before {
  content: ''; display: inline-block;
  width: 4px; height: 18px; border-radius: 2px;
  background: var(--ns-grad-brand);
}

/* ── Coin-analysis carousel (index.php #coinAnalysisContainer) ─
 * Shell holds: prev/next arrows (absolute), the sliding viewport,
 * and a dot strip below. Only the viewport translates; arrows + dots
 * stay anchored.
 */
.ns-carousel {
  position: relative;
  cursor: grab;
  user-select: none;
}
.ns-carousel:active { cursor: grabbing; }

.ns-carousel__viewport {
  overflow: hidden;
  border-radius: var(--ns-radius-lg);
  will-change: transform, opacity;
}
/* Soft fade applied while a new coin is loading — coordinated by JS via
 * stepCarousel() add/remove of .is-loading. */
.ns-carousel__viewport.is-loading { opacity: .45; }
.ns-carousel__viewport .card {
  margin: 0;
}

/* Round nav arrows — overlap the card edges */
.ns-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(12, 14, 20, .82);
  color: var(--ns-text-1);
  border: 1px solid var(--ns-surface-3);
  border-radius: var(--ns-radius-pill);
  cursor: pointer;
  z-index: 5;
  font-size: 1.4em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--ns-shadow-md);
  transition: transform var(--ns-dur-fast) var(--ns-ease),
              background var(--ns-dur-fast) var(--ns-ease),
              color var(--ns-dur-fast) var(--ns-ease),
              border-color var(--ns-dur-fast) var(--ns-ease),
              opacity var(--ns-dur-fast) var(--ns-ease);
}
.ns-carousel__nav:hover {
  background: var(--ns-grad-brand);
  color: #1a1300;
  border-color: var(--ns-brand);
  transform: translateY(-50%) scale(1.06);
}
.ns-carousel__nav:disabled {
  opacity: .25;
  cursor: not-allowed;
  pointer-events: none;
}
.ns-carousel__nav--prev { left: 8px; }
.ns-carousel__nav--next { right: 8px; }

/* Dot indicator strip */
.ns-carousel__dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: var(--ns-space-3);
}
.ns-carousel__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ns-surface-3);
  transition: width var(--ns-dur-fast) var(--ns-ease),
              background var(--ns-dur-fast) var(--ns-ease);
}
.ns-carousel__dot.is-active {
  width: 22px;
  background: var(--ns-grad-brand);
  border-radius: 3px;
}

/* Tablet+ — push arrows further out so they don't overlap content */
@media (min-width: 768px) {
  .ns-carousel__nav--prev { left: -16px; }
  .ns-carousel__nav--next { right: -16px; }
  .ns-carousel__nav { width: 48px; height: 48px; font-size: 1.5em; }
}

/* ── Tablet / desktop refinements ─────────────────────────────
 * Mobile-first PWA stays untouched on phones. On wider screens we
 * widen the column and centre it so the page no longer looks like a
 * narrow strip pinned to the left edge.
 */
@media (min-width: 768px) {
  body:not(.ns-chatbot-page) {
    background: var(--ns-surface-0);
  }
  body:not(.ns-chatbot-page) #appCapsule {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--ns-space-4);
    background: var(--ns-surface-0);
  }
}
@media (min-width: 1024px) {
  body:not(.ns-chatbot-page) #appCapsule {
    max-width: 960px;
    padding-inline: var(--ns-space-6);
  }
}
@media (min-width: 1440px) {
  body:not(.ns-chatbot-page) #appCapsule {
    max-width: 1120px;
  }
}