/* ============================================================
   مزاد هلا — Static HTML Design System
   Faithful 1:1 port of src/index.css + the Tailwind utilities
   used by the React app. Mirrors the React/Tailwind/shadcn
   redesign so HTML pages look identical to the React version.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;600&family=Inter:wght@400;500;600;700&family=Comfortaa:wght@400;500;700&display=swap");

/* ============================ TOKENS (light) ============================ */
:root {
  --background: 210 40% 98%;
  --foreground: 222 60% 12%;
  --card: 0 0% 100%;
  --card-foreground: 222 60% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 60% 12%;

  --primary: 222 82% 23%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 215 71% 42%;
  --primary-light: 214 67% 54%;

  --bid: 350 100% 42%;
  --bid-foreground: 0 0% 100%;
  --bid-glow: 350 100% 56%;
  --bid-deep: 350 100% 32%;

  --secondary: 215 60% 96%;
  --secondary-foreground: 222 82% 23%;
  --muted: 214 32% 94%;
  --muted-foreground: 215 16% 42%;
  --accent: 215 71% 95%;
  --accent-foreground: 222 82% 23%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 38%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 222 60% 12%;

  --border: 215 25% 88%;
  --input: 215 25% 88%;
  --ring: 215 71% 42%;

  --radius: 0.875rem;

  --glass-bg: 0 0% 100%;
  --glass-border: 215 40% 88%;
  --glass-alpha: 0.65;

  --gradient-hero: linear-gradient(135deg, hsl(222 82% 23%) 0%, hsl(215 71% 42%) 50%, hsl(214 67% 54%) 100%);
  --gradient-hero-text: linear-gradient(135deg, hsl(222 82% 23%) 0%, hsl(215 71% 42%) 50%, hsl(214 67% 54%) 100%);
  --gradient-bid: linear-gradient(135deg, hsl(350 100% 42%) 0%, hsl(350 100% 56%) 100%);
  --gradient-glass: linear-gradient(135deg, hsla(0,0%,100%,0.85) 0%, hsla(215,71%,95%,0.55) 100%);
  --gradient-aurora:
    radial-gradient(circle at 20% 20%, hsla(215,71%,42%,0.25), transparent 50%),
    radial-gradient(circle at 80% 30%, hsla(350,100%,56%,0.18), transparent 50%),
    radial-gradient(circle at 50% 90%, hsla(222,82%,23%,0.25), transparent 50%);

  --shadow-elegant: 0 10px 40px -12px hsl(222 82% 23% / 0.25);
  --shadow-glow: 0 0 40px hsl(215 71% 42% / 0.35);
  --shadow-bid: 0 8px 30px -6px hsl(350 100% 42% / 0.45);
  --shadow-card: 0 4px 20px -4px hsl(222 60% 12% / 0.08);
  --shadow-card-hover: 0 20px 50px -12px hsl(222 82% 23% / 0.28);

  --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark {
  --background: 222 56% 6%;
  --foreground: 0 0% 100%;
  --card: 222 47% 13%;
  --card-foreground: 0 0% 100%;
  --popover: 222 47% 13%;
  --popover-foreground: 0 0% 100%;

  --primary: 214 95% 75%;
  --primary-foreground: 222 56% 6%;
  --primary-glow: 215 95% 82%;
  --primary-light: 214 95% 88%;

  --bid: 350 100% 65%;
  --bid-foreground: 0 0% 100%;
  --bid-glow: 350 100% 75%;
  --bid-deep: 350 100% 50%;

  --secondary: 222 40% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 222 35% 22%;
  --muted-foreground: 215 35% 92%;
  --accent: 222 50% 26%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 85% 65%;
  --success: 142 70% 55%;
  --warning: 38 95% 62%;

  --border: 222 32% 46%;
  --input: 222 32% 46%;
  --ring: 214 95% 75%;

  --glass-bg: 222 47% 11%;
  --glass-border: 222 50% 26%;
  --glass-alpha: 0.55;

  --gradient-hero: linear-gradient(135deg, hsl(214 95% 70%) 0%, hsl(215 95% 78%) 50%, hsl(214 95% 86%) 100%);
  --gradient-hero-text: linear-gradient(135deg, hsl(214 95% 75%) 0%, hsl(215 95% 85%) 50%, hsl(214 95% 92%) 100%);
  --gradient-glass: linear-gradient(135deg, hsla(222,47%,15%,0.75) 0%, hsla(222,60%,20%,0.55) 100%);
  --gradient-aurora:
    radial-gradient(circle at 20% 20%, hsla(215,80%,40%,0.4), transparent 50%),
    radial-gradient(circle at 80% 30%, hsla(350,100%,50%,0.25), transparent 50%),
    radial-gradient(circle at 50% 90%, hsla(214,67%,30%,0.4), transparent 50%);

  --shadow-elegant: 0 10px 40px -12px hsl(0 0% 0% / 0.6);
  --shadow-glow: 0 0 50px hsl(215 80% 50% / 0.4);
  --shadow-bid: 0 8px 30px -6px hsl(350 100% 50% / 0.5);
  --shadow-card: 0 4px 20px -4px hsl(0 0% 0% / 0.4);
  --shadow-card-hover: 0 20px 50px -12px hsl(215 80% 50% / 0.35);
}

/* ============================ BASE ============================ */
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Tajawal','Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
  font-feature-settings: "ss01","cv11";
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100vw;
}
body.sheet-open { overflow: hidden; touch-action: none; }
html[dir="ltr"] body { font-family: 'Comfortaa','Inter',system-ui,sans-serif; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

::selection { background: hsl(var(--primary) / 0.25); color: hsl(var(--foreground)); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--muted)); }
::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.5); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

/* ============================ UTILITIES (Tailwind subset) ============================ */
/* Layout */
.container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; }
.top-1\/2 { top: 50%; } .left-1\/2 { left: 50%; }
.z-0{z-index:0}.z-1{z-index:1}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}

.block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
.flex { display: flex; } .inline-flex { display: inline-flex; }
.grid { display: grid; } .hidden { display: none; }

.flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; } .justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; }
.text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; }
.place-items-center { place-items: center; }

.gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; } .gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.col-span-2 { grid-column: span 2 / span 2; } .col-span-full { grid-column: 1 / -1; }

