*{
    text-transform: uppercase;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input[name="username"] {
    text-transform: none;
}
input[name="password"] {
    text-transform: none;
}
input[name="newPassword"] {
    text-transform: none;
}
input[name="confirmPassword"] {
    text-transform: none;
}

.blink {
    animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.vertical-line {
    width: 1px;
    background-color: lightgray;
    height: 100%;
}

.zoom-in {
    transition: transform .5s; /* Animation */
}

.zoom-in:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom-in-2 {
    transition: transform .5s; /* Animation */
}

.zoom-in-2:hover {
    transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.a-without-effect:link, .a-without-effect:visited, .a-without-effect:hover {color: inherit; text-decoration: none;}

.captcha-sized-row {
    width: 304px;
}

.ready-to-collect-status {
    background: #dbc5ff;
    color: #8900ff;
}

.waiting-for-print-status {
    background: rgba(190,255,193,0.89);
    color: rgba(0,0,0,0.61)
}

.waiting-for-verification-status {
    background: rgba(255,201,247,0.68);
    color: rgb(158 23 165 / 89%);
}

.notified-status {
    background: rgba(255,201,247,0.68);
    color: rgb(158 23 165 / 89%);
}

.collected-status {
    background: rgb(124, 200, 92);
    color: #2a3746;
}

.pending-status {
    background: rgb(238, 172, 14);
    color: #2a3746;
}

.draft-status {
    background: rgba(250,255,175,0.89);
    color: rgba(82,95,0,0.89);
}

.edited-status {
    background: rgba(178,255,0,0.89);
    color: rgba(64, 98, 0, 0.93);
}

.paid-status {
    background: rgba(156,200,255,0.89);
    color: rgb(62, 78, 162);
}

.photo-video {
    object-fit: cover;
    aspect-ratio: 3/4;
    transform-origin: center;
}

.photo-canvas {
    width: 129px;
    height: 171px;
}

.modal-custom-size {
    max-width: 75vw;
}

.os-scrollbar-handle {
    color: #000000;
}

.no-uppercase {
    text-transform: none;
}

/* Step Progress Navigation */
.step-progress-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    padding: 20px 10px;
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.step-progress-nav .step-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    text-transform: none;
}

.step-progress-nav .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-transform: none;
}

.step-progress-nav .step-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 8px;
    text-transform: none;
}

.step-progress-nav .step-connector {
    width: 40px;
    height: 3px;
    background: #dee2e6;
    margin: 0 5px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

/* Active Step */
.step-progress-nav .step-item.active .step-circle {
    background: #2c3e50;
    color: #fff;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.4);
}

.step-progress-nav .step-item.active .step-label {
    color: #2c3e50;
    font-weight: 700;
}

/* Completed Step */
.step-progress-nav .step-item.completed .step-circle {
    background: #27ae60;
    color: #fff;
}

.step-progress-nav .step-item.completed .step-label {
    color: #27ae60;
}

/* Completed connector */
.step-progress-nav .step-connector.completed {
    background: #27ae60;
}

/* Future Step */
.step-progress-nav .step-item.future .step-circle {
    background: #e9ecef;
    color: #6c757d;
}

.step-progress-nav .step-item.future .step-label {
    color: #adb5bd;
}

/* Future Step - not clickable */
.step-progress-nav .step-item.future {
    pointer-events: none;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 991.98px) {
    .step-progress-nav {
        flex-wrap: wrap;
        gap: 12px;
    }
    .step-progress-nav .step-label {
        font-size: 11px;
        margin-left: 5px;
    }
    .step-progress-nav .step-circle {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
    .step-progress-nav .step-connector {
        width: 20px;
    }
}

@media (max-width: 575.98px) {
    .step-progress-nav {
        padding: 15px 5px;
    }
    .step-progress-nav .step-label {
        display: none;
    }
    .step-progress-nav .step-circle {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .step-progress-nav .step-connector {
        width: 15px;
    }
}