@layer yak-components {
     .yak-popup {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          font-family: var(--yak-primary-font, system-ui);

          /* Hide without display:none so GF can still init */
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition: opacity .3s ease, visibility .3s ease;
     }

     .yak-popup.yak-popup--active {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
     }

     .yak-popup__overlay {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.9);
          cursor: pointer;
     }

     .yak-popup__inner {
          position: relative;
          z-index: 10000;
          max-width: 900px;
          width: 90%;
          max-height: 90vh;
          border-radius: var(--yak-radius, 6px);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
          padding: 0;
          overflow: hidden;

          background-color: var(--yak-color-white, #fff);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;

          /* ensure inner stays visible even if GF tries to hide */
          display: block;
     }

     .yak-popup__close {
          position: absolute;
          top: 0.75rem;
          right: 0.75rem;
          font-size: 1.5rem;
          background: none;
          border: none;
          cursor: pointer;
          color: var(--yak-color-black, #000);
          z-index: 10001;
          transition: all 0.2s ease;
     }

     /* Mobile-optimized close button */
     @media (max-width: 768px) {
          .yak-popup__close {
               /* WCAG compliant touch target - minimum 44px */
               min-width: 44px;
               min-height: 44px;
               font-size: 1.8rem;
               
               /* Enhanced visibility */
               background: rgba(255, 255, 255, 0.95);
               border-radius: 50%;
               box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
               
               /* Better positioning for mobile */
               top: 0.5rem;
               right: 0.5rem;
               
               /* Ensure proper centering */
               display: flex;
               align-items: center;
               justify-content: center;
               
               /* Touch feedback */
               -webkit-tap-highlight-color: transparent;
          }
          
          .yak-popup__close:hover,
          .yak-popup__close:active {
               background: rgba(255, 255, 255, 1);
               transform: scale(1.05);
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          }
     }

     .yak-popup__title {
          font-size: var(--yak-font-xl, 1.5rem);
          line-height: var(--yak-lh-xl, 1.3);
          margin-top: 0;
          margin-bottom: 1rem;
     }

     .yak-popup__body {
          font-size: var(--yak-font-md, 1rem);
          line-height: var(--yak-lh-md, 1.65);
          margin-bottom: 1rem;
     }

     .yak-popup__form {
          margin-top: 1rem;
     }

     .yak-popup--single .yak-popup__content {
          text-align: center;
          padding: 2rem;
     }

     /* Scrolling container for popup content */
     .yak-popup__scroll-container {
          max-height: calc(90vh - 4rem);
          overflow-y: auto;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
     }

     .yak-popup__layout {
          display: flex;
          align-items: stretch;
          justify-content: center;
          gap: 0;
          height: 100%;
     }

     .yak-popup__side-image {
          flex: 1 1 40%;
          display: flex;
     }

     .yak-popup__side-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0;
     }

     .yak-popup__content {
          flex: 1 1 60%;
          padding: 2rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
     }

     .yak-popup--image_right .yak-popup__layout {
          flex-direction: row-reverse;
     }

     body.yak-popup--active {
          overflow: hidden;
     }

     @media (max-width: 768px) {
          /* Mobile popup sizing */
          .yak-popup__inner {
               width: 95%;
               max-height: 85vh;
               margin: 2.5vh auto;
          }
          
          /* Mobile scrolling container */
          .yak-popup__scroll-container {
               max-height: calc(85vh - 4rem);
          }
          
          .yak-popup__layout {
               flex-direction: column;
               height: 100%;
          }

          .yak-popup--image_left .yak-popup__layout {
               flex-direction: column;
          }

          .yak-popup--image_right .yak-popup__layout {
               flex-direction: column-reverse;
          }

          .yak-popup__side-image {
               flex: none;
               width: 100%;
               height: 200px;
          }

          .yak-popup__content {
               flex: 1;
               width: 100%;
               overflow-y: auto;
               -webkit-overflow-scrolling: touch;
          }
          
          /* Single layout mobile adjustments */
          .yak-popup--single .yak-popup__content {
               padding: 1.5rem;
               text-align: center;
               overflow-y: auto;
               -webkit-overflow-scrolling: touch;
          }
          
          /* Ensure close button is always accessible */
          .yak-popup__close {
               position: fixed;
               top: 1rem;
               right: 1rem;
               z-index: 10002;
          }
     }
}