/* ==========================================================
    cini-vimarsanam.css
    Styles for vimarsanam.php (movie reviews listing page)
    Requires: cini-common.css loaded first
    ========================================================== */

/* ========================================
    Elevated Review Cards (matches photo gallery cards)
======================================== */
.elevated-card {
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.10), 0 10px 24px rgba(0, 0, 0, 0.16);
   border-radius: 18px !important;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   background: #fff;
   overflow: hidden;
}

.elevated-card:hover {
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18), 0 18px 38px rgba(0, 0, 0, 0.24);
   transform: translateY(-4px);
   z-index: 2;
}

/* Apply hover lift only on devices that actually support hover */
@media (hover: none),
(pointer: coarse) {
   .elevated-card:hover {
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.10), 0 10px 24px rgba(0, 0, 0, 0.16);
      transform: none;
      z-index: auto;
   }
}

.elevated-card .rounded-img {
   border-radius: 18px !important;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.elevated-card:hover .rounded-img {
   transform: scale(1.03);
}

/* Top ad block spacing */
.vimarsanam-top-ad {
   margin-bottom: 12px;
}

/* ========================================
   Tablet (768px - 1024px): Full width sidebar
======================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
   .mvp-main-blog-wrap>.mvp-main-box {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 12px !important;
      box-sizing: border-box;
   }

   .mvp-main-blog-out,
   .mvp-main-blog-cont {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      margin: 0 !important;
      box-sizing: border-box;
   }

   .mvp-main-blog-in,
   .mvp-main-blog-body {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      margin: 0 !important;
      box-sizing: border-box;
   }

   #mvp-side-wrap {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
      display: block !important;
      margin-top: 24px !important;
   }

   .vimarsanam-top-ad {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 0 12px 0 !important;
      box-sizing: border-box;
   }

   .vimarsanam-top-ad .mvp-main-box,
   .vimarsanam-top-ad .mvp-widget-ad {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
   }
}


/* ========================================
   Mobile: force 2 cards per row
======================================== */
@media (max-width: 767px) {

   /* Reduce sorting dropdown size on mobile */
   .woocommerce-ordering {
      width: 100%;
      max-width: 200px;
      margin: 10px 0 15px 0;
   }

   .woocommerce-ordering .orderby {
      width: 75%;
      padding: 6px 8px;
      font-size: 12px;
      height: auto;
   }

   .vimarsanam-top-ad {
      padding: 0 10px;
      box-sizing: border-box;
      margin-right: 30px;
   }

   .vimarsanam-top-ad #mvp_ad_widget-9,
   .vimarsanam-top-ad .mvp-main-box,
   .vimarsanam-top-ad .mvp-widget-ad,
   .vimarsanam-top-ad a {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
      display: block;
   }


   #woo-content ul.products.columns-3 {
      margin-left: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-left: 20px;
   }

   #woo-content ul.products.columns-3>li.product {
      width: calc(45% - 6px) !important;
      margin-top: 5px !important;
      margin-right: 10px !important;
      clear: none !important;
   }
}

/* ========================================
   MOBILE TOUCH FIX
   transform:none on parent divs creates
   stacking context that blocks touch events
======================================== */
@media (max-width: 767px) {

   /* Remove stacking context blockers */
   #mvp-main-body-wrap,
   #mvp-main-body-wrap>.mvp-main-blog-wrap,
   #mvp-main-body-wrap .mvp-main-blog-cont,
   #mvp-main-body-wrap .mvp-main-blog-out,
   #mvp-main-body-wrap .mvp-main-blog-in,
   #mvp-main-body-wrap .mvp-main-blog-body,
   #mvp-main-body-wrap #mvp-post-content,
   #mvp-main-body-wrap #mvp-content-wrap,
   #mvp-main-body-wrap #mvp-content-body,
   #mvp-main-body-wrap #woo-content {
      transform: none !important;
      -webkit-transform: none !important;
      will-change: auto !important;
      /* Fix touch event passthrough */
      pointer-events: auto !important;
      -webkit-overflow-scrolling: touch;
      margin-top: 5px;
   }

   /* Sidebar must not float over content on mobile */
   #mvp-side-wrap {
      width: calc(92% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      pointer-events: auto !important;
      position: static !important;
      z-index: 0 !important;
   }

   #mvp-side-wrap,
   #mvp-side-wrap a,
   #mvp-side-wrap button,
   #mvp-side-wrap input,
   #mvp-side-wrap select {
      pointer-events: auto !important;
      touch-action: manipulation;
   }

   /* Cards must be fully tappable */
   .elevated-card,
   .elevated-card a,
   .elevated-card img {
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
      cursor: pointer;
   }

   /* Remove 300ms tap delay on all interactive elements */
   a,
   button,
   select,
   input,
   li {
      touch-action: manipulation;
   }
}

