/* ==========================================================================
   ag-components.css – v5.2
   Reusable UI atoms: cards, buttons, inputs, badges, qty steppers, panels
   يعتمد على ag-design-tokens.css (Cairo + Glass DNA)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Generic glass utilities
   -------------------------------------------------------------------------- */

.ag-glass {
  background: var(--ag-glass-bg);
  border: var(--ag-glass-border);
  backdrop-filter: blur(var(--ag-glass-blur));
  -webkit-backdrop-filter: blur(var(--ag-glass-blur));
  box-shadow: var(--ag-glass-shadow);
}

/* Card primitive (glass panels) */
.ag-card,
.ag-glass-card,
.ag-cart-item,
.ag-cart-totals,
.ag-checkout-card,
.ag-checkout-sidebar,
.ag-thankyou-card,
.ag-mini-cart,
.ag-cart-empty__card {
  position: relative;
  border-radius: var(--ag-radius-md);
  padding: var(--ag-padding-card);
  background: var(--ag-glass-bg-soft, rgba(255, 255, 255, 0.94));
  border: var(--ag-glass-border);
  backdrop-filter: blur(var(--ag-glass-blur));
  -webkit-backdrop-filter: blur(var(--ag-glass-blur));
  box-shadow: var(--ag-glass-shadow);
  overflow: hidden;
  transition:
    transform var(--ag-transition-normal),
    box-shadow var(--ag-transition-normal),
    filter var(--ag-transition-normal),
    background-color var(--ag-transition-normal);
}

.ag-card:hover,
.ag-card:focus-within,
.ag-glass-card:hover,
.ag-glass-card:focus-within {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.26);
  filter: brightness(1.02);
}

/* --------------------------------------------------------------------------
   Buttons (glass + primary/secondary/ghost)
   -------------------------------------------------------------------------- */

.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--ag-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: var(--ag-glass-bg);
  color: var(--ag-text-white);
  font-size: var(--ag-font-size-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ag-transition-normal),
    transform var(--ag-transition-normal),
    box-shadow var(--ag-transition-normal),
    filter var(--ag-transition-normal),
    border-color var(--ag-transition-normal),
    color var(--ag-transition-normal);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ag-btn-primary,
.ag-btn--primary {
  background: linear-gradient(var(--ag-primary-gradient));
  border-color: rgba(248, 250, 252, 0.8);
  color: #020617;
  box-shadow: 0 18px 48px rgba(79, 70, 229, 0.45);
}

.ag-btn-secondary,
.ag-btn--secondary,
.ag-btn-ghost {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--ag-text-muted);
}

.ag-btn-outline,
.ag-btn--outline {
  background: transparent;
  color: var(--ag-slate-700, #1e293b);
}

.ag-btn-lg,
.ag-btn--lg {
  padding: 12px 22px;
  font-size: var(--ag-font-size-md);
}

.ag-btn-md,
.ag-btn--md {
  padding: 10px 20px;
}

.ag-btn-sm,
.ag-btn--sm {
  padding: 8px 16px;
  font-size: var(--ag-font-size-xs);
}

.ag-btn-full,
.ag-btn--full {
  width: 100%;
  max-width: 260px;
}

.ag-btn:hover,
.ag-btn:focus-visible {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.04);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
  border-color: rgba(148, 163, 184, 0.9);
}

.ag-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 12px rgba(15, 23, 42, 0.5);
}

.ag-btn-loading,
.ag-btn--loading {
  opacity: 0.7;
  cursor: wait;
}

/* Small loader circle inside button */
.ag-btn-loader {
  width: 14px;
  height: 14px;
  border-radius: var(--ag-radius-pill);
  border: 2px solid rgba(148, 163, 184, 0.6);
  border-top-color: transparent;
  animation: ag-spin var(--ag-anim-normal) linear infinite;
  display: none;
}

