/* General */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
.content-wrapper {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}

/* Mobile nav bar */
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Order page landing */
.page-order-selection .selection-container {
    max-width: 750px; 
    border-radius: 20px;
}
.page-order-selection .icon-circle { width: 60px; height: 60px; font-size: 24px; }
.page-order-selection .icon-box { width: 45px; height: 45px; font-size: 20px; }
.page-order-selection .selection-card {
    transition: all 0.2s ease-in-out;
    border-radius: 12px;
    background-color: #f8f9fa;
    border: 1px solid transparent;
}
.page-order-selection .selection-card:hover {
    transform: translateY(-3px);
    border: 1px solid #0d6efd;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.1);
}
.page-order-selection .selection-card i { transition: transform 0.3s ease; }
.page-order-selection .selection-card:hover i { transform: scale(1.1) rotate(-5deg); color: #0d6efd; }

/* order-form.php */
.page-order-form .form-control, .page-order-form .form-select { border-radius: 10px; border: 1px solid #e9ecef; }
.page-order-form .card { border-radius: 20px !important; }
.btn-check:checked + label { background-color: rgba(13, 110, 253, 0.05); }
.size-item-wrapper { 
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border: 1px solid #e9ecef !important; /* This replaces the 'border' class */
}
.size-item-active { 
    background-color: #f0f7ff !important; 
    border: 1px solid #0d6efd !important; /* Now this will definitely work */
}
.size-item-active span, 
.size-item-active input { 
    color: #0d6efd !important; 
}

/* fetch_orders.php */
/* Stepper Styling */
.stepper-wrapper { display: flex; justify-content: space-between; position: relative; margin-bottom: 3rem; }
.stepper-wrapper::before { content: ""; position: absolute; top: 20px; left: 0; width: 100%; height: 2px; background: #edeff2; z-index: 1; }
.stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 2; }
.step-counter { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: white; border: 2px solid #edeff2; color: #ccc; margin-bottom: 8px; transition: all 0.3s ease; }
.stepper-item.active .step-counter { background: #4e73df; border-color: #4e73df; color: white; box-shadow: 0 0 0 5px rgba(78, 115, 223, 0.1); }
.step-name { font-size: 11px; color: #858796; font-weight: 600; text-transform: uppercase; }
.active .step-name { color: #4e73df; }

/* Timeline Styling */
.timeline { position: relative; padding-left: 3rem; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: #edeff2; }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-marker { position: absolute; left: -38px; width: 16px; height: 16px; border-radius: 50%; background: #d1d3e2; border: 3px solid white; box-shadow: 0 0 0 2px #d1d3e2; }
.timeline-item.active .timeline-marker { background: #4e73df; box-shadow: 0 0 0 2px #4e73df; }

/* Status Circle Image Trigger */
.status-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #edeff2; background: #f8f9fc; transition: 0.2s; }
.status-circle.has-image { border-color: #4e73df; color: #4e73df; cursor: pointer; }
.status-circle.has-image:hover { transform: scale(1.1); background: #4e73df; color: white; }
.status-circle.no-image { opacity: 0.5; cursor: not-allowed; }

/* Make pay manual dp check text white */
#payManual:checked + label {
    color: #ffffff !important;
}
#payManual:checked + label span {
    color: #ffffff !important;
}