/* ============================================================
   ag-soft-cards.css  v1.0.0
   Revive Thrive Child Theme — Apple Glass UI

   يغطي HTML الفعلي من:
     category-cards-section.php  v7.1
     featured-products-section.php v7.1

   السبب: PHP يستخدم naming convention بـ -soft- prefix على كل
   sub-elements، وهو مختلف تماماً عن ag-components.css الذي
   يستخدم BEM (__image / __body / __title …).
   هذا الملف هو الحل الجذري — يُضاف بعد ag-front.css.

   Depends: ag-design-tokens.css · ag-components.css · ag-front.css
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   §1  SOFT-SECTION OVERRIDES
   Scoped to soft-card parents only — does NOT override
   the global ag-section.css rules for other sections.
   ════════════════════════════════════════════════════════════ */

.ag-section-categories-soft .ag-section-badge,
.ag-section-featured-soft .ag-section-badge {
  background:       var(--ag-glass-bg-pink);
  border-color:     var(--ag-glass-border-pink);
  color:            var(--ag-fuchsia-400);
  backdrop-filter:  var(--ag-glass-blur-light);
  -webkit-backdrop-filter: var(--ag-glass-blur-light);
  margin-bottom:    var(--ag-space-4);
}

.ag-section-badge-soft {
  background:   var(--ag-glass-bg-purple);
  border-color: var(--ag-glass-border-purple);
  color:        var(--ag-purple-400);
}

.ag-section-categories-soft .ag-section-title,
.ag-section-featured-soft .ag-section-title {
  font-size:     clamp(var(--ag-text-2xl), 4vw, var(--ag-text-4xl));
  line-height:   var(--ag-leading-tight);
  margin:        0 0 var(--ag-space-3);
  max-width:     none;
}

.ag-section-categories-soft .ag-section-subtitle,
.ag-section-featured-soft .ag-section-subtitle {
  font-size:   var(--ag-text-md);
  color:       var(--ag-text-secondary);
  line-height: var(--ag-leading-relaxed);
  margin:      0;
}

.ag-section-categories-soft .ag-section-header,
.ag-section-featured-soft .ag-section-header {
  text-align:    center;
  margin-bottom: var(--ag-space-10);
}

.ag-section-footer-soft {
  text-align:  center;
  margin-top:  var(--ag-space-10);
}


/* ════════════════════════════════════════════════════════════
   §2  SOFT BUTTON  (.ag-soft-btn-primary)
   استخدام: .ag-btn.ag-soft-btn-primary
   ════════════════════════════════════════════════════════════ */

.ag-soft-btn-primary {
  background:   var(--ag-gradient-primary);
  color:        var(--ag-text-inverse);
  border-color: transparent;
  box-shadow:   var(--ag-shadow-pink);
  border-radius: var(--ag-radius-pill);
}

.ag-soft-btn-primary:hover {
  background:  var(--ag-gradient-primary-hover);
  box-shadow:  var(--ag-glass-shadow-hover), var(--ag-shadow-pink);
  transform:   translateY(-2px);
  color:       var(--ag-text-inverse);
}

.ag-soft-btn-primary:active {
  transform:  translateY(0) scale(.97);
  box-shadow: var(--ag-shadow-sm);
}

.ag-soft-btn-disabled,
.ag-soft-btn-primary:disabled,
.ag-soft-btn-primary[disabled] {
  opacity:        .45;
  cursor:         not-allowed;
  pointer-events: none;
  transform:      none !important;
  box-shadow:     none !important;
}

.ag-btn-large {
  padding:   var(--ag-btn-py-lg) var(--ag-btn-px-lg);
  font-size: var(--ag-text-md);
  gap:       var(--ag-space-4);
}

.ag-hover-lift {
  transition: transform var(--ag-duration-base) var(--ag-ease-smooth),
              box-shadow var(--ag-duration-base) var(--ag-ease-smooth);
}

