/* ==========================================================================
   contact.css - Baniyan Tours and Travels
   Contact-page-only styles. Loaded after style.css in contact.html.
   Site-wide rules stay in style.css.
   ========================================================================== */

/* ==== Page intro above the form ==== */
.rts-contact-area.inner .contact-intro {
  max-width: 720px;
  margin: 0 auto 50px;
}

.rts-contact-area.inner .contact-intro .desc {
  margin-top: 16px;
}

/* ==== Column split: wider form, narrower map ====
   Base template is 40% form / 60% map. The form now carries six
   fields in two columns, so it takes the larger share. */
@media only screen and (min-width: 992px) {
  .rts-contact-area.inner .get-in-touch-area {
    width: 62%;
  }

  .rts-contact-area.inner .map-area {
    width: 38%;
  }

  /* Equal heights. Percentages were the trap here: style.css sets
     height:100% on .map-area and a fixed 607px on the map box, but a
     percentage height resolves against the PARENT's height, and
     .section-inner is auto-height - so 100% collapsed to auto and the
     map ended up either 607px or barely visible.

     Instead: let the flex row stretch .map-area (that gives it a real
     height), make it a positioning context, and pin the map inside
     with inset:0. Absolute positioning gives a definite height, so
     the iframe's height:100% finally has something to resolve
     against. The map now tracks the form's height exactly. */
  .rts-contact-area.inner .section-inner {
    align-items: stretch;
  }

  .rts-contact-area.inner .section-inner .map-area {
    position: relative;
    height: auto;
  }

  .rts-contact-area.inner .section-inner .map-area .contact-map-area-fluid {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .rts-contact-area.inner .section-inner .map-area .contact-map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* ==== Form: two-column field grid ====
   Name / Email and Phone / Subject pair up 2x2; Message, the
   checkbox and the button span the full width. */
.rts-contact-form .contact-form-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.rts-contact-form .contact-form-area .single-input.full-width,
.rts-contact-form .contact-form-area .single-checkbox,
.rts-contact-form .contact-form-area .rts-btn-send,
.rts-contact-form .contact-form-area #form-messages {
  grid-column: 1 / -1;
}

/* The button spans both columns but should size to its own text and
   sit centred, not stretch edge to edge. justify-self overrides the
   grid item default of `stretch`; the base style has no horizontal
   padding (it relied on full width), so add some. */
.rts-contact-form .contact-form-area .rts-btn-send {
  justify-self: center;
  width: auto;
  min-width: 200px;
  padding: 16px 42px;
  background: var(--color-green);
}

/* The base button hides an oversized circle below itself and sweeps
   it up on hover - that circle is what recolours the button. Giving
   it the same green means the sweep still runs but the colour never
   visibly changes, so the button stays green throughout. */
.rts-contact-form .contact-form-area .rts-btn-send::before {
  background: var(--color-green);
}

@media only screen and (max-width: 575px) {
  .rts-contact-form .contact-form-area {
    grid-template-columns: 1fr;
  }
}

/* ==== Submit result message ====
   Sits as the first item inside the form and spans both columns.
   Hidden until the JS fills it in, so it takes up no room otherwise. */
#form-messages {
  display: none;
  padding: 14px 18px;
  margin-bottom: 22px;
  border-radius: 6px;
  border-left: 4px solid transparent;
  font-size: 15px;
  line-height: 1.55;
}

#form-messages.success {
  background: #eaf5e6;
  border-left-color: #2e7d32;
  color: #1f5c23;
}

#form-messages.error {
  background: #fdecea;
  border-left-color: #c62828;
  color: #8e1f1a;
}

/* ==== Form fields ==== */
.rts-contact-form .contact-form-area .single-input label {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--f-medium);
  color: var(--color-heading);
  font-size: 15px;
}

.rts-contact-form .contact-form-area .single-input label .req {
  color: var(--color-primary);
}

.rts-contact-form .contact-form-area .single-input .input-wrap {
  position: relative;
  display: block;
}

