/**
 * WhiteWater Readiness Assessment - Stylesheet
 */


/* 1. Reset & Card Container */
#whitewater-app-root {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 10;
    clear: both;
    margin: 0 auto;
}

#whitewater-app-root *,
#whitewater-app-root *::before,
#whitewater-app-root *::after {
    box-sizing: border-box;
}

/* Card Wrapper */
.ww-card {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    padding: 48px 40px !important;
    box-sizing: border-box;
    text-align: center;
    container-type: inline-size;
}

/* 2. Typography */
.ww-header {
    font-family: 'Unna', serif !important;
    font-size: clamp(28px, 4vw, 36px) !important;
    line-height: 1.25 !important;
    color: #003366 !important;
    margin: 0 0 24px 0 !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.ww-description {
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #4B5563 !important;
    max-width: 580px !important;
    margin: 0 auto 24px auto !important;
    text-align: justify;
    text-align-last: center;
}

.ww-welcome-description> :first-child {
    margin-top: 0 !important;
}

.ww-welcome-description> :last-child {
    margin-bottom: 0 !important;
}

/* 3. Badge & Actions */
.ww-subtext-wrap {
    margin: 0;
}

.ww-subtext {
    display: inline-block !important;
    background: #EBF5FB !important;
    color: #003366 !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 32px !important;
}

.ww-action-wrap {
    margin: 0;
    text-align: center;
    width: 100%;
}

/* Primary Action Button */
.ww-btn-primary,
#ww-start-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 28px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    background: #003366 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 51, 102, 0.15);
    box-sizing: border-box !important;
}

@media (max-width: 768px) {

    .ww-btn-primary,
    #ww-start-btn {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        font-size: 15px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

.ww-btn-primary:hover,
.ww-btn-primary:focus,
#ww-start-btn:hover,
#ww-start-btn:focus {
    background: #47A8DD !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(71, 168, 221, 0.3);
}

.ww-btn-primary:active,
#ww-start-btn:active {
    transform: translateY(0) !important;
}

/* Footer note */
.ww-footer {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    color: #9CA3AF !important;
    margin-top: 24px !important;
    font-style: italic !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* 4. Screen 2 & Question Flow Styles */

/* Section Stepper Navigation (Above Progress Bar) */
.ww-stepper-wrap {
    width: 100% !important;
    margin-bottom: 12px !important;
}

.ww-stepper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


.ww-step-btn {
    background: transparent !important;
    border: none !important;
    padding: 4px 6px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

/* Completed Steps (steps < currentStep): Clickable, subtle checkmark, #003366, hover highlight */
.ww-step-btn.is-completed {
    color: #003366 !important;
    cursor: pointer !important;
}

.ww-step-btn.is-completed:hover {
    color: #47A8DD !important;
    background: #F0F9FF !important;
    text-decoration: underline !important;
}

.ww-step-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border-radius: 50% !important;
    background: #EBF5FB !important;
    color: #003366 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.ww-step-btn.is-completed:hover .ww-step-check {
    background: #47A8DD !important;
    color: #FFFFFF !important;
}

/* Active Step (currentStep): Bold, accent color #003366, indicator underline & dot */
.ww-step-btn.is-active {
    color: #003366 !important;
    font-weight: 700 !important;
    cursor: default !important;
    border-bottom: 2px solid #47A8DD !important;
    padding-bottom: 2px !important;
    border-radius: 0 !important;
}

.ww-step-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #47A8DD !important;
    flex-shrink: 0 !important;
}

/* Future Steps (steps > currentStep): Disabled / non-clickable, muted gray #9CA3AF, cursor default */
.ww-step-btn.is-disabled {
    color: #9CA3AF !important;
    cursor: default !important;
    opacity: 0.8 !important;
}

