/* ==========================================================================
   Custom Luxury Styles & Animations for Dreams Arabic Book Theme
   ========================================================================== */

/* Shimmer animation for golden badges */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.gold-shimmer {
  background: linear-gradient(90deg, #ddb64f 0%, #fff2b2 50%, #c69a3d 100%);
  background-size: 200% auto;
  color: #03182d;
  animation: goldShimmer 4s infinite linear;
}

/* Glassmorphism containers */
.glass-panel {
  background: rgba(31, 32, 29, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(234, 194, 89, 0.25);
}

.glass-header {
  background: rgba(3, 24, 45, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(234, 194, 89, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0e0e0c;
}

::-webkit-scrollbar-thumb {
  background: #2a2a27;
  border-radius: 5px;
  border: 2px solid #0e0e0c;
}

::-webkit-scrollbar-thumb:hover {
  background: #ddb64f;
}

/* Modal styling */
#orderSuccessModal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#orderSuccessModal.active {
  display: flex;
  opacity: 1;
}

/* Form spinner */
.form-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(3, 24, 45, 0.3);
  border-radius: 50%;
  border-top-color: #03182d;
  animation: spin 0.8s linear infinite;
}

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

/* Active navigation item indicator & smooth scroll margin */
section[id] {
  scroll-margin-top: 85px;
}

.header-nav-link {
  transition: color 0.2s ease, border-color 0.2s ease;
}

.header-nav-link.active {
  color: #eac259 !important;
  border-bottom-color: #eac259 !important;
  font-weight: 700 !important;
}

.nav-link.active {
  color: #eac259;
  border-bottom: 2px solid #eac259;
}

/* Form input custom focus ring */
.input-field:focus {
  outline: none;
  border-color: #eac259;
  box-shadow: 0 0 0 2px rgba(234, 194, 89, 0.25);
}