/* Star Rating below card name */
.woocommerce-loop-product__title {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 8px 10px;
   align-items: center;
   /* ← add this */
   text-align: center;
   /* ← add this */
}

.review-movie-name {
   font-size: 14px;
   font-weight: 700;
   color: #1a1a1a;
}

.review-rating {
   display: flex;
   align-items: center;
   gap: 2px;
}

.review-rating .star.full::before {
   content: "★";
   color: #f5a623;
   font-size: 13px;
}

.review-rating .star.half::before {
   content: "★";
   font-size: 13px;
   background: linear-gradient(90deg, #f5a623 50%, #ddd 50%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.review-rating .star.empty::before {
   content: "★";
   color: #ddd;
   font-size: 13px;
}

.review-rating .rating-number {
   font-size: 11px;
   color: #888;
   font-weight: 600;
   margin-left: 3px;
}


/* ========================================
   Top 5 Movies Section - Fix Image Gaps
======================================== */

/* Ensure all images fill their containers completely */
#mvp_top_movies_widget img,
.mvp-widget-feat1-top-img img,
.mvp-widget-feat2-top-story img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   display: block !important;
   padding: 0 !important;
   max-height: 100% !important;
   margin-left: 20px;
}

#mvp_top_movies_widget {
   overflow: hidden !important;
}

.mvp-widget-feat1-top-img,
.mvp-widget-feat2-top-story {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
}

/* Tablet: Center the section */
@media screen and (min-width: 768px) and (max-width: 1024px) {
   #mvp_top_movies_widget {
      margin: 0 auto 30px auto !important;
      width: 85% !important;
      max-width: 600px !important;
      float: none !important;
   }

   .mvp-widget-feat1-top-img {
      aspect-ratio: 9 / 16 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   .topmovie .mvp-widget-feat2-top-story {
      margin: 0 !important;
      padding: 0 !important;
   }

   .mvp-widget-feat1-bot-text {
      padding: 8px 12px !important;
      margin: 0 !important;
   }
}

/* Mobile: Full width, fill images completely */
@media screen and (max-width: 767px) {
   #mvp_top_movies_widget {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 8px !important;
      box-sizing: border-box;
      margin-left: 9px;
   }

   .mvp-widget-feat1-top-img {
      aspect-ratio: 9 / 16 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      margin-left: 10px;
   }

   .topmovie .mvp-widget-feat2-top-story {
      margin: 0 !important;
      padding: 0 !important;
   }

   .mvp-widget-feat1-bot-text {
      padding: 8px 10px !important;
      margin: 0 !important;
   }

   .mvp-widget-feat1-bot-text h2 {
      font-size: 14px !important;
   }
}

@media (max-width: 479px) {
   .clear {
      margin-right: 30px;
   }
}

/* ========================================
   Dark Theme - Elevated Cards
======================================== */
#mvp-site-wall.zox-dark .elevated-card {
   background: #1a1a1a !important;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.3) !important;
   color: #fff !important;
}

#mvp-site-wall.zox-dark .elevated-card:hover {
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 18px 38px rgba(0, 0, 0, 0.4) !important;
}

#mvp-site-wall.zox-dark .elevated-card h2,
#mvp-site-wall.zox-dark .woocommerce-loop-product__title,
#mvp-site-wall.zox-dark .elevated-card span,
#mvp-site-wall.zox-dark .elevated-card p {
   color: #fff !important;
}

#mvp-site-wall.zox-dark .woocommerce-LoopProduct-link,
#mvp-site-wall.zox-dark .woocommerce-loop-product__link {
   color: #fff !important;
}

/* Dark theme for review rating */
#mvp-site-wall.zox-dark .review-rating,
#mvp-site-wall.zox-dark .review-rating .star,
#mvp-site-wall.zox-dark .review-rating .rating-number {
   color: #fff !important;
}

#mvp-site-wall.zox-dark .review-rating .star.full::before,
#mvp-site-wall.zox-dark .review-rating .star.half::before {
   color: #ffc107 !important;
}

#mvp-site-wall.zox-dark .review-rating .star.empty::before {
   color: #555 !important;
}

#mvp-site-wall.zox-dark .products.gallery-elevated {
   background-color: transparent !important;
}