/* One identical box for input, textarea and select. The icons are
   gone, so the left padding matches the right - text now starts at
   the same inset on both sides instead of being pushed in by 45px
   to clear an icon. background-color (not the background shorthand)
   so the select's chevron image below is not wiped out. */
.rts-contact-form .contact-form-area .single-input input,
.rts-contact-form .contact-form-area .single-input textarea,
.rts-contact-form .contact-form-area .single-input select {
  width: 100%;
  border: 1px solid rgba(85, 85, 85, 0.15);
  border-radius: 6px;
  padding: 12px 20px;
  background-color: var(--color-white);
  color: var(--color-body);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
}

/* ==== Subject dropdown ====
   main.js runs $('select').niceSelect() on EVERY select on the site,
   which hides the real <select> and inserts a .nice-select div next
   to it. So styling `select` has no visible effect - the widget is
   what renders, and it ships as a grey pill (40px radius, no border,
   18px padding). These rules rebuild it to match the text inputs.
   The `select` rules above stay as a no-JS fallback. */
.rts-contact-form .contact-form-area .single-input .nice-select {
  float: none;
  width: 100%;
  height: auto;
  line-height: 1.6;
  padding: 12px 44px 12px 20px;
  background-color: var(--color-white);
  border: 1px solid rgba(85, 85, 85, 0.15);
  border-radius: 6px;
  color: var(--color-body);
  font-size: inherit;
}

/* The widget draws its own chevron with rotated borders. */
.rts-contact-form .contact-form-area .single-input .nice-select::after {
  right: 20px;
  border-bottom-color: #555555;
  border-right-color: #555555;
}

.rts-contact-form .contact-form-area .single-input .nice-select .current {
  display: block;
  line-height: 1.6;
}

/* The open list is absolutely positioned inside .single-input, which
   style.css gives z-index: 1. The Message field carries the same
   z-index and sits later in the DOM, so it painted OVER the open
   dropdown. Lifting the subject field above its siblings fixes it. */
.rts-contact-form .contact-form-area .single-input.has-select {
  z-index: 5;
}

.rts-contact-form .contact-form-area .single-input .nice-select .list {
  z-index: 10;
  width: 100%;
}

.rts-contact-form .contact-form-area .single-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 25px;
}

.rts-contact-form .contact-form-area .single-checkbox input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.rts-contact-form .contact-form-area .single-checkbox label {
  margin: 0;
  font-size: 15px;
  cursor: pointer;
}

button.rts__btn {
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  margin-top: 15px;
}

/* ==== Get in Touch: three cards, evenly centred ====

   Each card takes a third of the row so the group fills the bordered
   panel and reads as centred. justify-content is a safety net in case
   the widths ever fall short of 100%. */
.rts-contact-area2 .inner.three-col {
  justify-content: center;
}

.rts-contact-area2 .inner.three-col .contact-wrapper {
  width: 33.3333%;
  padding: 45px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* Base style puts the divider on child 2 only; with three cards the
   dividers belong between 1-2 and 2-3. */
.rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(2) {
  border-width: 0;
}

.rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(2),
.rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(3) {
  border-left: 1px solid rgba(85, 85, 85, 0.11);
}

/* The base rule sets `margin: auto`, which is harmless in a block
   layout but not in a flex column: margin-top: auto absorbs all the
   free space and pushes the icon DOWN. The three cards stretch to
   equal height but hold different amounts of text, so each had a
   different amount of free space and the icons ended up starting at
   three different heights. Pinning margin-top to 0 lines them up. */
.rts-contact-area2 .inner.three-col .contact-wrapper .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 0 20px 0;
  flex-shrink: 0;
}

.rts-contact-area2 .inner.three-col .contact-wrapper .icon i {
  color: var(--color-primary);
  font-size: 32px;
}

.rts-contact-area2 .inner.three-col .contact-wrapper .contact-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.rts-contact-area2 .inner.three-col .contact-wrapper .title {
  font-size: 24px;
  margin-bottom: 8px;
  white-space: nowrap;
  text-align: left;
}