/* Sizing */
.w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; }
.w-auto { width: auto; } .h-auto { height: auto; }
.w-1 { width: .25rem; } .w-1\.5 { width: .375rem; } .w-2 { width: .5rem; } .w-3 { width: .75rem; } .w-3\.5 { width: .875rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-7 { width: 1.75rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem;}
.h-1 { height: .25rem; } .h-1\.5 { height: .375rem; } .h-2 { height: .5rem; } .h-3 { height: .75rem; } .h-3\.5 { height: .875rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem;}
.max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-7xl { max-width: 80rem; }
.mx-auto { margin-inline: auto; }

/* Spacing */
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.px-1{padding-inline:.25rem}.px-2{padding-inline:.5rem}.px-2\.5{padding-inline:.625rem}.px-3{padding-inline:.75rem}.px-4{padding-inline:1rem}.px-5{padding-inline:1.25rem}.px-6{padding-inline:1.5rem}.px-8{padding-inline:2rem}
.py-1{padding-block:.25rem}.py-1\.5{padding-block:.375rem}.py-2{padding-block:.5rem}.py-3{padding-block:.75rem}.py-4{padding-block:1rem}.py-5{padding-block:1.25rem}.py-6{padding-block:1.5rem}.py-8{padding-block:2rem}.py-10{padding-block:2.5rem}.py-12{padding-block:3rem}.py-16{padding-block:4rem}.py-20{padding-block:5rem}.py-28{padding-block:7rem}
.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}
.ps-1{padding-inline-start:.25rem}.ps-3{padding-inline-start:.75rem}.ps-4{padding-inline-start:1rem}.ps-10{padding-inline-start:2.5rem}.ps-11{padding-inline-start:2.75rem}.pe-3{padding-inline-end:.75rem}.pe-4{padding-inline-end:1rem}.pe-10{padding-inline-end:2.5rem}.pe-12{padding-inline-end:3rem}

.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.ms-2{margin-inline-start:.5rem}.ms-3{margin-inline-start:.75rem}.ms-auto{margin-inline-start:auto}
.-mt-12{margin-top:-3rem}.-mt-16{margin-top:-4rem}.-mt-6{margin-top:-1.5rem}
.space-y-1\.5 > * + * { margin-top: .375rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Typography */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1.1; }
.text-6xl { font-size: 3.75rem; line-height: 1.05; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.leading-snug { line-height: 1.375; } .leading-relaxed { line-height: 1.625; } .leading-tight { line-height: 1.25; }
.tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; }
.uppercase { text-transform: uppercase; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }

/* Colors */
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-bid { color: hsl(var(--bid)); }
.text-bid-foreground { color: hsl(var(--bid-foreground)); }
.text-white { color: #fff; }
.text-emerald-500 { color: hsl(160 84% 39%); }
.text-foreground\/80 { color: hsl(var(--foreground) / .8); }
.text-foreground\/90 { color: hsl(var(--foreground) / .9); }

.bg-background { background: hsl(var(--background)); }
.bg-card { background: hsl(var(--card)); }
.bg-primary { background: hsl(var(--primary)); }
.bg-bid { background: hsl(var(--bid)); }
.bg-muted { background: hsl(var(--muted)); }
.bg-accent { background: hsl(var(--accent)); }
.bg-transparent { background: transparent; }
.bg-primary\/5 { background: hsl(var(--primary) / .05); }
.bg-primary\/10 { background: hsl(var(--primary) / .1); }
.bg-primary\/15 { background: hsl(var(--primary) / .15); }
.bg-bid\/10 { background: hsl(var(--bid) / .1); }
.bg-bid\/15 { background: hsl(var(--bid) / .15); }
.bg-accent\/60 { background: hsl(var(--accent) / .6); }
.bg-muted\/40 { background: hsl(var(--muted) / .4); }

/* Borders / Radius */
.border { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-s-2 { border-inline-start-width: 2px; border-inline-start-style: solid; }
.border-border { border-color: hsl(var(--border)); }
.border-border\/40 { border-color: hsl(var(--border) / .4); }
.border-border\/60 { border-color: hsl(var(--border) / .6); }
.border-primary\/20 { border-color: hsl(var(--primary) / .2); }
.border-primary\/30 { border-color: hsl(var(--primary) / .3); }
.border-primary\/40 { border-color: hsl(var(--primary) / .4); }
.border-bid\/20 { border-color: hsl(var(--bid) / .2); }
.border-bid\/30 { border-color: hsl(var(--bid) / .3); }
.border-bid\/40 { border-color: hsl(var(--bid) / .4); }
.border-transparent { border-color: transparent; }
.border-dashed { border-style: dashed; }

.rounded-md { border-radius: calc(var(--radius) - 4px); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: .85rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-bid { box-shadow: var(--shadow-bid); }
.shadow-card-soft { box-shadow: var(--shadow-card); }

/* Effects */
.opacity-0 { opacity: 0; } .opacity-40 { opacity: .4; } .opacity-50 { opacity: .5; } .opacity-60 { opacity: .6; } .opacity-70 { opacity: .7; } .opacity-90 { opacity: .9; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.blur-2xl { filter: blur(40px); } .blur-3xl { filter: blur(64px); }
.mix-blend-overlay { mix-blend-mode: overlay; }
.object-cover { object-fit: cover; }
.aspect-\[16\/10\] { aspect-ratio: 16/10; }
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }

.transition { transition: all .2s var(--transition-smooth); }
.transition-colors { transition: color .2s, background-color .2s, border-color .2s; }
.transition-transform { transition: transform .3s var(--transition-smooth); }
.duration-300 { transition-duration: .3s; } .duration-500 { transition-duration: .5s; } .duration-700 { transition-duration: .7s; }

/* ============================ COMPONENTS ============================ */
.glass {
  background: hsl(var(--glass-bg) / var(--glass-alpha));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid hsl(var(--glass-border) / 0.6);
}
.glass-strong {
  background: hsl(var(--glass-bg) / 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid hsl(var(--glass-border) / 0.7);
}

.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-bid { background: var(--gradient-bid); }
.bg-gradient-glass { background: var(--gradient-glass); }
.aurora-bg { background: var(--gradient-aurora); }

.text-gradient-brand {
  background: var(--gradient-hero-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.text-gradient-bid {
  background: var(--gradient-bid);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.hover-lift { transition: transform .4s var(--transition-smooth), box-shadow .4s var(--transition-smooth), border-color .3s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

/* ---------- Button (shadcn-equivalent variants) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius); padding: 0 1rem; height: 2.5rem;
  font-weight: 600; font-size: .875rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: all .25s var(--transition-spring);
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 2.25rem; padding: 0 .85rem; font-size: .82rem; }
.btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; }

/* Ensure inline SVGs render at a sensible size everywhere */
.btn > svg, .badge > svg, .nav-link > svg,
.dropdown-item > svg, .icon-leading > svg, .icon-trailing > svg {
  width: 1rem; height: 1rem; flex-shrink: 0;
}
.btn-lg > svg { width: 1.15rem; height: 1.15rem; }
.btn-icon > svg { width: 1.15rem; height: 1.15rem; }
.btn > span > svg, .badge > span > svg { width: 100%; height: 100%; display: block; }

.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / .9); }

.btn-bid { background: var(--gradient-bid); color: hsl(var(--bid-foreground)); box-shadow: var(--shadow-bid); border: 0; }
.btn-bid:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

.btn-hero { background: var(--gradient-hero); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-elegant); border: 0; }
.btn-hero:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

.btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); }

/* Rounded full overrides */
.btn.rounded-full { border-radius: 9999px; }

/* ---------- Field / input / label ---------- */
.label { display: block; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); }
.input {
  width: 100%; height: 2.75rem; padding: 0 .9rem;
  border-radius: var(--radius); border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font-size: .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .2); }
.input-icon-wrap { position: relative; }
.input-icon-wrap > .icon-leading {
  position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); pointer-events: none;
}
.input-icon-wrap > .icon-trailing {
  position: absolute; inset-inline-end: .75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); cursor: pointer; background: none; border: 0;
}
.input-icon-wrap > .input.has-leading-icon { padding-inline-start: 2.5rem; }
.input-icon-wrap > .input.has-trailing-icon { padding-inline-end: 2.5rem; }
.h-11 { height: 2.75rem; } .h-12 { height: 3rem; }

