/* ====================================================================== *
 * File: specialist_comments_feedback.css
 * Location: static/css/specialist_comments_feedback.css
 * Description: Enforces a single-row RTL specialist-review rail, right-aligned identity, whole-card interaction, and clean long-review modal scrolling.
 * Version: 1.1.0
 * Last Modified: Thu Aug 20 2026 - 21:23
 * Dependencies: specialist_comments.css, landing_editorial_redesign.css, landing_followup_polish.css
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Keep reviews in one continuous horizontal RTL rail
 * -------------------------------------------------------------------------- */

.specialist-comments-track,
.landing-testimonials-section .specialist-comments-track {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  flex-flow: row nowrap !important;
  grid-template-columns: none !important;
  align-items: stretch;
  direction: rtl;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.specialist-comments-track::-webkit-scrollbar,
.landing-testimonials-section .specialist-comments-track::-webkit-scrollbar {
  display: none;
}

.specialist-comment-card,
.landing-testimonials-section .specialist-comment-card {
  flex: 0 0 clamp(360px, 31.5vw, 460px) !important;
  min-width: 360px !important;
  scroll-snap-align: start;
}

/* -------------------------------------------------------------------------- *
 * 2. Keep specialist identity and rating on the visual right side
 * -------------------------------------------------------------------------- */

.specialist-comment-head {
  direction: rtl;
  grid-template-columns: 66px minmax(0, 1fr);
}

.specialist-comment-identity,
.specialist-comment-name-line,
.specialist-comment-medical-number {
  direction: rtl;
  text-align: right;
}

.specialist-comment-name-line {
  justify-content: flex-start;
}

.specialist-comment-stars {
  direction: ltr;
}

/* -------------------------------------------------------------------------- *
 * 3. Make the complete review card visibly interactive
 * -------------------------------------------------------------------------- */

.specialist-comment-card[data-specialist-card-modal] {
  cursor: pointer;
}

.specialist-comment-card[data-specialist-card-modal]:focus-visible {
  outline: 3px solid rgba(190, 146, 54, 0.45);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- *
 * 4. Keep long full-review modals contained without an exposed edge scrollbar
 * -------------------------------------------------------------------------- */

.specialist-comment-dialog {
  position: relative;
  width: min(880px, calc(100vw - 40px)) !important;
  max-width: 880px !important;
  max-height: min(88dvh, 820px) !important;
  overflow: hidden !important;
  border-radius: 24px;
}

.specialist-comment-dialog [data-specialist-dialog-body] {
  width: 100%;
  max-height: min(88dvh, 820px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.specialist-comment-dialog [data-specialist-dialog-body]::-webkit-scrollbar {
  display: none;
}

.specialist-dialog-close {
  position: absolute !important;
  z-index: 5;
  top: 16px !important;
  left: 16px !important;
  float: none !important;
  margin: 0 !important;
}

.specialist-modal-content {
  min-width: 0;
  padding-top: 40px;
}

.specialist-modal-comment {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- *
 * 5. Responsive specialist review behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .specialist-comment-card,
  .landing-testimonials-section .specialist-comment-card {
    flex-basis: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
  }

  .specialist-comment-dialog {
    width: calc(100vw - 24px) !important;
    max-height: 90dvh !important;
    border-radius: 20px;
  }

  .specialist-comment-dialog [data-specialist-dialog-body] {
    max-height: 90dvh;
  }
}

/* ============================= End of specialist_comments_feedback.css ============================= */