html {
    height: 100%;
}

body {
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
    height: 100%;
}

footer {
    height: 1.5rem;
}

main.container {
    padding-bottom: 1.5rem;
    min-height: 100%;
}

@media(max-width: 640px){
    main.container {
        padding-bottom: 1.5rem !important;
    }
}

#admin-page {
    height: 100%;
}

.shadow-top {
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1) !important;
}

.scrollable-dropdown-items {
    overflow: hidden;
    overflow-y: auto;
    max-height: 300px;
}

/* General flag icon styling */
.flag {
    width: 24px; /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    display: inline-block;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
    vertical-align: middle;
}

/* French Flag */
.french-flag {
    background: linear-gradient(to right, #0055a4 33.33%, #fff 33.33%, #fff 66.66%, #ef4135 66.66%);
}

/* Corrected American Flag */
.us-flag {
    position: relative;
    background: repeating-linear-gradient( to bottom, #b22234, /* Red stripe */
    #b22234 10%, #fff 10%, /* White stripe */
    #fff 20% );
    overflow: hidden;
}

    .us-flag::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%; /* Adjust as needed for the blue section */
        height: 70%; /* Adjust as needed for the blue section */
        background: #3c3b6e; /* Navy blue */
        background-image: radial-gradient(circle, #fff 12%, transparent 13%); /* White stars */
        background-size: 3px 3px; /* Star size */
        background-position: 1px 1px;
    }

/* Netherlands Flag */
.dutch-flag {
    background: linear-gradient(to bottom, #21468b 33.33%, #fff 33.33%, #fff 66.66%, #ae1c28 66.66%);
}

.lds-ring-wrapper {
    position: fixed;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: #2C2C2C;
    opacity: 98%;
    z-index: 1031;
    padding-left: calc(50% - 80px);
    padding-right: calc(50% - 80px);
    padding-top: 100px;
    padding-bottom: calc(50% - 80px);
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 160px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 160px;
        height: 160px;
        margin: 8px;
        border: 8px solid goldenrod;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: goldenrod transparent transparent transparent;
        z-index: 1032;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.custom-select {
    width: 83.79%;
    display: inline-block;
}

.navbar-brand {
    color: lightgoldenrodyellow;
}

    .navbar-brand:hover {
        color: gold;
    }

.nav-link {
    color: lightgoldenrodyellow;
}

    .nav-link:hover {
        color: gold;
    }

.navbar-nav .nav-link.active {
    color: gold;
}

.text-gold {
    color: gold;
}

    .text-gold:focus {
        color: goldenrod;
    }

    .text-gold::placeholder {
        color: lightgoldenrodyellow;
    }

.btn-primary {
    background-color: goldenrod;
    color: black;
    border-color: gold;
}

    .btn-primary:hover {
        background-color: gold;
        color: black;
        border-color: goldenrod;
    }

    .btn-primary:active {
        background-color: darkgoldenrod !important;
        color: black !important;
        border-color: goldenrod !important;
    }

.card {
    border-color: gold;
}

.bg-gold {
    background: linear-gradient(45deg, #FFD700, #FFC107, #FFB300);
}

.border-gold {
    border-color: gold;
}

    .border-gold:hover {
        border-color: goldenrod;
    }

    .border-gold:focus {
        border-color: gold;
        box-shadow: 0 0 0 .25rem rgba(255, 215, 0, 0.5);
    }

span.border-gold {
    border: 1px solid gold;
}

.form-control {
    border-color: gold;
}

    .form-control:focus {
        border-color: gold;
        box-shadow: 0 0 0 .25rem rgba(255, 215, 0, 0.5);
    }

.form-select {
    border-color: gold;
}

    .form-select:focus {
        border-color: gold;
        box-shadow: 0 0 0 .25rem rgba(255, 215, 0, 0.5);
    }

checkbox:checked {
    accent-color: gold;
    color: gold;
}

input[type="checkbox"]:checked {
    accent-color: gold;
    color: gold;
}

.menu-item {
    display: flex;
    flex-direction: row; /* Align label and content horizontally */
    height: 100%; /* Match parent height */
    border: 1px solid #ddd; /* Optional border for visual structure */
    cursor: pointer;
}

.menu-link {
    text-decoration: none;
    color: lightgrey;
}

    .menu-link:hover {
        color: gold;
    }

    .menu-link:hover .menu-item {
        border-color: gold;
    }

    .menu-link:hover .menu-item img {
        filter: none;
    }

.vertical-label {
    writing-mode: vertical-rl; /* Vertical text direction */
    transform: rotate(180deg); /* Flip text to readable */
    text-align: right;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

.menu-content {
    flex-grow: 1; /* Allow the image to take remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .menu-content img {
        object-fit: cover; /* Ensure the image fills the space without distortion */
        width: 100%; /* Fill available width */
        height: calc(100vh - 5.5rem);
        filter: grayscale(100%);
        transition: filter 0.3s ease;
    }

@media(max-width: 640px){
    .menu-content img {
        height: Calc(45vh - 1.5rem);
    }
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.bg-company-logo {
    background-image: url('../img/company_logo_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    min-width: 100%;
    min-height: calc(100vh - (3.5rem + 1.5rem));
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

    .bg-company-logo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--bs-dark-rgb), 0.75); /* 75% black overlay */
        z-index: 1;
    }

.bg-company-logo div {
    position: relative;
    z-index: 2;
}

.bg-company-logo h1 {
    text-align: center;
}

.car-img-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

    .car-img-container img {
        display: block;
        width: 100%;
        height: auto;
    }

.sold-img {
}

.sold-mark {
    position: absolute;
    bottom: 10%;
    width: 100%;
    color: gold;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none; /* don't block clicks */
    background-color: rgba(0, 0, 0, 0.75);
}

.sold-mark-details {
    position: absolute;
    bottom: 10%;
    width: 100%;
    color: gold;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none; /* don't block clicks */
    background-color: rgba(0, 0, 0, 0.75);
}