/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Style global pour les messages */
body{
  background-color: #e2e9df;
  --primary-color: #FF4B91;
  --secondary-color: #FFB4B4;
  --dark-color: #2C3333;
}

.main-header{
 background-color: #ff486a;
 color: white;
 padding-bottom: 1%;
 padding-top: 1%; 
}

        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
        }



        .brand-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #adb5bd;
            text-align: center;
            margin-bottom: 3rem;
        }

        .form-container {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .form-control {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-light);
            padding: 0.75rem 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--primary-color);
            color: var(--text-light);
            box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
        }

        .form-control::placeholder {
            color: #adb5bd;
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 25px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
        }

        .social-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-light);
            padding: 0.75rem;
            border-radius: 10px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .social-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: var(--text-light);
        }


        .animation-container {
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3;
            text-align: center;
            padding: 2rem;
            color: white;
            width: 50%;
            margin: 0 auto;
        }

        .step {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
            margin-bottom: 1.5rem;
            padding: 1.2rem;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .step.active {
            opacity: 1;
            transform: translateY(0);
        }

        .step-number {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
            border-radius: 50%;
            line-height: 50px;
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .step-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .step-description {
            font-size: 1rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
        }

        .typewriter {
            overflow: hidden;
            border-right: 2px solid var(--primary-color);
            white-space: nowrap;
            animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--primary-color) }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        /* Responsive Design */
        @media (max-width: 991.98px) {
            .hero-section {
                flex-direction: column;
            }
            
            .left-panel, .right-panel {
                min-height: 50vh;
            }
            
            .brand-title {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 767.98px) {
            .brand-title {
                font-size: 2rem;
            }
            
            .form-container {
                padding: 1.5rem;
            }
            
            .left-panel {
                padding: 1rem;
            }
        }

        @media (max-width: 575.98px) {
            .brand-title {
                font-size: 1.5rem;
            }
            
            .subtitle {
                font-size: 1rem;
            }
        }

        /* Animation Controls */
        .fade-animation .step {
            transition: opacity 1s ease, transform 1s ease;
        }

        .slide-animation .step {
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.nav-link {
  color: white !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.btn-custom {
  background-color: #ff486a;
  color: white;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  color: #ff486a;
  background-color: white;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.comment-ca-marche{
  background-color: #edede3;
}

.feature-card {
  border-radius: 15px;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
}

.testimonial-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-color);
}

.card{
  border: none;
  border-radius: 0%;
  background-color: transparent;
  color: white;
}
/* uploader design */
.image-upload-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 15px;
}

.upload-preview {
  width: 100%;
  height: 100%;
  border: 2px dashed #1a73e8;
  border-radius: 8px;
  background-color: #e6f2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.upload-preview img {
  max-width: 40px;
  max-height: 40px;
  margin-bottom: 10px;
}

.upload-preview img.preview-active {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.upload-text {
  font-size: 10px;
  font-weight: bold;
  color: #1a73e8;
  margin: 0 5px 5px;
}

.upload-subtext {
  font-size: either;
  color: #5f6368;
  margin: 0 5px;
  font-size: 8px;
}

.photo-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.text-hidden {
  display: none;
}
/* uploader design */

/* profile design */
.profile-container {
  height: 100vh;
  position: relative;
  overflow-y: scroll;
  background-color: #000;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.7) 50%,
      rgba(0, 0, 0, 1) 100%
  );
  transition: background 0.3s ease;
}

.content {
  position: relative;
  z-index: 5;
  padding: 20px;
  color: white;
  margin-top: 60vh;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.7) 50%,
      rgba(0, 0, 0, 0.9) 100%
  );
  
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 15px;
}

.profile-info {
  margin-bottom: 30px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.tag {
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 15px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  backdrop-filter: blur(5px);
}

.button-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  color: white;
  transition: all 0.3s ease;
}

.button-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-right: 15px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
}

.info-value {
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

/* Couleurs spécifiques pour chaque icône */
.gender-bg { background: rgba(255, 99, 132, 0.2); }
.birthday-bg { background: rgba(75, 192, 192, 0.2); }
.height-bg { background: rgba(153, 102, 255, 0.2); }
.work-bg { background: rgba(255, 159, 64, 0.2); }
.heart-bg { background: rgba(255, 99, 132, 0.2); }
.education-bg { background: rgba(54, 162, 235, 0.2); }
.smoking-bg { background: rgba(201, 203, 207, 0.2); }
.drinking-bg { background: rgba(255, 205, 86, 0.2); }
.exercise-bg { background: rgba(75, 192, 192, 0.2); }
.personality-bg { background: rgba(153, 102, 255, 0.2); }
.completion-bg { background: rgba(54, 162, 235, 0.2); }
.location-bg { background: rgba(255, 159, 64, 0.2); }

.progress-bar-wrapper {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  border-radius: 3px;
  transition: width 0.3s ease;
}
/* profile design fin */

.message {
    padding: 10px;
    margin: 5px 0;
    border-radius: 10px;
    max-width: 70%;
    clear: both;
  }
  
  /* Messages envoyés par l'utilisateur actuel */
  .message.sent {
    background-color: #d1f5d3; /* Vert clair */
    text-align: right;
    float: right;
  }
  
  /* Messages reçus des autres utilisateurs */
  .message.received {
    background-color: #f1f0f0; /* Gris clair */
    text-align: left;
    float: left;
  }
  
  .progress-bar-animated {
    transition: width 1s ease-in-out;
  }
  
  .progress-bar-striped {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
  }
  
  @keyframes progress-bar-stripes {
    0% { background-position-x: 1rem; }
  }


/*------mqs----------*/
@media (min-width: 320px) and (max-width: 440px) {

  .hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    background-image: url('https://res.cloudinary.com/aseed/image/upload/v1732638775/sauri/assets/acc-hero-mobile_uohnne_nndyim.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: auto;
    padding-left: 5%;
  }

  .hero-section h1{
    color: #ff486a;
    font-size: 65px;
    margin-top: 70%;
    text-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .hero-section h6{
    color: #000000;
    font-size: 18px;
  }
  
  .hero-section p{
    color: #000000;
    font-size: 15px;
  }

  .btn-custom {
    background-color: #ff486a;
    color: white;
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-bottom: 5%;
  }
  




}