/* Select (native, styled) */
.select {
  width: 100%; height: 2.75rem; padding: 0 .9rem;
  border-radius: var(--radius); border: 1px solid hsl(var(--input));
  background: hsl(var(--background) / .6); color: hsl(var(--foreground));
  font-size: .9rem; outline: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23708090' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-inline-end: 2.25rem;
}
html[dir="rtl"] .select { background-position: left .85rem center; padding-inline-end: .9rem; padding-inline-start: 2.25rem; }
.select:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .2); }

/* Checkbox */
.checkbox { width: 1.05rem; height: 1.05rem; accent-color: hsl(var(--primary)); cursor: pointer; }

/* ---------- Card ---------- */
.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem; box-shadow: var(--shadow-card);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 700;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.badge-bid { background: hsl(var(--bid)); color: hsl(var(--bid-foreground)); border-color: transparent; box-shadow: var(--shadow-bid); }
.badge-outline { background: transparent; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  transition: all .5s var(--transition-smooth);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header.scrolled {
  background: hsl(var(--glass-bg) / 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom-color: hsl(var(--border) / .5);
  box-shadow: var(--shadow-card);
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 5rem; transition: height .5s var(--transition-smooth);
}
.site-header.scrolled .header-inner { height: 4rem; }
@media (min-width: 1024px) {
  .site-header .header-inner { height: 6rem; }
  .site-header.scrolled .header-inner { height: 5rem; }
}
.nav-link {
  position: relative; padding: .5rem 1rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500; color: hsl(var(--foreground) / .8);
  transition: color .3s; overflow: hidden;
}
.nav-link:hover { color: hsl(var(--primary)); }
.nav-link.active { color: hsl(var(--primary)); }
.nav-link.active::before {
  content: ""; position: absolute; inset: 0; background: hsl(var(--accent));
  border-radius: 9999px; z-index: -1;
}
.nav-link::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; border-radius: 9999px;
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--bid)), hsl(var(--primary)));
  transition: width .4s var(--transition-smooth);
}
.nav-link:hover::after { width: 75%; }

.scroll-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--bid)), hsl(var(--primary-light)));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Brand logo (image-based, swaps with theme) */
.brand-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand-logo-img {
  height: 3.25rem; width: auto; display: block;
  filter: drop-shadow(0 2px 6px hsl(var(--primary) / .2));
  transition: transform .4s var(--transition-spring);
}
@media (min-width: 1024px) { .brand-logo-img { height: 3.75rem; } }
.brand-logo:hover .brand-logo-img { transform: scale(1.05); }
.brand-logo-img.light { display: block; }
.brand-logo-img.dark  { display: none; }
html.dark .brand-logo-img.light { display: none; }
html.dark .brand-logo-img.dark  { display: block; }

/* Header toggle pills (language + theme) */
.icon-pill {
  width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center;
  border-radius: 9999px; background: hsl(var(--accent) / .5); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / .6); cursor: pointer;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.icon-pill:hover { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); transform: translateY(-1px); box-shadow: var(--shadow-card-soft); }
.icon-pill > svg { width: 1.1rem; height: 1.1rem; }
.lang-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2.5rem; padding: 0 .85rem; border-radius: 9999px;
  background: hsl(var(--accent) / .5); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / .6); font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: all .25s;
}
.lang-pill:hover { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); transform: translateY(-1px); }
.lang-pill > svg { width: 1rem; height: 1rem; }

/* ---------- Mobile sheet (slide-in drawer) ---------- */
.sheet-overlay {
  position: fixed; inset: 0; background: hsl(0 0% 0% / .5); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet-panel {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; right: 0; left: auto;
  width: min(85vw, 22rem); max-width: 100vw; background: hsl(var(--card));
  z-index: 90; transform: translateX(100%);
  transition: transform .35s var(--transition-smooth);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgb(0 0 0 / .2);
  overflow-y: auto; overscroll-behavior: contain;
}
html[dir="rtl"] .sheet-panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: 10px 0 40px rgb(0 0 0 / .2); }
.sheet-panel.open { transform: translateX(0) !important; }

/* ---------- Dropdown ---------- */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0;
  min-width: 14rem; background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 1rem;
  box-shadow: var(--shadow-card-hover); padding: .35rem;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: all .2s var(--transition-smooth); z-index: 60;
}
.dropdown-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; border-radius: .65rem;
  font-size: .875rem; cursor: pointer; color: hsl(var(--foreground));
  text-decoration: none;
}
.dropdown-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dropdown-sep { height: 1px; background: hsl(var(--border)); margin: .35rem 0; }
.dropdown-label { padding: .4rem .75rem; font-size: .75rem; color: hsl(var(--muted-foreground)); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; /*margin-top: 5rem;*/
  border-top: 1px solid hsl(var(--border) / .5);
  background: hsl(var(--card) / .5);
  overflow: hidden;
}
.site-footer .aurora-bg { position: absolute; inset: 0; opacity: .4; pointer-events: none; }

