*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

.content-wrapper {
    width: 50%;
    margin: 5rem auto;
    color: #36454F; /* Charcoal */
    overflow: auto;
}

header {
    color: #686968;
    margin: auto;
    text-align: center;
}

header p {
    font-size: 1.4rem;
    font-weight: bold;
}

header span {
    display: block;
    font-size: 1.6rem;
}

h2 {
    color: #686968; /* Ash color */
    margin-top: 5rem;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.rent-form {
    padding: 2rem;
    margin: auto;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem 0 rgb(141, 120, 120);
    overflow: hidden; /* Ensure the cut-out effect doesn't overflow */
}

.rent-form legend {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 4rem 0;
}

.rent-form label, .rent-form input, 
.rent-form select, .rent-form textarea, #id_profile_pic  {
    display: block;
    width: 80%;
    margin: auto;
    color: #36454F; /* Charcoal */
}

.rent-form label {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
}

.rent-form textarea, #id_profile_pic {
    background-color: hsl(20, 45%, 95%);
}

.rent-form input, .rent-form select {
    border: 0;
    background-color: hsl(20, 45%, 95%);
    height: 4.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

.rent-form input:focus, .rent-form textarea:focus {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 2px dashed hsl(20, 45%, 80%);
    outline: none; /* Remove default browser outline */
}

.rent-form textarea {
    padding: 1rem;
    border: 0;
    border-radius: 0.5rem;
}

.rent-form select {
    /* Hide scrollbar for Firefox */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari, and Edge */
.rent-form select::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Ensure the select element remains functional */
.rent-form select {
    -ms-overflow-style: none; /* IE and Edge */
    overflow: -moz-scrollbars-none; /* Older Firefox */
}

.rent-form button, #downloadReceipt {
    display: block;
    margin: 3rem auto;
    padding: 1rem;
    border: 0;
    font-weight: bold;
    color: #4A2C2C; /* Dark Brown */
    border-radius: 0.5rem;
    min-width: 20rem;
    background-color: hsl(20, 45%, 80%);
    transition: 0.3s ease-in-out;
}

.rent-form button:hover, #downloadReceipt:hover {
    box-shadow: 0 0 1rem 0.1rem hsl(20, 45%, 50%);
}

.receipt {
    width: 80rem;
    overflow: auto;
    position: relative;
    background-color: hsl(30, 55%, 95%);
    border: 2px dotted hsl(20, 45%, 80%);
    margin: auto;
}

.receipt header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    grid-auto-columns: 1fr;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

.receipt h1 {
    font-weight: bold;
    margin-bottom: 1rem;
    max-width: 100%;
}

.receipt h2 {
    margin-top: 1rem;
}

.receipt header figure {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 25rem;
    width: 100%;
}

.receipt header figure > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.receipt header figure > figcaption img {
    background-color: hsl(30, 55%, 95%);
    padding: 0.5rem;
    position: absolute;
    left: 0;
    top: 10%;
}

.receipt header section {
    grid-column: 2 / 3;
    grid-row: 2;
    text-align: right;
    padding: 0 1rem;
}

.receipt table {
    width: 90%;
    padding: 1rem;
    margin: 2rem auto;
}

.receipt table caption {
    caption-side: top; /* Ensures the caption is above the table */
    font-size: 1.8rem; /* Optional: Style the caption */
    font-weight: bold;
    margin-bottom: 1rem; /* Optional: Add spacing below the caption */
}

.receipt th, .receipt td {
    text-align: center;
    padding: 1rem;
    border: 1px solid #36454fe5;
}

.receipt th {
    font-weight: bold;
    background-color: hsl(20, 45%, 80%);
}

.receipt td {
    font-weight: 500;
    color: #36454F; /* Charcoal */
}

.qr_code {
    width: 20rem;
    margin: auto;
    text-align: center;
}

.qr_code img {
    width: 100%;
}

@media (max-width: 768px) {
    h2 {
        width: 90%;
        margin: 3rem auto auto auto;
    }

    header p {
        width: 90%;
    }

    .content-wrapper {
        width: 90%; 
    }

    .rent-form legend {
        font-size: 1.6rem;
    }

    .rent-form label,
    .rent-form input,.rent-form select,
    .rent-form textarea, #id_profile_pic {
        width: 100%;
    }
}