/* Reusable UI building blocks: buttons, badges, cards, forms, modals, FAQ, photo slots */

/* Buttons */
.loqua-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.loqua-btn--primary {
  background: var(--sb-accent);
  color: var(--sb-on-accent);
  box-shadow: 0 8px 24px var(--sb-shadow);
}

.loqua-btn--outline {
  border: 1.5px solid var(--sb-border);
  color: var(--sb-accent-strong);
  background: transparent;
}

.loqua-btn--white {
  background: #fff;
  color: var(--sb-accent-strong);
  font-weight: 700;
}

.loqua-btn--ghost-light {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: none;
  color: #fff;
}

.loqua-btn--link {
  background: none;
  border: none;
  color: var(--sb-accent);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0;
}

.loqua-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Badge / pill */
.loqua-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sb-surface-2);
  color: var(--sb-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.loqua-badge--featured {
  position: absolute;
  top: -12px;
  background: var(--sb-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.loqua-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sb-surface-2);
  color: var(--sb-text);
  font-size: 0.78rem;
}

/* Photo slot (replaces the design tool's <image-slot> placeholder component) */
.loqua-photo-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sb-surface-2), var(--sb-border));
  color: var(--sb-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}

.loqua-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cards: about points, program, teacher, pricing */
.loqua-point-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  padding: 16px 18px;
}

.loqua-point-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sb-surface-2);
  color: var(--sb-accent);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Horizontal swipeable carousel (courses, teachers, pricing) - one flex row that
   scrolls instead of a grid that wraps into a list. Top padding is generous so the
   "Популярно" ribbon (which sits above the card's own top edge) never gets clipped
   by the scroll container, and the scrollbar gets its own themed, breathing-room strip. */
.loqua-carousel {
  position: relative;
}

/* Extra clearance so the section title above never touches the carousel. */
.loqua-carousel--spaced {
  margin-top: 28px;
}

.loqua-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px 2px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-accent) var(--sb-surface-2);
}

.loqua-carousel-track::-webkit-scrollbar {
  height: 6px;
}

.loqua-carousel-track::-webkit-scrollbar-track {
  background: var(--sb-surface-2);
  border-radius: 999px;
}

.loqua-carousel-track::-webkit-scrollbar-thumb {
  background: var(--sb-accent);
  border-radius: 999px;
}

/* "Swipe to see more" hint: sits at the right edge pointing forward at the start of the
   carousel, hides while mid-scroll, then reappears at the left edge pointing back once
   the user has scrolled all the way to the end (see scripts/carousel.js). Mobile-only -
   on desktop enough cards are visible already. */
.loqua-carousel-hint {
  position: absolute;
  right: 2px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sb-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px var(--sb-shadow);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.loqua-carousel-hint svg {
  transition: transform 0.25s ease;
}

.loqua-carousel-hint.is-hidden {
  opacity: 0;
}

.loqua-carousel-hint.is-reversed {
  right: auto;
  left: 2px;
}

.loqua-carousel-hint.is-reversed svg {
  transform: rotate(180deg);
}

@media (min-width: 701px) {
  .loqua-carousel-hint {
    display: none;
  }
  /* Opt-in: some carousels don't show every card at once even on desktop (reviews,
     pricing, teachers), so they keep the swipe hint instead of hiding it. */
  .loqua-carousel-hint--desktop {
    display: flex;
  }
}

.loqua-program-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 min(85vw, 300px);
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loqua-program-card .loqua-badge--featured {
  right: 20px;
}

.loqua-teacher-card {
  scroll-snap-align: start;
  flex: 0 0 min(85vw, 320px);
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loqua-teacher-card__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 20px var(--sb-shadow);
}

.loqua-teacher-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.loqua-pricing-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 min(85vw, 270px);
  background: var(--sb-surface);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--sb-border);
}

.loqua-pricing-card--featured {
  border-color: var(--sb-accent);
}