.ag-hover-lift:hover {
  transform:  translateY(-3px);
  box-shadow: var(--ag-glass-shadow-hover);
}


/* ════════════════════════════════════════════════════════════
   §3  CATEGORY SECTION LAYOUT
   section.ag-section-categories-soft
   ════════════════════════════════════════════════════════════ */

.ag-section-categories-soft {
  padding-block: var(--ag-section-py, clamp(4rem, 8vw, 7rem));
}

.ag-categories-header-soft {
  text-align:    center;
  margin-bottom: var(--ag-space-10);
}

/* Grid: 4 cols desktop → 3 tablet → 2 mobile → 1 xs */
.ag-categories-grid-soft {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--ag-space-6);
  list-style:            none;
  margin:                0;
  padding:               0;
}

@media (max-width: 1024px) { .ag-categories-grid-soft { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .ag-categories-grid-soft { grid-template-columns: repeat(2, 1fr); gap: var(--ag-space-4); } }
@media (max-width: 480px)  { .ag-categories-grid-soft { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════
   §4  CATEGORY CARD  (article.ag-category-card-soft)
   ════════════════════════════════════════════════════════════ */

.ag-category-card-soft {
  background:              var(--ag-glass-bg-card);
  backdrop-filter:         var(--ag-card-blur);
  -webkit-backdrop-filter: var(--ag-card-blur);
  border:                  1px solid var(--ag-glass-border);
  border-radius:           var(--ag-card-radius);
  box-shadow:              var(--ag-glass-shadow-card), var(--ag-glass-inset-glow);
  overflow:                hidden;
  transition:
    transform    var(--ag-duration-base) var(--ag-ease-smooth),
    box-shadow   var(--ag-duration-base) var(--ag-ease-smooth),
    border-color var(--ag-duration-base) var(--ag-ease-smooth);
}

.ag-category-card-soft:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--ag-glass-shadow-hover), var(--ag-glass-inset-glow);
  border-color: rgba(236,111,187,.28);
  will-change:  transform, box-shadow;
}

/* Inner wrapper */
.ag-category-soft-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        var(--ag-card-padding);
  gap:            var(--ag-space-4);
  height:         100%;
}

/* Avatar image circle */
.ag-category-avatar {
  width:         100px;
  height:        100px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
  border:        2px solid var(--ag-glass-border-pink);
  box-shadow:    var(--ag-shadow-pink);
  background:    var(--ag-glass-bg-pink);
  transition:    transform var(--ag-duration-base) var(--ag-ease-smooth),
                 box-shadow var(--ag-duration-base) var(--ag-ease-smooth);
}

.ag-category-card-soft:hover .ag-category-avatar {
  transform:  scale(1.07);
  box-shadow: var(--ag-glass-shadow-hover), var(--ag-shadow-pink);
}

.ag-category-avatar-link {
  display: block;
  width:   100%;
  height:  100%;
}

.ag-category-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Placeholder when no image */
.ag-category-avatar-placeholder {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            100%;
  height:           100%;
  font-size:        var(--ag-text-2xl);
  color:            var(--ag-fuchsia-300);
}

/* Text header */
.ag-category-soft-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--ag-space-1);
  flex:           1;
}

.ag-category-soft-title {
  font-size:   var(--ag-text-md);
  font-weight: var(--ag-weight-bold);
  color:       var(--ag-text-primary);
  margin:      0;
  line-height: var(--ag-leading-snug);
}

.ag-category-soft-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--ag-duration-fast) var(--ag-ease-sharp);
}

.ag-category-soft-title a:hover { color: var(--ag-fuchsia-400); }

.ag-category-soft-count {
  font-size: var(--ag-text-xs);
  color:     var(--ag-text-muted);
}

/* CTA button */
.ag-category-soft-actions { margin-top: auto; width: 100%; }

