/* =========================
   FLEX UTILITIES
========================= */

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: flex-end;
}


/* Amount pill styling - button-like but distinct */
.amount-pill {
    font-weight: 600;
    border: 2px solid #049694 !important;
    margin: 5px;
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 18px;
    text-decoration: none !important;
    background-color: #f8f9fa !important;
    color: #049694;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    text-align: center;
    transition: all 0.2s linear;
    cursor: default;
    position: relative;
}

.amount-pill:hover {
    background-color: #e8f7f7 !important;
    border: 2px solid #037a78 !important;
    color: #037a78;
    box-shadow: 0 4px 8px rgba(4, 150, 148, 0.2);
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.custom-checkbox {
    margin: 0 !important;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Mobile amount pill - IMPROVED */
@media screen and (max-width: 768px) {
    .amount-pill {
        font-size: 14px;
        padding: 8px 12px;
        min-width: 100px;
        margin: 5px 0;
        display: block;
        width: 100%;
    }

    .navbar-right {
        display: flex;
        flex-direction: column !important;
        width: 90%;
    }

    /* Improved mobile layout for auth buttons */
    .navbar-right .auth-buttons {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .navbar-right .amount-pill {
        order: -1;
        margin-bottom: 10px;
    }

    .navbar-right .btn-green {
        width: 100%;
        margin: 5px 0;
        text-align: center;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    .amount-pill {
        font-size: 16px;
        padding: 10px 12px;
        min-width: 90px;
    }
}

/* Balance label style */
.amount-pill.with-label::before {
    content: "Balans: ";
    font-weight: 500;
    font-size: 0.9em;
    opacity: 0.8;
    margin-right: 4px;
}

/* Default: Desktop */
.slider-img.mobile {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
}

.slider-img:not(.mobile) {
    display: block;
}

/* Mobile devices */
@media (max-width: 768px) {
    .slider-img.mobile {
        display: block !important;
    }

    .slider-img:not(.mobile) {
        display: none;
    }

    .hero .hero-main .hero-slider-img {
        height: 100% !important;
    }
}


.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.vh-100 {
    height: 100vh !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}


.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}


.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-bolder {
    font-weight: 900 !important;
}

.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-break {
    word-wrap: break-word !important;
}