/* ============================================================
   DISTRIHUB SIGNUP PAGE STYLES
   Visual parity with approved mockup, spacious layout & natural vertical scroll
   ============================================================ */

/* 1. VIEWPORT & CONTAINER (Natural vertical scroll on right panel, fixed left hero) */
body:has(#signupStep1),
body:has(#signupStep1Form) {
    margin: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: var(--dh-bg-page, #f8fafc) !important;
}

body:has(#signupStep1) .dh-auth-container,
body:has(#signupStep1Form) .dh-auth-container {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
}

/* 2. LEFT HERO BRAND PANEL (Exact parity with Login, stays fixed at 100vh) */
body:has(#signupStep1) .dh-hero-panel,
body:has(#signupStep1Form) .dh-hero-panel {
    height: 100vh !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    padding: clamp(20px, 3vh, 44px) clamp(28px, 3.5vw, 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-hero-brand,
body:has(#signupStep1Form) .dh-hero-brand {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-hero-tag-logo,
body:has(#signupStep1Form) .dh-hero-tag-logo {
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

body:has(#signupStep1) .dh-hero-body,
body:has(#signupStep1Form) .dh-hero-body {
    margin: 8px 0 16px !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-hero-badge,
body:has(#signupStep1Form) .dh-hero-badge {
    margin-bottom: 10px !important;
    font-size: 11px !important;
}

body:has(#signupStep1) .dh-hero-headline,
body:has(#signupStep1Form) .dh-hero-headline {
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    margin-bottom: 10px !important;
}

body:has(#signupStep1) .dh-hero-headline .highlight-blue,
body:has(#signupStep1Form) .dh-hero-headline .highlight-blue {
    font-size: inherit !important;
}

body:has(#signupStep1) .dh-hero-description,
body:has(#signupStep1Form) .dh-hero-description {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
    color: #94a3b8 !important;
}

body:has(#signupStep1) .dh-hero-features,
body:has(#signupStep1Form) .dh-hero-features {
    gap: 12px !important;
}

body:has(#signupStep1) .dh-feature-icon-circle,
body:has(#signupStep1Form) .dh-feature-icon-circle {
    width: 38px !important;
    height: 38px !important;
}

body:has(#signupStep1) .dh-feature-info strong,
body:has(#signupStep1Form) .dh-feature-info strong {
    font-size: 13px !important;
}

body:has(#signupStep1) .dh-feature-info span,
body:has(#signupStep1Form) .dh-feature-info span {
    font-size: 12px !important;
}

body:has(#signupStep1) .dh-hero-footer,
body:has(#signupStep1Form) .dh-hero-footer {
    flex-shrink: 0 !important;
    padding-top: 12px !important;
}

/* 3. RIGHT AUTH PANEL (Scrolls vertically with smooth behavior and clean scrollbar) */
body:has(#signupStep1) .dh-form-panel,
body:has(#signupStep1Form) .dh-form-panel {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 32px clamp(20px, 3vw, 44px) 48px !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

body:has(#signupStep1) .dh-form-panel::-webkit-scrollbar,
body:has(#signupStep1Form) .dh-form-panel::-webkit-scrollbar {
    width: 6px;
}

body:has(#signupStep1) .dh-form-panel::-webkit-scrollbar-track,
body:has(#signupStep1Form) .dh-form-panel::-webkit-scrollbar-track {
    background: transparent;
}

body:has(#signupStep1) .dh-form-panel::-webkit-scrollbar-thumb,
body:has(#signupStep1Form) .dh-form-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

body:has(#signupStep1) .dh-form-panel::-webkit-scrollbar-thumb:hover,
body:has(#signupStep1Form) .dh-form-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 4. TOP SWITCHER (Clear vertical gap above the white card) */
body:has(#signupStep1) .dh-top-switcher,
body:has(#signupStep1Form) .dh-top-switcher {
    width: 100% !important;
    max-width: 660px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    color: var(--dh-text-muted, #64748b) !important;
    flex-shrink: 0 !important;
    margin-bottom: 24px !important; /* Visible clean gap from white card */
}

body:has(#signupStep1) .dh-top-btn,
body:has(#signupStep1Form) .dh-top-btn {
    padding: 6px 18px !important;
    border-radius: 99px !important;
    border: 1.5px solid var(--dh-blue-primary, #0070f3) !important;
    color: var(--dh-blue-primary, #0070f3) !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body:has(#signupStep1) .dh-top-btn:hover,
body:has(#signupStep1Form) .dh-top-btn:hover {
    background: rgba(0, 112, 243, 0.08) !important;
}

/* 5. MAIN SIGNUP CARD (Spacious internal padding, natural vertical flow, NO legacy zoom) */
body:has(#signupStep1) .dh-auth-card,
body:has(#signupStep1Form) .dh-auth-card {
    zoom: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 660px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(226, 232, 240, 0.8) !important;
    padding: 34px 38px 40px !important; /* Generous internal padding */
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Card Header Icon & Headings */
body:has(#signupStep1) .dh-card-icon,
body:has(#signupStep1Form) .dh-card-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #f0f7ff !important;
    border: 1px solid #dbeafe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important; /* Increased breathing room */
}

body:has(#signupStep1) .dh-card-icon img,
body:has(#signupStep1Form) .dh-card-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

body:has(#signupStep1) .dh-card-title,
body:has(#signupStep1Form) .dh-card-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 6px !important;
}

body:has(#signupStep1) .dh-card-subtitle,
body:has(#signupStep1Form) .dh-card-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 20px !important; /* Increased breathing room */
}

/* 6. SOCIAL OAUTH BUTTONS */
body:has(#signupStep1) .dh-social-group,
body:has(#signupStep1Form) .dh-social-group {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 18px !important; /* Increased breathing room */
}

body:has(#signupStep1) .dh-btn-social,
body:has(#signupStep1Form) .dh-btn-social {
    flex: 1 !important;
    height: 42px !important; /* Standard comfortable OAuth button height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body:has(#signupStep1) .dh-btn-social:hover,
body:has(#signupStep1Form) .dh-btn-social:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

body:has(#signupStep1) .dh-btn-social svg,
body:has(#signupStep1Form) .dh-btn-social svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* 7. OR DIVIDER */
body:has(#signupStep1) .dh-divider,
body:has(#signupStep1Form) .dh-divider {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 18px !important; /* Increased breathing room */
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.5px !important;
}

body:has(#signupStep1) .dh-divider::before,
body:has(#signupStep1) .dh-divider::after,
body:has(#signupStep1Form) .dh-divider::before,
body:has(#signupStep1Form) .dh-divider::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: #e2e8f0 !important;
}

body:has(#signupStep1) .dh-divider::before,
body:has(#signupStep1Form) .dh-divider::before {
    margin-right: 14px !important;
}

body:has(#signupStep1) .dh-divider::after,
body:has(#signupStep1Form) .dh-divider::after {
    margin-left: 14px !important;
}

/* 8. 4-STEP PROGRESS STEPPER */
body:has(#signupStep1) .dh-stepper,
body:has(#signupStep1Form) .dh-stepper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 22px !important; /* Increased breathing room */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

body:has(#signupStep1) .dh-step-item,
body:has(#signupStep1Form) .dh-step-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-step-badge,
body:has(#signupStep1Form) .dh-step-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

body:has(#signupStep1) .dh-step-item span,
body:has(#signupStep1Form) .dh-step-item span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

body:has(#signupStep1) .dh-step-item.active .dh-step-badge,
body:has(#signupStep1Form) .dh-step-item.active .dh-step-badge {
    background: #0070f3 !important;
    border-color: #0070f3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 112, 243, 0.35) !important;
}

body:has(#signupStep1) .dh-step-item.active span,
body:has(#signupStep1Form) .dh-step-item.active span {
    color: #0070f3 !important;
    font-weight: 700 !important;
}

body:has(#signupStep1) .dh-step-item.completed .dh-step-badge,
body:has(#signupStep1Form) .dh-step-item.completed .dh-step-badge {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body:has(#signupStep1) .dh-step-item.completed span,
body:has(#signupStep1Form) .dh-step-item.completed span {
    color: #0f172a !important;
}

body:has(#signupStep1) .dh-step-line,
body:has(#signupStep1Form) .dh-step-line {
    flex: 1 !important;
    height: 2px !important;
    background: #e2e8f0 !important;
    margin: 0 8px !important;
    min-width: 6px !important;
}

body:has(#signupStep1) .dh-step-line.active,
body:has(#signupStep1Form) .dh-step-line.active {
    background: #0070f3 !important;
}

/* 9. STEP 1 SECTION & TITLE */
.signup-step {
    width: 100% !important;
}

.signup-step:not(.active) {
    display: none !important;
}

body:has(#signupStep1) .step-title,
body:has(#signupStep1Form) .step-title {
    text-align: center !important;
    margin-bottom: 18px !important; /* Increased breathing room */
}

body:has(#signupStep1) .step-title h2,
body:has(#signupStep1Form) .step-title h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}

body:has(#signupStep1) .step-title p,
body:has(#signupStep1Form) .step-title p {
    font-size: 12.5px !important;
    color: #64748b !important;
}

/* 10. FORM FIELDS & INPUTS */
body:has(#signupStep1) .dh-field-group,
body:has(#signupStep1Form) .dh-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 16px !important; /* Clean form spacing */
    text-align: left !important;
    width: 100% !important;
}

body:has(#signupStep1) .dh-field-label,
body:has(#signupStep1Form) .dh-field-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

body:has(#signupStep1) .dh-field-label .required,
body:has(#signupStep1Form) .dh-field-label .required {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

body:has(#signupStep1) .dh-fields-row,
body:has(#signupStep1Form) .dh-fields-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
}

body:has(#signupStep1) .dh-input-wrapper,
body:has(#signupStep1Form) .dh-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

body:has(#signupStep1) .dh-input-icon,
body:has(#signupStep1Form) .dh-input-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body:has(#signupStep1) .dh-input-icon svg,
body:has(#signupStep1) .dh-input-icon i,
body:has(#signupStep1Form) .dh-input-icon svg,
body:has(#signupStep1Form) .dh-input-icon i {
    width: 17px !important;
    height: 17px !important;
}

body:has(#signupStep1) .dh-input-wrapper input,
body:has(#signupStep1Form) .dh-input-wrapper input {
    width: 100% !important;
    height: 42px !important; /* Comfortable touch/click height */
    padding: 0 14px 0 42px !important; /* Generous clearance after icon */
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

body:has(#signupStep1) .dh-input-wrapper input::placeholder,
body:has(#signupStep1Form) .dh-input-wrapper input::placeholder {
    color: #94a3b8 !important;
}

body:has(#signupStep1) .dh-input-wrapper input:focus,
body:has(#signupStep1Form) .dh-input-wrapper input:focus {
    border-color: #0070f3 !important;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.12) !important;
    outline: none !important;
}

/* 11. CHECKBOXES (Side-by-side on desktop) */
body:has(#signupStep1) .dh-checkboxes-row,
body:has(#signupStep1Form) .dh-checkboxes-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 8px 0 24px !important; /* Distinct breathing room before Continue button */
    width: 100% !important;
    text-align: left !important;
}

body:has(#signupStep1) .dh-checkbox-label,
body:has(#signupStep1Form) .dh-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    color: #475569 !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
}

body:has(#signupStep1) .dh-checkbox-label input[type="checkbox"],
body:has(#signupStep1Form) .dh-checkbox-label input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #0070f3 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-checkbox-label a,
body:has(#signupStep1Form) .dh-checkbox-label a {
    color: #0070f3 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body:has(#signupStep1) .dh-checkbox-label a:hover,
body:has(#signupStep1Form) .dh-checkbox-label a:hover {
    text-decoration: underline !important;
}

/* 12. CONTINUE BUTTON (Generous bottom clearance inside the card) */
body:has(#signupStep1) .dh-btn-primary,
body:has(#signupStep1Form) .dh-btn-primary {
    width: 100% !important;
    height: 44px !important; /* Standard prominent button */
    background: #0070f3 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s !important;
}

body:has(#signupStep1) .dh-btn-primary:hover,
body:has(#signupStep1Form) .dh-btn-primary:hover {
    background: #0059e6 !important;
    box-shadow: 0 4px 14px rgba(0, 112, 243, 0.25) !important;
}

body:has(#signupStep1) .dh-btn-primary:active,
body:has(#signupStep1Form) .dh-btn-primary:active {
    transform: scale(0.99) !important;
}

body:has(#signupStep1) .dh-btn-primary i,
body:has(#signupStep1) .dh-btn-primary svg,
body:has(#signupStep1Form) .dh-btn-primary i,
body:has(#signupStep1Form) .dh-btn-primary svg {
    width: 17px !important;
    height: 17px !important;
}

/* 13. SECURITY + SUPPORT FOOTER (Distinctly below the card with generous breathing room) */
body:has(#signupStep1) .dh-signup-footer,
body:has(#signupStep1Form) .dh-signup-footer {
    width: 100% !important;
    max-width: 660px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    color: #64748b !important;
    font-size: 12px !important;
    margin-top: 32px !important; /* Visible separation below the card */
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-footer-trust,
body:has(#signupStep1Form) .dh-footer-trust {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
}

body:has(#signupStep1) .dh-footer-trust i,
body:has(#signupStep1) .dh-footer-trust svg,
body:has(#signupStep1Form) .dh-footer-trust i,
body:has(#signupStep1Form) .dh-footer-trust svg {
    color: #3b82f6 !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-footer-trust strong,
body:has(#signupStep1Form) .dh-footer-trust strong {
    color: #1e293b !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body:has(#signupStep1) .dh-footer-trust span,
body:has(#signupStep1Form) .dh-footer-trust span {
    color: #64748b !important;
    font-size: 11px !important;
}

body:has(#signupStep1) .dh-footer-divider,
body:has(#signupStep1Form) .dh-footer-divider {
    width: 1px !important;
    height: 24px !important;
    background: #cbd5e1 !important;
}

body:has(#signupStep1) .dh-footer-support,
body:has(#signupStep1Form) .dh-footer-support {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 12px !important;
}

body:has(#signupStep1) .dh-footer-support i,
body:has(#signupStep1) .dh-footer-support svg,
body:has(#signupStep1Form) .dh-footer-support i,
body:has(#signupStep1Form) .dh-footer-support svg {
    color: #3b82f6 !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

body:has(#signupStep1) .dh-footer-support a,
body:has(#signupStep1Form) .dh-footer-support a {
    color: #0070f3 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body:has(#signupStep1) .dh-footer-support a:hover,
body:has(#signupStep1Form) .dh-footer-support a:hover {
    text-decoration: underline !important;
}

/* 14. RESPONSIVE ADJUSTMENTS FOR SMALL SCREENS */
@media (max-width: 680px) {
    body:has(#signupStep1),
    body:has(#signupStep1Form) {
        height: auto !important;
        overflow: auto !important;
    }
    body:has(#signupStep1) .dh-auth-container,
    body:has(#signupStep1Form) .dh-auth-container {
        height: auto !important;
        overflow: auto !important;
        flex-direction: column !important;
    }
    body:has(#signupStep1) .dh-hero-panel,
    body:has(#signupStep1Form) .dh-hero-panel {
        display: none !important;
    }
    body:has(#signupStep1) .dh-form-panel,
    body:has(#signupStep1Form) .dh-form-panel {
        height: auto !important;
        padding: 24px 16px 36px !important;
    }
    body:has(#signupStep1) .dh-fields-row,
    body:has(#signupStep1Form) .dh-fields-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body:has(#signupStep1) .dh-checkboxes-row,
    body:has(#signupStep1Form) .dh-checkboxes-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    body:has(#signupStep1) .dh-social-group,
    body:has(#signupStep1Form) .dh-social-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    body:has(#signupStep1) .dh-signup-footer,
    body:has(#signupStep1Form) .dh-signup-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    body:has(#signupStep1) .dh-footer-divider,
    body:has(#signupStep1Form) .dh-footer-divider {
        display: none !important;
    }
}