@charset "UTF-8";
/*
live/assets/scss/frontend/widgets/instagram.scss

Centralized styles for Instagram widgets, reels, and Google Reviews.

This version includes moved styles from embedsocial.php to centralize all slider-related
CSS in one location, ensuring consistent styling and avoiding inline CSS conflicts.

Modifications:
- Arrow backgrounds and shadows removed. Arrows are now transparent and any SVG circle
  used by JS arrow markup is forced to have no fill so the visual is just the icon stroke.
- Lightbox header updated to render avatar and time inline, with fallbacks for legacy markup
  where the avatar and time might be placed inside an unnamed wrapper.
*/
/* Arrow / nav tokens (easy to tweak)
   NOTE: background and shadow intentionally set to neutral/transparent to keep arrows
   visually unobtrusive — arrow visuals should come from the SVG path strokes. */
/* make arrow backgrounds transparent */
/* no hover background */
/* remove shadow */
/* Global Slick arrow styles - apply to ALL sliders consistently */
.slick-prev,
.slick-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-radius: 50% !important;
  /* color: $instagram-nav-color !important; */
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 180ms ease, transform 120ms ease, box-shadow 180ms ease !important;
  box-shadow: none !important;
  z-index: 10 !important;
  font-size: 0 !important;
  /* hide any text content */
  /* Reset default slick styles */
  /* Style any SVG inside */
  /* Style any img inside (server-provided arrows) */ }
  .slick-prev:before,
  .slick-next:before {
    display: none !important; }
  .slick-prev svg,
  .slick-next svg {
    display: block !important;
    /* width: 20px !important; */
    /* height: 20px !important; */
    pointer-events: none !important;
    /* If JS embedded a circle for background, remove its fill so arrow appears without a colored circle */ }
    .slick-prev svg circle,
    .slick-next svg circle {
      /* fill: none !important; */ }
    .slick-prev svg path,
    .slick-next svg path {
      /* stroke: $instagram-nav-color !important; */
      /* fill: none !important; */ }
  .slick-prev img,
  .slick-next img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    filter: brightness(0) invert(1) !important;
    /* make white */ }
  .slick-prev:hover,
  .slick-next:hover {
    background: transparent !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: none !important; }
  .slick-prev:focus,
  .slick-next:focus {
    outline: none !important; }

/* Ensure hover/shadow removal applies broadly (including server-provided classes) */
.slick-prev:hover,
.slick-next:hover,
.slider-nav .btn-prev:hover,
.slider-nav .btn-next:hover,
.slider-nav .slick-prev:hover,
.slider-nav .slick-next:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  box-shadow: none !important;
  background: transparent !important; }

/* Make sure any SVG circle inside per-wrapper navs is transparent */
.slider-nav svg circle,
.lightbox-navigation svg circle,
.slider-nav .slick-prev svg circle,
.slider-nav .slick-next svg circle {
  /* fill: none !important; */ }

/* Position nudges */
.slick-prev {
  left: 12px !important; }

.slick-next {
  right: 12px !important; }

/* Mobile adjustments for all sliders */
@media (max-width: 768px) {
  .slick-prev,
  .slick-next {
    width: 40px !important;
    height: 40px !important;
    box-shadow: none !important; }
    .slick-prev svg,
    .slick-next svg {
      /* width: 16px !important; */
      /* height: 16px !important; */ }
    .slick-prev img,
    .slick-next img {
      width: 16px !important;
      height: 16px !important; }
  .slick-prev {
    left: 8px !important; }
  .slick-next {
    right: 8px !important; } }

/* Google Reviews / EmbedSocial Styles */
.google-reviews-slider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
  background: white; }

.reviews-slider {
  position: relative;
  margin: 0 auto;
  text-align: center;
  /* Optimize slider performance */ }
  .reviews-slider .slick-track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    margin: 2px auto; }
  .reviews-slider .slick-slide {
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }

.review-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 0 16px; }
  @media (max-width: 768px) {
    .review-card-link {
      padding: 0 8px; } }

.review-card {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  min-height: 380px;
  cursor: pointer; }
  @media (max-width: 768px) {
    .review-card {
      margin: 8px 0; } }

