/* ---------- Fonts ---------- */
/* Google font imports */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Jost&family=Roboto:ital,wght@0,400;1,300&display=swap');

/* Font classes */
.jost-font {
    font-family: Jost, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
.caveat-font {
    font-family: Caveat, "Brush Script MT", cursive;
    font-weight: 400;
    font-style: normal;
}
  
.roboto-font {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Font colour classes */
.font-nunisi-gold {
    color: #FDD67C;
}

.font-nunisi-green {
    color: #3A6B35;
}

.font-off-black {
    color: #333A3F;
}

.font-off-white {
    color: #F5F5F5;
}

/* Font weight classes */
.font-weight-bolder {
    font-weight: bolder;
}

/* ---------- Global styling ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

.margin-zero {
    margin: 0;
}

.padding-zero {
    padding: 0;
}

/* Body size and fixed footer */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* Site background */
.content {
    min-height: calc(100vh - 336px);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1030%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(214%2c 217%2c 178%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c441.213C80.976%2c431.82%2c120.653%2c338.5%2c188.466%2c293.259C254.632%2c249.116%2c346.402%2c244.044%2c392.595%2c179.292C441.636%2c110.548%2c462.039%2c18.587%2c443.127%2c-63.712C424.665%2c-144.052%2c354.749%2c-199.264%2c293.042%2c-253.923C238.087%2c-302.601%2c178.632%2c-349.44%2c106.31%2c-362.057C37.68%2c-374.03%2c-25.548%2c-332.108%2c-94.405%2c-321.514C-177.123%2c-308.787%2c-275.384%2c-348.184%2c-338.802%2c-293.573C-401.698%2c-239.412%2c-385.71%2c-139.244%2c-400.844%2c-57.633C-416.692%2c27.825%2c-465.765%2c117.158%2c-429.628%2c196.204C-393.492%2c275.249%2c-294.329%2c297.45%2c-218.83%2c340.506C-147.636%2c381.106%2c-81.411%2c450.657%2c0%2c441.213' fill='%23cfd3a5'%3e%3c/path%3e%3cpath d='M1440 1243.262C1564.445 1213.644 1626.539 1078.9859999999999 1712.862 984.582 1777.001 914.4390000000001 1841.478 847.838 1880.731 761.275 1919.901 674.896 1925.4940000000001 582.455 1937.854 488.419 1954.9859999999999 358.081 2051.5950000000003 203.969 1967.2350000000001 103.14800000000002 1883.375 2.9249999999999545 1710.412 102.89800000000002 1584.883 66.57499999999999 1460.143 30.480000000000018 1373.291-122.17399999999998 1244.445-106.00099999999998 1116.646-89.95899999999995 1045.435 47.678999999999974 960.941 144.89299999999997 876.318 242.255 742.9 332.321 751.611 461.025 760.574 593.4639999999999 946.261 639.56 1002.556 759.774 1057.943 878.049 980.972 1041.074 1068.594 1137.9189999999999 1156.716 1235.317 1312.223 1273.673 1440 1243.262' fill='%23dde0bf'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1030'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

/* Site buttons */
.nunisi-button,
.back-button,
.trip-cancel-button {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 800;
    color: #3A6B35;
    background-color: #FDD67C;
    border: 1px solid #333A3F;
    border-radius: 8px;
    padding: 5px 10px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}

.nunisi-button:hover,
.back-button:hover {
    border-color: #333A3F;
    color:#FDD67C;
    background-color: #3A6B35;
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    border: 1px solid #333A3F;
}

.delete-button:hover,
.trip-cancel-button:hover {
    background-color: #CF1020;
    color: #F5F5F5;
}

.back-button-container {
    width: fit-content;
    height: fit-content;
    overflow: visible;
    margin: 0 auto;
}

/* Site dropdown boxes */
.nunisi-dropdown {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #FDD67C;
    background-color: #3A6B35;
    border-color: #333A3F;

}

.nunisi-dropdown:hover, .nunisi-drop-down:active, .nunisi-drop-down:focus {
    transition-duration: 0.2ms;
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    color: #FDD67C;
    background-color: #3A6B35;
}

/* Background colours */
.bg-nunisi-green {
    background-color: #3A6B35;
}

.bg-nunisi-gold {
    background-color: #FDD67C;
}

.bg-nunisi-dark-gold {
    background-color: #b88c26;
}

/* Borders */
.border-off-black-3 {
    border: 1px solid #333A3F;
    border-radius: 3%;
}

.border-dark-gold {
    border: 1px solid #b88c26;
}

/* Toast styling */
.toast {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toast.text-bg-success {
    background-color: #3A6B35 !important;
    color: #FDD67C !important;
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    border-radius: 8px;
}

/* Page text */
.page-title {
    font-family: Jost, Arial, Helvetica, sans-serif;
    color:#3A6B35;
    text-align: center;
    font-weight: bolder;
    padding-top: 15px;
}

/* ---------- Navigation bar styling ---------- */
#top-nav {
    height: 168px;
}

/* Logo */
.site-logo-container {
    height: 168px;
    width: 205px;
    top: 0;
}

#navbar-brand {
    height: 168px;
}

#site-logo-nav {
    height: 168px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Booking form */
.booking-form-div {
    width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.booking-form-div form {
    width:100%;
}

/* Booking form - Guests */
.guest-selection-row-container {
    padding:0;
}

.guest-selection-row {
    margin-top: 15px;
    height: 60px;
    border: 1px solid #333A3F;
    border-radius: 8px;
    background-color: #FDD67C;
    margin: 0 12px;
    padding: 0;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.guest-selection {
    text-align: center;
}

.guests-choices label{
    font-weight: bolder;
    color:#3A6B35;
}

.adult-selection,
.children-selection {
    position: relative;
}

.adult-selection::before,
.children-selection::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 0;
    width: 2px;
    background-color: #3A6B35;
}

.guests-choices input {
    width: 50px;
    background-color: #3A6B35;
    color: #FDD67C;
    border: 1px solid #FDD67C;
    text-align: center;
}

.guest-counter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.guest-counter {
    background: #FDD67C;
    border: 1px solid #333A3F;
    border-radius: 8px;
    width:fit-content;
    text-align: center;
    height: 58.4px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color:#3A6B35;
}

.guest-counter p {
    margin: 0;
}

/* Booking form - dates */
.check-in-div,
.check-out-div {
    top: -10px;
}

.check-in-div label,
.check-out-div label {
    padding: 25px 0 0 22px;
    font-size: 1rem;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#3A6B35;
    font-weight: 600;
}

#id_mobile-check_out_date,
#id_mobile-check_in_date,
#id_desktop-check_out_date,
#id_desktop-check_in_date {
    color: #3A6B35;
    background-color: #FDD67C;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    border: 1px solid #333A3F;
}

.check-in-div input:hover,
.check-out-div input:hover {
    cursor: pointer;
}

.check-in-div input:focus,
.check-out-div input:focus {
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    border: 1px solid #333A3F;
}

/* Booking form - submit */
.booking-form-submit-div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

/* Account menu */
#account-dropdown-super-div{
    display: flex;
    align-items: center;
    height: 168px;
    width: 120px;
}

#account-dropdown-div {
    width: 205px !important;
    text-align: right;
}

.dropdown-toggle::after {
    display: none !important;
}

#account-dropdown {
    border: 1px solid #333A3F;
    border-radius: 8px;
    color: #3A6B35;
    background-color: #FDD67C;
}

