/* layout.css - Phase1.1: two sidebars flex layout fix */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; box-sizing:border-box; }
.header-inner, .footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.site-header{ background:#fff; border-bottom:1px solid #eee; position:relative; top:0; z-index:50; }
.site-header .logo{ font-weight:700; font-size:20px; text-decoration:none; color:#111; }

/* Use flexbox for layout */
.main-layout {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:24px 0;
  flex-wrap:nowrap;
}

/* Sidebars */
.sidebar.left,
.sidebar.right {
  flex:0 0 180px;
  max-width:180px;
  box-sizing:border-box;
}

/* Main content */
.content-area {
  flex:1;
  min-width:0;
  max-width:100%;
}

/* Collapse empty sidebars */
.sidebar:empty,
.sidebar .widget.placeholder:only-child {
  display:none;
}

/* Widgets */
.sm-post-card, .sm-card{ background:#fff; padding:14px; margin-bottom:16px; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.widget.placeholder{ background:#fafafa; padding:12px; border:1px dashed #ddd; border-radius:4px; }

/* Footer */
.site-footer{ background:#f7f7f7; padding:20px 0; margin-top:40px; border-top:1px solid #eee; }
.site-credit{ text-align:center; padding-top:12px; font-size:14px; color:#666; }

/* ===========================================
   RESPONSIVE FIX - PROPER MOBILE LAYOUT
   =========================================== */

/* Mobile layout - applies to ALL mobile screens regardless of desktop mode */
@media (max-width: 767px) {
  .main-layout {
    flex-direction: column !important;
    gap: 12px;
    padding: 16px 0;
  }
  
   .sidebar.left {
    display: none !important; /* Add this line to hide left sidebar */
  }
  .sidebar.right {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 2;
  }
  
  .content-area {
    order: 1;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ensure sidebars stack below content */
  .sidebar.left {
    order: 2;
  }
  
  .sidebar.right {
    order: 3;
  }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-layout {
    gap: 16px;
  }
  
  .sidebar.left,
  .sidebar.right {
    flex: 0 0 160px;
    max-width: 160px;
  }
}

/* Desktop layout */
@media (min-width: 1024px) {
  .main-layout {
    gap: 20px;
  }
  
  .sidebar.left,
  .sidebar.right {
    flex: 0 0 180px;
    max-width: 180px;
  }
}

/* ===========================================
   DESKTOP MODE ON MOBILE OVERRIDE - FIXED
   =========================================== */
@media (max-width: 767px) {
  .desktop-mode-on-mobile .main-layout,
  .main-layout {
    flex-direction: column !important;
    display: flex !important;
  }
  
  .desktop-mode-on-mobile .sidebar.left,
  .desktop-mode-on-mobile .sidebar.right,
  .sidebar.left,
  .sidebar.right {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .desktop-mode-on-mobile .content-area,
  .content-area {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* If sidebars are empty, hide them and expand content */
.sidebar.left:empty,
.sidebar.right:empty {
  display: none !important;
}

.sidebar.left:empty ~ .content-area,
.sidebar.right:empty ~ .content-area {
  flex: 1 1 100% !important;
}

/* ===========================================
   CARD GRID FIX - UNIFORM CARD SIZES
   =========================================== */

/* Ensure grid container uses proper grid layout */
.content-area .smartmobile-grid,
.content-area .post-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 16px !important;
  grid-template-columns: repeat(4, 1fr) !important; /* Force 4 equal columns */
}

/* Ensure all cards have identical sizing */
.content-area .smartmobile-card,
.content-area .post-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 280px !important; /* Fixed height for all cards */
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Ensure card images are consistent */
.content-area .smartmobile-card img,
.content-area .post-card img {
  width: 100% !important;
  height: 160px !important; /* Fixed image height */
  object-fit: contain !important; /* Maintain aspect ratio */
  margin-bottom: 12px !important;
  border-radius: 4px !important;
  background: #f8f9fa !important;
}

/* Ensure card titles are consistent */
.content-area .smartmobile-title,
.content-area .post-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 8px 0 4px 0 !important;
  min-height: 36px !important; /* Fixed title height */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure card prices are consistent */
.content-area .smartmobile-price,
.content-area .post-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #38761d !important;
  margin: 4px 0 0 0 !important;
  min-height: 20px !important; /* Fixed price height */
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
  .content-area .smartmobile-grid,
  .content-area .post-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columns */
  }
}

@media (max-width: 900px) {
  .content-area .smartmobile-grid,
  .content-area .post-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
  }
}

@media (max-width: 600px) {
  .content-area .smartmobile-grid,
  .content-area .post-grid {
    grid-template-columns: 1fr !important; /* 1 column */
  }
  
  .content-area .smartmobile-card,
  .content-area .post-card {
    min-height: 260px !important; /* Slightly smaller on mobile */
  }
  
  .content-area .smartmobile-card img,
  .content-area .post-card img {
    height: 140px !important;
  }
}

/* Dark mode support */
body.dark-mode{ background:#0a0a0a; color:#eaeaea; }
body.dark-mode .site-header{ background:#050505; border-bottom-color:#111; }
body.dark-mode .sm-post-card, 
body.dark-mode .sm-card,
body.dark-mode .smartmobile-card,
body.dark-mode .post-card { 
  background:#0f0f0f !important; 
  box-shadow:none !important; 
  border:1px solid #1a1a1a !important; 
}

/* Slider wrapper - SEO optimized */
.mobile-store-slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

/* Slider container */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/1;
}

/* Slider */
.slider {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    will-change: transform;
}

/* Each slide - SEO structured */
.slide {
    min-width: 100%;
    flex-shrink: 0;
    position: relative;
}

/* Image styling - Core Web Vitals optimized */
.fslider-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* Progress dots - Accessibility improved */
.progress-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.progress-dot.active {
    background-color: #4caf50;
    border-color: #4caf50;
    transform: scale(1.2);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .slider-container {
        aspect-ratio: 4/3;
    }
    
    .progress-container {
        bottom: 10px;
    }
    
    .progress-dot {
        width: 12px;
        height: 12px;
    }
 /* Hide LEFT sidebar on ALL pages when mobile */
    .sidebar,
    .left-sidebar,
    .inside-left-sidebar,
    .sidebar-left {
        display: none !important;
    }
}

/* Justify text only in Latest Posts widget excerpts */
.wp-block-latest-posts__post-excerpt {
    text-align: justify;
    text-justify: inter-word;
}

.wp-block-latest-posts__list li a {
    text-align: justify;
    display: block;
}