.review-card-link:hover .review-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px); }

.profile-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px; }

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  flex-shrink: 0; }
  .profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover; }

.content-section {
  text-align: left;
  /* Ensure consistent card height */
  min-height: 200px;
  display: flex;
  flex-direction: column; }

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.reviewer-name {
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-size: 18px;
  text-align: left; }

.rating-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 0; }

.star {
  fill: currentColor; }
  .star.star-filled {
    color: #fbbf24; }
  .star.star-empty {
    color: #d1d5db; }

.review-text {
  color: #374151;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  font-weight: 400;
  word-wrap: break-word; }

.review-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto; }

.google-logo {
  display: flex;
  align-items: center;
  padding-right: 12px; }

.review-time {
  font-size: 13px;
  color: #9ca3af; }

@media (max-width: 768px) {
  .google-reviews-slider {
    padding: 16px 0px; } }

/* Instagram Widgets */
#widget-instagram.widget-instagram {
  position: relative;
  margin: 2% auto;
  /* margin-top: 0; */ }
  #widget-instagram.widget-instagram .title-content {
    margin-bottom: 2em; }

#widget-instagram .instagram-slider-wrapper {
  position: relative;
  padding: 0; }
  #widget-instagram .instagram-slider-wrapper .slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    /* allow pointer events to pass through the overlay so content hover works;
         buttons below explicitly enable pointer-events */
    pointer-events: none;
    opacity: 1;
    z-index: 50;
    padding: 0;
    box-sizing: border-box;
    display: block;
    /* Always keep the overlay non-interactive; buttons inside will receive clicks because
         they explicitly set pointer-events: auto. */
    /* Prev/Next buttons: style both server-provided classes and Slick's generated classes */
    /* Mobile: show nav by default and slightly reduce sizes.
         Keep the overlay non-interactive so content hover still works; buttons remain clickable. */ }
    #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev,
    #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next,
    #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev,
    #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next {
      position: absolute;
      top: 50%;
      /* keep consistent centering with global slick arrow rule */
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border-radius: 50%;
      color: #ffffff;
      border: none;
      cursor: pointer;
      /* Make buttons interactive even though the overlay is non-interactive */
      pointer-events: auto;
      transition: background 180ms ease, transform 120ms ease, box-shadow 180ms ease;
      box-shadow: none;
      /* ensure SVG inside keeps correct color */ }
      #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev svg,
      #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next svg,
      #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev svg,
      #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next svg {
        display: block;
        /* width: 18px; */
        /* height: 18px; */ }
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev svg circle,
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next svg circle,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev svg circle,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next svg circle {
          /* fill: none !important; */ }
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev svg path,
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next svg path,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev svg path,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next svg path {
          /* stroke: $instagram-nav-color !important; */ }
    #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev:hover,
    #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next:hover,
    #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev:hover,
    #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next:hover {
      background: transparent;
      transform: translateY(-50%) scale(1.05);
      box-shadow: none; }
    @media (max-width: 768px) {
      #widget-instagram .instagram-slider-wrapper .slider-nav {
        opacity: 1; }
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev,
        #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev,
        #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next {
          width: 40px;
          height: 40px;
          /* ensure mobile buttons are clickable */
          pointer-events: auto; }
          #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev svg,
          #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next svg,
          #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev svg,
          #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next svg {
            /* width: 14px; */
            /* height: 14px; */ }
            #widget-instagram .instagram-slider-wrapper .slider-nav .btn-prev svg circle,
            #widget-instagram .instagram-slider-wrapper .slider-nav .btn-next svg circle,
            #widget-instagram .instagram-slider-wrapper .slider-nav .slick-prev svg circle,
            #widget-instagram .instagram-slider-wrapper .slider-nav .slick-next svg circle {
              /* fill: none !important; */ } }
  #widget-instagram .instagram-slider-wrapper .instagram-slider:after {
    content: '';
    display: block;
    clear: both; }
  #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item {
    width: 25%;
    float: left; }
    #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item {
      width: 100%;
      display: block; }
      #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper {
        height: 0px;
        padding-top: 100%;
        position: relative;
        overflow: hidden;
        background-color: #888; }
        #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          transition: all 400ms ease-in-out; }
        #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover {
          font-family: 'brandon-grotesque', sans-serif;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #000;
          background-color: rgba(0, 0, 0, 0.8);
          width: 100%;
          height: 100%;
          text-align: center;
          display: block;
          text-decoration: none;
          background-repeat: no-repeat;
          background-position: right 1em top 1em;
          background-size: 0.7em;
          transition: opacity 400ms;
          transition: opacity 400ms, background-position 400ms, background-size 400ms; }
          #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.3em; }
          #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .hover-content {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            padding: 1em;
            transform: scale(0.5, 0.5);
            transition: all 400ms ease; }
            #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .hover-content .time {
              padding-top: 0.5em; }
          #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .likes {
            position: absolute;
            bottom: 0.5em;
            left: 0.5em;
            color: #fff; }
            #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .likes .likes-icon {
              display: inline-block;
              background-repeat: no-repeat;
              background-position: -104px -357px;
              height: 24px;
              width: 24px;
              vertical-align: middle; }
            #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .likes .likes-count {
              vertical-align: middle;
              padding-left: 5px; }
          #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .image {
            transform: scale(1.2, 1.2); }
        #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper:hover .image {
          transform: scale(1.2, 1.2); }
        #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper:hover .hover {
          opacity: 1;
          background-size: 1.2em; }
          #widget-instagram .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper:hover .hover .hover-content {
            transform: scale(1, 1); }

