:root { --theme-gold: #BC9F57; }

.purchase-auth-wrapper {
    font-family: 'Roboto', sans-serif;
    padding-top: 2rem;
    /* background: #f8f9fb; */
}

.btn-gold {
    background-color: var(--theme-gold);
    color: #fff;
    border: none;
}
.btn-gold:hover {
    background-color: #a98c4b;
    color: #fff;
}

.timeline-step.shadow-sm { box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.timeline-step:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }

/* Flex container for timeline steps */
.timeline-steps-container {
    display: flex;
    justify-content: space-between; /* even spacing */
    gap: 1rem;
    flex-wrap: nowrap; /* prevent wrapping */
}

/* Each step same width */
.timeline-step {
    flex: 1; /* equally divide space */
    max-width: 20%; /* 5 in a row */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* top aligned content */
    min-height: 250px; /* same height for all */
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.timeline-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Step circle */
.step-circle {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem auto;
    border-radius: 50%;
    background: #ddd;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .timeline-steps-container {
        flex-wrap: wrap;
    }
    .timeline-step {
        max-width: 100%;
    }
}

/* Active and finished states remain the same */
.timeline-step.active { border-color: var(--theme-gold); background: #fff9f0; }
.timeline-step.finished { border: 2px solid var(--theme-gold); background: #fffbea; }
.timeline-step.active .step-circle,
.timeline-step.finished .step-circle { background: var(--theme-gold); color: #fff; }
.timeline-step.active .step-circle { background: var(--theme-gold); color: #fff; }
.timeline-step.active h6 { color: var(--theme-gold); }

/* Completed Step */
.timeline-step.finished {
    border: 2px solid var(--theme-gold);
    background: #fffbea;
    box-shadow: 0 6px 15px rgba(188, 159, 87, 0.3);
}
.timeline-step.finished .step-circle {
    background: var(--theme-gold);
    color: #fff;
    font-weight: 700;
    border: 2px solid #fff;
}
.timeline-step.finished h6 { color: var(--theme-gold); }

/* Step Titles & Descriptions */
.timeline-step h6 { font-size: 1rem; transition: color 0.3s; }
.timeline-step p { font-size: 0.8rem; color: #6c757d; margin-bottom: 0; }

/* Progress Bar */

.progress {
    width: 100%; /* Ensure full width */
    border-radius: 4px; /* Optional: rounded corners */
    overflow: hidden; /* Keep inner bar inside */
}

.progress-bar {
    width: 0%; /* Start at 0, JS will update */
    transition: width 0.3s ease;
    background-color: var(--theme-gold); /* Gold color */
}

.progress-bar.bg-gold { 
    background-color: var(--theme-gold); 
    transition: width 0.3s ease; 
}

/* Optional: smooth card hover on form */
.form-card { 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    background: #fff; 
    padding: 2rem; 
    transition: box-shadow 0.3s ease; 
}
.form-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}
/* Invalid feedback */
.is-invalid { border-color: #dc3545 !important; }
.invalid-feedback {
    color: #dc3545;
    font-size: 0.85rem;

    margin-bottom: 10px;
}

.form-control {
    border-radius: 14px !important;
    padding: 16px 18px;
    font-size: 1.1rem;
    margin-bottom: 20px;
    border: 1px solid #ced4da;
    background-color: #fff;
    transition: 0.3s;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
    background-color: #fff;
}

form#msform input:hover,
form#msform  input:focus,
form#msform  input:active {
    border: 1px solid #BC9F57 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #BC9F57;
}

/* ICONS */

#stp_personal:before {
    font-family: FontAwesome;
    content: "\f007"
}
#stp_item:before {
    font-family: FontAwesome;
    content: "\f290"
}

#stp_payment:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#stp_images:before {
    font-family: FontAwesome;
    content: "\f03e"
}

#stp_complete:before {
    font-family: FontAwesome;
    content: "\f00c"
}


#authphotos .filepond--item {
    width: calc(50% - 0.5em) !important;
}

@media (min-width: 30em) {
    #authphotos .filepond--item {
        width: calc(50% - 0.5em) !important;
    }
}

@media (min-width: 50em) {
    #authphotos .filepond--item {
        width: calc(33.33% - 0.5em) !important;
    }
}


.filepond--panel-root {
    background-color: transparent;   /* fully transparent */
    border: 2px dashed #c4c5c7;      /* modern accent color */
    border-radius: px;            
    box-shadow: none;                /* remove shadow for transparency */
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
}