.ww-step-label {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: inherit !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* Mobile compact indicator (hidden on desktop) */
.ww-mobile-step-indicator {
    display: none !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #003366 !important;
    text-align: right !important;
    margin-top: 4px !important;
}

/* Progress Bar: thin 6px height, rounded, filled with accent color #47A8DD */
.ww-progress-bar-wrap {
    width: 100% !important;
    margin-bottom: 24px !important;
}

.ww-progress-bar-track {
    width: 100% !important;
    height: 6px !important;
    background: #E5E7EB !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.ww-progress-bar-fill {
    height: 100% !important;
    background: #47A8DD !important;
    border-radius: 999px !important;
    transition: width 0.3s ease !important;
}

/* Card alignment override for Screen 2 */
.ww-card.ww-screen-card {
    text-align: left !important;
}

.ww-screen-content {
    width: 100% !important;
}

/* Section Tag: font-family 'Mulish', 13px, bold, uppercase, tracking, color #47A8DD */
.ww-section-tag {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #47A8DD !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}

/* Intro Quote: italic, font-size 15px, background #F8FAFC, left border 3px solid #003366, padding 12px 16px, border-radius 0 8px 8px 0, margin-bottom 32px */
.ww-intro-quote {
    font-family: 'Mulish', sans-serif !important;
    font-style: italic !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    background: #F8FAFC !important;
    border-left: 3px solid #003366 !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 0 0 32px 0 !important;
    text-align: left !important;
}

/* Questions: titles in 'Unna' serif (20px, #003366), options stacked vertically */
.ww-question-block {
    text-align: left !important;
    margin-bottom: 28px !important;
}

.ww-q-title {
    font-family: 'Unna', serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
}

.ww-options-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Radio Cards: flex layout, padding 14px 18px, border 1px solid #E5E7EB, background #FAFAFA, border-radius 8px, cursor pointer */
.ww-radio-card {
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    border: 1px solid #E5E7EB !important;
    background: #FAFAFA !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ww-radio-card:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* Selected State: border 2px solid #003366, background #F8FAFC, with custom filled radio dot */
.ww-radio-card.is-selected {
    border: 2px solid #003366 !important;
    background: #F8FAFC !important;
    padding: 13px 17px !important;
    /* Compensates for 2px border to prevent layout shift */
}

/* Visually hidden native radio input for keyboard & screen reader accessibility */
.ww-radio-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Custom Radio Dot */
.ww-radio-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #CBD5E1 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    margin-right: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.ww-radio-card:hover .ww-radio-circle {
    border-color: #94A3B8 !important;
}

.ww-radio-card.is-selected .ww-radio-circle {
    border-color: #003366 !important;
}

.ww-radio-dot {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #003366 !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.ww-radio-card.is-selected .ww-radio-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.ww-radio-label {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #1F2937 !important;
    text-align: left !important;
    transition: color 0.2s ease !important;
}

.ww-radio-card.is-selected .ww-radio-label {
    color: #003366 !important;
    font-weight: 600 !important;
}

/* Action Bar: Back & Continue buttons */
.ww-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 1rem !important;
    margin-top: 36px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E5E7EB !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

/* "Back" text button (#6B7280) */
.ww-btn-back {
    background: transparent !important;
    border: none !important;
    color: #6B7280 !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.ww-btn-back:hover {
    color: #003366 !important;
    text-decoration: underline !important;
}

/* "Continue" button (#003366 background, 15px bold, disabled state #CBD5E1) */
.ww-btn-continue {
    background: #003366 !important;
    color: #FFFFFF !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.15) !important;
}

.ww-btn-continue:hover:not(:disabled) {
    background: #47A8DD !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(71, 168, 221, 0.35) !important;
}

.ww-btn-continue:active:not(:disabled) {
    transform: translateY(0) !important;
}

.ww-btn-continue:disabled {
    background: #CBD5E1 !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Footer Quote: italic, 13px */
.ww-footer-quote {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: #9CA3AF !important;
    margin-top: 28px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* 5. Screen 3: Reflection Question Grid */
.ww-reflection-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
}

.ww-reflection-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    border: 1.5px solid #E5E7EB !important;
    background: #FAFAFA !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-align: center !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    line-height: 1.3 !important;
}

.ww-reflection-card:hover {
    background: #F8FAFC !important;
    border-color: #47A8DD !important;
    color: #003366 !important;
    transform: translateY(-1px) !important;
}

.ww-reflection-card:focus-visible {
    outline: 2px solid #47A8DD !important;
    outline-offset: 2px !important;
}

.ww-reflection-card.is-selected {
    background: #F0F9FF !important;
    border: 2px solid #003366 !important;
    color: #003366 !important;
    font-weight: 600 !important;
    padding: 13.5px 15.5px !important;
    box-shadow: 0 2px 6px rgba(0, 51, 102, 0.08) !important;
}

.ww-reflection-label {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* 6. Screen 4: Conditional Successor Section Animation */
.ww-successor-section {
    display: none !important;
}

.ww-successor-section.is-visible {
    display: block !important;
    animation: wwFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ww-successor-section-inner {
    width: 100% !important;
}

@keyframes wwFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ww-successor-section.is-visible {
        animation: none !important;
    }
}

/* 7. Screen 4: Q8b Locked & Disabled Card Styles */
.ww-card-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
}

.ww-card-locked {
    border: 2px solid #003366 !important;
    background: #F8FAFC !important;
    cursor: default !important;
    pointer-events: none !important;
}

.ww-radio-card:not(.ww-card-disabled):not(.ww-card-locked) {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Lock indicator: strictly hidden unless inside .ww-card-locked */
.ww-lock-indicator,
.ww-lock-icon {
    display: none !important;
    align-items: center !important;
    margin-left: auto !important;
    color: #64748B !important;
    font-size: 13px !important;
    opacity: 0.8 !important;
}

.ww-card-locked .ww-lock-indicator,
.ww-card-locked .ww-lock-icon {
    display: inline-flex !important;
}

.ww-lock-indicator svg,
.ww-lock-icon svg {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
}

.ww-q-helper-text {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: #47A8DD !important;
    margin: -4px 0 14px 0 !important;
    text-align: left !important;
}

/* 8. Screen 6: Motivation Styles */
.ww-q-subtext {
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #64748B !important;
    margin: -6px 0 16px 0 !important;
    text-align: left !important;
}

/* Q14 Cards */
.ww-q14-card {
    min-height: 52px !important;
}

/* Q15 Urgency Selector */
.ww-urgency-scale {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
}

.ww-urgency-card {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    border: 1.5px solid #E5E7EB !important;
    background: #FAFAFA !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-align: center !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.ww-urgency-card:hover {
    background: #F8FAFC !important;
    border-color: #47A8DD !important;
    color: #003366 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.08) !important;
}

.ww-urgency-card.is-selected {
    background: #003366 !important;
    border: 2px solid #003366 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 51, 102, 0.22) !important;
    transform: translateY(-1px) !important;
}

.ww-urgency-num {
    font-family: 'Mulish', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: inherit !important;
    line-height: 1 !important;
}

.ww-urgency-labels {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important;
    color: #64748B !important;
    font-style: italic !important;
}

/* 9. Screen 7: Contact Information Styles */
.ww-contact-headline {
    font-family: 'Unna', serif !important;
    font-size: clamp(24px, 3.5vw, 30px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #003366 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
}

.ww-contact-subtext {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #4B5563 !important;
    margin: 0 0 28px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
}

.ww-contact-form {
    width: 100% !important;
    margin: 0 !important;
}

.ww-form-group {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 0 !important;
}

.ww-form-label {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-align: left !important;
}

.ww-required-mark {
    color: #DC2626 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

.ww-optional-mark {
    color: #6B7280 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    margin-left: 4px !important;
}

.ww-form-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #1F2937 !important;
    background: #FFFFFF !important;
    margin-bottom: 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s ease !important;
}

.ww-form-input:focus {
    outline: none !important;
    border-color: #003366 !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1) !important;
}

.ww-form-input::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

.ww-privacy-copy {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    text-align: center !important;
    margin-top: 14px !important;
    line-height: 1.5 !important;
}

/* 9b. Screen 7: Bottom Navigation Actions & Primary CTA */
.ww-nav-actions,
.ww-form-actions,
.form-actions,
.ww-contact-card .ww-action-bar,
.ww-contact-form .ww-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #E5E7EB !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

#ww-submit-btn,
.ww-btn-submit,
.ww-nav-actions .ww-btn-submit,
.ww-form-actions .ww-btn-submit {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.35 !important;
    font-size: 0.875rem !important;
    /* ~14px */
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1.4rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    text-wrap: balance !important;
    flex-shrink: 1 !important;
}

#ww-submit-btn:hover:not(:disabled),
.ww-btn-submit:hover:not(:disabled) {
    background: #47A8DD !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(71, 168, 221, 0.35) !important;
}

#ww-submit-btn:focus-visible,
.ww-btn-submit:focus-visible {
    outline: 2px solid #47A8DD !important;
    outline-offset: 2px !important;
}

#ww-submit-btn .ww-btn-text,
.ww-btn-submit .ww-btn-text {
    display: inline !important;
    text-wrap: balance !important;
}

#ww-submit-btn .ww-btn-arrow,
.ww-btn-submit .ww-btn-arrow {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
    margin-left: 0.35rem !important;
    flex-shrink: 0 !important;
}

.ww-nav-actions .ww-btn-back,
.ww-form-actions .ww-btn-back,
.ww-contact-card .ww-btn-back,
.ww-contact-form .ww-action-bar .ww-btn-back {
    font-size: 0.875rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Mobile & Narrow Card Adjustments (< 520px) */
@media (max-width: 520px) {

    .ww-nav-actions,
    .ww-form-actions,
    .form-actions,
    .ww-contact-card .ww-action-bar,
    .ww-contact-form .ww-action-bar {
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    #ww-submit-btn,
    .ww-btn-submit,
    .ww-nav-actions #ww-submit-btn,
    .ww-form-actions #ww-submit-btn,
    .ww-contact-card #ww-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ww-nav-actions .ww-btn-back,
    .ww-form-actions .ww-btn-back,
    .ww-contact-card .ww-btn-back,
    .ww-contact-form .ww-btn-back,
    .ww-contact-card #ww-back-btn {
        align-self: center !important;
        margin-top: 0.5rem !important;
    }
}

@container (max-width: 520px) {

    .ww-nav-actions,
    .ww-form-actions,
    .form-actions,
    .ww-contact-card .ww-action-bar,
    .ww-contact-form .ww-action-bar {
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    #ww-submit-btn,
    .ww-btn-submit,
    .ww-nav-actions #ww-submit-btn,
    .ww-form-actions #ww-submit-btn,
    .ww-contact-card #ww-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ww-nav-actions .ww-btn-back,
    .ww-form-actions .ww-btn-back,
    .ww-contact-card .ww-btn-back,
    .ww-contact-form .ww-btn-back,
    .ww-contact-card #ww-back-btn {
        align-self: center !important;
        margin-top: 0.5rem !important;
    }
}

/* 10. Screen 8: Loading Screen & Animation Styles */
.ww-loading-card {
    text-align: center !important;
}

.ww-loading-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 380px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

.ww-spinner-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 8px !important;
}

.ww-spinner-ring {
    position: absolute !important;
    width: 62px !important;
    height: 62px !important;
    border: 2px solid rgba(71, 168, 221, 0.25) !important;
    border-radius: 50% !important;
    animation: wwPulseRing 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite !important;
}

@keyframes wwPulseRing {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.35;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.ww-spinner {
    width: 48px !important;
    height: 48px !important;
    border: 4px solid #E2E8F0 !important;
    border-top: 4px solid #003366 !important;
    border-right: 4px solid #47A8DD !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ww-loading-text {
    font-family: 'Unna', serif !important;
    font-size: 22px !important;
    color: #003366 !important;
    margin-top: 24px !important;
    text-align: center !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    max-width: 480px !important;
    min-height: 34px !important;
    transition: opacity 0.2s ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .ww-spinner {
        animation-duration: 2s !important;
    }

    .ww-spinner-ring {
        animation: none !important;
        display: none !important;
    }

    .ww-loading-text {
        transition: none !important;
    }
}

/* 11. Screen 9: Results Dashboard Styles */
.ww-card.ww-results-card {
    max-width: 820px !important;
    text-align: left !important;
}

.ww-results-content {
    width: 100% !important;
}

.ww-results-header {
    margin-bottom: 24px !important;
}

.ww-results-greeting {
    font-family: 'Unna', serif !important;
    font-size: clamp(24px, 3.5vw, 32px) !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

/* Score Hero Card */
.ww-hero-score-card {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    margin-bottom: 32px !important;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.04) !important;
    box-sizing: border-box !important;
}

.ww-hero-stage-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 76px !important;
    height: 76px !important;
    background: #F0F9FF !important;
    border: 2px solid #BAE6FD !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.06) !important;
    margin: 0 auto 20px auto !important;
}

#whitewater-app-root .ww-hero-stage-badge > .ww-hero-emblem {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: none !important;
    flex: none !important;
}

#whitewater-app-root .ww-hero-emblem .ww-hero-check {
    fill: none !important;
    stroke: #087FAF !important;
}

.ww-hero-stage-title {
    font-family: 'Unna', serif !important;
    font-size: clamp(26px, 4vw, 32px) !important;
    color: #003366 !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.25 !important;
}

.ww-hero-stage-subtitle {
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #47A8DD !important;
    margin-bottom: 14px !important;
}

.ww-hero-stage-desc {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #4B5563 !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Pillar Breakdown Section */
.ww-pillars-section {
    margin-bottom: 32px !important;
    width: 100% !important;
}

.ww-section-heading {
    font-family: 'Unna', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
}

.ww-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

.ww-pillar-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 20px 18px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: left !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.ww-pillar-card:hover,
.ww-pillar-card:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 51, 102, 0.08) !important;
    border-color: #CBD5E1 !important;
    outline: none !important;
}

.ww-pillar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.ww-pillar-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: #F0F9FF !important;
    color: #003366 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #BAE6FD !important;
    white-space: nowrap !important;
}

