/*Set font sizes which will grow depending
of the screen size*/
* {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
}

body {
    min-height: 100vh;
}

/*Set height of half window for carousel*/
.carousel-item {
    height: 50vh;
    object-fit: cover;
}

/*minimized spinner size*/
.alert-message .spinner-grow {
    width: 5px;
    height: 5px;
}

/*Set font size, positioning of the text
in the slider and shadow of the text for
better accessibility for text shadow I used
https://html-css-js.com/css/generator/text-shadow/
just played with it at the beginning and then
polished at devtools to fit my style
*/
.carousel-caption {
    top: 40%;
    text-shadow: 1px 1px 2px #000,
    2px 2px 4px #333,
    3px 3px 6px rgba(0, 0, 0, 0.2);
}

/*Set image in carousel take 100% parent block*/
.carousel-item img {
    height: 100%;
}

/*Set image ratio to 100% as its getting
cropped on big screens*/
@media screen and (min-width: 1000px) {
    .carousel-item img {
        height: 100%;
        width: auto;
    }
}

/*Added background image to 404 page
and set height to full screen height
text-shadow added to make text better visible
*/
.error-page {
    min-height: 100vh;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 70%),
    2px 0 3px rgb(57 17 26 / 50%);
}


/*image for 404 page*/
.f04 {
    background: url("../img/404.png") center center/cover no-repeat;
}

/*image for server errors*/
.f05 {
    background: url("../img/500.png") center center/cover no-repeat;
}

/*image for random errors errors*/
.errors {
    background: url("../img/error.png") center center/cover no-repeat;
}

/*image for success messages*/
.success-page {
    background: url("../img/success.png") center center/cover no-repeat;
}

/*Add size, uppercase and color of the login button for not authenticated users*/
.login-button {
    font-size: 1.6rem;
    text-transform: uppercase;
    color: #ad1840;
}


/*Change color of login button on hover*/
.login-button:hover {
    color: #1879ad;
    text-decoration: none;
}

/*Make label being inline elements which
remove unwanted gaps*/
.form-label {
    display: inline;
}


/*change opacity and pointer events on disabled buttons*/
.button-disabled, .btn-checkout:disabled {
    pointer-events: none;
    opacity: 0.5;
}


.password-label {
    position: relative;
}

/*Show hide password icon*/
.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
}

.page-item .page-link {
    color: #ffc107;
}

.page-item .page-link:hover {
    color: rgba(255, 193, 7, 0.51);
}

.page-item .page-link.active {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #ffffff;
    font-weight: bold;
}

@media (max-width: 768px) {
    .order-items .order-content {
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
    }
}

@media (min-width: 768px) {
    .order-items .order-content {
        border: 0;
    }
}