/* ============================================
   Carely.id — Base Styles
   Semua style dari inline HTML dipindahkan ke sini
   ============================================ */

/* ===== Global ===== */
body { background-color: #F6F3EE; }

/* ===== Colors ===== */
.text-dark-custom { color: #2F2F2F; }
.text-green { color: #A8BFA3; }
.text-coral { color: #E07A5F; }
.text-purple { color: #B8A1E3; }
.text-star { color: #E07A5F; }

/* ===== Buttons ===== */
.btn-sophie { background-color: #B8A1E3; color: #fff; }
.btn-sophie:hover { background-color: #a68dd6; color: #fff; }
.btn-green { background-color: #A8BFA3; color: #fff; }
.btn-green:hover { background-color: #96b090; color: #fff; }
.btn-green:disabled { background-color: #A8BFA3; opacity: 0.5; }
.btn-radius { border-radius: 12px; }
.btn-pill-sophie { background-color: rgba(184,161,227,0.1); color: #B8A1E3; }
.btn-pill-green { background-color: rgba(168,191,163,0.1); color: #A8BFA3; }

/* ===== Layout ===== */
.page-centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.page-chat { height: 100%; margin: 0; display: flex; flex-direction: column; }
.container-narrow { max-width: 450px; }
.container-medium { max-width: 700px; }
.container-content { max-width: 768px; }
.container-wide { max-width: 900px; }
.lead-narrow { max-width: 600px; }
.chat-max { max-width: 80%; }

/* ===== Header ===== */
.header-blur { backdrop-filter: blur(12px); }
.header-logo { height: 36px; }
.header-logo-sm { height: 28px; }
.header-logo-md { height: 30px; }

/* ===== Logos ===== */
.logo-register { height: 70px; }
.logo-login { height: 60px; }

/* ===== Titles ===== */
.register-title { font-size: 1.8rem; }

/* ===== SOPHIE Avatars ===== */
.sophie-avatar {
  width: 120px; height: 120px;
  background: linear-gradient(135deg, #B8A1E3, #c4b5d9, #B8A1E3);
  box-shadow: 0 0 40px rgba(184,161,227,0.4);
}
.sophie-avatar-register {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, #B8A1E3, #c4b5d9, #B8A1E3);
  box-shadow: 0 0 40px rgba(184,161,227,0.4);
}
.sophie-avatar-sm {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #B8A1E3, #c4b5d9);
}

/* ===== Background Colors ===== */
.bg-warm { background-color: #F6F3EE; }
.bg-purple-light { background-color: rgba(184,161,227,0.15); }
.bg-purple-faint { background-color: rgba(184,161,227,0.1); }
.bg-purple-subtle { background-color: rgba(184,161,227,0.05); }
.bg-green-light { background-color: rgba(168,191,163,0.15); }
.bg-green-faint { background-color: rgba(168,191,163,0.1); }
.bg-green-subtle { background-color: rgba(168,191,163,0.05); }
.bg-coral-light { background-color: rgba(224,122,95,0.15); }
.bg-coral-faint { background-color: rgba(224,122,95,0.1); }
.bg-peach-faint { background-color: rgba(232,149,107,0.1); }

/* ===== Gradients ===== */
.bg-gradient-card { background: linear-gradient(135deg, rgba(168,191,163,0.2), rgba(184,161,227,0.2)); }
.bg-gradient-card-green { background: linear-gradient(135deg, rgba(168,191,163,0.2), rgba(168,191,163,0.1)); }
.bg-gradient-summary { background: linear-gradient(135deg, rgba(168,191,163,0.05), rgba(184,161,227,0.05)); }
.bg-gradient-cta { background: linear-gradient(135deg, rgba(184,161,227,0.15), rgba(168,191,163,0.15), rgba(224,122,95,0.1)); }
.bg-gradient-steps { background: linear-gradient(135deg, rgba(184,161,227,0.1), rgba(168,191,163,0.1)); }
.bg-gradient-video { background: linear-gradient(135deg, rgba(168,191,163,0.1), rgba(184,161,227,0.1)); }

/* ===== Badge ===== */
.badge-sophie { background-color: rgba(184,161,227,0.1); color: #B8A1E3; }
.badge-green { background-color: rgba(168,191,163,0.1); color: #A8BFA3; }
.badge-rating { background-color: rgba(224,122,95,0.1); color: #2F2F2F; }

/* ===== Icon Boxes ===== */
.icon-box { width: 48px; height: 48px; }
.icon-box-sm { width: 40px; height: 40px; }
.icon-box-lg { width: 64px; height: 64px; }
.icon-box-payment { width: 44px; height: 44px; background-color: #F6F3EE; }

/* ===== Profile / Card Images ===== */
.profile-image { width: 120px; height: 120px; font-size: 4rem; }
.profile-image-card { width: 56px; height: 56px; font-size: 2rem; }
.service-card-image { height: 200px; font-size: 5rem; }
.emoji-icon-sm { font-size: 1.5rem; }

/* ===== Video ===== */
.video-placeholder { height: 250px; }
.play-btn { width: 64px; height: 64px; cursor: pointer; }
.play-icon-offset { margin-left: 4px; }

/* ===== Chat ===== */
.sophie-bubble { background-color: rgba(184,161,227,0.1); }
.user-bubble { background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.user-avatar-sm { width: 36px; height: 36px; background-color: #A8BFA3; }
.chat-area { flex: 1; overflow-y: auto; }
.chat-timestamp { font-size: 0.7rem; }
.chat-disclaimer { font-size: 0.7rem; }
.chat-input-radius { border-radius: 12px 0 0 12px; }
.chat-send-radius { border-radius: 0 12px 12px 0; }

/* ===== Quick Reply ===== */
.quick-reply { border-color: rgba(168,191,163,0.3) !important; }
.quick-reply:hover { border-color: #A8BFA3 !important; background-color: rgba(168,191,163,0.05); }

/* ===== Booking Steps ===== */
.step-circle { width: 36px; height: 36px; font-size: 14px; }
.step-circle.active { background-color: #A8BFA3 !important; }
.step-circle.done { background-color: #A8BFA3 !important; }
.step-inactive { background-color: #E8E4DE; }
.progress-track { height: 4px; background-color: rgba(0,0,0,0.05); border-radius: 2px; }
.progress-fill { height: 100%; width: 0%; background-color: #A8BFA3; border-radius: 2px; transition: width 0.3s; }
.time-slot { cursor: pointer; }
.time-slot.selected { border-color: #A8BFA3 !important; background-color: rgba(168,191,163,0.1) !important; color: #A8BFA3 !important; }
.payment-option { cursor: pointer; }
.payment-option.selected { border-color: #A8BFA3 !important; background-color: rgba(168,191,163,0.1) !important; }
.summary-border { border-color: rgba(168,191,163,0.2); }
.summary-card { border: 1px solid rgba(168,191,163,0.2); }

/* ===== Success ===== */
.success-icon {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, #A8BFA3, rgba(168,191,163,0.6));
  box-shadow: 0 0 40px rgba(168,191,163,0.3);
}
.step-number {
  width: 24px; height: 24px;
  background-color: #A8BFA3;
  font-size: 0.7rem;
}

/* ===== Reviews ===== */
.review-avatar { width: 40px; height: 40px; }
.review-avatar-green { background-color: #A8BFA3; }
.review-avatar-purple { background-color: #B8A1E3; }
.review-avatar-peach { background-color: #E8956B; }
.review-star { font-size: 0.7rem; color: #E07A5F; }
.review-star-empty { font-size: 0.7rem; color: #E07A5F; }
.progress-rating { height: 8px; }
.progress-bar-green { background-color: #A8BFA3; }
.rating-label { width: 18px; }
.rating-count { width: 24px; }

/* ===== Step Number Display (How It Works) ===== */
.step-number-display { color: rgba(47,47,47,0.1); }

/* ===== Nav Pills ===== */
.nav-pills .nav-link.active { background-color: #A8BFA3 !important; color: #fff !important; }
.nav-pills .nav-link { color: #6B6B6B; }

/* ===== Link Colors ===== */
.link-green { color: #A8BFA3; }
.link-green:hover { color: #96b090; }