#account-dropdown:hover, #account-dropdown:active, #account-dropdown:focus {
    transition-duration: 0.2ms;
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    color: #FDD67C;
    background-color: #3A6B35;
}

#account-nav-menu {
    padding-right: 10px;
}

#account-nav-menu i {
    font-size: 1.5rem;
}

#account-nav-menu .fa-bars {
    padding-right: 10px;
}

#account-nav-menu .fa-circle-user {
    padding-left: 10px;
}

#account-nav-menu-dropdown {
    border: 1px solid #b88c26;
    z-index: 9999;
}

.account-link {
    font-size: 1.2rem;
}

.account-link a {
    padding-left: 8px;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

.account-link a::after {
    content: ''; 
    position: absolute;
    bottom: 0;
    left: 8px;
    width: 0;
    height: 1px;
    background-color: #FDD67C;
    transition: width 0.3s ease;
}

.account-link a:hover::after {
    width: 100%; 
}

/* ---------- Footer Styling ---------- */
.footer {
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 168px;
    overflow: hidden;
}

.footer-container {
    margin: 0;
}

.footer-row {
    width: 100vw;
}

.footer div ul {
    list-style-type: none;
}

.hotel-socials {
    display: flex;
    align-items: center;
    margin-top: 10px;
    text-align: left;
    font-size: 1rem;
}

.hotel-socials i {
    font-size: 1.2rem;
}

.facebook-link {
    margin-right: 16px;
}

.fa-facebook:hover {
    color: blue;
    background-color: white;
    border-radius: 50%;
}

.fa-instagram:hover {
    color: white;
    background-color: black;
    border-radius: 30%;
}

.email-icon-footer,
.phone-icon-footer {
    margin-right: 16px;
}

.hotel-email-link:hover {
    font-weight: bolder;
}

.footer-logo-div {
    justify-content: center;
}

.footer-logo img{
    height: 168px;
}

.developer-info-div {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.developer-info-div p {
    font-weight: bolder;
}

.developer-info-div i {
    margin-bottom: 20px;
    padding-left: 10px;
}

.fa-github:hover {
    color: black;
}

.fa-github {
    margin-right: 30px;
}

/* ---------- AllAuth Pages ---------- */
/* Sign up */
.allauth-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.allauth-message {
    text-align: center;
    max-width: max(90%, 600px);
    margin: 0 auto;
    color: #333A3F;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    width: 100%;
}

.allauth-form {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    text-align: center;
}

.sign-up-form,
.login-form {
    width: fit-content;
    margin: 0 auto;
}

.sign-up-form label,
.login-form label {
    width: 30%;
    text-align: right;
}

.sign-up-form input,
.login-form input {
    width: 65%;
}

.login-form #id_remember {
    width: fit-content;
    margin-left: 1rem;
}

.sign-up-form ul{
    border: 1px solid #b88c26;
    border-radius: 8px;
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
    font-size: smaller;
    padding: 1rem;
    list-style-type: none;
    text-align: left;
    color: #333A3F;
}

.social-account-hr {
    width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
    border: 2px solid #3A6B35;
}

.allauth-form span a:hover {
    font-weight: bolder;
}

.allauth-button-div {
    margin: 1rem 0;
    text-align: center;
}

.allauth-button-div button{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 800;
    color: #3A6B35;
    background-color: #FDD67C;
    border: 1px solid #333A3F;
    border-radius: 8px;
    padding: 5px 10px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}

.allauth-button-div button:hover {
    border-color: #333A3F;
    color:#FDD67C;
    background-color: #3A6B35;
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
    border: 1px solid #333A3F;
}

.allauth-socials {
    text-align: center;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #333A3F;
}

.allauth-socials ul {
    list-style-type: none;
    font-size: 1.5rem;
}

.allauth-socials ul li a:hover{
    font-weight: bolder;
}

.allauth-message a:hover {
    font-weight: bolder;
}

#id_password_helptext {
    display: block;
}