/* ---------- Countdown ---------- */
.countdown-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.countdown-cell .num-box {
  position: relative;
  background: hsl(var(--glass-bg) / var(--glass-alpha));
  backdrop-filter: blur(18px);
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 1rem;
  padding: .75rem .95rem;
  min-width: 68px;
  box-shadow: var(--shadow-elegant);
  overflow: hidden;
}
.dark .countdown-cell .num-box { background: hsl(var(--card)); border-color: hsl(var(--primary-light) / .6); }
.countdown-cell .num-box::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, hsl(var(--primary) / .1), transparent);
  pointer-events: none;
}
.dark .countdown-cell .num-box::before {
  background: linear-gradient(to bottom, hsl(var(--primary-light) / .25), transparent);
}
.countdown-cell .num {
  display: block; font-size: 1.875rem; font-weight: 800;
  color: hsl(var(--primary)); font-variant-numeric: tabular-nums;
  letter-spacing: -.025em; line-height: 1;
}
.dark .countdown-cell .num { color: hsl(var(--primary-light)); }
.countdown-cell .lbl {
  margin-top: .5rem; font-size: .7rem; font-weight: 700;
  color: hsl(var(--foreground) / .85);
}
@media (min-width: 640px) {
  .countdown-cell .num-box { min-width: 88px; padding: 1rem 1.25rem; }
  .countdown-cell .num { font-size: 2.85rem; }
  .countdown-cell .lbl { font-size: .78rem; }
}
.countdown-sep { font-size: 1.5rem; font-weight: 700; color: hsl(var(--primary) / .6); margin-top: -1.5rem; }
.dark .countdown-sep { color: hsl(var(--primary-light)); }
@media (min-width: 640px) { .countdown-sep { font-size: 2.25rem; } }

/* ---------- Toast ---------- */
.toast-host { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: hsl(var(--card)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  padding: .85rem 1.1rem; border-radius: .85rem;
  box-shadow: var(--shadow-card-hover);
  animation: fade-in-up .3s var(--transition-smooth) both;
  max-width: 360px; font-size: .9rem;
}
.toast.success { border-color: hsl(var(--success) / .5); }
.toast.error { border-color: hsl(var(--destructive) / .5); }

/* ---------- Animations ---------- */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse-soft { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.85;transform:scale(1.03)} }
@keyframes fade-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scale-in { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes slide-in { from{opacity:0;transform:scale(1.08)} to{opacity:1;transform:scale(1)} }
@keyframes ping { 75%,100%{transform:scale(2);opacity:0} }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-soft { animation: pulse-soft 2.5s ease-in-out infinite; }
.animate-fade-in { animation: fade-in .5s ease-out both; }
.animate-fade-in-up { animation: fade-in-up .6s var(--transition-smooth) both; }
.animate-scale-in { animation: scale-in .4s var(--transition-spring) both; }
.animate-gradient { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; }
.animate-ping { animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite; }

/* Stagger helpers */
.delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; } .delay-400 { animation-delay: .4s; } .delay-500 { animation-delay: .5s; }

/* ---------- Responsive utilities ---------- */
@media (min-width: 640px) {
  .sm\:flex { display: flex; } .sm\:hidden { display: none; } .sm\:inline-flex { display: inline-flex; } .sm\:block { display: block; } .sm\:grid { display: grid; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-9 { padding: 2.25rem; }
  .sm\:py-16 { padding-block: 4rem; }
  .sm\:py-20 { padding-block: 5rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:block { display: block; } .md\:grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:block { display: block; } .lg\:grid { display: grid; } .lg\:inline-flex { display: inline-flex; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .lg\:text-2xl { font-size: 1.5rem; }
  .lg\:text-4xl { font-size: 2.25rem; }
  .lg\:text-5xl { font-size: 3rem; }
  .lg\:text-7xl { font-size: 4.5rem; }
  .lg\:py-28 { padding-block: 7rem; }
  .lg\:h-16 { height: 4rem; }
  .lg\:h-20 { height: 5rem; }
  .lg\:h-24 { height: 6rem; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------- RTL icon mirroring ---------- */
html[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ---------- Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--accent)), hsl(var(--muted)));
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ---------- Dialog (alert) ---------- */
.dialog-overlay {
  position: fixed; inset: 0; background: hsl(0 0% 0% / .55); z-index: 110;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  display: grid; place-items: center; padding: 1rem;
  backdrop-filter: blur(4px);
}
.dialog-overlay.open { opacity: 1; pointer-events: auto; }
.dialog-panel {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 1.25rem;
  box-shadow: var(--shadow-card-hover);
  width: 100%; max-width: 28rem; padding: 1.5rem;
  transform: scale(.94) translateY(8px); opacity: 0;
  transition: all .25s var(--transition-spring);
}
.dialog-overlay.open .dialog-panel { transform: scale(1) translateY(0); opacity: 1; }
.dialog-title { font-size: 1.15rem; font-weight: 800; margin-bottom: .35rem; }
.dialog-desc { font-size: .9rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; line-height: 1.6; }
.dialog-actions { display: flex; gap: .5rem; justify-content: flex-end; }

/* ---------- Page hero (small) ---------- */
.page-hero {
  position: relative; padding: 3.5rem 0 2rem;
  background: linear-gradient(180deg, hsl(var(--secondary)/.6), transparent);
  border-bottom: 1px solid hsl(var(--border)/.5);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--gradient-aurora); opacity: .35; pointer-events: none;
}
.page-hero .container { position: relative; }

/* ---------- Spec tile (car details) ---------- */
.spec-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid hsl(var(--border)/.5);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row .spec-ic {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: .85rem; background: hsl(var(--primary)/.1); color: hsl(var(--primary));
  display: grid; place-items: center;
}
.spec-row .spec-ic svg { width: 1rem; height: 1rem; }
.spec-row .spec-meta { min-width: 0; flex: 1; }
.spec-row .spec-lbl { font-size: 11px; color: hsl(var(--muted-foreground)); }
.spec-row .spec-val { font-weight: 700; font-size: .9rem; }

/* Gallery thumbs */
.thumb-btn {
  position: relative; aspect-ratio: 4/3; border-radius: .85rem;
  overflow: hidden; border: 2px solid transparent; padding: 0;
  background: hsl(var(--secondary));
  transition: border-color .25s, box-shadow .25s;
}
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn.active { border-color: hsl(var(--primary)); box-shadow: var(--shadow-glow); }
.thumb-btn:hover { border-color: hsl(var(--border)); }

/* Share icon button */
.share-btn {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 9999px; border: 1px solid hsl(var(--border));
  background: hsl(var(--glass-bg)/var(--glass-alpha));
  transition: all .25s;
}
.share-btn svg { width: 1rem; height: 1rem; }
.share-btn:hover { transform: translateY(-2px); }

/* Bid stepper */
.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper .step-btn {
  width: 3rem; height: 3rem; border-radius: .85rem;
  border: 1px solid hsl(var(--input)); background: hsl(var(--card));
  display: grid; place-items: center;
}
.stepper .step-btn:hover { background: hsl(var(--accent)); }
.stepper .step-btn svg { width: 1.25rem; height: 1.25rem; }
.stepper .step-input {
  flex: 1; height: 3rem; text-align: center;
  font-size: 1.25rem; font-weight: 800; color: hsl(var(--bid));
  border-radius: .85rem; border: 1px solid hsl(var(--input));
  background: hsl(var(--card));
}
.stepper .step-input:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

/* Sticky helpers */
.sticky-top-24 { position: sticky; top: 6rem; }

/* Form field hint */
.field-hint { font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.55; margin-top: .25rem; }

/* Inline icon size 5 */
.w-5 svg, .h-5 svg { width: 100%; height: 100%; }

/* Section helpers */
.section-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
@media (min-width: 768px){ .section-title { font-size: 1.75rem; } }

/* RTL: flip arrow utility */
html[dir="rtl"] .flip-x { transform: scaleX(-1); }

/* ============================ PHASE 2 — Profile / Edit / Change Pwd ============================ */

/* Tabs (shadcn-equivalent) */
.tabs-list {
  display: grid; gap: .25rem; padding: .25rem;
  background: hsl(var(--muted)); border-radius: 1rem;
}
.tab-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem; min-height: 44px; padding: .55rem .85rem;
  border-radius: .85rem; font-size: .82rem; font-weight: 600;
  color: hsl(var(--muted-foreground)); transition: all .25s var(--transition-smooth);
  background: transparent; border: 0; cursor: pointer;
  line-height: 1.2; text-align: center;
}
.tab-trigger:hover { color: hsl(var(--foreground)); }
.tab-trigger.active {
  background: hsl(var(--card)); color: hsl(var(--foreground));
  box-shadow: var(--shadow-card);
}
.tab-trigger > svg { width: .95rem; height: .95rem; }
@media (min-width: 640px) { .tab-trigger { font-size: .9rem; } }
.tab-panel { display: none; margin-top: 1.25rem; }
.tab-panel.active { display: block; animation: fade-in .35s ease-out both; }

/* Profile hero card (matches PageHero pattern) */
.profile-hero {
  position: relative; padding: 2.5rem 0 2rem;
  overflow: hidden;
  background: linear-gradient(180deg, hsl(var(--secondary)/.7), transparent);
  border-bottom: 1px solid hsl(var(--border)/.5);
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--gradient-aurora); opacity: .35; pointer-events: none;
}
.profile-hero .container { position: relative; }
.profile-hero .ph-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
  display: grid; place-items: center;
  background: var(--gradient-hero); color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-elegant);
}
.profile-hero .ph-icon svg { width: 1.6rem; height: 1.6rem; }

