/* =========================================================================
 * Sejoli Stock Notifier — frontend styles
 *
 * Fit-and-match strategy with Sejoli's checkout design system.
 *
 * Design tokens adopted from Sejoli (public/css/sejoli-checkout.css +
 * per-template variants {default,v2,compact,less,modern,smart}):
 *   - Primary green (success / buy button)  : #52c140
 *   - Accent orange (price / link / alert)  : #f76f55
 *   - Border gray (inputs / chips)          : #cbceda
 *   - Light gray (section bg / divider)     : #eaeaea
 *   - Body bg                               : #f2f3f8
 *   - Card bg                               : #ffffff
 *   - Text color                            : #2e2e31
 *   - Border radius (cards / sections)      : 15px
 *   - Border radius (buttons / chips)       : 8px
 *   - Card padding (desktop)                : 24px 48px (default template)
 *   - Card padding (mobile)                 : 20px 25px
 *   - Font family                           : 'Nunito Sans', sans-serif
 *   - Base font size                        : 14px
 *   - h3 font size                          : 18px
 *   - h4 font size                          : 14px
 *   - Body line-height                      : 1.3
 *
 * Responsive breakpoints (mirror Sejoli's):
 *   - Large desktop                         : > 1200px
 *   - Desktop / tablet landscape            : 992px – 1200px
 *   - Tablet portrait                       : 768px – 992px
 *   - Smartphone                            : ≤ 767px
 *   - Small smartphone                      : ≤ 425px
 *
 * Two rendering contexts:
 *   1. HOOK context  — rendered inside Sejoli's order-detail <table> via
 *      `sejoli/checkout-template/after-product` action. Output wraps in
 *      <tr class="sejoli-sn-stock-row"><td colspan="3">…</td></tr> so the
 *      badge becomes a proper full-width row in the product detail table.
 *      This hook fires in ALL 6 Sejoli design templates
 *      (default, v2, compact, less, modern, smart).
 *   2. SHORTCODE context — rendered standalone via [sejoli_sn_stock_info].
 *      Output is a plain <div> placed in the content flow.
 *   3. CONTENT FALLBACK — when the native hook doesn't fire (custom theme
 *      or third-party checkout override), the badge is injected via
 *      `the_content` filter wrapped in `.sejoli-sn-content-fallback`.
 *
 * Compatible with all 6 Sejoli checkout design templates for physical
 * products (checkout-fisik.php):
 *   - default  : single-column .ui.text.container, .detail-pesanan-table > .ui.table
 *   - v2       : single-column .ui.text.container, similar table structure
 *   - less     : single-column, minimalist
 *   - compact  : single-column, compact spacing
 *   - modern   : single-column, modern card styling
 *   - smart    : two-column .grid-container with .sticky-sidebar
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Base wrapper
 * ------------------------------------------------------------------------- */
.sejoli-sn-stock-wrap {
  margin: 12px 0 18px;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #2e2e31;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* When rendered INSIDE a <td> (hook context), the wrapper sits flush
 * against the table cell padding so it doesn't double-pad. We use
 * !important to override Sejoli's .ui.table td padding which is
 * typically 14px 8px on desktop and tighter on mobile. */
.sejoli-sn-stock-row > td {
  padding: 4px 14px 18px 14px !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* The fallback content wrapper (when injected via the_content filter). */
.sejoli-sn-content-fallback {
  margin-top: 18px;
  margin-bottom: 6px;
}
.sejoli-sn-content-fallback .sejoli-sn-stock-wrap {
  margin: 0;
}

/* =========================================================================
 * Style variants — selectable in admin settings
 *
 *   badge  — pill-shaped chip, inline next to qty selector   (default)
 *   block  — full-width banner, prominent (good for urgency)
 *   inline — text-only, no background (minimal, in-flow)
 *   list   — multi-rule list with variant labels (for many variants)
 * ========================================================================= */

/* --- badge: pill chip ------------------------------------------------ */
.sejoli-sn-stock-wrap.sejoli-sn-style-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-badge .sejoli-sn-stock-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid #ffeeba;
  background: #fff8e1;
  color: #856404;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  /* Ensure chip doesn't shrink below touch-target size on mobile */
  min-height: 32px;
  box-sizing: border-box;
}

/* --- block: full-width banner --------------------------------------- */
.sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 0;
  border-left: 4px solid #f76f55;
  background: #fff5f2;
  color: #2e2e31;
  font-weight: 700;
  font-size: 14px;
}

