/* ============================================================
   NariHaat Testimonials Pro — v2.0.0
   Modern 2026 CSS — OKLCH Colors, Container Queries,
   CSS Nesting, Scroll Reveal, Glassmorphism
   ============================================================ */

@layer nh-tokens, nh-base, nh-layout, nh-card, nh-animations, nh-themes, nh-responsive;

@layer nh-tokens {
  :root {
    /* Brand palette — NariHaat saffron + forest green */
    --nh-primary:        oklch(0.52 0.20 35);      /* Saffron orange */
    --nh-primary-light:  oklch(0.72 0.18 45);
    --nh-primary-glow:   oklch(0.52 0.20 35 / 0.15);
    --nh-accent:         oklch(0.38 0.14 155);     /* Forest green */
    --nh-accent-light:   oklch(0.58 0.14 155);
    --nh-gold:           oklch(0.72 0.18 80);      /* Star gold */
    --nh-gold-muted:     oklch(0.80 0.10 80);

    /* Surface tokens */
    --nh-bg:             oklch(0.98 0.005 90);
    --nh-surface:        oklch(1 0 0);
    --nh-surface-2:      oklch(0.97 0.008 60);
    --nh-border:         oklch(0.88 0.01 60 / 0.7);
    --nh-divider:        oklch(0.92 0.008 60);

    /* Text tokens */
    --nh-text:           oklch(0.18 0.01 260);
    --nh-text-muted:     oklch(0.48 0.01 260);
    --nh-text-faint:     oklch(0.68 0.008 260);
    --nh-text-inverse:   oklch(0.98 0.005 90);

    /* Verified green */
    --nh-verified-bg:    oklch(0.93 0.06 155);
    --nh-verified-text:  oklch(0.35 0.12 155);

    /* Spacing */
    --nh-sp-1:  0.25rem;
    --nh-sp-2:  0.5rem;
    --nh-sp-3:  0.75rem;
    --nh-sp-4:  1rem;
    --nh-sp-5:  1.25rem;
    --nh-sp-6:  1.5rem;
    --nh-sp-8:  2rem;
    --nh-sp-10: 2.5rem;
    --nh-sp-12: 3rem;

    /* Typography */
    --nh-font-body:    'Poppins', 'Noto Sans', system-ui, sans-serif;
    --nh-font-display: 'Poppins', 'Noto Sans', system-ui, sans-serif;

    /* Radius */
    --nh-radius-sm:   0.5rem;
    --nh-radius-md:   0.875rem;
    --nh-radius-lg:   1.25rem;
    --nh-radius-xl:   1.75rem;
    --nh-radius-pill: 9999px;

    /* Shadows */
    --nh-shadow-sm: 0 1px 3px oklch(0.2 0.01 260 / 0.06), 0 1px 2px oklch(0.2 0.01 260 / 0.04);
    --nh-shadow-md: 0 4px 16px oklch(0.2 0.01 260 / 0.08), 0 2px 4px oklch(0.2 0.01 260 / 0.04);
    --nh-shadow-lg: 0 12px 40px oklch(0.2 0.01 260 / 0.12), 0 4px 12px oklch(0.2 0.01 260 / 0.06);
    --nh-shadow-glow: 0 0 0 3px var(--nh-primary-glow), 0 8px 32px oklch(0.52 0.20 35 / 0.18);

    /* Transitions */
    --nh-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --nh-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --nh-dur-fast:     160ms;
    --nh-dur-base:     280ms;
    --nh-dur-slow:     480ms;
  }
}