.ag-category-soft-btn {
  width:           100%;
  justify-content: center;
  font-size:       var(--ag-text-sm);
}


/* ════════════════════════════════════════════════════════════
   §5  FEATURED PRODUCTS SECTION LAYOUT
   section.ag-section-featured-soft
   ════════════════════════════════════════════════════════════ */

.ag-section-featured-soft {
  padding-block: var(--ag-section-py, clamp(4rem, 8vw, 7rem));
}

/* Grid: 4 cols → 3 → 2 → 1 */
.ag-products-grid-soft {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--ag-space-6);
  list-style:            none;
  margin:                0;
  padding:               0;
}

@media (max-width: 1200px) { .ag-products-grid-soft { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .ag-products-grid-soft { grid-template-columns: repeat(2, 1fr); gap: var(--ag-space-4); } }
@media (max-width: 480px)  { .ag-products-grid-soft { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════
   §6  PRODUCT CARD  (article.ag-product-card-soft)
   ════════════════════════════════════════════════════════════ */

.ag-product-card-soft {
  background:              var(--ag-card-bg);
  backdrop-filter:         var(--ag-card-blur);
  -webkit-backdrop-filter: var(--ag-card-blur);
  border:                  1px solid var(--ag-card-border);
  border-radius:           var(--ag-card-radius);
  box-shadow:              var(--ag-card-shadow), var(--ag-glass-inset-glow);
  overflow:                hidden;
  transition:
    transform    var(--ag-duration-base) var(--ag-ease-smooth),
    box-shadow   var(--ag-duration-base) var(--ag-ease-smooth),
    border-color var(--ag-duration-base) var(--ag-ease-smooth);
}

.ag-product-card-soft:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--ag-card-shadow-hover), var(--ag-glass-inset-glow);
  border-color: rgba(236,111,187,.22);
  will-change:  transform, box-shadow;
}

/* Inner wrapper */
.ag-product-soft-inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

/* ── Avatar (image + badges) ────────────────────────────── */
.ag-product-avatar {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 1 / 1;
  background:   var(--ag-bg-surface-2);
  flex-shrink:  0;
}

.ag-product-soft-link {
  display: block;
  width:   100%;
  height:  100%;
}

.ag-product-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--ag-duration-slow) var(--ag-ease-smooth);
}

.ag-product-card-soft:hover .ag-product-avatar img { transform: scale(1.06); }

/* Sale badge */
.ag-soft-badge-sale {
  position:        absolute;
  inset-block-start: var(--ag-space-3);
  inset-inline-start: var(--ag-space-3);
  display:         inline-flex;
  align-items:     center;
  padding:         3px var(--ag-space-3);
  background:      var(--ag-gradient-primary);
  color:           var(--ag-text-inverse);
  font-size:       var(--ag-text-xs);
  font-weight:     var(--ag-weight-semibold);
  border-radius:   var(--ag-radius-badge);
  box-shadow:      var(--ag-shadow-pink);
  line-height:     1.4;
  z-index:         2;
}

/* Out-of-stock badge */
.ag-soft-badge-out {
  position:           absolute;
  inset-block-end:    var(--ag-space-3);
  inset-inline-start: var(--ag-space-3);
  display:            inline-flex;
  align-items:        center;
  padding:            3px var(--ag-space-3);
  background:         rgba(240,92,110,.14);
  color:              var(--ag-color-error);
  font-size:          var(--ag-text-xs);
  font-weight:        var(--ag-weight-semibold);
  border-radius:      var(--ag-radius-badge);
  border:             1px solid rgba(240,92,110,.22);
  line-height:        1.4;
  z-index:            2;
}

/* ── Body ───────────────────────────────────────────────── */
.ag-product-soft-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--ag-space-3);
  padding:        var(--ag-card-padding);
  flex:           1;
}

/* Product header: category + title */
.ag-product-soft-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--ag-space-1);
}

