/* ============================================================
   GOLOKA DHAM APP  –  STYLES
   10 Color Themes · 5 Fonts · Mobile-first PWA
   ============================================================ */

/* ---- GOOGLE FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Lato:wght@400;700&family=Playfair+Display:wght@400;700&family=Nunito:wght@400;600;700&display=swap');

/* ============================================================
   THEME DEFINITIONS  (CSS Custom Properties)
   ============================================================ */

/* 11 · Goloka Orange (saffron → deep blue — default) */
[data-theme="goloka-orange"] {
  --c-primary:      #C84B00;
  --c-primary-dk:   #8B2E00;
  --c-primary-lt:   #FF6B35;
  --c-accent:       #1a3a6e;
  --c-accent-hov:   #0f2349;
  --c-accent-txt:   #ffffff;
  --c-bg:           #fff8f0;
  --c-card:         #ffffff;
  --c-header-bg:    linear-gradient(135deg, #C84B00 0%, #FF6B35 40%, #1a3a6e 100%);
  --c-header-txt:   #ffffff;
  --c-nav-bg:       #C84B00;
  --c-nav-active:   #ffd700;
  --c-nav-txt:      rgba(255,255,255,0.75);
  --c-text:         #3a1a00;
  --c-text-muted:   #8a6050;
  --c-label:        #C84B00;
  --c-border:       #C84B00;
  --c-shadow:       rgba(200,75,0,0.16);
  --c-badge-bg:     #ffe8d6;
  --c-badge-txt:    #C84B00;
}

/* 1 · Ocean Blue (default – matches reference image) */
[data-theme="ocean-blue"] {
  --c-primary:      #1a3a6e;
  --c-primary-dk:   #0f2349;
  --c-primary-lt:   #2d5a9e;
  --c-accent:       #1e5c2e;
  --c-accent-hov:   #164421;
  --c-accent-txt:   #ffd700;
  --c-bg:           #eef4ff;
  --c-card:         #ffffff;
  --c-header-bg:    #d4e5f9;
  --c-header-txt:   #1a3a6e;
  --c-nav-bg:       #1a3a6e;
  --c-nav-active:   #ffd700;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #1a2744;
  --c-text-muted:   #6b7999;
  --c-label:        #1a3a6e;
  --c-border:       #1a3a6e;
  --c-shadow:       rgba(26,58,110,0.14);
  --c-badge-bg:     #dce8f8;
  --c-badge-txt:    #1a3a6e;
}

/* 2 · Forest Green */
[data-theme="forest-green"] {
  --c-primary:      #1b4332;
  --c-primary-dk:   #0f2a1f;
  --c-primary-lt:   #2d6a4f;
  --c-accent:       #e67e22;
  --c-accent-hov:   #ca6f1e;
  --c-accent-txt:   #ffffff;
  --c-bg:           #e8f5e9;
  --c-card:         #ffffff;
  --c-header-bg:    #c8e6c9;
  --c-header-txt:   #1b4332;
  --c-nav-bg:       #1b4332;
  --c-nav-active:   #a5d6a7;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #0c2a1e;
  --c-text-muted:   #5a7a68;
  --c-label:        #1b4332;
  --c-border:       #1b4332;
  --c-shadow:       rgba(27,67,50,0.14);
  --c-badge-bg:     #d4edda;
  --c-badge-txt:    #1b4332;
}

/* 3 · Royal Purple */
[data-theme="royal-purple"] {
  --c-primary:      #4a1c96;
  --c-primary-dk:   #2d0b67;
  --c-primary-lt:   #6a3bbf;
  --c-accent:       #e91e63;
  --c-accent-hov:   #c2185b;
  --c-accent-txt:   #ffffff;
  --c-bg:           #f3e5f5;
  --c-card:         #ffffff;
  --c-header-bg:    #e1bee7;
  --c-header-txt:   #4a1c96;
  --c-nav-bg:       #4a1c96;
  --c-nav-active:   #ce93d8;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #2d0b67;
  --c-text-muted:   #7a5a9a;
  --c-label:        #4a1c96;
  --c-border:       #4a1c96;
  --c-shadow:       rgba(74,28,150,0.14);
  --c-badge-bg:     #e8d5f5;
  --c-badge-txt:    #4a1c96;
}

/* 4 · Sunset Orange */
[data-theme="sunset-orange"] {
  --c-primary:      #bf360c;
  --c-primary-dk:   #870000;
  --c-primary-lt:   #e64a19;
  --c-accent:       #e65100;
  --c-accent-hov:   #bf360c;
  --c-accent-txt:   #ffffff;
  --c-bg:           #fff3e0;
  --c-card:         #ffffff;
  --c-header-bg:    #ffe0b2;
  --c-header-txt:   #bf360c;
  --c-nav-bg:       #bf360c;
  --c-nav-active:   #ffccbc;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #5a1800;
  --c-text-muted:   #8a5a44;
  --c-label:        #bf360c;
  --c-border:       #bf360c;
  --c-shadow:       rgba(191,54,12,0.14);
  --c-badge-bg:     #ffe8d6;
  --c-badge-txt:    #bf360c;
}

/* 5 · Rose Gold */
[data-theme="rose-gold"] {
  --c-primary:      #8b2252;
  --c-primary-dk:   #5d1537;
  --c-primary-lt:   #b5476e;
  --c-accent:       #c0392b;
  --c-accent-hov:   #96281b;
  --c-accent-txt:   #ffd700;
  --c-bg:           #fce4ec;
  --c-card:         #ffffff;
  --c-header-bg:    #f8bbd9;
  --c-header-txt:   #8b2252;
  --c-nav-bg:       #8b2252;
  --c-nav-active:   #f48fb1;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #5d1537;
  --c-text-muted:   #9a6a7a;
  --c-label:        #8b2252;
  --c-border:       #8b2252;
  --c-shadow:       rgba(139,34,82,0.14);
  --c-badge-bg:     #ffd6e7;
  --c-badge-txt:    #8b2252;
}

/* 6 · Midnight Dark */
[data-theme="midnight-dark"] {
  --c-primary:      #1a1a4e;
  --c-primary-dk:   #0d0d2b;
  --c-primary-lt:   #3a3a8e;
  --c-accent:       #e94560;
  --c-accent-hov:   #c73652;
  --c-accent-txt:   #ffffff;
  --c-bg:           #1a1a2e;
  --c-card:         #16213e;
  --c-header-bg:    #0f1b35;
  --c-header-txt:   #c8d0ff;
  --c-nav-bg:       #0d0d2b;
  --c-nav-active:   #e94560;
  --c-nav-txt:      rgba(200,208,255,0.60);
  --c-text:         #dde4ff;
  --c-text-muted:   #8890b8;
  --c-label:        #a0aaff;
  --c-border:       #3a3a8e;
  --c-shadow:       rgba(233,69,96,0.20);
  --c-badge-bg:     #222255;
  --c-badge-txt:    #a0aaff;
}

/* 7 · Crimson Red */
[data-theme="crimson-red"] {
  --c-primary:      #7f0000;
  --c-primary-dk:   #4a0000;
  --c-primary-lt:   #b71c1c;
  --c-accent:       #b8860b;
  --c-accent-hov:   #96700a;
  --c-accent-txt:   #ffffff;
  --c-bg:           #ffebee;
  --c-card:         #ffffff;
  --c-header-bg:    #ffcdd2;
  --c-header-txt:   #7f0000;
  --c-nav-bg:       #7f0000;
  --c-nav-active:   #ef9a9a;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #4a0000;
  --c-text-muted:   #8a5a5a;
  --c-label:        #7f0000;
  --c-border:       #7f0000;
  --c-shadow:       rgba(127,0,0,0.14);
  --c-badge-bg:     #ffe5e5;
  --c-badge-txt:    #7f0000;
}

/* 8 · Golden Harvest */
[data-theme="golden-harvest"] {
  --c-primary:      #7d5a00;
  --c-primary-dk:   #4a3500;
  --c-primary-lt:   #b8860b;
  --c-accent:       #2d6a4f;
  --c-accent-hov:   #1b4332;
  --c-accent-txt:   #ffffff;
  --c-bg:           #fff8e1;
  --c-card:         #ffffff;
  --c-header-bg:    #ffecb3;
  --c-header-txt:   #7d5a00;
  --c-nav-bg:       #7d5a00;
  --c-nav-active:   #ffe082;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #4a3500;
  --c-text-muted:   #8a7a44;
  --c-label:        #7d5a00;
  --c-border:       #7d5a00;
  --c-shadow:       rgba(125,90,0,0.14);
  --c-badge-bg:     #fff3cd;
  --c-badge-txt:    #7d5a00;
}

/* 9 · Teal Aqua */
[data-theme="teal-aqua"] {
  --c-primary:      #00695c;
  --c-primary-dk:   #003d33;
  --c-primary-lt:   #00897b;
  --c-accent:       #0277bd;
  --c-accent-hov:   #01579b;
  --c-accent-txt:   #ffffff;
  --c-bg:           #e0f2f1;
  --c-card:         #ffffff;
  --c-header-bg:    #b2dfdb;
  --c-header-txt:   #00695c;
  --c-nav-bg:       #00695c;
  --c-nav-active:   #80cbc4;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #003d33;
  --c-text-muted:   #5a8a84;
  --c-label:        #00695c;
  --c-border:       #00695c;
  --c-shadow:       rgba(0,105,92,0.14);
  --c-badge-bg:     #d0f0ed;
  --c-badge-txt:    #00695c;
}

/* 10 · Lavender Dream */
[data-theme="lavender-dream"] {
  --c-primary:      #512da8;
  --c-primary-dk:   #311b92;
  --c-primary-lt:   #7c4dff;
  --c-accent:       #d81b60;
  --c-accent-hov:   #ad1457;
  --c-accent-txt:   #ffffff;
  --c-bg:           #ede7f6;
  --c-card:         #ffffff;
  --c-header-bg:    #d1c4e9;
  --c-header-txt:   #512da8;
  --c-nav-bg:       #512da8;
  --c-nav-active:   #b39ddb;
  --c-nav-txt:      rgba(255,255,255,0.70);
  --c-text:         #311b92;
  --c-text-muted:   #7a6aaa;
  --c-label:        #512da8;
  --c-border:       #512da8;
  --c-shadow:       rgba(81,45,168,0.14);
  --c-badge-bg:     #e8dcf8;
  --c-badge-txt:    #512da8;
}

/* ============================================================
   FONT VARIANTS
   ============================================================ */
[data-font="poppins"],
:root {
  --font-family: 'Poppins', system-ui, sans-serif;
}
[data-font="roboto"]   { --font-family: 'Roboto', system-ui, sans-serif; }
[data-font="lato"]     { --font-family: 'Lato', system-ui, sans-serif; }
[data-font="playfair"] { --font-family: 'Playfair Display', Georgia, serif; }
[data-font="nunito"]   { --font-family: 'Nunito', system-ui, sans-serif; }

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family, 'Poppins', sans-serif);
  background-color: var(--c-bg, #eef4ff);
  color: var(--c-text, #1a2744);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   APP SHELL
   ============================================================ */
#appWrapper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--c-bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

/* ---- HEADER ---- */
#appHeader {
  background: var(--c-header-bg);
  color: var(--c-header-txt);
  text-align: center;
  padding: 12px 16px 10px;
  border-bottom: 3px solid var(--c-primary);
  flex-shrink: 0;
  user-select: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.header-text {
  flex: 1;
  text-align: center;
}

/* invisible placeholder — same min-width as logo — keeps title truly centred when badge is hidden */
.header-spacer {
  width: 48px;
  flex-shrink: 0;
}

#appHeader h1 {
  font-size: clamp(0.72rem, 3.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--c-header-txt);
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.hd-short { display: none; }

#appHeader p {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 2px 0 0;
  color: var(--c-header-txt);
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ---- MAIN CONTENT ---- */
#mainContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 18px 12px;
  -webkit-overflow-scrolling: touch;
}

#mainContent::-webkit-scrollbar { width: 4px; }
#mainContent::-webkit-scrollbar-track { background: transparent; }
#mainContent::-webkit-scrollbar-thumb {
  background-color: var(--c-primary-lt);
  border-radius: 4px;
}

