/* ============================================
   DK Global Support — Custom Styles
   Premium Polish v3
   ============================================ */

/* --- Design Tokens --- */
:root {
  --navy:        #1e3a5f;
  --navy-light:  #2d5a8e;
  --navy-dark:   #0a1929;
  --gold:        #c8a45e;
  --gold-light:  #d4b366;
  --gold-dark:   #a8843e;
  --cream:       #faf8f5;
  --cream-dark:  #f2ede4;
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-premium:cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Base resets & smoothing --- */
html  { scroll-behavior: smooth; }
body  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a     { transition: color 0.2s var(--ease-out); }
*     { box-sizing: border-box; }

/* --- Background utilities --- */
.bg-cream      { background-color: #faf8f5; }
.bg-cream-dark { background-color: #f2ede4; }

/* --- Gradients --- */
.gradient-premium { background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #c8a45e 100%); }
.gradient-navy    { background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%); }
.gradient-gold    { background: linear-gradient(135deg, #c8a45e 0%, #d4b366 100%); }
.gradient-hero    { background: linear-gradient(160deg, #050a16 0%, #091829 22%, #0f2240 44%, #162e52 66%, #1b3660 84%, #1e3a6a 100%); }

/* ─── Layout ─────────────────────────────────────── */
.container-wide  { max-width: 1280px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.container-tight { max-width: 740px;  margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.section-padding { padding-top: 7rem; padding-bottom: 7rem; }

@media (min-width: 640px) {
  .container-wide, .container-tight { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (max-width: 767px) {
  .section-padding { padding-top: 4.75rem; padding-bottom: 4.75rem; }
}

/* ─── Typography utilities ───────────────────────── */
.section-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.165em;
  text-transform: uppercase;
  color: #c8a45e;
  margin-bottom: 0.75rem;
}

.gold-sep {
  display: block;
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, #c8a45e, #d4b366 60%, transparent);
  border-radius: 9999px;
  margin-top: 1rem;
}
.gold-sep-center { margin-left: auto; margin-right: auto; }

/* ─── Buttons ─────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem; font-weight: 700; color: #0c1e35;
  background: linear-gradient(135deg, #c8a45e, #d4b366);
  box-shadow: 0 4px 20px rgba(200,164,94,0.38);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
  text-decoration: none; letter-spacing: -0.01em;
  white-space: nowrap;
}
.btn-gold:hover  { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200,164,94,0.48); }
.btn-gold:active { transform: translateY(0);    box-shadow: 0 4px 16px rgba(200,164,94,0.35); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem; font-weight: 500; color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn-ghost:hover  { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.34); color: #fff; transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }

.btn-navy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
  box-shadow: 0 4px 18px rgba(30,58,95,0.24);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn-navy:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30,58,95,0.32); }
.btn-navy:active { transform: translateY(0);    box-shadow: 0 4px 14px rgba(30,58,95,0.20); }

/* ─── Cards & surfaces ────────────────────────────── */
.transition-card {
  transition:
    transform 0.28s var(--ease-premium),
    box-shadow 0.28s var(--ease-premium),
    border-color 0.22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
}
.transition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(30,58,95,0.09), 0 6px 16px rgba(30,58,95,0.05);
}

.testimonial-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1.25rem;
  padding: 2.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(30,58,95,0.09); }

/* ─── Avatar ──────────────────────────────────────── */
.avatar-circle {
  width: 7rem; height: 7rem; border-radius: 50%;
  background: linear-gradient(140deg, #1e3a5f 0%, #2d5a8e 55%, #c8a45e 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem; font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: 0 10px 32px rgba(30,58,95,0.28);
}

/* ─── How it works ────────────────────────────────── */
.hiw-number {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.125rem; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(135deg, #1e3a5f, #2d5a8e); color: #fff;
  box-shadow: 0 6px 20px rgba(30,58,95,0.28);
}

/* ─── Form inputs (premium) ───────────────────────── */
.input-field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1.5px solid #e5e7eb;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}
.input-field::placeholder { color: #9ca3af; }
.input-field:focus {
  border-color: #2d5a8e;
  box-shadow: 0 0 0 3px rgba(45,90,142,0.1);
}
.input-field:hover:not(:focus) { border-color: #c8d5e5; }

/* ─── Calendar ────────────────────────────────────── */
.calendar-day {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.calendar-day:hover:not(.calendar-day-disabled):not(.calendar-day-selected) { background-color: #eff6ff; color: #1e3a5f; }
.calendar-day-selected { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(30,58,95,0.35); }
.calendar-day-disabled { color: #d1d5db; cursor: not-allowed; font-weight: 400; }
.calendar-day-today:not(.calendar-day-selected) { border: 2px solid #c8a45e; color: #a8843e; font-weight: 600; }

/* ─── Time slots ──────────────────────────────────── */
.slot-btn {
  padding: 0.5rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.625rem;
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  background: #fff; color: #374151;
}
.slot-btn:hover { border-color: #1e3a5f; background: #f0f4f9; color: #1e3a5f; }
.slot-btn-selected { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); color: #fff; border-color: #1e3a5f; box-shadow: 0 2px 8px rgba(30,58,95,0.3); }

/* ─── Booking steps ───────────────────────────────── */
.cart-badge { position: absolute; top: -0.375rem; right: -0.375rem; width: 1.25rem; height: 1.25rem; background: linear-gradient(135deg, #c8a45e, #d4b366); color: #0f2439; font-size: 0.625rem; font-weight: 700; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }

.step-circle { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; transition: background 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; }
.step-active  { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); color: #fff; box-shadow: 0 4px 12px rgba(30,58,95,0.35); }
.step-done    { background: linear-gradient(135deg, #c8a45e, #d4b366); color: #0f2439; }
.step-pending { background: #f1f5f9; color: #94a3b8; border: 2px solid #e2e8f0; }

/* ─── Toast notifications ─────────────────────────── */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.875rem 1.25rem; border-radius: 0.875rem; font-size: 0.875rem; font-weight: 500; color: #fff; z-index: 9999; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 8px 28px rgba(0,0,0,0.14); max-width: 22rem; }
.toast.show     { opacity: 1; transform: translateY(0); }
.toast-success  { background: linear-gradient(135deg, #059669, #10b981); }
.toast-error    { background: linear-gradient(135deg, #dc2626, #ef4444); }
.toast-info     { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); }

/* ─── Loading ─────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

/* ─── FAQ accordion ───────────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer.open { max-height: 700px; }

.faq-chevron { transition: transform 0.3s var(--ease-out); }
.faq-chevron.open { transform: rotate(180deg); }

/* ─── Admin sidebar ───────────────────────────────── */
.sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; font-size: 0.875rem; color: #64748b; transition: background-color 0.15s ease, color 0.15s ease; }
.sidebar-link:hover  { background: #f8fafc; color: #1e3a5f; }
.sidebar-link.active { background: linear-gradient(135deg, #1e3a5f, #2d5a8e); color: #fff; }