/* tighten modal spacing */
#wizardModal .modal-dialog { max-width: 960px; margin: 20px auto }
#wizardModal .modal-body { padding: 0 }
#wizardModal .modal-content { margin: 0; border-radius: 12px }
#wizardModal .wizard-container { min-height: auto; padding: 20px }

/* step cards */
#wizardModal .step { display: none; width: 100%; max-width: 900px; background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 30px; margin: 0 auto; transition: background-color .4s ease,color .4s ease }
    #wizardModal .step.active { display: block; animation: fadeIn .3s ease-in-out }
    #wizardModal .step h4 { font-weight: 600; margin-bottom: 20px; font-size: 20px; text-align: center }
#wizardModal.dark-mode .step { background: #1e1e1e; color: #e0e0e0; box-shadow: 0 8px 28px rgba(0,0,0,.6) }

/* inputs */
#wizardModal .step input,
#wizardModal .step select,
#wizardModal .step textarea { margin-bottom: 15px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; width: 100%; font-size: 14px; transition: border-color .2s,box-shadow .2s,background-color .4s ease,color .4s ease }
    #wizardModal .step input:focus,
    #wizardModal .step select:focus,
    #wizardModal .step textarea:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,.15); outline: none }
#wizardModal.dark-mode .step input,
#wizardModal.dark-mode .step select,
#wizardModal.dark-mode .step textarea { background: #2a2a2a; border-color: #444; color: #e0e0e0 }

/* chips */
#wizardModal .chip { display: inline-block; padding: 8px 14px; margin: 5px; border: 1px solid #ccc; border-radius: 25px; cursor: pointer; transition: all .2s; background: #f9f9f9; font-size: 13px }
    #wizardModal .chip:hover { background: #e9ecef }
    #wizardModal .chip.active { background: #007bff; color: #fff; border-color: #007bff; box-shadow: 0 2px 6px rgba(0,123,255,.3) }
#wizardModal.dark-mode .chip { background: #2a2a2a; border-color: #444; color: #e0e0e0 }
    #wizardModal.dark-mode .chip.active { background: #007bff; color: #fff }

/* step indicator header */
#wizardModal .wizard-header { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; padding: 0 10px; max-width: 900px; margin-left: auto; margin-right: auto }
#wizardModal .wizard-step { flex: 0 0 60px; text-align: center; font-size: 13px; color: #999; position: relative; margin-bottom: 10px }
    #wizardModal .wizard-step .circle { width: 30px; height: 30px; border-radius: 50%; background: #ccc; margin: 0 auto 5px; line-height: 30px; color: #fff; font-weight: 600 }
    #wizardModal .wizard-step.active { color: #007bff; font-weight: 600 }
        #wizardModal .wizard-step.active .circle { background: #007bff }
    #wizardModal .wizard-step.completed { color: #28a745 }
        #wizardModal .wizard-step.completed .circle { background: #28a745 }
    /* hide labels if circles only */
    #wizardModal .wizard-step div:last-child { display: none }

/* review card */
#wizardModal .portfolio-card { display: flex; align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1); padding: 15px; margin-top: 15px }
#wizardModal .portfolio-photo { flex: 0 0 100px; margin-right: 15px }
    #wizardModal .portfolio-photo img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 2px solid #eee }
#wizardModal .portfolio-info h5 { margin: 0 0 8px; font-weight: 600; font-size: 16px }
#wizardModal .portfolio-info p { margin: 3px 0; font-size: 13px }
#wizardModal .portfolio-info .about-me { margin-top: 8px; font-style: italic; color: #555 }
#wizardModal.dark-mode .portfolio-card { background: #1e1e1e; border: 1px solid #333 }
#wizardModal.dark-mode .portfolio-photo img { border: 2px solid #444 }
#wizardModal.dark-mode .portfolio-info .about-me { color: #bbb }

/* captcha */
#wizardModal .captcha-box { display: block; margin: 0 auto 12px; border-radius: 8px; background: #f0f0f0; box-shadow: 0 2px 6px rgba(0,0,0,.1) }
#wizardModal.dark-mode .captcha-box { background: #2a2a2a; border: 1px solid #444 }
#wizardModal .captcha-actions { display: flex; justify-content: center; align-items: center; gap: 10px }
#wizardModal #txtCaptcha { flex: 1; max-width: 150px }
#wizardModal #refreshCaptcha { padding: 6px 12px; font-size: 13px; border-radius: 6px }

/* success message */
#wizardModal .success-message { text-align: center; margin-top: 20px }
    #wizardModal .success-message h4 { font-size: 20px; margin-bottom: 10px }
    #wizardModal .success-message p { font-size: 14px; color: #555 }
    #wizardModal .success-message button { margin: 10px; min-width: 140px }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px) }
    to { opacity: 1; transform: translateY(0) }
}