.loqua-pricing-card .loqua-badge--featured {
  left: 24px;
}

.loqua-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.loqua-pricing-card__price strong {
  font-size: 1.9rem;
  font-family: 'Playfair Display', serif;
  color: var(--sb-accent);
}

.loqua-pricing-card__note {
  color: var(--sb-accent-2);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
}

/* On narrow screens, shrink the carousel cards further than the desktop size so at least
   one card fits fully in view with a clear peek of the next one (the swipe affordance).
   Text is no longer clamped here - clamping mid-sentence read as "broken" on a phone, so
   the card is now allowed to grow taller instead of cutting text off.
   This must come after the .loqua-program-card/.loqua-teacher-card/.loqua-pricing-card
   base rules above - same specificity, so source order decides, and a later unconditional
   rule would otherwise win over this media query's flex-basis. */
@media (max-width: 700px) {
  .loqua-program-card,
  .loqua-teacher-card,
  .loqua-pricing-card {
    flex-basis: min(62vw, 210px);
    padding: 20px;
  }

  /* Wider than the others - needs enough room for two pills per row (see .loqua-pill
     below), not just the bio text. */
  .loqua-teacher-card {
    flex-basis: min(78vw, 280px);
  }

  .loqua-teacher-card__photo {
    width: 64px;
    height: 64px;
  }

  .loqua-pill {
    padding: 4px 7px;
    font-size: 0.68rem;
  }
}

/* Review cards: flip on click to reveal the "before/after" story on the back,
   long text scrolls inside the card instead of growing its height. */
.loqua-review-card {
  scroll-snap-align: start;
  flex: 0 0 min(85vw, 340px);
  height: 440px;
  perspective: 1600px;
}

/* Card keeps its full size on mobile (unlike the other carousel cards) - the gap between
   cards is tightened instead, see #reviews-track/#spain-reviews below. */
#reviews-track,
#spain-reviews {
  gap: 10px;
}

.loqua-review-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.loqua-review-card.is-flipped .loqua-review-card__inner {
  transform: rotateY(180deg);
}

.loqua-review-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loqua-review-card__face--front {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  box-shadow: 0 8px 24px var(--sb-shadow);
}

.loqua-review-card__face--back {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-text);
  color: var(--sb-text);
  transform: rotateY(180deg);
}

.loqua-review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loqua-review-card__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px var(--sb-shadow);
}

.loqua-review-card__date {
  display: block;
  font-size: 0.78rem;
  color: var(--sb-muted);
}

.loqua-review-card__stars {
  display: flex;
  gap: 2px;
  color: var(--sb-accent);
  margin-top: 4px;
}

.loqua-review-card__text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sb-text);
}

.loqua-review-card__flip-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sb-accent);
  font-weight: 600;
  font-size: 0.86rem;
  align-self: flex-start;
  flex: 0 0 auto;
}

.loqua-review-card__back-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 4px;
}

.loqua-review-card__back-body span {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.loqua-review-card__back-body p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Spain admission page: consultation-process steps as a single swipeable row (reuses
   .loqua-carousel/.loqua-carousel-track from the courses/teachers/pricing carousels), with
   a thin arrow between each consecutive step card. */
.loqua-consult-step {
  scroll-snap-align: start;
  flex: 0 0 min(70vw, 210px);
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loqua-consult-step__number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sb-accent);
  color: var(--sb-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.loqua-consult-step__text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--sb-text);
}

.loqua-consult-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-accent);
  opacity: 0.55;
}

/* Spain admission page: alternating direction blocks (bachelor/master/language) */
.loqua-spain-program {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
  gap: min(6vw, 56px);
  align-items: center;
  padding: min(7vw, 56px) 0;
}

.loqua-spain-program__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px var(--sb-shadow);
}

.loqua-spain-program__price {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--sb-accent);
  color: var(--sb-on-accent);
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
}

