:root{
  --black:#0b1220;
  --white:#ffffff;
  --muted:rgba(11,18,32,0.06);
  --accent:#0a58ca;
  --max-width:1200px;
  --glass: rgba(255,255,255,0.06);
  --accent-2: #25D366; /* whatsapp green */
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background:var(--white);
  color:var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;


  /* Fixed background image for entire body */
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* PRELOADER */
.preloader{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:var(--white)}
.preloader-inner{width:110px;height:110px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.preloader-k{font-weight:900;font-size:48px;letter-spacing:2px;display:inline-block;animation:preloader-rot 1.6s linear infinite;transform-origin:center}
@keyframes preloader-rot{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;z-index:110;background:linear-gradient(180deg, rgba(7,33,70,0.92), rgba(2,6,23,0.6));color:var(--white);backdrop-filter:blur(6px);padding:10px 0}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max-width);margin:0 auto;padding:0 16px}
.brand-logo{height:56px;display:block}
.brand-title{font-weight:800}
.brand-sub{opacity:0.9;color:rgba(255,255,255,0.9)}

/* Nav */
.main-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav a{display:inline-block;padding:8px 12px;border-radius:8px;color:var(--white);font-weight:600;text-decoration:none;position:relative}
.main-nav a:hover{background:rgba(255,255,255,0.04)}

/* Underline for active nav (animated) */
.main-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:3px;border-radius:6px;background:transparent;transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.9,.2,1),background .2s}
.main-nav a.active::after{transform:scaleX(1);background:var(--accent)}
@media(max-width:720px){ .main-nav a::after{display:none} }

/* Header controls */
.header-controls{display:flex;align-items:center;gap:8px}
.nav-search{position:relative;display:flex;align-items:center}
.nav-search input{width:220px;padding:6px 36px 6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:#fff;outline:none}
.nav-search .search-btn{position:absolute;right:4px;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#fff}
@media(max-width:900px){ .nav-search input{width:140px} }
@media(max-width:720px){ .nav-search{display:none} }

/* Social icons in header */
.social-inline .social-icon{color:#fff;text-decoration:none;margin-right:6px;padding:8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:transform .28s, box-shadow .28s}
.social-inline .social-icon i{font-size:18px}
.social-inline .social-icon:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(2,6,23,0.12)}

/* Theme toggle */
.theme-toggle{width:56px;height:32px;border-radius:999px;border:none;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));display:inline-flex;align-items:center;padding:4px;position:relative;cursor:pointer;box-shadow:0 6px 18px rgba(2,6,23,0.08)}
.theme-toggle .toggle-circle{width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(2,6,23,0.12);transform:translateX(0);transition:transform .36s cubic-bezier(.2,.9,.2,1), background .3s}
[data-theme="dark"] .theme-toggle .toggle-circle{background:#0b1220;transform:translateX(24px)}

/* Hamburger Menu */
.hamburger-menu{display:none;flex-direction:column;gap:5px;background:transparent;border:none;padding:8px;cursor:pointer;z-index:120}
.hamburger-menu span{width:28px;height:3px;background:#fff;border-radius:3px;transition:all 0.3s ease;display:block}
.hamburger-menu.active span:nth-child(1){transform:rotate(45deg) translate(8px, 8px)}
.hamburger-menu.active span:nth-child(2){opacity:0}
.hamburger-menu.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}

/* Mobile menu active state - MUST be outside media query */
.main-nav.active{max-height:400px!important;padding:20px 0!important}

@media(max-width:720px){
  .hamburger-menu{display:flex}
  .main-nav{position:fixed;top:86px;left:0;right:0;background:rgba(7,33,70,0.98);backdrop-filter:blur(10px);max-height:0;overflow:hidden;transition:max-height 0.3s ease;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
  .main-nav ul{flex-direction:column;width:100%;gap:0}
  .main-nav ul li{width:100%;border-bottom:1px solid rgba(255,255,255,0.1)}
  .main-nav ul li:last-child{border-bottom:none}
  .main-nav a{display:block;width:100%;padding:16px 24px;border-radius:0}
  .main-nav a:hover{background:rgba(255,255,255,0.08)}
}

/* HERO */
.hero {
    height: 100vh;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 86px;
    background: transparent;
}

/* Hero background image - REMOVED (now on body) */
/* .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.45);
    z-index: -2;
} */

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,33,70,0.6), rgba(0,0,0,0.4));
    z-index: -1;
}

