/* PackIt Custom Styles */

.navbar {
    background-image:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)),
            url("../img/title.24d8a3a4b08d.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 70px;
    padding: 1rem 0;
}

.navbar .nav-link {
    font-size: 1.10rem;
    color: #e1d6c5;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
    width: fit-content;
    padding: 0.3rem 1.0rem;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

.navbar .navbar-brand {
    font-size: 1.5rem;
    color: #e1dcd4;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
    padding: 0.2rem 1rem;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 20%, black 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, black 20%, black 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

/* Navbar toggler always thick border */
.navbar-toggler {
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.6);
}

.navbar-toggler:focus {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.6);
}


/* Card hover effect */
.card {
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(100, 100, 80, 0.5);
}



.bag-card.bag-selected .card-header {
    box-shadow: -6px 0 0 0 var(--bs-primary) inset;
    background-color: var(--bs-gray-700);
}



/* Footer fixed at bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Form elements alignment */
.form-select {
    height: 2.25rem;
}