.float-ic {
  position: absolute; pointer-events: none; opacity: .25;
  color: hsl(var(--primary));
}
.float-ic svg { width: 2.5rem; height: 2.5rem; }

/* Stat card */
.stat-card {
  position: relative; overflow: hidden;
  border-radius: 1.25rem; padding: 1.1rem 1.25rem;
  background: hsl(var(--glass-bg) / var(--glass-alpha));
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: .9rem;
  transition: transform .3s var(--transition-smooth), box-shadow .3s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.stat-card .st-ic {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--primary)/.12); color: hsl(var(--primary));
}
.stat-card .st-ic svg { width: 1.25rem; height: 1.25rem; }
.stat-card.bid .st-ic { background: hsl(var(--bid)/.12); color: hsl(var(--bid)); }
.stat-card.success .st-ic { background: hsl(var(--success)/.15); color: hsl(var(--success)); }
.stat-card .st-lbl { font-size: .72rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.stat-card .st-val { font-size: 1.35rem; font-weight: 800; line-height: 1.1; margin-top: .15rem; }

/* Side nav (profile) */
.side-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .85rem; border-radius: .85rem;
  font-size: .9rem; font-weight: 600; color: hsl(var(--foreground)/.85);
  text-decoration: none; transition: all .2s;
  border: 1px solid transparent;
}
.side-link:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.side-link.active { background: hsl(var(--primary)/.1); color: hsl(var(--primary)); border-color: hsl(var(--primary)/.25); }
.side-link svg { width: 1rem; height: 1rem; }

/* Bid row card */
.bid-row {
  position: relative; overflow: hidden;
  border-radius: 1.1rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--glass-bg) / var(--glass-alpha));
  backdrop-filter: blur(14px);
  padding: 1rem 1.1rem; transition: all .3s;
}
.bid-row:hover { border-color: hsl(var(--primary)/.4); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.bid-row::before {
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background: linear-gradient(to right, transparent, hsl(var(--bid)), transparent);
  opacity:.7;
}

/* Table */
.tbl { width:100%; border-collapse: collapse; font-size:.875rem; }
.tbl th, .tbl td { padding:.8rem .75rem; text-align:start; border-bottom:1px solid hsl(var(--border)/.6); }
.tbl th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:hsl(var(--muted-foreground)); font-weight:700; background:hsl(var(--muted)/.4); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: hsl(var(--accent)/.3); }

.badge-success { background: hsl(var(--success)/.15); color: hsl(var(--success)); border-color: hsl(var(--success)/.3); }
.badge-warning { background: hsl(38 95% 50% / .15); color: hsl(38 95% 38%); border-color: hsl(38 95% 50% / .3); }
.dark .badge-warning { color: hsl(38 95% 70%); }
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.badge-bid-soft { background: hsl(var(--bid)/.12); color: hsl(var(--bid)); border-color: hsl(var(--bid)/.3); }

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  border: 1px dashed hsl(var(--border)); border-radius: 1.25rem;
  background: hsl(var(--muted)/.3);
}
.empty-state .es-ic {
  width: 4rem; height: 4rem; margin: 0 auto 1rem;
  border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
  display: grid; place-items: center;
}
.empty-state .es-ic svg { width: 1.75rem; height: 1.75rem; }

/* Avatar block */
.avatar-xl {
  width: 6rem; height: 6rem; border-radius: 9999px;
  background: var(--gradient-hero); color: hsl(var(--primary-foreground));
  display: grid; place-items: center; font-weight: 800; font-size: 2.25rem;
  box-shadow: var(--shadow-elegant); position: relative;
  border: 4px solid hsl(var(--card));
}
.avatar-edit-btn {
  position: absolute; bottom: 0; inset-inline-end: 0;
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: hsl(var(--bid)); color: hsl(var(--bid-foreground));
  display: grid; place-items: center; border: 2px solid hsl(var(--card));
  cursor: pointer; box-shadow: var(--shadow-bid);
}
.avatar-edit-btn svg { width: .85rem; height: .85rem; }