.rts-contact-area2 .inner.three-col .contact-wrapper ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 16px;
  row-gap: 6px;
  text-align: left;
}

.rts-contact-area2 .inner.three-col .contact-wrapper ul li {
  line-height: 1.6;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
}

.rts-contact-area2 .inner.three-col .contact-wrapper ul li:not(:last-child)::after {
  content: "|";
  margin-left: 16px;
  color: rgba(85, 85, 85, 0.35);
  font-weight: 300;
}


.rts-contact-area2 .inner.three-col .contact-wrapper ul li.note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-primary);
}

/* ==== Quick Actions panel ====
   A tinted panel holding three icon cards, rather than three plain
   buttons. Each card is a single link, so the whole tile is
   clickable, not just the label. */
.quick-actions {
  margin-top: 60px;
  padding: 50px;
  background: var(--color-gray);
  border-radius: 16px;
  text-align: center;
}

.quick-actions .quick-actions-title {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.quick-actions .quick-actions-desc {
  margin-bottom: 35px;
}

.quick-actions .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: var(--color-white);
  border: 1px solid rgba(85, 85, 85, 0.11);
  border-radius: 12px;
  text-align: left;
  transition: var(--transition);
}

.quick-action-card:hover {
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(132, 132, 132, 0.18);
  transform: translateY(-4px);
}

.quick-action-card .icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: 50%;
  transition: var(--transition);
}

.quick-action-card .icon i {
  color: var(--color-white);
  font-size: 22px;
  line-height: 1;
}

.quick-action-card .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.quick-action-card .content .title {
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-weight: var(--f-semi-bold);
  font-size: 18px;
  line-height: 1.2;
  transition: var(--transition);
}

.quick-action-card .content .note {
  color: var(--color-body);
  font-size: 14px;
  line-height: 1.4;
}

.quick-action-card .arrow {
  flex-shrink: 0;
  color: var(--color-body);
  transition: var(--transition);
}

.quick-action-card:hover .content .title,
.quick-action-card:hover .arrow {
  color: var(--color-primary);
}

.quick-action-card:hover .arrow {
  transform: translateX(4px);
}

/* ==== Office location cards ====
   Two roomier cards per row instead of four narrow ones. Each detail
   is a label/value row so Address, Phone, Email and Hours line up
   down the card and read as a table rather than a run of text. */
.office-card {
  height: 100%;
  padding: 36px 34px;
  background: var(--color-white);
  border: 1px solid rgba(85, 85, 85, 0.13);
  border-radius: 16px;
  transition: var(--transition);
}

.office-card:hover {
  border-color: transparent;
  box-shadow: 0 24px 44px rgba(132, 132, 132, 0.18);
  transform: translateY(-4px);
}

.office-card .office-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(85, 85, 85, 0.13);
}

.office-card .office-head .icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: 50%;
}

.office-card .office-head .icon i {
  color: var(--color-white);
  font-size: 19px;
  line-height: 1;
}

.office-card .office-head .title {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  flex-grow: 1;
}

.office-card .office-head .tag {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 30px;
  background: var(--color-gray);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: var(--f-medium);
  line-height: 1.4;
}

.office-card .office-details li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(85, 85, 85, 0.13);
}

.office-card .office-details li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.office-card .office-details li .label {
  width: 108px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-heading);
  font-weight: var(--f-medium);
  font-size: 15px;
  line-height: 1.6;
}

.office-card .office-details li .label i {
  color: var(--color-primary);
  font-size: 15px;
  width: 16px;
  text-align: center;
}

.office-card .office-details li .value {
  flex-grow: 1;
  line-height: 1.6;
  word-break: break-word;
}

.office-card .office-details li .value a {
  color: var(--color-body);
}

.office-card .office-details li .value a:hover {
  color: var(--color-primary);
}

@media only screen and (max-width: 479px) {
  .office-card {
    padding: 28px 22px;
  }

  /* Stack label above value once the row is too narrow to split. */
  .office-card .office-details li {
    flex-direction: column;
    gap: 4px;
  }

  .office-card .office-details li .label {
    width: auto;
  }
}

