/* ============================================================================
   AWPS — traveller testimonials: the submission form, the reviews page and the
   home-page carousel.

   These three are rendered by the theme's own shortcodes rather than by Elementor
   widgets, because the cards are driven by a moderated post query. So unlike the
   other component stylesheets in this folder, this one styles plain markup and does
   not have to out-specify Elementor's per-element CSS.

   The card is a faithful port of `.testi-card` from css/style.css: white panel, the
   Georgia quote mark bleeding off the top-right, a gold star row, and the gradient
   initial-avatar. Colours alias the same Elementor globals the rest of the theme uses,
   so a brand change in Site Settings still reaches them.
   ============================================================================ */

/* --------------------------------------------------------------- star rows -- */

.awps-t-stars {
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}
.awps-t-stars-on  { color: var(--e-global-color-awps_gold, #E8A317); }
.awps-t-stars-off { color: var(--awps-mint2, #E2F1E4); }

/* ------------------------------------------------------------ shared avatar -- */

.awps-t-avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--awps-green, #3FA535);
  background-image: linear-gradient(135deg, var(--awps-green, #3FA535) 0%, var(--awps-lime, #A9CE3B) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}
.awps-t-avatar--lg {
  flex-basis: 62px;
  width: 62px;
  height: 62px;
  font-size: 24px;
}

/* ================================================== home-page carousel ===== */

/* A scroll-snap track rather than a slider library: the cards are just boxes in a
   row, so the browser's own scrolling gives touch swipe, keyboard arrows and
   momentum for free, and there is no second copy of Swiper on the page. */
.awps-t-carousel { position: relative; }

.awps-t-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' shadow, which a clipping overflow would otherwise shave. */
  padding: 10px 4px 18px;
  margin: -10px -4px -18px;
  scrollbar-width: none;
}
.awps-t-track::-webkit-scrollbar { display: none; }
.awps-t-track:focus-visible { outline: 2px solid var(--awps-green, #3FA535); outline-offset: 4px; }

.awps-t-slide {
  flex: 0 0 420px;
  max-width: 100%;
  scroll-snap-align: start;
  display: flex;
}

.awps-t-card {
  background: #fff;
  border-radius: var(--awps-radius, 18px);
  box-shadow: var(--awps-shadow, 0 10px 40px rgba(20, 70, 60, .12));
  padding: 34px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* `.testi-card::before` — the oversized closing quote in the top-right corner. */
.awps-t-card::before {
  content: "”";
  position: absolute;
  top: 8px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 78px;
  line-height: 1;
  color: var(--awps-mint2, #E2F1E4);
  pointer-events: none;
}

.awps-t-quote {
  font-size: 15px;
  line-height: 1.75;
  color: var(--awps-body, #5E6D67);
  margin: 0;
  position: relative;
  /* The quote is the flexible middle, so every card in the row ends up the same
     height with its author block pinned to the bottom edge. */
  flex: 1 1 auto;
}

.awps-t-who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.awps-t-who-text { display: flex; flex-direction: column; }

.awps-t-name {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: var(--awps-ink, #1E2B27);
}
.awps-t-role {
  font-size: 13px;
  line-height: 1.5;
  color: var(--awps-body, #5E6D67);
}

/* The two arrows, matching `.carousel .navbtns` in the source exactly: 48px circles,
   a 2px mint ring, a 19px glyph in brand deep, 12px apart and centred under the track.
   The source puts the gap in `.track { padding-bottom: 30px }`; here the track's
   padding is cancelled by a negative margin so the cards' shadow is not clipped, so
   the same 30px is taken as a margin on the nav row instead. */
.awps-t-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.awps-t-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--awps-mint2, #E2F1E4);
  background: #fff;
  color: var(--awps-deep, #14463C);
  font-size: 19px;
  line-height: 1;
  /* A button centres its text by default, but centring it explicitly keeps the ‹ ›
     glyph dead in the middle of the circle whatever font ends up resolving. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
/* The theme's reset.css paints `[type="button"]:focus` with #cc3366 — a pink that
   flashed across the arrow the moment it was clicked and stayed while it held focus.
   That selector scores (0,2,0) against this file's (0,1,1), so the resting appearance
   has to be restated for the focus state rather than simply relying on the rule above. */
.awps-t-nav button:focus {
  background: #fff;
  border-color: var(--awps-mint2, #E2F1E4);
  color: var(--awps-deep, #14463C);
}

/* Wins over the focus rule on specificity, so a focused button still lights up green
   under the pointer. */
.awps-t-nav button:hover:not([disabled]) {
  background: var(--awps-green, #3FA535);
  border-color: var(--awps-green, #3FA535);
  color: #fff;
}

/* Keyboard users keep a visible ring; a mouse click no longer leaves one behind. */
.awps-t-nav button:focus-visible {
  outline: 2px solid var(--awps-green, #3FA535);
  outline-offset: 3px;
}

.awps-t-nav button[disabled] { opacity: .4; cursor: default; }

@media (max-width: 640px) {
  /* A card just under the viewport width leaves the next one peeking, which is what
     tells a visitor the strip scrolls. Capped at the source's 420px so it never grows
     larger than the desktop card on mid-size screens. */
  .awps-t-slide { flex-basis: min(88%, 420px); }
  .awps-t-card  { padding: 28px 22px; }
}

/* ================================================== reviews page: the list == */

.awps-t-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 820px;
  margin-inline: auto;
}

/* Blog format: one entry per row, headed by the traveller rather than a headline,
   with the review itself as ordinary prose beneath. */
.awps-t-entry {
  background: #fff;
  border: 1px solid var(--awps-mint2, #E2F1E4);
  border-radius: var(--awps-radius, 18px);
  box-shadow: var(--awps-shadow, 0 10px 40px rgba(20, 70, 60, .12));
  padding: 32px 34px;
}

.awps-t-entry-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.awps-t-entry-name {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--awps-deep, #14463C);
  margin: 0 0 4px;
}

.awps-t-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--awps-body, #5E6D67);
  margin: 0;
}
.awps-t-sep { color: var(--awps-mint2, #E2F1E4); }

.awps-t-entry-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--awps-body, #5E6D67);
  margin: 0 0 14px;
}
.awps-t-entry-body p:last-child { margin-bottom: 0; }

.awps-t-empty {
  text-align: center;
  font-size: 16px;
  color: var(--awps-body, #5E6D67);
}

.awps-t-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.awps-t-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 40px;
  border: 1px solid var(--awps-mint2, #E2F1E4);
  background: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--awps-deep, #14463C);
  text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s;
}
.awps-t-pagination .page-numbers:hover,
.awps-t-pagination .page-numbers.current {
  background: var(--awps-green, #3FA535);
  border-color: var(--awps-green, #3FA535);
  color: #fff;
}

@media (max-width: 640px) {
  .awps-t-entry { padding: 26px 20px; }
  .awps-t-entry-head { gap: 14px; }
}

/* ==================================================== the submission form === */

/* Same shell as the contact page's enquiry panel, so the two forms on the site read
   as one thing. */
.awps-t-form-panel {
  background: #f7f9f7;
  border: 1px solid var(--awps-mint2, #E2F1E4);
  border-radius: var(--awps-radius, 18px);
  box-shadow: var(--awps-shadow, 0 10px 40px rgba(20, 70, 60, .12));
  padding: 34px 34px 38px;
  max-width: 820px;
  margin-inline: auto;
  /* The redirect after submitting lands on #awps-testimonial-form; without this the
     sticky header would sit over the notice the visitor was sent here to read. */
  scroll-margin-top: 120px;
}

.awps-t-form-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--awps-deep, #14463C);
  margin: 0 0 8px;
}
.awps-t-form-intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--awps-body, #5E6D67);
  margin: 0 0 24px;
}

.awps-t-notice {
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
}
.awps-t-notice--ok {
  background: var(--awps-mint, #EDF7EE);
  border: 1px solid var(--awps-green, #3FA535);
  color: var(--awps-deep, #14463C);
}
.awps-t-notice--err {
  background: #fdf1ee;
  border: 1px solid #d1553f;
  color: #8a3323;
}

/* Two columns for the short fields, one for the review — `.contact-form`'s rhythm. */
.awps-t-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.awps-t-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.awps-t-grid .awps-t-field { margin-bottom: 0; }

.awps-t-field label,
.awps-t-rating legend {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--awps-deep, #14463C);
}
.awps-t-req { color: #d1553f; }

.awps-t-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a978f;
}

.awps-t-field input,
.awps-t-field textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--awps-mint2, #E2F1E4);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.75;
  color: var(--awps-ink, #1E2B27);
  transition: border-color .3s;
}
.awps-t-field input::placeholder,
.awps-t-field textarea::placeholder { color: #9aa8a0; opacity: 1; }
.awps-t-field input:focus,
.awps-t-field textarea:focus {
  border-color: var(--awps-green, #3FA535);
  outline: none;
  box-shadow: none;
}
.awps-t-field textarea { min-height: 170px; resize: vertical; }

/* ------------------------------------------------------------ star rating -- */

/* The radios are printed 5→1, so `~` reaches the stars that follow a checked one in
   the DOM, which are the lower ratings — and `row-reverse` puts them back on screen
   in the order a visitor expects. No JavaScript is involved. */
.awps-t-rating {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.awps-t-rating legend {
  padding: 0;
  margin-bottom: 7px;
}
.awps-t-rating-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.awps-t-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.awps-t-rating label {
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: var(--awps-mint2, #E2F1E4);
  transition: color .15s;
}
.awps-t-rating input:checked ~ label,
.awps-t-rating label:hover,
.awps-t-rating label:hover ~ label {
  color: var(--e-global-color-awps_gold, #E8A317);
}
.awps-t-rating input:focus-visible + label {
  outline: 2px solid var(--awps-green, #3FA535);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The star labels carry their rating as text for screen readers; sighted visitors
   read the row of stars itself. */
.awps-t-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- consent --- */

.awps-t-consent {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--awps-body, #5E6D67);
}
.awps-t-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.awps-t-consent input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--awps-green, #3FA535);
  flex: 0 0 17px;
}

/* The honeypot: off-screen rather than `display:none`, which some bots check for. */
.awps-t-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.awps-t-submit { margin: 0; }

.awps-t-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 40px;
  background-image: linear-gradient(135deg, var(--awps-green, #3FA535) 0%, var(--awps-lime, #A9CE3B) 100%);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
  transition: filter .3s, transform .3s;
}
.awps-t-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.awps-t-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Same reset.css rule as the arrows above: `[type="submit"]:focus` sets a #cc3366
   background-color. The gradient background-image hides it here, but restating the
   colour keeps that true if the gradient is ever changed to a flat fill. */
.awps-t-btn:focus,
.awps-t-btn:hover {
  background-color: var(--awps-green, #3FA535);
  color: #fff;
}
.awps-t-btn:focus-visible {
  outline: 2px solid var(--awps-deep, #14463C);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .awps-t-grid { grid-template-columns: 1fr; }
  .awps-t-form-panel { padding: 26px 20px 30px; }
}