/* NetCentral design system */
:root {
  --brand: #4f46e5;
  --accent: #06b6d4;
}

* { box-sizing: border-box; }

.prose h1, .prose h2, .prose h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; margin-top: 1.5rem; margin-bottom: .75rem; }
.prose p { margin: .75rem 0; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin: .75rem 0; }
.prose a { color: var(--brand, #4f46e5); text-decoration: underline; }

.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* glassmorphism card */
.glass { background: rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.4); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* gradient text */
.grad-text { background: linear-gradient(135deg, var(--brand, #4f46e5), var(--accent, #06b6d4)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons */
.btn-glow { box-shadow: 0 0 30px -8px rgba(99,102,241,.6); }

/* custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* x-collapse fallback */
[x-cloak] { display: none !important; }

/* admin table responsive */
@media (max-width: 768px) {
  table.tbl { font-size: .75rem; }
}

/* number counter */
.counter { font-variant-numeric: tabular-nums; }

/* hero mesh */
.mesh { background:
  radial-gradient(at 20% 30%, rgba(99,102,241,.25) 0, transparent 50%),
  radial-gradient(at 80% 20%, rgba(6,182,212,.25) 0, transparent 50%),
  radial-gradient(at 50% 80%, rgba(139,92,246,.2) 0, transparent 50%); }

/* pulse ring */
@keyframes ping-slow { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2); opacity: 0; } }
.ping-slow { animation: ping-slow 2s cubic-bezier(0,0,.2,1) infinite; }

/* ============ PREMIUM FORM STYLES ============ */
.form-section {
  max-width: 700px;
  margin: 0 auto;
}

.form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px -15px rgba(15,23,42,.08);
  padding: 2rem;
}

.form-header {
  margin-bottom: 1.75rem;
}

.form-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 .5rem;
}

.form-header p {
  color: #64748b;
  font-size: .95rem;
  margin: 0;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label.lbl {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: .5rem;
  letter-spacing: .01em;
}

.input,
select,
textarea {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-size: .95rem;
  color: #0f172a;
  background: #fff;
  transition: all .2s ease;
  appearance: none;
  font-family: inherit;
}

.input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-500, #6366f1);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.input.error,
select.error,
textarea.error {
  border-color: #ef4444;
  background: #fef2f2;
}

.input.error:focus,
select.error:focus,
textarea.error:focus {
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3e%3c/path%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.form-error {
  color: #ef4444;
  font-size: .85rem;
  margin-top: .4rem;
  display: block;
  animation: slideDown .25s ease;
}

.form-hint {
  color: #94a3b8;
  font-size: .78rem;
  margin-top: .4rem;
  display: block;
  line-height: 1.45;
}

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

.form-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  border-radius: .75rem;
  padding: .75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand, #4f46e5), var(--brand-700, #4338ca));
  color: #fff;
  box-shadow: 0 4px 14px 0 rgba(79,70,229,.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-700, #4338ca), #3730a3);
  box-shadow: 0 6px 20px 0 rgba(79,70,229,.45);
  transform: translateY(-1px);
  color: #fff;
}

.btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
}

.btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.btn-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.btn-danger:hover {
  background: #fecaca;
  color: #991b1b;
}

.btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Checkbox / Radio */
.check-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.check-group input[type="checkbox"],
.check-group input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand-500, #6366f1);
}

.check-group label {
  font-size: .95rem;
  color: #334155;
  font-weight: 500;
  cursor: pointer;
}

/* Table action buttons */
.tbl-actions {
  display: flex;
  gap: .5rem;
}

.tbl-actions a,
.tbl-actions button {
  font-size: .85rem;
  padding: .4rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
}

.tbl-actions a.text-brand {
  color: #4f46e5;
}

.tbl-actions a.text-brand:hover {
  color: #4338ca;
  text-decoration: underline;
}

.tbl-actions button.text-red,
.tbl-actions a.text-red {
  color: #ef4444;
}

.tbl-actions button.text-red:hover,
.tbl-actions a.text-red:hover {
  color: #b91c1c;
  text-decoration: underline;
}

/* ============ POPUP TOASTS (AJAX feedback) ============ */
.nc-toasts {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.nc-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: .875rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 10px 40px -15px rgba(15,23,42,.25);
  font-size: .875rem;
  line-height: 1.4;
  animation: nc-toast-in .25s ease;
}

.nc-toast--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.nc-toast--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.nc-toast--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.nc-toast__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .0625rem; }
.nc-toast__text { flex: 1; }

.nc-toast__close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 .125rem;
}
.nc-toast__close:hover { opacity: 1; }

.nc-toast--out { opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }

@keyframes nc-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AJAX form submit loading state */
form[data-loading="1"] [data-ajax-submit] { cursor: not-allowed; }

/* Ensure JS-toggled loading elements stay hidden regardless of other display rules */
[data-ajax-label][hidden],
[data-ajax-loading][hidden],
[data-ajax-spinner][hidden],
[data-ajax-icon][hidden] { display: none !important; }

