.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);border-radius:12px 12px 0 0}.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 .role-card-wrapper{display:flex;flex-direction:column}.volunteer-signup-container>.user-details{display:none}.volunteer-signup-container .user-details-drawer{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0,1,0,1),opacity 0.3s ease;opacity:0;margin-top:0;background:#f9f9f9;border-radius:0 0 12px 12px;border:1px solid transparent}.volunteer-signup-container .user-details-drawer.is-open{max-height:500px;transition:max-height 0.5s ease-in-out,opacity 0.4s ease 0.1s;opacity:1;border-color:#eee;border-top:none;margin-top:-10px;box-shadow:0 8px 15px rgba(0,0,0,0.05)}.volunteer-signup-container .drawer-inner{padding:25px 20px 20px}.volunteer-signup-container .drawer-instructions{margin-top:0;margin-bottom:15px;font-size:0.95rem;color:#444}.volunteer-signup-container .drawer-inner .input-group{display:block;margin-bottom:0}.volunteer-signup-container .dynamic-input{width:100%;padding:16px;margin-bottom:15px;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;box-sizing:border-box;background-color:#ffffff;font-family:inherit;transition:border-color 0.3s ease,box-shadow 0.3s ease}.volunteer-signup-container .dynamic-input:focus{outline:none;border-color:#0073aa;box-shadow:0 0 0 3px rgba(0,115,170,0.15)}.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 .drawer-inner .submit-btn{margin-top:5px}.volunteer-signup-container .submit-btn:hover{background-color:#005177}