.reauthenticate-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reauthenticate-form form div ul {
    color: #CF1020 !important;
    list-style-type: none;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.email-button-div {
    max-width: 500px;
    margin: 0 auto;
}

.remove-email-button button:hover {
    background-color: #CF1020 !important;
    color: #F5F5F5 !important;
}

.forgot-password-button {
    width: fit-content;
}

/* ---------- index.html ---------- */
/* Index site content */
.content-index {
    min-height: calc(100vh - 376px);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1030%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(214%2c 217%2c 178%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c441.213C80.976%2c431.82%2c120.653%2c338.5%2c188.466%2c293.259C254.632%2c249.116%2c346.402%2c244.044%2c392.595%2c179.292C441.636%2c110.548%2c462.039%2c18.587%2c443.127%2c-63.712C424.665%2c-144.052%2c354.749%2c-199.264%2c293.042%2c-253.923C238.087%2c-302.601%2c178.632%2c-349.44%2c106.31%2c-362.057C37.68%2c-374.03%2c-25.548%2c-332.108%2c-94.405%2c-321.514C-177.123%2c-308.787%2c-275.384%2c-348.184%2c-338.802%2c-293.573C-401.698%2c-239.412%2c-385.71%2c-139.244%2c-400.844%2c-57.633C-416.692%2c27.825%2c-465.765%2c117.158%2c-429.628%2c196.204C-393.492%2c275.249%2c-294.329%2c297.45%2c-218.83%2c340.506C-147.636%2c381.106%2c-81.411%2c450.657%2c0%2c441.213' fill='%23cfd3a5'%3e%3c/path%3e%3cpath d='M1440 1243.262C1564.445 1213.644 1626.539 1078.9859999999999 1712.862 984.582 1777.001 914.4390000000001 1841.478 847.838 1880.731 761.275 1919.901 674.896 1925.4940000000001 582.455 1937.854 488.419 1954.9859999999999 358.081 2051.5950000000003 203.969 1967.2350000000001 103.14800000000002 1883.375 2.9249999999999545 1710.412 102.89800000000002 1584.883 66.57499999999999 1460.143 30.480000000000018 1373.291-122.17399999999998 1244.445-106.00099999999998 1116.646-89.95899999999995 1045.435 47.678999999999974 960.941 144.89299999999997 876.318 242.255 742.9 332.321 751.611 461.025 760.574 593.4639999999999 946.261 639.56 1002.556 759.774 1057.943 878.049 980.972 1041.074 1068.594 1137.9189999999999 1156.716 1235.317 1312.223 1273.673 1440 1243.262' fill='%23dde0bf'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1030'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

/* Index header */
#index-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-links {
    font-family: Caveat, "Brush Script MT", cursive;
    font-size: 1.5rem;
}

.index-nav-item a{
    color: #3A6B35 !important;
    font-weight: bolder;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

.index-nav-item a::after {
    content: ''; 
    position: absolute;
    bottom: 12px;
    left: 8px;
    width: 0;
    height: 1px;
    background-color: #3A6B35;
    transition: width 0.3s ease;
    height: 3px;
}

.index-nav-item a:hover::after {
    width: 80%; 
}

#index-burger-nav {
    margin-top: 8px;
    margin-bottom: 8px;
    color: #3A6B35;
    border: solid 2px #3A6B35;
}

.navbar-toggler-icon {
    color: #3A6B35;
}

/* Index hero section */
#index-hero {
    width: 100%;
    height: 65vh;
    background-image: url('/media/hero-image.webp');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}

#hero-title {
    text-align: center;
    color: #F5F5F5;
    font-size: 6rem;
    text-shadow: 
        2px 2px 0px #333A3F,
        -1px -1px 0px #333A3F,
        -1px 1px 0px #333A3F,
        1px 1px 0px #333A3F;
}

