/* ============================================
   Carely.id — Vivid Calm Theme
   Warna hidup tapi tetap menenangkan & hangat
   Cocok untuk platform kesehatan mental

   Psikologi warna:
   - Sage green  → penyembuhan, pertumbuhan, keseimbangan
   - Soft purple → empati, intuisi, keamanan emosional
   - Warm peach  → kehangatan, optimisme, keterbukaan
   - Deep navy   → kepercayaan, profesionalisme
   - Warm cream  → kenyamanan, ruang aman
   ============================================ */

:root {
  --clr-green:        #5BA88C;
  --clr-green-hover:  #4A9579;
  --clr-green-soft:   #7CC4A6;
  --clr-green-light:  rgba(91, 168, 140, 0.10);
  --clr-green-glow:   rgba(91, 168, 140, 0.30);

  --clr-purple:       #9882C9;
  --clr-purple-hover: #8670B8;
  --clr-purple-soft:  #B5A3DB;
  --clr-purple-light: rgba(152, 130, 201, 0.10);
  --clr-purple-glow:  rgba(152, 130, 201, 0.35);

  --clr-peach:        #E8956B;
  --clr-peach-light:  rgba(232, 149, 107, 0.10);

  --clr-amber:        #E2A84B;

  --clr-dark:         #2C2C42;
  --clr-body:         #4A4A62;
  --clr-muted:        #7E7E96;
  --clr-bg:           #FAF8F5;
  --clr-bg-warm:      #F5F1EB;
  --clr-bg-card:      #FFFFFF;
  --clr-bg-input:     #F3F0EA;
  --clr-border:       rgba(0, 0, 0, 0.07);
}

/* ===== Body & Typography ===== */
body {
  background-color: var(--clr-bg) !important;
  color: var(--clr-body);
}

h1, h2, h3, h4, h5, h6,
.text-dark-custom,
.fw-semibold {
  color: var(--clr-dark) !important;
}

.text-muted {
  color: var(--clr-muted) !important;
}

/* ===== Purple (SOPHIE — empathy) ===== */
.btn-sophie {
  background: linear-gradient(135deg, var(--clr-purple), var(--clr-purple-soft)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--clr-purple-glow);
}

.btn-sophie:hover {
  background: linear-gradient(135deg, var(--clr-purple-hover), var(--clr-purple)) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(152, 130, 201, 0.45);
}

.sophie-avatar,
.sophie-avatar-sm {
  background: linear-gradient(135deg, var(--clr-purple), var(--clr-purple-soft), var(--clr-purple)) !important;
  box-shadow: 0 0 30px var(--clr-purple-glow) !important;
}

.sophie-bubble {
  background-color: var(--clr-purple-light) !important;
  border: 1px solid rgba(152, 130, 201, 0.08);
}

/* ===== Green (Primary Action — healing) ===== */
.btn-green {
  background: linear-gradient(135deg, var(--clr-green), var(--clr-green-soft)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--clr-green-glow);
}

.btn-green:hover {
  background: linear-gradient(135deg, var(--clr-green-hover), var(--clr-green)) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(91, 168, 140, 0.4);
}

.btn-green:disabled {
  background: linear-gradient(135deg, var(--clr-green), var(--clr-green-soft)) !important;
  opacity: 0.45;
  box-shadow: none;
}

.text-green {
  color: var(--clr-green) !important;
}

/* ===== Peach Accent (warmth) ===== */
.text-coral {
  color: var(--clr-peach) !important;
}

/* ===== Star Rating (warm amber) ===== */
.bi-star-fill {
  color: var(--clr-amber) !important;
}

/* ===== Nav Pills (Login Tabs) ===== */
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--clr-green), var(--clr-green-soft)) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px var(--clr-green-glow);
}

.nav-pills .nav-link:not(.active) {
  color: var(--clr-muted);
}

.nav-pills .nav-link:not(.active):hover {
  color: var(--clr-green);
  background-color: var(--clr-green-light);
}

/* ===== Cards ===== */
.card {
  background-color: var(--clr-bg-card);
  border: 1px solid var(--clr-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}

/* ===== Form Inputs ===== */
.form-control {
  background-color: var(--clr-bg-input) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-dark);
}

.form-control:focus {
  border-color: var(--clr-green) !important;
  box-shadow: 0 0 0 3px var(--clr-green-light) !important;
  background-color: #fff !important;
}

.form-control::placeholder {
  color: #A8A8BC;
}

.input-group-text {
  background-color: var(--clr-bg-input) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-muted);
}

.input-group:focus-within {
  box-shadow: 0 0 0 3px var(--clr-green-light) !important;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
  border-color: var(--clr-green) !important;
}

/* ===== Textarea ===== */
textarea.form-control:focus {
  border-color: var(--clr-green) !important;
  box-shadow: 0 0 0 3px var(--clr-green-light) !important;
  background-color: #fff !important;
}

/* ===== Time Slots ===== */
.time-slot {
  border-color: var(--clr-border) !important;
  color: var(--clr-body);
  background-color: var(--clr-bg-card);
}

.time-slot:hover {
  border-color: var(--clr-green) !important;
  color: var(--clr-green);
  background-color: var(--clr-green-light) !important;
}

.time-slot.selected {
  border-color: var(--clr-green) !important;
  background-color: var(--clr-green-light) !important;
  color: var(--clr-green) !important;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--clr-green-glow);
}

/* ===== Payment Options ===== */
.payment-option {
  border-color: var(--clr-border) !important;
}

.payment-option:hover {
  border-color: rgba(91, 168, 140, 0.35) !important;
  background-color: rgba(91, 168, 140, 0.03) !important;
}

.payment-option.selected {
  border-color: var(--clr-green) !important;
  background-color: var(--clr-green-light) !important;
  box-shadow: 0 2px 10px var(--clr-green-glow);
}

/* ===== Step Progress ===== */
.step-circle.active,
.step-circle.done {
  background-color: var(--clr-green) !important;
  box-shadow: 0 2px 10px var(--clr-green-glow);
}

/* ===== Success Icon ===== */
.success-icon {
  background: linear-gradient(135deg, var(--clr-green), var(--clr-green-soft)) !important;
  box-shadow: 0 0 35px var(--clr-green-glow) !important;
}

/* ===== Quick Reply Buttons ===== */
.quick-reply {
  border-color: rgba(91, 168, 140, 0.25) !important;
  color: var(--clr-body);
  background-color: var(--clr-bg-card);
}

.quick-reply:hover {
  border-color: var(--clr-green) !important;
  background-color: var(--clr-green-light) !important;
  color: var(--clr-green);
}

/* ===== User Chat ===== */
.user-bubble {
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--clr-border);
}

.user-avatar-sm {
  background-color: var(--clr-green) !important;
}

/* ===== Header ===== */
header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: var(--clr-border) !important;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }

/* ===== Text Selection ===== */
::selection {
  background-color: var(--clr-purple-light);
  color: var(--clr-dark);
}