.loqua-spain-program__number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--sb-surface-2);
  -webkit-text-stroke: 1.5px var(--sb-accent);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.loqua-spain-program__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sb-accent);
  margin: 0 0 12px;
}

.loqua-spain-program__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.loqua-spain-program__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--sb-text);
  line-height: 1.5;
}

.loqua-spain-program__item-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--sb-surface-2);
  color: var(--sb-accent);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
}

@media (max-width: 780px) {
  .loqua-spain-program {
    grid-template-columns: 1fr !important;
  }
  /* Desktop alternates media/content DOM order per card for the zigzag look; on the single
     mobile column that means every other card shows text before its photo. Force photo
     first here only - desktop's own alternation stays untouched. */
  .loqua-spain-program__media {
    order: -1;
  }
}

/* FAQ - two-level accordion: a topic group collapses/expands, and each question
   inside it is its own nested collapse. */
details.loqua-faq-group {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 4px 20px;
}

details.loqua-faq-group + details.loqua-faq-group {
  margin-top: 16px;
}

details.loqua-faq-group summary.loqua-faq-group__title {
  cursor: pointer;
  padding: 18px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sb-accent);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

details.loqua-faq-group summary.loqua-faq-group__title::after {
  content: '\FF0B';
  flex: 0 0 auto;
}

details.loqua-faq-group[open] summary.loqua-faq-group__title::after {
  content: '\2212';
}

.loqua-faq-group__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
}

details.loqua-faq {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  padding: 4px 20px;
}

details.loqua-faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

details.loqua-faq summary::after {
  content: '\FF0B';
  color: var(--sb-accent);
  flex: 0 0 auto;
}

details.loqua-faq[open] summary::after {
  content: '\2212';
}

details.loqua-faq p {
  color: var(--sb-muted);
  line-height: 1.65;
  font-size: 0.94rem;
  margin: 0 0 18px;
}

/* Forms */
.loqua-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.loqua-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.loqua-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.loqua-field input:not([type='checkbox']):not([type='radio']),
.loqua-field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--sb-border);
  background: var(--sb-bg);
  color: var(--sb-text);
  font-size: 0.95rem;
}

/* Custom dropdown (program/tariff pickers) - a plain DOM option list instead of a
   native <select>, so the open list is clipped by the modal instead of escaping it. */
.loqua-select {
  position: relative;
}

.loqua-select__control {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--sb-border);
  background: var(--sb-bg);
  color: var(--sb-text);
  font-size: 0.95rem;
  font-family: inherit;
  text-align: left;
}

.loqua-select__chevron {
  flex: 0 0 auto;
  color: var(--sb-muted);
  transition: transform 0.15s ease;
}

.loqua-select.is-open .loqua-select__chevron {
  transform: rotate(180deg);
}

.loqua-select__options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--sb-surface);
  border: 1.5px solid var(--sb-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px var(--sb-shadow);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px;
  display: none;
}

.loqua-select.is-open .loqua-select__options {
  display: block;
}

.loqua-select__options li {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
}

.loqua-select__options li:hover,
.loqua-select__options li.is-selected {
  background: var(--sb-surface-2);
  color: var(--sb-accent);
}

.loqua-field--row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.loqua-form-error {
  color: #dc2626;
  font-size: 0.85rem;
  margin: 0;
}

.loqua-form-success {
  text-align: center;
  padding: 24px 0;
}

/* Modal */
.loqua-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 31, 0.55);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loqua-modal-overlay.is-open {
  display: flex;
}

.loqua-modal-panel {
  background: var(--sb-surface);
  color: var(--sb-text);
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 22px;
  padding: min(6vw, 36px);
}

.loqua-modal-panel--narrow {
  width: min(420px, 100%);
}

.loqua-modal-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.loqua-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--sb-muted);
  line-height: 1;
  padding: 0;
}

/* Theme + nav buttons */
.loqua-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  color: var(--sb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.loqua-icon-btn--square {
  border-radius: 10px;
  color: var(--sb-text);
}