/*
Theme Name: TechScope
Description: Modern technology news and reviews theme with clean design, responsive layout and Tailwind CSS styling
Author: SmartObzor Team
Version: 1.0.0
Text Domain: techscope
*/

/* Hover card */
.card-hover {
  transition: all 300ms ease-out;
  border-radius: 12px !important;
  overflow: hidden;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: none !important;
}

/* ========== KATEN STYLE CARDS - CLEAN LAYOUT ========== */
/* New Katen-style cards without white background boxes */
.card-hover-katen {
  transition: all 300ms ease-out;
  /* No background - let the image be the main element */
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
  /* Add subtle shadow for definition */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-hover-katen:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Sidebar cards Katen style */
.sidebar-card-katen {
  transition: all 300ms ease-out;
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-card-katen:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Ensure text content has proper background for readability */
.card-hover-katen .bg-white {
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: none;
}

/* Force white background for text content in Katen cards */
.card-hover-katen > div:last-child,
.card-hover-katen .p-3,
.card-hover-katen .p-4,
.card-hover-katen div[class*="p-3"],
.card-hover-katen div[class*="p-4"] {
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: none;
}

/* Ensure consistent spacing and typography in Katen cards */
.card-hover-katen h4 {
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.card-hover-katen .text-xs {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ========== KATEN STYLE SECTION BORDERS - EXACT MATCH ========== */
/* Replicate exact Katen theme approach: thin borders with padding-30 */
.katen-section-container {
  /* Exact Katen theme styling */
  padding: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.katen-section-container:hover {
  border-color: #d4d4d4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Legacy class for backward compatibility */
.section-border-katen {
  padding: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 30px;
}

/* Section dividers - simplified Katen theme style */
.katen-section-header {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

.katen-section-header h3 {
  font-weight: 700;
  color: #2c2c2c;
  font-size: 1.375rem;
  margin: 0;
  padding: 0;
}

/* Legacy support */
.section-divider-katen {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

.section-divider-katen h3 {
  font-weight: 700;
  color: #2c2c2c;
  font-size: 1.375rem;
  margin: 0 0 12px 0;
}

/* Ensure grid layouts work well within Katen containers */
.katen-section-container .grid {
  gap: 1rem;
}

.katen-section-container .grid > * {
  min-width: 0;
}

/* Override existing section background styles for clean Katen look */
.bg-gray-50 {
  background: rgba(248, 250, 252, 0.8) !important;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
}

/* Responsive adjustments for Katen containers */
@media (max-width: 768px) {
  .katen-section-container {
    padding: 20px;
    margin-bottom: 20px;
  }

  .katen-section-header h3 {
    font-size: 1.25rem;
  }
}

/* ========== RESPONSIVE REFINEMENTS FOR KATEN STYLE ========== */
/* Ensure proper spacing and minimal look across devices */
@media (max-width: 768px) {
  .section-border-katen {
    padding: 16px;
    margin-bottom: 16px;
  }

  .section-divider-katen {
    padding-bottom: 12px;
    margin-bottom: 20px;
  }

  .card-hover-katen,
  .sidebar-card-katen {
    border-radius: 8px;
  }
}

/* Remove shadow conflicts - handled in main Katen card styles */
/* ========== END RESPONSIVE REFINEMENTS ========== */

/* ========== END KATEN STYLE SECTION BORDERS ========== */

/* ========== END KATEN STYLE CARDS ========== */

/* Glass effects */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect-dark {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Background helpers */
.tech-img {
  background-size: cover;
  background-position: center;
  position: relative;
}
.sidebar-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

/* Badges */
.tech-badge {
  background: linear-gradient(45deg, #8b5cf6, #3b82f6);
}

/* Rating bar */
.rating-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.rating-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--rating, 0%);
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 1s ease-out;
}

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

/* Fade-in for initial reveal */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Global layout tweaks */
* { box-sizing: border-box; }

/* Desktop: Allow normal scrolling */
@media (min-width: 641px) {
  html, body {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    position: relative;
    height: auto;
  }
}

/* Mobile: Allow horizontal scroll with auto */
@media (max-width: 640px) {
  html {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }

  body {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;
  }
}
.max-w-7xl { max-width: 100vw; padding-left: clamp(8px, 2vw, 16px); padding-right: clamp(8px, 2vw, 16px); }

/* Force all containers to respect viewport width */
.container, .max-w-full { max-width: 100vw !important; overflow-x: hidden; }
nav, header, footer, main, section, div { max-width: 100vw; }

/* Mobile-specific fixes */
@media (max-width: 640px) {
  /* SURGICAL FIX FOR 16PX OVERFLOW */
  html { max-width: 100vw !important; width: 100vw !important; }
  body { max-width: calc(100vw - 1px) !important; width: calc(100vw - 1px) !important; }

  /* Aggressive overflow prevention */
  * { max-width: calc(100vw - 2px) !important; }

  /* Force all containers to respect mobile viewport */
  body, html { width: 100vw !important; overflow-x: hidden !important; }
  nav, header, main, section, footer, div { max-width: 100vw !important; }

  /* Navigation specific mobile fixes */
  .sticky { width: 100vw !important; left: 0 !important; right: 0 !important; }

  .grid { min-width: 0; overflow: hidden; }
  .grid > * { min-width: 0; max-width: 100%; }

  .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
    margin-left: 0;
    margin-right: 0;
  }

  .w-full { max-width: 100% !important; width: 100% !important; }

  .h-32, .h-36, .h-44 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero slider and images */
  .hero-slider, .tech-img {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* Text overflow fixes */
  .text-lg, .text-xl, .text-2xl, .text-3xl {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
  }

  /* Grid constraints */
  .grid-cols-2 > * {
    min-width: 0;
    max-width: calc(50% - 0.375rem);
    overflow: hidden;
  }

  .grid-cols-1 > * {
    max-width: 100%;
    overflow: hidden;
  }

  /* Container fixes */
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
    max-width: 100vw;
  }

  /* Navigation specific fixes */
  nav, .sticky {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Flex layout fixes */
  .flex {
    flex-wrap: wrap;
    overflow: hidden;
  }

  /* Gap constraints */
  .gap-4, .gap-6, .gap-8 {
    gap: 0.75rem;
  }

  /* Padding constraints */
  .px-4, .px-6, .px-8 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Additional mobile overflow fixes */
  .rounded-lg, .rounded-xl {
    overflow: hidden;
  }

  /* Logo and text constraints */
  .text-blue-600, .font-bold {
    word-break: break-word;
    max-width: 100%;
  }

  /* Ensure material icons don't cause overflow */
  .material-icons {
    flex-shrink: 0;
    max-width: 24px;
  }

  /* Force button elements to respect container */
  button, input, select {
    max-width: calc(100% - 4px);
    box-sizing: border-box;
  }

  /* TARGETED 16PX OVERFLOW FIXES */
  /* Navigation container specific fix */
  nav .max-w-full, nav .max-w-7xl {
    max-width: calc(100vw - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  /* Rounded elements that might extend */
  .rounded-lg, .rounded-xl, .rounded-2xl {
    max-width: calc(100% - 2px) !important;
  }

  /* Grid and flex containers */
  .grid, .flex {
    max-width: calc(100vw - 4px) !important;
  }

  /* Padding compensation */
  .px-2, .px-3, .px-4 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* SIMPLE OVERFLOW SOLUTION - MOBILE RESPONSIVE FIXES */
@media (max-width: 640px) {
  /* Prevent problematic elements from extending beyond viewport */
  .max-w-7xl, .max-w-full, .mx-auto {
    max-width: calc(100vw - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  /* Grid and flex containment */
  .grid, .flex {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Card hover effects containment */
  .card-hover {
    max-width: 100% !important;
  }

  /* Material icons sizing */
  .material-icons {
    flex-shrink: 0;
    max-width: 24px;
  }
}

/* Hero slider */
.hero-slider { position: relative; overflow: hidden; }
.hero-slide {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; }
/* Minimalistic Navigation - Superdesign Style - Fixed Positioning */
.hero-slider .hero-nav {
  position: absolute !important;
  top: 50% !important;
  right: 20px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 999 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hero-slider .hero-nav-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #f97316 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
}
.hero-slider .hero-nav-btn:hover {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%) !important;
  color: white !important;
  transform: translateY(-50%) scale(1.15) !important;
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.5), 0 4px 6px -2px rgba(249, 115, 22, 0.3) !important;
}
.hero-slider .hero-nav-btn svg {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

/* Section reveal */
.section-animate {
  opacity: 0; transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.section-animate.visible {
  opacity: 1; transform: translateY(0);
}

/* Stagger helpers */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* UNIFIED POST CARD STYLING - Inspired by Superdesign Principles */

/* ========== KATEN STYLE OVERRIDES ========== */
/* Override base card styles for Katen design - Remove white backgrounds from card containers */
.card-hover-katen,
.sidebar-card-katen {
  background: transparent !important;
  border: none !important;
}

/* Prevent other CSS from overriding Katen card styles */
.card-hover-katen.bg-white,
.sidebar-card-katen.bg-white,
.card-hover-katen[class*="bg-white"],
.sidebar-card-katen[class*="bg-white"] {
  background: transparent !important;
}

/* ========== REMOVE WHITE BACKGROUNDS FROM HERO & SECTIONS ========== */
/* Hero slider should not have white background wrapper */
.hero-slider .card-hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Remove white backgrounds from section containers (keep only for text content) */
.section-animate:not(.katen-section-container) {
  background: transparent !important;
}

/* Trending widget clean styling */
.trending-widget-katen {
  background: transparent !important;
  border: none !important;
}

/* Ensure carousel/slider sections are transparent */
.epcl-carousel.section {
  background: transparent !important;
}

/* Remove any remaining white box backgrounds from non-text areas */
.section-animate .bg-white:not([class*="p-"]) {
  background: transparent !important;
}

/* ========== FALLBACK IMAGE SYSTEM ========== */
/* CSS fallback only for elements without background images */
.tech-img:not([style*="background-image"]) {
  background-image: url('./27002.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Default styling for tech-img elements */
.tech-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fallback styling for broken images */
.tech-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* Show gradient background for broken images */
.tech-img.image-error::before {
  opacity: 1;
}
/* ========== END FALLBACK IMAGE SYSTEM ========== */

/* ========== END BACKGROUND REMOVAL ========== */

/* Base card styles - applies to all post cards (EXCEPT Katen style) */
.card-hover:not(.card-hover-katen),
.trending-card,
div[class*="bg-white rounded"]:not(.card-hover-katen):not(.sidebar-card-katen),
div[class*="shadow"]:not(.card-hover-katen):not(.sidebar-card-katen) {
  /* Pure white background */
  background: #FFFFFF;

  /* Consistent rounded corners */
  border-radius: 12px !important;
  overflow: hidden !important;

  /* Clean style - no shadows */
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06);

  /* Smooth transitions */
  transition: all 0.3s ease;

  /* Performance optimization */
  will-change: transform;
  backface-visibility: hidden;
}

/* Enhanced hover states */
.card-hover:hover,
.trending-card:hover,
div[class*="bg-white rounded"]:hover {
  /* Subtle lift effect - reduced from -4px to -2px */
  transform: translateY(-2px);

  /* No shadows - clean style */
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.1);

  /* Keep white background on hover */
  background: #FFFFFF;
}

/* Image containers within cards - full width and height */
.tech-img,
.trending-card-image,
div[class*="h-32"],
div[class*="h-36"],
div[class*="h-40"],
div[class*="h-44"],
div[class*="h-48"] {
  /* Rounded top corners only */
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;

  /* Ensure proper overflow handling */
  overflow: hidden;

  /* Subtle background for loading states */
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);

  /* Cover full width */
  width: 100% !important;

  /* Background image should cover full area */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* Smooth image transitions */
  transition: all 0.3s ease-out;
}

/* Image hover effects - subtle zoom */
.card-hover:hover .tech-img,
.trending-card:hover .trending-card-image,
.card-hover:hover img,
.trending-card:hover img {
  transform: scale(1.02);
}

/* Special styling for trending cards in slider */
.trending-card {
  /* Clean style - no shadows */
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px !important;
  overflow: hidden !important;
}

.trending-card:hover {
  /* Clean hover effect - reduced movement */
  transform: translateY(-2px);
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Editor's choice cards */
div[class*="editor"] .card-hover,
div[class*="col-span-2"] .card-hover,
.lg\:col-span-2 a.card-hover,
.lg\:col-span-2 a[class*="rounded-xl"] {
  /* Pure white background for editor's choice cards */
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Small editor's choice cards hover */
.lg\:col-span-2 a.card-hover:hover,
.lg\:col-span-2 a[class*="rounded-xl"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Force tech-img inside small cards to have rounded corners */
.lg\:col-span-2 .tech-img {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Ensure all child elements respect rounded corners */
.lg\:col-span-2 a.card-hover > div {
  border-radius: 12px !important;
}

.lg\:col-span-2 a.card-hover .absolute.inset-0 {
  border-radius: 12px !important;
}

/* Scale 102 utility class */
.group-hover\:scale-102 {
  transition: transform 0.3s ease;
}

.group:hover .group-hover\:scale-102 {
  transform: scale(1.02);
}

/* Small cards grid container fix */
.lg\:col-span-2 .grid {
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .lg\:col-span-2 .grid {
    gap: 0.75rem;
  }
}

/* Ensure small cards have consistent height */
.lg\:col-span-2 .grid > a {
  min-height: 200px;
  border-radius: 12px !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .lg\:col-span-2 .grid > a {
    min-height: 220px;
  }
}

/* Mobile fixes for small cards */
@media (max-width: 640px) {
  /* Fix main grid container on mobile - single column layout */
  .grid.grid-cols-1.lg\:grid-cols-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    min-height: auto !important;
  }

  /* Make featured post full width on mobile */
  .lg\:col-span-3 {
    width: 100% !important;
  }

  /* Make small cards grid full width and single row on mobile */
  .lg\:col-span-2 {
    width: 100% !important;
  }

  .lg\:col-span-2 .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    min-height: auto !important;
  }

  .lg\:col-span-2 .grid > a {
    border-radius: 12px !important;
    min-height: 180px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  /* Fix text on mobile small cards */
  .lg\:col-span-2 .grid > a h4 {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .lg\:col-span-2 .grid > a .absolute.bottom-0 {
    padding: 0.75rem !important;
  }

  .lg\:col-span-2 .grid > a .text-xs {
    font-size: 0.75rem !important;
  }

  /* Fix date badge on mobile */
  .lg\:col-span-2 .grid > a .absolute.top-2 {
    top: 0.5rem !important;
    left: 0.5rem !important;
  }

  .lg\:col-span-2 .grid > a .absolute.top-2 > div {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .lg\:col-span-2 .grid > a .material-icons {
    font-size: 0.875rem !important;
  }

  /* Force rounded corners on all elements */
  .lg\:col-span-2 .grid > a,
  .lg\:col-span-2 .grid > a > div,
  .lg\:col-span-2 .grid > a .tech-img {
    border-radius: 12px !important;
  }

  /* Ensure proper clipping */
  .lg\:col-span-2 .grid > a > div:first-child {
    border-radius: 12px !important;
  }
}

/* Hot stories cards */
.hot-badge {
  /* Enhanced hot badge styling */
  background: linear-gradient(45deg, #EF4444, #DC2626);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .card-hover,
  .trending-card,
  div[class*="bg-white rounded"] {
    /* Consistent border radius on mobile */
    border-radius: 12px !important;
    overflow: hidden !important;

    /* No shadows on mobile */
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .card-hover:hover,
  .trending-card:hover {
    /* Minimal hover on mobile */
    transform: translateY(-1px) !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
}

/* Card content padding consistency */
.card-hover .p-3,
.card-hover .p-4,
.trending-card .p-4,
.trending-card .p-6 {
  /* Ensure proper spacing for card content */
  padding: 1rem !important;
}

/* Loading state enhancement */
.skeleton {
  /* Clean skeleton background */
  background: linear-gradient(90deg, #F8FAFC 25%, #E2E8F0 50%, #F8FAFC 75%);
  border-radius: 12px;
}

/* SIDEBAR CARDS - MAXIMUM SPECIFICITY TO OVERRIDE TAILWIND */
div.lg\:col-span-1 div.bg-white.rounded-xl.overflow-hidden.transition-all.duration-300.sidebar-card,
.sidebar-card.bg-white.rounded-xl.overflow-hidden.transition-all.duration-300 {
  /* Force override Tailwind with maximum specificity */
  background-color: #FFFFFF !important;
  border-radius: 20px !important;
  border: none !important;

  /* PROVEN working shadow values */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18) !important,
    0 8px 24px rgba(0, 0, 0, 0.12) !important,
    0 16px 48px rgba(0, 0, 0, 0.08) !important;

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

div.lg\:col-span-1 div.bg-white.rounded-xl.sidebar-card:hover,
.sidebar-card.bg-white.rounded-xl:hover {
  /* Enhanced hover effect */
  transform: translateY(-8px) scale(1.03) !important;

  /* Enhanced hover shadows */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25) !important,
    0 16px 48px rgba(0, 0, 0, 0.18) !important,
    0 32px 96px rgba(0, 0, 0, 0.12) !important;
}

/* SIDEBAR IMAGE CONTAINERS - MAXIMUM SPECIFICITY */
div.lg\:col-span-1 div.w-full.h-\[140px\].relative.overflow-hidden.tech-img.sidebar-image,
.sidebar-image.w-full.tech-img.relative.overflow-hidden {
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}

/* Sidebar container tighter spacing */
.lg\:col-span-1 .space-y-2 > * + * {
  margin-top: 0.5rem !important;
}

/* Sidebar main container styling with superdesign principles */
.lg\:col-span-1 .bg-gradient-to-br {
  /* Smooth modern corners */
  border-radius: 20px !important;
  border: 1px solid rgba(255, 192, 203, 0.15) !important;

  /* SuperDesign container shadow - more visible */
  box-shadow:
    0 2px 8px 0px hsl(338 100% 94% / 0.18),
    0 4px 16px 0px hsl(0 0% 0% / 0.04),
    0 8px 32px 0px hsl(0 0% 0% / 0.02) !important;
}

/* ========================================= */
/* SIMPLE DIRECT TARGETING - LOAD LAST */
/* ========================================= */

.sidebar-card {
  background-color: #FFFFFF !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important, 0 8px 24px rgba(0, 0, 0, 0.12) !important, 0 16px 48px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s ease !important;
}

.sidebar-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important, 0 16px 48px rgba(0, 0, 0, 0.18) !important, 0 32px 96px rgba(0, 0, 0, 0.12) !important;
}

.sidebar-image {
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}