/* --- inline: text-only ---------------------------------------------- */
.sejoli-sn-stock-wrap.sejoli-sn-style-inline .sejoli-sn-stock-item {
  display: inline;
  margin-right: 8px;
  padding: 0 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #f76f55;
  font-weight: 700;
}

/* --- list: multi-variant list --------------------------------------- */
.sejoli-sn-stock-wrap.sejoli-sn-style-list {
  border: 1px solid #cbceda;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px 0;
  overflow: hidden;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  color: #2e2e31;
  font-weight: 600;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item:last-child {
  border-bottom: 0;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-variant {
  flex: 0 0 auto;
  font-size: 12px;
  color: #2e2e31;
  background: #eaeaea;
  border-radius: 6px;
  padding: 3px 10px;
  font-weight: 700;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-message {
  flex: 1 1 auto;
  font-weight: 600;
}

/* =========================================================================
 * State colors — low / urgent / out-of-stock
 *
 * Default palette mirrors Sejoli's visual language:
 *   - Normal (in-stock, just informative) → warm yellow chip
 *   - Low stock (≤ threshold)            → orange/coral, Sejoli's #f76f55
 *   - Urgent (≤ threshold, highlight)    → red-orange, bold
 *   - Out of stock (= 0)                 → muted gray, strike-through
 *
 * These can be overridden by the admin color pickers (inline CSS injected
 * by Frontend::maybe_enqueue_assets()).
 * ========================================================================= */
.sejoli-sn-stock-wrap .sejoli-sn-is-low {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}
.sejoli-sn-stock-wrap .sejoli-sn-is-urgent {
  background: #fff0ed;
  color: #d83a1a;
  border-color: #f76f55;
  font-weight: 700;
}
.sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-is-urgent,
.sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-is-low {
  border-left-width: 4px;
  border-left-style: solid;
}
.sejoli-sn-stock-wrap .sejoli-sn-is-out {
  background: #eaeaea;
  color: #6c757d;
  border-color: #d6d8db;
  text-decoration: line-through;
  opacity: 0.85;
}

/* Highlight effect — auto-added by JS when the user picks a variant */
.sejoli-sn-stock-wrap .sejoli-sn-stock-item.sejoli-sn-highlight {
  outline: 2px solid #f76f55;
  outline-offset: 1px;
  box-shadow: 0 1px 8px rgba(247, 111, 85, 0.25);
  transform: scale(1.02);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* "No variant selected yet" hint — JS adds this class to all items
 * when the user hasn't picked a variant. We don't dim them (the user
 * asked for the badge to be visible immediately), but we provide the
 * hook so custom themes can opt-in to dimming if they prefer. */
.sejoli-sn-stock-wrap .sejoli-sn-stock-item.sejoli-sn-no-variant {
  /* intentionally empty — available for custom CSS */
}

/* Hidden state — JS filters out non-matching items */
.sejoli-sn-stock-wrap .sejoli-sn-stock-item.sejoli-sn-hidden {
  display: none !important;
}

/* =========================================================================
 * Standalone shortcode display (legacy / non-checkout usage)
 * ========================================================================= */
.sejoli-sn-stock-display {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  color: #f76f55;
}
.sejoli-sn-no-stock {
  color: #6c757d;
  font-style: italic;
}
.sejoli-sn-error {
  color: #c62828;
}
.sejoli-sn-no-user,
.sejoli-sn-no-alerts {
  color: #6c757d;
  font-style: italic;
}

/* =========================================================================
 * Per-template fit-and-match overrides
 *
 * Each Sejoli checkout design template (default, v2, less, compact,
 * modern, smart) wraps the checkout form in slightly different container
 * widths and paddings. These rules ensure our badge looks consistent
 * across all of them.
 * ========================================================================= */

/* default & v2: single-column .ui.text.container (~700px max-width).
 * The .detail-pesanan-table > .ui.table has standard Semantic UI
 * padding. Our badge row already inherits the table cell padding,
 * so we just nudge the inner wrap to align with the product title. */
.ui.text.container .sejoli-sn-stock-row > td {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* compact: tighter spacing — match the compact template's reduced
 * section padding (20px 25px on mobile, 24px 48px on desktop). */
body.body-checkout .sejoli-sn-stock-wrap {
  /* Use Sejoli's body-checkout class to scope our overrides to the
   * checkout page only (avoids affecting admin pages). */
  margin: 10px 0 14px;
}

/* modern: modern card styling — slightly larger border-radius on
 * the list style to match the modern template's 15px card radius. */
body.body-checkout .sejoli-sn-stock-wrap.sejoli-sn-style-list {
  border-radius: 12px;
}

/* smart: two-column grid layout. The .grid-container holds the main
 * column and the .sticky-sidebar. The badge is rendered inside the
 * main column's .detail-pesanan-table. Ensure it doesn't overflow
 * the grid column on narrow viewports. */
.grid-container .sejoli-sn-stock-wrap {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.grid-container .sejoli-sn-stock-row > td {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* less: minimalist template — reduce visual weight of the badge
 * to match the less template's understated style. */
body.body-checkout .sejoli-sn-stock-wrap.sejoli-sn-style-badge .sejoli-sn-stock-item {
  /* Slightly smaller padding to match less template's tight layout */
  padding: 5px 12px;
}

/* =========================================================================
 * Responsive — match Sejoli's breakpoints
 *
 * Sejoli's mobile breakpoint is 767px (single-column layout). At this
 * width, the .ui.text.container becomes full-width and table cells
 * compress. Our badge needs to:
 *   - Not overflow horizontally
 *   - Maintain touch-target size (≥32px height for chips)
 *   - Use slightly tighter padding on mobile
 *   - Remain readable on small screens (≥12px font)
 * ========================================================================= */

/* Large desktop (> 1200px) — defaults are fine */
@media (min-width: 1201px) {
  /* No overrides needed — desktop uses the base styles. */
}

/* Desktop / tablet landscape (992px – 1200px) */
@media (max-width: 1200px) {
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item {
    padding: 9px 12px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
    padding: 12px 14px;
  }
  .sejoli-sn-stock-row > td {
    padding: 4px 12px 16px 12px !important;
  }
}

/* Tablet portrait (768px – 992px) */
@media (max-width: 992px) {
  .sejoli-sn-stock-wrap {
    margin: 10px 0 14px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item {
    padding: 9px 11px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
    padding: 12px 13px;
  }
  /* Hook context: shrink table cell padding to match Sejoli mobile */
  .sejoli-sn-stock-row > td {
    padding: 4px 10px 14px 10px !important;
  }
  /* smart template: grid collapses to single column at 992px */
  .grid-container .sejoli-sn-stock-row > td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Smartphone (≤ 767px) — Sejoli's main mobile breakpoint */
@media (max-width: 767px) {
  .sejoli-sn-stock-wrap {
    margin: 8px 0 12px;
    font-size: 13px;
  }
  /* badge: ensure touch-target ≥32px and readable font ≥12px */
  .sejoli-sn-stock-wrap.sejoli-sn-style-badge {
    gap: 5px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-badge .sejoli-sn-stock-item {
    padding: 6px 12px;
    font-size: 12.5px;
    min-height: 32px;
    border-radius: 16px;
  }
  /* block: full-width banner, slightly tighter */
  .sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
    padding: 11px 12px;
    font-size: 13px;
    gap: 8px;
  }
  /* list: tighter rows */
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item {
    padding: 8px 10px;
    font-size: 13px;
    gap: 8px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-variant {
    font-size: 11px;
    padding: 2px 8px;
  }
  /* Hook context: align with Sejoli's tight mobile padding.
   * Sejoli's .ui.table on mobile uses ~8px horizontal padding. */
  .sejoli-sn-stock-row > td {
    padding: 4px 8px 12px 8px !important;
  }
  /* In the smart template the table is unstackable; ensure our row
   * respects that on mobile by keeping it full-width. */
  .ui.unstackable.table .sejoli-sn-stock-row {
    display: table-row;
  }
  /* In the smart template on mobile, the grid collapses and the
   * main column becomes full-width. Make sure our badge doesn't
   * have leftover desktop margins. */
  .grid-container .sejoli-sn-stock-row > td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Small smartphone (≤ 425px) — compact phones like iPhone SE */
@media (max-width: 425px) {
  .sejoli-sn-stock-wrap {
    margin: 6px 0 10px;
    font-size: 12.5px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-badge {
    gap: 4px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-badge .sejoli-sn-stock-item {
    padding: 5px 10px;
    font-size: 11.5px;
    min-height: 30px;
    border-radius: 14px;
    /* Allow badge text to wrap on very narrow screens instead of
     * overflowing horizontally. */
    white-space: normal;
    word-break: break-word;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
    padding: 10px 11px;
    font-size: 12.5px;
    gap: 8px;
    border-left-width: 3px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-item {
    padding: 7px 9px;
    gap: 8px;
    font-size: 12.5px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-list .sejoli-sn-stock-variant {
    font-size: 10.5px;
    padding: 2px 7px;
  }
  .sejoli-sn-stock-row > td {
    padding: 4px 6px 10px 6px !important;
  }
  /* Fallback content wrapper: remove the extra container margin
   * on small screens to maximize usable width. */
  .sejoli-sn-content-fallback {
    margin-top: 12px;
    margin-bottom: 4px;
  }
}

/* Extra-small phones (≤ 375px) — iPhone SE / older Androids */
@media (max-width: 375px) {
  .sejoli-sn-stock-wrap.sejoli-sn-style-badge .sejoli-sn-stock-item {
    padding: 5px 9px;
    font-size: 11px;
    gap: 4px;
  }
  .sejoli-sn-stock-wrap.sejoli-sn-style-block .sejoli-sn-stock-item {
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* =========================================================================
 * Print-friendly (admin order detail / invoice) — minimal cleanup
 * ========================================================================= */
@media print {
  .sejoli-sn-stock-wrap {
    border: 1px dashed #999;
    background: #fff !important;
  }
  .sejoli-sn-stock-wrap .sejoli-sn-stock-item {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* =========================================================================
 * High-contrast mode (accessibility) — ensure badge is visible for users
 * who prefer high contrast. Browsers automatically apply this when the
 * user enables high-contrast mode in their OS settings.
 * ========================================================================= */
@media (prefers-contrast: high) {
  .sejoli-sn-stock-wrap .sejoli-sn-stock-item {
    border-width: 2px !important;
    font-weight: 700 !important;
  }
  .sejoli-sn-stock-wrap .sejoli-sn-is-low,
  .sejoli-sn-stock-wrap .sejoli-sn-is-urgent,
  .sejoli-sn-stock-wrap .sejoli-sn-is-out {
    border-width: 2px !important;
  }
}

/* =========================================================================
 * Reduced motion — respect user preference for no animations
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sejoli-sn-stock-wrap .sejoli-sn-stock-item,
  .sejoli-sn-stock-wrap .sejoli-sn-stock-item.sejoli-sn-highlight {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}