/*
 * FastRig Wishlist — Frontend Styles
 *
 * Design tokens live in :root as CSS custom properties.
 * Every colour, glow, and animation references these tokens — so retheming
 * requires changing 6 lines, nothing else.
 *
 * Colour palette:
 *   --frwl-green      NVIDIA green   #76B900  (primary actions, success)
 *   --frwl-orange     Pumpkin orange #FF7518  (hearts, accent, CTAs)
 *   --frwl-glow-green Neon glow tint for hover/active states
 *   --frwl-glow-orange Neon glow tint for heart pulse
 *
 * Package: FastRig\Wishlist
 * Since:   1.0.0
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --frwl-green:        #76B900;
  --frwl-orange:       #FF7518;
  --frwl-green-dark:   #5d9200;
  --frwl-orange-dark:  #e05e00;
  --frwl-heart-color:  var(--frwl-orange);

  --frwl-glow-green:   rgba(118, 185, 0,  0.45);
  --frwl-glow-orange:  rgba(255, 117, 24, 0.45);

  --frwl-text:         #1a1a1a;
  --frwl-text-muted:   #666;
  --frwl-surface:      #ffffff;
  --frwl-surface-alt:  #f6f6f6;
  --frwl-border:       #e0e0e0;
  --frwl-radius:       8px;
  --frwl-radius-sm:    4px;
  --frwl-shadow:       0 2px 12px rgba(0, 0, 0, 0.10);
  --frwl-shadow-glow:  0 0 0 3px var(--frwl-glow-green);
  --frwl-transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --frwl-text:        #f0f0f0;
    --frwl-text-muted:  #aaa;
    --frwl-surface:     #1e1e1e;
    --frwl-surface-alt: #2a2a2a;
    --frwl-border:      #3a3a3a;
    --frwl-shadow:      0 2px 12px rgba(0, 0, 0, 0.40);
  }
}

/* High-contrast mode */
@media (forced-colors: active) {
  .frwl-btn,
  .frwl-heart {
    forced-color-adjust: none;
  }
}

/* ============================================================
   2. WISHLIST BUTTON
   ============================================================ */
.frwl-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 18px;
  background:      transparent;
  color:           var(--frwl-text);
  border:          2px solid var(--frwl-border);
  border-radius:   var(--frwl-radius);
  cursor:          pointer;
  font-size:       0.875rem;
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--frwl-transition),
                   border-color var(--frwl-transition),
                   box-shadow var(--frwl-transition),
                   color var(--frwl-transition),
                   transform var(--frwl-transition);
  -webkit-user-select: none;
  user-select:     none;
}

.frwl-btn:hover,
.frwl-btn:focus-visible {
  border-color: var(--frwl-green);
  color:        var(--frwl-green);
  box-shadow:   var(--frwl-shadow-glow);
  outline:      none;
  transform:    translateY(-1px);
}

.frwl-btn:active {
  transform: translateY(0);
}

/* Primary variant */
.frwl-btn--primary {
  background:   var(--frwl-green);
  border-color: var(--frwl-green);
  color:        #fff;
}

.frwl-btn--primary:hover,
.frwl-btn--primary:focus-visible {
  background:  var(--frwl-green-dark);
  border-color: var(--frwl-green-dark);
  color:        #fff;
  box-shadow:   0 0 0 3px var(--frwl-glow-green), 0 4px 16px rgba(118,185,0,.3);
}

/* Ghost variant */
.frwl-btn--ghost {
  border-color: transparent;
  color:        var(--frwl-text-muted);
  font-weight:  400;
}

.frwl-btn--ghost:hover,
.frwl-btn--ghost:focus-visible {
  color:        #c00;
  border-color: transparent;
  box-shadow:   none;
}

/* Small variant */
.frwl-btn--sm {
  padding:   6px 12px;
  font-size: 0.8125rem;
}

/* Active (wishlisted) state */
.frwl-btn--active {
  border-color: var(--frwl-orange);
  color:        var(--frwl-orange);
}