/* ==== Responsive ==== */
@media only screen and (max-width: 991px) {
  .rts-contact-area2 .inner.three-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
    padding: 0;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid rgba(85, 85, 85, 0.11) !important;
    border-radius: 16px !important;
    padding: 30px 32px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 24px;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(2),
  .rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(3) {
    border-left: 1px solid rgba(85, 85, 85, 0.11) !important;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper .icon {
    margin: 0 !important;
    flex-shrink: 0;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper .title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper ul {
    margin-bottom: 0;
    justify-content: flex-start;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper ul li a {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .quick-actions .quick-actions-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 575px) {
  .rts-contact-area2 .inner.three-col .contact-wrapper {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    padding: 24px 20px !important;
    gap: 16px;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper ul {
    justify-content: flex-start;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper .icon {
    margin: 0 0 12px 0 !important;
  }

  .quick-actions {
    padding: 35px 20px;
  }
}





/* ==========================================================================
   Reach Us: green cards, brown on hover
   The three cards sit side by side inside one bordered panel, so each one
   fills individually and the panel's own hairline border goes - against a
   solid fill it reads as a stray line around the group. Brand tokens come
   from style.css.
   ========================================================================== */
.rts-contact-area2 .inner {
  border-color: transparent;
  overflow: hidden;
}

.rts-contact-area2 .inner.three-col .contact-wrapper {
  background: var(--color-green);
  transition: background 0.3s ease;
}

.rts-contact-area2 .inner.three-col .contact-wrapper:hover {
  background: var(--color-brown);
}

/* Everything inside was dark text on white: heading, the phone/email links
   and the small note line. The icon is handled separately below - it keeps
   a white tile of its own, so its glyph stays green. */
.rts-contact-area2 .inner.three-col .contact-wrapper .title,
.rts-contact-area2 .inner.three-col .contact-wrapper ul li,
.rts-contact-area2 .inner.three-col .contact-wrapper ul li a,
.rts-contact-area2 .inner.three-col .contact-wrapper ul li.note {
  color: var(--color-white);
}

.rts-contact-area2 .inner.three-col .contact-wrapper ul li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.45);
}

/* The dividers between the three cards were a dark hairline meant for a
   white panel; on the fills they only need to be a shade lighter than the
   card either side of them. */
.rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(2),
.rts-contact-area2 .inner.three-col .contact-wrapper:nth-child(3) {
  border-left-color: rgba(255, 255, 255, 0.22);
}


/* ==== Reach Us icon tiles ====
   White circle with a green glyph, sitting on the card's fill. The template
   had a grey 6px-radius square 80px across, which read as a slab next to
   the heading beside it; 58px sits closer to the text it introduces.

   The glyph stays green through the card's brown hover - it is reading
   against the white circle, not against the card. Move the two sizes
   together: the glyph is a little under half the circle, which is what
   stops the circle looking empty. */
:root {
  --contact-icon-size: 58px;
  --contact-icon-glyph: 24px;
}

.rts-contact-area2 .inner.three-col .contact-wrapper .icon {
  width: var(--contact-icon-size);
  height: var(--contact-icon-size);
  border-radius: 50%;
  background: var(--color-white);
}

/* The base file sizes this glyph at 32px, so it needs replacing rather
   than just recolouring. */
.rts-contact-area2 .inner.three-col .contact-wrapper .icon i {
  color: var(--color-green);
  font-size: var(--contact-icon-glyph);
}


/* ==== Form heading on phones ====
   The panel's h2 runs at --h5, which is desktop scale - on a 425px screen
   it filled most of the card's width and read as a page title rather than
   the label of the form under it. It steps down here, and the space below
   it comes in with it so the first field is not pushed so far down. */
@media only screen and (max-width: 767px) {
  .rts-contact-form .title {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 22px;
  }
}

@media only screen and (max-width: 480px) {
  .rts-contact-form .title {
    font-size: 22px;
    margin-bottom: 18px;
  }
}