/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --main-font-family: "Open Sans", sans-serif;
  --secondary-font-family: "Roboto", sans-serif;
  --icon-font-family: "Font Awesome 6 Pro";

  --white: #fff;
  --black: #000000;
  --green: #809e3e;
  --green-border: #738e38;
  --yellow: #f8951d;
  --yellow-border: #df861a;
  --light-yellow: #c5b80b;
  --pale-yellow: #f7ee72;
  --red: #DB5338;
  --red-border: #a13732;
  --danger-red: #DB5338;
  --blue: #0c2c58;
  --link-dark-blue: #385276;
  --banner-blue: #4e6686;
  --light-blue: #a9bcd0;
  --gray: rgba(0, 0, 0, 0.15);
  --light-gray: #ddd;
  --medium-gray: rgba(0, 0, 0, 0.35);
  --darker-gray: rgba(0, 0, 0, 0.45);
  --charcoal: #707070;
  --neon-blue: #1f51ff;
  --hint-gray: #eeeeee;
  /* Admin colors */
  --eerie_black: #1b1b1e;
  --charcoal: #373f51;
  --cadet_blue: #58a4b0;
  --pastel_blue: #a9bcd0;
  --gainsboro: #d8dbe2;
  --aea_navy: #0c2c58;
  --aea_gray: #ebebeb;

  --btn-radius: 4px;
  --common-radius: 4px;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.button_to {
  min-width: fit-content;
  padding: 0;
  display: inline-block;
  height: 100%;
  color: white;
  overflow: hidden;
  [type="submit"] {
    margin: 0;
    display: block;
    height: 100%;
    color: white;
    padding: .65rem 1rem;
    font-size: 0.8rem;
  }
}

input:not(
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="checkbox"],
    [type="radio"]
  ),
textarea,
select {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.2rem;
  border: 0.1rem solid #ccc;
  margin: 0.25rem 0;
}

.common-radius{
  border-radius: var(--common-radius, 0);
  overflow: hidden;
}

.form-group.radio-group{
  label{
    font-weight: normal;
    font-size: 0.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  input{
    margin: 0;
    padding: 0;
  }
}

.emails-holder{
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.5rem;

  .nested-form, .email-header {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/4;
    place-items: center left;
  }
}

.main-layout.contact-profile{
  grid-template-areas: 'header header'
                        'main main';
}

::backdrop {
  background: black;
  opacity: 0.55;
}

.email_message{
  h1, h2, h3, h4{
    margin-block: 1rem;
  }

  ul {
    list-style-type: initial;
    padding-left: 20px;
    margin-block: 0.5rem;
  }

  p {
    margin-block: 0.5rem;
  }
}

.content-end{
  display: grid;
  justify-content: end;
  align-items: start;
}

.extra-holder{
  padding: 0.5rem;
  border: 2px solid var(--gray);
  border-radius: var(--common-radius);
  margin-bottom: 0.5rem;
}

.has_custom_search_list{
  position: relative;
}

#hotel-search-list{
  position: absolute;
  top: 5rem;
  left: 0;
  z-index: 10000;
  .hotel-search-list-item{
    font-size: 0.75rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #ededed;
    cursor: pointer;
    
    &:first-child{
      border-top-left-radius: var(--common-radius);
      border-top-right-radius: var(--common-radius);
    }
    &:last-child{
      border-bottom-left-radius: var(--common-radius);
      border-bottom-right-radius: var(--common-radius);
    }

    &:hover{
      background: #ededed;
    }
  }
}