/* ============================================================
   FORM – ADD TAB
   ============================================================ */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--c-label);
  margin-bottom: 6px;
}

.app-input {
  border: 2px solid var(--c-border) !important;
  border-radius: 6px !important;
  font-family: var(--font-family) !important;
  font-size: 1rem !important;
  color: var(--c-text) !important;
  background-color: var(--c-card) !important;
  padding: 10px 14px !important;
  width: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--c-shadow) !important;
  border-color: var(--c-primary-lt) !important;
}

.app-input::placeholder {
  color: var(--c-text-muted);
  opacity: 0.55;
}

/* hide number spinner */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---- PAYMENT ROW ---- */
.payment-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.payment-row .app-input { flex: 1; }

.btn-camera {
  width: 48px;
  height: 48px;
  border-radius: 6px !important;
  border: 2px solid var(--c-border) !important;
  background-color: var(--c-card) !important;
  color: var(--c-primary) !important;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
}
.btn-camera:hover { background-color: var(--c-header-bg) !important; }

/* ---- PAYMENT PIC PREVIEW ---- */
.payment-pic-preview {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid var(--c-border);
  display: block;
}
.btn-remove-pic {
  color: #dc3545 !important;
  background: none;
  border: none;
  font-size: 0.82rem;
  padding: 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

/* ---- ADD BUTTON (big center) ---- */
.btn-add-main {
  width: 100%;
  padding: 15px;
  background-color: var(--c-accent) !important;
  color: var(--c-accent-txt) !important;
  border: none !important;
  border-radius: 30px !important;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--font-family) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.btn-add-main:hover,
.btn-add-main:focus {
  background-color: var(--c-accent-hov) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px var(--c-shadow);
}
.btn-add-main:active { transform: translateY(0); }
.btn-add-main:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* ---- VALIDATION ---- */
.was-validated .app-input:invalid,
.app-input.is-invalid { border-color: #dc3545 !important; }
.was-validated .app-input:valid,
.app-input.is-valid   { border-color: #28a745 !important; }
.invalid-feedback { font-size: 0.76rem; }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
#bottomNav {
  display: flex;
  background-color: var(--c-nav-bg);
  flex-shrink: 0;
  border-top: 3px solid var(--c-primary-dk);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--c-nav-txt);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-tab i    { font-size: 1.3rem; }
.nav-tab span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; }
.nav-tab.active { color: var(--c-nav-active); }
.nav-tab:hover:not(.active) { color: rgba(255,255,255,0.90); }

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#loadingOverlay.d-none { display: none !important; }
#loadingOverlay p { color: #fff; margin-top: 12px; font-size: 0.95rem; }

/* ============================================================
   FULL LIST TAB
   ============================================================ */
.list-controls { margin-bottom: 14px; }

/* ---- List filter (Registered / Think Later) ---- */
.list-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.filter-btn {
  flex: 1;
  padding: 7px 10px;
  border: 2px solid var(--c-border);
  border-radius: 20px;
  background: var(--c-card);
  color: var(--c-text-muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-family);
}
.filter-btn.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}