.ag-btn-loading .ag-btn-loader,
.ag-btn--loading .ag-btn-loader {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Inputs / form controls (glass)
   -------------------------------------------------------------------------- */

.ag-input,
.ag-main input[type='text'],
.ag-main input[type='email'],
.ag-main input[type='tel'],
.ag-main input[type='password'],
.ag-main input[type='number'],
.ag-main input[type='search'],
.ag-main textarea,
.ag-main select,
.ag-newsletter-input {
  width: 100%;
  border-radius: var(--ag-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ag-text-white);
  padding: 10px 14px;
  font-size: var(--ag-font-size-sm);
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.ag-main input::placeholder,
.ag-main textarea::placeholder,
.ag-newsletter-input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

.ag-main input:focus,
.ag-main textarea:focus,
.ag-main select:focus,
.ag-newsletter-input:focus {
  border-color: var(--ag-primary);
  box-shadow:
    0 0 0 1px rgba(102, 126, 234, 0.7),
    0 0 18px rgba(102, 126, 234, 0.5);
  background: rgba(255, 255, 255, 0.96);
}

/* Glass field validation wrappers (checkout) */
.ag-field--invalid .ag-input,
.ag-field--invalid input,
.ag-field--invalid select,
.ag-field--invalid textarea {
  border-color: var(--ag-danger);
}

.ag-field--active .ag-input,
.ag-field--active input,
.ag-field--active select,
.ag-field--active textarea {
  border-color: var(--ag-primary);
}

/* --------------------------------------------------------------------------
   Badges & labels
   -------------------------------------------------------------------------- */

.ag-badge,
.ag-section-badge,
.ag-category-count-badge,
.ag-footer-badge,
.ag-category-label-featured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ag-radius-pill);
  font-size: var(--ag-font-size-xs);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: var(--ag-text-white);
}

.ag-badge-sale {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.85);
  color: #b91c1c;
}

.ag-badge-featured,
.ag-category-label-featured {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.95);
}

/* --------------------------------------------------------------------------
   Product & category cards (front & shop)
   -------------------------------------------------------------------------- */

.ag-products-grid {
  /* grid definition in ag-layout.css */
}

.ag-product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ag-product-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ag-radius-md);
}

.ag-product-link img {
  display: block;
  width: 100%;
  border-radius: inherit;
}

.ag-product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: var(--ag-radius-pill);
  font-size: var(--ag-font-size-xs);
  background: rgba(239, 68, 68, 0.96);
  border: 1px solid rgba(254, 226, 226, 0.95);
  color: #fef2f2;
}

.ag-product-badge-out {
  right: 10px;
  left: auto;
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(148, 163, 184, 0.9);
}

/* Top actions (wishlist, quick view, etc.) */
.ag-product-actions-top {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ag-product-action {
  width: 32px;
  height: 32px;
  border-radius: var(--ag-radius-pill);
  border: var(--ag-glass-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ag-text-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--ag-transition-fast),
    transform var(--ag-transition-fast);
}

.ag-product-action:hover,
.ag-product-action:focus-visible {
  background: rgba(102, 126, 234, 0.96);
  color: #f9fafb;
  transform: translateY(-1px);
}

/* Product info text */
.ag-product-info {
  margin-top: 6px;
}

.ag-product-title {
  margin: 4px 0 6px;
  font-size: var(--ag-font-size-md);
}

.ag-product-title a {
  color: var(--ag-text-white);
  text-decoration: none;
}

.ag-product-title a:hover,
.ag-product-title a:focus {
  text-decoration: underline;
}

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

.ag-product-price {
  font-size: var(--ag-font-size-sm);
  margin-bottom: 6px;
}

/* Category cards */
.ag-categories-grid {
  /* grid in ag-layout.css */
}

.ag-category-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ag-category-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ag-radius-md);
}

.ag-category-image {
  width: 100%;
  padding-top: 65%;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}

.ag-category-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0;
  background: rgba(248, 250, 252, 0.96);
  border-radius: inherit;
  color: var(--ag-text-muted);
}

.ag-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.75), transparent 55%);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;
}

.ag-category-content {
  margin-top: 8px;
}

.ag-category-title {
  margin: 4px 0 4px;
  font-size: var(--ag-font-size-md);
}

.ag-category-title a {
  color: var(--ag-text-white);
  text-decoration: none;
}

.ag-category-title a:hover,
.ag-category-title a:focus {
  text-decoration: underline;
}

.ag-category-description {
  margin: 0 0 6px;
  font-size: var(--ag-font-size-sm);
  color: var(--ag-text-muted);
}

/* --------------------------------------------------------------------------
   Newsletter components
   -------------------------------------------------------------------------- */

.ag-newsletter-cta {
  padding-block: var(--ag-gap-section);
}

.ag-newsletter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--ag-radius-lg);
  background: var(--ag-color-bg-panel);
  border: var(--ag-glass-border);
  backdrop-filter: blur(var(--ag-glass-blur));
  -webkit-backdrop-filter: blur(var(--ag-glass-blur));
  box-shadow: var(--ag-glass-shadow);
  padding: 18px 20px;
}

