/* source: src/styles/styles.scss
   Native CSS, no Sass. Nesting preserved via CSS Nesting (Chrome 112+,
   Firefox 117+, Safari 16.5+). The Tailwind v4 pipeline handles @apply. */

/* ── .box — flat card container ─────────────────────────────── */
.box {
  @apply bg-white p-4 shadow border border-slate-200 md:border-slate-100;
}

/* ── Info tables (product table, stock tables) ──────────────── */
.table-info tr td {
  @apply first:pe-3 first:font-semibold font-light first:text-black text-gray-800;
}
.table-align-top td {
  @apply align-top py-1;
}

/* ── Data table family ──────────────────────────────────────── */
.data-table {
  @apply text-center min-w-full border-collapse text-sm table-auto;

  & .cell {
    @apply text-left px-4 py-2 text-nowrap;

    &.mfr {
      @apply border-l-0;
    }
    &.image {
      @apply border-r-0 min-w-18 h-auto pl-2 p-2;
    }
    &.description {
      @apply text-left text-sm min-w-72 max-w-80 break-all whitespace-normal;
    }
    &.packageSize {
      @apply text-left px-2 w-auto max-w-40 break-all whitespace-normal text-pretty;
    }
  }

  & thead {
    @apply text-white border-primary bg-primary;
  }
  & th {
    @apply text-center border-b border-gray-200 border-r last:border-r-0;
  }
  & td {
    @apply border border-gray-200;

    &.description {
      @apply text-sm text-sec/80;
    }
    &.mfr {
      @apply text-left px-2 w-auto min-w-52;
    }
  }
}

.container-table {
  @apply overflow-x-auto;
}

/* ── Parameters table (product Specifications tab) ──────────── */
.parameters-table {
  @apply w-full md:w-auto md:min-w-2/3 border-collapse;

  & .row {
    @apply text-left border-b border-gray-200 hover:bg-gray-50;

    & .params {
      @apply p-2 md:pe-32 font-semibold align-top;
    }
    & .value {
      @apply p-2 border-gray-100;
    }
  }
}