.ag-product-soft-category {
  font-size:      var(--ag-text-xs);
  color:          var(--ag-fuchsia-400);
  font-weight:    var(--ag-weight-semibold);
  letter-spacing: var(--ag-tracking-wide);
  text-transform: uppercase;
}

.ag-product-soft-title {
  font-size:          var(--ag-text-sm);
  font-weight:        var(--ag-weight-bold);
  color:              var(--ag-text-primary);
  margin:             0;
  line-height:        var(--ag-leading-snug);
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.ag-product-soft-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--ag-duration-fast) var(--ag-ease-sharp);
}

.ag-product-soft-title a:hover { color: var(--ag-fuchsia-400); }

/* Meta: price + rating */
.ag-product-soft-meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--ag-space-2);
  margin-top:     auto;
}

.ag-product-soft-price {
  display:     flex;
  align-items: baseline;
  gap:         var(--ag-space-3);
  flex-wrap:   wrap;
}

/* Sale price */
.ag-product-soft-price .ag-price-sale,
.ag-product-soft-price .price ins,
.ag-product-soft-price .price .amount {
  font-size:       var(--ag-text-lg);
  font-weight:     var(--ag-weight-semibold);
  color:           var(--ag-fuchsia-400);
  line-height:     1;
  text-decoration: none;
}

/* Regular / crossed price */
.ag-product-soft-price .ag-price-regular,
.ag-product-soft-price del,
.ag-product-soft-price .price del .amount {
  font-size:       var(--ag-text-sm);
  color:           var(--ag-text-muted);
  text-decoration: line-through;
  opacity:         .75;
}

/* Rating */
.ag-product-soft-rating .star-rating { font-size: var(--ag-text-xs); }

/* Actions */
.ag-product-soft-actions { margin-top: var(--ag-space-2); }

.ag-btn-cart {
  width:           100%;
  justify-content: center;
  gap:             var(--ag-space-3);
}

/* Secondary actions: wishlist + view */
.ag-product-soft-secondary-actions {
  display:     flex;
  align-items: center;
  gap:         var(--ag-space-3);
  margin-top:  var(--ag-space-2);
}

.ag-soft-wishlist,
.ag-product-soft-view {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ag-space-2);
  padding:         var(--ag-space-2) var(--ag-space-3);
  font-size:       var(--ag-text-xs);
  color:           var(--ag-text-secondary);
  background:      var(--ag-glass-bg);
  border:          1px solid var(--ag-glass-border);
  border-radius:   var(--ag-radius-pill);
  text-decoration: none;
  cursor:          pointer;
  transition:      var(--ag-transition-base);
  flex:            1;
  justify-content: center;
}

.ag-soft-wishlist:hover,
.ag-product-soft-view:hover {
  background:   var(--ag-glass-bg-pink);
  border-color: var(--ag-glass-border-pink);
  color:        var(--ag-fuchsia-400);
}


/* ════════════════════════════════════════════════════════════
   §7  SECTION — shared ag-section
   ════════════════════════════════════════════════════════════ */

/* §7: overflow scoped to soft sections only — base .ag-section in ag-section.css */
.ag-section-categories-soft,
.ag-section-featured-soft {
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════
   §8  ANIMATION  [data-animate=fade-up]
   ════════════════════════════════════════════════════════════ */

[data-animate='fade-up'] {
  opacity:    0;
  transform:  translateY(24px);
  transition:
    opacity   var(--ag-duration-slow) var(--ag-ease-smooth),
    transform var(--ag-duration-slow) var(--ag-ease-smooth);
}

[data-animate='fade-up'].is-visible {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate='fade-up'] { opacity: 1; transform: none; transition: none; }
}


/* ════════════════════════════════════════════════════════════
   §9  SKELETON OVERLAY (ag-skeleton-section)
   ════════════════════════════════════════════════════════════ */

.ag-skeleton-section { pointer-events: none; user-select: none; }