/* ==========================================================================
   CUSTOM WEBSITE REVIEWS — STYLES
   Font: Inter | Color scheme: your brand palette
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.cr-reviews-section {
  --cr-primary: #0F0F0F;        /* Primary - near black, headings */
  --cr-secondary: #C47A2C;      /* Secondary - bronze */
  --cr-text: #4C4C4C;           /* Body text */
  --cr-accent: #5FA9B5;         /* Accent - light teal */
  --cr-gold: #E2A95B;           /* Light gold - stars */
  --cr-cream: #E8D8C3;          /* Soft glow cream - section bg */
  --cr-teal-dark: #2F6F78!important;      /* Deep teal accent - buttons */
  --cr-black: #000000;
  --cr-white: #FFFFFF;

  --cr-radius: 16px;
  --cr-shadow: 0 8px 24px rgba(15, 15, 15, 0.08);

  position: relative;
  padding: 48px 24px 90px;
  background: var(--cr-cream);
  border-radius: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* ---------------- SLIDER ---------------- */
.cr-slider-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.cr-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.cr-review-card {
  background: var(--cr-white);
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow);
  padding: 24px;
  flex: 0 0 calc(33.333% - 14px);
  min-width: 280px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(196, 122, 44, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cr-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 15, 15, 0.14);
  border-color: var(--cr-accent);
}

.cr-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cr-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cr-gold);
  flex-shrink: 0;
}

.cr-reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cr-reviewer-name {
  font-weight: 600;
  color: var(--cr-primary);
  font-size: 15px;
}

.cr-stars {
  color: var(--cr-gold);
  font-size: 14px;
  letter-spacing: 1px;
}

.cr-review-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cr-primary);
}

.cr-review-desc {
  margin: 0 0 14px;
  color: var(--cr-text);
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
}

.cr-review-date {
  font-size: 12px;
  color: var(--cr-secondary);
}

.cr-no-reviews {
  text-align: center;
  color: var(--cr-text);
  padding: 40px 0;
}

/* ---------------- SLIDER NAV ARROWS ---------------- */
.cr-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.cr-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--cr-white);
  box-shadow: var(--cr-shadow);
  color: var(--cr-teal-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cr-arrow:hover {
  background: var(--cr-teal-dark);
  color: var(--cr-white);
  transform: scale(1.06);
}

/* ---------------- FLOATING "WRITE A REVIEW" BUTTON ---------------- */
.cr-write-review-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: linear-gradient(135deg, #2F6F78,#5FA9B5);
  color: #fff;
  border: none!important;
  padding: 13px 22px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(47, 111, 120, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 5;
}

.cr-write-review-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(47, 111, 120, 0.45);
}

/* ---------------- MODAL ---------------- */
.cr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(3px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cr-modal-overlay.cr-active {
  display: flex;
}

.cr-modal {
  background: var(--cr-white);
  width: 100%;
  max-width: 480px;
  border-radius: 18px;
  padding: 32px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: crModalIn 0.25s ease;
  font-family: 'Inter', sans-serif;
}

@keyframes crModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cr-modal h3 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cr-primary);
}

.cr-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--cr-text);
  cursor: pointer;
}

.cr-modal-close:hover {
  color: var(--cr-primary);
}

.cr-form-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.cr-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-primary);
  margin-bottom: 6px;
}

.cr-form-row small {
  color: var(--cr-text);
  font-size: 12px;
  margin-top: 4px;
}

.cr-form-row input[type="text"],
.cr-form-row input[type="email"],
.cr-form-row textarea,
.cr-form-row input[type="file"] {
  border: 1px solid var(--cr-cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--cr-primary);
  background: #FBF8F3;
  outline: none;
  transition: border-color 0.2s ease;
}

.cr-form-row input:focus,
.cr-form-row textarea:focus {
  border-color: var(--cr-accent);
}

.cr-star-picker {
  font-size: 26px;
  color: var(--cr-cream);
  cursor: pointer;
  letter-spacing: 4px;
}

.cr-star-picker span {
  transition: color 0.15s ease;
}

.cr-star-picker span.cr-star-active {
  color: var(--cr-gold);
}

.cr-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--cr-teal-dark), var(--cr-accent));
  color: var(--cr-white);
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s ease;
}

.cr-submit-btn:hover {
  opacity: 0.92;
}

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