/* ── Generic typography ─────────────────────────────────────── */
.h2 {
  @apply text-xl font-bold;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

a {
  @apply duration-200;
}

.page-title {
  @apply text-6xl text-center font-black mb-6 py-8;
}
.page-content {
  @apply pb-8;

  & a {
    @apply text-primary hover:underline font-medium;
  }
  & p {
    @apply mb-4;
  }
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumbList {
  @apply inline-flex flex-wrap md:flex-nowrap items-center gap-y-1;

  & .item {
    @apply inline-flex items-center;

    & .element {
      @apply inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary;

      &.disabled {
        @apply text-gray-400;
      }
    }
  }
}

/* ── Neumorphic backgrounds (port of .nio, .nio-sm, .nio-in) ── */
:root {
  --bg-light: #f5f5fa;
  --text-primary: #333344;
  --text-secondary: #666677;
  --border-radius: 12px;
  --transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.nio {
  @apply bg-paper shadow-nio2;
}
.nio-sm {
  @apply bg-paper shadow-nio2-sm;
}
.nio-in {
  @apply bg-paper shadow-nio2-in;
}

/* ── Filter button (neumorphic) ─────────────────────────────── */
.filter-button {
  @apply bg-sec text-white border-none cursor-pointer duration-200
         inline-flex items-center gap-2 font-semibold rounded-xl
         py-3.5 px-7 text-sm mx-auto;
  box-shadow: 6px 6px 12px var(--shadow-dark-color);

  &.secondary {
    @apply bg-gray-100 text-primary shadow-nio;
  }
}

/* ── Product gallery + product cards ────────────────────────── */
.product_gallery {
  @apply grid grid-cols-1;
}
.product-grid {
  @apply grid-cols-1 md:grid-cols-4 grid gap-8 max-w-full;
}

.product-card {
  @apply bg-[var(--bg-light)] overflow-hidden relative duration-200
         hover:-translate-y-1 rounded-xl p-4 pb-6 shadow-nio;

  &:hover {
    box-shadow:
      15px 15px 30px var(--shadow-dark-color),
      -15px -15px 30px var(--shadow-light-color);
  }

  &-badge {
    @apply absolute text-white bg-sec rounded-xl font-bold uppercase;
    top: 15px;
    right: 15px;
    padding: 4px 12px;
    letter-spacing: 0.5px;
  }

  &-image {
    width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
    transition: var(--transition);
  }

  & .title {
    @apply text-sm text-sec font-black mb-2 line-clamp-2;
  }

  & .specs {
    @apply text-sm text-gray-600 mb-5 flex-col flex gap-1;

    & .spec-item {
      @apply flex justify-between;
    }
    & .spec-label {
      @apply font-medium;
    }
    & .spec-value {
      @apply font-semibold;
    }
  }

  & .price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  & .price {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
  }

  & .stock {
    font-size: 13px;
    font-weight: 600;
    color: #00a854;
    display: flex;
    align-items: center;
    gap: 4px;

    &::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      background-color: #00a854;
      border-radius: 50%;
    }
  }

  & .add-to-cart {
    width: 100%;
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    &:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    &::before {
      content: "+";
      font-weight: 700;
    }
  }
}

/* ── Newsletter block ───────────────────────────────────────── */
.news {
  @apply bg-primary p-16 text-white;

  &__inner {
    @apply grid gap-10 items-center;
    grid-template-columns: 1fr 1fr;
  }
  & h2 {
    color: #fff;
    margin-bottom: 8px;
  }
  & p {
    color: rgba(255, 255, 255, 0.9);
  }

  &__form {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 6px;
    border-radius: 14px;

    & input {
      flex: 1;
      border: none;
      padding: 0 18px;
      font-size: 15px;
      outline: none;
    }

    & .btn--primary {
      background: var(--secondary);
      box-shadow: none;

      &:hover {
        background: #000;
      }
    }
  }
}

/* ── Buttons (btn family) ───────────────────────────────────── */
.btn {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3
         rounded-full font-semibold text-sm transition-all;

  &-primary {
    @apply bg-primary text-white hover:bg-primary-dark hover:-translate-y-0.5;
    box-shadow: 0 10px 24px -8px rgba(250, 70, 22, 0.55);
  }
  &-ghost {
    @apply bg-transparent text-foreground border border-foreground/15
           hover:bg-foreground hover:text-white;
  }
  &-dark {
    @apply bg-foreground text-white hover:bg-gray-200;
  }
}

/* ── Elementor description overrides (port of .desc) ────────── */
.desc {
  & .wd-title-style-underlined {
    & .liner-continer {
      @apply text-5xl border-b border-b-gray-300;
    }
    & .title {
      @apply border-b-2 border-b-primary inline-block pb-2.5 -mb-0.5 p-0.5;
    }
  }

  & .wd-title-style-bordered {
    & .liner-continer {
      @apply flex items-center flex-row border-gray-300;

      &::after {
        @apply content-[""] border-inherit ml-4 flex-auto border-b;
      }
    }
    & .title {
      @apply inline-block;
    }
  }

  & .wd-fontsize-l {
    @apply text-xl font-medium;
  }
  & .wd-fontsize-xl {
    @apply text-2xl font-medium;
  }

  & .e-con-inner {
    @apply gap-4 flex flex-col;
  }
}

/* ── Utility classes referenced across components ───────────── */
.eyebrow {
  @apply text-xs font-semibold uppercase tracking-widest text-slate-500;
}

.data-th {
  @apply text-2xs font-semibold uppercase tracking-wider text-slate-500
         bg-slate-50 border-b border-slate-200 px-3 h-9 whitespace-nowrap;
}
.data-td {
  @apply px-3 h-12 text-sm text-slate-700 border-b border-slate-100;
}

table,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.micro-pill {
  @apply inline-flex items-center gap-1 px-1.5 h-5 text-2xs font-semibold
         uppercase tracking-wide rounded-sm border;
}