@layer nh-base {
  /* Load Google Fonts inline via @import for reliability */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap');

  .nh-testimonials-wrap {
    container-type: inline-size;
    font-family: var(--nh-font-body);
    color: var(--nh-text);
    background: var(--nh-bg);
    padding-block: clamp(var(--nh-sp-8), 5vw, var(--nh-sp-12));
    padding-inline: clamp(var(--nh-sp-4), 3vw, var(--nh-sp-8));
    border-radius: var(--nh-radius-xl);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 10% 0%, oklch(0.52 0.20 35 / 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 90% 100%, oklch(0.38 0.14 155 / 0.05) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    & > * { position: relative; z-index: 1; }
  }

  .nh-testi-empty {
    text-align: center;
    color: var(--nh-text-muted);
    padding: var(--nh-sp-8);
    font-size: 1rem;
  }
}

@layer nh-layout {

  /* ── Section Header ──────────────────────────────────────── */
  .nh-testi-header {
    text-align: center;
    margin-bottom: clamp(var(--nh-sp-6), 3vw, var(--nh-sp-10));
  }

  .nh-testi-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nh-sp-1);
    background: color-mix(in oklch, var(--nh-primary) 12%, white);
    color: var(--nh-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--nh-sp-1) var(--nh-sp-3);
    border-radius: var(--nh-radius-pill);
    margin-bottom: var(--nh-sp-3);
    border: 1px solid color-mix(in oklch, var(--nh-primary) 25%, transparent);

    & svg { color: var(--nh-primary); }
  }

  .nh-testi-title {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--nh-text);
    margin-bottom: var(--nh-sp-2);
    text-wrap: balance;
  }

  .nh-testi-subtitle {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--nh-text-muted);
    max-width: 52ch;
    margin-inline: auto;
  }

  /* ── Slider ──────────────────────────────────────────────── */
  .nh-swiper-container {
    padding-bottom: calc(var(--nh-sp-10) + 4px) !important;
    padding-inline: var(--nh-sp-2);
    overflow: hidden;

    & .swiper-wrapper { align-items: stretch; }
    & .swiper-slide   { height: auto; display: flex; }
  }

  /* Swiper nav buttons — custom override */
  .nh-btn-prev,
  .nh-btn-next {
    width: 44px !important;
    height: 44px !important;
    background: var(--nh-surface) !important;
    border-radius: var(--nh-radius-pill) !important;
    box-shadow: var(--nh-shadow-md) !important;
    color: var(--nh-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--nh-border) !important;
    transition: background var(--nh-dur-fast) var(--nh-ease),
                box-shadow var(--nh-dur-fast) var(--nh-ease),
                transform var(--nh-dur-fast) var(--nh-ease-spring) !important;
    top: 50% !important;

    &::after { display: none !important; }

    &:hover {
      background: var(--nh-primary) !important;
      color: white !important;
      box-shadow: var(--nh-shadow-glow) !important;
      transform: translateY(-50%) scale(1.08) !important;
    }

    &:active { transform: translateY(-50%) scale(0.96) !important; }
  }

  .nh-btn-prev { left: 0 !important; }
  .nh-btn-next { right: 0 !important; }

  /* Pagination */
  .nh-pagination {
    bottom: var(--nh-sp-2) !important;

    & .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: var(--nh-border);
      opacity: 1;
      transition: all var(--nh-dur-base) var(--nh-ease);
    }

    & .swiper-pagination-bullet-active {
      width: 24px;
      border-radius: var(--nh-radius-pill);
      background: var(--nh-primary);
    }
  }

  /* ── Grid ────────────────────────────────────────────────── */
  .nh-grid-container {
    display: grid;
    grid-template-columns: repeat(var(--nh-columns, 3), 1fr);
    gap: var(--nh-sp-5);
    align-items: start;
  }

  /* ── Masonry ─────────────────────────────────────────────── */
  .nh-masonry-container {
    columns: var(--nh-columns, 3) 280px;
    column-gap: var(--nh-sp-5);

    & .nh-testi-card {
      break-inside: avoid;
      margin-bottom: var(--nh-sp-5);
      width: 100%;
    }
  }
}

