/* Pop-in container that covers the entire viewport */
#popin-holder {
      position: absolute;
      pointer-events: none;
      /* Makes holder non-interactive */
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 8;
      /* Ensures it stays on top */
}

/* Main styling for the pop-in content */
.bloc-popin {
      pointer-events: all;
      position: fixed;
      bottom: 1rem;
      /* Position above the bottom of the screen */
      left: 1rem;
      /* Position from the left edge */
      display: flex;
      color: var(--sfra-black);
      overflow: hidden;
      text-transform: uppercase;
      transform: translateY(120%);
      /* Hidden by default */
      transition: transform 1s cubic-bezier(0, 1.69, 1, 1);
      /* Smooth slide-in */
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.1);
      /* Adds shadow */
      border: 1px solid #FFF;
      align-items: flex-end;
      line-height: 1.25;
      flex-direction: column;
      /* Stack elements vertically */
}

/* Display pop-in when ready */
.bloc-popin.ready {
      transform: translateY(0);
}

/* Hide pop-in on scroll with Headroom */
#header:not(.-searchMenuOpen) ~ .footer .bloc-popin {
      transform: translateY(120%);
      transition: transform 2s cubic-bezier(0, 1.69, 1, 1);
}

/* Set the width of pop-in children */
.bloc-popin>* {
      width: 100%;
}

/* Uppercase font for specific pop-in text */
.bloc-popin .font-caps {
      text-transform: uppercase;
}

/* Styling for the call-to-action button */
.bloc-popin .etam-cta {
      border: 1px solid #000;
      padding: .75rem;
      /* Space around button text */
      color: #FFF;
      border-radius: 4px;
      white-space: nowrap;
      pointer-events: none;
}

/* Call-to-action style within media section */
.bloc-popin .bloc-media .etam-cta {
      background: #000;
      color: #FFF;
}

/* Close button for pop-in */
.bloc-popin .close-button {
      all: unset;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      /* Rounded shape */
      background: transparent;
      border: 1px solid #000;
      position: absolute;
      z-index: 2;
      right: .5rem;
      top: .5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
}

/* Close button icon */
.bloc-popin .close-button .icon-close {
      position: relative;
      width: 12px;
      height: 12px;
      background: #000;
}

/* Media link styling */
.img-link {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
}

/* Pop-in text container */
.bloc-popin .bloc-text {
      padding: calc(24px + 1rem) 1.75rem 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      grid-gap: .5rem;
      /* Space between items */
      background: #FFF;
}

/* Pop-in tag text */
.bloc-popin .title-01 {
      background: #000;
      color: #fff;
      padding: 2px 4px 2px;
      /* Space around tag */
      line-height: 1;
}

/* Pop-in main title text */
.bloc-popin .popin-title {
      font-size: 2rem;
      /* Larger title font size */
      line-height: 1;
      font-weight: 500;
      text-align: left;
}

/* Coupon block for discount code */
.bloc-coupon {
      display: flex;
      align-items: center;
      width: 100%;
      background: #FFF;
      padding: .5rem .5rem .5rem 1.5rem;
      cursor: pointer;
      /* Shows pointer on hover */
}

/* Coupon content container */
.bloc-coupon .bloc-content {
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      text-align: left;
      width: 100%;
      color: #000;
}

/* Animation for text when coupon is copied */
.bloc-coupon .bloc-content span:first-child {
      transition: transform .4s;
}

/* Copy confirmation message */
.bloc-coupon .bloc-content span.msg-copie {
      position: absolute;
      bottom: 0;
      transform: translateY(100%);
      transition: transform .4s;
}

/* Show confirmation message when coupon is copied */
.bloc-coupon.copie-success .bloc-content span.msg-copie {
      transform: translateY(0);
}

/* Hide original message after copy */
.bloc-coupon.copie-success .bloc-content span:first-child {
      transform: translateY(-100%);
}

/* Responsive adjustments for mobile devices */
@media screen and (max-width: 768px) {

      /* Pop-in holder size for mobile */
      #popin-holder {
            height: calc(var(--vh, 1vh) * 100);
      }

      /* Logo width for small screens */
      .bloc-popin .logo {
            width: 12vw;
      }

      /* Adjust pop-in width and position */
      .bloc-popin {
            width: calc(100% - 1rem);
            left: .5rem;
            bottom: .5rem;
      }

      /* Padding adjustments for pop-in text */
      .bloc-popin .bloc-text {
            padding: calc(24px + 1rem) 1rem 1.25rem;
      }

      /* Smaller title font size for mobile */
      .bloc-popin .popin-title {
            font-size: 1.5rem;
      }

      /* Reduced padding for coupon block on mobile */
      .bloc-coupon {
            padding: .5rem 1rem;
      }
}

/* Responsive adjustments for larger screens */
@media screen and (min-width: 1200px) {

      /* Close button hover effect */
      .bloc-popin .close-button:hover {
            background: #FFF;
      }

      /* Icon hover effect */
      .bloc-popin .close-button:hover .icon-close {
            background: #000;
      }

      /* Call-to-action button hover effect */
      .bloc-popin .bloc-coupon:hover .etam-cta {
            background: #FFF;
            color: #000;
      }
}

/* Only mobile */
@media screen and (max-width: 1023px) {
      .bloc-popin .heading-01 {
            font-size: 28px;
      }
}