:root {
    --primary-blue: #1e3a8a;
    --accent-blue: #3b82f6;
    --success-green: #059669;
    --bg-slate: #f1f5f9;
    --text-dark: #0f172a;
    --white: #ffffff;
}

body {
    background-color: var(--bg-slate);
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.feedback-container {
    /* WIDER SETTING */
    max-width: 850px; 
    width: 100%;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.feedback-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    padding: 50px 40px; /* Slightly more vertical padding */
    text-align: center;
    color: white;
}

.feedback-header h1 { 
    font-size: 2.8rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    margin: 15px 0; 
    line-height: 1.2;
}

.back-link { 
    color: rgba(255,255,255,0.8); 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 0.9rem; 
    letter-spacing: 0.5px;
}

.feedback-body { padding: 50px 60px; } /* Increased side padding for the wider look */

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

.form-group label { 
    display: block; 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 0.9rem; 
    margin-bottom: 10px; 
    color: var(--primary-blue); 
}

input, textarea { 
    width: 100%; 
    padding: 18px; 
    border: 2px solid #e2e8f0; 
    border-radius: 14px; 
    font-size: 1.05rem; 
    transition: border-color 0.2s;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Stars & Moods */
#mood-wrapper { 
    text-align: center; 
    margin-bottom: 20px; 
    background: #f8fafc; 
    padding: 20px; 
    border-radius: 20px; 
    border: 1px dashed #cbd5e1; 
}

#mood-emoji { font-size: 65px; display: block; transition: transform 0.2s; }
#mood-text { font-weight: 800; text-transform: uppercase; font-size: 1rem; margin-top: 10px; display: block; }

.stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 15px; }
.stars input { display: none; }
.stars label { font-size: 45px; color: #cbd5e1; cursor: pointer; transition: color 0.2s; }

.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #fbbf24; }

.submit-btn {
    width: 100%; 
    padding: 22px; 
    background: var(--primary-blue); 
    color: white; 
    border: none;
    border-radius: 16px; 
    font-size: 1.2rem; 
    font-weight: 900; 
    cursor: pointer; 
    text-transform: uppercase;
    transition: transform 0.2s, background 0.2s;
}

.submit-btn:hover { background: #1e40af; transform: translateY(-2px); }

.success-container { 
    background: #ecfdf5; 
    border: 2px solid var(--success-green); 
    padding: 25px; 
    border-radius: 20px; 
    text-align: center; 
    margin-bottom: 30px; 
}