#hero-message {
    text-align: center;
    color: #f5f5f5;
    text-shadow: 
        2px 2px 0px #333A3F,
        -1px -1px 0px #333A3F,
        -1px 1px 0px #333A3F,
        1px 1px 0px #333A3F;
}

/* Sections */
.section-title {
    font-family: Jost, Arial, Helvetica, sans-serif;
    color: #3A6B35;
    font-size: 2rem;
    text-align: center;
}

.section-text {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
}

/* Index booking form */
.index-booking-form-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.index-booking-form-div form {
    width:100%;
}
#index-booking-form {
    margin-top: 10px;
}

#index-booking-form-body {
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #FDD67C;
    border-radius: 8px;
    background-color: #3A6B35;
    padding-bottom: 10px;
}

.index-check label {
    padding-left: 13px !important;
}

.index-guests-div {
    margin-bottom: 10px;
    background-color: #FDD67C;
    border-radius: 8px;
    width: fit-content;
    justify-content: center;
    display: flex;
}

.guests-form-guests {
    font-weight: bolder;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #3A6B35;
    padding-top: 5px;
    margin-bottom: 0;
}
.index-guests-choices {
    font-weight: bolder;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #3A6B35;
}

.index-guests-div label{
    text-align: center;
}

.index-guests-choices input {
    background-color: #3A6B35;
    color: #FDD67C;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

.index-guests-div {
    margin-top: 5px;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
}

.index-booking-form-submit-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Index horizontal rule */
.index-horizontal-rule {
    color:#3A6B35;
    width: 85%;
    margin: 10px auto;
}

/* Carousels */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-size: 50%, 50%;
  background-color: #3A6B35;
  display:none;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    box-shadow: 0 0 0 .25rem rgba(253, 214, 142, .75);
}

.carousel:hover .carousel-control-prev-icon,
.carousel:hover .carousel-control-next-icon {
    display: inline-block;
}

#resortInformationCarousel .carousel-item {
    transition: transform 5s ease-in-out;
}

/* Resort information section */
#index-resort-image-column {
    display: flex;
    justify-content: center;
}

#index-resort-image-column .carousel-inner,
#index-resort-image-column .carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#index-resort-image-column .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Index services */
.services-card {
    width: 85%;
    max-width: 1200px !important;
    margin: 10px auto;
    background-color: palegoldenrod;
    border: 2px solid #b88c26;
}

.services-card-image-container {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.services-card-title {
    font-family: Jost, Arial, Helvetica, sans-serif;
    color: #333A3F;
    text-align: center;
}

.services-card-text {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #333A3F;
}

/* Index location section */
.location-info {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
}

.location-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/media/georgia-map.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
    border: 1px solid #b88c26;
    border-radius: 5%;
    z-index: 1;
}

#location-map {
    width: 100%;
    min-height: 300px;
    border-radius: 5%;
}

/* Index FAQ section */
.faq-list {
    list-style-type: none;
}

.faq-question {
    font-weight: bolder;
}

/* ---------- Available Rooms ---------- */
/* Errors */
#available-rooms-error {
    width: 85%;
    max-width: 600px;
    margin: 0 auto;
}

#available-rooms-error p {
    text-align: center;
}

/* Sort dropdown box */
.room-sort-container {
    position: absolute;
    right: 15px;
    display: flex;
    gap: 5px;
    top: 178px;
    width: fit-content;
}

.room-sort-container label {
    padding: 0 5px;
}

/* Amenity Filter */
#amenity-accordion {
    width: 90%;
    max-width: 1000px;
    margin: 10px auto 20px auto;
}

#amenity-accordion-title button {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #FDD67C !important;
    background-color: #3A6B35 !important;
    border: 1px solid #333A3F;
}

.accordion-button::after {
    background-color: #F5F5F5;
    border-radius: 50%;
}

#amenity-accordion-title button:focus {
    box-shadow: 0 0 0 0.25rem rgba(253, 214, 142, .75);
}

.accordion-body {
    padding: 0;
}

#amenity-filter-body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #3A6B35;
    background-color: #FDD67C;
    border: 1px solid #333A3F;
}

#amenity-filter-body i {
    margin-right: 0.5rem;
}

#amenity-filter-body ul {
    margin-bottom: 0;
}

#amenity-choices {
    margin-bottom: 1rem;
    padding: 16px 20px 0 20px;
}

#amenity-filter-button-container {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1000px;
}

#amenity-filter-button-div {
    display: flex;
    justify-content: center;
    background-color: #3A6B35;
    border: 1px solid #333A3F;
    border-radius: 0 0 5px 5px;
    width: 100%;
    height: 100%;
}

#amenity-filter-button {
    padding: 0 50px;
    margin: 0.5rem 0;
}