.ag-newsletter-content {
  max-width: 360px;
}

.ag-newsletter-title {
  margin: 0 0 6px;
  font-size: var(--ag-font-size-xl);
  font-weight: 700;
}

.ag-newsletter-subtitle {
  margin: 0;
  font-size: var(--ag-font-size-sm);
  color: var(--ag-text-muted);
}

.ag-newsletter-form {
  flex: 1 1 280px;
}

.ag-newsletter-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ag-newsletter-success {
  margin-top: 6px;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-success);
  opacity: 0;
  transition: opacity var(--ag-transition-normal);
}

.ag-newsletter-success--show {
  opacity: 1;
}

@media (max-width: 640px) {
  .ag-newsletter-input-group {
    flex-direction: column;
  }

  .ag-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Cart qty stepper (used in cart + mini cart + product)
   -------------------------------------------------------------------------- */

.ag-qty-stepper,
.ag-qty-wrapper,
.quantity,
[data-ag-qty-stepper] {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ag-radius-pill);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.6);
  overflow: hidden;
}

.ag-qty-stepper__btn,
.ag-cart-qty-trigger,
.ag-qty-plus,
.ag-qty-minus {
  background: transparent;
  border: none;
  color: var(--ag-text-white);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition:
    background var(--ag-transition-fast),
    color var(--ag-transition-fast);
}

.ag-qty-stepper__btn:hover,
.ag-cart-qty-trigger:hover,
.ag-qty-plus:hover,
.ag-qty-minus:hover {
  background: rgba(102, 126, 234, 0.2);
  color: #1d4ed8;
}

.ag-qty-stepper__input,
.ag-qty-wrapper input[type='number'],
.quantity input[type='number'] {
  background: transparent;
  border: none;
  width: 46px;
  text-align: center;
  color: var(--ag-text-white);
  padding: 0;
  font-size: var(--ag-font-size-sm);
}

/* --------------------------------------------------------------------------
   Footer components
   -------------------------------------------------------------------------- */

.ag-footer-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(102, 126, 234, 0.2), transparent 55%),
    radial-gradient(circle at bottom right, rgba(240, 147, 251, 0.2), transparent 55%),
    #0f172a;
  backdrop-filter: blur(var(--ag-glass-blur));
  -webkit-backdrop-filter: blur(var(--ag-glass-blur));
  border-top: var(--ag-glass-border);
  z-index: 0;
}

.ag-footer-brand-text {
  margin: 0 0 8px;
  color: var(--ag-text-muted);
}

.ag-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ag-footer-heading,
.ag-footer-heading-sm {
  margin: 0 0 6px;
  font-weight: 600;
}

.ag-footer-heading {
  font-size: var(--ag-font-size-lg);
}

.ag-footer-heading-sm {
  font-size: var(--ag-font-size-sm);
}

.ag-footer-link {
  color: var(--ag-text-muted);
  text-decoration: none;
  position: relative;
  transition:
    color var(--ag-transition-fast),
    transform var(--ag-transition-fast);
}

.ag-footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  border-radius: var(--ag-radius-pill);
  background: linear-gradient(90deg, #667eea, #f093fb);
  opacity: 0;
  transform: scaleX(0.6);
  transition:
    opacity var(--ag-transition-fast),
    transform var(--ag-transition-fast);
}

.ag-footer-link:hover,
.ag-footer-link:focus-visible {
  color: var(--ag-text-white);
  transform: translateY(-1px);
}

.ag-footer-link:hover::after,
.ag-footer-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.ag-footer-social-links {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.ag-footer-social-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ag-radius-pill);
  border: var(--ag-glass-border);
  background: rgba(15, 23, 42, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ag-text-white);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7);
  transition:
    transform var(--ag-transition-normal),
    box-shadow var(--ag-transition-normal),
    background-color var(--ag-transition-normal),
    filter var(--ag-transition-normal);
}

.ag-footer-social-icon--whatsapp {
  background: radial-gradient(circle at top, #22c55e, #166534);
}

.ag-footer-social-icon--instagram {
  background: radial-gradient(circle at 30% 30%, #f472b6, #9333ea);
}

.ag-footer-social-icon--facebook {
  background: radial-gradient(circle at top, #60a5fa, #1d4ed8);
}

.ag-footer-social-icon:hover,
.ag-footer-social-icon:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.95);
  filter: brightness(1.05);
}