@charset "UTF-8";

/* ===================================
   Google Reviews Section
=================================== */

.home-reviews{
  padding:80px 0;
  position:relative;
}

.home-reviews .section-title{
  text-align:center;
  margin-bottom:40px;
}

.home-reviews .section-title h2{
  color:#fff3c2;
}

.home-reviews .section-title p{
  color:#cfc3a8;
}

/* ===================================
   Review Carousel
=================================== */

.review-carousel{
  display:flex;
  gap:24px;
  overflow:hidden;
  scroll-behavior:smooth;
}

.review-carousel::-webkit-scrollbar{
  display:none;
}

/* ===================================
   Review Card
=================================== */

.review-card{

  position:relative;

  min-width:400px;
  flex:0 0 400px;

  padding:28px;

  border-radius:32px;

  overflow:hidden;

  background:
  rgba(255,255,255,.06);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border:
  1px solid rgba(255,255,255,.12);

  box-shadow:
  0 20px 70px rgba(0,0,0,.35);

  transition:
  transform .35s ease,
  box-shadow .35s ease,
  border-color .35s ease;
}

.review-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  border-color:
  rgba(255,240,184,.45);

  box-shadow:
  0 30px 90px rgba(0,0,0,.42),
  0 0 40px rgba(216,181,109,.12);
}

.review-card::before{

  content:"";

  position:absolute;

  top:-80px;
  right:-80px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(216,181,109,.25),
    transparent
  );
}

/* ===================================
   Review Image
=================================== */

.review-card img{
  width:100%;
  height:260px;

  object-fit:cover;

  border-radius:22px;

  margin-bottom:18px;
}

/* ===================================
   Review Meta
=================================== */

.review-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-bottom:12px;

  color:#f7df9b;

  font-size:14px;
  font-weight:800;
}

.review-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* ===================================
   Review Rating
=================================== */

.stars{
  color:#fff0b8;
  letter-spacing:.2em;
  font-size:18px;
  margin-bottom:12px;
}

.review-card h3{
  margin:0 0 12px;

  color:#fff3c2;

  font-size:24px;
  font-weight:900;
}

.review-card p{
  margin:0;

  color:#d6dbe3;

  line-height:1.9;
}

/* ===================================
   Review Badge Card
=================================== */

.review-badge-card{

  position:relative;

  min-height:360px;

  display:grid;
  place-items:center;

  padding:28px;

  border-radius:28px;

  text-align:center;

  border:
  1px solid rgba(216,181,109,.22);

  background:
  radial-gradient(
    circle at center,
    rgba(247,223,155,.18),
    transparent 54%
  ),
  linear-gradient(
    180deg,
    rgba(216,181,109,.12),
    rgba(255,255,255,.035)
  );
}

.review-badge-card::before{

  content:"★★★★★";

  display:block;

  color:#fff0b8;

  letter-spacing:.18em;

  font-size:24px;
  font-weight:950;

  margin-bottom:12px;
}

.review-badge-card strong{
  display:block;

  color:#fff3c2;

  font-family:
  "Noto Serif TC",
  "Noto Sans TC",
  serif;

  font-size:
  clamp(34px,5vw,56px);

  line-height:1.18;

  text-shadow:
  0 0 34px rgba(216,181,109,.28);
}

.review-badge-card span{
  display:block;

  margin-top:16px;

  color:#e8dcc2;

  line-height:1.85;

  font-weight:800;
}

/* ===================================
   Review Steps
=================================== */

.review-steps{
  display:grid;
  gap:14px;
  margin:22px 0;
}

.review-step{
  padding:16px 18px;

  border-radius:20px;

  border:
  1px solid rgba(216,181,109,.18);

  background:
  rgba(255,255,255,.045);

  color:#d5dde8;

  line-height:1.8;
}

.review-step b{
  color:#f7df9b;
}

.review-note{

  margin-top:14px;

  padding:14px 16px;

  border-radius:18px;

  border:
  1px dashed rgba(216,181,109,.34);

  background:
  rgba(216,181,109,.08);

  color:#cfc3a8;

  line-height:1.8;

  font-weight:850;
}

/* ===================================
   Mobile
=================================== */

@media(max-width:980px){

  .review-card{
    min-width:85%;
    flex:0 0 85%;
  }

}

@media(max-width:640px){

  .review-card{
    min-width:92vw;
    flex:0 0 92vw;
    padding:22px;
  }

  .review-card img{
    height:220px;
  }

  .review-badge-card{
    min-height:280px;
  }

  .review-card h3{
    font-size:20px;
  }

}