/* ===================================
   Valentine Request - Styles
   Design romantique et moderne
   =================================== */

/* Reset et variables */
:root {
    --primary-color: #ff6b9d;
    --secondary-color: #ffc2d1;
    --accent-color: #ff8fab;
    --text-dark: #2d2d2d;
    --text-light: #666;
    --bg-gradient-start: #fff0f5;
    --bg-gradient-end: #ffe4e1;
    --card-bg: rgba(255, 255, 255, 0.95);
    --shadow-soft: 0 10px 40px rgba(255, 107, 157, 0.2);
    --shadow-hover: 0 15px 50px rgba(255, 107, 157, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Animation des étoiles en arrière-plan */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 
        100px 200px rgba(255, 192, 203, 0.5),
        200px 100px rgba(255, 192, 203, 0.5),
        300px 300px rgba(255, 192, 203, 0.5),
        400px 150px rgba(255, 192, 203, 0.5),
        500px 250px rgba(255, 192, 203, 0.5),
        150px 350px rgba(255, 192, 203, 0.5),
        250px 50px rgba(255, 192, 203, 0.5),
        350px 400px rgba(255, 192, 203, 0.5),
        450px 320px rgba(255, 192, 203, 0.5),
        550px 180px rgba(255, 192, 203, 0.5);
    animation: sparkle 3s infinite alternate;
}

.stars::after {
    animation-delay: 1.5s;
    box-shadow: 
        120px 180px rgba(255, 182, 193, 0.5),
        220px 120px rgba(255, 182, 193, 0.5),
        320px 280px rgba(255, 182, 193, 0.5),
        420px 170px rgba(255, 182, 193, 0.5),
        520px 230px rgba(255, 182, 193, 0.5),
        170px 330px rgba(255, 182, 193, 0.5),
        270px 70px rgba(255, 182, 193, 0.5),
        370px 380px rgba(255, 182, 193, 0.5),
        470px 300px rgba(255, 182, 193, 0.5),
        570px 200px rgba(255, 182, 193, 0.5);
}

@keyframes sparkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Container principal */
.container {
    max-width: 650px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Card principale */
.card {
    background: var(--card-bg);
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* Animation d'apparition */
.fade-in {
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Décoration de cœurs */
.hearts-decoration {
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
}

.heart {
    display: inline-block;
    margin: 0 10px;
    animation: float 3s ease-in-out infinite;
}

.heart:nth-child(2) {
    animation-delay: 0.5s;
}

.heart:nth-child(3) {
    animation-delay: 1s;
}

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

/* Typographie */
.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(255, 107, 157, 0.1);
}

/* Éléments mignons supplémentaires */
.highlight {
    color: var(--primary-color);
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.highlight::after {
    content: '💕';
    position: absolute;
    right: -25px;
    top: -5px;
    font-size: 0.8em;
    animation: heartbeat 1.5s infinite;
}

.final-words {
    font-style: italic;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.05), rgba(255, 194, 209, 0.05));
    padding: 20px;
    border-radius: 12px;
    border-left: 3px solid var(--accent-color);
    margin-top: 25px;
}

.letter-content {
    margin-bottom: 35px;
    line-height: 1.8;
    color: var(--text-dark);
}

.greeting {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.3em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.message {
    font-size: 1.05em;
    margin-bottom: 18px;
    color: var(--text-light);
}

.question {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    text-align: center;
    color: var(--primary-color);
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 194, 209, 0.1));
    border-radius: 15px;
    border-left: 4px solid var(--primary-color);
}

.clarification {
    font-size: 0.95em;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.6;
}

/* Formulaire */
.valentine-form {
    margin-top: 35px;
}

.form-group {
    margin-bottom: 25px;
}

/* Radio buttons personnalisés */
.radio-container {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
}

.radio-container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-label {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid var(--secondary-color);
    border-radius: 15px;
    transition: all 0.3s ease;
    font-size: 1.1em;
}

.radio-label .emoji {
    font-size: 1.5em;
    margin-right: 15px;
    transition: transform 0.3s ease;
}

.radio-label .text {
    color: var(--text-dark);
    font-weight: 500;
}

.radio-container:hover .radio-label {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.radio-container:hover .emoji {
    transform: scale(1.2);
}

.radio-container input[type="radio"]:checked ~ .radio-label {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 107, 157, 0.3);
}

.radio-container input[type="radio"]:checked ~ .radio-label .text {
    color: white;
    font-weight: 600;
}

.radio-container input[type="radio"]:checked ~ .radio-label .emoji {
    transform: scale(1.3);
}

/* Textarea */
.textarea-label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1.05em;
}

textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--secondary-color);
    border-radius: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.7);
    resize: vertical;
    transition: all 0.3s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.char-counter {
    display: block;
    text-align: right;
    margin-top: 5px;
    color: var(--text-light);
    font-size: 0.85em;
}

/* Bouton de soumission */
.submit-btn {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 30px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 107, 157, 0.4);
}

.submit-btn:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 1.3em;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Signature */
.signature {
    margin-top: 35px;
    text-align: center;
    font-size: 1.1em;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.6;
}

.signature em {
    font-family: 'Playfair Display', serif;
    font-size: 1.3em;
    color: var(--primary-color);
    font-weight: 600;
}

/* Messages d'erreur et de succès */
.error {
    background: #ffe0e0;
    color: #d8000c;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #d8000c;
    text-align: center;
}

/* Page de remerciement */
.thank-you-card {
    text-align: center;
}

.thank-you-content {
    text-align: left;
}

.celebration {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    margin: 25px 0;
}

.reason-display {
    margin: 30px 0;
    padding: 25px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.08), rgba(255, 194, 209, 0.08));
    border-radius: 15px;
    border-left: 4px solid var(--accent-color);
}

.reason-label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.05em;
}

.reason-text {
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 1.05em;
}

.final-note {
    margin-top: 40px;
    font-family: 'Playfair Display', serif;
    font-size: 1.4em;
    color: var(--primary-color);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card {
        padding: 35px 25px;
        border-radius: 20px;
    }
    
    .main-title {
        font-size: 2.2em;
    }
    
    .question {
        font-size: 1.3em;
        padding: 15px;
    }
    
    .radio-label {
        padding: 15px 20px;
        font-size: 1em;
    }
    
    .submit-btn {
        font-size: 1.1em;
        padding: 16px 25px;
    }
    
    .hearts-decoration {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px;
    }
    
    .card {
        padding: 25px 20px;
    }
    
    .main-title {
        font-size: 1.8em;
    }
    
    .greeting {
        font-size: 1.1em;
    }
    
    .message {
        font-size: 0.95em;
    }
    
    .question {
        font-size: 1.1em;
        padding: 12px;
    }
    
    .radio-label .emoji {
        font-size: 1.3em;
    }
    
    .submit-btn {
        font-size: 1em;
        padding: 14px 20px;
    }
}

/* Animations supplémentaires */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(0.9); }
    20%, 40%, 60%, 80% { transform: scale(1.1); }
    50%, 70% { transform: scale(1.05); }
}

.heart:hover {
    animation: heartbeat 1s infinite;
}