.frwl-btn--active:hover,
.frwl-btn--active:focus-visible {
  border-color: var(--frwl-orange-dark);
  color:        var(--frwl-orange-dark);
  box-shadow:   0 0 0 3px var(--frwl-glow-orange);
}

/* Icon-only variant (archive cards) */
.frwl-btn--icon-only {
  padding:       8px;
  border-radius: 50%;
  border-width:  1.5px;
}

/* ============================================================
   3. HEART ICON
   ============================================================ */
.frwl-heart {
  display:    block;
  flex-shrink: 0;
  transition: transform var(--frwl-transition),
              filter    var(--frwl-transition);
}

.frwl-btn:hover .frwl-heart,
.frwl-btn:focus-visible .frwl-heart {
  transform: scale(1.18);
}

/* Pulse animation fires once when the item is added */
@keyframes frwl-heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 6px var(--frwl-glow-orange)); }
  70%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}

.frwl-btn--just-added .frwl-heart {
  animation: frwl-heart-pop 0.5s ease forwards;
}

/* ============================================================
   4. COUNTER BADGE
   ============================================================ */
.frwl-btn__count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     18px;
  height:        18px;
  padding:       0 4px;
  background:    var(--frwl-orange);
  color:         #fff;
  border-radius: 9px;
  font-size:     0.7rem;
  font-weight:   700;
  line-height:   1;
}

/* ============================================================
   5. PRODUCT PAGE WRAPPER
   ============================================================ */
.frwl-product-page-wrap {
  display:     inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
}

/* Match the site's dark theme on the product page button */
.frwl-product-page-wrap .frwl-btn {
  background:   rgba(255, 117, 24, 0.12);
  border-color: var(--frwl-orange);
  color:        var(--frwl-orange);
}

.frwl-product-page-wrap .frwl-btn:hover,
.frwl-product-page-wrap .frwl-btn:focus-visible {
  background:  rgba(255, 117, 24, 0.25);
  border-color: var(--frwl-orange-dark);
  color:        #fff;
  box-shadow:   0 0 0 3px var(--frwl-glow-orange);
}

.frwl-product-page-wrap .frwl-btn--active {
  background:   var(--frwl-orange);
  border-color: var(--frwl-orange);
  color:        #fff;
}

.frwl-product-page-wrap .frwl-btn--active:hover,
.frwl-product-page-wrap .frwl-btn--active:focus-visible {
  background:   var(--frwl-orange-dark);
  border-color: var(--frwl-orange-dark);
  color:        #fff;
}

/* ============================================================
   6. ARCHIVE / SHOP CARD WRAPPER
   ============================================================ */
.frwl-archive-wrap {
  position: absolute;
  top:      10px;
  right:    10px;
  z-index:  10;
}

/* Ensure the product card container is relative-positioned */
.woocommerce ul.products li.product {
  position: relative;
}

