/* =============================================
   Real Estate Reviews v3.0 – Complete Styles
   Fully Mobile Responsive + Polished UI
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --re-gold:          #C9A84C;
  --re-gold-light:    #F0D080;
  --re-gold-dim:      rgba(201,168,76,.12);
  --re-dark:          #1A1A2E;
  --re-navy:          #16213E;
  --re-card-bg:       #FFFFFF;
  --re-bg-soft:       #F8F7F4;
  --re-border:        #E8E4DC;
  --re-border-focus:  var(--re-gold);
  --re-text:          #2D2D2D;
  --re-muted:         #7A7A8C;
  --re-radius:        16px;
  --re-radius-sm:     10px;
  --re-shadow:        0 4px 24px rgba(0,0,0,.08);
  --re-shadow-md:     0 8px 40px rgba(0,0,0,.11);
  --re-shadow-lg:     0 16px 56px rgba(0,0,0,.16);
  --re-transition:    .22s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────────
   BASE WRAPPER
───────────────────────────────────────────── */
.re-reviews-wrap {
  font-family: 'DM Sans', sans-serif;
  color: var(--re-text);
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────
   SECTION HEADER
───────────────────────────────────────────── */
.re-list-header {
  text-align: center;
  margin-bottom: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.re-list-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--re-dark);
  margin: 0 0 12px;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.re-list-header p {
  color: var(--re-muted);
  font-size: 1rem;
  margin: 0 0 28px;
}

/* ─────────────────────────────────────────────
   "WRITE A REVIEW" BUTTON
───────────────────────────────────────────── */
.re-open-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--re-gold) 0%, #b08a34 100%);
  color: #fff;
  border: none;
  padding: 14px 30px;
  font-size: .95rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: .3px;
  box-shadow: 0 6px 24px rgba(201,168,76,.38);
  transition: transform var(--re-transition),
              box-shadow var(--re-transition),
              filter var(--re-transition);
  -webkit-tap-highlight-color: transparent;
}
.re-open-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(201,168,76,.48);
  filter: brightness(1.06);
}
.re-open-modal-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(201,168,76,.35);
}

/* ─────────────────────────────────────────────
   MODAL OVERLAY
───────────────────────────────────────────── */
.re-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.re-modal-overlay.active {
  display: flex;
  animation: reOverlayIn .18s ease;
}
@keyframes reOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.re-modal-open {
  overflow: hidden;
  /* Prevent layout shift on desktop */
  padding-right: var(--re-scrollbar-width, 0px);
}

/* ─────────────────────────────────────────────
   MODAL BOX
───────────────────────────────────────────── */
.re-modal-box {
  background: #fff;
  border-radius: 22px;
  padding: 44px 40px 38px;
  max-width: 660px;
  width: 100%;
  position: relative;
  box-shadow: 0 32px 96px rgba(0,0,0,.28);
  animation: reModalIn .28s cubic-bezier(.34, 1.4, .64, 1);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  /* Custom scrollbar inside modal */
  scrollbar-width: thin;
  scrollbar-color: var(--re-border) transparent;
}
.re-modal-box::-webkit-scrollbar { width: 5px; }
.re-modal-box::-webkit-scrollbar-track { background: transparent; }
.re-modal-box::-webkit-scrollbar-thumb { background: var(--re-border); border-radius: 10px; }