@layer nh-card {

  .nh-testi-card {
    background: var(--nh-surface);
    border-radius: var(--nh-radius-lg);
    border: 1px solid var(--nh-border);
    padding: var(--nh-sp-5) var(--nh-sp-5) var(--nh-sp-4);
    box-shadow: var(--nh-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--nh-sp-3);
    flex: 1;
    transition:
      transform   var(--nh-dur-base) var(--nh-ease),
      box-shadow  var(--nh-dur-base) var(--nh-ease),
      border-color var(--nh-dur-base) var(--nh-ease);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--nh-primary-glow) 0%, transparent 60%);
      opacity: 0;
      transition: opacity var(--nh-dur-base) var(--nh-ease);
      pointer-events: none;
    }

    @media (hover: hover) {
      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--nh-shadow-lg);
        border-color: color-mix(in oklch, var(--nh-primary) 30%, var(--nh-border));

        &::before { opacity: 1; }
        & .nh-quote-icon svg path { opacity: 0.35; }
        & .nh-star--filled { animation: nh-star-pop 300ms var(--nh-ease-spring) forwards; }
      }
    }
  }

  /* ── Card Top ────────────────────────────────────────── */
  .nh-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nh-sp-2);
  }

  /* ── Star Rating ─────────────────────────────────────── */
  .nh-stars {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .nh-star {
    font-size: 1.05rem;
    line-height: 1;
    transition: transform var(--nh-dur-fast) var(--nh-ease-spring);

    &--filled { color: var(--nh-gold); }
    &--empty  { color: var(--nh-gold-muted); opacity: 0.4; }
  }

  .nh-rating-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--nh-text-muted);
    margin-left: var(--nh-sp-1);
  }

  /* ── Verified Badge ──────────────────────────────────── */
  .nh-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--nh-verified-text);
    background: var(--nh-verified-bg);
    padding: 3px var(--nh-sp-2);
    border-radius: var(--nh-radius-pill);
    border: 1px solid color-mix(in oklch, var(--nh-accent) 20%, transparent);
    white-space: nowrap;
  }

  /* ── Quote Icon ──────────────────────────────────────── */
  .nh-quote-icon {
    color: var(--nh-primary);
    line-height: 0;
    margin-bottom: calc(-1 * var(--nh-sp-2));

    & svg path { transition: opacity var(--nh-dur-base) var(--nh-ease); }
  }

  /* ── Review Content ──────────────────────────────────── */
  .nh-review-content {
    font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
    line-height: 1.65;
    color: var(--nh-text);
    flex: 1;
    border: none;
    padding: 0;
    margin: 0;
    font-style: normal;

    /* Clamp to 5 lines in slider mode */
    .nh-layout-slider & {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    & p { margin: 0; }
  }

  /* ── Product Chip ────────────────────────────────────── */
  .nh-product-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nh-sp-1);
    font-size: 0.75rem;
    color: var(--nh-text-muted);
    padding: var(--nh-sp-2) var(--nh-sp-3);
    background: var(--nh-surface-2);
    border-radius: var(--nh-radius-sm);
    border: 1px solid var(--nh-divider);
    line-height: 1.3;

    & svg { flex-shrink: 0; color: var(--nh-primary); }
    & span:first-of-type { font-weight: 500; color: var(--nh-text); }
  }

  .nh-category-tag {
    background: color-mix(in oklch, var(--nh-primary) 10%, white);
    color: var(--nh-primary);
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px var(--nh-sp-2);
    border-radius: var(--nh-radius-pill);
    border: 1px solid color-mix(in oklch, var(--nh-primary) 18%, transparent);
  }

  /* ── Card Footer ─────────────────────────────────────── */
  .nh-card-footer {
    display: flex;
    align-items: center;
    gap: var(--nh-sp-3);
    padding-top: var(--nh-sp-3);
    border-top: 1px solid var(--nh-divider);
    margin-top: auto;
  }

  /* ── Avatar ──────────────────────────────────────────── */
  .nh-avatar-wrap { flex-shrink: 0; }

  .nh-avatar-img,
  .nh-avatar-initials {
    width: 48px;
    height: 48px;
    border-radius: var(--nh-radius-pill);
    object-fit: cover;
  }

  .nh-avatar-img {
    border: 2px solid var(--nh-border);
    box-shadow: var(--nh-shadow-sm);
    display: block;
  }

  .nh-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      135deg,
      var(--nh-primary) 0%,
      color-mix(in oklch, var(--nh-primary) 70%, var(--nh-accent)) 100%
    );
    color: white;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid var(--nh-surface);
    box-shadow: var(--nh-shadow-sm);
    flex-shrink: 0;
  }

  /* ── Customer Info ───────────────────────────────────── */
  .nh-customer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .nh-customer-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nh-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nh-customer-location {
    font-size: 0.75rem;
    color: var(--nh-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;

    & svg { flex-shrink: 0; color: var(--nh-primary); }
  }

  .nh-review-date {
    font-size: 0.7rem;
    color: var(--nh-text-faint);
    display: block;
  }
}

