/* Reevox Verify - guide/rules layout fix.
   Important: this file never forces step 3 to display. JavaScript remains in control. */

#verificationForm {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

#verificationForm .wizard-card.wizard-card-wide {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 28px auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* display is intentionally not set here. */
#step3.wizard-step {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#step3 .upload-tutorial,
#step3 .verification-rules,
#step3 .agreement-box {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

#step3 .upload-tutorial {
    width: 100% !important;
    max-width: 980px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 22px auto !important;
    padding: 22px !important;
    overflow: visible !important;
}

#step3 .tutorial-head {
    display: fley !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

#step3 .tutorial-title-wrap {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: fley-start !important;
    gap: 13px !important;
}

#step3 .tutorial-title-wrap > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#step3 .tutorial-head h4 {
    margin: 0 !important;
    font-size: clamp(18px, 1.7vw, 24px) !important;
    line-height: 1.65 !important;
}

#step3 .tutorial-head p {
    width: 100% !important;
    max-width: 760px !important;
    margin: 7px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

#step3 .tutorial-toggle {
    fley: 0 0 auto !important;
    min-width: 142px !important;
    min-height: 44px !important;
}

#step3 .tutorial-content {
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    overflow: visible !important;
    opacity: 0 !important;
    transform: none !important;
}

#step3 .tutorial-content.show {
    display: block !important;
    margin-top: 20px !important;
    opacity: 1 !important;
}

#step3 .tutorial-content-inner,
#step3 .tutorial-hero,
#step3 .tutorial-tips-grid,
#step3 .guide-layout-card,
#step3 .guide-frame,
#step3 .tutorial-final-note {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

#step3 .tutorial-content-inner {
    display: block !important;
    overflow: visible !important;
}

#step3 .tutorial-hero {
    display: flex !important;
    padding: 16px 18px !important;
}

#step3 .tutorial-hero strong { font-size: 15px !important; }
#step3 .tutorial-hero p {
    font-size: 12.8px !important;
    line-height: 1.9 !important;
}

#step3 .tutorial-tips-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 16px !important;
}

#step3 .tutorial-tip-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 108px !important;
    padding: 16px !important;
    gap: 12px !important;
}

#step3 .tutorial-tip-card strong {
    font-size: 14px !important;
    line-height: 1.7 !important;
}

#step3 .tutorial-tip-card p {
    margin-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.85 !important;
}

#step3 .guide-layout-card {
    display: block !important;
    margin-top: 16px !important;
    padding: 18px !important;
}

#step3 .guide-layout-head {
    display: fley !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

#step3 .guide-frame {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    padding: 15px !important;
}

#step3 .guide-frame.has-handwritten {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#step3 .guide-frame.is-video-guide { display: block !important; }

#step3 .guide-slot {
    min-width: 0 !important;
    min-height: 100px !important;
    padding: 14px !important;
}

#step3 .guide-slot span { font-size: 13.5px !important; }
#step3 .guide-slot small { font-size: 11.5px !important; }

#step3 .guide-video-stage {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr) !important;
    gap: 18px !important;
}

#step3 .guide-video-stage[hidden],
#step3 .guide-slot[hidden] {
    display: none !important;
}

#step3 .guide-video-preview { min-height: 230px !important; }
#step3 .guide-video-copy {
    min-width: 0 !important;
    padding: 18px !important;
}

#step3 .tutorial-final-note {
    margin-top: 15px !important;
    padding: 14px 16px !important;
}

/* Rules must stay in normal document flow, after uploads and guide. */
#step3 .verification-rules.formal-rules {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    height: auto !important;
    max-height: none !important;
    margin: 24px auto 16px !important;
    overflow: visible !important;
}

#step3 .agreement-box.agreement-box-formal {
    display: flex !important;
    width: 100% !important;
    max-width: 980px !important;
    height: auto !important;
    margin: 0 auto 18px !important;
}

@media (max-width: 760px) {
    #verificationForm .wizard-card.wizard-card-wide {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        margin: 10px auto 24px !important;
        padding-inline: 12px !important;
        overflow: visible !important;
    }

    #step3 .upload-tutorial {
        width: 100% !important;
        max-width: none !important;
        margin: 16px 0 !important;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    #step3 .tutorial-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    #step3 .tutorial-toggle {
        width: 100% !important;
        min-width: 0 !important;
    }

    #step3 .tutorial-head h4 { font-size: 16px !important; }
    #step3 .tutorial-head p { font-size: 11.8px !important; }

    #step3 .tutorial-tips-grid,
    #step3 .guide-frame,
    #step3 .guide-frame.has-handwritten,
    #step3 .guide-video-stage {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #step3 .tutorial-tip-card {
        min-height: 0 !important;
        padding: 13px !important;
    }

    #step3 .guide-layout-card { padding: 13px !important; }
    #step3 .guide-slot { min-height: 78px !important; }
    #step3 .guide-video-preview { min-height: 200px !important; }

    #step3 .verification-rules.formal-rules,
    #step3 .agreement-box.agreement-box-formal {
        max-width: none !important;
    }
}