/* Archive heart button — compact, dark-theme style */
.frwl-archive-wrap .frwl-btn--icon-only {
  background:   rgba(0, 0, 0, 0.55);
  border-color: transparent;
  color:        var(--frwl-orange);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  width:        36px;
  height:       36px;
  padding:      0;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

.frwl-archive-wrap .frwl-btn--icon-only:hover,
.frwl-archive-wrap .frwl-btn--icon-only:focus-visible {
  background:   rgba(255, 117, 24, 0.85);
  border-color: transparent;
  color:        #fff;
  box-shadow:   0 0 0 2px var(--frwl-glow-orange);
}

.frwl-archive-wrap .frwl-btn--icon-only.frwl-btn--active {
  background:   var(--frwl-orange);
  border-color: transparent;
  color:        #fff;
}

/* Quick View modal */
.frwl-quickview-wrap {
  margin-top: 8px;
}

/* ============================================================
   7. WISHLIST PAGE
   ============================================================ */
.frwl-wishlist-wrap {
  max-width: 100%;
  color:     #f0f0f0;
}

/* Items table */
.frwl-items-table {
  width:           100%;
  border-collapse: collapse;
  background:      #1a1a1a;
  border-radius:   var(--frwl-radius);
  overflow:        hidden;
  box-shadow:      0 4px 24px rgba(0,0,0,0.5);
  border:          1px solid #2a2a2a;
}

.frwl-items-table th,
.frwl-items-table td {
  padding:       16px 20px;
  text-align:    left;
  border-bottom: 1px solid #2a2a2a;
  font-size:     1rem;
  color:         #f0f0f0;
}

.frwl-items-table th {
  background:     #111;
  font-weight:    700;
  color:          #888;
  font-size:      0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.frwl-items-table tbody tr:last-child td {
  border-bottom: none;
}

.frwl-items-table tbody tr:hover {
  background: #222;
}

/* Removing animation */
.frwl-item-row.frwl-removing {
  opacity:    0;
  transform:  translateX(-20px);
  transition: opacity 0.3s, transform 0.3s;
}

/* Product cell */
.frwl-item-row__product {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.frwl-item-row__image {
  width:         70px;
  height:        70px;
  object-fit:    cover;
  border-radius: var(--frwl-radius-sm);
  flex-shrink:   0;
  border:        1px solid #2a2a2a;
}

.frwl-item-row__image-link {
  flex-shrink: 0;
}

.frwl-item-row__name {
  font-size:       1rem;
  font-weight:     600;
  color:           #f0f0f0;
  text-decoration: none;
  line-height:     1.4;
}

.frwl-item-row__name:hover {
  color: var(--frwl-green);
}

.frwl-item-row__variations {
  margin-top: 6px;
  font-size:  0.85rem;
  color:      #888;
}

.frwl-item-row__variation-attr {
  display:      inline-block;
  margin-right: 8px;
}

.frwl-item-row__actions {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* Price cell */
.frwl-item-row__price {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--frwl-green);
  white-space: nowrap;
}

/* Stock badge */
.frwl-stock {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     0.8125rem;
  font-weight:   600;
  border-radius: var(--frwl-radius-sm);
  padding:       4px 10px;
}

.frwl-stock--in {
  background: rgba(118, 185, 0, 0.15);
  color:      var(--frwl-green);
  border:     1px solid rgba(118, 185, 0, 0.3);
}

.frwl-stock--out {
  background: rgba(200, 30, 30, 0.12);
  color:      #e74c3c;
  border:     1px solid rgba(200, 30, 30, 0.25);
}

/* Action buttons on wishlist page */
.frwl-item-row__actions .frwl-btn--primary {
  background:   var(--frwl-green);
  border-color: var(--frwl-green);
  color:        #fff;
  font-size:    0.875rem;
}

.frwl-item-row__actions .frwl-btn--ghost {
  color:        #888;
  border-color: transparent;
  font-size:    0.875rem;
}

.frwl-item-row__actions .frwl-btn--ghost:hover {
  color:        #e74c3c;
  border-color: transparent;
}

/* ============================================================
   8. EMPTY STATE
   ============================================================ */
.frwl-empty-state {
  text-align: center;
  padding:    64px 32px;
  color:      var(--frwl-text-muted);
}

.frwl-empty-state__icon {
  display: block;
  margin:  0 auto 24px;
  opacity: 0.5;
}

.frwl-empty-state__heading {
  font-size:   1.5rem;
  color:       var(--frwl-text);
  margin:      0 0 12px;
}

.frwl-empty-state__text {
  max-width:  420px;
  margin:     0 auto 28px;
  line-height: 1.6;
}

/* ============================================================
   9. SHARE PANEL
   ============================================================ */
.frwl-share-panel {
  margin-bottom: 24px;
}

.frwl-share-toggle {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  background:   none;
  border:       none;
  color:        var(--frwl-green);
  cursor:       pointer;
  font-size:    0.9rem;
  font-weight:  600;
  padding:      6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.frwl-share-options {
  margin-top:   16px;
  background:   var(--frwl-surface-alt);
  border:       1px solid var(--frwl-border);
  border-radius: var(--frwl-radius);
  padding:      20px;
}

.frwl-share-url-wrap {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.frwl-share-url-input {
  flex:          1;
  min-width:     200px;
  padding:       8px 12px;
  border:        1px solid var(--frwl-border);
  border-radius: var(--frwl-radius-sm);
  font-size:     0.875rem;
  background:    var(--frwl-surface);
  color:         var(--frwl-text);
}

.frwl-share-social {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

.frwl-share-social__link {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  border-radius: var(--frwl-radius-sm);
  font-size:     0.875rem;
  font-weight:   600;
  text-decoration: none;
  transition:    filter var(--frwl-transition), transform var(--frwl-transition);
  color: #fff;
}

.frwl-share-social__link:hover {
  filter:    brightness(0.88);
  transform: translateY(-1px);
}

.frwl-share-social__link--whatsapp  { background: #25d366; }
.frwl-share-social__link--facebook  { background: #1877f2; }
.frwl-share-social__link--x         { background: #000; }
.frwl-share-social__link--email     { background: var(--frwl-green); }

/* ============================================================
   10. TOAST NOTIFICATIONS
   ============================================================ */
#frwl-toast-container {
  position:  fixed;
  bottom:    24px;
  right:     24px;
  z-index:   99999;
  display:   flex;
  flex-direction: column;
  gap:       10px;
  pointer-events: none;
}

.frwl-toast {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       14px 20px;
  background:    var(--frwl-surface);
  border-left:   4px solid var(--frwl-green);
  border-radius: var(--frwl-radius);
  box-shadow:    var(--frwl-shadow), 0 0 0 1px var(--frwl-border);
  font-size:     0.9rem;
  font-weight:   500;
  color:         var(--frwl-text);
  max-width:     320px;
  pointer-events: auto;
  animation:     frwl-toast-in 0.3s ease;
}

.frwl-toast--error  { border-left-color: #c0392b; }
.frwl-toast--info   { border-left-color: var(--frwl-orange); }

@keyframes frwl-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes frwl-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

.frwl-toast--dismissing {
  animation: frwl-toast-out 0.25s ease forwards;
}

/* ============================================================
   11. LOADING SPINNER
   ============================================================ */
.frwl-spinner {
  display:      inline-block;
  width:        16px;
  height:       16px;
  border:       2px solid var(--frwl-border);
  border-top-color: var(--frwl-green);
  border-radius: 50%;
  animation:    frwl-spin 0.7s linear infinite;
  flex-shrink:  0;
}

@keyframes frwl-spin {
  to { transform: rotate(360deg); }
}

.frwl-btn.frwl-loading {
  opacity:        0.7;
  pointer-events: none;
  cursor:         wait;
}

/* ============================================================
   12. MY ACCOUNT PAGE
   ============================================================ */
.frwl-my-account-wishlist .frwl-account-table__image {
  width:         48px;
  height:        48px;
  object-fit:    cover;
  border-radius: var(--frwl-radius-sm);
}

.frwl-account-share-link {
  margin-top: 20px;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .frwl-items-table thead {
    display: none;
  }

  .frwl-items-table,
  .frwl-items-table tbody,
  .frwl-items-table tr,
  .frwl-items-table td {
    display: block;
    width:   100%;
  }

  .frwl-items-table td {
    padding:     10px 16px;
    border-bottom: none;
  }

  .frwl-items-table tr {
    border:        1px solid var(--frwl-border);
    border-radius: var(--frwl-radius);
    margin-bottom: 16px;
    overflow:      hidden;
  }

  .frwl-item-row__actions {
    padding-top: 8px;
    flex-wrap:   wrap;
  }

  #frwl-toast-container {
    bottom:    12px;
    right:     12px;
    left:      12px;
  }

  .frwl-toast {
    max-width: 100%;
  }
}