@layer nh-animations {

  /* ── Scroll Reveal ───────────────────────────────────── */
  .nh-reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition:
      opacity  var(--nh-dur-slow) var(--nh-ease),
      transform var(--nh-dur-slow) var(--nh-ease);

    &.nh-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Stagger via data- index set in JS */
  @for $i from 1 to 13 {
    .nh-reveal[data-index="$(i)"] {
      transition-delay: calc($(i) * 60ms);
    }
  }

  /* ── Star Pop ─────────────────────────────────────────── */
  @keyframes nh-star-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35) rotate(-8deg); }
    70%  { transform: scale(0.9) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  /* ── Quote Float ──────────────────────────────────────── */
  @keyframes nh-quote-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
  }

  .nh-testi-card:hover .nh-quote-icon {
    animation: nh-quote-float 2.4s ease-in-out infinite;
  }

  /* ── Badge Pulse ──────────────────────────────────────── */
  @keyframes nh-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.52 0.20 35 / 0.3); }
    50%       { box-shadow: 0 0 0 6px oklch(0.52 0.20 35 / 0); }
  }

  .nh-testi-badge { animation: nh-badge-pulse 3s ease-in-out infinite; }

  /* ── Stagger delay via inline style injected by JS ───── */

  /* ── Reduced Motion ───────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .nh-reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .nh-testi-card,
    .nh-testi-badge,
    .nh-quote-icon {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer nh-themes {

  /* ── Dark Theme ──────────────────────────────────────── */
  .nh-theme-dark {
    --nh-bg:        oklch(0.13 0.008 260);
    --nh-surface:   oklch(0.17 0.010 260);
    --nh-surface-2: oklch(0.21 0.010 260);
    --nh-border:    oklch(0.28 0.010 260 / 0.8);
    --nh-divider:   oklch(0.24 0.010 260);
    --nh-text:      oklch(0.92 0.005 260);
    --nh-text-muted:oklch(0.64 0.010 260);
    --nh-text-faint:oklch(0.44 0.008 260);
    --nh-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
    --nh-shadow-md: 0 4px 16px oklch(0 0 0 / 0.4);
    --nh-shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5);
    --nh-verified-bg:   oklch(0.22 0.08 155);
    --nh-verified-text: oklch(0.70 0.14 155);

    &::before {
      background:
        radial-gradient(ellipse 60% 40% at 10% 0%, oklch(0.52 0.20 35 / 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 90% 100%, oklch(0.38 0.14 155 / 0.08) 0%, transparent 70%);
    }

    & .nh-avatar-initials {
      border-color: var(--nh-surface-2);
    }

    & .nh-category-tag {
      background: color-mix(in oklch, var(--nh-primary) 18%, var(--nh-surface-2));
    }
  }

  /* ── Gradient Theme ──────────────────────────────────── */
  .nh-theme-gradient {
    --nh-bg: linear-gradient(
      135deg,
      oklch(0.96 0.02 35)  0%,
      oklch(0.97 0.015 80) 35%,
      oklch(0.96 0.018 155) 100%
    );
    background: var(--nh-bg) !important;

    & .nh-testi-card {
      background: oklch(1 0 0 / 0.85);
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      border-color: oklch(1 0 0 / 0.6);
      box-shadow:
        0 2px 8px oklch(0.52 0.20 35 / 0.08),
        0 8px 32px oklch(0.52 0.20 35 / 0.06),
        inset 0 1px 0 oklch(1 0 0 / 0.8);
    }
  }
}

@layer nh-responsive {

  @container (max-width: 900px) {
    .nh-grid-container { grid-template-columns: repeat(2, 1fr); }
    .nh-masonry-container { columns: 2 260px; }
  }

  @container (max-width: 600px) {
    .nh-grid-container,
    .nh-masonry-container { grid-template-columns: 1fr; columns: 1; }

    .nh-btn-prev { left: -8px !important; }
    .nh-btn-next { right: -8px !important; }

    .nh-testi-title { font-size: 1.5rem; }

    .nh-review-content { font-size: 0.875rem; }

    .nh-testi-card { padding: var(--nh-sp-4); }
  }

  @container (max-width: 400px) {
    .nh-customer-name { font-size: 0.85rem; }
    .nh-avatar-img, .nh-avatar-initials { width: 40px; height: 40px; }
  }
}