/* style.css for miniatm-merchant-form */

:root {
    --color-primary: #310033;
    --color-primary-container: #500b52;
}

/* Loading Screen Logic */
body.loading {
    overflow: hidden;
}

body.loading #loadingScreen {
    opacity: 1;
    pointer-events: all;
}

#loadingScreen {
    opacity: 0;
    pointer-events: none;
}

/* Animations & Transitions */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}

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

/* Scroll offset for sticky header */
input, select, textarea, div[id$="Display"] {
    scroll-margin-top: 100px;
}

/* Focus states — follows whitelabel color */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* Signature Pad */
.signature-pad {
    border: 2px dashed #d3c2cd;
    background-color: #ffffff;
    cursor: crosshair;
}

.signature-pad:hover {
    border-color: var(--color-primary);
}

/* Validation Error State */
.error {
    border-color: #ba1a1a !important;
}

/* Navigation Icons — follows whitelabel color */
.nav-icon.active {
    background-color: var(--color-primary-container);
    color: #ffffff;
}

.nav-icon-mobile.active {
    background-color: var(--color-primary-container);
    color: #ffffff;
    border-radius: 9999px;
    padding: 4px 16px;
}