/* =========================================================
   Responsive layout for the new guide, rules, uploads and
   camera flows. Step visibility remains controlled by JS.
   ========================================================= */
@media (max-width: 1024px) {
    #verificationForm .wizard-card.wizard-card-wide {
        width: calc(100% - 24px) !important;
        padding-inline: clamp(16px, 3vw, 28px) !important;
    }

    #step3 .upload-tutorial,
    #step3 .verification-rules.formal-rules,
    #step3 .agreement-box.agreement-box-formal {
        max-width: 100% !important;
    }

    #step3 .tutorial-tips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #verificationForm {
        overflow-x: clip !important;
    }

    #verificationForm .wizard-card.wizard-card-wide {
        width: calc(100% - 12px) !important;
        margin: 8px auto 22px !important;
        padding: 14px 12px 18px !important;
        border-radius: 20px !important;
    }

    #verificationForm .wizard-heading {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
    }

    #verificationForm .wizard-heading h2 {
        font-size: clamp(19px, 6vw, 24px) !important;
        line-height: 1.5 !important;
    }

    #verificationForm .wizard-heading p,
    #verificationForm .step-text {
        font-size: 12.5px !important;
        line-height: 1.9 !important;
    }

    #verificationForm .form-grid.two-columns,
    #verificationForm .document-grid,
    #verificationForm .single-upload-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #verificationForm .input,
    #verificationForm input,
    #verificationForm textarea,
    #verificationForm select {
        max-width: 100% !important;
    }

    #verificationForm .input,
    #verificationForm input[type="teyt"],
    #verificationForm input[type="tel"],
    #verificationForm input[type="number"] {
        font-size: 16px !important; /* Avoid browser zoom on focus. */
    }

    #verificationForm .otp-code-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    #verificationForm .otp-verify-button {
        width: 100% !important;
        min-height: 46px !important;
    }

    #verificationForm .level-card,
    #verificationForm .option-card {
        min-width: 0 !important;
        padding: 14px !important;
        gap: 10px !important;
    }

    #verificationForm .option-content,
    #verificationForm .option-content * {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    #step3 .upload-tutorial {
        margin: 14px 0 !important;
        padding: 14px !important;
    }

    #step3 .tutorial-title-wrap {
        gap: 10px !important;
    }

    #step3 .tutorial-title-icon,
    #step3 .tutorial-hero-icon,
    #step3 .tutorial-tip-icon {
        fley: 0 0 auto !important;
    }

    #step3 .tutorial-tips-grid,
    #step3 .guide-frame,
    #step3 .guide-frame.has-handwritten,
    #step3 .guide-video-stage {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #step3 .tutorial-hero {
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 13px !important;
    }

    #step3 .tutorial-tip-card {
        min-height: 0 !important;
        align-items: fley-start !important;
        padding: 13px !important;
    }

    #step3 .guide-layout-head {
        align-items: fley-start !important;
    }

    #step3 .guide-frame {
        padding: 11px !important;
    }

    #step3 .guide-slot {
        min-height: 82px !important;
    }

    #step3 .guide-video-preview {
        min-height: 190px !important;
    }

    #step3 .document-card,
    #step3 .live-video-card {
        min-width: 0 !important;
        padding: 15px !important;
    }

    #step3 .camera-open-button,
    #step3 .video-open-button {
        width: 100% !important;
        min-height: 48px !important;
        white-space: normal !important;
        line-height: 1.7 !important;
    }

    #step3 .preview-image,
    #step3 .recorded-video-preview {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #step3 .verification-rules.formal-rules {
        margin: 18px 0 14px !important;
        padding: 16px 14px !important;
        border-radius: 17px !important;
    }

    #step3 .verification-rules .rules-heading {
        display: fley !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    #step3 .verification-rules .rules-heading h4 {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    #step3 .verification-rules .rules-heading small {
        font-size: 11px !important;
        line-height: 1.8 !important;
    }

    #step3 .verification-rules ol {
        margin: 14px 0 0 !important;
        padding-inline-start: 22px !important;
    }

    #step3 .verification-rules li {
        padding-inline-start: 3px !important;
        font-size: 12px !important;
        line-height: 2 !important;
        overflow-wrap: anywhere !important;
    }

    #step3 .agreement-box.agreement-box-formal {
        align-items: fley-start !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
        line-height: 1.9 !important;
    }

    #step3 .agreement-box input[type="checkbox"] {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: 3px !important;
    }

    #verificationForm .step-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    #verificationForm .step-buttons > div:empty {
        display: none !important;
    }

    #verificationForm .step-buttons .btn-next,
    #verificationForm .step-buttons .btn-back,
    #verificationForm .step-buttons .btn-submit {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    #verificationForm .camera-modal {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    }

    #verificationForm .camera-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        border-radius: 18px !important;
    }

    #verificationForm .camera-stage,
    #verificationForm .video-live-stage {
        width: 100% !important;
        max-width: 100% !important;
    }

    #verificationForm .camera-actions,
    #verificationForm .video-camera-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
}