/* ---- Think Later toggle button in Add form ---- */
.think-later-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.think-later-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 2px dashed var(--c-border);
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-muted);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  transition: all .18s;
}
.think-later-btn.active {
  border-style: solid;
  border-color: #f0a500;
  background: #fff8e1;
  color: #b37400;
}
.think-later-hint {
  font-size: .74rem;
  color: var(--c-text-muted);
  text-align: center;
}

/* ---- Think Later badge on card ---- */
.badge-think-later {
  font-size: .68rem;
  font-weight: 700;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  padding: 1px 7px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 4px;
}

/* member-name flex for badge alignment */
.member-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.search-wrapper { position: relative; margin-bottom: 6px; }

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  font-size: 0.88rem;
  pointer-events: none;
}

.search-input { padding-left: 36px !important; }

.list-meta {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  font-weight: 600;
}

/* ---- MEMBER CARDS ---- */
.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-card {
  background: var(--c-card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px var(--c-shadow);
  border-left: 4px solid var(--c-primary);
  animation: fadeInUp 0.25s ease;
}

.member-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--c-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.member-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}

.member-badge {
  display: inline-block;
  font-size: 0.68rem;
  background-color: var(--c-badge-bg);
  color: var(--c-badge-txt);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-top: 3px;
}

.member-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.member-detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--c-text);
}
.member-detail-item i {
  color: var(--c-primary);
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* ---- MEMBER ACTION BUTTONS ---- */
.member-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.btn-action {
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 2px solid var(--c-border) !important;
  background: var(--c-card) !important;
  color: var(--c-primary) !important;
  font-size: 0.76rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  font-family: var(--font-family);
  -webkit-tap-highlight-color: transparent;
}
.btn-action:hover  { background-color: var(--c-header-bg) !important; }
.btn-action:active { transform: scale(0.96); }

.btn-action.btn-wa {
  border-color: #25d366 !important;
  color: #25d366 !important;
}
.btn-action.btn-wa:hover { background-color: #f0fff4 !important; }

.btn-action.btn-gc-sync {
  border-color: #1a73e8 !important;
  color: #1a73e8 !important;
}
.btn-action.btn-gc-sync:hover { background-color: #e8f0fe !important; }

/* ---- Google Contacts Sync Banner ---- */
.gc-sync-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.gc-sync-banner.gc-connected {
  background: #e8f0fe;
  color: #1a56c4;
  border: 1px solid #c5d8f7;
}
.gc-sync-banner.gc-disconnected {
  background: #fff3e0;
  color: #b45309;
  border: 1px solid #fddcaa;
}

.btn-action.btn-del {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}
.btn-action.btn-del:hover { background-color: #fff5f5 !important; }

/* ---- CLICK COUNT BADGE on Call / WA buttons ---- */
.btn-click-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  background: var(--c-primary);
  color: #fff;
  margin-left: 2px;
  vertical-align: middle;
}
.btn-action.btn-wa .btn-click-count {
  background: #25d366;
}

/* ---- EMPTY STATE ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-text-muted);
}
.empty-state i    { font-size: 3rem; display: block; margin-bottom: 12px; }
.empty-state p    { font-size: 0.95rem; font-weight: 500; }

/* ============================================================
   SETTINGS SUB-TABS
   ============================================================ */
.settings-tab-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
  -webkit-overflow-scrolling: touch;
}
.settings-tab-nav::-webkit-scrollbar {
  height: 4px;
}
.settings-tab-nav::-webkit-scrollbar-track {
  background: transparent;
}
.settings-tab-nav::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 4px;
}
@media (hover: none) {
  /* Touch devices: hide the scrollbar */
  .settings-tab-nav { scrollbar-width: none; }
  .settings-tab-nav::-webkit-scrollbar { display: none; }
}

.stab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  background: var(--c-card);
  border: 2px solid var(--c-border) !important;
  border-radius: 10px;
  color: var(--c-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s;
  font-family: var(--font-family);
}
.stab-btn i { font-size: 1.05rem; }
.stab-btn.active {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff;
}

/* ---- Google Contacts status ---- */
.contacts-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.contacts-status-badge {
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--c-text-muted);
}