/* ============ HOME HERO (banner background slides) ============ */
/* Each Admin -> Banners row is one slide: an absolutely positioned image layer.
   Alpine toggles the `is-active` class with object syntax ({ 'is-active': … })
   so the static class list never carries a conflicting opacity utility — Alpine
   only undoes the classes it added itself, so a static `opacity-0/100` class
   could never be removed by a :class binding. Rails survive with no JS because
   the first slide is rendered with `is-active` by the view. */
.nc-hero-slide {
  opacity: 0;
  transition: opacity .7s ease;
}
.nc-hero-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nc-hero-slide { transition: none; }
}

/* ============ 3D COVERFLOW (Advertisements section) ============ */
/* Image-only coverflow: each slide is an <a> wrapping the advert image. The
   card size lives in --cf-w, so one transform map (driven by the Alpine
   component in partials/coverflow.php) works at every breakpoint. */
.cf-section {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
  background: #eef1f9;
  background-image:
    radial-gradient(60% 55% at 50% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #f6f7fc 0%, color-mix(in srgb, var(--brand) 9%, #eef1f9) 55%, #f8fafd 100%);
}

/* An admin-uploaded section background image replaces the built-in gradient so
   the absolutely positioned <img> from partials/section_background.php shows. */
.cf-section.has-bg {
  background: #0f172a;
  background-image: none;
}

.cf-stage {
  --cf-w: clamp(160px, 24vw, 300px);
  --cf-h: calc(var(--cf-w) * 1.25);
  position: relative;
  height: calc(var(--cf-h) + 3rem);
  margin-top: 3rem;
  perspective: 1200px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  outline: none;
}

.cf-track { position: absolute; inset: 0; transform-style: preserve-3d; }

.cf-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cf-w);
  height: var(--cf-h);
  margin: calc(var(--cf-h) / -2) 0 0 calc(var(--cf-w) / -2);
  transform:
    translate3d(calc(var(--cf-x, 0) * var(--cf-w)), 0, var(--cf-z, 0px))
    rotateY(calc(var(--cf-ry, 0) * 1deg))
    scale(var(--cf-s, 1));
  opacity: var(--cf-o, 1);
  transition: transform .66s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  will-change: transform;
}

/* Soft floor shadow under each slide. */
.cf-slide::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -20px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15,23,42,.38) 0%, rgba(15,23,42,0) 70%);
  filter: blur(8px);
  opacity: var(--cf-o, 1);
  transition: opacity .45s ease;
  pointer-events: none;
}

.cf-card {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: 0 24px 44px -22px rgba(15,23,42,.45);
  transition: box-shadow .4s ease;
}

.cf-slide.is-active .cf-card { box-shadow: 0 34px 60px -24px rgba(15,23,42,.55); }

.cf-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--cf-b, 1));
  transition: filter .45s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.cf-card:focus-visible { outline: 3px solid var(--brand, #4f46e5); outline-offset: 3px; }

@media (max-width: 640px) {
  .cf-section { padding: 3rem 0 3.5rem; }
  .cf-stage { --cf-w: clamp(140px, 42vw, 220px); margin-top: 2rem; height: calc(var(--cf-h) + 2.5rem); }
  .cf-slide::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-slide, .cf-slide::after, .cf-card, .cf-card img { transition: none; }
}

/* ============ HOME PAGE PRELOADER ============ */
/* Full-screen overlay shown while the home page loads: the logo sits in a
   circle painted with the admin primary colour (inline background-color from
   the view), the site name follows, then a progress bar. app.js
   ([data-preloader]) fills the bar and fades the overlay out once the page is
   ready - see partials/preloader.php. */
html.nc-preloading,
html.nc-preloading body { overflow: hidden; }

.nc-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity .45s ease, visibility .45s ease;
}

.nc-preloader.is-hidden { opacity: 0; visibility: hidden; }

.nc-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  text-align: center;
}

/* Brand circle: primary colour comes from the admin theme. */
.nc-preloader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 9999px;
  color: #fff;
  box-shadow: 0 22px 45px -20px rgba(15,23,42,.5), 0 0 0 10px color-mix(in srgb, var(--brand, #4f46e5) 12%, transparent);
  animation: nc-preloader-pulse 1.8s ease-in-out infinite;
}

.nc-preloader__logo img { width: 62%; height: 62%; object-fit: contain; }
.nc-preloader__logo svg { width: 52%; height: 52%; }

.nc-preloader__name {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--brand, #4f46e5), var(--accent, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nc-preloader__bar {
  width: 13rem;
  height: .375rem;
  border-radius: 9999px;
  background: #eef1f7;
  overflow: hidden;
}

.nc-preloader__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand, #4f46e5), var(--accent, #06b6d4));
  transition: width .25s ease;
}

@keyframes nc-preloader-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@media (max-width: 640px) {
  .nc-preloader__logo { width: 5.5rem; height: 5.5rem; }
  .nc-preloader__name { font-size: 1.25rem; }
  .nc-preloader__bar { width: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-preloader__logo { animation: none; }
  .nc-preloader,
  .nc-preloader__fill { transition: none; }
}