/* Password strength bar */
.pwd-strength { display: flex; gap: .35rem; }
.pwd-strength .seg {
  height: .35rem; flex: 1; border-radius: 9999px; background: hsl(var(--muted));
  transition: background .3s;
}
.pwd-strength .seg.s1 { background: hsl(var(--bid)); }
.pwd-strength .seg.s2 { background: hsl(38 95% 55%); }
.pwd-strength .seg.s3 { background: hsl(var(--primary)); }
.pwd-strength .seg.s4 { background: hsl(var(--success)); }

.req-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 9999px;
  font-size: .68rem; font-weight: 700;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.req-chip.ok { background: hsl(var(--success)/.12); color: hsl(var(--success)); border-color: hsl(var(--success)/.3); }
.req-chip svg { width: .75rem; height: .75rem; }

.field-error { font-size: .75rem; color: hsl(var(--destructive)); margin-top: .25rem; display: flex; gap: .3rem; align-items: center; }
.field-error svg { width: .8rem; height: .8rem; }
.input.error { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive)/.15); }

.divider { height: 1px; background: hsl(var(--border)/.6); margin: 1rem 0; }

/* ============================ PHASE 3 — Sadad / Winners / Contact / FAQ / Terms ============================ */

/* Sadad brand badge & method tile */
.sadad-tile {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; border-radius: 1.1rem;
  border: 2px solid hsl(var(--primary)); background: hsl(var(--primary)/.05);
  position: relative; overflow: hidden;
}
.sadad-tile::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, hsl(var(--primary)/.08), transparent 60%);
  pointer-events:none;
}
.sadad-logo {
  width: 3.25rem; height: 3.25rem; border-radius: .85rem; flex-shrink: 0;
  background: linear-gradient(135deg, #00A859, #00824a); color: #fff;
  display: grid; place-items: center; font-weight: 900;
  font-family: "IBM Plex Mono", system-ui, sans-serif;
  letter-spacing: .02em; font-size: .82rem;
  box-shadow: 0 8px 22px -8px rgba(0,168,89,.6);
  position: relative;
}
.sadad-logo span { line-height: 1; }
.sadad-only-banner {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1rem; border-radius: 1rem;
  background: linear-gradient(135deg, hsl(var(--primary)/.08), hsl(var(--primary)/.02));
  border: 1px dashed hsl(var(--primary)/.4);
  font-size: .85rem; line-height: 1.65;
}
.sadad-only-banner .ic {
  width: 1.75rem; height: 1.75rem; border-radius: .65rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  display: grid; place-items: center; flex-shrink: 0;
}
.sadad-only-banner .ic svg { width: 1rem; height: 1rem; }

/* Copy-able SADAD value */
.sadad-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid hsl(var(--border)); border-radius: .85rem;
  background: hsl(var(--card));
}
.sadad-row + .sadad-row { margin-top: .5rem; }
.sadad-row .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); font-weight: 700; }
.sadad-row .val { font-family: "IBM Plex Mono", monospace; font-weight: 800; font-size: 1.05rem; color: hsl(var(--primary)); }
.sadad-row .copy-btn {
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground));
  border-radius: .65rem; padding: .35rem .65rem; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; transition: all .2s;
}
.sadad-row .copy-btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.sadad-row .copy-btn svg { width: .9rem; height: .9rem; }

/* Numbered step list */
.step-list { counter-reset: step; display: flex; flex-direction: column; gap: .75rem; }
.step-list li {
  position: relative; padding-inline-start: 2.5rem;
  padding-block: .35rem; font-size: .9rem; line-height: 1.65;
  color: hsl(var(--foreground)/.9);
}
.step-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: .2rem;
  width: 1.85rem; height: 1.85rem; border-radius: 9999px;
  background: var(--gradient-hero); color: hsl(var(--primary-foreground));
  display: grid; place-items: center; font-weight: 800; font-size: .8rem;
  box-shadow: var(--shadow-elegant);
}

/* Winners card */
.winner-card {
  position: relative; overflow: hidden; border-radius: 1.25rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--glass-bg)/var(--glass-alpha));
  backdrop-filter: blur(14px); transition: all .3s var(--transition-smooth);
}
.winner-card:hover { transform: translateY(-3px); border-color: hsl(var(--primary)/.4); box-shadow: var(--shadow-card-hover); }
.winner-card .img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: hsl(var(--secondary)); }
.winner-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.winner-card:hover .img-wrap img { transform: scale(1.05); }
.winner-card .trophy-badge {
  position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #422006;
  padding: .35rem .65rem; border-radius: 9999px; font-size: .7rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: .3rem; box-shadow: 0 8px 22px -8px rgba(245,158,11,.7);
}
.winner-card .trophy-badge svg { width: .85rem; height: .85rem; }
.winner-card .round-badge {
  position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem;
  background: hsl(var(--card)/.85); backdrop-filter: blur(8px);
  padding: .25rem .55rem; border-radius: .6rem; font-size: .68rem; font-weight: 700;
  border: 1px solid hsl(var(--border));
}
.winner-card .price-strip {
  position: absolute; inset-inline: .75rem; inset-block-end: .75rem;
  background: var(--gradient-bid); color: hsl(var(--bid-foreground));
  padding: .5rem .85rem; border-radius: .85rem;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; box-shadow: var(--shadow-bid); font-size: .9rem;
}

/* FAQ category pills */
.cat-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border-radius: 9999px;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
  font-size: .82rem; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.cat-pill:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.cat-pill.active {
  background: var(--gradient-hero); color: hsl(var(--primary-foreground));
  border-color: transparent; box-shadow: var(--shadow-elegant);
}
.cat-pill svg { width: .9rem; height: .9rem; }

.cat-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Search bar */
.search-bar {
  position: relative; display: flex; align-items: center;
}
.search-bar input {
  width: 100%; padding: .85rem 1rem; padding-inline-start: 2.75rem;
  border-radius: 1rem; border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); font-size: .9rem; transition: all .2s;
}
.search-bar input:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; border-color: hsl(var(--primary)); }
.search-bar .ic {
  position: absolute; inset-inline-start: .85rem;
  width: 1.1rem; height: 1.1rem; color: hsl(var(--muted-foreground)); pointer-events: none;
}
.search-bar .ic svg { width: 100%; height: 100%; }