@keyframes reModalIn {
  from { opacity: 0; transform: scale(.9) translateY(24px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ─────────────────────────────────────────────
   MODAL CLOSE BUTTON
───────────────────────────────────────────── */
.re-modal-close {
  position: sticky;
  float: right;
  top: 0;
  margin-top: -28px;
  margin-right: -8px;
  margin-bottom: 8px;
  background: var(--re-bg-soft);
  border: 1.5px solid var(--re-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: .95rem;
  cursor: pointer;
  color: var(--re-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--re-transition), color var(--re-transition);
  flex-shrink: 0;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}
.re-modal-close:hover {
  background: #ffe5e5;
  color: #c62828;
  border-color: #fca5a5;
}

/* ─────────────────────────────────────────────
   MODAL FORM HEADER
───────────────────────────────────────────── */
.re-modal-box .re-form-header {
  text-align: center;
  margin-bottom: 30px;
  clear: both;
}
.re-modal-box .re-form-header .re-form-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 10px;
}
.re-modal-box .re-form-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  color: var(--re-dark);
  margin: 0 0 6px;
  line-height: 1.2;
}
.re-modal-box .re-form-header p {
  color: var(--re-muted);
  margin: 0;
  font-size: .9rem;
}

/* ─────────────────────────────────────────────
   FORM LAYOUT
───────────────────────────────────────────── */
.re-modal-box .re-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.re-modal-box .re-form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.re-modal-box .re-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.re-modal-box .re-form-row .re-field { margin: 0; }

/* ─────────────────────────────────────────────
   FORM LABELS
───────────────────────────────────────────── */
.re-modal-box .re-field label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--re-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.re-optional {
  font-weight: 400;
  color: var(--re-muted);
  font-size: .75rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   INPUTS & TEXTAREAS
───────────────────────────────────────────── */
.re-modal-box .re-field input,
.re-modal-box .re-field textarea {
  border: 1.5px solid var(--re-border);
  border-radius: var(--re-radius-sm);
  padding: 11px 14px;
  font-size: .92rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--re-text);
  background: var(--re-bg-soft);
  transition: border-color var(--re-transition),
              box-shadow var(--re-transition),
              background var(--re-transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.re-modal-box .re-field input::placeholder,
.re-modal-box .re-field textarea::placeholder {
  color: #c0bec8;
}
.re-modal-box .re-field input:focus,
.re-modal-box .re-field textarea:focus {
  border-color: var(--re-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
  background: #fff;
}
.re-modal-box .re-field textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────
   CHARACTER COUNTER
───────────────────────────────────────────── */
.re-char-count {
  text-align: right;
  font-size: .75rem;
  color: var(--re-muted);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────
   STAR PICKER
───────────────────────────────────────────── */
.re-modal-box .re-star-picker {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--re-bg-soft);
  padding: 10px 14px;
  border-radius: var(--re-radius-sm);
  border: 1.5px solid var(--re-border);
}
.re-modal-box .re-star {
  font-size: 1.75rem;
  color: var(--re-border);
  cursor: pointer;
  transition: color .12s, transform .12s;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.re-modal-box .re-star.hover { color: var(--re-gold-light); transform: scale(1.2); }
.re-modal-box .re-star.active { color: var(--re-gold); transform: scale(1.12); }
.re-modal-box .re-rating-label {
  font-size: .84rem;
  color: var(--re-muted);
  margin-left: 8px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   IMAGE UPLOAD AREA
───────────────────────────────────────────── */
.re-upload-area {
  border: 2px dashed var(--re-border);
  border-radius: var(--re-radius-sm);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--re-transition),
              background var(--re-transition);
  position: relative;
  background: var(--re-bg-soft);
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.re-upload-area:hover,
.re-upload-area.drag-over {
  border-color: var(--re-gold);
  background: #fffdf4;
}
.re-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0; /* Prevent mobile text */
}
.re-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--re-muted);
  font-size: .88rem;
  pointer-events: none;
  line-height: 1.4;
}
.re-upload-icon { font-size: 1.9rem; line-height: 1; }
.re-image-preview {
  max-width: 100%;
  max-height: 150px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: var(--re-shadow);
}
.re-remove-image {
  background: #fff;
  border: 1.5px solid #fca5a5;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: .8rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  color: #dc2626;
  z-index: 2;
  position: relative;
  transition: background var(--re-transition);
  -webkit-tap-highlight-color: transparent;
}
.re-remove-image:hover { background: #fff1f1; }

/* ─────────────────────────────────────────────
   SUBMIT BUTTON (MODAL)
───────────────────────────────────────────── */
.re-modal-box .re-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--re-dark) 0%, var(--re-navy) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform var(--re-transition),
              box-shadow var(--re-transition),
              filter var(--re-transition);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.re-modal-box .re-submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--re-gold) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--re-transition);
}
.re-modal-box .re-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26,26,46,.32);
}
.re-modal-box .re-submit-btn:hover::after { opacity: .3; }
.re-modal-box .re-submit-btn:active { transform: translateY(0); }
.re-modal-box .re-submit-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─────────────────────────────────────────────
   FORM MESSAGES
───────────────────────────────────────────── */
.re-form-msg {
  border-radius: var(--re-radius-sm);
  padding: 13px 16px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
  display: none;
}
.re-form-msg.success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  display: block;
}
.re-form-msg.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  display: block;
}

/* ─────────────────────────────────────────────
   CAROUSEL
───────────────────────────────────────────── */
.re-carousel-outer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.re-carousel-track-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: var(--re-radius);
}
.re-carousel-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.re-carousel-slide {
  min-width: 33.333%;
  box-sizing: border-box;
  padding: 8px 10px;
  flex-shrink: 0;
}

