/**
 * Newsletter slide-in popup.
 *
 * Standalone stylesheet (see layouts/app.blade.php) so it can be added or removed
 * without rebuilding the Vite bundle. Theme values are inlined:
 *   #132136 primary · #ff7F01 accent · #212529 dark · headings font "industry"
 */
.newsletter-popup {
   position: fixed;
   right: 1.5rem;
   bottom: 1.5rem;
   z-index: 1080;
   width: 100%;
   max-width: 380px;
   padding: 1.75rem 1.5rem 1.25rem;
   background-color: #132136;
   color: #fff;
   border-radius: 0.5rem;
   box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);

   /* Hidden / off-screen by default; JS toggles .is-visible to slide it in. */
   opacity: 0;
   visibility: hidden;
   transform: translateY(120%);
   transition: transform 0.45s ease, opacity 0.45s ease, visibility 0s linear 0.45s;
}

.newsletter-popup.is-visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   transition: transform 0.45s ease, opacity 0.45s ease;
}

.newsletter-popup__close {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
   width: 2rem;
   height: 2rem;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.7);
   background: transparent;
   border: 0;
   font-size: 1rem;
   line-height: 1;
   cursor: pointer;
   transition: color 0.2s ease;
}

.newsletter-popup__close:hover,
.newsletter-popup__close:focus-visible {
   color: #fff;
}

.newsletter-popup__title {
   font-family: "industry", sans-serif;
   font-weight: 900;
   font-size: 1.5rem;
   text-transform: uppercase;
   margin-bottom: 0.35rem;
   color: #fff;
}

.newsletter-popup__subtitle {
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 1rem;
}

.newsletter-popup__points {
   list-style: none;
   padding: 0;
   margin: 0 0 1.25rem;
}

.newsletter-popup__points li {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
   font-size: 0.9rem;
   line-height: 1.35;
   margin-bottom: 0.5rem;
}

.newsletter-popup__points li .bi {
   color: #ff7f01;
   font-weight: 700;
   flex-shrink: 0;
   margin-top: 0.1rem;
}

.newsletter-popup__form .form-control {
   background-color: #fff;
   color: #212529;
   border: 0;
   margin-bottom: 0.75rem;
}

.newsletter-popup__form .btn-primary {
   margin-top: 0.25rem;
}

.newsletter-popup__response:not(:empty) {
   margin-bottom: 0.5rem;
   color: rgba(255, 255, 255, 0.9);
}

.newsletter-popup__actions {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 0.4rem;
   margin-top: 0.9rem;
}

.newsletter-popup__link {
   padding: 0;
   background: transparent;
   border: 0;
   color: rgba(255, 255, 255, 0.65);
   font-size: 0.8rem;
   text-decoration: underline;
   cursor: pointer;
   transition: color 0.2s ease;
}

.newsletter-popup__link:hover,
.newsletter-popup__link:focus-visible {
   color: #fff;
}

.newsletter-popup__sep {
   color: rgba(255, 255, 255, 0.4);
   font-size: 0.8rem;
}

.newsletter-popup__note {
   margin: 0.75rem 0 0;
   font-size: 0.7rem;
   text-align: center;
   color: rgba(255, 255, 255, 0.5);
}

/* Success confirmation: green checkmark beside the response message. The checkmark is
   hidden until JS adds .is-success on a successful signup. */
.newsletter-popup__confirm {
   display: flex;
   align-items: center;
   gap: 0.4rem;
}

.newsletter-popup__check {
   display: none;
   color: #28a745;
   font-size: 1.1rem;
   flex-shrink: 0;
}

.newsletter-popup.is-success .newsletter-popup__check {
   display: inline-flex;
}

/* Confirmation state: declutter to a "thank you" — hide the inputs/points/links but
   keep the title, subtitle, checkmark + message, and the button (relabeled "Close"). */
.newsletter-popup.is-success .newsletter-popup__points,
.newsletter-popup.is-success .newsletter-popup__email,
.newsletter-popup.is-success .newsletter-popup__error,
.newsletter-popup.is-success .newsletter-popup__actions {
   display: none;
}

.newsletter-popup.is-success .newsletter-popup__response {
   font-size: 0.95rem;
}

/* Mobile: full-width bottom sheet sliding up from the bottom edge. */
@media (max-width: 767.98px) {
   .newsletter-popup {
      right: 0;
      left: 0;
      bottom: 0;
      max-width: none;
      border-radius: 0.5rem 0.5rem 0 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .newsletter-popup {
      transition: opacity 0.2s ease, visibility 0s;
      transform: none;
   }

   .newsletter-popup.is-visible {
      transition: opacity 0.2s ease;
      transform: none;
   }
}