/* Room cards */
.available-room-card {
    width: 90%;
    max-width: 1000px;
    margin: 10px auto 20px auto;
    border: 1px solid #333A3F;
    border-radius: 8px;
}

.available-room-name {
    text-align: center;
    padding-top: 10px;
    font-size: 3rem;
}

.available-room-amenities-title {
    padding-left: 2rem;
}

.available-room-card ul {
    list-style-type: none;
}

.amenity-icon-div {
    text-align: center;
}

.available-room-amenity i{
    color: #3A6B35;
}

.available-room-description {
    width: 90%;
    margin: 5px auto;
}

.room-image-booking-column {
    display: flex;
    flex-direction: column;
    height: auto; 
    padding-left: 0;
    border-left: 1px solid #b88c26;
}

.available-room-image {
    width: 95%;
    margin: 5px auto;
    display: flex;
    border-radius: 8px;
    border: 2px solid #3A6B35;
}

.room-trip-info-div {
    margin-top: auto;
    background-color: #3A6B35;
    border-radius: 8px 8px 8px 0;
}

.available-room-booking-div {
    padding-left: 1.5rem;
    padding-top: 1rem;
}

.available-room-booking-button {
    margin: 5px auto 20px auto;
    display: flex;
}

/*Pagination*/
.page-link {
    color: #FDD67C;
    background-color: #3A6B35;
    display: inline-block;
    transition: transform 0.3s ease;
}

.page-link:focus {
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-focus-color:#FDD67C;
    --bs-pagination-focus-bg: #3A6B35;
}

.page-link:hover {
    background-color: #3A6B35 !important;
    color: #FDD67C !important;
    transform: scale(1.1);
}

.page-item.active {
    --bs-pagination-active-bg: #FDD67C;
    --bs-pagination-active-border-color: #b88c26;
    --bs-pagination-active-color:#3A6B35;
}
.page-item.active .page-link:hover {
    background-color: #FDD67C !important;
    color: #3A6B35 !important;
    font-weight: normal !important;
}

.disabled .page-link {
    color: #3A6B35;
    background-color: rgba(253, 214, 124, 0.2);
    
}

#no-rooms {
    text-align: center;
    max-width: 95%;
}

/* ---------- Rooms: Superuser ---------- */
#add-room-button-div {
    display: flex;
    justify-content: center;
}

#add-room-button {
    margin: 20px auto;
    padding: 5px;
}

#all-rooms-div {
    width: 95%;
    max-width: 1800px;
    margin: 10px auto;
}

.all-rooms-inner-div {
    margin-top: 20px;
    margin-bottom: 20px;
}

.all-rooms-card-div {
    border: 1px solid #333A3F;
    background-color: #FDD67C;
    border-radius: 8px;
}

.all-rooms-card-title {
    background-color: #3A6B35;
    color:#FDD67C;
    font-family: Jost, Arial, Helvetica, sans-serif;
    border-radius: 8px 8px 0 0;
    border: 1px solid #3A6B35;
    text-align: center;
    padding-top: 0.5rem;
}

.all-rooms-card-body {
    padding: 10px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
}

.room-detail {
    font-weight: bolder;
}

.all-rooms-image-container {
    text-align: center;
}

.all-rooms-image {
    max-width: 90%;
    border: 2px solid #b88c26;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.all-rooms-button-container {
    background-color: #3A6B35;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #3A6B35;
    border-radius: 0 0 8px 8px;
    padding: 1rem 0;
}

/* ---------- Add/Edit Room ---------- */
.add-edit-room-button-div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    margin-bottom: 1rem;
}

.add-edit-room-submit {
    margin: 20px auto;
    padding: 5px;
}

.add-edit-room-row {
    background-color: #3A6B35;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#FDD67C;
    max-width: min(95%, 1200px);
    margin: 0 auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.add-edit-left-column {
    position: relative;
}

.add-edit-left-column::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    height: 80%;
    border-right: 2px solid #b88c26;
}

.add-edit-room-form p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}
  
.add-edit-room-form p label {
    flex: 1;
    text-align: left;
    margin-right: 1em;
}
  
.add-edit-room-form p input,
.add-edit-room-form p select,
.add-edit-room-form p textarea {
    width: 100%;
    flex: 2;
    padding: 0.5em;
    background-color: #FDD67C;
    color: #3A6B35;
    border: 1px solid #b88c26;
}

.add-edit-room-hr {
    background-color: #b88c26;
    opacity: 1;
    border: none;
    height: 3px;
    display: none;
}

#how-to-title {
    text-align: center;
}


/* ---------- Delete Room ---------- */
#delete-room-div {
    width: 95%;
    max-width: 600px;
    margin: 10px auto;
    text-align: center;
}

.delete-message {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
    font-size: 1.5rem;
}

.delete-room-button-div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    margin-bottom: 1rem;
    max-width: 300px;
    margin: 0 auto;   
}

/* ---------- Checkout ---------- */
/* Page layout */
.checkout-container {
    border: 3px solid #b88c26;
    border-radius: 0.75rem;
    background-color: #FDD67C;
    margin: 1rem auto;
    max-width: 1400px;
}