/* Arrow buttons */
.re-carousel-btn {
  background: #fff;
  border: 1.5px solid var(--re-border);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  min-width: 46px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--re-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--re-shadow);
  transition: background var(--re-transition),
              color var(--re-transition),
              transform var(--re-transition);
  z-index: 2;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.re-carousel-btn:hover {
  background: var(--re-dark);
  color: #fff;
  transform: scale(1.08);
  border-color: var(--re-dark);
}
.re-carousel-btn:active { transform: scale(.96); }

/* Dots */
.re-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.re-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--re-border);
  cursor: pointer;
  padding: 0;
  transition: background var(--re-transition), transform var(--re-transition), width var(--re-transition);
}
.re-dot.active {
  background: var(--re-gold);
  width: 24px;
  border-radius: 5px;
  transform: none;
}

/* ─────────────────────────────────────────────
   REVIEW CARD (no image)
───────────────────────────────────────────── */
.re-review-card {
  background: var(--re-card-bg);
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius);
  padding: 26px 24px;
  box-shadow: var(--re-shadow);
  transition: transform var(--re-transition), box-shadow var(--re-transition);
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.re-review-card::before {
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 110px;
  color: var(--re-gold-light);
  opacity: .18;
  position: absolute;
  top: -18px;
  right: 14px;
  line-height: 1;
  pointer-events: none;
}
.re-review-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--re-shadow-lg);
}

/* ─────────────────────────────────────────────
   REVIEW CARD – with image
───────────────────────────────────────────── */
.re-review-card.has-image {
  padding: 0;
}
.re-review-card.has-image::before { display: none; }
.re-card-image {
  width: 100%;
  height: 165px;
  overflow: hidden;
  border-radius: var(--re-radius) var(--re-radius) 0 0;
}
.re-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.re-review-card.has-image:hover .re-card-image img {
  transform: scale(1.04);
}
.re-review-card.has-image .re-card-body { padding: 22px 24px; }
.re-review-card:not(.has-image) .re-card-body { padding: 0; }

/* ─────────────────────────────────────────────
   CARD INTERNALS
───────────────────────────────────────────── */
.re-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.re-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--re-gold) 0%, var(--re-dark) 100%);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(201,168,76,.3);
}
.re-reviewer-info { flex: 1; min-width: 0; }
.re-reviewer-info strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--re-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.re-reviewer-info span {
  font-size: .76rem;
  color: var(--re-muted);
}
.re-card-rating {
  color: var(--re-gold);
  font-size: .92rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.re-review-text {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--re-text);
  margin: 0 0 16px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.re-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--re-border);
  padding-top: 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.re-location,
.re-date {
  font-size: .76rem;
  color: var(--re-muted);
}
.re-no-reviews {
  text-align: center;
  color: var(--re-muted);
  font-style: italic;
  padding: 48px 0;
}

/* ─────────────────────────────────────────────
   RESPONSIVE – TABLET (≤ 1023px)
───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .re-carousel-slide { min-width: 50% !important; }
  .re-reviews-wrap { padding: 44px 20px; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE – MOBILE (≤ 639px)
───────────────────────────────────────────── */
@media (max-width: 639px) {
  /* Wrapper */
  .re-reviews-wrap { padding: 28px 14px; }
  .re-list-header { margin-bottom: 32px; }

  /* Carousel: 1 card */
  .re-carousel-slide { min-width: 100% !important; padding: 6px 4px; }
  .re-carousel-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1.3rem;
  }
  .re-carousel-dots { margin-top: 20px; }

  /* Cards */
  .re-review-card { padding: 20px 16px; }
  .re-review-card.has-image .re-card-body { padding: 16px; }
  .re-card-image { height: 140px; }

  /* Modal overlay: full screen on mobile */
  .re-modal-overlay { padding: 0; align-items: flex-end; }
  .re-modal-box {
    border-radius: 22px 22px 0 0;
    padding: 30px 20px 28px;
    max-height: 94vh;
    /* Bottom sheet slide-up on mobile */
    animation: reModalSlideUp .3s cubic-bezier(.34,1.2,.64,1);
  }
  @keyframes reModalSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* Modal: 2-col → 1-col */
  .re-modal-box .re-form-row.two-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Stars slightly smaller on mobile */
  .re-modal-box .re-star { font-size: 1.55rem; }

  /* Submit button: easier tap target */
  .re-modal-box .re-submit-btn { padding: 16px; font-size: 1.02rem; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE – SMALL MOBILE (≤ 380px)
───────────────────────────────────────────── */
@media (max-width: 380px) {
  .re-modal-box { padding: 26px 16px 24px; }
  .re-open-modal-btn { padding: 13px 22px; font-size: .9rem; }
  .re-modal-box .re-form-header h3 { font-size: 1.2rem; }
}