/* =========================================================
   PURE ADVENTURE — UTILITIES CSS
   Reusable helper classes only.
   Load after main.css.
   ========================================================= */


/* =========================================================
   01. BACKGROUND UTILITIES
   ========================================================= */

.dark-blue-background {
  background-color: var(--pa-blue-dark);
  background-image:
    linear-gradient(
      rgba(31, 63, 141, 0.86),
      rgba(22, 46, 102, 0.9)
    ),
    url("https://pureadventure.wpenginepowered.com/wp-content/uploads/Green-Sea-Turtle-opt.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blue-medium-background {
  position: relative;
  background-color: var(--pa-blue-medium);
  background-image:
    linear-gradient(
      rgba(49, 91, 181, 0.8),
      rgba(49, 91, 181, 0.8)
    ),
    url("https://pureadventure.wpenginepowered.com/wp-content/uploads/Green-Sea-Turtle-opt.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.light-grey-background {
  background-color: var(--pa-light-grey);
  background-image:
    linear-gradient(
      rgba(239, 239, 239, 0.88),
      rgba(239, 239, 239, 0.88)
    ),
    url("https://pureadventure.wpenginepowered.com/wp-content/uploads/vieques-sea-turtle-snorkeling-tour-puerto-rico.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.orange-background {
  background-color: var(--pa-orange);
  background-image:
    linear-gradient(
      rgba(255, 122, 0, 0.85),
      rgba(229, 109, 0, 0.85)
    ),
    url("https://pureadventure.wpenginepowered.com/wp-content/uploads/vieques-sea-turtle-snorkeling-tour-puerto-rico.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.reef-teal-background {
  background-color: var(--pa-reef-teal);
}


/* =========================================================
   02. TEXT AND TITLE UTILITIES
   ========================================================= */

.dark-text .uabb-infobox-text,
.dark-text .uabb-infobox-text p,
.dark-text .content-text {
  color: var(--pa-table-dark);
}

.white-text .uabb-infobox-text,
.white-text .uabb-infobox-text p,
.white-text .content-text {
  color: var(--pa-white) !important;
}

.white-title h1,
.white-title h2,
.white-title h3,
.white-title h4,
.white-title h5,
.white-title h6,
.white-title .uabb-infobox-title,
.white-title .uabb-infobox-title-prefix {
  color: var(--pa-white) !important;
}

.reef-teal-heading .uabb-infobox-title-prefix,
.reef-teal-heading .uabb-infobox-title {
  color: var(--pa-reef-teal);
}


/* =========================================================
   03. SPACING UTILITIES
   ========================================================= */

.top-spacer-80 {
  margin-top: 80px;
}

.no-padding-adjustment .fl-row-content-wrap {
  padding: 0;
}

.limonade-row-80 .fl-row-content-wrap {
  padding: 80px 20px;
}

.limonade-row-60 .fl-row-content-wrap {
  padding: 60px 20px;
}

.limonade-row-60-top .fl-row-content-wrap {
  padding: 60px 20px 0;
}

.limonade-row-60-bottom .fl-row-content-wrap {
  padding: 0 20px 60px;
}

.limonade-row-40 .fl-row-content-wrap {
  padding: 40px 20px !important;
}

.pa-space-columns .fl-col-group .fl-col-content {
  margin: 10px;
}


/* =========================================================
   04. WIDTH AND ALIGNMENT UTILITIES
   ========================================================= */

.tight-content-920 {
  max-width: 920px;
  margin: 0 auto;
}

.tight-content-1100 {
  max-width: 1100px;
  margin: 0 auto;
}

.limonade-center-item .uabb-infobox-content,
.limonade-center-item .uabb-infobox-text,
.light-button-wrap {
  text-align: center;
}


/* =========================================================
   05. IMAGE UTILITIES
   ========================================================= */

.crop-square-image img {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.lower-right-cta-image .uabb-image-content,
.lower-right-cta-image .uabb-photo-img {
  display: block;
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto;
  border: 8px solid var(--pa-white);
  border-radius: 22px;
  box-sizing: border-box;
}

.lower-right-cta-image .uabb-image-content img,
.lower-right-cta-image .uabb-photo-img img,
.lower-right-cta-image > img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
}



/* =========================================================
   07. BUTTON AND LABEL UTILITIES
   ========================================================= */

.light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 185px;
  padding: 0 28px;
  background-color: var(--pa-white);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color: var(--pa-blue-dark) !important;
  font-family: "figtree", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

a.light-button {
  background-color: var(--pa-white) !important;
  color: var(--pa-blue-dark) !important;
}

.light-button .uabb-button-text,
a.light-button .uabb-button-text {
  color: var(--pa-blue-dark) !important;
}

.light-button:hover,
.light-button:focus {
  background-color: #f3f3f3 !important;
  color: var(--pa-blue-deep) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.light-button:hover .uabb-button-text,
.light-button:focus .uabb-button-text,
a.light-button:hover .uabb-button-text,
a.light-button:focus .uabb-button-text {
  color: var(--pa-blue-deep) !important;
}

span.orange-button,
span.orange-text {
  display: inline-block;
  padding: 10px;
  background-color: var(--pa-orange);
  color: var(--pa-white);
  font-size: 12px;
  text-transform: uppercase;
}

span.orange-button {
  margin: 30px 6px auto;
}

span.orange-text {
  clear: both;
  margin: 10px 6px auto;
}


/* =========================================================
   08. EQUAL-HEIGHT LAYOUT UTILITIES
   ========================================================= */

.pa-equal-height-box-row .fl-col-group,
.pa-equal-height-review-row .fl-col-group,
.pa-rounded-tour-equal-row .fl-col-group {
  display: flex;
  align-items: stretch;
}

.pa-equal-height-box-row .fl-col,
.pa-equal-height-review-row .fl-col,
.pa-rounded-tour-equal-row .fl-col {
  display: flex;
}

.pa-equal-height-box-row .fl-col-content,
.pa-equal-height-review-row .fl-col-content,
.pa-rounded-tour-equal-row .fl-col-content {
  display: flex;
  width: 100%;
}

.pa-equal-height-box-row .fl-module-info-box,
.pa-equal-height-box-row .fl-module-content,
.pa-equal-height-box-row .uabb-module-content,
.pa-equal-height-box-row .uabb-infobox,
.pa-equal-height-box-row .uabb-infobox-left-right-wrap,
.pa-equal-height-box-row .uabb-infobox-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pa-equal-height-box-row .uabb-infobox-text-wrap {
  flex: 1;
}

.adjust-height-300px .uabb-infobox {
  min-height: 300px;
}


/* =========================================================
   09. ROUNDED TOUR EQUAL-HEIGHT UTILITY
   ========================================================= */

.pa-rounded-tour-equal-row .fl-col-content {
  flex-direction: column;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes,
.pa-rounded-tour-equal-row .rounded-tour-boxes > .fl-module-content,
.pa-rounded-tour-equal-row .rounded-tour-boxes > .fl-module-content > .uabb-infobox,
.pa-rounded-tour-equal-row .rounded-tour-boxes > .fl-module-content > .uabb-infobox > .uabb-infobox-left-right-wrap {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes > .fl-module-content > .uabb-infobox,
.pa-rounded-tour-equal-row .rounded-tour-boxes > .fl-module-content > .uabb-infobox > .uabb-infobox-left-right-wrap {
  height: 100%;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-infobox-content,
.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-infobox-text-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-infobox-content {
  height: 100%;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-infobox-button,
.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-infobox-cta-link {
  margin-top: auto !important;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-imgicon-wrap,
.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-image,
.pa-rounded-tour-equal-row .rounded-tour-boxes .uabb-image-content {
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes.tour-highlights-box .uabb-imgicon-wrap {
  margin-bottom: 0 !important;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes.tour-highlights-box .uabb-infobox-title-wrap {
  flex: 0 0 auto;
}

.pa-rounded-tour-equal-row .rounded-tour-boxes.tour-highlights-box .uabb-infobox-text-wrap {
  flex: 1 1 auto;
}


/* =========================================================
   10. REVIEW CARD EQUAL-HEIGHT UTILITY
   ========================================================= */

.pa-equal-height-review-row .review-card-box,
.pa-equal-height-review-row .review-card-box > .fl-module-content {
  display: flex;
  width: 100%;
}

.pa-equal-height-review-row .review-card-box .uabb-infobox,
.pa-equal-height-review-row .review-card-box .uabb-infobox-left-right-wrap,
.pa-equal-height-review-row .review-card-box .uabb-infobox-content,
.pa-equal-height-review-row .review-card-box .uabb-infobox-text-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pa-equal-height-review-row .review-card-box .uabb-infobox-text-wrap,
.pa-equal-height-review-row .review-card-box .uabb-infobox-text {
  flex: 1 1 auto;
}


/* =========================================================
   ALTERNATE TOUR DETAILS TABLE
   Use class: tour-details-table-wrapper-alt
   ========================================================= */

.tour-details-table-wrapper-alt .uabb-table-wrapper,
.tour-details-table-wrapper-alt .uabb-table,
.tour-details-table-wrapper-alt .uabb-table-inner-wrap {
  width: 100%;
}

.tour-details-table-wrapper-alt .uabb-table-inner-wrap {
  border: none !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

.tour-details-table-wrapper-alt thead {
  display: none !important;
}

.tour-details-table-wrapper-alt th,
.tour-details-table-wrapper-alt td {
  padding: 18px 24px !important;
  border: none !important;
  border-bottom: 1px solid #bfbfbf !important;
  vertical-align: middle;
  text-align: left;
}

.tour-details-table-wrapper-alt td:first-child {
  width: 18%;
  background-color: var(--pa-light-grey) !important;
  border-right: 1px solid var(--pa-blue-dark) !important;
}

.tour-details-table-wrapper-alt td:nth-child(2) {
  width: 82%;
  background-color: transparent !important;
}

.tour-details-table-wrapper-alt td:first-child .content-text {
  color: var(--pa-blue-dark) !important;
  font-family: "figtree", sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

.tour-details-table-wrapper-alt td:nth-child(2) .content-text {
  color: #6f6f6f !important;
  font-family: "figtree", sans-serif;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45;
}

.tour-details-table-wrapper-alt tbody tr:last-child td {
  border-bottom: none !important;
}

.tour-details-table-wrapper-alt .uabb-sort-icon {
  display: none !important;
}