.hero-inner {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    max-width: 980px;
    padding: 20px;
}
.hero-logo{height:120px;width:auto;margin-bottom:14px;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.55))}
.hero h1{font-size:clamp(28px,6vw,52px);margin:0 0 8px;font-weight:800}
.lead{opacity:0.95}
.btn-cta{border-radius:10px;padding:10px 18px;font-weight:700}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.3);color:var(--white)}

/* Main sections */
.section{padding:56px 16px; background: rgba(255, 255, 255, 0.95); position: relative;}
.bg-light{background: rgba(247, 248, 251, 0.95) !important;}

/* Cards */
.card-cat{background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);}
.model-card img{width:100%;height:auto;min-height:420px;max-height:650px;object-fit:cover;display:block;background:#f8f9fa}
.card-cat h3{margin-top:0}
.collection-title{font-size:1.05rem;margin:0}

/* availability badge */
.availability{
  position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:#fff;box-shadow:0 6px 18px rgba(2,6,23,0.08)
}
.availability.available{background:var(--accent-2)}
.availability.sold{background:#6c6f76}

/* Cloth overlay with status and likes */
.cloth-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px;
  z-index: 5;
  pointer-events: none;
}

.cloth-overlay > * {
  pointer-events: auto;
}

/* Status badge */
.status-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #fff;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  min-width: fit-content;
  align-self: flex-start;
  height: fit-content;
}

.status-badge.available {
  background: #2ecc71;
}

.status-badge.sold {
  background: #e74c3c;
}

/* Heart like button */
.likes-panel {
  position: relative;
}

.like-btn {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0;
  position: relative;
}

