/* ==========================================================
   cini-main.css
   Styles for main.php (news listing / kollywood page)
   Requires: cini-common.css loaded first
   ========================================================== */

 /* ========================================
   Story List Cards
======================================== */
 .mvp-blog-story-text span.mvp-cd-date:before {
   content: "" !important;
   margin-right: 0 !important;
 }

 span.mvp-cd-date {
   font-size: 12.5px;
 }



 ul.mvp-blog-story-list {
   padding-left: 0;
   margin-left: 0;
   list-style: none;
 }

 html,
 body,
 #mvp-site,
 #mvp-site-wall,
 #mvp-site-main {
   max-width: 100%;
   overflow-x: hidden;
 }

 .mvp-blog-story-img {
   background: none;
 }

 .mvp-blog-story-out {
   display: flex !important;
   flex-direction: row !important;
   gap: 16px;
   align-items: stretch;
   width: 100%;
 }

 .mvp-blog-story-img {
   width: 42% !important;
   min-width: 0 !important;
   margin-right: 0 !important;
   flex-shrink: 0;
   height: auto;
   min-height: 1px;
 }

 .mvp-blog-story-img img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   display: block !important;
   border-radius: 8px;
 }

 .mvp-blog-story-in {
   width: 58% !important;
   margin-left: 0 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* Center text vertically relative to image */
 }

 .main-page-ad-wrap {
   width: 100%;
 }

 /* ========================================
   Card Share Menu - Floats Above Content
======================================== */
 .mvp-blog-story-wrap {
   position: relative;
 }

 @media screen and (max-width: 479px) {
   .mvp-blog-story-text {
     padding-right: 50px !important;
     /* Maintain space for share button on mobile */
   }

   #share-icon-card1 {
     margin-top: -10px;
   }
 }

 .card-share-menu {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 10;
   flex-shrink: 0;
 }

 .card-share-btn {
   position: relative;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 14px;
   color: #444;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all 0.2s ease;
   padding: 0;
   text-decoration: none;
   flex-shrink: 0;
 }

 .card-share-btn:hover {
   background: #aa092f;
   color: #fff;
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(170, 9, 47, 0.3);
 }

 /* Tooltip styling for share button */
 .card-share-btn::before {
   content: attr(data-tooltip);
   position: absolute;
   bottom: 100%;
   right: 0;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   padding: 6px 10px;
   border-radius: 4px;
   font-size: 12px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
   margin-bottom: 8px;
   font-weight: 500;
 }

 .card-share-btn:hover::before {
   opacity: 1;
 }

 .card-share-dropdown {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   display: none !important;
   align-items: center;
   gap: 6px;
   padding: 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.97);
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
 }

 .card-share-menu.open .card-share-dropdown {
   display: inline-flex !important;
   opacity: 1;
   pointer-events: auto;
 }

 .card-share-dropdown a {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: #fff !important;
   transition: filter 0.2s ease;
 }

 .card-share-dropdown a.sh-fb {
   background: #3b5998;
 }

 .card-share-dropdown a.sh-x {
   background: #000;
 }

 .card-share-dropdown a.sh-wa {
   background: #25D366;
 }

 .card-share-dropdown a.sh-tg {
   background: #0088cc;
 }

 .card-share-dropdown a.sh-mail {
   background: #d84315;
 }

 .card-share-dropdown a:hover {
   filter: brightness(1.15);
 }

 .zox-dark .card-share-btn {
   background: rgba(40, 40, 40, 0.95);
   border-color: rgba(255, 255, 255, 0.15);
   color: #ddd;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }

 .zox-dark .card-share-btn::before {
   background: rgba(255, 255, 255, 0.95);
   color: #000;
 }

 .zox-dark .card-share-dropdown {
   background: rgba(24, 24, 24, 0.97);
   border-color: rgba(255, 255, 255, 0.12);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   color: #ddd;
 }

 /* ========================================
   Story List Cards
======================================== */
 .mvp-blog-story-wrap {
   background: #fff;
   border-radius: 14px;
   padding: 12px;
   margin-bottom: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transition: all 0.2s ease;
 }

 .mvp-blog-story-wrap:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
 }

 .mvp-blog-story-wrap>a,
 .mvp-blog-story-wrap>a .mvp-blog-story-out {
   display: block;
   width: 100%;
 }

 .mvp-blog-story-img {
   overflow: hidden;
   border-radius: 10px;
   line-height: 0;
   min-height: 1px;
 }

 .mvp-blog-story-img img,
 .mvp-big-img {
   display: block !important;
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
   border-radius: 10px;
   object-fit: cover;
 }

 .mvp-blog-story-in {
   min-width: 0;
   overflow: hidden;
   padding-right: 8px;
 }



 .mvp-blog-story-text {
   padding-right: 45px;
   /* Reserve space for share button */
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .mvp-blog-story-text h2 {
   font-size: 24px;
   line-height: 1.25;
   margin-bottom: 8px;
   word-break: break-word;
   overflow-wrap: break-word;
   word-wrap: break-word;
   padding-right: 8px;
   font-weight: 800;
   margin-top: 5px;
 }

 .mvp-blog-story-text p {
   font-size: 15px;
   line-height: 1.5;
   color: #555;
   margin-bottom: 4px;
 }

 .zox-dark .mvp-main-blog-wrap,
 .zox-dark #mvp-site-main {
   background: transparent;
 }

 .zox-dark .woocommerce-breadcrumb {
   background: #1b1b1b;
   border-color: #303030;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
 }

 .zox-dark .woocommerce-breadcrumb a,
 .zox-dark .woocommerce-breadcrumb span {
   color: #f3f3f3 !important;
 }

 .zox-dark .breadcrumbbdr,
 .zox-dark .breadcrumbbdr a,
 .zox-dark .breadcrumbbdr span,
 .zox-dark .breadcrumbbdr svg {
   color: #ffffff !important;
   fill: currentColor !important;
 }

 .zox-dark .mvp-main-blog-out {
   background: transparent !important;
   box-shadow: none !important;
 }

 .zox-dark .mvp-main-blog-in,
 .zox-dark .mvp-main-blog-body,
 .zox-dark ul.mvp-blog-story-list,
 .zox-dark .mvp-blog-story-out,
 .zox-dark .mvp-blog-story-in,
 .zox-dark .mvp-blog-story-text {
   background: transparent !important;
 }

 .zox-dark .mvp-blog-story-wrap {
   background: #1b1b1b;
   border-color: #2e2e2e;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
 }

 .zox-dark .mvp-blog-story-wrap:hover {
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
 }

 .zox-dark .mvp-blog-story-text h2,
 .zox-dark .mvp-blog-story-text p,
 .zox-dark .mvp-cd-date,
 .zox-dark .mvp-cd-cmnt {
   color: #e7e7e7 !important;
 }

 .zox-dark .mvp-blog-story-text h2 a,
 .zox-dark .mvp-blog-story-wrap>a,
 .zox-dark .mvp-blog-story-wrap a {
   color: inherit !important;
 }

 .zox-dark .mvp-blog-story-text p {
   color: #b8b8b8 !important;
 }

 .zox-dark .mvp-cat-date-wrap {
   opacity: 0.9;
 }

 .zox-dark .mvp-widget-home-title span,
 .zox-dark h4.mvp-widget-home-title span {
   color: #fff !important;
 }

 .zox-dark #mvp-side-wrap {
   background: transparent;
 }

 .zox-dark #mvp-side-wrap .mvp-widget-home,
 .zox-dark #mvp-side-wrap .mvp-widget-home-head,
 .zox-dark #mvp-side-wrap .mvp-widget-home-main,
 .zox-dark #mvp-side-wrap .mvp-widget-feat2-side-list,
 .zox-dark #mvp-side-wrap .mvp-flex-col,
 .zox-dark #mvp-side-wrap .mvp-flex-row {
   background: transparent !important;
 }

 .zox-dark #mvp-side-wrap .mvp-flex-col,
 .zox-dark #mvp-side-wrap .mvp-flex-row {
   border-color: #303030 !important;
 }

 .zox-dark #mvp-side-wrap h2,
 .zox-dark #mvp-side-wrap h3,
 .zox-dark #mvp-side-wrap p,
 .zox-dark #mvp-side-wrap a,
 .zox-dark #mvp-side-wrap li,
 .zox-dark #mvp-side-wrap span {
   color: #dddddd !important;
 }

 .zox-dark #mvp-side-wrap .mvp-flex-story-text p,
 .zox-dark #mvp-side-wrap .mvp-flex-story-text span,
 .zox-dark #mvp-side-wrap .mvp-cd-date,
 .zox-dark #mvp-side-wrap .mvp-cd-cmnt {
   color: #a9a9a9 !important;
 }



 .zox-dark #mvp-side-wrap a:hover h2,
 .zox-dark #mvp-side-wrap a:hover h3,
 .zox-dark .mvp-blog-story-wrap:hover h2 {
   color: #ffffff !important;
 }

 .zox-dark .mvp-blog-story-wrap:nth-child(5n+0) {
   background: #181818;
 }

 .zox-dark .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text h2 {
   color: #fff !important;
 }

 .zox-dark .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text p {
   color: #c7c7c7 !important;
 }

 /* ========================================
   "More Posts" Button
======================================== */
 .mvp-inf-more-but {
   color: #fff !important;
   background: #111 !important;
 }

 .mvp-inf-more-wrap .mvp-inf-more-but {
   width: auto !important;
   min-width: 0 !important;
   padding: 10px 16px !important;
   border-radius: 8px !important;
   background-color: #aa092f !important;
   color: #fff !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-weight: 700 !important;
   letter-spacing: 1px !important;
   text-transform: none !important;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
   transition: all 0.3s ease !important;
   text-decoration: none !important;
 }

 .mvp-inf-more-wrap .mvp-inf-more-but:hover {
   background-color: #920729 !important;
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
 }

 .zox-dark .mvp-inf-more-but {
   background: #aa092f !important;
 }

 @media screen and (min-width: 768px) and (max-width: 1024px) {

   .mvp-main-blog-wrap>.mvp-main-box,
   .main-page-ad-wrap .mvp-main-box {
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
     padding: 0 12px !important;
     box-sizing: border-box;
   }

   .main-page-ad-wrap .mvp-feat1-list-ad,
   .main-page-ad-wrap .mvp-widget-ad,
   .main-page-ad-wrap .mvp-widget-ad a,
   .main-page-ad-wrap .mvp-widget-ad img,
   .main-page-ad-wrap .mvp-leader1 {
     width: 100% !important;
     max-width: 100% !important;
     height: 90px !important;
   }

   .main-page-ad-wrap .mvp-widget-ad img {
     display: none !important;
   }

   .main-page-ad-wrap .mvp-widget-ad a,
   .main-page-ad-wrap .mvp-widget-ad .mvp-leader2,
   .main-page-ad-wrap .mvp-widget-ad .cini-top-ad-tablet {
     display: block !important;
   }

   .mvp-main-blog-out {
     display: block !important;
     width: 100% !important;
     overflow: visible !important;
     box-sizing: border-box;
   }

   .mvp-main-blog-in,
   .mvp-main-blog-body,
   ul.mvp-blog-story-list,
   #mvp-side-wrap {
     width: 100% !important;
     max-width: 100% !important;
     float: none !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
     box-sizing: border-box;
   }

   #mvp-side-wrap {
     margin-top: 24px !important;
   }

   .mvp-blog-story-out {
     flex-direction: row !important;
     display: flex !important;
     gap: 12px;
   }

   .mvp-blog-story-img {
     width: 40% !important;
     height: 180px !important;
     flex-shrink: 0;
   }

   .mvp-blog-story-img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
   }

   .mvp-blog-story-in {
     width: 60% !important;
   }

   .mvp-blog-story-text h2 {
     font-size: 19px !important;
     line-height: 1.3 !important;
     margin-bottom: 4px !important;
   }

   .mvp-blog-story-text p {
     font-size: 11px !important;
     line-height: 1.3 !important;
   }

   .mvp-blog-story-wrap {
     width: 100% !important;
     box-sizing: border-box;
     overflow: visible !important;
   }

   .mvp-blog-story-text {
     padding-right: 50px !important;
     overflow: visible !important;
   }

   /* Center Top 5 Movies slider on tablet */
   #mvp_top_movies_widget .mvp-widget-feat1-cont {
     display: flex !important;
     justify-content: center !important;
   }

   #mvp_top_movies_widget .topmovie.slider {
     margin: 0 auto !important;
     max-width: 400px !important;
     padding-bottom: 30px !important;
   }

   /* Increase photo heights in Upcoming Movies section on tablet */
   .mvp-feat1-list-wrap .mvp-feat5-small-main-img {
     height: auto !important;
   }

   .mvp-feat1-list-wrap .mvp-feat5-small-main-img img {
     height: 320px !important;
     object-fit: cover !important;
   }

   /* Fill images properly in Top 5 Movies section on tablet */
   #mvp_top_movies_widget .mvp-widget-feat1-top-img {
     width: 100% !important;
     aspect-ratio: 9 / 16 !important;
     overflow: hidden !important;
   }

   #mvp_top_movies_widget .mvp-widget-feat1-top-img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
   }
 }

 /* ========================================
   Mobile: Equal side spacing on card list
======================================== */
 @media screen and (max-width: 767px) {

   /* Fill images properly in Top 5 Movies section on mobile */
   #mvp_top_movies_widget .mvp-widget-feat2-top-story {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
   }

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

   #mvp_top_movies_widget .mvp-widget-feat1-top-img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
   }

   #mvp-site-main {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }

   .mvp-main-blog-wrap,
   .main-page-ad-wrap {
     width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
     box-sizing: border-box;
   }

   .mvp-main-blog-wrap>.mvp-main-box,
   .main-page-ad-wrap .mvp-main-box {
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
     padding: 0 6px !important;
     box-sizing: border-box;
   }

   .mvp-main-blog-out {
     margin-right: 0 !important;
     width: 100% !important;
     display: block !important;
     overflow: visible !important;
     box-sizing: border-box;
   }

   .mvp-main-blog-in,
   .mvp-main-blog-body,
   ul.mvp-blog-story-list {
     margin-right: 0 !important;
     width: 100% !important;
     padding: 0 !important;
     float: none !important;
   }

   ul.mvp-blog-story-list {
     border-top: 1px solid #e3e3e3 !important;
     padding-top: 12px !important;
   }

   .mvp-blog-story-wrap {
     width: 100% !important;
     border-top: none !important;
     margin: 0 0 14px 0 !important;
     padding: 10px !important;
     box-sizing: border-box;
     overflow: visible !important;
   }

   ul.mvp-blog-story-list .mvp-blog-story-wrap:first-child {
     margin-top: 0 !important;
     padding-top: 0 !important;
     border-top: none !important;
   }

   .mvp-blog-story-out {
     display: flex !important;
     flex-direction: column !important;
     gap: 10px;
     margin-left: 0 !important;
     width: 100% !important;
     float: none !important;
   }

   .mvp-blog-story-out {
     flex-direction: column !important;
   }

   .mvp-blog-story-img {
     width: 100% !important;
     height: 200px !important;
     margin-right: 0 !important;
   }

   .mvp-blog-story-img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
   }

   .mvp-blog-story-in {
     width: 100% !important;
     margin-left: 0 !important;
   }

   .mvp-blog-story-text h2 {
     font-size: 18px !important;
     line-height: 1.3 !important;
     margin-bottom: 4px !important;
   }

   .mvp-blog-story-text p {
     font-size: 11px !important;
     line-height: 1.3 !important;
   }

   .mvp-blog-story-in {
     margin-left: 0 !important;
     width: 100% !important;
   }

   .mvp-blog-story-img {
     width: 100% !important;
     min-width: 0 !important;
     margin-right: 0 !important;
   }

   .mvp-blog-story-img img {
     width: 100% !important;
     height: auto !important;
     display: block;
   }

   /* Mobile seam fix: first card image should not show 1px white hairline */
   ul.mvp-blog-story-list .mvp-blog-story-wrap:first-child .mvp-blog-story-img {
     line-height: 0 !important;
     overflow: hidden !important;
     background: transparent !important;
     border-radius: 10px;
   }

   ul.mvp-blog-story-list .mvp-blog-story-wrap:first-child .mvp-blog-story-img img {
     display: block !important;
     width: 100% !important;
     height: auto !important;
     margin: 0 !important;
     border: 0 !important;
     transform: translateZ(0) scale(1.002);
     transform-origin: center center;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
   }

   .mvp-blog-story-text {
     margin-top: 0 !important;
     padding-right: 50px !important;
     /* Maintain space for share button on mobile */
     overflow: visible !important;
   }

   .mvp-blog-story-text h2,
   .mvp-blog-story-text p,
   .mvp-cat-date-wrap {
     float: none !important;
     word-break: break-word;
     overflow-wrap: break-word;
   }

   .mvp-feat1-feat-wrap {
     margin: 0 !important;
     width: 100% !important;
     overflow: hidden;
   }

   .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-img,
   .mvp-blog-story-wrap:nth-child(5n+0) .mvp-big-img {
     width: 100% !important;
     min-width: 0 !important;
     display: block;
   }

   .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-in {
     margin-left: 0 !important;
     width: 100% !important;
   }

   .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text {
     /* margin: 10px 0 0 !important; */
     width: 100% !important;
   }

   #mvp-side-wrap {
     width: 100% !important;
     margin-left: 0 !important;
     margin-top: -200px !important;
     float: none !important;
   }

   .main-page-ad-wrap .mvp-widget-ad,
   .main-page-ad-wrap .mvp-widget-ad a {
     display: block;
     width: 100%;
   }

   /* Fixed dots visibility on mobile */
   #mvp_top_movies_widget .topmovie.slider {
     padding-bottom: 35px !important;
   }

   .main-page-ad-wrap .mvp-leader2,
   .main-page-ad-wrap .mvp-leader3 {
     width: 100% !important;
     max-width: 100% !important;
     border-radius: 12px;
   }

   #mvp-foot-wrap:not(.cini-shared-footer) #mvp-foot-menu,
   #mvp-foot-wrap:not(.cini-shared-footer) #mvp-foot-copy {
     padding-left: 10px;
     padding-right: 10px;
     box-sizing: border-box;
   }

   #mvp-foot-wrap:not(.cini-shared-footer) #mvp-foot-menu ul {
     padding-left: 0;
     padding-right: 0;
   }

   #mvp-foot-wrap:not(.cini-shared-footer),
   #mvp-foot-bot:not(.cini-shared-footer) {
     overflow: hidden;
   }
 }

 /* Mobile: Show appropriate ad leader for 480px-767px range */
 @media screen and (max-width: 767px) and (min-width: 480px) {

   .main-page-ad-wrap .mvp-leader1,
   .main-page-ad-wrap .mvp-leader3,
   .main-page-ad-wrap .mvp-leader4 {
     display: none !important;
   }

   .main-page-ad-wrap .mvp-leader2 {
     display: block !important;
     width: 100% !important;
     max-width: 100% !important;
     height: 90px !important;
   }

   .main-page-ad-wrap .mvp-widget-ad,
   .main-page-ad-wrap .mvp-widget-ad a,
   .main-page-ad-wrap .mvp-widget-ad img {
     width: 100% !important;
     max-width: 100% !important;
     height: 90px !important;
     display: block !important;
   }
 }

 /* Mobile: Show leader3 for small mobile below 480px */
 @media screen and (max-width: 479px) {


   .main-top-ad {
     margin-right: 30px !important;
   }

   .mvp-main-blog-wrap,
   .main-page-ad-wrap {
     width: 100% !important;
   }

   .main-page-ad-wrap .mvp-leader1,
   .main-page-ad-wrap .mvp-leader2,
   .main-page-ad-wrap .mvp-leader4 {
     display: none !important;
   }

   .main-page-ad-wrap .mvp-leader3 {
     display: block !important;
     width: 100% !important;
     max-width: 100% !important;
     height: 90px !important;
   }

   .main-page-ad-wrap .mvp-widget-ad,
   .main-page-ad-wrap .mvp-widget-ad a,
   .main-page-ad-wrap .mvp-widget-ad img {
     width: 100% !important;
     max-width: 100% !important;
     height: 90px !important;
     display: block !important;
   }
 }

 /* ========================================
   Breadcrumb Styles
======================================== */
 .breadcrumbbdr {
   background: transparent;
   /* padding: 10px 15px !important; */
   border-radius: 0;
   margin: 15px 0 20px 0 !important;
   box-shadow: none;
   border: 0;
   font-size: 14px;
   display: flex;
   align-items: center;
 }

 .breadcrumbbdr a {
   color: #aa092f !important;
   display: flex;
   align-items: center;
 }

 .breadcrumbbdr svg {
   margin-bottom: -3px;
   margin-right: 5px;
 }

 .zox-dark .breadcrumbbdr {
   background: transparent;
   border: 0;
   box-shadow: none;
 }

 /* ========================================
   Festive Button Styles
======================================== */
 .mvp-inf-more-but.festive {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 18px;
   border-radius: 50px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(170, 9, 47, 0.2);
   background: #aa092f !important;
   width: fit-content;
   max-width: calc(100% - 24px);
   min-width: 0;
   white-space: nowrap;
 }

 .mvp-inf-more-but.festive:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 20px rgba(170, 9, 47, 0.3);
   background: #d31141 !important;
 }

 @media screen and (max-width: 480px) {
   .mvp-inf-more-but.festive {
     padding: 9px 14px;
     font-size: 12px;
     letter-spacing: 0.5px;
     max-width: calc(100% - 16px);
   }
 }