/* ==========================================================
   Aesthetic Updates - عيادة المنتظر البيطرية
   ========================================================== */

/* Force HTML background to be white and body/sections to be transparent so z-index: -1 canvas shows through */
html {
  background: var(--white, #ffffff) !important;
}

body,
section,
.section,
.categories,
.brands,
.about,
.services,
.branches {
  background: transparent !important;
  background-color: transparent !important;
}

/* 1. Live Interactive Background Canvas */
#aesthetic-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}

/* 2. Metallic Sheen Animation for Badges */
.product-badge, 
.hero-badge, 
.profile-badge,
.cart-badge {
  position: relative !important;
  overflow: hidden !important;
}

.product-badge::after, 
.hero-badge::after,
.profile-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.6) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: badgeMetallicSheen 4.5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

@keyframes badgeMetallicSheen {
  0% { left: -80%; }
  18%, 100% { left: 150%; }
}

/* 3. Glowing Card & Hover Animations */
.category-tab-btn, 
.product-card, 
.branch-card,
.subcategory-card {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.category-tab-btn:hover {
  box-shadow: 0 10px 25px rgba(20, 184, 166, 0.18), 0 0 20px rgba(20, 184, 166, 0.15) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

.product-card:hover {
  box-shadow: 0 15px 35px rgba(20, 184, 166, 0.12), 0 0 25px rgba(20, 184, 166, 0.1) !important;
  transform: translateY(-6px) scale(1.01) !important;
}

.branch-card:hover {
  box-shadow: 0 15px 35px rgba(20, 184, 166, 0.15), 0 0 25px rgba(20, 184, 166, 0.12) !important;
  transform: translateY(-6px) scale(1.01) !important;
}

/* 4. Live Activity Glassmorphic Toast */
.aesthetic-activity-toast {
  position: fixed;
  bottom: 24px;
  left: -380px; /* Off-screen default */
  width: 330px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.06), 
    0 1px 8px rgba(0, 0, 0, 0.02),
    0 0 1px rgba(20, 184, 166, 0.15);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 99999;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  direction: rtl;
  pointer-events: auto;
}

.aesthetic-activity-toast.active {
  left: 24px;
}

.aesthetic-toast-icon {
  width: 44px;
  height: 44px;
  background: rgba(20, 184, 166, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14b8a6;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.05);
}

.aesthetic-toast-content {
  flex-grow: 1;
}

.aesthetic-toast-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--dark, #0f172a);
  margin-bottom: 3px;
  line-height: 1.4;
}

.aesthetic-toast-desc {
  font-size: 11px;
  color: var(--gray-600, #4b5563);
  font-weight: 600;
  line-height: 1.3;
}

.aesthetic-toast-close {
  color: var(--gray-400, #9ca3af);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  transition: color 0.2s;
  background: none;
  border: none;
  align-self: flex-start;
}

.aesthetic-toast-close:hover {
  color: #ef4444;
}

/* Keyframes heartbeat for icon pulse */
@keyframes toastHeartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  70% { transform: scale(1); }
}

.aesthetic-toast-icon.pulse {
  animation: toastHeartbeat 2.5s infinite;
}

/* ==========================================================================
   EVO DESIGNER Interactive Signature Card - Style 2 (Large Size Override)
   ========================================================================== */
.evo-signature-wrapper {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.evo-signature-card-v2 {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 16px 36px !important;
  background: rgba(4, 15, 20, 0.95) !important;
  border: 1.5px solid #00f5d4 !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  box-shadow: 
    0 0 30px rgba(0, 245, 212, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 0 18px rgba(0, 245, 212, 0.1) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  direction: rtl !important;
}

.evo-signature-card-v2:hover {
  transform: translateY(-5px) scale(1.03) !important;
  border-color: #00ffea !important;
  box-shadow: 
    0 0 45px rgba(0, 245, 212, 0.5),
    0 15px 40px rgba(0, 0, 0, 0.7),
    inset 0 0 25px rgba(0, 245, 212, 0.2) !important;
}

/* Instagram Tag Pill */
.evo-insta-pill {
  background: rgba(42, 13, 32, 0.85) !important;
  border: 1.5px solid #e1306c !important;
  border-radius: 14px !important;
  padding: 8px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 0 15px rgba(225, 48, 108, 0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.evo-signature-card-v2:hover .evo-insta-pill {
  transform: scale(1.06) !important;
  box-shadow: 0 0 22px rgba(225, 48, 108, 0.6) !important;
}

.evo-insta-handle {
  color: #ffffff !important;
  font-family: 'Outfit', 'Inter', monospace, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  direction: ltr !important;
  display: inline-block !important;
}

.evo-insta-icon {
  color: #e1306c !important;
  font-size: 19px !important;
}

/* Middle Info Block */
.evo-info-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  gap: 2px !important;
}

.evo-sub-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00f5d4 !important;
  letter-spacing: 0.5px !important;
}

.evo-code-sym,
.evo-prompt-sym {
  color: #00f5d4 !important;
  font-family: monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.evo-main-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.evo-ext-icon {
  color: #00f5d4 !important;
  font-size: 17px !important;
  transition: transform 0.3s ease !important;
}

.evo-signature-card-v2:hover .evo-ext-icon {
  transform: translate(-3px, -3px) scale(1.15) !important;
}

.evo-title-text {
  color: #00f5d4 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 16px rgba(0, 245, 212, 0.75) !important;
}

/* Code Box Icon */
.evo-code-box {
  background: rgba(0, 245, 212, 0.12) !important;
  border: 1.5px solid rgba(0, 245, 212, 0.45) !important;
  border-radius: 14px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00f5d4 !important;
  font-size: 20px !important;
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.25) !important;
  transition: all 0.3s ease !important;
}

.evo-signature-card-v2:hover .evo-code-box {
  background: rgba(0, 245, 212, 0.22) !important;
  border-color: #00f5d4 !important;
  box-shadow: 0 0 25px rgba(0, 245, 212, 0.5) !important;
  transform: rotate(6deg) scale(1.08) !important;
}

/* Glowing Online Status Indicator */
.evo-status-dot {
  width: 12px !important;
  height: 12px !important;
  background: #00f5d4 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px #00f5d4 !important;
  animation: evoDotPulse 2s infinite ease-in-out !important;
}

@keyframes evoDotPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 8px #00f5d4;
  }
  50% {
    transform: scale(1.35);
    box-shadow: 0 0 22px #00f5d4, 0 0 32px rgba(0, 245, 212, 0.85);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 8px #00f5d4;
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 640px) {
  .evo-signature-card-v2 {
    padding: 12px 20px !important;
    gap: 14px !important;
    border-radius: 18px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .evo-title-text {
    font-size: 20px !important;
  }
  
  .evo-insta-pill {
    padding: 6px 14px !important;
  }
  
  .evo-insta-handle {
    font-size: 14px !important;
  }
  
  .evo-code-box {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }
}
.product-image { background: linear-gradient(to right, #4db6ac 50%, #ffffff 50%) !important; }
body { background-color: #4ebabc !important; }
#react-topography-root { display: none !important; } html, body { background: #4ebabc !important; }