/* Reels-only modifiers: gap, border-radius and portrait aspect
   These styles only apply when the widget root has the `reels-widget` class.
   This keeps default instagram widget unchanged (non-breaking). */
#widget-instagram.reels-widget .instagram-slider-wrapper {
  /* Prevent negative left margin on slider and carouFredSel wrapper so navigation arrows stay centered */ }
  #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider,
  #widget-instagram.reels-widget .instagram-slider-wrapper .caroufredsel_wrapper {
    margin-left: 0; }
  #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item {
    box-sizing: border-box;
    padding-left: calc(1rem / 2);
    padding-right: calc(1rem / 2); }
  #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item {
    cursor: pointer; }
    #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper {
      border-radius: 8px; }
      #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper.portrait {
        padding-top: 177.77778%; }
      #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover {
        /* For reels widget only: hide hover overlay, likes, and icon */
        background-color: transparent !important;
        background-image: none !important; }
        #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .hover-content {
          color: inherit; }
        #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .hover .likes {
          display: none; }
      #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper:hover .hover {
        /* Keep reels widget hover transparent */
        opacity: 0;
        background-size: 0; }
      #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .play-button-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 10; }
        #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .play-button-overlay .play-button svg {
          /* Reduce shadow intensity/offset to improve optical centering of the icon */
          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
          transition: transform 0.2s ease; }
          #widget-instagram.reels-widget .instagram-slider-wrapper .instagram-slider .slider-item .tile-grid-item .item-wrapper .play-button-overlay .play-button svg:hover {
            transform: scale(1.1); }

/* Reels-only nav nudge: small upward shift of 3px to align with play button */
#widget-instagram.reels-widget .instagram-slider-wrapper .btn-prev,
#widget-instagram.reels-widget .instagram-slider-wrapper .btn-next,
#widget-instagram.reels-widget .instagram-slider-wrapper .slick-prev,
#widget-instagram.reels-widget .instagram-slider-wrapper .slick-next {
  top: 50% !important;
  transform: translateY(calc(-50% - 3px)) !important; }

