/* ============================================
   VARIAN TECH - Shared Custom Styles
   Merged from all page CSS files (conflict-free)
   ============================================ */

/* ---------- Base ---------- */
body {
  font-family: 'Vazirmatn', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* background / color / direction are set via Tailwind classes on each page */
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill-icon,
.fill-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Persian number features */
.persian-num {
  font-feature-settings: "ss01", "ss02";
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #9CA3AF;
  font-size: 13px;
}

/* Range input accent */
input[type=range] {
  accent-color: #7628F5;
}

/* Hide native details marker */
details summary::-webkit-details-marker {
  display: none;
}

/* Tab transitions (account) */
.tab-content {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------- Gradients ---------- */
.gradient-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(232, 62, 155, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(118, 40, 245, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 60% 90%, rgba(34, 199, 232, 0.25) 0%, transparent 40%),
    linear-gradient(135deg, #17151F 0%, #261142 45%, #42115C 100%);
}

.gradient-iqos {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 113, 56, 0.28) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(232, 62, 155, 0.22) 0%, transparent 45%),
    linear-gradient(145deg, #13111C 0%, #1F192C 50%, #2B163B 100%);
}

.gradient-brand {
  background: linear-gradient(135deg, #7628F5 0%, #E83E9B 100%);
}

.gradient-hero-dark {
  background: radial-gradient(circle at 80% 20%, #5c1880 0%, #2a1145 45%, #17151F 90%);
}

.gradient-hero-bg {
  background: linear-gradient(135deg, #17151F 0%, #29104D 45%, #561685 80%, #7628F5 100%);
}

.brand-hero-gradient {
  background: linear-gradient(135deg, #181126 0%, #291240 50%, #150E24 100%);
}

.brand-gradient-cta {
  background: linear-gradient(135deg, #7628F5 0%, #E83E9B 100%);
}

.brand-gradient-cta:hover {
  background: linear-gradient(135deg, #651fd6 0%, #d8328c 100%);
}

.custom-gradient-cta {
  background: linear-gradient(135deg, #7628F5 0%, #B828C5 50%, #E83E9B 100%);
}

.custom-gradient-progress {
  background: linear-gradient(90deg, #22C7E8 0%, #7628F5 50%, #E83E9B 100%);
}

.brand-glow-aura {
  background: radial-gradient(circle at center, rgba(118, 40, 245, 0.12) 0%, rgba(232, 62, 155, 0.04) 50%, transparent 75%);
}

/* ---------- Glows & Shadows ---------- */
.glow-cyan {
  box-shadow: 0 0 25px -4px rgba(34, 199, 232, 0.45);
}

.glow-lime {
  box-shadow: 0 0 25px -4px rgba(201, 244, 91, 0.4);
}

.glow-purple {
  box-shadow: 0 0 30px -5px rgba(118, 40, 245, 0.5);
}

.glow-magenta {
  box-shadow: 0 0 28px -4px rgba(232, 62, 155, 0.45);
}

.accent-glow-magenta {
  box-shadow: 0 0 35px -5px rgba(232, 62, 155, 0.45);
}

.accent-glow-purple {
  box-shadow: 0 0 30px -5px rgba(118, 40, 245, 0.35);
}

.ambient-glow-purple {
  box-shadow: 0 20px 50px -10px rgba(118, 40, 245, 0.25);
}

.glow-card {
  box-shadow: 0 12px 32px -4px rgba(23, 21, 31, 0.05), 0 4px 12px -2px rgba(23, 21, 31, 0.02);
}

.glow-bank {
  box-shadow: 0 16px 36px -6px rgba(118, 40, 245, 0.18), 0 6px 16px -3px rgba(232, 62, 155, 0.12);
}

.soft-shadow,
.ambient-card-shadow,
.custom-plinth-shadow {
  box-shadow: 0 12px 32px -4px rgba(23, 23, 23, 0.04), 0 4px 12px -2px rgba(23, 23, 23, 0.02);
}

.subtle-border {
  border: 1px solid #ECECE8;
}

/* ---------- Scrollbar (checkout) ---------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #FAF8FF;
}

::-webkit-scrollbar-thumb {
  background: #c4c7c7;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7628F5;
}

/* ---------- Animations (payment_status) ---------- */
@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  50%  { transform: scale(1.15); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-ring {
  animation: pulse-ring 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}