.checkout-page-block {
    padding: 0;
}

.checkout-section-title {
    font-family: Jost, Arial, Helvetica, sans-serif;
    color:#FDD67C;
    text-align: center;
    background-color: #3A6B35;
    border: 3px solid #3A6B35;
    border-radius: 8px 0 0 0;
    padding-top: 0.5rem;
    border-right: 3px solid #b88c26;
}

.checkout-section-content {
    padding: 1rem;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #333A3F;
}

/* Payment form */
#payment-form label {
    color: #333A3F;
    text-align: left;
    width: 30%;
    font-weight: bolder;
}

#payment-form input,
#payment-form select {
    color: #FDD67C;
    background-color: #3A6B35;
    font-weight: bolder;
    width: 65%;
}

#save-info-div input {
    left: 1rem;
    width: fit-content;
}

#card-element {
    border: 1px solid #b88c26;
}

/* Order summary */
.order-summary-section-title {
    border-radius: 0 8px 0 0 !important;
    border-right: none;
}

.order-summary-image-div {
    text-align: center;
    padding: 1rem;
}

.order-summary-image-div img {
    width: 95%;
}

.order-summary-info {
    padding: 5px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
}

.order-summary-p {
    font-weight: bolder;
}

.order-summary-data {
    font-weight: lighter;
}

/* ---------- Stripe CSS ---------- */
/* Card element */
#card-element {
    background-color: #f5f5f5;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    border: 3px solid #333A3F;
    padding: 0;
    max-width: 90%;
    margin: 10px auto;
    height: fit-content;
}

#card-errors {
    border-radius: 8px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background-color: #CF1020;
    color:#F5F5F5;
}

#card-errors span {
    margin: 5px;
}

/* Loading overlay */
#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23, 162, 184, 0.85);
    z-index: 9999;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
}

.stripe-comment {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    color:#333A3F;
}

.stripe-comment a {
    font-weight: bolder;
}

/* ---------- Checkout success ---------- */
#checkout-success-div {
    width: 1200px;
    max-width: 95%;
    margin: 2rem auto;
    border: 3px solid #b88c26;
    border-radius: 8px;
    padding: 20px;
    background-color: #FDD67C;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
    overflow-wrap: break-word;
}

.home-button-container {
    width: fit-content;
    height: fit-content;
    overflow: visible;
    margin: 1rem auto;
}

/* ---------- User Profile ---------- */
/* user_profile.html */
#user-profile-table {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
    max-width: 90%;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    border: 2px solid #b88c26;
    border-radius: 8px;
}

.user-profile-table-top-row th{
    border-radius: 8px 0 0 0;
}

.user-profile-table-top-row td {
    border-radius: 0 8px 0 0;
}

.user-profile-table-bottom-row th{
    border-radius: 0 0 0 8px;
}

.user-profile-table-bottom-row td {
    border-radius: 0 0 8px 0;
}

.user-profile-button-div {
    max-width: min(600px, 95%);
    margin: 0.5rem auto;
}

.user-profile-button-div a {
    width: fit-content;
}

.delete-profile-button a {
    width: fit-content;
}

.delete-profile-button {
    position: absolute;
    right: 15px;
    display: flex;
    gap: 5px;
    top: 178px;
    width: fit-content;
    height: fit-content;
}

.account-page-spacer {
    height: 0.5rem;
}

/* edit profile */
.edit-profile-div {
    max-width: 600px;
    width: 90%;
    margin: 1rem auto;
    border: 1px solid #b88c26;
    border-radius: 8px;
    padding: 0.5rem;
    background-color: #3A6B35;
}

#edit-profile-form {
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

#edit-profile-form label {
    width: 30%;
    color: #FDD67C;
}

#edit-profile-form input,
#edit-profile-form select {
    width: 65%;
    background-color: #FDD67C;
    color: #3A6B35;
}

#edit-profile-form #id_newsletter {
    width: fit-content;
    margin-left: 0.5rem;
}

/* Delete user */
.confirm-delete-profile-buttons {
    width: 500px;
    max-width: 80%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    margin-top: 2rem;
}

/* ---------- Trips ---------- */
#no-trips-message {
    text-align: center;
}

.trips-page-container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.upcoming-trips-row,
.past-trips-row {
    margin:1rem 0;
}

.trips-section-title {
    background-color: #3A6B35;
    font-family: Jost, Arial, Helvetica, sans-serif;
    color:#FDD67C;
    font-size: 2rem;
    text-align: center;
    border-radius: 8px;
}

.trips-container {
    background-color: #3A6B35;
    padding: 0;
    border-radius: 8px;
}

.trip-card {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background-color: #FDD67C;
    margin: 1rem;
    border-radius: 8px;
}

.trips-header {
    padding: 0.5rem;
    border-bottom: 2px solid #3A6B35;
    align-items: center;
}

.trips-header-left p,
.trips-header-right p {
    margin: 0;
}