.ww-pillar-score {
    font-family: 'Unna', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #003366 !important;
}

.ww-pillar-level {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.ww-pillar-level.ww-level-strong {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border: 1px solid #A7F3D0 !important;
}

.ww-pillar-level.ww-level-moderate {
    background: #F0F9FF !important;
    color: #0369A1 !important;
    border: 1px solid #BAE6FD !important;
}

.ww-pillar-level.ww-level-developing {
    background: #FFFBEB !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
}

.ww-pillar-name {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
}

.ww-pillar-meter-track {
    width: 100% !important;
    height: 4px !important;
    background: #E5E7EB !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.ww-pillar-meter-fill {
    height: 100% !important;
    background: #47A8DD !important;
    border-radius: 999px !important;
    transition: width 0.6s ease !important;
}

.ww-pillar-takeaway {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #4B5563 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* Tailored Recommendations Box */
.ww-recommendations-box {
    background: #F0F9FF !important;
    border-left: 4px solid #47A8DD !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 20px 24px !important;
    margin-bottom: 32px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.ww-recommendations-header {
    margin-bottom: 16px !important;
}

.ww-recommendations-pill {
    display: inline-block !important;
    max-width: 100% !important;
    width: fit-content !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #003366 !important;
    background: #E0F2FE !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.ww-recommendations-title {
    font-family: 'Unna', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}

.ww-recommendations-intro {
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.ww-recommendations-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.ww-rec-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(71, 168, 221, 0.25) !important;
}

.ww-rec-item:first-child {
    border-top: none !important;
    padding-top: 0 !important;
}

.ww-rec-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    background: #47A8DD !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}

.ww-rec-content {
    flex: 1 !important;
}

.ww-rec-item-title {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.35 !important;
}

.ww-rec-item-text {
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* Advisor Call to Action (CTA) */
.ww-advisor-cta {
    background: #003366 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 36px 28px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.16) !important;
    box-sizing: border-box !important;
}

.ww-cta-headline {
    font-family: 'Unna', serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.ww-cta-copy {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #E2E8F0 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}

.ww-cta-action-row {
    margin-top: 18px !important;
}

.ww-cta-btn {
    background: #47A8DD !important;
    color: #FFFFFF !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}

.ww-cta-btn:hover,
.ww-cta-btn:focus-visible {
    background: #3594c7 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.ww-schedule-notice {
    margin-top: 14px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.ww-schedule-notice.is-success {
    background-color: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.ww-schedule-notice.is-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.ww-retake-wrap {
    margin-top: 16px !important;
}

.ww-retake-link {
    display: inline-block !important;
    color: #BAE6FD !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
}

.ww-retake-link:hover,
.ww-retake-link:focus-visible {
    color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (min-width: 641px) and (max-width: 900px) {
    .ww-welcome-action #ww-start-btn {
        display: inline-block !important;
        width: min(100%, 340px) !important;
        min-width: 0 !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }

    .ww-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ww-pillars-grid .ww-pillar-card:last-child {
        grid-column: 1 / -1 !important;
    }

    .ww-pillar-name {
        font-size: 16px !important;
    }

    .ww-pillar-takeaway {
        font-size: 14px !important;
    }
}

@media (max-width: 640px) {
    #whitewater-app-root {
        padding: 24px 10px !important;
    }

    .ww-card {
        padding: 28px 18px !important;
        border-radius: 12px;
    }

    .ww-welcome-card {
        padding: 30px 20px !important;
    }

    .ww-welcome-card .ww-header {
        font-size: clamp(27px, 8vw, 32px) !important;
        line-height: 1.22 !important;
        margin-bottom: 22px !important;
    }

    .ww-welcome-card .ww-subtext {
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        margin-bottom: 26px !important;
    }

    .ww-welcome-action #ww-start-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 52px !important;
        padding: 13px 12px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }

    .ww-card.ww-results-card {
        padding: 24px 16px !important;
    }

    .ww-btn-primary {
        max-width: 100% !important;
    }

    .ww-radio-card {
        padding: 12px 14px !important;
    }

    .ww-radio-card.is-selected {
        padding: 11px 13px !important;
    }

    .ww-action-bar {
        margin-top: 28px !important;
        padding-top: 18px !important;
    }

    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) .ww-btn-back {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        font-size: 14px !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }

    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) .ww-btn-continue {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 68% !important;
        margin: 0 0 0 auto !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        white-space: nowrap !important;
        justify-content: center !important;
    }

    .ww-stepper {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 4px 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .ww-stepper::-webkit-scrollbar {
        display: none !important;
    }

    .ww-step-btn {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 4px 4px !important;
    }

    .ww-step-label {
        font-size: 12px !important;
    }

    .ww-mobile-step-indicator {
        display: block !important;
    }

    .ww-reflection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ww-reflection-card {
        padding: 12px 10px !important;
        font-size: 14px !important;
    }

    .ww-reflection-card.is-selected {
        padding: 11.5px 9.5px !important;
    }

    .ww-urgency-scale {
        gap: 8px !important;
    }

    .ww-urgency-card {
        height: 44px !important;
        font-size: 16px !important;
    }

    .ww-urgency-num {
        font-size: 16px !important;
    }

    .ww-urgency-labels {
        font-size: 11px !important;
    }

    .ww-contact-headline {
        font-size: 22px !important;
    }

    .ww-contact-subtext {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .ww-form-input {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .ww-loading-container {
        min-height: 320px !important;
        padding: 24px 12px !important;
    }

    .ww-loading-text {
        font-size: 20px !important;
        margin-top: 20px !important;
    }

    .ww-contact-card .ww-nav-actions,
    .ww-contact-card .ww-action-bar {
        margin-top: 1.25rem !important;
        padding-top: 1.25rem !important;
    }

    /* Screen 9 Mobile Overrides */
    .ww-hero-score-card {
        padding: 24px 16px !important;
        margin-bottom: 24px !important;
    }

    .ww-hero-stage-badge {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 16px !important;
    }

    #whitewater-app-root .ww-hero-stage-badge > .ww-hero-emblem {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .ww-hero-stage-title {
        font-size: 24px !important;
    }

    .ww-hero-stage-subtitle {
        font-size: 12px !important;
    }

    .ww-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ww-recommendations-box {
        padding: 18px 16px !important;
        margin-bottom: 24px !important;
    }

    .ww-advisor-cta {
        padding: 28px 18px !important;
    }

    .ww-cta-headline {
        font-size: 22px !important;
    }

    .ww-cta-btn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

@media (max-width: 380px) {
    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) {
        gap: 8px !important;
    }

    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) .ww-btn-back,
    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) .ww-btn-continue {
        font-size: 13px !important;
    }

    .ww-screen-card .ww-action-bar:not(.ww-nav-actions) .ww-btn-continue {
        padding: 11px 13px !important;
    }

    .ww-reflection-grid {
        grid-template-columns: 1fr !important;
    }

    .ww-urgency-scale {
        gap: 6px !important;
    }

    .ww-urgency-card {
        height: 40px !important;
        font-size: 15px !important;
    }

    .ww-urgency-num {
        font-size: 15px !important;
    }
}

/* Editable urgency copy and email confirmation must remain readable on mobile. */
#whitewater-app-root .ww-urgency-scale {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch !important;
}

#whitewater-app-root .ww-urgency-card {
    width: auto;
    height: auto !important;
    min-height: 80px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-wrap: anywhere;
}

#whitewater-app-root .ww-urgency-option-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
}

#whitewater-app-root .ww-verification-panel {
    display: grid !important;
    gap: 12px;
    margin: 20px 0;
    text-align: left !important;
}

#whitewater-app-root .ww-verification-panel button,
#whitewater-app-root .ww-verification-panel input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #9dc9e7;
    border-radius: 6px;
    color: #003568;
    background: #fff;
    font: inherit;
}

#whitewater-app-root .ww-schedule-notice a {
    color: #b5e5ff;
}

#whitewater-app-root .ww-clear-result {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #9dc9e7;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 600px) {
    #whitewater-app-root .ww-urgency-scale {
        grid-template-columns: 1fr;
    }

    #whitewater-app-root .ww-urgency-card {
        flex-direction: row;
        min-height: 60px;
        text-align: left !important;
        gap: 16px;
    }
}