/* Instagram Reels Lightbox Styles */
.reels-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; }
  .reels-lightbox .lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer; }
  .reels-lightbox .lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Mobile-specific enhancements */
    /* Fix likes icon display on mobile */
    /* Additional mobile breakpoints for better responsiveness */
    /* Landscape orientation adjustments - only apply on larger screens */ }
    .reels-lightbox .lightbox-container .lightbox-header {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      /* Respect device safe-area (notch) on mobile */
      padding-top: env(safe-area-inset-top);
      padding-top: constant(safe-area-inset-top); }
      .reels-lightbox .lightbox-container .lightbox-header .lightbox-close {
        background: none;
        border: none;
        color: white;
        font-size: 32px;
        cursor: pointer;
        padding: 10px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease; }
        .reels-lightbox .lightbox-container .lightbox-header .lightbox-close:hover {
          background: rgba(0, 0, 0, 0.8); }
    .reels-lightbox .lightbox-container .lightbox-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 20px 0;
      /* smaller vertical padding and center container */
      /* Default mobile-first layout: stacked vertically */
      /* Desktop grid layout - only on larger screens */ }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        pointer-events: none;
        z-index: 10; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next {
          background: transparent;
          border: none;
          color: #ffffff;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s ease, box-shadow 0.18s ease, transform 0.12s ease;
          pointer-events: auto;
          box-shadow: none; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev svg,
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next svg {
            /* width: 18px;
            height: 18px;
            circle {
              fill: none !important;
            }
            path {
              stroke: $instagram-nav-color !important;
            } */ }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev:hover,
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next:hover {
            background: transparent;
            transform: scale(1.03);
            box-shadow: none; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev:disabled,
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next:disabled {
            opacity: 0.5;
            cursor: not-allowed; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev:disabled:hover,
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next:disabled:hover {
              background: transparent;
              box-shadow: none; }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-columns {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        background: transparent;
        border-radius: 8px;
        overflow: hidden; }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-media {
        flex: 1;
        width: 100%;
        position: relative;
        min-height: 55vh;
        max-height: 65vh;
        background: #000;
        margin: 0;
        padding: 0;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media .lightbox-image {
          display: block;
          width: 100%;
          height: 100%;
          max-height: 65vh;
          margin: 0;
          padding: 0;
          border-radius: 0;
          box-shadow: none;
          -o-object-fit: cover;
             object-fit: cover;
          border: none;
          outline: none; }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-side {
        flex: 0 0 auto;
        width: 100%;
        background: #fff;
        color: #222;
        border-radius: 0;
        box-shadow: none;
        padding: 16px;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-top: 1px solid #efefef;
        max-height: 45vh;
        overflow-y: auto; }
      @media (min-width: 769px) {
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-columns {
          display: grid;
          grid-template-columns: 1fr 380px;
          grid-template-rows: 1fr;
          max-width: 760px;
          margin: 0 auto;
          height: auto;
          flex-direction: row; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media {
          grid-column: 1;
          grid-row: 1;
          flex: none;
          min-height: auto;
          max-height: 80vh;
          background: transparent; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side {
          grid-column: 2;
          grid-row: 1;
          flex: none;
          width: 380px;
          border-top: none;
          border-left: none;
          padding: 24px;
          max-height: none;
          overflow-y: visible; } }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /* Primary profile layout: avatar + meta (username + time) */
        /* Legacy markup support:
           Some templates output avatar and time inside an unnamed <div> rather than a .profile wrapper.
           Ensure that case renders avatar and time inline too. */
        /* Also support when markup places avatar and time as siblings directly under header:
           <img class="lightbox-image-profile"> <div class="lightbox-time">... */
        /* If there is a username element next to time, keep it compact */ }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .profile {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          min-width: 0; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-image-profile {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          -o-object-fit: cover;
             object-fit: cover;
          border: 1px solid rgba(0, 0, 0, 0.06);
          background: #fff;
          flex-shrink: 0; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .profile-meta {
          display: flex;
          flex-direction: column;
          line-height: 1;
          overflow: hidden; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-username {
          font-weight: 600;
          font-size: 0.95rem;
          color: #111;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-time {
          color: #666;
          font-size: 13px; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-link {
          color: #4caf50;
          text-decoration: none;
          font-size: 13px;
          transition: color 0.2s ease; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-link:hover {
            color: #66bb6a; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header > div:first-child {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          min-width: 0; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header > img.lightbox-image-profile + .lightbox-time,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header > .lightbox-time + img.lightbox-image-profile {
          margin-left: 0.5rem;
          margin-right: 0; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-username + .lightbox-time,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-header .lightbox-time + .lightbox-username {
          margin-left: 0.5rem;
          font-size: 0.95rem;
          color: #666; }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-caption {
        display: block;
        color: #222;
        font-size: 15px;
        line-height: 1.5;
        margin: 0;
        overflow: auto;
        max-height: calc(80vh - 200px); }
      .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer {
        /* Use a vertical layout so the CTA can be pushed to the bottom via margin-top:auto */
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        /* Extra high-specificity rule to ensure the sprite is applied when the lightbox is revealed */
        /* Video element inside lightbox media */
        /* Unmute button for autoplayed muted videos */
        /* Responsive CTA: full-width on small screens, constrained on desktop.
           JS will set colors and visibility; CSS controls layout to prevent overflow. */
        /* Ensure JS-driven inline display shows as block */
        /* keep previous absolute info hidden since side panel shows caption/time */ }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-likes {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #444;
          /* Default nested icon rule (keeps existing structure) */ }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-likes .likes-icon {
            display: inline-block !important;
            background-repeat: no-repeat !important;
            background-position: -104px -357px !important;
            height: 24px !important;
            width: 24px !important;
            vertical-align: middle !important; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-likes .likes-count {
            font-size: 14px;
            font-weight: 600;
            width: 30px;
            text-align: left; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .reels-lightbox .lightbox-side-footer .lightbox-likes .likes-icon,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .reels-lightbox
.lightbox-container
.lightbox-content
.lightbox-side-footer
.lightbox-likes
.likes-icon {
          display: inline-block !important;
          background-image: url("//www.instagram.com/static/bundles/sprite_core.png/fb48443ec9d3.png") !important;
          background-repeat: no-repeat !important;
          background-position: -104px -357px !important;
          width: 24px !important;
          height: 24px !important;
          vertical-align: middle !important; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-video {
          display: block;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-unmute {
          position: absolute;
          right: 24px;
          bottom: 24px;
          z-index: 30;
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          border: none;
          padding: 10px;
          border-radius: 50%;
          display: none;
          cursor: pointer; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-cta {
          display: none;
          /* JS will show it when active */
          width: 80%;
          max-width: 80%;
          margin-top: auto;
          /* push to bottom of side panel */
          padding: 12px 14px;
          border-radius: 8px;
          background: #000;
          color: #fff;
          text-decoration: none;
          font-weight: 600;
          text-align: center;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-cta[style*='display:block'],
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-cta.visible {
          display: block; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side-footer .lightbox-info {
          display: none; }
    @media (max-width: 768px) {
      .reels-lightbox .lightbox-container .lightbox-header {
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 20px);
        right: calc(env(safe-area-inset-right, 0px) + 20px);
        z-index: 15; }
        .reels-lightbox .lightbox-container .lightbox-header .lightbox-close {
          width: 36px;
          height: 36px;
          font-size: 20px;
          background: rgba(0, 0, 0, 0.7);
          -webkit-backdrop-filter: blur(10px);
                  backdrop-filter: blur(10px); }
      .reels-lightbox .lightbox-container .lightbox-content {
        padding: 0 !important;
        /* Video controls and unmute button */ }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation {
          padding: 0 calc(env(safe-area-inset-left, 0px) + 15px) 0 calc(env(safe-area-inset-right, 0px) + 15px); }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-prev,
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation .lightbox-next {
            width: 36px;
            height: 36px;
            background: rgba(0, 0, 0, 0.6);
            -webkit-backdrop-filter: blur(10px);
                    backdrop-filter: blur(10px); }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-side {
          padding: 16px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          /* Custom scrollbar for mobile */
          /* Firefox scrollbar */
          scrollbar-width: thin;
          scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side::-webkit-scrollbar {
            width: 6px; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 3px; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 3px; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side::-webkit-scrollbar-thumb:hover {
              background: rgba(0, 0, 0, 0.5); }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header {
            margin-bottom: 12px;
            /* Also make sure legacy wrapper case is inline on mobile */ }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .profile {
              display: flex;
              align-items: center;
              gap: 0.5rem; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .lightbox-image-profile {
              width: 36px;
              height: 36px; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .lightbox-username {
              font-size: 14px;
              font-weight: 600; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .lightbox-time {
              color: #8e8e8e;
              font-size: 12px;
              font-weight: 400; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .lightbox-link {
              color: #0095f6;
              font-size: 13px;
              font-weight: 600;
              text-decoration: none; }
              .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header .lightbox-link:hover {
                text-decoration: underline; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header > div:first-child {
              display: flex;
              align-items: center;
              gap: 0.5rem; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-likes {
            font-size: 14px;
            color: #262626;
            padding-bottom: 10px;
            margin-top: 10px; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-cta {
            margin-top: 8px;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 12px !important;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease; }
            .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-cta:active {
              transform: scale(0.98); }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media video::-webkit-media-controls-panel {
          background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
          border-radius: 0 0 8px 8px; }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media video::-webkit-media-controls-play-button,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media video::-webkit-media-controls-mute-button,
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media video::-webkit-media-controls-fullscreen-button {
          filter: brightness(1.2); }
        .reels-lightbox .lightbox-container .lightbox-content .lightbox-media .lightbox-unmute {
          position: absolute;
          right: 16px;
          bottom: 16px;
          z-index: 20;
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          border: none;
          padding: 8px 12px;
          border-radius: 20px;
          font-size: 16px;
          cursor: pointer;
          -webkit-backdrop-filter: blur(10px);
                  backdrop-filter: blur(10px);
          transition: all 0.2s ease; }
          .reels-lightbox .lightbox-container .lightbox-content .lightbox-media .lightbox-unmute:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.05); } }
    @media (max-width: 768px) {
      .reels-lightbox .lightbox-container .lightbox-side-footer .lightbox-likes .likes-icon {
        display: inline-block !important;
        background-image: url("//www.instagram.com/static/bundles/sprite_core.png/fb48443ec9d3.png") !important;
        background-repeat: no-repeat !important;
        background-position: -104px -357px !important;
        width: 24px !important;
        height: 24px !important;
        vertical-align: middle !important;
        margin: 10px 0; } }
    @media (max-width: 480px) {
      .reels-lightbox .lightbox-container .lightbox-container .lightbox-content .lightbox-side {
        max-height: 40vh;
        padding: 12px calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 12px); }
        .reels-lightbox .lightbox-container .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-cta {
          padding: 10px 12px;
          font-size: 13px; } }
    @media (min-width: 769px) and (orientation: landscape) {
      .reels-lightbox .lightbox-container .lightbox-container .lightbox-content .lightbox-columns {
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-template-rows: 1fr;
        height: 100vh; }
      .reels-lightbox .lightbox-container .lightbox-container .lightbox-content .lightbox-media {
        grid-column: 1;
        grid-row: 1;
        min-height: auto;
        max-height: 100vh; }
      .reels-lightbox .lightbox-container .lightbox-container .lightbox-content .lightbox-side {
        grid-column: 2;
        grid-row: 1;
        width: 300px;
        max-height: 100vh;
        border-top: none;
        border-left: 1px solid #efefef; } }
  .reels-lightbox .new-design-home #widget-instagram .title-content {
    margin-top: -2em; }

/* Mobile tweaks: reduce media height to give more room to caption */
@media (max-width: 768px) {
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-media {
    max-height: 55dvh !important;
    min-height: 55dvh !important; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side {
    max-height: 45dvh !important;
    min-height: 45dvh !important; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-header {
    margin-bottom: 0px; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-caption {
    height: 63% !important; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer {
    position: absolute;
    bottom: 0%;
    margin: auto;
    width: 92%;
    background: white; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-likes {
    padding-bottom: 10px;
    margin-top: 10px; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-side .lightbox-side-footer .lightbox-likes .lightbox-cta {
    font-size: 12px !important; }
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-navigation {
    top: 40% !important; }
  /* Ensure stacked columns take full viewport height on mobile */
  .reels-lightbox .lightbox-container .lightbox-content .lightbox-columns {
    min-height: 100vh !important;
    /* fallback lama */
    height: 100dvh !important; } }