.btn-reconnect-contacts {
  width: 100%;
  padding: 11px;
  background: transparent !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: 8px !important;
  color: var(--c-primary) !important;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-family) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-reconnect-contacts:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
}
.btn-reconnect-contacts:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   SETTINGS TAB
   ============================================================ */
.settings-section {
  background: var(--c-card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px var(--c-shadow);
}

.settings-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.settings-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-label);
  margin-bottom: 6px;
  display: block;
}

/* ---- THEME SWATCHES ---- */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-color-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, border-color 0.2s;
}

.theme-swatch.active .theme-color-circle {
  border-color: var(--c-text) !important;
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--c-bg);
}

.theme-name {
  font-size: 0.58rem;
  text-align: center;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.2;
}

/* ---- FONT OPTIONS ---- */
.font-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.font-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid var(--c-border) !important;
  background: var(--c-card) !important;
  color: var(--c-text) !important;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-family);
}
.font-btn.active {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
}

/* ---- FIREBASE STATUS ---- */
.firebase-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 8px;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #aaa;
  flex-shrink: 0;
}
.firebase-status.connected .status-dot { background-color: #28a745; }
.firebase-status.error      .status-dot { background-color: #dc3545; }
.firebase-status.warning    .status-dot { background-color: #ffc107; }
.status-text { font-size: 0.84rem; font-weight: 500; color: var(--c-text); }

/* ---- SAVE SETTINGS BUTTON ---- */
.btn-save-settings {
  width: 100%;
  padding: 13px;
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--font-family) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-save-settings:hover { background-color: var(--c-primary-dk) !important; }

.btn-clear-cache {
  width: 100%;
  padding: 11px;
  background-color: transparent !important;
  color: var(--c-primary) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: 8px !important;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--font-family) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn-clear-cache:hover {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
}
.btn-clear-cache:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- RESET MESSAGE BUTTON ---- */
.btn-reset-msg {
  background: none;
  border: 1px solid var(--c-border) !important;
  color: var(--c-primary) !important;
  border-radius: 6px;
  font-size: 0.80rem;
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
}
.btn-reset-msg:hover { background-color: var(--c-header-bg) !important; }

/* ---- ABOUT ---- */
.about-section { text-align: center; }
.about-text {
  font-size: 0.84rem;
  color: var(--c-text-muted);
  margin-bottom: 6px;
  line-height: 1.5;
}

.mahamantra {
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--c-primary) !important;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.03em;
}

/* ============================================================
   TOAST
   ============================================================ */
#appToast { min-width: 270px; font-family: var(--font-family); }
#appToast.bg-success { background-color: #28a745 !important; color: #fff; }
#appToast.bg-danger  { background-color: #dc3545 !important; color: #fff; }
#appToast.bg-warning { background-color: #ffc107 !important; color: #000; }
#appToast.bg-info    { background-color: #17a2b8 !important; color: #fff; }

/* ============================================================
   PAYMENT PIC FULLSCREEN MODAL
   ============================================================ */
.pic-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.pic-modal-overlay img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.pic-modal-close {
  position: fixed;
  top: 14px;
  right: 16px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100000;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(145deg, #1a3a6e 0%, #0f2349 55%, #1e5c2e 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-screen.d-none { display: none !important; }

.login-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 42px 32px 36px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.login-logo   { font-size: 3.8rem; line-height: 1; margin-bottom: 10px; }
.login-title  {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1a3a6e;
  letter-spacing: .08em;
  margin-bottom: 3px;
}
.login-subtitle {
  font-size: .96rem;
  font-weight: 700;
  color: #1e5c2e;
  margin-bottom: 6px;
}
.login-tagline {
  font-size: .80rem;
  color: #6b7999;
  margin-bottom: 30px;
}

.btn-google-signin {
  width: 100%;
  padding: 13px 18px;
  border: 2px solid #dadce0;
  border-radius: 10px;
  background: #ffffff;
  font-size: .95rem;
  font-weight: 600;
  color: #3c4043;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
  font-family: var(--font-family, 'Poppins', sans-serif);
}
.btn-google-signin:hover {
  background: #f8f9fa;
  border-color: #c0c4c8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.btn-google-signin:active { background: #f1f3f4; }

.login-spinner      { color: #1a3a6e !important; margin-bottom: 6px; }
.login-spinner-text { font-size: .88rem; color: #1a3a6e; }

.login-note {
  font-size: .74rem;
  color: #9aa3b8;
  margin-top: 18px;
  margin-bottom: 0;
}

/* ============================================================
   HEADER USER BADGE
   ============================================================ */
.user-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-header-txt);
  opacity: 0.8;
}
.user-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-header-txt);
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: background 0.15s;
}
.user-menu-trigger:hover { background: rgba(255,255,255,0.18); }
.user-badge { position: relative; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  min-width: 140px;
  z-index: 9000;
  overflow: hidden;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: #dc3545;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s;
}
.user-dropdown-item:hover { background: #fff0f0; }

/* ---- Photo Quality buttons ---- */
.quality-options {
  display: flex;
  gap: 10px;
}
.quality-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 2px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-card);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.quality-btn .quality-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-text);
}
.quality-btn .quality-sub {
  font-size: .68rem;
  color: var(--c-text-muted);
}
.quality-btn.active {
  border-color: var(--c-primary);
  background: var(--c-badge-bg);
}
.quality-btn.active .quality-label { color: var(--c-primary); }
.signin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 4px;
}
.settings-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-border);
  flex-shrink: 0;
}
.btn-signout {
  width: 100%;
  padding: 10px;
  background: none;
  border: 2px solid #dc3545 !important;
  border-radius: 8px;
  color: #dc3545 !important;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background-color 0.2s;
}
.btn-signout:hover { background-color: #fff5f5 !important; }

/* ============================================================
   DESKTOP VIEW  (> 480px)
   ============================================================ */
@media (min-width: 481px) {
  body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0 24px;
    min-height: 100vh;
  }
  #appWrapper {
    border-radius: 24px;
    height: auto;
    min-height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

/* ============================================================
   DARK-THEME TWEAKS
   ============================================================ */
[data-theme="midnight-dark"] .app-input {
  border-color: #3a3a6e !important;
}
[data-theme="midnight-dark"] .app-input:focus {
  border-color: var(--c-accent) !important;
}
[data-theme="midnight-dark"] .member-card {
  border-color: #3a3a8e;
}