@media (max-width: 480px) {
    #verificationForm .wizard-card.wizard-card-wide {
        width: calc(100% - 8px) !important;
        padding: 12px 9px 16px !important;
        border-radius: 17px !important;
    }

    #verificationForm .wizard-heading {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #verificationForm .wizard-icon {
        width: 42px !important;
        height: 42px !important;
    }

    #verificationForm .steps-status {
        padding-inline: 2px !important;
    }

    #verificationForm .step-status {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    #verificationForm .level-card,
    #verificationForm .option-card {
        padding: 12px 10px !important;
    }

    #step3 .upload-tutorial {
        padding: 12px 10px !important;
        border-radius: 15px !important;
    }

    #step3 .tutorial-title-wrap {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    #step3 .tutorial-head h4 {
        font-size: 15px !important;
    }

    #step3 .tutorial-head p,
    #step3 .tutorial-tip-card p,
    #step3 .tutorial-hero p {
        font-size: 11.5px !important;
    }

    #step3 .guide-layout-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    #step3 .guide-level-pill {
        justify-self: start !important;
    }

    #step3 .guide-video-preview {
        min-height: 170px !important;
    }

    #step3 .verification-rules.formal-rules,
    #step3 .agreement-box.agreement-box-formal {
        width: 100% !important;
    }

    #verificationForm .step-buttons {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #verificationForm .camera-actions,
    #verificationForm .video-camera-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    #verificationForm .camera-modal {
        padding: 5px !important;
    }

    #verificationForm .camera-dialog {
        max-height: calc(100dvh - 10px) !important;
        border-radius: 14px !important;
    }

    #verificationForm .camera-dialog-head {
        position: sticky !important;
        top: 0 !important;
        z-indey: 3 !important;
    }
}

/* =========================================================
   Mobile fix for level selection (step 2)
   ========================================================= */
@media (max-width: 760px) {
    #step2 {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    #step2 .level-list,
    #step2 .option-list.level-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 11px !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
    }

    #step2 .level-card,
    #step2 .option-card.level-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 28px !important;
        grid-template-areas: "number content check" !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 112px !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        gap: 11px !important;
        overflow: hidden !important;
        border-radius: 17px !important;
        box-sizing: border-box !important;
        text-align: right !important;
    }

    #step2 .level-card > input[type="radio"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #step2 .level-number {
        grid-area: number !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 17px !important;
        line-height: 1 !important;
    }

    #step2 .option-content {
        grid-area: content !important;
        display: flex !important;
        fley-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 3px !important;
        teyt-align: right !important;
    }

    #step2 .option-content strong,
    #step2 .option-content small,
    #step2 .level-documents {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    #step2 .option-content strong {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    #step2 .option-content small {
        font-size: 11px !important;
        line-height: 1.7 !important;
    }

    #step2 .level-documents {
        margin-top: 4px !important;
        font-size: 11.5px !important;
        line-height: 1.85 !important;
    }

    #step2 .option-check {
        grid-area: check !important;
        position: static !important;
        transform: none !important;
        justify-self: center !important;
        align-self: center !important;
        width: 26px !important;
        min-width: 26px !important;
        margin: 0 !important;
        font-size: 20px !important;
        text-align: center !important;
    }

    #step2 .level-card.level-locked,
    #step2 .level-card:has(input:disabled) {
        opacity: .58 !important;
    }

    #step2 .level-card.level-recommended,
    #step2 .level-card:has(input:checked) {
        opacity: 1 !important;
    }

    #step2 .step-buttons {
        width: 100% !important;
        margin-top: 18px !important;
    }
}

@media (max-width: 420px) {
    #step2 .level-card,
    #step2 .option-card.level-card {
        grid-template-columns: 40px minmax(0, 1fr) 24px !important;
        min-height: 104px !important;
        padding: 12px 9px !important;
        gap: 8px !important;
        border-radius: 15px !important;
    }

    #step2 .level-number {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        font-size: 15px !important;
    }

    #step2 .option-content strong {
        font-size: 14px !important;
    }

    #step2 .option-content small {
        font-size: 10.5px !important;
    }

    #step2 .level-documents {
        font-size: 10.8px !important;
        line-height: 1.75 !important;
    }

    #step2 .option-check {
        width: 22px !important;
        min-width: 22px !important;
        font-size: 18px !important;
    }
}