.trips-header-left {
    margin: 0;
    padding-left: 0.5rem;
}

.trips-header-right {
    text-align: right;
    padding-right: 0.5rem;
}

.trips-label {
    font-weight: bolder;
}

.trip-room-name {
    font-family: Caveat, "Brush Script MT", cursive;
    font-size: 2rem;
    text-align: center;
}

.trip-description,
.trip-amenities,
.trip-guests-div {
    padding: 0.5rem;
}

.trip-amenities ul, 
.trip-guests-div ul {
    list-style-type: none;
}

.trip-cancel-div,
.trip-add-review-div {
    background-color: #b88c26;
    width: 50%;
    text-align: center;
    margin: 0.5rem auto;
    padding: 0.5rem;
    border-radius: 1rem;
}

.trip-cancel-button {
    width: fit-content;
}

.cancelled-trip {
    color: #f5f5f5;
    background-color: #CF1020;
    border-radius: 8px;
    border: 1px solid #333A3F;
    margin: 0.5rem auto;
    width: 80%;
    text-align: center;
}

.home-button {
    margin-bottom: 1rem;
}

.past-trips-section-title {
    background-color: #3A6B35;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
    height: auto;
    padding: 1.5rem 0;
}

.past-trips-section-title h2 {
    font-family: Jost, Arial, Helvetica, sans-serif;
    color:#FDD67C;
    font-size: 2rem;
    text-align: center;
    width: 100%;
}

.past-trips-sort {
    width: fit-content;
    height: fit-content;
    position: absolute;
    right: 10px;
}

.past-trips-sort label{
    margin-bottom: 0.5rem;
}

.leave-review-button {
    width: fit-content;
    margin-bottom: 0.5rem;
}

#past-trips-pagination {
    margin-top: 1rem;
}

/* ---------- Cancel Trip ---------- */
.cancel-trip-card {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background-color: #FDD67C;
    margin: 1rem;
    border-radius: 8px;
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #3A6B35;
    margin-bottom: 1rem;
}

.cancel-trip-card .trips-header{
    width: 100%;
    margin: 0 auto;
}

.trip-cancellation-form {
    padding: 0.5rem;
}

.trip-cancellation-form textarea {
    margin: 1rem 0;
}

.trip-cancellation-form textarea:focus {
    box-shadow: 0 0 0 .25rem rgba(58,107,53,.25);
    border-color: #3A6B35;    
}

.trip-cancel-boilerplate {
    font-size: smaller;
    color:#333A3F;
}

/* ---------- Trip cancellation success ---------- */
.cancellation-request-message {
    width: 1200px;
    max-width: 95%;
    margin: 2rem auto;
    border: 3px solid #b88c26;
    border-radius: 8px;
    padding: 20px;
    background-color: #FDD67C;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
}

/* ---------- Review ---------- */
.review {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    border-radius: 8px;
    background-color: #3A6B35;
    color: #FDD67C;
    margin: 0.5rem auto;
    padding: 0.5rem;
    width: 80%;
    height: auto;
}

.review-header {
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
}

.review-verified {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    text-align: center;
    background-color: #FDD67C;
    color: #3A6B35;
    border-radius: 50%;
}

.edit-review-button {
    height: fit-content;
    width: 30%;
    min-width: fit-content;
}

/* ---------- Add/edit review ---------- */
.add-edit-review-content {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #FDD67C;
    text-align: center;
    width: 1000px;
    max-width: 95%;
    margin: 1rem auto;
    background-color: #3A6B35;
    border-radius: 8px;
    padding: 1rem;
}

.add-edit-review-form label {
    font-weight: bolder;
}

#id_content {
    display: block;
    width: 90%;
    margin: 0.5rem auto;
    border-radius: 8px;
    padding: 0.5rem;
}

#id_rating {
    width: fit-content;
    margin: 0 auto;
}

.review-rating {
    display: flex;
    gap: 0.5rem;
}

.delete-review-button {
    position: absolute;
    right: 15px;
    display: flex;
    gap: 5px;
    top: 178px;
    width: fit-content;
    height: fit-content;
}

#deleteReviewModal {
    border: 3px solid #333A3F;
    border-radius: 8px;
}

#deleteReviewModal .modal-content {
    background-color: #3A6B35;
}

#deleteReviewModal .modal-header {
    font-family: Jost, Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #3A6B35;
    color: #FDD67C;
    border: 1px solid #3A6B35;
}

#deleteReviewModal .modal-header button {
    background-color: #FDD67C;
}

#deleteReviewModal .modal-body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background-color: #FDD67C;
    color: #3A6B35;
    text-align: center;
    margin: 0 1rem;
    border-radius: 8px;
}

#deleteReviewModal .modal-footer {
    background-color: #3A6B35;
    border: 1px solid #3A6B35;
    display: flex;
    justify-content: space-around;
    width: 100%;
}

#deleteReviewModal .nunisi-button {
    margin: 0;
}

/* Reviews carousel */
#reviewCarousel {
    height: auto;
    margin-bottom: 1rem;
}