/* Terms TOC sticky */
.toc-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; border-radius: .65rem;
  font-size: .85rem; color: hsl(var(--muted-foreground)); text-decoration: none;
  border: 1px solid transparent; transition: all .2s;
}
.toc-link:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.toc-link.active { background: hsl(var(--primary)/.1); color: hsl(var(--primary)); border-color: hsl(var(--primary)/.25); font-weight: 700; }
.toc-link .num {
  width: 1.5rem; height: 1.5rem; border-radius: .45rem;
  background: hsl(var(--muted)); color: hsl(var(--foreground));
  display: grid; place-items: center; font-weight: 800; font-size: .7rem; flex-shrink: 0;
}
.toc-link.active .num { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.terms-section {
  scroll-margin-top: 6rem;
  padding: 1.5rem; border-radius: 1.25rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  margin-bottom: 1.25rem;
}
.terms-section h2 {
  font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .65rem;
}
.terms-section h2 .num {
  width: 2rem; height: 2rem; border-radius: .65rem; background: var(--gradient-hero);
  color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-size: .85rem; box-shadow: var(--shadow-elegant);
}
.terms-section ol { padding-inline-start: 1.25rem; }
.terms-section ol li { padding: .55rem 0; font-size: .9rem; line-height: 1.8; color: hsl(var(--foreground)/.9); }
.terms-section ol li.highlight {
  color: hsl(var(--foreground)); font-weight: 600;
  border-inline-start: 3px solid hsl(var(--bid));
  background: hsl(var(--bid)/.06); border-radius: .5rem;
  padding-inline-start: .75rem; margin: .35rem 0;
}

/* Contact info card */
.contact-info-card {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem; border-radius: 1rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  transition: all .25s;
}
.contact-info-card:hover { border-color: hsl(var(--primary)/.4); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.contact-info-card .ic {
  width: 2.5rem; height: 2.5rem; border-radius: .85rem; flex-shrink: 0;
  background: hsl(var(--primary)/.12); color: hsl(var(--primary));
  display: grid; place-items: center;
}
.contact-info-card .ic svg { width: 1.1rem; height: 1.1rem; }
.contact-info-card .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); font-weight: 700; }
.contact-info-card .val { font-weight: 700; font-size: .9rem; margin-top: .15rem; line-height: 1.5; }
.contact-info-card a.val { color: hsl(var(--primary)); }

/* Map placeholder */
.map-placeholder {
  position: relative; aspect-ratio: 16/9; border-radius: 1.25rem; overflow: hidden;
  border: 1px solid hsl(var(--border));
  background:
    linear-gradient(135deg, hsl(var(--primary)/.08), hsl(var(--accent)/.4)),
    repeating-linear-gradient(0deg, hsl(var(--border)/.3) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, hsl(var(--border)/.3) 0 1px, transparent 1px 40px);
  display: grid; place-items: center;
}
.map-placeholder .pin {
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: var(--gradient-hero); color: hsl(var(--primary-foreground));
  display: grid; place-items: center; box-shadow: var(--shadow-glow);
  animation: pulse-soft 2.2s ease-in-out infinite;
}
.map-placeholder .pin svg { width: 1.5rem; height: 1.5rem; }

/* Textarea matching input */
.textarea {
  width: 100%; min-height: 7rem; padding: .75rem 1rem;
  border-radius: .85rem; border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); font: inherit; resize: vertical;
  transition: all .2s;
}
.textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; border-color: hsl(var(--primary)); }
.textarea.error { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive)/.15); }

