/* ================================================================
   Cauciucuri Theme — Design Enhancements
   Modern gradients, micro-interactions, polish
   ================================================================ */

/* ── Gradient Variables ──────────────────────────────────────── */
:root {
  --grad-accent: linear-gradient(135deg, #f5a623 0%, #ffb940 50%, #ff8a00 100%);
  --grad-primary: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 50%, #0a0a0a 100%);
  --grad-hero: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 50%, #141414 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --grad-danger: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 100%);
  --grad-info: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  --shadow-glow-accent: 0 8px 24px rgba(245,166,35,.3);
  --shadow-glow-primary: 0 8px 24px rgba(26,26,46,.25);
}

/* ── Hero section enhancements ───────────────────────────────── */
.hero-compact {
  background: var(--grad-hero) !important;
  position: relative;
  overflow: hidden;
}
.hero-compact::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245,166,35,.12) 0%, transparent 60%);
  pointer-events: none;
  animation: heroFloat 8s ease-in-out infinite;
}
.hero-compact::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 60%);
  pointer-events: none;
  animation: heroFloat 10s ease-in-out infinite reverse;
}
@keyframes heroFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,-20px) scale(1.05); }
}
.hero-compact-text h1 {
  background: linear-gradient(135deg, #fff 0%, #f5a623 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

/* ── Search box polish ───────────────────────────────────────── */
.hs-search-box {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
}
.hs-btn-search {
  background: var(--grad-accent) !important;
  box-shadow: var(--shadow-glow-accent);
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.hs-btn-search:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245,166,35,.5) !important;
}
.search-tab.active {
  background: var(--grad-accent) !important;
  box-shadow: 0 4px 12px rgba(245,166,35,.3);
}

/* ── Quick Categories ────────────────────────────────────────── */
.qc-chip {
  background: #fff;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.qc-chip:hover {
  border-color: var(--accent);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(245,166,35,.2);
}
.qc-chip i {
  transition: transform .3s;
}
.qc-chip:hover i {
  transform: rotate(-10deg) scale(1.2);
  color: var(--accent);
}
.qc-chip.qc-promo {
  background: var(--grad-accent);
  color: #fff !important;
  border-color: transparent;
  animation: qcPromoPulse 2s ease-in-out infinite;
}
@keyframes qcPromoPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(245,166,35,.3); }
  50% { box-shadow: 0 4px 20px rgba(245,166,35,.6); }
}

/* ── Product Card Enhancements ───────────────────────────────── */
.hpc {
  border: 1px solid transparent;
  transition: all .35s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.hpc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-accent);
  opacity: 0;
  transition: opacity .3s;
}
.hpc:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(245,166,35,.2);
  box-shadow: 0 16px 40px rgba(0,0,0,.15) !important;
}
.hpc:hover::before {
  opacity: 1;
}
.hpc-img-wrap {
  background: linear-gradient(135deg, #f8f9fb 0%, #eef1f7 100%) !important;
  position: relative;
  overflow: hidden;
}
.hpc-img-wrap::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.3), transparent);
  transform: rotate(45deg);
  opacity: 0;
  transition: all .6s;
}
.hpc:hover .hpc-img-wrap::after {
  opacity: 1;
  transform: rotate(45deg) translate(50%,50%);
}
.hpc-badge {
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.hpc-promo {
  background: var(--grad-danger) !important;
  animation: promoPulse 1.8s ease-in-out infinite;
}
@keyframes promoPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ── Buttons Enhancement ─────────────────────────────────────── */
.btn-cart, .add-to-cart, .pd-buy-btn {
  background: var(--grad-accent) !important;
  box-shadow: var(--shadow-glow-accent) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.btn-cart::before, .add-to-cart::before, .pd-buy-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .5s;
}
.btn-cart:hover::before, .add-to-cart:hover::before, .pd-buy-btn:hover::before {
  left: 100%;
}
.btn-cart:hover, .add-to-cart:hover, .pd-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245,166,35,.45) !important;
}

/* ── Section headings ────────────────────────────────────────── */
.section-heading, .sh-title, h2.section-title {
  position: relative;
  display: inline-block;
}
.section-heading::after, .sh-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--grad-accent);
  border-radius: 2px;
  margin-top: 8px;
}

/* ── Header polish ───────────────────────────────────────────── */
.hdr-main {
  background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(255,255,255,.94)) !important;
  backdrop-filter: blur(20px) saturate(1.8);
}
.hdr-btn {
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.hdr-btn-cart {
  background: var(--grad-accent);
  color: #fff !important;
  box-shadow: var(--shadow-glow-accent);
}
.hdr-btn-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245,166,35,.5);
}
.hdr-btn-phone:hover {
  color: var(--accent);
  transform: scale(1.05);
}
.hdr-logo img {
  transition: transform .3s;
}
.hdr-logo:hover img {
  transform: scale(1.05);
}
.hdr-search input {
  transition: all .25s;
}
.hdr-search:focus-within {
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
  border-radius: 8px;
}

/* ── Footer polish ───────────────────────────────────────────── */
.site-footer {
  background: var(--grad-primary) !important;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-accent);
}

/* ── Badges with gradients ───────────────────────────────────── */
.sezon-vara { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important; }
.sezon-iarna { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important; }
.sezon-all-season { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important; }

/* ── Page title bar (breadcrumbs) ────────────────────────────── */
.page-title-box, section[style*="background:linear-gradient"] {
  position: relative;
}

/* ── Service cards ───────────────────────────────────────────── */
.sv-card, .sv-card2 {
  transition: all .35s cubic-bezier(.4,0,.2,1) !important;
  border: 1px solid transparent;
}
.sv-card:hover, .sv-card2:hover {
  transform: translateY(-6px);
  border-color: rgba(245,166,35,.2);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* ── Testimonial cards ───────────────────────────────────────── */
.tm-card {
  transition: all .3s;
}
.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

/* ── Scroll bar styling ──────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d0d0d0, #b0b0b0);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Text selection ──────────────────────────────────────────── */
::selection {
  background: var(--accent);
  color: #fff;
}

/* ── Micro animations ────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hpc, .sv-card, .sv-card2, .qc-chip {
  animation: fadeInUp .5s ease-out backwards;
}
.hpc:nth-child(1) { animation-delay: 0.05s; }
.hpc:nth-child(2) { animation-delay: 0.1s; }
.hpc:nth-child(3) { animation-delay: 0.15s; }
.hpc:nth-child(4) { animation-delay: 0.2s; }
.hpc:nth-child(5) { animation-delay: 0.25s; }

/* ── Loading skeleton ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Improved focus states (a11y) ────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(245,166,35,.4);
  outline-offset: 2px;
}

/* ── Mobile polish ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-compact::before, .hero-compact::after { display: none; }
  .hpc:hover { transform: translateY(-3px) !important; }
}