/* ----------------------------------------------------
       Premium Ribbon Slider Styles
       ---------------------------------------------------- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
      font-family: "Poppins", "Open Sans", Arial, sans-serif; /* fallback fonts */
      background-color: #f0f0f0; /* optional page background */
    }

    .premium-ribbon-slider {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .prs-ribbon-wrapper {
      position: absolute;
      inset: 0; /* top:0; left:0; width:100%; height:100%; */
      overflow: hidden;
    }
    .prs-ribbon-list-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .prs-ribbon-list {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      transition: left 0.35s ease-in-out;
      margin: 0;
      padding: 0;
      width: max-content;
    }
    
    /* Added centering styles */
    .prs-ribbon-list.centered {
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
    }
    .prs-ribbon-list {
      transition: left 0.35s ease-in-out, transform 0.35s ease-in-out;
    }
    .prs-ribbon-list li {
      list-style: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      white-space: nowrap;
      margin-right: 15px; /* spacing between slides */
    }
    .prs-slide-wrapper {
      height: 90%; /* a bit of breathing room for the slide */
      max-height: 100%; /* optional max-height for desktop */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: transform 0.3s ease;
      position: relative;
      min-width: 0; /* if you want no forced width, keep 0 */
    }
    .prs-slide-wrapper:hover {
      transform: scale(1.01); /* subtle hover effect */
    }
    .prs-slide-wrapper img,
    .prs-slide-wrapper video,
    .prs-slide-wrapper iframe {
      display: block;
      max-height: 100%;
      width: auto;
      height: 100%;
      background: #1d1d1d;
      border-radius: 6px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    }
    .prs-slide-wrapper iframe {
      min-width: 450px;
      height: 100%;
    }
    .prs-slide-wrapper video {
      object-fit: cover;
    }

    /* Simple spinner placeholder while each media item loads */
    .spinner {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 4px solid #444;
      border-top: 4px solid #999;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }
    .loading-text {
      color: #fff;
      font-size: 14px;
      margin-top: 8px;
    }
    .prs-loading-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* The bottom control bar (if enabled) */
    .prs-controls-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box; /* Include padding and border within width */
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0,0,0,0.7);
      padding: 10px 20px;
      gap: 10px;
    }
    @media (max-width: 600px) {
      .prs-controls-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 15px;
      }
    }

    .prs-share-block {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
    }
    .prs-share-toggle {
      background: #2e2e2e;
      color: #cfcfcf;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 1px;
      padding: 8px 14px;
      border-radius: 4px;
      border: 1px solid #444;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
      text-decoration: none;
    }
    .prs-share-toggle:hover {
      background: #444;
      color: #fff;
    }
    .prs-share-box {
      width: 0;
      height: 40px;
      overflow: hidden;
      transition: width 0.3s ease-in-out;
      display: flex;
      gap: 5px;
    }
    .prs-share-box.expanded {
      width: 200px; /* wide enough for 4 icons */
    }
    .prs-share-icon {
      flex: 0 0 40px;
      background: #444;
      color: #fff;   /* used as fill for the SVG (with fill="currentColor") */
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      text-decoration: none;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .prs-share-icon:hover {
      background: #666;
    }
    .prs-share-icon svg {
      width: 24px;
      height: 24px;
      fill: currentColor; /* so it inherits from .prs-share-icon color */
    }

    .prs-title-area {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #e3e3e3;
      max-width: 50%;
    }
    @media (max-width: 600px) {
      .prs-title-area {
        order: 3; /* push titles below controls for small screens */
        max-width: 100%;
        align-items: center;
      }
    }
    .prs-main-title {
      font-size: 14px;
      letter-spacing: 1px;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .prs-slide-title {
      color: #ddd;
      margin-left: 4px;
    }
    .prs-descr {
      font-size: 12px;
      color: #999;
      margin-top: 2px;
    }

    .prs-controls-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .prs-button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #2e2e2e;
      color: #fff;
      border: none;
      cursor: pointer;
      position: relative;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      transition: background 0.3s;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .prs-button:hover {
      background: #444;
    }
    .prs-button.btn-prev::before {
      content: "←";
      position: relative;
      top: -1px;
      font-weight: bold;
    }
    .prs-button.btn-next::before {
      content: "→";
      position: relative;
      top: -1px;
      font-weight: bold;
    }
    /* Play/Pause icons */
    .prs-button.btn-playpause.play::before {
      content: "▶"; /* play icon */
      font-size: 20px;
    }
    .prs-button.btn-playpause.pause::before {
      content: "⏸"; /* pause icon */
      font-size: 20px;
    }

    /* When the control bar is disabled, we still want left/right arrows, 
       but positioned over the slider (like the sample images). */
    .prs-no-controlbar .prs-controls-bar {
      display: none !important; /* hide entire bottom bar */
    }

    .prs-no-controlbar .prs-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      background: rgba(0,0,0,0.3);
      color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s;
    }
    .prs-no-controlbar .prs-arrow:hover {
      background: rgba(0,0,0,0.5);
    }
    .prs-no-controlbar .prs-arrow-left {
      left: 10px;
    }
    .prs-no-controlbar .prs-arrow-right {
      right: 10px;
    }

    /* For the injected HTML slides (type: htmlCode) */
    .prs-html-container {
      display: inline-block;
      white-space: nowrap;
      height: 100%;
      background-color: transparent !important;
      overflow-y: auto; /* keep if you want vertical scrolling */
    }



    
 
/* -------------------------------------------
       FULLSCREEN MODAL (LIGHTBOX) STYLES
       ------------------------------------------- */
    /* The fullscreen overlay still covers the entire screen */
    .prs-fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; /* or 100% */
      height: 100vh; /* or 100% */
      background: rgba(0,0,0,0.85);
      z-index: 9999;
      /* Instead of display:none/block, just toggle a class as before */
      display: none;
    }

    .prs-fullscreen-overlay.active {
      display: flex;                /* <--- use flex here */
      align-items: center;          /* vertically center the content */
      justify-content: center;      /* horizontally center the content */
    }

    /* The top bar pinned to the very top, with a brand icon and a close button */
    .prs-fullscreen-topbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: rgba(0,0,0,0.3);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
    }
    .prs-fullscreen-brand img {
      height: 32px;
      width: 32px;
      object-fit: cover;
      border-radius: 4px;
      margin-top: 2px;
    }
    .prs-fullscreen-close {
      width: 40px; 
      height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,0.6);
      color: #fff;
      cursor: pointer;
      font-size: 28px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }
    .prs-fullscreen-close:hover {
      background: rgba(0,0,0,0.85);
    }

    .prs-fullscreen-content {
      position: relative;   /* or 'static' */
      max-width: 100vw;     /* do not limit to 90% if you want full potential */
      max-height: 100vh;
      width: auto;          /* let content size itself unless you want 100% */
      height: auto;
      overflow: hidden;
    }

    /* The container that holds the loaded image/video/iframe/etc. */
    .prs-fullscreen-media {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      overflow: hidden;
    }

    /*
      General rule: images & videos use object-fit: contain.
      Iframes get a separate rule so YouTube is large & 16:9.

      This ensures the item never exceeds .prs-fullscreen-content
      (which is 90% of the viewport) and keeps a good aspect ratio.
    */
    .prs-fullscreen-media > * {
      display: block; 
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;   /* so big images scale down, small images are not stretched */
      margin: auto;          /* if you’re using a non-flex wrapper, ensures centered */
    }
    .prs-fullscreen-media img,
    .prs-fullscreen-media video {
      width: auto;
      height: auto;
      object-fit: contain;
      max-height: 100vh;
      max-width: 100vw;
    }
    /* Make YouTube (and other) iframes use 16:9 ratio, up to 100% width */
    .prs-fullscreen-media iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; /* modern browsers only */
      max-width: 100%;
      max-height: 100%;
      background: #000; /* letterboxing area */
    }

    /* The next/prev arrows pinned to the left & right edges, 
       always centered vertically on the screen. */
    .prs-fullscreen-arrow {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 50px; 
      height: 50px;
      border-radius: 50%;
      background: rgba(0,0,0,0.4);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: bold;
      font-size: 32px;
      transition: background 0.3s;
      z-index: 10002;
    }
    .prs-fullscreen-arrow:hover {
      background: rgba(0,0,0,0.7);
    }
    .prs-fullscreen-arrow-left {
      left: 15px;
    }
    .prs-fullscreen-arrow-right {
      right: 15px;
    }

    @media (max-width: 600px) {
      .prs-fullscreen-arrow {
        width: 40px; 
        height: 40px;
        font-size: 24px;
      }
      .prs-fullscreen-close {
        width: 35px; 
        height: 35px;
        font-size: 24px;
      }
    }





    /*CSS for cursor styling during drag*/
    .prs-ribbon-list-wrapper.dragging {
      cursor: grab;
    }
    .prs-ribbon-list-wrapper.dragging * {
      pointer-events: none;
    }


    .prs-fullscreen-media {
      touch-action: pan-y; /* Improve swipe behavior */
      user-select: none; /* Prevent text selection during drag */
    }
    
    .prs-fullscreen-media.dragging {
      cursor: grab;
    }