/* Print helpers */
@media print {
  [data-header], [data-footer], .no-print { display: none !important; }
  body { background: #fff !important; }
}

/* Fail icon halo */
.fail-halo {
  width: 5.5rem; height: 5.5rem; border-radius: 9999px;
  background: hsl(var(--destructive)/.15); color: hsl(var(--destructive));
  display: grid; place-items: center; margin: 0 auto 1rem;
  position: relative;
}
.fail-halo svg { width: 2.5rem; height: 2.5rem; }
.fail-halo::before {
  content:""; position:absolute; inset:-6px; border-radius:9999px;
  border: 2px solid hsl(var(--destructive)/.3);
  animation: pulse-soft 2s ease-in-out infinite;
}

/* ============================================================
   Announcements (general site-wide messages)
   ============================================================ */
.announcements-stack { display: flex; flex-direction: column; gap: .5rem; }
.announcement-bar {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  font-size: .92rem;
  overflow: hidden;
  animation: fade-in .5s var(--transition-smooth) both;
}
.announcement-bar .ann-icon {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
  border-radius: .75rem; display: grid; place-items: center;
  background: hsl(var(--primary)/.12); color: hsl(var(--primary));
}
.announcement-bar .ann-icon svg { width: 1.1rem; height: 1.1rem; }
.announcement-bar .ann-body { flex: 1 1 auto; min-width: 0; }
.announcement-bar .ann-title { font-weight: 700; line-height: 1.3; }
.announcement-bar .ann-text  { color: hsl(var(--muted-foreground)); font-size: .85rem; margin-top: .1rem; }
.announcement-bar .ann-cta {
  flex: 0 0 auto; font-size: .82rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 9999px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  text-decoration: none; transition: transform .2s;
}
.announcement-bar .ann-cta:hover { transform: translateY(-1px); }
.announcement-bar .ann-close {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem;
  border-radius: 9999px; border: 0; background: transparent;
  color: hsl(var(--muted-foreground)); cursor: pointer;
  display: grid; place-items: center;
}
.announcement-bar .ann-close:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.announcement-bar .ann-close svg { width: 1rem; height: 1rem; }
.announcement-bar::before {
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0;
  width: 4px; background: hsl(var(--primary));
}
.announcement-bar.info    { background: linear-gradient(90deg, hsl(var(--primary)/.08), hsl(var(--card))); }
.announcement-bar.info::before { background: hsl(var(--primary)); }
.announcement-bar.success { background: linear-gradient(90deg, hsl(142 70% 45% / .10), hsl(var(--card))); }
.announcement-bar.success::before { background: hsl(142 70% 45%); }
.announcement-bar.success .ann-icon { background: hsl(142 70% 45% / .15); color: hsl(142 70% 35%); }
.announcement-bar.warning { background: linear-gradient(90deg, hsl(38 95% 55% / .12), hsl(var(--card))); }
.announcement-bar.warning::before { background: hsl(38 95% 55%); }
.announcement-bar.warning .ann-icon { background: hsl(38 95% 55% / .18); color: hsl(28 90% 40%); }
.announcement-bar.closed  { background: linear-gradient(90deg, hsl(var(--destructive)/.10), hsl(var(--card))); }
.announcement-bar.closed::before { background: hsl(var(--destructive)); }
.announcement-bar.closed .ann-icon { background: hsl(var(--destructive)/.15); color: hsl(var(--destructive)); }
.announcement-bar.holiday {
  background:
    linear-gradient(90deg, hsl(var(--bid)/.12), hsl(var(--primary)/.10), hsl(var(--card)));
  border-color: hsl(var(--bid)/.35);
}
.announcement-bar.holiday::before { background: var(--gradient-bid); }
.announcement-bar.holiday .ann-icon {
  background: var(--gradient-bid); color: hsl(var(--bid-foreground));
  box-shadow: var(--shadow-bid);
}

/* ============================================================
   Rating widgets
   ============================================================ */
.rating-stars { display: inline-flex; gap: .35rem; direction: ltr; }
.rating-star {
  background: transparent; border: 0; cursor: pointer;
  padding: .15rem; color: hsl(var(--muted-foreground)/.5);
  transition: transform .15s, color .15s;
}
.rating-star svg { width: 2.25rem; height: 2.25rem; fill: currentColor; }
.rating-star:hover { transform: scale(1.1); }
.rating-star.is-active { color: hsl(45 95% 55%); filter: drop-shadow(0 4px 12px hsl(45 95% 55% / .45)); }
.rating-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .9rem; border-radius: 9999px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  font-size: .85rem; cursor: pointer; transition: all .2s;
}
.rating-chip:hover { border-color: hsl(var(--primary)/.4); }
.rating-chip.is-active {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* ============================================================
   Error page
   ============================================================ */
.error-stage {
  min-height: 70vh;
  display: grid; place-items: center;
  padding: 4rem 1rem;
  position: relative; overflow: hidden;
}
.error-code {
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 900; line-height: 1;
  background-image: linear-gradient(120deg, hsl(var(--bid)), hsl(var(--primary)) 60%, hsl(var(--bid-glow)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 30px hsl(var(--primary)/.35));
  letter-spacing: -.04em;
}
.error-orb {
  position: absolute; pointer-events: none; border-radius: 9999px;
  filter: blur(80px); opacity: .35;
}


/* ══════════════════════════════════════
   Auction Folder — Additional Components
   ══════════════════════════════════════ */
.profile-hero { background:var(--gradient-hero);padding:2rem 0;position:relative;overflow:hidden; }
.profile-hero::before { content:'';position:absolute;inset:0;background:hsl(var(--primary)/.06);pointer-events:none; }
.profile-hero .container { position:relative; }
.ph-icon { width:3rem;height:3rem;border-radius:1rem;background:hsl(var(--primary-foreground)/.15);color:hsl(var(--primary-foreground));display:grid;place-items:center;flex-shrink:0; }
.input-icon-wrap { position:relative;display:flex;align-items:center; }
.input.has-leading-icon  { padding-inline-start:2.5rem !important; }
.input.has-trailing-icon { padding-inline-end:2.5rem !important; }
.icon-leading,.icon-trailing { position:absolute;top:50%;transform:translateY(-50%);color:hsl(var(--muted-foreground));display:grid;place-items:center; }
.icon-leading  { inset-inline-start:.75rem;pointer-events:none; }
.icon-trailing { inset-inline-end:.75rem;pointer-events:auto;cursor:pointer;background:transparent;border:0;color:hsl(var(--muted-foreground));transition:color .15s; }
.icon-trailing:hover { color:hsl(var(--foreground)); }
.field-error { font-size:.78rem;color:hsl(var(--destructive));margin-top:.25rem;display:block; }
.label { display:block;font-size:.78rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.35rem; }
.cat-pill { all:unset;cursor:pointer;display:grid;place-items:center;padding:.4rem .5rem;border-radius:.65rem;border:1px solid hsl(var(--border));font-size:.78rem;font-weight:700;background:hsl(var(--card));transition:all .15s; }
.cat-pill:hover { border-color:hsl(var(--primary));background:hsl(var(--primary)/.06);color:hsl(var(--primary)); }
.badge-success { background:hsl(var(--success)/.15);color:hsl(var(--success));border-color:transparent; }
.sticky-top-24 { position:sticky;top:6rem; }
.float-ic { position:absolute;pointer-events:none;color:hsl(var(--primary)/.25); }
.animate-scale-in { animation:scale-in .45s var(--transition-smooth) both; }
@keyframes scale-in { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
.flip-x { display:inline-block;transform:scaleX(-1); }
[dir=ltr] .flip-x { transform:none; }
.share-btn { all:unset;cursor:pointer;width:2rem;height:2rem;border-radius:.5rem;border:1px solid hsl(var(--border));display:grid;place-items:center;color:hsl(var(--muted-foreground));transition:all .15s; }
.share-btn:hover { border-color:hsl(var(--primary));color:hsl(var(--primary)); }
.thumb-btn { border-radius:.75rem;overflow:hidden;border:2px solid transparent;cursor:pointer;aspect-ratio:16/10;background:hsl(var(--muted));transition:border-color .2s; }
.thumb-btn.active { border-color:hsl(var(--primary)); }
.thumb-btn img { width:100%;height:100%;object-fit:cover;display:block; }
.stat-card { display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-radius:1.25rem;border:1px solid hsl(var(--border));background:hsl(var(--card));transition:box-shadow .2s; }
.stat-card.bid   { border-color:hsl(var(--bid)/.25);background:hsl(var(--bid)/.04); }
.stat-card.success { border-color:hsl(var(--success)/.25);background:hsl(var(--success)/.04); }
.st-ic { width:2.5rem;height:2.5rem;border-radius:.75rem;background:hsl(var(--primary)/.1);color:hsl(var(--primary));display:grid;place-items:center;flex-shrink:0; }
.stat-card.bid   .st-ic { background:hsl(var(--bid)/.1);color:hsl(var(--bid)); }
.stat-card.success .st-ic { background:hsl(var(--success)/.1);color:hsl(var(--success)); }
.st-lbl { font-size:.7rem;color:hsl(var(--muted-foreground));font-weight:600;margin-bottom:.15rem; }
.st-val { font-size:1.25rem;font-weight:800;line-height:1.1; }
.stepper { display:flex;align-items:center;gap:.5rem;border:1px solid hsl(var(--border));border-radius:.85rem;overflow:hidden;background:hsl(var(--background)); }
.step-btn { all:unset;cursor:pointer;width:2.5rem;height:2.75rem;display:grid;place-items:center;color:hsl(var(--primary));flex-shrink:0;transition:background .15s; }
.step-btn:hover { background:hsl(var(--primary)/.08); }
.step-input { flex:1;border:0 !important;text-align:center;font-weight:800;font-size:1.1rem;background:transparent !important;box-shadow:none !important;min-width:0; }
.dropdown-sep { height:1px;background:hsl(var(--border));margin:.25rem 0; }
[dir=rtl] .icon-flip { transform:scaleX(-1); }
@media print { .no-print { display:none!important; } }