.like-btn:hover {
  transform: scale(1.1);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.like-btn:active {
  transform: scale(0.9);
}

.like-btn span:first-child {
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 1;
}

.like-btn.liking span:first-child {
  animation: pulse 0.4s ease-in-out;
}

.like-btn .likes-count {
  font-size: 9px;
  font-weight: 700;
  color: #333;
  margin-top: 2px;
  line-height: 1;
}

/* WhatsApp floating button (small circle) */
.btn-floating{border-radius:999px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;box-shadow:0 10px 24px rgba(2,6,23,0.08);cursor:pointer}
.btn-wh{background:var(--accent-2);color:#fff}
.btn-floating i{font-size:18px}

/* Ensure order button doesn't overlap pagination */
.swiper { position: relative; padding-bottom: 34px; /* space for pagination */ }
.custom-nav{color:var(--accent);top:45%;transform:translateY(-50%);background:rgba(255,255,255,0.95);width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.swiper-button-prev.custom-nav{left:6px}
.swiper-button-next.custom-nav{right:6px}
.swiper-pagination{bottom:8px!important}

/* More button */
.more-btn{font-size:0.82rem}

/* Ratings summary */
.ratings-summary .rating-value{font-weight:800;font-size:1.05rem;margin-right:8px}
.rating-stars{color:goldenrod}

/* reviews dashboard */
.reviews-dashboard .big-rating{display:flex;align-items:center;gap:12px}
.rating-number{font-size:28px;font-weight:800}
.rating-stars{font-size:18px;color:#ffb400}

/* Footer */
.site-footer{background: rgba(7, 20, 40, 0.95); color:#fff; backdrop-filter: blur(10px);}
.footer-social .social-icon{color:#fff;text-decoration:none;margin-left:10px;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.footer-social .social-icon i{margin-right:8px}
.social-username{opacity:0.9}

/* Floating animation for social icons */
.social-icon{transition:transform .28s,box-shadow .28s}
.social-icon:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.12)}

/* Responsive */
@media(min-width:720px){
  .nav-wrap{padding:6px 0}
  .model-card img{min-height:500px;max-height:700px}
}
@media(max-width:720px){
  .hero{padding-top:96px;height:auto}
  .nav-wrap{gap:12px}
  .model-card img{min-height:350px;max-height:550px}
  .nav-search{display:none}
}
@media(max-width:480px){
  .model-card img{min-height:300px;max-height:450px}
}

/* Heart pulse animation */
@keyframes pulse {
  0% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.4); 
  }
  100% { 
    transform: scale(1); 
  }
}

/* Dark theme */
[data-theme="dark"]{
  --black:#ffffff;
  --white:#0b1220;
  --muted:rgba(255,255,255,0.06);
  --accent:#7ec0ff;
}
[data-theme="dark"] body{
  color:#ffffff;
  /* Keep the fixed background image, add dark overlay */
  background-image: linear-gradient(rgba(7, 17, 34, 0.85), rgba(7, 17, 34, 0.85)), url('images/hero-bg.jpg');
}
[data-theme="dark"] .section{background: rgba(7, 20, 40, 0.92);}
[data-theme="dark"] .bg-light{background: rgba(11, 18, 32, 0.90) !important;}
[data-theme="dark"] .site-footer{background: rgba(2, 6, 10, 0.95);}
[data-theme="dark"] .card-cat{background: rgba(7, 20, 40, 0.95); color:#ffffff; backdrop-filter: blur(10px);}

/* Dark mode: Force white text for ALL content */
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .nav-link {
  color: #ffffff !important;
}

[data-theme="dark"] .brand-title,
[data-theme="dark"] .brand-sub {
  color: #ffffff !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] strong,
[data-theme="dark"] div {
  color: #ffffff !important;
}

[data-theme="dark"] .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .collection-title,
[data-theme="dark"] .card-cat h3,
[data-theme="dark"] .card-cat p,
[data-theme="dark"] .card-cat strong,
[data-theme="dark"] .card-cat .text-muted {
  color: #ffffff !important;
}

[data-theme="dark"] .cloth-item-wrapper strong,
[data-theme="dark"] .cloth-item-wrapper .text-muted,
[data-theme="dark"] .p-2 strong,
[data-theme="dark"] .p-2 .text-muted {
  color: #ffffff !important;
}

/* Dark mode: Make Contact Us button white */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-outline-secondary {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.collection-card {
  width: 100%;
  display: block;
  margin-bottom: 2rem; /* adds spacing between categories */
}

/* ===================================
   SITE-WIDE RATING & REVIEW SYSTEM (Inline Horizontal Layout)
   =================================== */

/* Rating Section Container - Compact */
.rating-section-compact {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .rating-section-compact {
  background: rgba(7, 20, 40, 0.95);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.rating-section-compact h5 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--black);
}

.rating-section-compact h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--black);
}

/* Average Rating Display - Inline Horizontal */
.average-rating-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  padding: 0.5rem;
  background: rgba(46, 204, 113, 0.1);
  border-radius: 6px;
}

.average-rating-inline .rating-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #f39c12;
}

.average-rating-inline .rating-stars {
  font-size: 1.2rem;
  color: #f39c12;
}

.rating-count-inline {
  font-size: 0.75rem;
  color: #7f8c8d;
  margin-bottom: 0.5rem;
}

/* Star Rating Input - Compact */
.star-rating-input {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.star-rating-input .star {
  font-size: 1.5rem;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
}

.star-rating-input .star:hover,
.star-rating-input .star.active {
  color: #f39c12;
  transform: scale(1.15);
}

.star-rating-input .star:hover ~ .star {
  color: #ddd;
}

/* Thank You Message - Compact */
.thank-you-message {
  display: none;
  padding: 0.5rem 0.8rem;
  background: #2ecc71;
  color: white;
  border-radius: 6px;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  animation: slideDown 0.3s ease;
}

.thank-you-message.show {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Review Form - Inline Horizontal */
.review-form-inline {
  margin-bottom: 0;
}

.review-form-inline .form-control-sm {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.submit-btn-inline {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn-inline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Recent Reviews - Inline Horizontal Pills */
.recent-reviews-inline {
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .recent-reviews-inline {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reviews-scroll {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scrollbar-width: thin;
}

.reviews-scroll::-webkit-scrollbar {
  height: 6px;
}

.reviews-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

[data-theme="dark"] .reviews-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.review-pill {
  display: inline-block;
  background: rgba(102, 126, 234, 0.1);
  color: var(--black);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  white-space: nowrap;
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.2s ease;
}

.review-pill:hover {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.review-pill strong {
  color: #667eea;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .rating-section-compact h5 {
    font-size: 1rem;
  }
  
  .average-rating-inline .rating-number {
    font-size: 1.5rem;
  }
  
  .average-rating-inline .rating-stars {
    font-size: 1rem;
  }
  
  .star-rating-input .star {
    font-size: 1.2rem;
  }
  
  .review-pill {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }
}


/* ===================================
   LEGACY STYLES (Keep for backward compatibility if needed)
   =================================== */

.recent-reviews {
  margin-top: 2rem;
}

.recent-reviews h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--black);
}

.review-card {
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid #667eea;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .review-card {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: #7ec0ff;
}

.review-card .reviewer-name {
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.3rem;
}

[data-theme="dark"] .review-card .reviewer-name {
  color: #7ec0ff;
}

.review-card .review-date {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-bottom: 0.5rem;
}

.review-card .review-text {
  color: var(--black);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .rating-section {
    padding: 1.5rem;
  }
  
  .average-rating {
    flex-direction: column;
    text-align: center;
  }
  
  .review-modal-content {
    padding: 1.5rem;
  }
}

/* ===================================
   COMPACT RATING & REVIEW STYLES
   =================================== */

.rating-section-compact {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .rating-section-compact {
  background: rgba(7, 20, 40, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rating-section-compact h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--black);
}

/* Compact Average Rating */
.average-rating-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.average-rating-compact .rating-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #f39c12;
}

.average-rating-compact .rating-stars {
  font-size: 1.2rem;
  color: #f39c12;
}

.average-rating-compact .rating-count {
  font-size: 0.75rem;
  color: #7f8c8d;
}

/* Compact Leave Review Button */
.leave-review-btn-compact {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.leave-review-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Recent Reviews Compact */
.recent-reviews-compact {
  max-height: 200px;
  overflow-y: auto;
}

.review-card-compact {
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid #667eea;
  border-radius: 6px;
  padding: 0.6rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .review-card-compact {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: #7ec0ff;
}

.review-card-compact .reviewer-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #667eea;
  margin-bottom: 0.2rem;
}

[data-theme="dark"] .review-card-compact .reviewer-name {
  color: #7ec0ff;
}

.review-card-compact .review-text {
  font-size: 0.8rem;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.review-card-compact .review-date {
  font-size: 0.7rem;
  color: #7f8c8d;
}

/* Review Form Section (Inline) */
.review-form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(102, 126, 234, 0.2);
}

.review-form-compact {
  margin-top: 0.8rem;
}

.submit-btn-compact {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

/* Responsive for compact version */
@media (max-width: 768px) {
  .rating-section-compact {
    padding: 1rem;
  }
  
  .recent-reviews-compact {
    max-height: 150px;
  }
  
  .rating-section-compact .row > div {
    margin-bottom: 1rem;
  }
}