/**
 * BWA Popup Newsletter - Front-end Styles
 */

/* Overlay */
.bwa-popup-overlay {
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  bottom          : 0;
  background      : rgba(0, 0, 0, 0.6);
  backdrop-filter : blur(4px);
  z-index         : 99999;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 20px;
  opacity         : 0;
  transition      : opacity 0.3s ease;
}

.bwa-popup-overlay.bwa-popup-visible {
  opacity : 1;
}

/* Container principal */
.bwa-popup-container {
  position      : relative;
  background    : #ffffff;
  border-radius : 16px;
  box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width     : 500px;
  width         : 100%;
  max-height    : 90vh;
  overflow-y    : auto;
  transform     : scale(0.9) translateY(20px);
  transition    : transform 0.3s ease;
}

.bwa-popup-overlay.bwa-popup-visible .bwa-popup-container {
  transform : scale(1) translateY(0);
}

/* Bouton fermer */
.bwa-popup-close {
  position        : absolute;
  top             : 16px;
  right           : 16px;
  background      : rgba(0, 0, 0, 0.05);
  border          : none;
  border-radius   : 50%;
  width           : 36px;
  height          : 36px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  transition      : all 0.2s ease;
  z-index         : 10;
  color           : #666;
}

.bwa-popup-close:hover {
  background : rgba(0, 0, 0, 0.1);
  color      : #333;
  transform  : rotate(90deg);
}

/* Contenu */
.bwa-popup-content {
  padding : 40px 32px 32px;
}

/* Header */
.bwa-popup-header {
  text-align    : center;
  margin-bottom : 32px;
}

.bwa-popup-title {
  font-size   : 28px;
  font-weight : 700;
  color       : #2c3248;
  margin      : 0 0 8px 0;
  line-height : 1.2;
}

.bwa-popup-subtitle {
  font-size : 16px;
  color     : #666;
  margin    : 0;
}

/* Offre */
.bwa-popup-offer {
  text-align    : center;
  margin-bottom : 32px;
  padding       : 24px;
  background    : linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius : 12px;
  border        : 2px dashed #dee2e6;
}

.bwa-popup-badge {
  display                 : inline-block;
  font-size               : 42px;
  font-weight             : 800;
  color                   : #2c3248;
  margin-bottom           : 8px;
  line-height             : 1;
  background              : var(--gradient-user-context);
  background-size         : 200% 200%;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
}

.bwa-popup-offer-text {
  font-size   : 16px;
  color       : #555;
  margin      : 0;
  font-weight : 500;
}

/* Formulaire */
.bwa-popup-form {
  margin-bottom : 24px;
}

.bwa-form-group {
  margin-bottom : 16px;
}

.bwa-form-input {
  width         : 100%;
  padding       : 14px 16px;
  border        : 2px solid #e0e0e0;
  border-radius : 8px;
  font-size     : 16px;
  transition    : all 0.2s ease;
  box-sizing    : border-box;
  font-family   : inherit;
}

.bwa-form-input:focus {
  outline      : none;
  border-color : #667eea;
  box-shadow   : 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.bwa-form-input::placeholder {
  color : #999;
}

.bwa-form-submit {
  width           : 100%;
  padding         : 16px;
  background      : var(--gradient-user-context);
  background-size : 200% 200%;
  color           : #ffffff;
  border          : none;
  border-radius   : 8px;
  font-size       : 16px;
  font-weight     : 600;
  cursor          : pointer;
  transition      : all 0.3s ease;
  box-shadow      : 0 4px 12px rgba(102, 126, 234, 0.3);
  position        : relative;
  overflow        : hidden;
}

.bwa-form-submit:hover {
  transform  : translateY(-2px);
  box-shadow : 0 6px 16px rgba(102, 126, 234, 0.4);
}

.bwa-form-submit:active {
  transform : translateY(0);
}

.bwa-form-submit:disabled {
  opacity   : 0.7;
  cursor    : not-allowed;
  transform : none;
}

.bwa-submit-loading {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
}

.bwa-spinner {
  animation : bwa-spin 1s linear infinite;
}

@keyframes bwa-spin {
  from {
    transform : rotate(0deg);
  }
  to {
    transform : rotate(360deg);
  }
}

.bwa-form-note {
  text-align : center;
  font-size  : 13px;
  color      : #777;
  margin     : 12px 0 0 0;
}

/* Success message */
.bwa-popup-success {
  text-align : center;
  padding    : 24px;
}

.bwa-success-icon {
  width  : 64px;
  height : 64px;
  margin : 0 auto 20px;
  color  : #28a745;
}

.bwa-success-icon svg {
  width        : 100%;
  height       : 100%;
  stroke-width : 2;
}

.bwa-popup-success h3 {
  font-size   : 22px;
  font-weight : 700;
  color       : #2c3248;
  margin      : 0 0 12px 0;
}

.bwa-popup-success p {
  font-size   : 15px;
  color       : #666;
  margin      : 0 0 24px 0;
  line-height : 1.5;
}

.bwa-success-close {
  padding       : 12px 32px;
  background    : #f8f9fa;
  color         : #2c3248;
  border        : 2px solid #e0e0e0;
  border-radius : 8px;
  font-size     : 15px;
  font-weight   : 600;
  cursor        : pointer;
  transition    : all 0.2s ease;
}

.bwa-success-close:hover {
  background   : #e9ecef;
  border-color : #d0d0d0;
}

/* Error message */
.bwa-popup-error {
  margin-top    : 16px;
  padding       : 12px 16px;
  background    : #fff3cd;
  border        : 1px solid #ffc107;
  border-radius : 8px;
}

.bwa-error-message {
  font-size : 14px;
  color     : #856404;
  margin    : 0;
}

/* Footer */
.bwa-popup-footer {
  text-align  : center;
  padding-top : 24px;
  border-top  : 1px solid #e0e0e0;
}

.bwa-popup-footer p {
  font-size : 13px;
  color     : #999;
  margin    : 0;
}

/* Responsive */
@media (max-width : 576px) {
  .bwa-popup-container {
    max-width     : 100%;
    border-radius : 12px;
  }

  .bwa-popup-content {
    padding : 32px 24px 24px;
  }

  .bwa-popup-title {
    font-size : 24px;
  }

  .bwa-popup-badge {
    font-size : 36px;
  }

  .bwa-form-input,
  .bwa-form-submit {
    font-size : 15px;
  }
}

/* Animation d'entrée */
@keyframes bwa-fadeIn {
  from {
    opacity   : 0;
    transform : scale(0.9) translateY(20px);
  }
  to {
    opacity   : 1;
    transform : scale(1) translateY(0);
  }
}

/* Empêcher le scroll du body */
body.bwa-popup-open {
  overflow : hidden;
}