.volunteer-signup-container{max-width:1200px;margin:0 auto;font-family:sans-serif;text-align:center}.volunteer-signup-container .role-grid{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:30px}.volunteer-signup-container .role-card{cursor:pointer;position:relative}.volunteer-signup-container .role-card input{position:absolute;opacity:0}.volunteer-signup-container .card-content{border:2px solid #eee;border-radius:12px;padding:20px;background:#fff;position:relative;z-index:1}.volunteer-signup-container .card-content img{width:100%;height:220px;border-radius:8px;object-fit:cover;display:block;margin-bottom:15px}.volunteer-signup-container .card-content h3{margin:10px 0 5px;font-size:1.2rem;color:#333}.volunteer-signup-container .spots-left{display:block;font-weight:bold;color:#2e7d32;font-size:1rem;margin-top:10px}.volunteer-signup-container .role-card input:checked+.card-content{border-color:#0073aa;background-color:#f0f8ff;transform:translateY(-8px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}.volunteer-signup-container .role-card.is-full{opacity:0.5;pointer-events:none}.volunteer-signup-container .role-card.is-full .spots-left{color:#d63638}.volunteer-signup-container .user-details{max-width:500px;margin:40px auto 0;background:#f9f9f9;padding:30px;border-radius:12px;border:1px solid #eee}.volunteer-signup-container .input-group{display:flex;gap:12px;margin-bottom:18px}.volunteer-signup-container .user-details input{width:100%;padding:14px;margin-bottom:18px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box}.volunteer-signup-container .submit-btn{background-color:#0073aa;color:white;padding:16px 35px;border:none;border-radius:6px;font-size:1.2rem;font-weight:bold;cursor:pointer;transition:background-color 0.3s ease;width:100%}.volunteer-signup-container .submit-btn:hover{background-color:#005177}