:root {
    --portugal-red: #FF0000;   /* red */
    --portugal-green: #006600; /* green */
    --placeholder-text: gray-50; /* green */
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
  }
  body,html {
    font-family: Montserrat,Helvetica,Helvetica Neue,Arial,Nimbus Sans L,Liberation Sans,sans-serif
  }
  /* Body background image with 20% opacity */
  body {
    position: relative;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/themes/contrib/tailwindcss/images/NazareBeach.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
  }

  /* Add logo icon to site name */
  .site-logo img {
    height: 2.5rem !important;  /* matches Tailwind text-3xl line height */
    width: auto;     /* keeps image proportional */
    display: block;  /* removes baseline spacing */
  }

  .site-slogan {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: var(--gray-500);
  }
  
  /* Button Styles */

.button{
    background-color: #ccc;
    padding:12px;
    border-radius: 4px;
}

.button:hover{
    background-color: #ddd;
    padding:12px
    border-radius: 4px;
}

.button--primary{
    background-color: var(--portugal-green);
    color: white;
}

.button--primary:hover{
    background-color: var(--portugal-red);
    cursor: pointer;
}

a.CTA-button {
    background-color: var(--portugal-green) !important;
    color: white !important;
    font-size: 2rem !important;
    padding: 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
}
a.CTA-button:hover {
    background-color: var(--portugal-red) !important;
    color: white !important;
}

/* input styles */
input::placeholder {
    color: var(--gray-300);
  }

/* Space each field wrapper inside the table cell */
#edit-guest-information-items td > .js-form-item,
#edit-guest-information-items td > .form-item,
#edit-guest-information-items td > .form-wrapper { margin-bottom: 1rem; }

/* Optional: breathing room above the actions row */
#edit-guest-information .webform-actions { margin-top: 1.5rem; }

/* style inputs */
#edit-guest-information-items input{
    border: 1px solid #ccc;
    padding:8px;
}
/* form styles */
input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* WEBFORM styles */
/* add more guests styles */
/* add button styling */
.webform-multiple-add .button{
    background-color: #fff;
    color: var(--portugal-green);
    padding: 10px;
    margin: 0;
}
.webform-multiple-add .button:hover{
    background-color: none;
    color: var(--portugal-red);
    text-decoration: underline;
    cursor: pointer;
}
/* add Select styles */
.webform-multiple-add #edit-guest-information-add-more-items{
 /* padding:10px;*/
 border: 1px solid var(--gray-200);
 border-radius: 4px;
}

/* Move the add-more block above the table */
.guest-composite .webform-multiple-add {
/* order: -1;*/
    /*margin-bottom: 1rem; */
display: flex;
align-items: center;
gap: 0.75rem; /* spacing between Add and the table */
  }

/* Style webform composite fields */
/* label styles */
.js-webform-type-textfield label{
    font-weight: bold;
}

/* input styles */
[name*="guest_name"],
[name*="passport_number"],
[name*="airbnb_confirm_no"],
[name*="guest_address"],
[name*="guest_country"],
[name*="guest_nationality"] {
  width: 100% !important;
}
/* Make their parent containers flex column */
[class*="form-item"][class*="guest-name"],
[class*="form-item"][class*="passport-number"],
[class*="form-item"][class*="airbnb-confirm"],
[class*="form-item"][class*="guest-address"],
[class*="form-item"][class*="guest-country"],
[class*="form-item"][class*="guest-nationality"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* adding styles for the helper text on an input */
.webform-element-description{
    font-size:12px;
    color:#ccc;
}

/* Make the composite wrapper a flex column */
.guest-composite {
    display: flex;
    flex-direction: column;
  }
  

  /* Number input first */
.guest-composite .webform-multiple-add .js-form-item {
    order: 1;
  }
  /* Add button second */
.guest-composite .webform-multiple-add input[type="submit"] {
    order: 2;
  }


/* Any row belonging to that composite table */
tr[data-drupal-selector^="edit-guest-information-items-"] > td {
    border: 1px solid var(--gray-200); 
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08),0 1px 2px rgba(0, 0, 0, 0.04);     
  }

  table[data-drupal-selector="edit-guest-information-items"] {
    border-collapse: separate;      /* Required */
    border-spacing: 0 16px;         /* horizontal = 0, vertical = 16px */
  }

 /* add spacing below the add more button */ 
  .webform-multiple-add {    
    margin-bottom: 1rem;
  }

/* adding styles for inputs*/
.guest-composite .js-form-type-textfield input {
    /* your styles – padding, borders, font, etc. */
    border: 1px solid #ccc;
    padding:12px;
  }

/* make input on adding more items bigger */
input[data-drupal-selector="edit-guest-information-add-more-items"] {
    padding:12px;
}


/*space webform form items better */
.webform-multiple-table .form-item+.form-item {
    margin-top: 16px !important;
}

.webform-submission-form .form-actions {
    padding-bottom:16px;
}

.form-item-airbnb-confirmation-number{
  margin-bottom: 16px;
}

.homepage-col-content{
    width:75%;
}

/* messaging styles */
.data-drupal-messages{
    padding:16px;
    border-radius: 4px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
}

/* gallery thumbnail styles */
.gal-thumb img{
    padding-right:4px;
    padding-bottom:4px;
}

/* Main Menu Wrapper */
.main-menu-wrapper {
  position: relative;
}

/* Mobile Menu Button Styles */
.mobile-menu-button {
  color: var(--portugal-green);
  transition: background-color 0.2s ease, color 0.2s ease;
  border: 1px solid var(--portugal-green);
}

.mobile-menu-button:hover {
  background-color: var(--gray-200);
}

.mobile-menu-button.active,
.mobile-menu-button:active {
  background-color: var(--gray-200);
  color: var(--portugal-green);
}

/* Mobile Menu Panel Styles */
.mobile-menu-panel {
  position: absolute;
  top: 100%;
  min-width: 200px;
  margin-top: 0.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 50;
  overflow: hidden;
}

.mobile-menu-panel.hidden {
  display: none !important;
}

/* Mobile Menu List Styles */
.mobile-menu-panel ul {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mobile-menu-panel li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.mobile-menu-panel li a {
  display: block !important;
  padding: 0.875rem 1rem !important;
  color: var(--portugal-green) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  transition: background-color 0.2s ease !important;
  text-decoration: none !important;
}

.mobile-menu-panel li a:hover {
  background-color: var(--gray-100) !important;
  text-decoration: none !important;
}

.mobile-menu-panel li a.is-active {
  color: #000 !important;
  font-weight: bold !important;
}

.mobile-menu-panel li:last-child a {
  border-bottom: none !important;
}

/* Only style the login link (li has class is-guest-login) */
#block-tailwindcss-account-menu li.is-guest-login > a {
  background-color: var(--portugal-green);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

#block-tailwindcss-account-menu li.is-guest-login > a:hover {
  background-color: var(--portugal-red);
  color: #fff;
}

.path-user-login .form-actions{
  padding-top:16px;
}



.path-user-login #block-tailwindcss-account-menu{
  display:none;
}