.review-carousel-text {
    text-align: center;
    padding: 20px;
    background-color: #3A6B35;
    border: 1px solid #b88c26;
    border-radius: 8px;
    margin: 10px auto;
    max-width: 600px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.review-carousel-text h3 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #FDD67C !important;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}
.review-carousel-text h4 {
    margin: 0;
    font-family: Caveat, "Brush Script MT", cursive;
    color: #FDD67C !important;
    font-size: 1.75rem;
    overflow: auto;
    height: 150px;
    max-height: 150px;
}

/* ---------- Superuser Trips ---------- */
.master-trips-table {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    width: 95%;
    margin: 0.5rem auto;
    max-width: 1500px;
    border: 1px solid #333A3F;
}

.master-trips-table .table-title {
    text-align: center;
}

.master-trips-table tbody {
    text-align: center;
}

/* ---------- Page errors ---------- */
.page-error-message {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color:#333A3F;
    margin: 0 auto;
    max-width: min(500px, 90%);
    text-align: center;
}

/* ---------- Media-queries ---------- */
@media (min-width: 992px) {
    /* Scroll offset for index header: desktop */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 60px;
    }
}

@media (max-width: 992px) {
    /* Change account menu position */
    #account-nav-menu {
        position: absolute;
        right: 5px;
        top: 70px;
    }

    /* Scroll offsex for index header: mobile */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 270px;
    }

    /*Index page nav bar links*/
    .navbar-links {
        font-family: Jost, Arial, Helvetica, sans-serif;
        font-size: 1rem;
    }

    
    .index-nav-item a::after {
        content: ''; 
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: #3A6B35;
        transition: width 0.3s ease;
        height: 2px;
    }

    .index-nav-item a:hover::after {
        width: 100%; 
    }
    
    /*Change footer height */
    .footer {
        height: 130px;
    }

    /* Update content height */
    .content {
        min-height: calc(100vh - 298px);
    }

    /*Index: add space above about us title */
    #index-info-title {
        margin-top: 10px;
    }

    /*Index: gap between location info and map */
    .location-info {
        margin-bottom: 10px;
    }

    /*Update border for available room cards */
    .room-image-booking-column {
        padding-left: 12px;
        border-left: none;
    }

    .room-trip-info-div {
        border-radius: 0 0 8px 8px;
    }

    .available-room-image {
        margin-bottom: 1rem;
    }
}

@media (max-width: 800px) {
    /*Move sort box below title on available rooms*/
    /*2.15rem is the size of the h1 text*/
    /*Same for delete review button */
    /*Same for delete profile button */
    .room-sort-container,
    .delete-review-button,
    .delete-profile-button {
        top: calc(190px + 2.15rem);
    }

    /*Move the amenity filter down*/
    #amenity-accordion {
        margin-top: calc(22px + 2.15rem);
    }

    /*Move edit review content down*/
    .edit-review-content {
        margin-top: calc(22px + 2.15rem);
    }
    
    /*Move the profile table down*/
    #user-profile-table {
        margin-top: calc(22px + 2.15rem);
    }   
}

@media (max-width: 760px) {
    /*Update hero text*/
    #hero-title {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    /*Checkout page border between payment and order summary*/
    #checkout-page-payment-block {
        border-right: none;
    }
    #checkout-page-order-summary-block {
        border-left: none;
    }
}

@media (max-width: 767px) {
    /*Index page service card */
    .services-card-image-container {
        width: 95%;
        margin: 0 auto;
    }
    
    /*Add edit room middle border*/
    .add-edit-left-column::after {
        border-right: none;
        border-bottom: 1px solid #b88c26;
    }

    /* Add edit room show horizontal rule */
    .add-edit-room-hr {
        display: inline-block;
    }

    /*Change section title borders on checkout page */
    .checkout-section-title {
        border-radius: 8px 8px 0 0;
        border-right: none;
    }

    .order-summary-section-title {
        border-radius: 0 0 0 0 !important;
    }

    /*Add screen size warning to all trips page*/
    .screen-size-warning {
        display: block !important;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        color: #333A3F;
        font-weight: bolder;
    }
}

@media (max-width: 410px) {
    /*Update hero text*/
    #hero-title {
        font-size: 2.5rem;
    }

    #hero-message {
        font-size: 1.5rem;
    }

    /* Update developer info div size */
    .developer-info-div p {
        font-size: 0.8rem;
    }

    /* Reduce text size in the user profile table */
    #user-profile-table {
        font-size: smaller;
    }

    /*Move past trips sort filter to next line*/
    .past-trips-sort {
        display: inline-block;
        right: 10px;
    }

    .past-trips-section-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .past-trips-section-title h2 {
        position: static;
        transform: none;
        margin-bottom: 10px; /* Add spacing between title and dropdown */
    }

    .past-trips-sort {
        position: static;
        transform: none;
        width: fit-content;
        left: 0px;
    }

    .past-trips-sort label {
        right: 0;
        height: fit-content;
    }
}