/**
 * Quelld App Waitlist — Module Styles
 */

#quelld-waitlist-root { max-width: 640px; margin: 0 auto; background: #FFFFFF; overflow-x: hidden; }

.qw-phase { padding: 24px 20px 40px; }

/* Hero */
.qw-hero { text-align: center; margin-bottom: 32px; }
.qw-hero__badge { display: inline-block; padding: 6px 16px; border-radius: 20px; background: var(--quelld-purple-light, #EDE5FF); color: var(--quelld-purple, #954FE0); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.qw-hero__title { font-size: 28px; font-weight: 700; color: #2D2D3A; margin: 0 0 12px; line-height: 1.2; }
.qw-hero__subtitle { font-size: 15px; color: #7A7A8A; margin: 0; line-height: 1.6; }

/* Counter */
.qw-counter { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(135deg, var(--quelld-purple-light, #EDE5FF), var(--quelld-teal-light, #E5F6F6)); margin-bottom: 28px; }
.qw-counter__number { font-size: 36px; font-weight: 700; color: var(--quelld-purple, #954FE0); }
.qw-counter__label { font-size: 14px; color: #7A7A8A; line-height: 1.4; }

/* Feature list */
.qw-section-label { font-size: 11px; font-weight: 600; color: var(--quelld-purple, #954FE0); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.qw-features { margin-bottom: 28px; }
.qw-feature { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #F2F2F5; }
.qw-feature:last-child { border-bottom: none; }
.qw-feature__icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.qw-feature__text { flex: 1; }
.qw-feature__name { font-size: 15px; font-weight: 600; color: #2D2D3A; margin-bottom: 2px; }
.qw-feature__desc { font-size: 13px; color: #7A7A8A; line-height: 1.5; }
.qw-feature__badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; margin-left: 6px; }
.qw-feature__badge--hub { background: var(--quelld-teal-light, #E5F6F6); color: #2CB8B8; }
.qw-feature__badge--new { background: var(--quelld-purple-light, #EDE5FF); color: var(--quelld-purple, #954FE0); }

/* Form */
.qw-form { background: linear-gradient(135deg, var(--quelld-purple-light, #EDE5FF), var(--quelld-teal-light, #E5F6F6)); border-radius: 20px; padding: 24px 20px; margin-bottom: 20px; }
.qw-form__title { font-size: 18px; font-weight: 700; color: #2D2D3A; margin: 0 0 6px; }
.qw-form__desc { font-size: 13px; color: #7A7A8A; margin: 0 0 18px; line-height: 1.5; }
.qw-form__field { margin-bottom: 12px; }
.qw-form__input { width: 100% !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.6) !important; background: #FFFFFF !important; font-size: 16px !important; font-family: inherit !important; color: #3A3A4A !important; outline: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; }
.qw-form__input:focus { border-color: var(--quelld-purple, #954FE0) !important; }
.qw-form__note { font-size: 11px; color: #B0B0BE; margin-top: 12px; text-align: center; }

/* Confirmation */
.qw-confirm { text-align: center; padding: 32px 20px; background: linear-gradient(135deg, var(--quelld-purple-light, #EDE5FF), var(--quelld-teal-light, #E5F6F6)); border-radius: 20px; margin-bottom: 20px; }
.qw-confirm__icon { font-size: 56px; margin-bottom: 12px; }
.qw-confirm__title { font-size: 22px; font-weight: 700; color: #2D2D3A; margin: 0 0 8px; }
.qw-confirm__desc { font-size: 14px; color: #7A7A8A; line-height: 1.6; margin: 0 0 12px; }
.qw-confirm__count { font-size: 13px; color: var(--quelld-purple, #954FE0); font-weight: 600; }

/* Already registered */
.qw-already { text-align: center; padding: 20px; border-radius: 14px; background: var(--quelld-teal-light, #E5F6F6); margin-bottom: 16px; }
.qw-already__text { font-size: 14px; color: #2CB8B8; font-weight: 500; }

@media (max-width: 480px) {
    .qw-hero__title { font-size: 24px; }
    .qw-counter__number { font-size: 28px; }
    #quelld-waitlist-root input { font-size: 16px !important; }
}