.cr-form-message {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.cr-form-message.cr-success { color: var(--cr-teal-dark); }
.cr-form-message.cr-error   { color: #C0392B; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .cr-review-card { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 600px) {
  .cr-review-card { flex: 0 0 100%; }
  .cr-write-review-btn {
    left: 16px;
    bottom: 16px;
    padding: 11px 18px;
    font-size: 13px;
  }
  .cr-reviews-section { padding: 32px 16px 80px; }
}/* ==========================================================================
   CUSTOM WEBSITE REVIEWS — STYLES
   Font: Inter | Color scheme: your brand palette
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.cr-reviews-section {
  --cr-primary: #0F0F0F;        /* Primary - near black, headings */
  --cr-secondary: #C47A2C;      /* Secondary - bronze */
  --cr-text: #4C4C4C;           /* Body text */
  --cr-accent: #5FA9B5;         /* Accent - light teal */
  --cr-gold: #E2A95B;           /* Light gold - stars */
  --cr-cream: #E8D8C3;          /* Soft glow cream - section bg */
  --cr-teal-dark: #2F6F78;      /* Deep teal accent - buttons */
  --cr-black: #000000;
  --cr-white: #FFFFFF;

  --cr-radius: 16px;
  --cr-shadow: 0 8px 24px rgba(15, 15, 15, 0.08);

  position: relative;
  padding: 48px 24px 90px;
  background: var(--cr-cream);
  border-radius: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* ---------------- SLIDER ---------------- */
.cr-slider-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.cr-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.cr-review-card {
  background: var(--cr-white);
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow);
  padding: 24px;
  flex: 0 0 calc(33.333% - 14px);
  min-width: 280px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(196, 122, 44, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cr-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 15, 15, 0.14);
  border-color: var(--cr-accent);
}

.cr-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cr-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cr-gold);
  flex-shrink: 0;
}

.cr-reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cr-reviewer-name {
  font-weight: 600;
  color: var(--cr-primary);
  font-size: 15px;
}

.cr-stars {
  color: var(--cr-gold);
  font-size: 14px;
  letter-spacing: 1px;
}

.cr-review-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cr-primary);
}

.cr-review-desc {
  margin: 0 0 14px;
  color: var(--cr-text);
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
}

.cr-review-date {
  font-size: 12px;
  color: var(--cr-secondary);
}

.cr-no-reviews {
  text-align: center;
  color: var(--cr-text);
  padding: 40px 0;
}

/* ---------------- SLIDER NAV ARROWS ---------------- */
.cr-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.cr-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--cr-white);
  box-shadow: var(--cr-shadow);
  color: var(--cr-teal-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cr-arrow:hover {
  background: var(--cr-teal-dark);
  color: var(--cr-white);
  transform: scale(1.06);
}

/* ---------------- FLOATING "WRITE A REVIEW" BUTTON ---------------- */
.cr-write-review-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: linear-gradient(135deg, var(--cr-teal-dark), var(--cr-accent));
  color: var(--cr-white);
  border: none;
  padding: 13px 22px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(47, 111, 120, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 5;
}

.cr-write-review-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(47, 111, 120, 0.45);
}

/* ---------------- MODAL ---------------- */
.cr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(3px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cr-modal-overlay.cr-active {
  display: flex;
}

.cr-modal {
  background: var(--cr-white);
  width: 100%;
  max-width: 480px;
  border-radius: 18px;
  padding: 32px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: crModalIn 0.25s ease;
  font-family: 'Inter', sans-serif;
}

@keyframes crModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cr-modal h3 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cr-primary);
}

.cr-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--cr-text);
  cursor: pointer;
}

.cr-modal-close:hover {
  color: var(--cr-primary);
}

.cr-form-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.cr-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-primary);
  margin-bottom: 6px;
}

.cr-form-row small {
  color: var(--cr-text);
  font-size: 12px;
  margin-top: 4px;
}

.cr-form-row input[type="text"],
.cr-form-row input[type="email"],
.cr-form-row textarea,
.cr-form-row input[type="file"] {
  border: 1px solid var(--cr-cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--cr-primary);
  background: #FBF8F3;
  outline: none;
  transition: border-color 0.2s ease;
}

.cr-form-row input:focus,
.cr-form-row textarea:focus {
  border-color: var(--cr-accent);
}

.cr-star-picker {
  font-size: 26px;
  color: var(--cr-cream);
  cursor: pointer;
  letter-spacing: 4px;
}

.cr-star-picker span {
  transition: color 0.15s ease;
}

.cr-star-picker span.cr-star-active {
  color: var(--cr-gold);
}

.cr-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--cr-teal-dark), var(--cr-accent));
  color: var(--cr-white);
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s ease;
}

.cr-submit-btn:hover {
  opacity: 0.92;
}

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

.cr-form-message {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.cr-form-message.cr-success { color: var(--cr-teal-dark); }
.cr-form-message.cr-error   { color: #C0392B; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .cr-review-card { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 600px) {
  .cr-review-card { flex: 0 0 100%; }
  .cr-write-review-btn {
    left: 16px;
    bottom: 16px;
    padding: 11px 18px;
    font-size: 13px;
  }
  .cr-reviews-section { padding: 32px 16px 80px; }
}