/* Custom Stylesheet for Aventrix Attendance System */

:root {
  /* Color Palette */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(0, 0, 0, 0.08);

  --primary: #d97706;
  --primary-glow: rgba(217, 119, 6, 0.15);
  --secondary: #b45309;
  --secondary-glow: rgba(180, 83, 9, 0.15);

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.2);

  --sidebar-width: 280px;
  --border-radius-lg: 20px;
  --border-radius-md: 12px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-main: 'Outfit', 'Sarabun', sans-serif;
}

/* Base resets & styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('webmon/thai_pattern.png');
  background-repeat: repeat;
  background-size: 380px 380px;
  filter: blur(4px);
  opacity: 0.65;
  z-index: -1;
  pointer-events: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* App Container Layout */
.app-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
}

.app-container.vertical {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-container.vertical .main-content {
  height: 0;
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem 3rem;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}

/* App Header (Top Navigation) */
.app-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header-container {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start;
  max-width: 1800px;
  margin: 0 auto;
  gap: 1.5rem;
}

.header-container::-webkit-scrollbar {
  display: none;
}

.app-header .brand {
  margin-bottom: 0;
}

/* Horizontal Nav Menu */
.nav-menu.horizontal {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.25rem;
  flex-grow: 1;
  justify-content: flex-start;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar for IE/Edge */
}

.nav-menu.horizontal::-webkit-scrollbar {
  display: none !important;
  /* Hide scrollbar for Chrome/Safari */
}

.nav-menu.horizontal .nav-btn {
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  white-space: nowrap;
  gap: 0.4rem;
  border-left: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--border-radius-md);
  justify-content: center;
  flex-shrink: 0 !important;
  /* Prevent overlapping */
}

.nav-menu.horizontal .dropdown {
  flex-shrink: 0 !important;
  /* Prevent overlapping */
}

.nav-menu.horizontal .nav-btn.active {
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 2px solid var(--secondary);
  border-left: none;
  box-shadow: none;
}

/* Widgets Area */
.header-widgets {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.header-widgets .system-status {
  margin-top: 0;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-radius: var(--border-radius-md);
}

.header-widgets .system-status .status-indicator {
  width: 8px;
  height: 8px;
}

.header-widgets .system-status .status-label {
  font-size: 0.6rem;
}

.header-widgets .system-status .status-value {
  font-size: 0.7rem;
}

.header-widgets .time-widget {
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-md);
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--card-border);
}

.header-widgets .time-widget .time {
  font-size: 1rem;
}

.header-widgets .time-widget .date {
  font-size: 0.65rem;
}

.page-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.page-title-section h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-title-section p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.brand-icon {
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  position: relative;
  transition: var(--transition-smooth);
}

.brand-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.brand-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed var(--secondary);
  opacity: 0.75;
  animation: spin-halo 10s linear infinite;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  pointer-events: none;
}

.brand-icon:hover::after {
  opacity: 1;
  border-color: var(--primary);
  animation: spin-halo 3s linear infinite;
}

.brand-icon img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

@keyframes spin-halo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.brand-info h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(to right, #ffffff, #94a3b8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.brand-info span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.2em;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  padding: 0.85rem 1.25rem;
  color: var(--text-secondary);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-smooth);
}

.nav-btn i,
.nav-btn svg {
  width: 20px;
  height: 20px;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.nav-btn.active {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  color: var(--text-primary);
  border-left: 3px solid var(--secondary);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.05);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1rem;
  margin-top: 2rem;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}

.status-indicator.online {
  background-color: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.status-indicator.online::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--success);
  border-radius: 50%;
  animation: pulse-ring 2s infinite;
}

.status-text {
  display: flex;
  flex-direction: column;
}

.status-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: bold;
}

.status-value {
  font-size: 0.8rem;
  font-weight: 600;
}

/* Main Content Area */
.main-content {
  flex-grow: 1;
  padding: 2rem 3rem;
  overflow-y: auto;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

/* Header Top Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 1.5rem;
}

.page-title h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-title p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.time-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1.25rem;
}

.clock-icon {
  color: var(--secondary);
}

.time-display {
  display: flex;
  flex-direction: column;
}

.time-display .time {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.time-display .date {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Tabs Toggle Visibility */
.tab-content {
  display: none;
  flex-direction: column;
  gap: 2rem;
  animation: fade-in 0.4s ease;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

.tab-content.active {
  display: flex;
}

/* Cards & Glassmorphism */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 10px 30px rgba(18, 24, 38, 0.05);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* Stat Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(18, 24, 38, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon.blue {
  background-color: rgba(37, 99, 235, 0.1);
  color: #3b82f6;
}

.card-icon.green {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.card-icon.red {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.card-value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.card-subtext {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.text-green {
  color: var(--success);
  font-weight: 600;
}

.text-red {
  color: var(--danger);
  font-weight: 600;
}

/* Dashboard Layout Columns */
.content-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .content-row {
    grid-template-columns: 1fr;
  }
}

/* Progress Panel Card */
.progress-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.progress-panel h3 {
  align-self: flex-start;
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.progress-container {
  width: 180px;
  height: 180px;
  margin: 1rem 0;
  position: relative;
}

.circular-progress svg {
  transform: rotate(-90deg);
}

.bg-circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 8;
}

.fg-circle {
  fill: none;
  stroke: url(#progressGradient);
  stroke: var(--secondary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.progress-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-inner .percentage {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.progress-inner .label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.attendance-bar-indicators {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.indicator-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.color-dot.green {
  background-color: var(--success);
}

.color-dot.red {
  background-color: var(--danger);
}

/* Quick Action Panel */
.action-panel h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.panel-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Button UI */
.btn {
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 0.9rem 1.5rem;
  border-radius: var(--border-radius-md);
  border: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.btn-success {
  background-color: var(--success);
  color: white;
  box-shadow: 0 4px 15px var(--success-glow);
}

.btn-success:hover {
  background-color: #0d9488;
  transform: translateY(-2px);
}

.btn-large {
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
}

.btn-full {
  width: 100%;
}

/* Status Box */
.status-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  font-size: 0.85rem;
}

.status-box.success {
  background-color: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.2);
}

.status-box.error {
  background-color: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.warning-icon {
  color: var(--warning);
}

.success-icon {
  color: var(--success);
}

.error-icon {
  color: var(--danger);
}

/* System Logs Panel */
.log-panel {
  display: flex;
  flex-direction: column;
}

.log-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.log-panel-header h3 {
  font-size: 1.15rem;
}

.btn-clear {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-main);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-clear:hover {
  color: var(--danger);
}

.log-list {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.log-item {
  display: grid;
  grid-template-columns: 180px 100px 1fr;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  font-size: 0.85rem;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: var(--text-muted);
  font-family: monospace;
}

.log-badge {
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-align: center;
  width: max-content;
}

.log-badge.info {
  background-color: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}

.log-badge.success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.log-badge.error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.log-badge.alert {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.log-msg {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-item.empty {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/* Check-In Portal styling */
.checkin-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.checkin-card {
  width: 100%;
  max-width: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.5rem 2.5rem;
}

.scanner-header {
  position: relative;
  margin-bottom: 2rem;
}

.pulse-ring {
  position: absolute;
  inset: -15px;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  opacity: 0.4;
  animation: pulse-border 2.5s infinite ease-in-out;
}

.scanner-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.2);
}

.scanner-icon i,
.scanner-icon svg {
  width: 36px;
  height: 36px;
}

.checkin-card h2 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.scanner-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

.checkin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-group {
  position: relative;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
}

.input-group input {
  width: 100%;
  padding: 1.1rem 1.25rem 1.1rem 3.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 1.1rem;
  outline: none;
  transition: var(--transition-smooth);
}

.input-group input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

/* Success Check-In Response Card overlay */
.checkin-response {
  width: 100%;
  margin-top: 1rem;
  animation: scale-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.response-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.response-icon.success {
  background-color: rgba(16, 185, 129, 0.1);
  border: 2px solid var(--success);
  color: var(--success);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.response-icon.error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 2px solid var(--danger);
  color: var(--danger);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.checkin-response h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.checkin-response p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

.res-details {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.detail-item .label {
  color: var(--text-muted);
}

.detail-item .value {
  font-weight: bold;
}

/* Employee Manager Tab Layout */
.employee-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .employee-layout {
    grid-template-columns: 1fr;
  }
}

.card-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.table-search {
  position: relative;
  max-width: 300px;
  width: 100%;
}

.table-search i,
.table-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.table-search input {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 0.6rem 0.85rem 0.6rem 2.25rem;
  color: var(--text-primary);
  font-family: var(--font-main);
  outline: none;
  font-size: 0.85rem;
  transition: var(--transition-smooth);
}

.table-search input:focus {
  border-color: var(--secondary);
}

/* Table styling */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th,
td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.9rem;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.015);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: var(--transition-smooth);
}

tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.015);
}

.table-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

/* Table Badges */
.badge {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.badge.present {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.badge.absent {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.btn-delete {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-delete:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* Form Styling */
.add-employee-card h3 {
  margin-bottom: 0.5rem;
}

.add-employee-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-main);
  outline: none;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
  resize: vertical;
}

.form-control {
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--secondary);
}

.input-helper-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

/* Switch styling for settings */
.checkbox-group {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #334155;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--secondary);
}

input:checked+.slider:before {
  transform: translateX(24px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.checkbox-label {
  display: flex;
  flex-direction: column;
}

.checkbox-label strong {
  font-size: 0.9rem;
}

/* Settings Tab Details */
.settings-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  align-items: start;
}

.settings-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 950px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.test-utilities {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem 0;
}

.test-box {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.test-box h4 {
  font-size: 0.95rem;
  font-weight: bold;
}

.test-box p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.helper-guide {
  border-top: 1px solid var(--card-border);
  padding-top: 1.5rem;
}

.helper-guide h4 {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.helper-guide ol {
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Animation Keyframes */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.4;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    transform: scale(1);
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }

  70% {
    transform: scale(1.08);
    opacity: 0.1;
    box-shadow: 0 0 0 15px rgba(6, 182, 212, 0);
  }

  100% {
    transform: scale(1);
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sidebar Menu Grouping and headers */
.sidebar-group-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 1.5rem 0 0.5rem 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  opacity: 0.85;
}

.temple-hero {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  min-height: 950px;
  padding: 3rem;
  border: 1px solid var(--card-border);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center;
  margin-bottom: 1.5rem;
}

.temple-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('webmon/temple_banner.png');
  background-size: cover;
  background-position: center 32%;
  /* Make the image sharper, more saturated, and brighter */
  filter: saturate(1.25) contrast(1.1) brightness(1.15);
  z-index: 1;
  transition: transform 1.5s cubic-bezier(0.15, 0.85, 0.45, 1);
}

.temple-hero:hover::before {
  transform: scale(1.04);
}

.temple-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(18, 24, 38, 0.45) 0%, rgba(18, 24, 38, 0.8) 100%) !important;
  z-index: 2;
}

.temple-hero>* {
  position: relative;
  z-index: 3;
}

.temple-hero .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  max-width: 850px;
  animation: float-hero-text 6s ease-in-out infinite;
}

.temple-hero h2 {
  font-size: 3.25rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
}

.temple-hero p {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  line-height: 1.8;
  font-weight: 500;
}

.temple-hero .hero-badge {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 4.5rem;
  font-weight: 800;
  align-self: center;
  text-transform: none;
  letter-spacing: 0.02em;
  background: linear-gradient(to right, #ffe57f, #ffb300);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

@keyframes float-hero-text {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

.temple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.temple-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .temple-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .temple-col {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.about-box {
  line-height: 1.7;
}

.about-box p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-item i {
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.contact-text h5 {
  font-weight: bold;
  color: #fff;
  font-size: 0.9rem;
}

.contact-text p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gallery-item {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--card-border);
  position: relative;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.gallery-item:hover {
  transform: scale(1.04);
  border-color: var(--secondary);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Timeline/Events Tab Styles */
.timeline {
  position: relative;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
}

.timeline-item {
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary);
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.timeline-content {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .timeline-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.timeline-info h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.timeline-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.timeline-date {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--secondary);
  text-align: center;
  min-width: 120px;
}

/* Monks Tab Styles */
.monk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.monk-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
}

.monk-card:hover {
  transform: translateY(-5px);
  border-color: var(--secondary);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.05);
}

.monk-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(217, 119, 6, 0.2);
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.monk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monk-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0.5rem;
}

.monk-card .monk-title {
  font-size: 0.85rem;
  color: var(--secondary);
  font-weight: 600;
}

.monk-card .monk-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Donations Tab Styles */
.donate-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .donate-row {
    grid-template-columns: 1fr;
  }
}

.bank-card {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.bank-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.bank-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-grow: 1;
}

.bank-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.bank-account {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.bank-holder {
  font-size: 0.9rem;
  color: var(--secondary);
  font-weight: 600;
}

/* Bottom payment section layout */
.payment-info-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: stretch;
}

.bank-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qr-code-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
}

@media (max-width: 768px) {
  .payment-info-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
}

.qr-frame {
  background-color: #fff;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  margin-top: 1rem;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-frame::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px dashed var(--secondary);
  border-radius: calc(var(--border-radius-md) + 5px);
}

/* Horizontal Top Navigation Specific Overrides */
.nav-menu.horizontal .nav-btn.active {
  background: rgba(245, 158, 11, 0.08) !important;
  border-bottom: 2px solid var(--secondary) !important;
  border-left: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.nav-menu.horizontal .nav-btn {
  border-left: none !important;
}

/* Dropdown Layout & Behavior */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  padding: 0.6rem 0.85rem;
  color: var(--text-secondary);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-main);
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.dropdown-trigger:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--text-primary);
}

.dropdown-chevron {
  transition: transform 0.2s ease;
  width: 14px !important;
  height: 14px !important;
}

.dropdown:hover .dropdown-chevron,
.dropdown.active .dropdown-chevron {
  transform: rotate(180deg);
}

/* Dropdown Content Panel */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-secondary);
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  z-index: 1000;
  padding: 0.5rem;
  margin-top: 0.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  animation: fade-in 0.2s ease;
}

.dropdown-content::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
}

/* Dropdown Sub-items style rules */
.dropdown-content .nav-btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 0.75rem 1rem !important;
  border-bottom: none !important;
  border-radius: var(--border-radius-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.dropdown-content .nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-primary) !important;
}

.dropdown-content .nav-btn.active {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--secondary) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Active parent highlight via pseudo-class :has() */
.dropdown:has(.nav-btn.active) .dropdown-trigger {
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 2px solid var(--secondary);
  color: var(--text-primary);
}

/* ============================================
   HISTORY PAGE - TWO COLUMN LAYOUT
   ============================================ */

.history-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

/* Left: Image column */
.history-images {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

.history-img-item {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.history-img-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.2);
}

.history-img-item img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.history-img-caption {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.45rem 0.5rem;
  background: rgba(248, 250, 252, 0.95);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Right: Text column */
.history-text {
  flex: 1;
  min-width: 0;
}

.history-section {
  margin-bottom: 2rem;
}

.history-section-title {
  color: var(--secondary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
  border-left: 4px solid var(--primary);
  padding-left: 0.75rem;
  line-height: 1.5;
}

.history-text p {
  color: var(--text-secondary);
  line-height: 2;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.history-inline-images {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: 1.5rem;
  margin: 0 auto 2rem auto;
  max-width: 900px;
}

.history-inline-images .history-img-item img {
  height: 480px;
}

.history-closing {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(180, 83, 9, 0.05));
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  text-align: center;
  margin-top: 1rem;
}

.history-closing p {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 2 !important;
  margin-bottom: 0 !important;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .history-layout {
    flex-direction: column;
  }

  .history-images {
    flex: none;
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .history-img-item img {
    height: 130px;
  }

  .history-inline-images {
    grid-template-columns: 2fr 8fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .history-inline-images .history-img-item img {
    height: 180px;
  }
}

/* ============================================
   BOARD OF DIRECTORS / EXECUTIVE DIRECTORY
   ============================================ */

.board-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.board-row {
  width: 100%;
}

.board-row.centered-row {
  display: flex;
  justify-content: center;
}

.board-row.grid-3-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  justify-items: center;
}

.board-row.grid-2-row {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1.6fr minmax(240px, 300px);
  gap: 1.5rem;
  width: 100%;
  justify-items: center;
  align-items: center;
}

@media (max-width: 768px) {
  .board-row.grid-2-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .board-row.grid-2-row .board-member-card {
    grid-column: 1 !important;
  }
}

.board-member-card {
  width: 100%;
  max-width: 300px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
}

.board-member-card:hover {
  transform: translateY(-8px);
  border-color: var(--secondary);
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.2);
}

.board-member-card .monk-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(217, 119, 6, 0.25);
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 0.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.board-member-card:hover .monk-avatar {
  border-color: var(--secondary);
  box-shadow: 0 5px 20px rgba(245, 158, 11, 0.45);
}

.board-member-card .monk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.board-member-card:hover .monk-avatar img {
  transform: scale(1.1);
}

.board-member-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
  transform-origin: center;
}

.board-member-card:hover h4 {
  transform: scale(1.08);
  color: var(--secondary);
}

.board-member-card .monk-title {
  font-size: 0.85rem;
  color: var(--secondary);
  font-weight: 600;
  transition: color 0.3s ease;
}

.board-member-card:hover .monk-title {
  color: #ffffff;
}

@media (max-width: 768px) {
  .board-row.grid-3-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .board-row.grid-3-row .empty-cell {
    display: none;
  }
}

/* Combined Grid for Rows 4 & 5 with Carousel */
.members-lower-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1.6fr minmax(240px, 300px);
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
  margin-top: 1.5rem;
}

.board-carousel-container {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: 100%;
  max-width: 480px;
  height: 100%;
  min-height: 560px;
  max-height: 720px;
  aspect-ratio: 3/4;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.board-carousel-container:hover {
  border-color: var(--secondary);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
}

.board-carousel-wrapper {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.board-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-carousel-slide.active {
  opacity: 1;
}

.board-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #ffffff;
}

.carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dots .dot.active {
  background-color: var(--secondary);
  box-shadow: 0 0 8px var(--secondary-glow);
}

@media (max-width: 992px) {
  .members-lower-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .members-lower-grid .board-member-card {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .board-carousel-container {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 280px !important;
    max-height: 520px !important;
    aspect-ratio: 3/4 !important;
    margin: 0 auto !important;
  }
}

/* Amulet Sacred Objects Tab Styling */
.amulet-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2rem;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}

.amulet-main-layout.no-admin,
.amulet-main-layout:has(#amulet-admin-panel[style*="display: none"]) {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1024px) {
  .amulet-main-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.amulet-showcase-panel {
  display: flex;
  flex-direction: column;
}

.panel-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.panel-section-title i {
  color: var(--secondary);
}

.amulet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   SACRED NAGA AMULET THEME (มนต์มรกตพญานาคราช เช่าบูชาวัตถุมงคล)
   ========================================================================== */

/* 0. Section Canvas - Clean White Theme with Naga Emerald Accents */
#tab-temple-donate {
  position: relative;
  border-radius: 24px;
  padding: 1.5rem 1.25rem;
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 1. Sanctuary Hero Banner */
.naga-sanctum-hero {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.naga-sanctum-banner-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #d4af37;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 35px rgba(16, 185, 129, 0.25), 0 0 20px rgba(212, 175, 55, 0.3);
  background: radial-gradient(circle at 50% 25%, #065f46 0%, #044332 40%, #022c22 75%, #01140f 100%);
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.naga-sanctum-title-box {
  position: relative;
  padding: 0;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.naga-sanctum-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6, 78, 59, 0.85);
  color: #fef08a;
  border: 1px solid rgba(251, 191, 36, 0.6);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.naga-sanctum-title {
  margin: 0 0 0.4rem;
  font-size: 2.1rem;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.5);
  letter-spacing: 0.5px;
}

.naga-sanctum-desc {
  margin: 0 auto;
  max-width: 680px;
  font-size: 0.95rem;
  color: #a7f3d0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  line-height: 1.5;
}

/* Sacred Ribbon Badges */
.naga-sacred-ribbon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .naga-sacred-ribbon {
    grid-template-columns: 1fr;
  }

  .naga-sanctum-title {
    font-size: 1.45rem;
  }

  .naga-sanctum-title-box {
    padding: 1.25rem;
  }
}

.sacred-badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease;
}

.sacred-badge-item:hover {
  transform: translateY(-3px);
  border-color: #10b981 !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15) !important;
}

.sacred-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669 !important;
  flex-shrink: 0;
}

.sacred-badge-info strong {
  display: block;
  font-size: 0.95rem;
  color: #064e3b !important;
  font-weight: 800 !important;
  margin-bottom: 2px;
}

.sacred-badge-info span {
  display: block;
  font-size: 0.8rem;
  color: #64748b !important;
  line-height: 1.3;
}

/* 2. Controls & Categories */
.amulet-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.amulet-category-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.naga-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.6rem 1.15rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.naga-tab-btn i {
  width: 16px;
  height: 16px;
  color: #059669 !important;
}

.naga-tab-btn:hover {
  border-color: #059669 !important;
  color: #064e3b !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

.naga-tab-btn.active {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.naga-tab-btn.active i {
  color: #fef08a !important;
}

.amulet-search-box {
  position: relative;
  min-width: 260px;
}

.amulet-search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #059669 !important;
  pointer-events: none;
}

.amulet-search-box input {
  width: 100%;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 30px !important;
  padding: 0.65rem 1rem 0.65rem 2.7rem !important;
  color: #0f172a !important;
  font-size: 0.9rem !important;
  font-weight: 600;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.amulet-search-box input:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* 3. Naga Amulet Cards */
.amulet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.75rem;
}

.amulet-card,
.naga-amulet-card {
  position: relative;
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 18px !important;
  padding: 1.15rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer;
}

.amulet-card:hover,
.naga-amulet-card:hover {
  transform: translateY(-6px) !important;
  border-color: #059669 !important;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Top bar: Sacred badge + Product code */
.amulet-card-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  z-index: 2;
}

.amulet-sacred-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5 !important;
  border: 1px solid #10b981 !important;
  color: #047857 !important;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.amulet-sacred-badge i {
  width: 12px;
  height: 12px;
  color: #059669 !important;
}

.amulet-card-code {
  position: static !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 0.74rem !important;
  font-family: monospace !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  z-index: 2;
}

/* Sacred Product Image Frame - Perfectly fits product photo without ANY cropping */
.amulet-card-image,
.amulet-pedestal-wrap {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 0.85rem !important;
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
}

.amulet-card-image img,
.amulet-pedestal-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #ffffff !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.amulet-card:hover .amulet-card-image img,
.naga-amulet-card:hover .amulet-pedestal-wrap img {
  transform: scale(1.03) !important;
}

.amulet-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 12px;
}

.amulet-card:hover .amulet-zoom-overlay,
.naga-amulet-card:hover .amulet-zoom-overlay {
  opacity: 1 !important;
}

.zoom-pill-tag {
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  border: 1px solid #38bdf8;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}

.naga-amulet-card:hover .zoom-pill-tag {
  transform: translateY(0);
}

.amulet-card h4,
.amulet-card-title {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 2.7rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: none !important;
  transition: color 0.2s ease !important;
}

.amulet-card:hover h4,
.naga-amulet-card:hover .amulet-card-title {
  color: #065f46 !important;
  text-shadow: none !important;
}

.amulet-blessing-subtitle {
  font-size: 0.82rem;
  color: #047857 !important;
  font-weight: 600 !important;
  margin-bottom: 0.85rem;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 4. Payment & Offering Altar Section - Clean White Theme */
.naga-payment-altar-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;
  padding: 2rem !important;
  color: #0f172a !important;
}

.naga-altar-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1.5px solid #e2e8f0 !important;
  padding-bottom: 1.25rem;
}

.naga-altar-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669 !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

.naga-altar-title {
  margin: 0 0 0.3rem !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  text-shadow: none !important;
}

.naga-payment-altar-card .panel-info {
  color: #64748b !important;
  font-size: 0.92rem !important;
}

.naga-bank-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.naga-bank-card:hover {
  transform: translateY(-2px) !important;
  border-color: #10b981 !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.15) !important;
}

.naga-bank-card .bank-name {
  color: #64748b !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

.naga-bank-card .bank-account {
  color: #0f172a !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}

.naga-bank-card .bank-holder {
  color: #059669 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.btn-copy-acc {
  background: #ecfdf5 !important;
  border: 1px solid #10b981 !important;
  color: #047857 !important;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.naga-bank-card:hover .btn-copy-acc {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}

.naga-qr-section {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04) !important;
  text-align: center;
}

.naga-qr-section h4 {
  color: #064e3b !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin-bottom: 0.35rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.naga-qr-section h4 i,
.naga-qr-section h4 svg {
  color: #059669 !important;
}

.naga-qr-section p {
  color: #64748b !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  margin-bottom: 1rem !important;
}

.naga-qr-frame {
  display: inline-block;
  padding: 12px;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.15) !important;
}

.naga-qr-section span {
  color: #047857 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  margin-top: 0.75rem;
  display: block;
}

/* Clean White Theme for Amulet Admin & Form Panel */
#tab-temple-donate .amulet-admin-panel .card,
#tab-temple-donate .add-product-card,
#tab-temple-donate .employee-table-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
  backdrop-filter: none !important;
}

#tab-temple-donate .amulet-admin-panel h3 {
  color: #064e3b !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  text-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-temple-donate .amulet-admin-panel p {
  color: #64748b !important;
  font-size: 0.85rem !important;
}

#tab-temple-donate .amulet-admin-panel .form-group label {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px;
  margin-bottom: 0.4rem;
  display: block;
}

#tab-temple-donate .amulet-admin-panel input[type="text"],
#tab-temple-donate .amulet-admin-panel input[type="number"],
#tab-temple-donate .amulet-admin-panel select,
#tab-temple-donate .amulet-admin-panel textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 0.7rem 1rem !important;
  transition: all 0.25s ease !important;
}

#tab-temple-donate .amulet-admin-panel input::placeholder {
  color: #94a3b8 !important;
}

#tab-temple-donate .amulet-admin-panel input:focus,
#tab-temple-donate .amulet-admin-panel select:focus,
#tab-temple-donate .amulet-admin-panel textarea:focus {
  border-color: #059669 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}

/* Image Upload Area in Clean Style */
#tab-temple-donate .img-upload-zone {
  position: relative;
  border: 2px dashed #94a3b8 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  overflow: hidden;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-temple-donate .img-upload-zone:hover {
  background: #f1f5f9 !important;
  border-color: #059669 !important;
}

#tab-temple-donate .img-upload-zone.dragover {
  border-color: #059669 !important;
  background: #ecfdf5 !important;
  transform: scale(1.01);
}

#tab-temple-donate .img-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: #64748b !important;
  pointer-events: none;
  user-select: none;
}

#tab-temple-donate .img-upload-placeholder i,
#tab-temple-donate .img-upload-placeholder svg {
  width: 36px;
  height: 36px;
  color: #059669 !important;
  opacity: 0.9;
}

#tab-temple-donate .img-upload-placeholder span {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b !important;
}

#tab-temple-donate .img-upload-placeholder small {
  font-size: 0.72rem;
  color: #64748b !important;
}

#tab-temple-donate .img-upload-preview {
  width: 100%;
  height: 130px;
  position: relative;
}

#tab-temple-donate .img-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

#tab-temple-donate .img-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 5;
}

#tab-temple-donate .img-remove-btn:hover {
  background: rgba(239, 68, 68, 0.9);
}

/* Form Action Buttons in Amulet Admin Panel */
#tab-temple-donate .form-actions-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

#tab-temple-donate #btn-product-submit {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid #047857 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

#tab-temple-donate #btn-product-submit:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
}

#tab-temple-donate #btn-product-cancel {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 10px !important;
  padding: 0.8rem 1.25rem !important;
  transition: all 0.2s ease !important;
}

#tab-temple-donate #btn-product-cancel:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* Management Table in Clean White Theme */
#tab-temple-donate .employee-table-card {
  margin-top: 1.5rem !important;
  padding: 1.5rem !important;
}

#tab-temple-donate .employee-table-card table {
  width: 100%;
  border-collapse: collapse;
}

#tab-temple-donate .employee-table-card th {
  background: #f8fafc !important;
  color: #064e3b !important;
  border-bottom: 2px solid #cbd5e1 !important;
  font-weight: 800 !important;
  padding: 0.75rem 0.85rem !important;
  font-size: 0.85rem !important;
  text-align: left;
}

#tab-temple-donate .employee-table-card td {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.75rem 0.85rem !important;
  font-size: 0.85rem !important;
  background: #ffffff !important;
  font-weight: 600 !important;
}

#tab-temple-donate .employee-table-card tr:hover td {
  background: #f1f5f9 !important;
}

#tab-temple-donate .table-loading {
  color: #64748b !important;
}

/* Amulet Card Footer & Button */
.amulet-card-footer {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  gap: 0.5rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid #e2e8f0 !important;
}

.amulet-price-box {
  display: flex;
  align-items: baseline;
  text-align: left;
}

.amulet-price-box .price-val {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #b45309 !important;
  text-shadow: none !important;
  letter-spacing: -0.5px;
}

.btn-naga-rent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid #047857 !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.25s ease !important;
}

.btn-naga-rent:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(16, 185, 129, 0.5) !important;
  color: #ffffff !important;
}

/* Floating Cart Button in Emerald Gold */
.floating-cart-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #047857 0%, #059669 40%, #d97706 100%) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 8px 30px rgba(5, 150, 105, 0.5), 0 0 20px rgba(245, 158, 11, 0.35) !important;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-cart-btn:hover {
  transform: scale(1.1) translateY(-4px) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.65), 0 0 25px rgba(251, 191, 36, 0.5) !important;
  border-color: #fef08a !important;
}

.floating-cart-btn i,
.floating-cart-btn svg {
  width: 26px;
  height: 26px;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #ef4444;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop-badge 0.3s ease;
}

@keyframes pop-badge {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* Cart Drawer & Overlay */
.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10005;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cart-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  background: radial-gradient(circle at 100% 0%, #064e3b 0%, #022c22 60%, #01140f 100%) !important;
  border-left: 2px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8) !important;
  z-index: 10010;
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
    right: -100vw;
  }
}

.cart-drawer.open {
  right: 0;
}

.cart-drawer-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-header-title i,
.cart-header-title svg {
  color: var(--secondary);
  width: 22px;
  height: 22px;
}

.cart-header-title h3 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.cart-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-close-btn:hover {
  color: #fff;
}

.cart-drawer-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: #94a3b8;
  text-align: center;
}

.cart-empty-state .empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
  color: var(--text-muted);
}

.cart-empty-state p {
  font-size: 0.95rem;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  background: rgba(2, 44, 34, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: var(--border-radius-md);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-grow: 1;
  text-align: left;
}

.cart-item-code {
  font-size: 0.68rem;
  color: var(--secondary);
  font-family: monospace;
  font-weight: bold;
}

.cart-item-info h5 {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.cart-item-price {
  font-size: 0.9rem;
  color: var(--secondary);
  font-weight: 700;
}

.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.quantity-controls {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.qty-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.qty-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.qty-val {
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0 0.5rem;
  min-width: 20px;
  text-align: center;
}

.cart-item-remove {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-remove:hover {
  color: #ef4444;
}

.cart-item-remove i,
.cart-item-remove svg {
  width: 16px;
  height: 16px;
}

/* Checkout Form in Drawer */
.cart-checkout-form {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cart-checkout-form h4 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-align: left;
}

.cart-checkout-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.cart-checkout-form label {
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
}

.cart-checkout-form input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-main);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.cart-checkout-form input:focus {
  border-color: var(--secondary);
}

.cart-checkout-form .required {
  color: #ef4444;
}

.cart-summary-box {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 0.85rem;
}

.summary-row.total {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.05rem;
}

.summary-row.total span:last-child {
  color: var(--secondary);
}

.btn-full {
  width: 100%;
}

/* Checkout Success Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-card {
  background-color: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

.success-header {
  padding: 2rem 2rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.success-icon-ring {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px dashed var(--success);
  opacity: 0.5;
  animation: spin-halo 8s linear infinite;
}

.success-icon {
  width: 60px;
  height: 60px;
  background-color: var(--success-glow);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.success-icon i,
.success-icon svg {
  width: 32px;
  height: 32px;
}

.success-header h3 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.order-id-display {
  font-size: 0.85rem;
  color: #94a3b8;
}

.order-id-display strong {
  color: var(--secondary);
}

.success-body {
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.success-alert-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
}

.success-alert-box .alert-icon {
  color: var(--success);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.success-alert-box strong {
  color: #fff;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.2rem;
}

.success-alert-box p {
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1.4;
}

.payment-instruction {
  text-align: left;
}

.payment-instruction h4 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.payment-instruction h4 i,
.payment-instruction h4 svg {
  color: var(--secondary);
  width: 18px;
  height: 18px;
}

.payment-instruction ol {
  padding-left: 1.2rem;
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.text-highlight {
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 800;
}

.bank-accounts-modal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mini-bank-card {
  padding: 0.75rem 1rem !important;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: left;
}

.mini-bank-card .bank-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
  color: white;
  flex-shrink: 0;
}

.mini-bank-card .bank-logo.ktb {
  background-color: #00a2e5;
}

.mini-bank-card .bank-logo.kbank {
  background-color: #138f2e;
}

.mini-bank-card .bank-details {
  display: flex;
  flex-direction: column;
}

.mini-bank-card .bank-name {
  font-size: 0.82rem;
  color: #fff;
  font-weight: 600;
}

.mini-bank-card .bank-account {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--secondary);
  font-family: monospace;
}

.qr-code-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
}

.qr-code-modal h5 {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
}

.qr-frame-modal {
  background: white;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.qr-sub-text {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.modal-footer {
  padding: 1.5rem 2rem 2rem 2rem;
  display: flex;
  justify-content: center;
}

.modal-footer button {
  min-width: 140px;
}

/* ===== SLIP UPLOAD STYLES ===== */
.slip-upload-section {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.slip-upload-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
}

.slip-upload-icon-title {
  width: 28px;
  height: 28px;
  color: var(--secondary);
  flex-shrink: 0;
}

.slip-upload-header strong {
  font-size: 0.92rem;
  color: #fff;
  font-weight: 700;
  display: block;
  margin-bottom: 0.15rem;
}

.slip-upload-header p {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
}

.slip-drop-zone {
  border: 2px dashed rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.03);
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slip-drop-zone:hover {
  border-color: var(--secondary);
  background: rgba(245, 158, 11, 0.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}

.slip-drop-zone.has-image {
  border-style: solid;
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.03);
}

.slip-drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.25rem;
  text-align: center;
}

.slip-drop-placeholder span {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 600;
}

.slip-drop-placeholder small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.slip-preview-wrap {
  width: 100%;
  position: relative;
}

.slip-preview-wrap img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  background: rgba(255, 255, 255, 0.03);
}

.slip-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(220, 38, 38, 0.85);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.2s;
  z-index: 10;
}

.slip-remove-btn:hover {
  background: rgb(220, 38, 38);
  transform: scale(1.1);
}

.slip-status-msg {
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.slip-status-msg.success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.slip-status-msg.error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #f87171;
}

.slip-status-msg.loading {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--secondary);
}

.btn-slip-send {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: 10px;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.btn-slip-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.btn-slip-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-slip-send.sent {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
  color: #fff;
  pointer-events: none;
}

/* ===== END SLIP UPLOAD STYLES ===== */

.animate-pop {
  animation: pop-modal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-modal {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Toast Notification Styles */
.toast-container {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid var(--secondary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(245, 158, 11, 0.15);
  color: white;
  padding: 0.85rem 1.5rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  animation: toast-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
}

.toast i,
.toast svg {
  color: var(--success);
  width: 18px;
  height: 18px;
}

@keyframes toast-in {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/* Social & Video Links Grid */
.social-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1024px) {
  .social-links-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .social-links-grid {
    grid-template-columns: 1fr;
  }
}

.social-link-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  padding: 0.6rem 0.85rem;
  border-radius: var(--border-radius-md);
  transition: var(--transition-smooth);
  color: inherit;
}

.social-link-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
}

.social-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.social-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
}

.social-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video Grid Section */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 680px) {
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

.video-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.video-card:hover {
  transform: translateY(-5px);
  border-color: var(--secondary);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
}

.video-thumbnail-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}

.video-thumbnail-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.mock-video-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-smooth);
}

.mock-video-player.tiktok-bg {
  background: linear-gradient(135deg, #010101 0%, #121212 100%);
}

.mock-video-player.profile-bg {
  background: linear-gradient(135deg, #1877f2 0%, #0c3e7f 100%);
}

.mock-video-player .play-overlay {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.mock-video-player:hover .play-overlay {
  transform: scale(1.1);
  color: var(--secondary);
}

.mock-video-player .play-overlay i,
.mock-video-player .play-overlay svg {
  width: 50px;
  height: 50px;
}

.tiktok-brand,
.facebook-brand {
  position: absolute;
  bottom: 0.5rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
}

.tiktok-brand i,
.tiktok-brand svg,
.facebook-brand i,
.facebook-brand svg {
  width: 14px;
  height: 14px;
}

.video-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.video-platform {
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  width: max-content;
}

.video-platform i,
.video-platform svg {
  width: 12px;
  height: 12px;
}

.video-platform.youtube {
  background: rgba(255, 0, 0, 0.1);
  color: #ff4d4d;
}

.video-platform.facebook {
  background: rgba(24, 119, 242, 0.1);
  color: #4da3ff;
}

.video-platform.tiktok {
  background: rgba(0, 242, 254, 0.1);
  color: #00f2fe;
}

.video-platform.personal-fb {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
}

.video-info h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.video-info p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Registration Program Filters */
.registration-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.registration-filters .filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 0.45rem 1.1rem;
  border-radius: var(--border-radius-md);
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.registration-filters .filter-pill:hover {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
  color: var(--primary);
  transform: translateY(-1px);
}

.registration-filters .filter-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 15px var(--primary-glow);
}

/* ==================== DHARMA PROJECT CARDS ==================== */
.dharma-project-card {
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
  transition: var(--transition-smooth);
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}

.dharma-project-card:last-child {
  margin-bottom: 0;
}

.dharma-project-card.project-open {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.04);
}

.dharma-project-card.project-open:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12);
  transform: translateY(-1px);
}

.dharma-project-card.project-closed {
  border-color: var(--card-border);
  opacity: 0.65;
}

.dharma-proj-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Activity Home Card Hover Effects */
.activity-home-card {
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.activity-home-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.12), transparent);
  transition: left 0.6s ease;
}

.activity-home-card:hover::before {
  left: 100%;
}

.activity-home-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 119, 6, 0.6);
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.22);
  background: rgba(217, 119, 6, 0.07);
}

.activity-home-card:hover .activity-title {
  color: var(--secondary) !important;
}

.activity-home-card:hover .arrow-icon {
  transform: translateX(6px);
  color: var(--secondary);
}

.activity-home-card:hover .view-detail-btn {
  color: var(--secondary) !important;
}

.proj-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.proj-status-open {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.proj-status-open::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 5px;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.proj-status-closed {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.proj-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.1rem 0 0.3rem;
  line-height: 1.35;
}

.proj-dates {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.proj-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.btn-proj-close {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-family: var(--font-main);
}

.btn-proj-close svg {
  width: 13px;
  height: 13px;
}

.btn-proj-close:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.6);
  color: #92400e;
}

.btn-proj-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
  color: var(--danger);
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.btn-proj-delete svg {
  width: 13px;
  height: 13px;
}

.btn-proj-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-register-proj {
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-md);
  gap: 0.4rem;
}

/* ==================== REGISTRATION MODAL ==================== */
.reg-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.reg-modal-box {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
  transform: translateY(40px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-modal-overlay.open .reg-modal-box {
  transform: translateY(0) scale(1);
}

.reg-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 10;
}

.reg-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.reg-modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
  transform: rotate(90deg);
}

.reg-modal-body {
  padding: 1.5rem;
}

/* ==================== ESIIMSI FORTUNE SYSTEM STYLES (MONPAYANAKA THEME) ==================== */

/* ==================== ESIIMSI FORTUNE SYSTEM STYLES (MONPAYANAKA THEME) ==================== */

#tab-temple-siimsi {
  position: relative;
  background: radial-gradient(circle at 50% 30%, #0a3335 0%, #051d1e 65%, #020f10 100%);
  padding: 2rem 1rem 3rem;
  border-radius: var(--border-radius-lg);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.85);
}

.siimsi-main-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 992px) {
  .siimsi-main-layout {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

/* Left Panel: Cylinder Shaker */
.siimsi-shaker-panel {
  position: relative;
  width: 500px;
  max-width: 100%;
  aspect-ratio: 500 / 520;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 20px rgba(20, 184, 166, 0.25));
  user-select: none;
}

/* Right Panel: Direct Selection Grid */
.siimsi-grid-panel {
  position: relative;
  width: 460px;
  max-width: 100%;
  aspect-ratio: 460 / 520;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 20px rgba(20, 184, 166, 0.2));
  user-select: none;
}

/* Panel Background Images (Continuous Seamless Naga Borders) */
.siimsi-panel-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  border-radius: 16px;
}

/* Left Panel: Animated Cylinder Layer */
.siimsi-cylinder-animator {
  position: absolute;
  top: 22.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 48.8%;
  height: 55.38%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 88%;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.siimsi-cylinder-animator .siimsi-cylinder-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 15px rgba(20, 184, 166, 0.25));
}

.siimsi-cylinder-animator.shake-active {
  transition: none;
  animation: naga-ceremony-shake 0.35s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 20px rgba(250, 204, 21, 0.45));
}

@keyframes naga-ceremony-shake {
  0% {
    transform: translateX(-50%) rotate(-5deg) translateY(-2px);
  }

  25% {
    transform: translateX(-50%) rotate(2.5deg) translateY(-4px);
  }

  50% {
    transform: translateX(-50%) rotate(-4deg) translateY(-1px);
  }

  75% {
    transform: translateX(-50%) rotate(4.5deg) translateY(-5px);
  }

  100% {
    transform: translateX(-50%) rotate(-2deg) translateY(-2px);
  }
}

/* Drawn Stick Visual */
.siimsi-drawn-stick-visual {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 190px;
  z-index: 3;
}

.wood-stick.naga-gold-stick {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fef08a 0%, #eab308 40%, #ca8a04 80%, #854d0e 100%);
  border: 1px solid #fef08a;
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.7), 0 8px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}

.wood-stick.naga-gold-stick .stick-number {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.15rem;
  font-weight: 900;
  color: #713f12;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 3px;
  border-radius: 4px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.stick-slide-up {
  animation: naga-slide-up-anim 1.5s forwards cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes naga-slide-up-anim {
  0% {
    transform: translateY(110px) scale(0.9);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    transform: translateY(-80px) rotate(8deg) scale(1.04);
  }
}

/* Shake Button Hotspot Overlay */
.siimsi-shake-overlay-btn {
  position: absolute;
  top: 81.15%;
  left: 19.6%;
  width: 64.0%;
  height: 13.46%;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  outline: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.siimsi-shake-overlay-btn:hover {
  background: rgba(45, 212, 191, 0.15);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.6), inset 0 0 10px rgba(250, 204, 21, 0.5);
  transform: scale(1.02);
}

.siimsi-shake-overlay-btn:active {
  transform: scale(0.98);
}

.siimsi-shake-overlay-btn .shake-loading-badge {
  display: none;
  background: rgba(4, 47, 46, 0.95);
  color: #fef08a;
  border: 1.5px solid #facc15;
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.siimsi-shake-overlay-btn.shaking .shake-loading-badge {
  display: inline-block;
  animation: pulse-badge 0.8s infinite alternate;
}

@keyframes pulse-badge {
  0% {
    transform: scale(0.98);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.03);
    opacity: 1;
  }
}

/* Right Panel: Hotspots Container & Buttons */
.siimsi-hotspots-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.siimsi-hotspot-btn {
  position: absolute;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.siimsi-hotspot-btn:hover {
  background: rgba(251, 191, 36, 0.2);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.75), inset 0 0 8px rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
}

.siimsi-hotspot-btn:active {
  transform: scale(0.96);
}

/* Result Panel (Center Stage) */
.siimsi-result-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-column: 1 / -1;
  padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
}

/* Fortune Paper Card Design */
.siimsi-paper-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1.25rem;
}

.siimsi-paper {
  background-color: #faf6eb;
  background-image: url('webmon/thai_pattern.png');
  background-repeat: repeat;
  background-size: 160px 160px;
  color: #1e293b;
  border-radius: var(--border-radius-md);
  padding: 1rem 0.85rem;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.siimsi-paper-border-gold {
  border: 1.5px solid #b45309;
  border-radius: 8px;
  padding: 1.15rem 0.95rem;
  background: rgba(250, 246, 235, 0.96);
  position: relative;
}

/* Gold corner decorations */
.siimsi-paper-border-gold::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed rgba(180, 83, 9, 0.4);
  pointer-events: none;
}

.paper-header {
  margin-bottom: 1rem;
}

.paper-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.35rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.paper-header h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #b45309;
  margin: 0;
  letter-spacing: 0.04em;
}

.paper-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  text-transform: uppercase;
}

.fortune-number-badge {
  display: inline-flex;
  flex-direction: column;
  background: #b45309;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 8px;
  margin-bottom: 0.65rem;
  box-shadow: 0 3px 8px rgba(180, 83, 9, 0.2);
}

.fortune-number-badge span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.fortune-number-badge strong {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}

.naga-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #b45309;
  margin-bottom: 0.6rem;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.poetic-verse {
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 600;
  color: #78350f;
  line-height: 1.55;
  margin: 0.65rem 0;
  background: rgba(180, 83, 9, 0.06);
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  border-left: 3px solid #b45309;
}

.fortune-divider {
  color: #f59e0b;
  margin: 0.65rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fortune-divider svg,
.fortune-divider i {
  width: 18px;
  height: 18px;
}

.fortune-divider::before,
.fortune-divider::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.3), transparent);
  flex-grow: 1;
}

.fortune-desc {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #334155;
  text-align: left;
  margin-bottom: 0.75rem;
  white-space: pre-line;
  word-break: break-word;
}

/* Fortune Illustration */
.fortune-illustration {
  display: none;
  margin-top: 0.9rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(180, 83, 9, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  background: transparent;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.fortune-illustration img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

.paper-footer {
  border-top: 1px solid rgba(180, 83, 9, 0.15);
  padding-top: 0.55rem;
  margin-top: 0.75rem;
}

.warning-text {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.date-text {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.result-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
  justify-content: center;
  margin-top: 0.85rem;
  margin-bottom: 1.5rem;
}

.result-actions .btn {
  flex: 1;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .siimsi-paper-wrapper {
    max-width: 100%;
    margin-bottom: 0.65rem;
  }

  .siimsi-paper {
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
  }

  .siimsi-paper-border-gold {
    padding: 0.85rem 0.65rem;
  }

  .fortune-number-badge {
    padding: 3px 10px;
    margin-bottom: 0.45rem;
  }

  .fortune-number-badge span {
    font-size: 0.56rem;
  }

  .fortune-number-badge strong {
    font-size: 1.1rem;
  }

  .naga-name {
    font-size: 0.98rem;
    margin-bottom: 0.45rem;
  }

  .poetic-verse {
    font-size: 0.82rem;
    line-height: 1.48;
    padding: 0.45rem 0.65rem;
    margin: 0.5rem 0;
  }

  .fortune-divider {
    margin: 0.45rem 0;
  }

  .fortune-desc {
    font-size: 0.79rem;
    line-height: 1.52;
    margin-bottom: 0.65rem;
  }

  .fortune-illustration {
    margin-top: 0.75rem;
    margin-bottom: 0.85rem;
  }

  .fortune-illustration img {
    max-height: 270px;
  }

  .paper-footer {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
  }

  .warning-text {
    font-size: 0.58rem;
    line-height: 1.35;
  }

  .date-text {
    font-size: 0.58rem;
  }

  .result-actions {
    gap: 0.5rem;
  }

  .result-actions .btn {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .fortune-desc {
    font-size: 0.75rem;
    line-height: 1.48;
  }

  .poetic-verse {
    font-size: 0.78rem;
  }

  .naga-name {
    font-size: 0.92rem;
  }
}

#btn-print-siimsi {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fb923c !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.45);
}

#btn-print-siimsi:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.65);
}

#btn-print-siimsi *,
#btn-print-siimsi span,
#btn-print-siimsi i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  font-weight: 800 !important;
}

#btn-reset-siimsi {
  background: linear-gradient(135deg, #0d9488 0%, #065f46 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(52, 211, 153, 0.3) !important;
}

#btn-reset-siimsi:hover {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  border-color: #6ee7b7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.55) !important;
}

#btn-reset-siimsi *,
#btn-reset-siimsi span,
#btn-reset-siimsi i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

/* Print Specific CSS */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  body * {
    visibility: hidden;
  }

  #tab-temple-siimsi,
  #tab-temple-siimsi *,
  #siimsi-printable-paper,
  #siimsi-printable-paper * {
    visibility: visible;
  }

  #siimsi-printable-paper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    width: 100%;
    max-width: 500px;
    border: none;
    box-shadow: none;
    background: #faf6eb !important;
    box-sizing: border-box;
  }

  .result-actions,
  .app-header,
  .floating-cart-btn,
  .toast-container {
    display: none !important;
  }
}

/* ==========================================
   COIN TOSSING (ทำบุญเสี่ยงทาย) SYSTEM STYLES
   ========================================== */

.merit-main-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.merit-intro-card {
  padding: 1.5rem 2rem;
}

/* Coin Selection Panel */
.coin-selector-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
}

.coin-types {
  display: flex;
  gap: 1rem;
}

.coin-select-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 0.6rem 1.25rem;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.coin-select-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(217, 119, 6, 0.3);
}

.coin-select-btn.active {
  background: rgba(217, 119, 6, 0.15);
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

.coin-preview {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.coin-preview.gold {
  background: radial-gradient(circle at 35% 35%, #ffd700 0%, #b45309 100%);
  border: 1px solid #ffd700;
}

.coin-preview.silver {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #475569 100%);
  border: 1px solid #cbd5e1;
}

.coin-preview.bronze {
  background: radial-gradient(circle at 35% 35%, #fb923c 0%, #7c2d12 100%);
  border: 1px solid #ea580c;
}

/* Bowls Grid */
.bowls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.bowl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  transition: var(--transition-smooth);
}

.bowl-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.08);
}

.bowl-counter {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.bowl-counter i,
.bowl-counter svg {
  width: 13px;
  height: 13px;
  color: var(--warning);
}

.bowl-visual-container {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
}

/* 3D Alms Bowl (บาตรพระ) styling */
.bowl-3d-wrapper {
  position: relative;
  width: 120px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bowl-3d {
  position: relative;
  width: 100px;
  height: 70px;
  background: radial-gradient(circle at 50% 15%, #ffe066 0%, #cc9900 65%, #664d00 100%);
  border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%;
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.6),
    inset 0 -6px 12px rgba(0, 0, 0, 0.6),
    0 10px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  overflow: visible;
}

.bowl-rim {
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 12px;
  background: linear-gradient(to right, #997300, #ffe066, #e6b800, #ffe066, #997300);
  border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.bowl-rim::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 10%;
  width: 80%;
  height: 6px;
  background: #261a00;
  border-radius: 50%;
}

.bowl-reflection {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 15px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: rotate(-15deg);
  filter: blur(2px);
}

.bowl-base {
  position: absolute;
  bottom: -4px;
  left: 30%;
  width: 40%;
  height: 8px;
  background: linear-gradient(to right, #806000, #cc9900, #806000);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.bowl-shadow {
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 15px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.bowl-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.bowl-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.btn-toss {
  width: 100%;
}

/* Toss animation active scaling on bowl */
.bowl-bounce {
  animation: bowlBounce 0.3s ease-out;
}

@keyframes bowlBounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08) translateY(4px);
  }

  100% {
    transform: scale(1);
  }
}

/* Flying Coin Overlay */
.flying-coin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: 10000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: coinFlyAnimation 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.flying-coin::before {
  content: '฿';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.flying-coin.gold {
  background: radial-gradient(circle at 35% 35%, #ffe680 0%, #ffd700 30%, #b45309 100%);
  border: 2.5px solid #d4af37;
}

.flying-coin.silver {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 30%, #475569 100%);
  border: 2.5px solid #94a3b8;
}

.flying-coin.bronze {
  background: radial-gradient(circle at 35% 35%, #ffb07c 0%, #ea580c 30%, #7c2d12 100%);
  border: 2.5px solid #c2410c;
}

@keyframes coinFlyAnimation {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(1) rotate(0deg);
    opacity: 1;
  }

  40% {
    transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.6) rotate(180deg);
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(0.7) rotate(360deg);
    opacity: 0;
  }
}

/* Sparkle Particles */
.sparkle-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 6px var(--warning);
  animation: sparkleAnimation var(--duration) ease-out forwards;
}

@keyframes sparkleAnimation {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(var(--scale));
    opacity: 0;
  }
}

/* Blessing Popup Modal */
.blessing-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.blessing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blessing-modal-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 460px;
  background: rgba(30, 41, 59, 0.95);
  border: 2px solid rgba(217, 119, 6, 0.4);
  border-radius: var(--border-radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(217, 119, 6, 0.15);
  animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@keyframes modalZoomIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.blessing-modal .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-smooth);
}

.blessing-modal .close-btn:hover {
  color: var(--text-primary);
}

/* Scroll / Paper styling in modal */
.blessing-paper {
  background-color: #faf6eb;
  border: 1px solid rgba(180, 83, 9, 0.2);
  border-radius: var(--border-radius-md);
  padding: 1.75rem;
  color: #1e293b;
  position: relative;
  box-shadow: inset 0 0 40px rgba(180, 83, 9, 0.05);
}

.blessing-paper::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(180, 83, 9, 0.25);
  border-radius: 8px;
  pointer-events: none;
}

.blessing-header {
  text-align: center;
  margin-bottom: 1rem;
}

.blessing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(180, 83, 9, 0.1);
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.blessing-badge i,
.blessing-badge svg {
  width: 11px;
  height: 11px;
}

.blessing-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--secondary);
  margin: 0;
}

.blessing-divider {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.3), transparent);
  margin-bottom: 1.25rem;
}

.blessing-body {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 500;
  color: #2c3e50;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}

.blessing-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.72rem;
  color: #7f8c8d;
  font-weight: 600;
}

/* Coin Shelf & Interactive Coins */
.shelf-coin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.4);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shelf-coin::before {
  content: '฿';
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.shelf-coin.gold {
  background: radial-gradient(circle at 35% 35%, #ffe680 0%, #ffd700 30%, #b45309 100%);
  border: 2px solid #d4af37;
}

.shelf-coin.silver {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 30%, #475569 100%);
  border: 2px solid #94a3b8;
}

.shelf-coin.bronze {
  background: radial-gradient(circle at 35% 35%, #ffb07c 0%, #ea580c 30%, #7c2d12 100%);
  border: 2px solid #c2410c;
}

.shelf-coin.used {
  filter: grayscale(100%);
  opacity: 0.25;
  transform: scale(0.9);
  box-shadow: none;
}

.shelf-coin:not(.used):hover {
  transform: translateY(-8px) scale(1.1);
  box-shadow: 0 8px 12px rgba(217, 119, 6, 0.3);
}

/* Aiming Path SVG */
#aiming-svg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
}

.aiming-path {
  fill: none;
  stroke: var(--warning);
  stroke-width: 2.5;
  stroke-dasharray: 6, 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--warning));
  animation: dashMove 0.8s linear infinite;
  transition: opacity 0.3s ease;
}

@keyframes dashMove {
  to {
    stroke-dashoffset: -20;
  }
}

/* Missed Coin Bounce Animation */
.flying-coin.miss {
  animation: coinMissAnimation 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes coinMissAnimation {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(1) rotate(0deg);
    opacity: 1;
  }

  35% {
    transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.6) rotate(180deg);
  }

  65% {
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(0.95) rotate(320deg);
    opacity: 1;
  }

  /* Hit rim, bounce off */
  80% {
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) scale(0.8) rotate(420deg);
    opacity: 0.9;
  }

  /* Fall to bottom */
  100% {
    transform: translate3d(var(--bounce-x), calc(var(--bounce-y) + 300px), 0) scale(0.6) rotate(540deg);
    opacity: 0;
  }
}

/* Merit Modal Overlay & Content */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 1.5rem;
}

/* Inline Edit Row Styles */
.inline-edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.inline-edit-input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.inline-edit-row td {
  padding: 8px 4px !important;
  vertical-align: middle;
}

.inline-edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* ==========================================================================
   INTERACTIVE MAP & NAVIGATION SYSTEM STYLES
   ========================================================================== */
.map-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
}

.map-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.map-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1024 / 819;
  /* Standard ratio of user cartoon map */
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.map-bg-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Map Markers / Pins */
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-pin::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  z-index: 1;
}

.map-pin:hover {
  transform: translate(-50%, -110%) scale(1.15);
  z-index: 20;
}

.map-pin.active {
  transform: translate(-50%, -110%) scale(1.2);
  z-index: 25;
}

.pin-icon-wrapper {
  background: var(--primary);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 1.5px solid white;
  position: relative;
  z-index: 2;
}

.pin-icon-wrapper i,
.pin-icon-wrapper svg {
  transform: rotate(45deg);
  width: 9px;
  height: 9px;
}

.map-pin.active .pin-icon-wrapper {
  background: var(--danger);
  animation: bouncePin 1s infinite alternate;
}

.pin-label {
  display: none !important;
}

.map-pin:hover .pin-label,
.map-pin.active .pin-label {
  display: none !important;
}

/* Pulsing User Live Location Pin */
.user-live-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  z-index: 30;
  pointer-events: none;
}

.user-dot {
  width: 14px;
  height: 14px;
  background: #3b82f6;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}

.user-pulse {
  width: 24px;
  height: 24px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: gpsPulse 2s infinite ease-out;
  opacity: 0;
}

/* Panel & Details Card styling */
.map-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.map-detail-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  color: var(--text-primary);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: var(--transition-smooth);
}

.map-detail-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0f172a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.map-controls {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.8rem;
  justify-content: center;
}

/* Animations */
@keyframes bouncePin {
  from {
    transform: rotate(-45deg) translate(0, 0);
  }

  to {
    transform: rotate(-45deg) translate(-4px, 4px);
  }
}

@keyframes gpsPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* Mobile Responsive Top Navigation */
@media (max-width: 992px) {
  .app-header {
    padding: 0.5rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  /* Hide desktop horizontal menu on tablets and phones — mobile bottom nav and drawer handle navigation */
  .nav-menu.horizontal {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
  }

  .header-widgets {
    display: none !important;
  }

  .dropdown-content::before {
    display: none !important;
  }

  .dropdown-content .nav-btn {
    width: auto !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    border-left: none !important;
    border-radius: var(--border-radius-md) !important;
  }

  .dropdown-content .nav-btn.active {
    background: rgba(245, 158, 11, 0.08) !important;
    border-bottom: 2px solid var(--secondary) !important;
  }
}

/* Universal Mobile Responsive Overrides */
@media (max-width: 1024px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-container,
  .app-container.vertical {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .main-content,
  .app-container.vertical .main-content {
    padding: 1.25rem 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
    flex-grow: 1 !important;
  }

  .card,
  .glass-card {
    padding: 1.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .temple-hero {
    min-height: 400px !important;
    padding: 2.5rem 1.5rem !important;
  }

  .temple-hero h2 {
    font-size: 2.2rem !important;
  }

  .temple-hero p {
    font-size: 1.1rem !important;
  }

  .temple-hero .hero-badge {
    font-size: 3rem !important;
  }

  video,
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  iframe {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {

  .main-content,
  .app-container.vertical .main-content {
    padding: 1rem 0.5rem 2.5rem 0.5rem !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: auto !important;
    flex-grow: 1 !important;
  }

  .card,
  .glass-card {
    padding: 1rem !important;
  }

  .temple-hero {
    min-height: 300px !important;
    padding: 2rem 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: var(--border-radius-md) !important;
  }

  .temple-hero h2 {
    font-size: 1.8rem !important;
  }

  .temple-hero p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .temple-hero .hero-badge {
    font-size: 2.2rem !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent side borders and margins from causing overflow, enable natural vertical scrolling */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
  }

  .app-container,
  .app-container.vertical {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .main-content,
  .app-container.vertical .main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
    flex-grow: 1 !important;
    padding-bottom: 3rem !important;
  }

  .temple-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .temple-col,
  .card,
  .glass-card,
  .video-grid,
  .video-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile Header */
  .app-header {
    padding: 0.5rem 1rem !important;
  }

  .header-container {
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }

  .nav-menu.horizontal {
    display: none !important;
  }

  .header-widgets {
    display: none !important;
  }

  /* Modal Mobile Fixes */
  .modal-content,
  .blessing-modal-content {
    width: calc(100% - 2rem) !important;
    max-width: 100% !important;
    margin: 1rem auto !important;
    box-sizing: border-box !important;
  }

  .form-row,
  .modal-body .form-row {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Make map edge-to-edge on mobile to maximize size without scrolling */
  .map-wrapper {
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    height: 60vh !important;
    box-sizing: border-box;
  }

  .map-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -12;
  }
}

/* 3D Map Mode (Option A) */
.map-wrapper {
  perspective: 1200px;
}

.map-wrapper.mode-3d .map-container {
  --map-rot-z: -15deg;
  transform: rotateX(50deg) rotateZ(var(--map-rot-z));
  transform-style: preserve-3d;
  box-shadow: -15px 25px 40px rgba(0, 0, 0, 0.4) !important;
  /* Disable transition on transform so slider feels responsive instantly */
  transition: transform 0.1s linear;
}

.map-wrapper:not(.mode-3d) .map-container {
  transition: transform 0.6s ease;
}

.map-wrapper.mode-3d .map-pin {
  transform: translate(-50%, -100%) rotateZ(calc(var(--map-rot-z) * -1)) rotateX(-50deg) !important;
  transition: transform 0.1s linear;
}

.map-wrapper:not(.mode-3d) .map-pin {
  transition: transform 0.6s ease;
}

.map-wrapper.mode-3d .user-live-pin {
  transform: translate(-50%, -50%) rotateZ(calc(var(--map-rot-z) * -1)) rotateX(-50deg) !important;
  transition: transform 0.1s linear;
}

/* ==========================================================================
   Room Booking & Maintenance Styles
   ========================================================================== */
.room-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  margin-top: 0.5rem;
}

.room-badge.Available {
  background-color: var(--success);
}

.room-badge.Occupied {
  background-color: var(--danger);
}

.room-badge.Maintenance {
  background-color: var(--warning);
  color: #000;
}

.room-badge.Closed {
  background-color: #64748b;
}

/* FullCalendar Dark Theme Overrides */
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.fc-theme-standard .fc-scrollgrid {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.fc-daygrid-day-number,
.fc-col-header-cell-cushion {
  color: var(--text-color) !important;
  text-decoration: none !important;
}

.fc .fc-toolbar-title {
  color: var(--text-color);
  font-size: 1.2rem;
}

.fc .fc-button-primary {
  background-color: var(--card-bg) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text-color) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.fc-event {
  cursor: pointer;
  border-radius: 4px;
}


/* ==========================================================================
   Temple Rules Styling 
   ========================================================================== */
.rule-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  border-radius: 16px;
  margin-bottom: 2rem;
  border: 1px solid rgba(217, 119, 6, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.rule-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.4) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rule-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.15);
  border-color: rgba(217, 119, 6, 0.4);
}

.rule-card:hover::before {
  opacity: 1;
}

.rule-content {
  flex: 2 1 300px;
  color: var(--text-primary);
  line-height: 1.6;
}

.rule-img-container {
  flex: 1 1 250px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  position: relative;
  align-self: flex-start;
}

.rule-img-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.rule-card:hover .rule-img-container {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.rule-card:hover .rule-img-container img {
  transform: scale(1.05);
}

.rule-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.2);
  color: #2563eb;
  /* Blue primary */
  font-size: 1.35rem;
  font-weight: 700;
  position: relative;
}

.rule-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, transparent);
  transition: width 0.5s ease;
}

.rule-card:hover .rule-header::after {
  width: 150px;
}

.rule-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.rule-icon i,
.rule-icon svg {
  width: 22px;
  height: 22px;
}

.rule-card:hover .rule-icon {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.5);
}

.rule-list {
  margin: 0;
  padding-left: 1.75rem;
  color: var(--text-primary);
  line-height: 1.7;
}

.rule-list li {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.rule-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.rule-content strong {
  color: var(--secondary);
  font-size: 1.05rem;
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.rule-card {
  animation: slideUpFade 0.6s ease backwards;
}

.rule-card:nth-child(1) {
  animation-delay: 0.1s;
}

.rule-card:nth-child(2) {
  animation-delay: 0.2s;
}

.rule-card:nth-child(3) {
  animation-delay: 0.3s;
}

.rule-card:nth-child(4) {
  animation-delay: 0.4s;
}

.rule-card:nth-child(5) {
  animation-delay: 0.5s;
}

.rule-card:nth-child(6) {
  animation-delay: 0.6s;
}

.rule-card:nth-child(7) {
  animation-delay: 0.7s;
}

.rule-card:nth-child(8) {
  animation-delay: 0.8s;
}

.rule-card:nth-child(9) {
  animation-delay: 0.9s;
}

/* ==========================================================================
   History Section Styling
   ========================================================================== */
.history-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3.5rem;
  margin-top: 2rem;
}

@media (max-width: 1024px) {
  .history-layout {
    grid-template-columns: 1fr;
  }
}

.history-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-content: start;
}

@media (max-width: 1024px) {
  .history-images {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.history-img-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  background: white;
  padding: 0.4rem;
}

.history-img-item:hover {
  transform: translateY(-5px) scale(1.03) rotate(2deg);
  box-shadow: 0 15px 35px rgba(217, 119, 6, 0.2);
  z-index: 10;
}

/* Alternate rotation for Polaroid effect */
.history-img-item:nth-child(even):hover {
  transform: translateY(-5px) scale(1.03) rotate(-2deg);
}

.history-img-item img {
  width: 100%;
  height: 180px;
  /* Uniform height */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.history-img-caption {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem;
  line-height: 1.4;
}

.history-text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  color: var(--text-primary);
  line-height: 1.8;
  font-size: 1.05rem;
}

.history-inline-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1rem;
}

.history-inline-images .history-img-item img {
  height: 280px;
  /* Taller for main subject images */
}

@media (max-width: 768px) {
  .history-inline-images {
    grid-template-columns: 1fr;
  }
}

.history-section {
  position: relative;
  padding-left: 2.5rem;
  border-left: 3px solid rgba(217, 119, 6, 0.15);
  transition: border-color 0.3s ease;
}

.history-section:hover {
  border-color: rgba(217, 119, 6, 0.6);
}

/* Timeline dot */
.history-section::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.history-section:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.8);
}

.history-section-title {
  color: var(--secondary);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.history-section-title::after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.2), transparent);
}

.history-section p {
  margin-bottom: 1.25rem;
  text-indent: 2rem;
  /* Thai reading style */
  text-align: justify;
}

.history-section p:last-child {
  margin-bottom: 0;
}

.history-closing {
  margin-top: 1rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.8) 100%);
  border-radius: 16px;
  border: 1px solid rgba(217, 119, 6, 0.2);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary);
  box-shadow: 0 10px 30px rgba(217, 119, 6, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.history-closing:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(217, 119, 6, 0.15);
}

.history-closing::before {
  content: '✨';
  font-size: 4rem;
  position: absolute;
  top: -15px;
  right: -5px;
  opacity: 0.1;
  transform: rotate(15deg);
  pointer-events: none;
}

.history-closing::after {
  content: '🌸';
  font-size: 3rem;
  position: absolute;
  bottom: -10px;
  left: 10px;
  opacity: 0.08;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  /* Print styling handled by dedicated print windows */
}

/* ==========================================================================
   MODAL STYLES (Login, etc.)
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--card-bg, #1a1a1a);
  margin: 10% auto;
  padding: 2rem;
  border: 1px solid var(--card-border, #333);
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}

.modal-close {
  color: var(--text-muted, #888);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover,
.modal-close:focus {
  color: var(--text-primary, #fff);
  text-decoration: none;
}

/* ==========================================================================
   Important Documents (เอกสารสำคัญ) Styles
   ========================================================================== */
.doc-thumbnail:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--primary) !important;
}

/* Document Grid - 4 columns on desktop matching the size of the featured thumbnail */
.doc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin-top: 1.25rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {
  .doc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 768px) {
  .doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 420px) {
  .doc-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
}

.doc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 14px;
  padding: 0.65rem 0.65rem 0.85rem 0.65rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
}

.doc-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--secondary);
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.doc-card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  /* Standard portrait document A4 ratio matching .doc-thumbnail */
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.65rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  background: #ffffff;
  padding: 0.35rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Fully displays the entire certificate page without cropping */
  border-radius: 6px;
  display: block;
  transition: transform 0.3s ease;
  background: #ffffff;
}

.doc-card:hover .doc-card-image-wrap img {
  transform: scale(1.03);
}

.doc-card-image-wrap .zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(180, 83, 9, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  border-radius: 10px;
}

.doc-card-image-wrap .zoom-overlay i,
.doc-card-image-wrap .zoom-overlay svg {
  width: 32px;
  height: 32px;
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.doc-card:hover .zoom-overlay {
  opacity: 1;
}

.doc-card:hover .zoom-overlay i,
.doc-card:hover .zoom-overlay svg {
  transform: scale(1.05);
}

.doc-card span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.25s ease;
  margin-top: 0.35rem;
  line-height: 1.35;
}

.doc-card:hover span {
  color: var(--secondary);
}

/* ===== CHEDI 209 SLOTS GRID & TOOLTIP STYLES ===== */
.chedi-interactive-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: visible;
  border: 3px solid #d4af37;
  box-shadow: 0 15px 45px rgba(212, 175, 55, 0.22), 0 4px 20px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

.chedi-bg-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  border-radius: 13px;
}

.chedi-slots-grid-overlay {
  position: absolute;
  top: 12.65%;
  left: 15.55%;
  width: 71.85%;
  height: 60.84%;
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 1.5px;
  padding: 0;
  box-sizing: border-box;
}

.chedi-slot-cell {
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: transparent;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  box-sizing: border-box;
}

.chedi-slot-cell:hover {
  background: rgba(251, 191, 36, 0.35);
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  z-index: 50;
  transform: scale(1.12);
}

.chedi-slot-cell.booked {
  background: transparent;
  border-color: rgba(212, 175, 55, 0.5);
}

.chedi-slot-cell.booked:hover {
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}

/* ช่องจองแล้ว (รออนุมัติ): สีเหลืองเด่นชัด + สัญลักษณ์การจอง (พระยังไม่แสดงขึ้นมา) */
.chedi-slot-cell.pending {
  background: rgba(254, 240, 138, 0.75) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: inset 0 0 6px rgba(245, 158, 11, 0.6), 0 0 6px rgba(251, 191, 36, 0.5);
  position: relative;
  overflow: hidden;
  animation: pendingYellowGlow 2.5s infinite ease-in-out;
}

.chedi-slot-cell.pending:hover {
  background: rgba(253, 224, 71, 0.95) !important;
  border-color: #b45309 !important;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.8) !important;
  transform: scale(1.15);
  z-index: 60;
}

@keyframes pendingYellowGlow {

  0%,
  100% {
    box-shadow: inset 0 0 4px rgba(245, 158, 11, 0.5), 0 0 4px rgba(251, 191, 36, 0.4);
  }

  50% {
    box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.85), 0 0 8px rgba(251, 191, 36, 0.8);
  }
}

.chedi-slot-pending-symbol {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1px;
  box-sizing: border-box;
}

.chedi-slot-pending-icon-symbol {
  font-size: 13px;
  line-height: 1;
  color: #b45309;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
  animation: pendingPulseSymbol 2s infinite ease-in-out;
}

@keyframes pendingPulseSymbol {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

.chedi-slot-pending-text-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 7px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
  letter-spacing: -0.2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  border: 0.5px solid #ffffff;
  margin-top: 1px;
}

/* Notification Bell for Staff & Admin */
.chedi-bell-btn {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
  border: 1.5px solid #d4af37;
  color: #b45309;
  border-radius: 10px;
  padding: 0.55rem 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.15);
  font-weight: 700;
  font-size: 0.86rem;
  user-select: none;
}

.chedi-bell-btn:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #b45309;
  color: #92400e;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.chedi-bell-btn.has-pending i {
  animation: chediBellRing 2.8s infinite ease-in-out;
  transform-origin: top center;
  color: #d97706;
}

@keyframes chediBellRing {

  0%,
  75%,
  100% {
    transform: rotate(0);
  }

  78% {
    transform: rotate(15deg);
  }

  82% {
    transform: rotate(-13deg);
  }

  86% {
    transform: rotate(11deg);
  }

  90% {
    transform: rotate(-9deg);
  }

  94% {
    transform: rotate(5deg);
  }

  97% {
    transform: rotate(-2deg);
  }
}

.chedi-pending-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5);
  border: 2px solid #ffffff;
  line-height: 1;
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.chedi-slot-buddha-icon-css {
  width: 75%;
  height: 75%;
  align-self: flex-end;
  margin-bottom: 2px;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.7));
  display: block;
}

.chedi-slot-num-badge {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 8.5px;
  font-weight: 700;
  color: #92400e;
  text-shadow: 0 0 2px #ffffff, 0 0 3px #ffffff;
  pointer-events: none;
  z-index: 10;
  line-height: 1;
}

@keyframes pulseGoldGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.6));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(255, 215, 0, 1));
  }
}

/* Tooltip Styles */
.chedi-slot-cell .chedi-slot-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: 230px;
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  color: #0f172a;
  font-size: 0.82rem;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100;
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.chedi-slot-cell:hover .chedi-slot-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.chedi-slot-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: #d4af37 transparent transparent transparent;
}

/* ==========================================================================
   Chedi Host 209 Slots: Mobile Responsive Layout (Red Circle -> Blue Circle)
   ========================================================================== */
.chedi-image-frame {
  position: relative;
  width: 100%;
}

.chedi-mobile-img-label,
.chedi-mobile-slots-header,
.chedi-mobile-instruction {
  display: none;
}

.chedi-slot-status-label {
  display: none;
}

@media (max-width: 768px) {
  .chedi-desktop-instruction {
    display: none !important;
  }

  .chedi-mobile-instruction {
    display: inline !important;
  }

  /* On mobile: container breaks out of absolute layout to vertical flow */
  .chedi-interactive-container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .chedi-image-frame {
    position: relative !important;
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 2px solid #d4af37 !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.22) !important;
    background: #ffffff !important;
  }

  .chedi-bg-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  .chedi-mobile-img-label {
    display: block !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    color: #fde68a !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 6px 10px !important;
    letter-spacing: 0.2px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
  }

  .chedi-mobile-slots-header {
    display: block !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
    border-left: 4px solid #d97706 !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  body.dark-mode .chedi-mobile-slots-header {
    background: #1e293b !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
  }

  /* The 209 Slots Grid is placed BELOW the image on phone (Blue Circle Area) */
  .chedi-slots-grid-overlay {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 7px !important;
    padding: 0.85rem !important;
    background: #ffffff !important;
    border: 2px solid #d4af37 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15) !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .chedi-slots-grid-overlay {
    background: #1e293b !important;
  }

  .chedi-slot-cell {
    min-height: 52px !important;
    height: auto !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    padding: 5px 2px !important;
    cursor: pointer !important;
    transform: none !important;
  }

  body.dark-mode .chedi-slot-cell {
    background: #0f172a !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
  }

  .chedi-slot-cell:active {
    transform: scale(0.94) !important;
    background: rgba(245, 158, 11, 0.15) !important;
  }

  .chedi-slot-cell.booked {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2) !important;
  }

  body.dark-mode .chedi-slot-cell.booked {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%) !important;
    border-color: #f59e0b !important;
  }

  .chedi-slot-cell .chedi-slot-buddha-icon-css {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 2px !important;
    filter: drop-shadow(0 1px 3px rgba(217, 119, 6, 0.4)) !important;
  }

  .chedi-slot-cell .chedi-slot-num-badge {
    position: static !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-shadow: none !important;
    line-height: 1.1 !important;
  }

  body.dark-mode .chedi-slot-cell .chedi-slot-num-badge {
    color: #f8fafc !important;
  }

  .chedi-slot-cell.booked .chedi-slot-num-badge {
    color: #b45309 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  body.dark-mode .chedi-slot-cell.booked .chedi-slot-num-badge {
    color: #fde68a !important;
  }

  .chedi-slot-status-label {
    display: block !important;
    font-size: 9px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
    font-weight: 700 !important;
  }

  .chedi-slot-status-label.vacant {
    color: #059669 !important;
  }

  .chedi-slot-status-label.booked {
    color: #b45309 !important;
  }

  body.dark-mode .chedi-slot-status-label.booked {
    color: #fde68a !important;
  }

  /* Disable hover tooltip on mobile since it blocks touch interaction */
  .chedi-slot-cell .chedi-slot-tooltip {
    display: none !important;
  }
}

/* Login Button in Horizontal Navigation Bar (Clean Transparent Style) */
.nav-menu.horizontal .nav-btn.btn-login-nav {
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: var(--border-radius-md);
  margin-left: 0.25rem;
  padding: 0.6rem 0.85rem;
  box-shadow: none !important;
  transition: var(--transition-smooth);
}

.nav-menu.horizontal .nav-btn.btn-login-nav:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-primary);
  border-color: transparent !important;
  transform: none;
}

body.dark-mode .nav-menu.horizontal .nav-btn.btn-login-nav:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   CHECKIN V2 — Face Scan + GPS System
   ========================================================================== */

.checkin-v2-wrapper {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.checkin-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.checkin-v2-title-block {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.checkin-v2-title-block h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, var(--primary), #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.checkin-zone-text {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.checkin-pulse-icon {
  position: relative;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(251, 191, 36, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(217, 119, 6, 0.4);
  flex-shrink: 0;
}

.checkin-pulse-icon i,
.checkin-pulse-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.ping-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(217, 119, 6, 0.35);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  75%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* GPS Badge */
.gps-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.4s;
  white-space: nowrap;
}

.gps-badge.ok {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.gps-badge.fail {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.gps-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.4s;
}

.gps-badge.ok .gps-dot {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: pulse-dot 1.5s infinite;
}

.gps-badge.fail .gps-dot {
  background: var(--danger);
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* 2-col grid */
.checkin-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .checkin-v2-grid {
    grid-template-columns: 1fr;
  }
}

/* Camera Card */
.checkin-cam-card {
  padding: 1.5rem;
}

/* Steps */
.checkin-steps {
  display: flex;
  align-items: center;
  margin-bottom: 1.75rem;
  gap: 0;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.3s;
}

.step.active,
.step.done {
  color: var(--primary);
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s;
  flex-shrink: 0;
}

.step.active .step-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.5);
}

.step.done .step-num {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.step-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0.5rem;
  min-width: 20px;
  transition: background 0.3s;
}

.step-line.done {
  background: var(--success);
}

/* Step Panels */
.step-panel {
  animation: fadeInUp 0.35s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Location Preview */
.location-map-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--border-radius-md);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
  min-height: 110px;
}

.location-icon-big {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.4s;
}

.location-icon-big.ok {
  color: var(--success);
}

.location-icon-big.fail {
  color: var(--danger);
}

.location-icon-big.loading {
  color: var(--primary);
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.location-distance-info p {
  margin: 0;
  line-height: 1.5;
}

.location-distance-info strong {
  font-size: 1.4rem;
  color: var(--primary);
}

/* Camera */
.camera-wrapper {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4/3;
  max-height: 340px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
  /* Mirror for selfie feel */
}

.camera-face-guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.face-oval {
  width: 160px;
  height: 210px;
  border: 3px solid rgba(217, 119, 6, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  animation: facePulse 2s ease-in-out infinite;
}

@keyframes facePulse {

  0%,
  100% {
    border-color: rgba(217, 119, 6, 0.8);
  }

  50% {
    border-color: rgba(251, 191, 36, 1);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35), 0 0 20px rgba(251, 191, 36, 0.4);
  }
}

@keyframes scanBlink {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

.camera-captured {
  position: absolute;
  inset: 0;
  background: #000;
}

.camera-captured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.captured-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Identity Row (Step 3) */
.identity-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.confirm-face-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
  flex-shrink: 0;
  transform: scaleX(-1);
}

.identity-row>div {
  flex: 1;
}

/* Mode Toggle */
.mode-toggle {
  display: flex;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 1rem;
}

.mode-btn {
  flex: 1;
  padding: 0.65rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.25s;
}

.mode-btn.active {
  background: rgba(217, 119, 6, 0.2);
  color: var(--primary);
}

.mode-btn[data-mode="checkout"].active {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Result Panel */
.checkin-result-inner {
  text-align: center;
  padding: 1.5rem 0;
}

.result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 3px solid var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--success);
  animation: bounceIn 0.5s ease-out;
}

.result-icon i,
.result-icon svg {
  width: 36px;
  height: 36px;
}

.result-icon.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.result-details {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  text-align: left;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row span {
  color: var(--text-muted);
}

.detail-row strong {
  color: var(--text-primary);
}

/* Today's Attendance Log Card */
.checkin-log-card {
  padding: 1.25rem;
  max-height: 620px;
  overflow-y: auto;
}

.today-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
  max-height: 380px;
  overflow-y: auto;
}

.today-list-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2rem 0;
}

.attendance-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.2s;
}

.attendance-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.attendance-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
}

.attendance-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.attendance-avatar .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.attendance-info {
  flex: 1;
  min-width: 0;
}

.attendance-info .att-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-info .att-dept {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.attendance-times {
  text-align: right;
  flex-shrink: 0;
}

.att-time-in {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--success);
}

.att-time-out {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.att-status-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
}

.att-status-badge.in {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.att-status-badge.out {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Dharma Analytics Filter Toggle System */
.btn-filter-type {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

.btn-filter-type:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.btn-filter-type.active {
  background: var(--secondary);
  color: #000;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* ==========================================================================
   Naga Merit Ritual Styling (ทำบุญเสี่ยงทาย โยนเหรียญใส่บาตรพญานาคราช)
   ========================================================================== */

.naga-merit-header {
  background: linear-gradient(135deg, rgba(8, 28, 22, 0.95) 0%, rgba(15, 23, 42, 0.92) 100%),
    url('webmon/merit_altar_scene.jpg') center/cover no-repeat !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.15) !important;
}

.naga-header-emblem-bg {
  position: absolute;
  right: -25px;
  top: -35px;
  width: 240px;
  height: 240px;
  opacity: 0.12;
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

.naga-header-emblem-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.naga-header-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.naga-brand-badge {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: radial-gradient(circle, #ffffff 15%, #fef3c7 100%);
  border: 2px solid #d4af37;
  padding: 6px;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: emblemPulse 4s ease-in-out infinite;
}

@keyframes emblemPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }

  50% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.85);
  }
}

.naga-brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.naga-header-text {
  flex: 1;
}

.naga-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #fde047;
  padding: 0.25rem 0.8rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.naga-badge-pill i,
.naga-badge-pill svg {
  width: 14px;
  height: 14px;
  color: #fde047;
}

.naga-merit-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fef08a !important;
  margin: 0 0 0.4rem 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.3);
  letter-spacing: -0.02em;
}

.naga-merit-subtitle {
  color: #e2e8f0 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 850px;
}

/* Coin Selector Enhancements */
.naga-coin-selector {
  background: linear-gradient(135deg, rgba(10, 30, 24, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.selector-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fef08a;
}

.coin-icon-gold {
  color: #f59e0b;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

/* Naga Alms Bowls Grid */
.naga-bowls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.35rem !important;
}

.naga-bowl-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(8, 28, 22, 0.95) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  padding: 1.6rem 1.25rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.naga-bowl-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.4) !important;
}

.naga-bowl-card h4 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0.5rem 0 0.35rem 0 !important;
}

.naga-bowl-card p {
  font-size: 0.88rem !important;
  color: #cbd5e1 !important;
  line-height: 1.45 !important;
  min-height: 48px;
  margin-bottom: 1.25rem !important;
}

.naga-bowl-frame {
  position: relative;
  width: 155px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.naga-bowl-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
  transition: transform 0.35s ease;
  position: relative;
  z-index: 2;
}

.naga-bowl-card:hover .naga-bowl-img {
  transform: scale(1.06);
}

.naga-bowl-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.naga-bowl-card:hover .naga-bowl-glow {
  opacity: 0.85;
  transform: scale(1.1);
}

.luck-theme .naga-bowl-glow {
  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
}

.wealth-theme .naga-bowl-glow {
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
}

.love-theme .naga-bowl-glow {
  background: radial-gradient(circle, #f43f5e 0%, transparent 70%);
}

.health-theme .naga-bowl-glow {
  background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
}

.destiny-theme .naga-bowl-glow {
  background: radial-gradient(circle, #c084fc 0%, transparent 70%);
}

/* Precise Drop Target Over Mouth of Sacred Naga Bowl */
.naga-bowl-frame .bowl-3d {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 28px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 3;
  pointer-events: none;
}

.naga-bowl-frame .bowl-rim {
  display: none !important;
}

/* Auspicious Colors & Buttons */
.luck-title {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.wealth-title {
  color: #34d399 !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.love-title {
  color: #fb7185 !important;
  text-shadow: 0 0 10px rgba(251, 113, 133, 0.4);
}

.health-title {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.destiny-title {
  color: #c084fc !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

.luck-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  border-color: #fbbf24 !important;
}

.wealth-btn {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%) !important;
  border-color: #34d399 !important;
}

.love-btn {
  background: linear-gradient(135deg, #f43f5e 0%, #9f1239 100%) !important;
  border-color: #fb7185 !important;
}

.health-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
}

.destiny-btn {
  background: linear-gradient(135deg, #9333ea 0%, #581c87 100%) !important;
  border-color: #c084fc !important;
}

/* ==========================================================================
   Sacred Naga Merit Coin (เหรียญอธิษฐานพญานาคราช ธรรมสถานม่อนพญานาคราช)
   ========================================================================== */

.shelf-coin {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-image: url('webmon/naga_merit_coin.jpg') !important;
  background-size: 112% 112% !important;
  background-position: center !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.6) !important;
  position: relative !important;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
}

.shelf-coin::before {
  display: none !important;
}

.shelf-coin.gold {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
}

.shelf-coin.silver {
  filter: grayscale(100%) brightness(1.25) contrast(1.1) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 0 14px rgba(226, 232, 240, 0.5) !important;
}

.shelf-coin.bronze {
  filter: sepia(0.85) hue-rotate(-25deg) saturate(1.5) brightness(0.95) !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.5) !important;
}

.shelf-coin.used {
  filter: grayscale(100%) brightness(0.35) !important;
  opacity: 0.25 !important;
  transform: scale(0.85) !important;
  box-shadow: none !important;
}

.shelf-coin:not(.used):hover {
  transform: translateY(-8px) scale(1.18) rotate(6deg) !important;
  box-shadow: 0 12px 24px rgba(255, 215, 0, 0.7) !important;
}

/* Flying Naga Coin */
.flying-coin {
  position: absolute;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  z-index: 10000;
  background-image: url('webmon/naga_merit_coin.jpg') !important;
  background-size: 112% 112% !important;
  background-position: center !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.85), 0 8px 20px rgba(0, 0, 0, 0.6) !important;
  animation: coinFlyAnimation 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.flying-coin::before {
  display: none !important;
}

.flying-coin.gold {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
}

.flying-coin.silver {
  filter: grayscale(100%) brightness(1.25) contrast(1.1) !important;
  border-color: #e2e8f0 !important;
}

.flying-coin.bronze {
  filter: sepia(0.85) hue-rotate(-25deg) saturate(1.5) brightness(0.95) !important;
  border-color: #f97316 !important;
}

@keyframes coinFlyAnimation {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(0.9) rotate(0deg);
    opacity: 1;
  }

  35% {
    transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.5) rotate(270deg);
    box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 14px 28px rgba(0, 0, 0, 0.7);
  }

  85% {
    opacity: 1;
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(1) rotate(540deg);
  }

  100% {
    transform: translate3d(var(--end-x), calc(var(--end-y) + 12px), 0) scale(0.6) rotate(720deg);
    opacity: 0;
  }
}


/* ==========================================================================
   Ultra-Clear Typography & Contrast for Merit Tab (ปรับตัวหนังสือให้ชัดเจนสูงสุด)
   ========================================================================== */

/* Header text clarity with frosted dark backdrop */
.naga-header-text {
  background: rgba(4, 18, 14, 0.85);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 18px;
  padding: 1.25rem 1.75rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.naga-badge-pill {
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1.5px solid #fbbf24 !important;
  color: #fde047 !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  padding: 0.3rem 0.9rem !important;
}

.naga-merit-title {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #fef08a !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 215, 0, 0.7) !important;
  letter-spacing: -0.01em !important;
}

.naga-merit-subtitle {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Coin Selector text clarity */
.selector-label {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.coin-select-btn {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  background: rgba(217, 119, 6, 0.3) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5) !important;
  padding: 0.7rem 1.4rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Bowl Counter text clarity */
.bowl-counter {
  background: rgba(0, 0, 0, 0.85) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.6) !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  padding: 0.4rem 0.95rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.bowl-counter span {
  color: #ffd700 !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}

/* Bowl Titles - Extra Crisp and Bold */
.naga-bowl-card h4 {
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  margin: 0.6rem 0 0.4rem 0 !important;
}

.luck-title {
  color: #ffd700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 215, 0, 0.9) !important;
}

.wealth-title {
  color: #4ade80 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 16px rgba(74, 222, 128, 0.9) !important;
}

.love-title {
  color: #fb7185 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 16px rgba(251, 113, 133, 0.9) !important;
}

.health-title {
  color: #38bdf8 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 16px rgba(56, 189, 248, 0.9) !important;
}

.destiny-title {
  color: #c084fc !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 16px rgba(192, 132, 252, 0.9) !important;
}

/* Bowl Description Text - Crisp White with Backing Shadow */
.naga-bowl-card p {
  font-size: 0.98rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  min-height: 52px !important;
  margin-bottom: 1.35rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7) !important;
}

/* Toss Button - High Prominence */
.btn-toss {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  padding: 0.75rem 1.4rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 215, 0, 0.35) !important;
  border-width: 2px !important;
}

/* Coin Shelf Title Text */
.merit-coins-shelf h5 {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

#coin-stock-text {
  color: #ffd700 !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important;
}

/* Blessing Modal Text Clarity */
.blessing-paper {
  background: #fffbeb !important;
  border: 2px solid #d97706 !important;
}

.blessing-badge {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #78350f !important;
  background: rgba(245, 158, 11, 0.25) !important;
  border: 1px solid rgba(180, 83, 9, 0.4) !important;
}

.blessing-header h3 {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: #78350f !important;
}

.blessing-body {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1c1917 !important;
  line-height: 1.75 !important;
}

.blessing-footer {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
}


/* ==========================================================================
   Enlarged E-Donation QR Code (ขยายคิวอาร์โค้ด E-Donation ให้ใหญ่ชัดเจน)
   ========================================================================== */

.payment-info-layout {
  display: flex !important;
  flex-direction: column !important;
  max-width: 680px !important;
  margin: 1.5rem auto 0 auto !important;
  gap: 1.25rem !important;
}

.payment-info-layout .bank-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  width: 100% !important;
}

.qr-code-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 2rem 1.5rem !important;
  background: linear-gradient(135deg, rgba(12, 35, 28, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 2px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 175, 55, 0.2) !important;
}

.qr-frame {
  background-color: #ffffff !important;
  padding: 1.25rem !important;
  border-radius: 20px !important;
  margin: 1rem auto 1.25rem auto !important;
  width: 320px !important;
  height: 320px !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 215, 0, 0.4) !important;
  border: 3px solid #d4af37 !important;
}

.qr-frame::before {
  inset: -7px !important;
  border: 2px dashed rgba(212, 175, 55, 0.75) !important;
  border-radius: 26px !important;
}

.qr-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

.qr-frame svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 280px !important;
  max-height: 280px !important;
}

/* Modal Checkout QR Enlargement */
.qr-frame-modal {
  width: 240px !important;
  height: 240px !important;
  max-width: 100% !important;
  padding: 10px !important;
  border: 2px solid #d4af37 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.qr-frame-modal img,
.qr-frame-modal svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}


/* ==========================================================================
   Clean White & Black Simple Theme for Payment & E-Donation (เรียบง่าย พื้นขาว ตัวหนังสือดำ)
   ========================================================================== */

.payment-donation-card-white {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06) !important;
  padding: 2rem !important;
}

.payment-donation-card-white h3 {
  color: #0f172a !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.35rem !important;
}

.payment-donation-card-white>p.panel-info {
  color: #475569 !important;
  font-size: 0.95rem !important;
}

.payment-donation-card-white .bank-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.5rem !important;
}

.payment-donation-card-white .bank-card .bank-name {
  color: #64748b !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.payment-donation-card-white .bank-card .bank-account {
  color: #0f172a !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.payment-donation-card-white .bank-card .bank-holder {
  color: #0284c7 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

.payment-donation-card-white .qr-code-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 1.5rem !important;
}

.payment-donation-card-white .qr-code-section h4 {
  color: #0f172a !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin-bottom: 0.35rem !important;
}

.payment-donation-card-white .qr-code-section p {
  color: #475569 !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  margin-bottom: 1rem !important;
}

.payment-donation-card-white .qr-frame {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  margin: 0.75rem auto 1rem auto !important;
  width: 300px !important;
  height: 300px !important;
  padding: 1rem !important;
}

.payment-donation-card-white .qr-frame::before {
  display: none !important;
}

.payment-donation-card-white .qr-code-section span {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   Bank Logo Styling
   ========================================================================== */

.bank-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d97706, #b45309);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #ffffff;
  font-size: 1.45rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.bank-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}


/* ==========================================================================
   Dharma Analytics Registrations Table Styling
   ========================================================================== */

#da-registration-program-filters .filter-pill {
  background: #f3f4f6 !important;
  border: 1.5px solid #e5e7eb !important;
  color: #4b5563 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#da-registration-program-filters .filter-pill:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

#da-registration-program-filters .filter-pill.active {
  background: #b45309 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3) !important;
}

/* ==========================================================================
   MOBILE PWA — Bottom Navigation Bar
   ========================================================================== */

/* Hide Bottom Nav on desktop (เปิดในคอมให้ซ่อนเมนูแท็บข้างล่าง) */
#mobile-bottom-nav {
  display: none !important;
}

/* Base Bottom Nav & Button Styles (แบบไร้กรอบ ไร้เส้นกั้น เรียบหรูตามแบบ) */
#mobile-bottom-nav,
body.dark-mode #mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  background: #ffffff !important;
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
  z-index: 9500 !important;
  padding: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  display: none !important;
  align-items: stretch !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mob-nav-btn,
body.dark-mode .mob-nav-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #475569 !important;
  font-family: var(--font-main) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.15rem !important;
  transition: all 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
}

.mob-nav-btn:hover,
body.dark-mode .mob-nav-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #d97706 !important;
}

.mob-nav-btn span,
body.dark-mode .mob-nav-btn span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  font-size: 0.65rem !important;
  color: inherit !important;
}

.mob-nav-btn svg,
.mob-nav-btn i,
body.dark-mode .mob-nav-btn svg,
body.dark-mode .mob-nav-btn i {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

.mob-nav-btn:active svg,
.mob-nav-btn:active i {
  transform: scale(0.88) !important;
}

.mob-nav-btn.active,
body.dark-mode .mob-nav-btn.active {
  color: #d97706 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.mob-nav-btn.active svg,
.mob-nav-btn.active i {
  color: #d97706 !important;
  filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.4)) !important;
}

.mob-nav-btn.active::after,
body.dark-mode .mob-nav-btn.active::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 0 0 4px 4px !important;
  background: #d97706 !important;
}

/* White Theme for Mobile Drawer (พื้นหลังเมนูมือถือสีขาว) */
#mobile-drawer,
body.dark-mode #mobile-drawer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

#mobile-drawer-header,
body.dark-mode #mobile-drawer-header {
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

#mobile-drawer-header div[style*="font-weight: 800"] {
  color: #0f172a !important;
}

#mobile-drawer-header div[style*="color: var(--text-muted)"] {
  color: #64748b !important;
}

#mobile-drawer-header button {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

#mobile-drawer-header button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

#mobile-drawer-handle,
body.dark-mode #mobile-drawer-handle {
  background: #cbd5e1 !important;
}

.mob-drawer-label,
body.dark-mode .mob-drawer-label {
  color: #64748b !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
}

.mob-drawer-item,
body.dark-mode .mob-drawer-item {
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  font-weight: 700 !important;
}

.mob-drawer-item span {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.mob-drawer-item:hover,
.mob-drawer-item:active,
body.dark-mode .mob-drawer-item:hover,
body.dark-mode .mob-drawer-item:active {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18) !important;
}

.mob-drawer-item:hover span,
.mob-drawer-item:active span,
body.dark-mode .mob-drawer-item:hover span,
body.dark-mode .mob-drawer-item:active span {
  color: #b45309 !important;
}

/* User Card in Mobile Drawer */
.mob-drawer-user-card,
body.dark-mode .mob-drawer-user-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.mob-drawer-user-name,
body.dark-mode .mob-drawer-user-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* ===== Scroll-to-top button ===== */
#scroll-to-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.15rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
  z-index: 9000;
  transition: all 0.25s ease;
}

#scroll-to-top-btn:hover {
  transform: translateY(-3px);
  background: var(--secondary);
}

#scroll-to-top-btn svg {
  width: 22px;
  height: 22px;
}

/* Mobile View Adjustments (max-width: 768px) */
@media (max-width: 768px) {

  /* Show Bottom Nav on Mobile (เปิดในโทรศัพท์ให้แสดงตามเดิม) */
  #mobile-bottom-nav,
  body.dark-mode #mobile-bottom-nav {
    display: flex !important;
  }

  /* Safe padding so all content, forms & buttons span full mobile width and scroll cleanly above bottom bar */
  .main-content,
  .app-container.vertical .main-content {
    padding: 0.75rem 0.5rem calc(64px + env(safe-area-inset-bottom, 0px) + 1.5rem) 0.5rem !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Floating action buttons positioned above bottom nav */
  #scroll-to-top-btn {
    display: flex !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 1.15rem !important;
    z-index: 9550 !important;
  }

  #floating-cart-btn,
  .floating-cart-btn {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 68px) !important;
    right: 1.15rem !important;
    z-index: 9600 !important;
    width: 54px !important;
    height: 54px !important;
  }

  /* Hide horizontal menu on mobile since bottom nav & hamburger drawer handle navigation */
  .nav-menu.horizontal {
    display: none !important;
  }

  /* Responsive Notification Dropdown for Mobile */
  #notification-dropdown {
    width: auto !important;
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .app-header {
    padding: 0.5rem 0.75rem !important;
  }

  .header-container {
    flex-direction: row !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .brand-info {
    display: none !important;
  }

  .brand-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* Header widgets - show inline */
  .header-widgets {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0 !important;
    align-items: center !important;
  }

  #menu-profile {
    display: flex !important;
  }

  #btn-login-nav span {
    display: none !important;
  }

  /* Condense table on mobile */
  .log-item {
    grid-template-columns: 120px 80px 1fr !important;
    font-size: 0.78rem !important;
  }

  /* Hero banner on mobile */
  .temple-hero .hero-badge {
    font-size: 2rem !important;
  }

  /* Chedi tooltip — position above to avoid screen overflow */
  .chedi-slot-cell .chedi-slot-tooltip {
    width: 200px !important;
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER (More Menu Bottom Sheet)
   ========================================================================== */

#mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#mobile-drawer-overlay.open {
  display: block;
}

#mobile-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0;
  border-top: 1.5px solid #e2e8f0 !important;
  z-index: 9700;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0) + 1rem) 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

#mobile-drawer.open {
  transform: translateY(0);
}

#mobile-drawer-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #cbd5e1 !important;
  margin: 0.75rem auto 0;
}

#mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

.mob-drawer-section {
  padding: 1rem 1.25rem 0.25rem;
}

.mob-drawer-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b !important;
  margin-bottom: 0.75rem;
}

.mob-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mob-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e293b !important;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.mob-drawer-item span {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.mob-drawer-item:active {
  transform: scale(0.93);
  background: var(--primary-glow);
}

.mob-drawer-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.mob-drawer-icon svg,
.mob-drawer-icon i {
  width: 22px;
  height: 22px;
}

/* Mobile Header Quick Actions */
.mobile-header-actions {
  display: none;
}

@media (max-width: 992px) {
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mob-header-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mob-header-btn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.18);
  }

  .mob-header-btn i,
  .mob-header-btn svg {
    width: 19px;
    height: 19px;
  }

  .mob-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 17px;
    height: 17px;
    line-height: 15px;
    text-align: center;
    border: 1.5px solid #0f172a;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
  }
}

/* User Card in Mobile Drawer */
.mob-drawer-user-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  margin-bottom: 0.85rem;
}

.mob-drawer-avatar-wrap {
  position: relative;
}

.mob-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
}

.mob-drawer-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.15);
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.mob-drawer-user-info {
  flex: 1;
  min-width: 0;
}

.mob-drawer-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mob-drawer-role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  margin-top: 3px;
}

/* ==========================================================================
   EXTRA MOBILE RESPONSIVE — 480px and below (small phones)
   ========================================================================== */
@media (max-width: 480px) {
  .main-content {
    padding: 0.75rem 0.4rem 5.5rem 0.4rem !important;
  }

  .card,
  .glass-card {
    padding: 0.85rem !important;
    border-radius: 14px !important;
  }

  /* Fix: Prevent overflow:hidden from clipping payment altar card content on small screens */
  .naga-payment-altar-card {
    overflow: visible !important;
    height: auto !important;
    padding: 1rem 0.85rem !important;
    border-radius: 16px !important;
  }

  .btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.88rem !important;
  }

  /* Table horizontal scroll */
  table {
    max-width: 100%;
  }

  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table-responsive table {
    min-width: 480px;
  }

  /* Stats grid: 2 cols on small screens */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .card-value {
    font-size: 1.8rem !important;
  }

  /* Drawer grid: 3 cols stays same */
  .mob-drawer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Hero badge smaller */
  .temple-hero .hero-badge {
    font-size: 1.6rem !important;
  }

  .temple-hero h2 {
    font-size: 1.4rem !important;
  }
}

/* ==========================================================================
   ห้องธรรมะ (DHARMA MEDIA LIBRARY) & BACKGROUND AUDIO PLAYER STYLES
   ========================================================================== */

/* --- Dharma Hero Card --- */
.dharma-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.85) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(69, 26, 3, 0.8) 100%);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dharma-hero-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.28) 0%, rgba(217, 119, 6, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dharma-hero-content {
  position: relative;
  z-index: 1;
}

.dharma-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.dharma-hero-content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dharma-hero-content p {
  color: #cbd5e1;
  font-size: 1rem;
  margin: 0 0 1.25rem 0;
  max-width: 680px;
  line-height: 1.6;
}

.dharma-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-add-media {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
  transition: all 0.2s ease;
}

.btn-add-media:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.6);
}

/* --- Controls Card (Search, Type Tabs, Category Filter Pills) --- */
.dharma-controls-card {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(217, 119, 6, 0.25);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 16px;
}

.dharma-search-bar {
  position: relative;
  margin-bottom: 1.25rem;
}

.dharma-search-bar .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #94a3b8;
  pointer-events: none;
}

.dharma-search-bar input {
  width: 100%;
  padding: 0.85rem 2.8rem 0.85rem 2.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #f8fafc;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.dharma-search-bar input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  background: rgba(0, 0, 0, 0.35);
}

#dharma-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
}

#dharma-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Type Tabs */
.dharma-type-tabs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dharma-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dharma-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

.dharma-type-btn.active {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.9), rgba(180, 83, 9, 0.9));
  border-color: #f59e0b;
  color: #fff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

/* Category Filter Pills */
.dharma-category-pills {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.cat-pill {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.cat-pill:hover {
  background: rgba(217, 119, 6, 0.15);
  border-color: rgba(217, 119, 6, 0.4);
  color: #fbbf24;
}

.cat-pill.active {
  background: #f59e0b;
  border-color: #d97706;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* --- Dharma Media Grid & Cards --- */
.dharma-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.dharma-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dharma-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 119, 6, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 15px rgba(217, 119, 6, 0.15);
}

.dharma-card.is-playing-card {
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.dharma-card-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #090d16;
  overflow: hidden;
  cursor: pointer;
}

.dharma-card-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.dharma-card:hover .dharma-card-media-wrap img {
  transform: scale(1.05);
}

.media-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 100%);
}

.media-play-overlay-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.dharma-card:hover .media-play-overlay-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #f59e0b;
}

.media-top-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.media-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-badge {
  background: #ef4444;
  color: #fff;
}

.article-badge {
  background: #10b981;
  color: #fff;
}

.audio-badge {
  background: #8b5cf6;
  color: #fff;
}

.media-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f59e0b;
  color: #0f172a;
}

.media-duration-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dharma-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dharma-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
}

.media-speaker {
  color: #fbbf24;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

.media-cat-tag {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.dharma-card-title {
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 0.6rem 0;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.dharma-card-title:hover {
  color: #fbbf24;
}

.dharma-card-desc {
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.dharma-card-excerpt {
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid #f59e0b;
  padding: 0.6rem 0.8rem;
  border-radius: 0 8px 8px 0;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.quote-mark {
  color: #f59e0b;
  font-size: 1.1rem;
  font-weight: bold;
}

.dharma-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-card-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-watch-video {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(185, 28, 28, 0.85));
  color: #fff;
}

.btn-watch-video:hover {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  transform: translateY(-1px);
}

.btn-read-article {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(4, 120, 87, 0.85));
  color: #fff;
}

.btn-read-article:hover {
  background: linear-gradient(135deg, #10b981, #047857);
  transform: translateY(-1px);
}

.btn-card-play-audio {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
}

.btn-card-play-audio:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
}

.dharma-card-sub-actions {
  display: flex;
  gap: 4px;
}

.btn-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-card-icon:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-1px);
}

.btn-del-media:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

/* Empty & Loading States */
.dharma-loading-state,
.dharma-empty-state,
.dharma-error-state {
  grid-column: 1 / -1;
  padding: 4rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.empty-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.15);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* --- Article Reader Modal --- */
.modal-reader-dialog {
  max-width: 820px;
  width: 92%;
  margin: 2rem auto;
}

.reader-content {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(217, 119, 6, 0.3);
  background: #0f172a;
}

.reader-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.95);
}

.reader-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
  font-weight: 700;
  font-size: 0.9rem;
}

.reader-top-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reader-body {
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 0 2rem 0;
  scrollbar-width: thin;
}

.reader-hero-wrap {
  position: relative;
  width: 100%;
  max-height: 380px;
  overflow: hidden;
}

.reader-hero-img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
}

.reader-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%);
}

.reader-hero-meta {
  position: absolute;
  bottom: 20px;
  left: 2rem;
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.cat-chip {
  background: #10b981;
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}

.read-chip {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  color: #f8fafc;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reader-article-header {
  padding: 1.5rem 2rem 1rem 2rem;
}

.reader-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 1rem 0;
}

.reader-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 119, 6, 0.4);
}

.author-name {
  font-weight: 700;
  color: #f8fafc;
  font-size: 0.95rem;
}

.publish-date {
  font-size: 0.8rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reader-highlight-box {
  margin: 1rem 2rem 1.5rem 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(217, 119, 6, 0.1);
  border-left: 4px solid #f59e0b;
  border-radius: 0 12px 12px 0;
  color: #fef3c7;
  font-size: 1.05rem;
  line-height: 1.6;
}

.reader-prose-content {
  padding: 0 2rem;
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.85;
}

.reader-prose-content p {
  margin-bottom: 1.25rem;
}

.reader-prose-content p.lead {
  font-size: 1.2rem;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.75;
}

.reader-prose-content h3 {
  font-size: 1.35rem;
  color: #fbbf24;
  margin: 1.85rem 0 0.85rem 0;
  font-weight: 700;
}

.reader-prose-content blockquote.quote-box {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 0, 0, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: 0 12px 12px 0;
  color: #fde68a;
  font-style: italic;
  font-size: 1.1rem;
}

.reader-prose-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.reader-prose-content li {
  margin-bottom: 0.5rem;
}

.reader-footer-share-box {
  margin: 2.5rem 2rem 1rem 2rem;
  padding: 1.75rem;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  text-align: center;
}

.reader-footer-share-box h4 {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 0.4rem 0;
}

.reader-footer-share-box p {
  color: #94a3b8;
  font-size: 0.88rem;
  margin: 0 0 1.25rem 0;
}

.share-buttons-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-share-line {
  background: #06c755;
  color: #fff;
  font-weight: 600;
  border: none;
}

.btn-share-fb {
  background: #1877f2;
  color: #fff;
  font-weight: 600;
  border: none;
}

/* --- Video Theater Modal --- */
.modal-video-dialog {
  max-width: 900px;
  width: 94%;
  margin: 2rem auto;
}

.video-modal-content {
  padding: 0 !important;
  background: #090d16;
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 16px;
  overflow: hidden;
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-embed-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-embed-aspect iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-meta-box {
  padding: 1.25rem 1.5rem;
  background: #0f172a;
}

.video-meta-speaker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fbbf24;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.meta-tag-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.meta-time-badge {
  color: #94a3b8;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.video-meta-desc {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.video-share-bar {
  display: flex;
  justify-content: flex-end;
}

/* --- Dharma Admin Add / Edit Modal --- */
#modal-dharma-admin-media {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10005 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#modal-dharma-admin-media.active,
#modal-dharma-admin-media[style*="display: flex"] {
  display: flex !important;
}

#modal-dharma-admin-media .modal-admin-dialog {
  width: 100% !important;
  max-width: 680px !important;
  max-height: calc(100vh - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#modal-dharma-admin-media .modal-content,
#modal-dharma-admin-media .dharma-admin-modal-content {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0f172a !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(217, 119, 6, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalFadeIn 0.25s ease-out;
}

#modal-dharma-admin-media .modal-header {
  flex-shrink: 0 !important;
  padding: 1.15rem 1.5rem !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
  z-index: 2;
}

#modal-dharma-admin-media .modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fbbf24;
}

#modal-dharma-admin-media .modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  position: static !important;
  padding: 0;
  transition: all 0.2s ease;
}

#modal-dharma-admin-media .modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

#modal-dharma-admin-media #form-dharma-media {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#modal-dharma-admin-media .dharma-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 1.5rem !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.4) transparent;
}

#modal-dharma-admin-media .dharma-modal-body::-webkit-scrollbar {
  width: 6px;
}

#modal-dharma-admin-media .dharma-modal-body::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 999px;
}

#modal-dharma-admin-media .modal-actions,
#modal-dharma-admin-media .dharma-modal-footer {
  flex-shrink: 0 !important;
  padding: 1rem 1.5rem !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

#modal-dharma-admin-media .btn-secondary,
#modal-dharma-admin-media .btn-cancel-dharma,
#modal-dharma-admin-media button.btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.35rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-shadow: none !important;
}

#modal-dharma-admin-media .btn-secondary:hover,
#modal-dharma-admin-media .btn-cancel-dharma:hover,
#modal-dharma-admin-media button.btn-secondary:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fecaca !important;
  transform: translateY(-1px) !important;
}

#modal-dharma-admin-media label.btn-secondary {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fef3c7 !important;
  font-weight: 600 !important;
  padding: 0.6rem 1rem !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

#modal-dharma-admin-media label.btn-secondary:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #ffffff !important;
}

#modal-dharma-admin-media .form-group {
  margin-bottom: 1.25rem;
}

#modal-dharma-admin-media .form-group:last-child {
  margin-bottom: 0;
}

#modal-dharma-admin-media .form-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.45rem;
  display: block;
}

#modal-dharma-admin-media .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

#modal-dharma-admin-media .form-control {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0.65rem 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.92rem !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#modal-dharma-admin-media .form-control:focus {
  outline: none !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

#modal-dharma-admin-media .type-selection-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 0.4rem;
}

#modal-dharma-admin-media .type-radio-label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
}

#modal-dharma-admin-media .type-radio-label:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
}

#modal-dharma-admin-media .type-radio-label input[type="radio"] {
  accent-color: #f59e0b;
  margin: 0;
}

#modal-dharma-admin-media .type-radio-label input[type="radio"]:checked+span {
  color: #fbbf24;
}

#modal-dharma-admin-media .type-radio-label:has(input[type="radio"]:checked) {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  #modal-dharma-admin-media {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }

  #modal-dharma-admin-media .modal-admin-dialog {
    max-height: calc(100dvh - 1rem) !important;
    width: 100% !important;
  }

  #modal-dharma-admin-media .modal-content,
  #modal-dharma-admin-media .dharma-admin-modal-content {
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 18px 18px 12px 12px !important;
  }

  #modal-dharma-admin-media .modal-header {
    padding: 0.9rem 1.15rem !important;
  }

  #modal-dharma-admin-media .modal-header h3 {
    font-size: 1.1rem;
  }

  #modal-dharma-admin-media .dharma-modal-body {
    padding: 1rem !important;
  }

  #modal-dharma-admin-media .type-selection-group {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  #modal-dharma-admin-media .type-radio-label {
    justify-content: flex-start;
    padding: 0.65rem 0.85rem;
  }

  #modal-dharma-admin-media .form-row {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  #modal-dharma-admin-media .form-row .form-group {
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  #modal-dharma-admin-media .modal-actions {
    padding: 0.75rem 1rem !important;
  }

  #modal-dharma-admin-media .modal-actions button {
    flex: 1;
  }
}

/* --- GLOBAL FLOATING BACKGROUND AUDIO PLAYER --- */
.bg-audio-player-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 880px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.2);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideUpAudioPlayer 0.35s ease-out;
}

@keyframes slideUpAudioPlayer {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.bg-audio-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
}

/* Left: Track Info */
.bg-audio-track-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 200px;
  max-width: 260px;
}

.bg-audio-cover-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f59e0b;
  flex-shrink: 0;
}

.bg-audio-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-audio-cover-wrap img.playing-pulse {
  animation: spinCover 16s linear infinite;
}

@keyframes spinCover {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.bg-audio-text {
  overflow: hidden;
}

.bg-audio-title {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-audio-speaker {
  color: #fbbf24;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center: Controls & Timeline */
.bg-audio-center-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 420px;
}

.bg-audio-buttons {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bg-audio-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bg-audio-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

.skip-btn {
  position: relative;
  width: 32px;
  height: 32px;
}

.skip-btn .skip-label {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 800;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-pause-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}

.play-pause-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: scale(1.08);
}

.bg-audio-timeline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.bg-audio-time {
  font-size: 0.72rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}

.bg-audio-slider-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.bg-audio-slider-wrap input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.15);
  height: 5px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.bg-audio-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f59e0b;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}

/* Right: Extra Actions */
.bg-audio-extra-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.volume-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.volume-slider-wrap input[type="range"] {
  width: 60px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  height: 4px;
  border-radius: 999px;
  outline: none;
}

.volume-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fbbf24;
  cursor: pointer;
}

.bg-audio-mini-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.bg-audio-mini-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.close-player-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Mobile Responsive Adjustments for Background Audio Player - Ultra Compact */
@media (max-width: 768px) {
  .bg-audio-player-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 6px) !important;
    /* Docked directly above mobile bottom nav with ultra-compact height */
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-height: 42px !important;
    max-height: 48px !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
  }

  .bg-audio-inner {
    gap: 0.35rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .volume-slider-wrap {
    display: none !important;
    /* Hide volume slider on mobile, volume is handled by physical hardware buttons */
  }

  .bg-audio-track-info {
    min-width: 0 !important;
    max-width: 90px !important;
    flex-shrink: 1 !important;
    gap: 0.35rem !important;
  }

  .bg-audio-cover-wrap {
    width: 28px !important;
    height: 28px !important;
    border-width: 1.5px !important;
    flex-shrink: 0 !important;
  }

  .bg-audio-title {
    font-size: 0.7rem !important;
    max-width: 58px !important;
    line-height: 1.15 !important;
  }

  .bg-audio-speaker {
    font-size: 0.58rem !important;
    max-width: 58px !important;
    line-height: 1.05 !important;
  }

  .bg-audio-center-controls {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0.12rem !important;
  }

  .bg-audio-buttons {
    gap: 0.3rem !important;
  }

  .bg-audio-buttons .skip-btn {
    width: 22px !important;
    height: 22px !important;
  }

  .bg-audio-buttons .skip-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .bg-audio-buttons .skip-btn .skip-label {
    font-size: 0.45rem !important;
  }

  .bg-audio-buttons .play-pause-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .bg-audio-buttons .play-pause-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .bg-audio-time {
    display: none !important;
  }

  .bg-audio-timeline {
    width: 100% !important;
  }

  .bg-audio-slider-wrap input[type="range"] {
    height: 2.5px !important;
  }

  .bg-audio-slider-wrap input[type="range"]::-webkit-slider-thumb {
    width: 7px !important;
    height: 7px !important;
  }

  .bg-audio-extra-actions {
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  .bg-audio-extra-actions .bg-audio-mini-btn {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    padding: 0 !important;
  }

  .bg-audio-extra-actions .bg-audio-mini-btn svg,
  .bg-audio-extra-actions .bg-audio-mini-btn i {
    width: 12px !important;
    height: 12px !important;
  }

  /* Make single inline close button clearly visible and clickable in red on mobile */
  .bg-audio-extra-actions .close-player-btn {
    display: flex !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
  }

  .bg-audio-extra-actions .close-player-btn:active {
    transform: scale(0.9) !important;
    background: #b91c1c !important;
  }

  .bg-audio-extra-actions .close-player-btn svg,
  .bg-audio-extra-actions .close-player-btn i {
    stroke: #ffffff !important;
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2.5px !important;
  }

  .dharma-hero-card {
    padding: 1.5rem 1.25rem;
  }

  .dharma-hero-content h2 {
    font-size: 1.5rem;
  }

  .dharma-media-grid {
    grid-template-columns: 1fr;
  }

  .modal-reader-dialog,
  .modal-video-dialog,
  .modal-admin-dialog {
    width: 96%;
    margin: 1rem auto;
  }

  .reader-article-header,
  .reader-prose-content {
    padding: 1rem 1.25rem;
  }
}

/* ==========================================================================
   PHAYA NAGA THEME: ระเบียบปฏิบัติธรรม & เตรียมความพร้อมด้วยตัวเองก่อน (Grand & Elegant)
   ========================================================================== */

/* Naga Hero & Grand Banner */
.naga-theme-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

.naga-hero-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.97) 0%, rgba(4, 120, 87, 0.92) 45%, rgba(2, 44, 34, 0.98) 100%);
  border-radius: 20px;
  padding: 2.25rem 2.25rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 15px 35px rgba(6, 78, 59, 0.3), 0 0 25px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  color: #fff;
}

.naga-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('webmon/thai_pattern.png');
  background-size: 320px;
  opacity: 0.08;
  pointer-events: none;
}

.naga-hero-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, rgba(16, 185, 129, 0.1) 50%, transparent 70%);
  pointer-events: none;
}

.naga-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.naga-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fef08a;
  padding: 0.35rem 1rem;
  border-radius: 24px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.naga-hero-title {
  font-size: 2.15rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
  line-height: 1.35;
  background: linear-gradient(135deg, #ffffff 15%, #fef08a 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.naga-hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #d1fae5;
  margin-bottom: 1.25rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Dual Sub-Navigation Switcher Bar */
.naga-subnav-bar {
  display: inline-flex;
  background: rgba(2, 44, 34, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.35rem;
  border-radius: 32px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.naga-subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 26px;
  border: none;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #a7f3d0;
  transition: all 0.25s ease;
  font-family: inherit;
  text-decoration: none;
}

.naga-subnav-btn:hover {
  color: #fff;
  background: rgba(16, 185, 129, 0.25);
}

.naga-subnav-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
}

/* Quick Anchor Pills */
.naga-quick-anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.naga-anchor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ecfdf5;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.naga-anchor-link:hover {
  background: rgba(251, 191, 36, 0.3);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fef08a;
}

/* Section Dividers & Headers */
.naga-section-header {
  text-align: center;
  margin: 2.25rem 0 1.25rem 0;
  position: relative;
}

.naga-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(217, 119, 6, 0.15));
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: var(--secondary, #d97706);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.45rem;
}

.naga-section-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.naga-section-sub {
  font-size: 0.98rem;
  color: var(--text-secondary, #64748b);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 4 Pillars Grid (Self Preparation) */
.naga-prep-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.naga-pillar-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.95));
  border-radius: 16px;
  padding: 1.35rem 1.15rem;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.naga-pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  opacity: 0.9;
}

.naga-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.14);
  border-color: rgba(217, 119, 6, 0.45);
}

.pillar-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(245, 158, 11, 0.18));
  border: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #047857;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.pillar-num {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 1.45rem;
  font-weight: 900;
  color: rgba(16, 185, 129, 0.2);
  font-family: inherit;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.3rem;
}

.pillar-subtitle {
  font-size: 0.85rem;
  color: var(--secondary, #d97706);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.pillar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--text-secondary, #475569);
  line-height: 1.5;
}

.pillar-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.pillar-list li i {
  color: #10b981;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Interactive Readiness Checklist */
.naga-checklist-container {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.04) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 18px;
  padding: 1.5rem 1.65rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.checklist-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.checklist-title-group h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checklist-title-group p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
}

.readiness-meter-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 240px;
}

.readiness-bar-bg {
  flex-grow: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.readiness-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  border-radius: 10px;
  transition: width 0.35s ease;
}

.readiness-badge-score {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--secondary, #d97706);
  white-space: nowrap;
}

.checklist-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0.85rem;
}

.check-item-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--card-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.check-item-card:hover {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.03);
  transform: translateY(-1px);
}

.check-item-card.is-checked {
  background: rgba(16, 185, 129, 0.08);
  border-color: #10b981;
}

.custom-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
  color: #fff;
  font-size: 0.75rem;
}

.check-item-card.is-checked .custom-checkbox {
  background: #10b981;
  border-color: #10b981;
}

.check-text-wrap {
  flex-grow: 1;
}

.check-main-text {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary, #1e293b);
  margin-bottom: 0.25rem;
}

.check-item-card.is-checked .check-main-text {
  color: #047857;
}

.check-sub-text {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.45;
}

.readiness-status-banner {
  margin-top: 1.15rem;
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Master's Daily Schedule - 5 Balanced Cards (Row 1: 3 cards, Row 2: 2 cards) */
.naga-daily-schedule-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.naga-daily-schedule-grid .naga-sched-card:nth-child(1),
.naga-daily-schedule-grid .naga-sched-card:nth-child(2),
.naga-daily-schedule-grid .naga-sched-card:nth-child(3) {
  grid-column: span 2;
}

.naga-daily-schedule-grid .naga-sched-card:nth-child(4),
.naga-daily-schedule-grid .naga-sched-card:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 992px) {
  .naga-daily-schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .naga-daily-schedule-grid .naga-sched-card:nth-child(1),
  .naga-daily-schedule-grid .naga-sched-card:nth-child(2),
  .naga-daily-schedule-grid .naga-sched-card:nth-child(3),
  .naga-daily-schedule-grid .naga-sched-card:nth-child(4) {
    grid-column: span 1;
  }

  .naga-daily-schedule-grid .naga-sched-card:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .naga-daily-schedule-grid {
    grid-template-columns: 1fr;
  }

  .naga-daily-schedule-grid .naga-sched-card {
    grid-column: span 1 !important;
  }
}

.naga-sched-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.naga-sched-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
}

.naga-sched-header {
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.naga-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: #fef08a;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.naga-period-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--secondary, #d97706);
  background: rgba(217, 119, 6, 0.1);
  padding: 0.2rem 0.65rem;
  border-radius: 16px;
}

.naga-sched-body {
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.naga-sched-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.naga-sched-desc {
  font-size: 0.92rem;
  color: var(--text-secondary, #475569);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* 16:9 Balanced Video Container */
.naga-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* Exact 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-top: auto;
}

.naga-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Meditation 2 Pillars (Symmetrical 2 Columns) */
.naga-meditation-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.meditation-pillar-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.meditation-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.12);
  border-color: #f59e0b;
}

.pillar-banner-top {
  padding: 1.1rem 1.35rem;
  background: linear-gradient(135deg, #064e3b 0%, #047857 60%, #065f46 100%);
  color: #fff;
}

.pillar-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fef08a;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 16px;
  margin-bottom: 0.35rem;
}

.pillar-banner-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.2rem 0;
  color: #ffffff;
}

.pillar-banner-sub {
  font-size: 0.88rem;
  color: #d1fae5;
  margin: 0;
}

.pillar-content-inner {
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex-grow: 1;
}

.pillar-steps-box {
  background: rgba(6, 78, 59, 0.04);
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  border: 1px dashed rgba(16, 185, 129, 0.3);
}

.pillar-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
  color: var(--text-primary, #1e293b);
  line-height: 1.5;
}

.pillar-step-item:last-child {
  margin-bottom: 0;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Naga Benediction Footer */
.naga-benediction-card {
  text-align: center;
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.95) 0%, rgba(4, 120, 87, 0.9) 50%, rgba(2, 44, 34, 0.98) 100%);
  border-radius: 20px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 12px 30px rgba(6, 78, 59, 0.25);
  color: #fff;
  margin-bottom: 2.5rem;
}

.benediction-icon {
  font-size: 2.4rem;
  color: #fef08a;
  margin-bottom: 0.65rem;
}

.benediction-text {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.8;
  max-width: 760px;
  margin: 0 auto 0.85rem auto;
  color: #fef08a;
}

.benediction-sign {
  font-size: 0.95rem;
  color: #a7f3d0;
  font-weight: 600;
}

/* 9 Monastery Rules (.naga-rule-item) - Grand, Elegant & Readable */
.naga-rules-list-container {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}

.naga-rule-item {
  background: var(--card-bg, #ffffff);
  border-radius: 18px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 6px 22px rgba(6, 78, 59, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: all 0.25s ease;
}

.naga-rule-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
}

.naga-rule-item.reverse-layout {
  flex-direction: row-reverse;
}

.naga-rule-media {
  flex: 0 0 280px;
  max-width: 280px;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  margin: 0.85rem;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.naga-rule-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  transition: transform 0.45s ease;
}

.naga-rule-item:hover .naga-rule-media img {
  transform: scale(1.04);
}

.naga-rule-body {
  flex: 1;
  padding: 1.35rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.naga-rule-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #047857;
  padding: 0.3rem 0.85rem;
  border-radius: 16px;
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.naga-rule-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.naga-rule-points {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--text-secondary, #334155);
  font-size: 1.02rem;
  line-height: 1.75;
}

.naga-rule-points li {
  margin-bottom: 0.5rem;
}

.naga-rule-points li:last-child {
  margin-bottom: 0;
}

.naga-rule-points strong {
  font-weight: 700;
  color: #047857;
}

/* Strict Warning Banner for Section 3 */
.naga-strict-warning {
  margin-top: 0.85rem;
  padding: 0.75rem 1.15rem;
  background: rgba(239, 68, 68, 0.08);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  color: #991b1b;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
}

/* ==========================================================================
   WHITE THEME: ระเบียบปฏิบัติธรรม & เตรียมความพร้อม (พื้นสีขาว ตัวหนังสือชัดเจน 100%)
   ========================================================================== */

#tab-temple-rules,
#tab-temple-prep,
body.dark-mode #tab-temple-rules,
body.dark-mode #tab-temple-prep {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-radius: 24px;
  padding: 1.5rem 1.5rem 3.5rem 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  margin-bottom: 2.5rem;
}

/* Rule Item Cards: Pure White with Left Green Accent Bar */
#tab-temple-rules .naga-rule-item,
body.dark-mode #tab-temple-rules .naga-rule-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 6px solid #059669 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

#tab-temple-rules .naga-rule-item:hover,
body.dark-mode #tab-temple-rules .naga-rule-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(5, 150, 105, 0.14) !important;
  border-color: #cbd5e1 !important;
  border-left-color: #f59e0b !important;
}

/* Rule Titles: Deep Obsidian Black, Ultra Sharp */
#tab-temple-rules .naga-rule-title,
body.dark-mode #tab-temple-rules .naga-rule-title {
  color: #0f172a !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

/* Rule Category Tags: Fresh Clean Emerald Pill */
#tab-temple-rules .naga-rule-tag,
body.dark-mode #tab-temple-rules .naga-rule-tag {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

/* Rule Points Text: Deep Charcoal (#1e293b), Maximum Readability */
#tab-temple-rules .naga-rule-points,
body.dark-mode #tab-temple-rules .naga-rule-points {
  color: #1e293b !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
}

#tab-temple-rules .naga-rule-points li,
body.dark-mode #tab-temple-rules .naga-rule-points li {
  margin-bottom: 0.55rem;
}

#tab-temple-rules .naga-rule-points strong,
body.dark-mode #tab-temple-rules .naga-rule-points strong {
  color: #047857 !important;
  font-weight: 800 !important;
}

/* Strict Warning Banner: Clean Pastel Red with Bold Alert Text */
#tab-temple-rules .naga-strict-warning,
body.dark-mode #tab-temple-rules .naga-strict-warning {
  background: #fef2f2 !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 8px !important;
  color: #991b1b !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin-top: 0.85rem;
  padding: 0.85rem 1.25rem !important;
}

/* Preparation Pillars & Cards: Clean Crisp White */
#tab-temple-prep .naga-pillar-card,
body.dark-mode #tab-temple-prep .naga-pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

#tab-temple-prep .pillar-title,
body.dark-mode #tab-temple-prep .pillar-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

#tab-temple-prep .pillar-list,
body.dark-mode #tab-temple-prep .pillar-list {
  color: #334155 !important;
  font-size: 0.95rem !important;
}

/* Checklist: Pure White with Clear Check Items */
#tab-temple-prep .naga-checklist-container,
body.dark-mode #tab-temple-prep .naga-checklist-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
}

#tab-temple-prep .checklist-title-group h4,
body.dark-mode #tab-temple-prep .checklist-title-group h4 {
  color: #0f172a !important;
}

#tab-temple-prep .checklist-title-group p,
body.dark-mode #tab-temple-prep .checklist-title-group p {
  color: #475569 !important;
}

#tab-temple-prep .check-item-card,
body.dark-mode #tab-temple-prep .check-item-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

#tab-temple-prep .check-item-card:hover,
body.dark-mode #tab-temple-prep .check-item-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

#tab-temple-prep .check-main-text,
body.dark-mode #tab-temple-prep .check-main-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

#tab-temple-prep .check-sub-text,
body.dark-mode #tab-temple-prep .check-sub-text {
  color: #475569 !important;
}

#tab-temple-prep .check-item-card.is-checked,
body.dark-mode #tab-temple-prep .check-item-card.is-checked {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}

#tab-temple-prep .check-item-card.is-checked .check-main-text,
body.dark-mode #tab-temple-prep .check-item-card.is-checked .check-main-text {
  color: #065f46 !important;
}

/* Daily Schedule Cards: Pure White */
#tab-temple-prep .naga-sched-card,
body.dark-mode #tab-temple-prep .naga-sched-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

#tab-temple-prep .naga-sched-header,
body.dark-mode #tab-temple-prep .naga-sched-header {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#tab-temple-prep .naga-sched-title,
body.dark-mode #tab-temple-prep .naga-sched-title {
  color: #0f172a !important;
}

#tab-temple-prep .naga-sched-desc,
body.dark-mode #tab-temple-prep .naga-sched-desc {
  color: #334155 !important;
}

/* Meditation 2 Pillars: Pure White */
#tab-temple-prep .meditation-pillar-card,
body.dark-mode #tab-temple-prep .meditation-pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

#tab-temple-prep .pillar-step-item,
body.dark-mode #tab-temple-prep .pillar-step-item {
  color: #1e293b !important;
}

/* Section titles on white canvas */
#tab-temple-prep .naga-section-title,
body.dark-mode #tab-temple-prep .naga-section-title {
  color: #0f172a !important;
}

#tab-temple-prep .naga-section-sub,
body.dark-mode #tab-temple-prep .naga-section-sub {
  color: #475569 !important;
}

/* Mobile Responsive */
@media (max-width: 992px) {
  .naga-prep-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .naga-daily-schedule-grid,
  .naga-meditation-pillars-grid {
    grid-template-columns: 1fr;
  }

  .naga-rule-item,
  .naga-rule-item.reverse-layout {
    flex-direction: column;
  }

  .naga-rule-media {
    flex: none;
    max-width: 100%;
    height: 220px;
    margin: 0.65rem 0.65rem 0 0.65rem;
  }

  .naga-hero-title {
    font-size: 1.75rem;
  }

  .naga-hero-banner {
    padding: 1.6rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .naga-prep-pillars-grid {
    grid-template-columns: 1fr;
  }

  .naga-hero-banner {
    padding: 1.25rem 1rem;
  }

  .naga-hero-title {
    font-size: 1.45rem;
  }

  .naga-subnav-bar {
    width: 100%;
    flex-direction: column;
    border-radius: 15px;
  }

  .naga-subnav-btn {
    width: 100%;
    justify-content: center;
    padding: 0.4rem;
  }

  .checklist-header {
    flex-direction: column;
    align-items: stretch;
  }

  .readiness-meter-wrap {
    width: 100%;
  }

  .checklist-items-grid {
    grid-template-columns: 1fr;
  }

  .naga-rule-body {
    padding: 0.85rem;
  }
}

/* ==========================================================================
   CHANTING BOOKS & PDF DOCUMENTS (คลังหนังสือสวดมนต์ และบทสวดมนต์ PDF)
   ========================================================================== */

/* Header Add Button */
.btn-add-chanting-book {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  color: #fef08a;
  border: 1px solid rgba(254, 240, 138, 0.35);
  padding: 0.45rem 1rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

.btn-add-chanting-book:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.3);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Category Filter Bar & Search */
.books-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.books-categories-wrap {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.book-cat-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: var(--card-bg, #ffffff);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: all 0.2s ease;
}

.book-cat-pill:hover {
  border-color: #047857;
  color: #047857;
}

.book-cat-pill.active {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  color: #fef08a;
  border-color: #047857;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.25);
}

.books-search-box {
  position: relative;
  min-width: 240px;
  flex: 1;
  max-width: 320px;
}

.books-search-box i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
  width: 16px;
  height: 16px;
}

.books-search-box input {
  width: 100%;
  padding: 0.4rem 0.75rem 0.4rem 2.2rem;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.82rem;
  background: var(--card-bg, #ffffff);
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: border-color 0.2s ease;
}

.books-search-box input:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

/* Chanting Books Grid */
.naga-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Chanting Book Card */
.naga-book-card {
  background: var(--card-bg, #ffffff);
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 15px rgba(6, 78, 59, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.naga-book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}

/* Book Cover Area */
.book-cover-area {
  position: relative;
  height: 300px;
  background: radial-gradient(circle at center, #1e293b 0%, #09131f 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.naga-book-card:hover .book-cover-img {
  transform: scale(1.03);
}

.book-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fef08a;
  text-align: center;
  padding: 1rem;
}

.book-cover-placeholder i {
  width: 44px;
  height: 44px;
  margin-bottom: 0.4rem;
  color: #fef08a;
  opacity: 0.9;
}

.book-badge-cat {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: rgba(6, 78, 59, 0.88);
  backdrop-filter: blur(6px);
  color: #fef08a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(254, 240, 138, 0.3);
  z-index: 2;
}

.book-badge-format {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* Book Information Body */
.book-info-body {
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.book-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.35;
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #475569);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.book-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 0.75rem;
}

.book-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.book-meta-item i {
  width: 12px;
  height: 12px;
}

/* Book Action Buttons */
.book-actions-bar {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.btn-book-read {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  color: #fef08a;
  padding: 0.42rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-book-read:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
}

.btn-book-read i {
  width: 14px;
  height: 14px;
}

.btn-book-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
  color: #047857;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-book-download:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #064e3b;
}

.btn-book-download i {
  width: 14px;
  height: 14px;
}

.btn-book-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-book-action:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary, #0f172a);
}

.btn-book-action i {
  width: 14px;
  height: 14px;
}

.btn-book-action.delete:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Empty Books State */
.books-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--card-bg, #ffffff);
  border-radius: 14px;
  border: 1px dashed rgba(16, 185, 129, 0.3);
  color: var(--text-secondary, #475569);
}

.books-empty-state i {
  width: 48px;
  height: 48px;
  color: #10b981;
  margin-bottom: 0.75rem;
}

#modal-amulet-detail .naga-modal-emerald,
body.dark-mode #modal-amulet-detail .naga-modal-emerald,
body #modal-amulet-detail .modal-content {
  background: radial-gradient(circle at 50% 0%, #064e3b 0%, #032e24 45%, #011611 100%) !important;
  border: 2px solid #d4af37 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.3) !important;
  color: #ffffff !important;
}

#modal-amulet-detail #amulet-detail-zoom-box {
  background: url('webmon/amulet_card_pedestal_bg.jpg') center bottom / cover no-repeat !important;
  border: 2px solid #d4af37 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE ENHANCEMENTS FOR AMULET TAB (เช่าบูชาวัตถุมงคล)
   Fixes: Screen overflow, readability, 2-column card fit, detail modal & cart
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. Tab Container & Containment */
  #tab-temple-donate {
    padding: 0.4rem 0.15rem 6.5rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .amulet-main-layout {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .amulet-showcase-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 2. Sanctum Hero Banner & Assurances */
  .naga-sanctum-hero {
    margin-bottom: 0.75rem !important;
    gap: 0.5rem !important;
  }

  .naga-sanctum-banner-wrap {
    padding: 0.85rem 0.75rem !important;
    border-radius: 14px !important;
  }

  .naga-sanctum-tag {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    margin-bottom: 0.25rem !important;
  }

  .naga-sanctum-title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    color: #fef08a !important;
    margin-bottom: 0.25rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  }

  .naga-sanctum-desc {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    color: #d1fae5 !important;
  }

  .naga-sacred-ribbon {
    display: none !important;
  }

  .sacred-badge-item {
    padding: 0.55rem 0.75rem !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }

  .sacred-badge-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .sacred-badge-icon svg,
  .sacred-badge-icon i {
    width: 16px !important;
    height: 16px !important;
  }

  .sacred-badge-info strong {
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
  }

  .sacred-badge-info span {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  /* 3. Filter Tabs & Search Bar */
  .amulet-control-bar {
    flex-direction: column !important;
    gap: 0.4rem !important;
    margin-bottom: 0.6rem !important;
  }

  .amulet-category-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
  }

  .amulet-category-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .naga-tab-btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  .naga-tab-btn i,
  .naga-tab-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .amulet-search-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  .amulet-search-box input {
    width: 100% !important;
    padding: 0.45rem 0.75rem 0.45rem 2.2rem !important;
    font-size: 0.78rem !important;
    border-radius: 18px !important;
  }

  .amulet-search-box i,
  .amulet-search-box svg {
    left: 10px !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* 4. Amulet Grid: 3-Column Compact Mobile Layout (แถวละ 3 อัน กะทัดรัด สวยงาม สบายตา ดูมีสินค้าเยอะแยะ) */
  .amulet-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .amulet-card,
  .naga-amulet-card {
    padding: 4px 3px 6px 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .naga-amulet-card .naga-card-corner,
  .naga-card-corner {
    display: none !important;
  }

  .amulet-card-topbar {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 2px !important;
  }

  .amulet-sacred-badge {
    display: none !important;
  }

  .amulet-card-code {
    font-size: 0.52rem !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  /* Square Image Frame for 3-column layout */
  .amulet-card-image,
  .amulet-pedestal-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    margin: 0 auto 3px auto !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .amulet-card-image img,
  .amulet-pedestal-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 4px !important;
  }

  .amulet-zoom-overlay {
    display: none !important;
  }

  /* Compact Card Typography */
  .amulet-card h4,
  .amulet-card-title {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #064e3b !important;
    line-height: 1.2 !important;
    margin: 1px 0 !important;
    text-align: center !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.4em !important;
    min-height: 2.4em !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide long blessing subtitle on mobile 3-column cards to make cards super compact and avoid overflow */
  .amulet-blessing-subtitle {
    display: none !important;
  }

  .amulet-card-footer {
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 2px !important;
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;
  }

  .amulet-price-box {
    justify-content: center !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .amulet-price-box .price-val {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    color: #d97706 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.1 !important;
  }

  .btn-naga-rent {
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px 2px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    gap: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .btn-naga-rent i,
  .btn-naga-rent svg {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
  }

  /* 5. Amulet Detail Modal on Mobile (ดูสินค้าได้พอดี ไม่เลยจอ) */
  #modal-amulet-detail .modal-content.naga-modal-emerald {
    width: 94% !important;
    max-width: 440px !important;
    max-height: 86vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #modal-amulet-detail .modal-header-bar {
    padding: 0.75rem 1rem !important;
    flex-shrink: 0 !important;
  }

  #modal-amulet-detail .modal-header-bar h3 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #fef08a !important;
  }

  #modal-amulet-detail .amulet-detail-modal-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding: 0.85rem 1rem 1rem !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(86vh - 56px) !important;
  }

  #amulet-detail-zoom-box {
    max-width: 140px !important;
    width: 140px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  }

  #modal-amulet-detail .amulet-detail-info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  #amulet-detail-name {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #fef08a !important;
    text-align: center !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
  }

  #modal-amulet-detail .price-badge-row {
    padding: 6px 14px !important;
    justify-content: center !important;
    margin-bottom: 0.35rem !important;
    border-radius: 10px !important;
  }

  #amulet-detail-price {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
  }

  #amulet-detail-desc {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
    color: #ecfdf5 !important;
    font-weight: 500 !important;
  }

  #modal-amulet-detail .modal-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 0 2px !important;
    border-top: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(3, 46, 36, 0.96), rgba(1, 22, 17, 1)) !important;
    z-index: 10 !important;
    margin-top: auto !important;
  }

  #amulet-detail-btn-rent {
    flex: 2 !important;
    padding: 0.72rem 0.5rem !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.6) !important;
  }

  #modal-amulet-detail .btn-modal-close-action {
    flex: 1 !important;
    padding: 0.72rem 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  /* 6. Bank accounts & Altar section on Mobile */
  .naga-payment-altar-card {
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
    margin-top: 1.5rem !important;
    margin-bottom: 5.5rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: unset !important;
  }

  .naga-altar-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
  }

  .naga-altar-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #059669 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .naga-altar-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #064e3b !important;
    line-height: 1.3 !important;
    margin: 0 0 0.25rem !important;
    word-break: break-word !important;
  }

  .naga-payment-altar-card .panel-info {
    font-size: 0.8rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
  }

  .payment-info-layout {
    display: block !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }

  .bank-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  .naga-bank-card {
    padding: 0.95rem 0.85rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.2s ease !important;
  }

  .naga-bank-card:active {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    transform: scale(0.99) !important;
  }

  .naga-bank-card .bank-logo {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: #00a8cc !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 168, 204, 0.3) !important;
  }

  .naga-bank-card .bank-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .naga-bank-card .bank-name {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
  }

  .naga-bank-card .bank-account {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #047857 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
  }

  .naga-bank-card .bank-holder {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    line-height: 1.2 !important;
  }

  .naga-bank-card .btn-copy-acc {
    padding: 0.48rem 0.75rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #047857 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .naga-bank-card .btn-copy-acc:active {
    background: #059669 !important;
    color: #ffffff !important;
  }

  /* 7. Floating Cart Button & Scroll Top on Mobile */
  #floating-cart-btn,
  .floating-cart-btn {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 1.15rem !important;
    z-index: 9600 !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.6), 0 0 15px rgba(245, 158, 11, 0.4) !important;
  }

  #scroll-to-top-btn {
    display: flex !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 78px) !important;
    right: 1.15rem !important;
    z-index: 9550 !important;
  }
}

/* ==========================================================================
   CONTACT US (ติดต่อเรา - ม่อนพญานาคราช) - CLEAN BLOCK-BY-BLOCK LAYOUT
   ========================================================================== */
.contact-blocks-wrapper {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.25rem 2.5rem;
}

.contact-block-card {
  background: var(--card-bg, #ffffff) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  box-sizing: border-box;
  width: 100%;
}

.contact-block-card:hover {
  border-color: #d97706 !important;
  box-shadow: 0 8px 25px rgba(217, 119, 6, 0.12) !important;
}

body.dark-mode .contact-block-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.contact-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1rem;
}

.contact-block-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-block-icon i,
.contact-block-icon svg {
  width: 22px;
  height: 22px;
}

.contact-block-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

body.dark-mode .contact-block-title {
  color: #f8fafc;
}

.contact-block-subtitle {
  margin: 3px 0 0;
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

/* Address Box styling */
.contact-address-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  line-height: 1.65;
  color: #1e293b;
  transition: all 0.2s ease;
}

body.dark-mode .contact-address-box {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

body.dark-mode .contact-address-box .thai-name {
  color: #34d399 !important;
}

body.dark-mode .contact-address-box .thai-addr {
  color: #f1f5f9 !important;
}

body.dark-mode .contact-address-box .eng-addr {
  color: #94a3b8 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Phone list items */
.contact-phone-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.85rem 1.15rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  transition: all 0.2s ease;
}

body.dark-mode .contact-phone-row {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.contact-phone-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

body.dark-mode .contact-phone-label {
  color: #e2e8f0;
}

.contact-phone-number {
  font-size: 1.05rem;
  font-weight: 800;
  color: #047857;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.btn-phone-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.15rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-phone-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5);
  color: #ffffff !important;
}

/* Social buttons */
.contact-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

@media (max-width: 540px) {
  .contact-social-grid {
    grid-template-columns: 1fr;
  }
}

.btn-social-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.btn-social-contact.line {
  background: linear-gradient(135deg, #06C755 0%, #05b04b 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-social-contact.facebook {
  background: linear-gradient(135deg, #1877F2 0%, #0d65d9 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-social-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}

/* GPS Block */
.contact-gps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #f8fafc;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

body.dark-mode .contact-gps-row {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.btn-gps-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff !important;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gps-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
  color: #ffffff !important;
}

/* Contact Form Block */
.contact-form-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form-vertical .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form-vertical label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

body.dark-mode .contact-form-vertical label {
  color: #e2e8f0;
}

.contact-form-vertical input[type="text"],
.contact-form-vertical input[type="tel"],
.contact-form-vertical select,
.contact-form-vertical textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

body.dark-mode .contact-form-vertical input[type="text"],
body.dark-mode .contact-form-vertical input[type="tel"],
body.dark-mode .contact-form-vertical select,
body.dark-mode .contact-form-vertical textarea {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

.contact-form-vertical input:focus,
.contact-form-vertical select:focus,
.contact-form-vertical textarea:focus {
  border-color: #d97706 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

body.dark-mode .contact-form-vertical input:focus,
body.dark-mode .contact-form-vertical select:focus,
body.dark-mode .contact-form-vertical textarea:focus {
  background: rgba(30, 41, 59, 0.95) !important;
}

.btn-contact-submit {
  width: 100%;
  padding: 0.85rem 1.5rem;
  border-radius: 30px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.35);
  transition: all 0.25s ease;
}

.btn-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(217, 119, 6, 0.5);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

@media (max-width: 768px) {
  .contact-blocks-wrapper {
    gap: 0.85rem;
    padding: 0.25rem 0 3rem;
  }

  .contact-block-card {
    padding: 1.15rem 1rem !important;
    border-radius: 16px !important;
  }

  .contact-phone-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .btn-phone-call {
    width: 100%;
    justify-content: center;
    padding: 0.55rem;
  }
}

/* ===== Contact Staff Notification Bell (ตำแหน่งวงสีแดง) ===== */
.contact-staff-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1.8px solid #f59e0b;
  color: #b45309;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-staff-bell-btn:hover {
  background: #fffbeb;
  border-color: #d97706;
  color: #92400e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

body.dark-mode .contact-staff-bell-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: #f59e0b;
  color: #fde68a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

body.dark-mode .contact-staff-bell-btn:hover {
  background: rgba(51, 65, 85, 0.95);
  border-color: #fbbf24;
  color: #ffffff;
}

.contact-staff-bell-btn .bell-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}

body.dark-mode .contact-staff-bell-btn .bell-icon-wrapper {
  color: #fbbf24;
}

.contact-staff-bell-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.65);
  animation: bellBadgePulse 1.8s infinite;
}

@keyframes bellBadgePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes bellShake {

  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-16deg);
  }

  40%,
  80% {
    transform: rotate(16deg);
  }
}

.bell-shaking {
  animation: bellShake 0.7s ease-in-out;
}

/* Modal Tabs & Cards for Contact Inquiries */
.btn-contact-tab {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-contact-tab:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.btn-contact-tab.active {
  background: #064e3b;
  color: #ffffff;
  border-color: #064e3b;
  box-shadow: 0 2px 6px rgba(6, 78, 59, 0.25);
}

body.dark-mode .btn-contact-tab {
  background: #1e293b;
  border-color: #475569;
  color: #94a3b8;
}

body.dark-mode .btn-contact-tab.active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

.contact-inquiry-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  position: relative;
}

body.dark-mode .contact-inquiry-card {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

.contact-inquiry-card.pending {
  border-left: 5px solid #f59e0b;
}

.contact-inquiry-card.contacted {
  border-left: 5px solid #10b981;
  opacity: 0.92;
}

.contact-inquiry-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}


/* ==========================================================================
   Home Page Chedi Host Banner Card (Golden Buddha Artwork + Razor-Sharp Text)
   ========================================================================== */
.chedi-host-banner-card {
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #2a1505;
  border: 2px solid #b4832c;
  box-shadow: 0 10px 30px rgba(180, 131, 44, 0.28), 0 4px 15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  user-select: none;
  -webkit-user-select: none;
  min-height: 270px;
}

.chedi-host-banner-card:hover {
  transform: translateY(-3px);
  border-color: #f59e0b;
  box-shadow: 0 16px 45px rgba(217, 119, 6, 0.42), 0 0 25px rgba(245, 158, 11, 0.3);
}

/* Background image: Clean artwork without text */
.chedi-banner-gold-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.4s ease;
}

.chedi-host-banner-card:hover .chedi-banner-gold-bg-img {
  transform: scale(1.012);
}

/* Shimmer animation */
.chedi-banner-gold-shimmer {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 235, 180, 0.18) 50%,
    transparent 65%
  );
  transform: skewX(-20deg);
  animation: chediShimmerGold 5.5s infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes chediShimmerGold {
  0% { left: -150%; }
  25%, 100% { left: 150%; }
}

/* Razor-sharp typography content layer */
.chedi-banner-sharp-content {
  position: relative;
  z-index: 4;
  padding: clamp(1.2rem, 2.5vw, 1.85rem) clamp(1.2rem, 3.2vw, 2.4rem);
  max-width: 56%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.1vw, 0.9rem);
  height: 100%;
  box-sizing: border-box;
}

/* Top Row */
.chedi-sharp-top-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.chedi-sharp-flame-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.5));
}

.chedi-sharp-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(36, 22, 14, 0.72);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.chedi-sharp-pill-badge span {
  color: #ffffff !important;
}

/* Titles */
.chedi-sharp-titles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chedi-sharp-title-1 {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}

.chedi-sharp-title-2 {
  color: #facc15 !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 10px rgba(250, 204, 21, 0.45);
  -webkit-font-smoothing: antialiased;
}

.chedi-sharp-desc {
  margin: 0.25rem 0 0 0;
  color: #ffffff !important;
  font-size: clamp(0.78rem, 1.15vw, 0.88rem);
  line-height: 1.55;
  font-weight: 500;
  opacity: 0.98;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}

/* Action Bar */
.chedi-sharp-action-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.btn-chedi-sharp-cta {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: #ffffff !important;
  font-weight: 800;
  border: 1px solid rgba(254, 240, 138, 0.4);
  padding: 0.68rem 1.6rem;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45);
  transition: all 0.25s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
}

.btn-chedi-sharp-cta span {
  color: #ffffff !important;
}

.btn-chedi-sharp-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #92400e 100%);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.65);
}

.chedi-sharp-vacant-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 18, 12, 0.85);
  border: 1px solid rgba(217, 119, 6, 0.4);
  padding: 0.62rem 1.15rem;
  border-radius: 9999px;
  color: #ffffff !important;
  font-size: clamp(0.82rem, 1.15vw, 0.9rem);
  font-weight: 700;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: antialiased;
}

.chedi-sharp-vacant-counter span {
  color: #ffffff !important;
}

.chedi-sharp-vacant-counter strong {
  color: #facc15 !important;
  font-weight: 800;
  font-size: 1.12em;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .chedi-host-banner-card {
    min-height: auto;
    border-radius: 16px;
  }
  .chedi-banner-sharp-content {
    max-width: 65%;
    padding: 1.25rem;
  }
  .chedi-banner-left-mask {
    width: 68%;
  }
  .chedi-banner-left-thai-pattern {
    width: 65%;
  }
}

@media (max-width: 520px) {
  .chedi-banner-sharp-content {
    max-width: 100%;
    background: rgba(45, 24, 7, 0.75);
    border-radius: 16px;
  }
  .chedi-banner-left-mask {
    width: 100%;
    background: linear-gradient(to bottom, rgba(59, 32, 6, 0.92) 0%, rgba(59, 32, 6, 0.6) 100%);
  }
}

/* ============================================================
   จัดการผู้ใช้งาน (ขั้นสูง) — Responsive Mobile Fix
   ============================================================ */

/* ตาราง (table-responsive) ทั่วไป — ให้เลื่อนซ้าย-ขวาได้ */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ตารางภายใน .table-responsive ไม่ตัดเนื้อหา */
.table-responsive table {
  min-width: 500px;
  /* ให้ตารางมีความกว้างขั้นต่ำ — เลื่อนได้เมื่อจอแคบ */
  border-collapse: collapse;
  width: 100%;
}

@media (max-width: 768px) {

  /* === Tab Users Layout (จัดการระบบผู้ใช้งาน ขั้นสูง) === */
  #tab-users {
    padding: 0.5rem 0.25rem 6.5rem 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #tab-users .card,
  #tab-users .card.glass-card {
    padding: 0.75rem 0.6rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  }

  #tab-users h3 {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.25 !important;
  }

  #tab-users h3 i,
  #tab-users h3 svg {
    width: 18px !important;
    height: 18px !important;
  }

  #tab-users h4 {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.4rem !important;
  }

  /* วางฟอร์มและตารางแนวตั้ง (stack) บนมือถือ */
  #users-layout-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ฟอร์มเพิ่ม/แก้ไขผู้ใช้งาน: เต็มความกว้าง */
  #users-add-form-col {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #add-user-form {
    gap: 0.45rem !important;
    margin-top: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #add-user-form .form-group {
    margin-bottom: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #add-user-form label {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.15rem !important;
    display: block !important;
    color: #334155 !important;
  }

  #add-user-form input[type="text"],
  #add-user-form input[type="password"],
  #add-user-form input[type="number"],
  #add-user-form input[type="date"],
  #add-user-form select {
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
  }

  #add-user-form input:focus,
  #add-user-form select:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
    outline: none !important;
  }

  /* User Photo Upload Row */
  .user-profile-upload-row,
  #tab-users .user-profile-upload-row {
    display: flex !important;
    gap: 0.4rem !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-profile-file-input,
  #tab-users .user-profile-file-input {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 35px !important;
    padding: 0.3rem 0.4rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .btn-user-camera,
  #tab-users .btn-user-camera {
    flex-shrink: 0 !important;
    height: 35px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* 2-column grids inside form: compact side-by-side on mobile */
  #add-user-form div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3-column grid (salary, daily, hire date) -> 2 cols on mobile, 3rd spans full width */
  #add-user-form div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #add-user-form div[style*="grid-template-columns: 1fr 1fr 1fr"] .form-group:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* ปุ่มบันทึก/ยกเลิก */
  #add-user-form>div:last-child {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #btn-save-user,
  #btn-cancel-edit-user {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* คอลัมน์ตาราง: เต็มความกว้าง */
  #users-list-col {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
  }

  #users-list-col .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-top: 0.5rem !important;
  }

  #users-list-col table {
    width: 100% !important;
    min-width: 360px !important;
    border-collapse: collapse !important;
    font-size: 0.72rem !important;
  }

  /* ตารางผู้ใช้งาน: ซ่อนคอลัมน์ที่ไม่จำเป็นบนมือถือ */
  #users-table-body tr td:nth-child(1),
  /* ID */
  #tab-users thead th:nth-child(1) {
    /* ID header */
    display: none !important;
  }

  #users-table-body tr td:nth-child(6),
  /* วันที่สร้าง */
  #tab-users thead th:nth-child(6) {
    /* วันที่สร้าง header */
    display: none !important;
  }

  /* ปรับขนาดตัวอักษรในตาราง */
  #tab-users table th {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.35rem !important;
    white-space: nowrap !important;
    background: #f8fafc !important;
    border-bottom: 2px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
  }

  #tab-users table td {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.35rem !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  /* ปุ่มจัดการในตาราง */
  #tab-users .btn-sm {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    min-width: 0 !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
  }

  #tab-users .btn-sm i,
  #tab-users .btn-sm svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* === ทั่วไป: ป้องกัน main-content ล้นจอ === */
  .main-content {
    overflow-x: hidden !important;
  }

  /* ตาราง table-responsive ทั่วทุกแท็บ: เลื่อนได้ */
  .table-responsive {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE SUITE (ครอบคลุมทุกหน้า ทุกแท็บ สำหรับโทรศัพท์มือถือ)
   ========================================================================== */

/* Universal Mobile Overflow Protection */
@media (max-width: 992px) {

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  .app-container,
  .app-container.vertical,
  .main-content,
  .tab-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .card,
  .glass-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }

  /* Table horizontal scroll protection */
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1rem !important;
  }

  .table-responsive:not(.table-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
  }

  #front-registrations-table-container.table-hidden,
  #front-registrations-table-container[style*="display: none"],
  #front-registrations-table-container[style*="display:none"] {
    display: none !important;
  }

  #front-registrations-table-container.table-visible {
    display: block !important;
  }

  /* Temple Repair Modals Buttons Contrast */
  #modal-temple-repair-detail .btn-secondary,
  #modal-temple-repair .btn-secondary,
  #modal-complete-temple-repair .btn-secondary {
    color: #f8fafc !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    transition: all 0.2s ease !important;
  }

  #modal-temple-repair-detail .btn-secondary:hover,
  #modal-temple-repair .btn-secondary:hover,
  #modal-complete-temple-repair .btn-secondary:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
  }

  #temple-repair-img-count {
    display: none !important;
  }

  /* Room Maintenance Modal Input Visibility */
  #maint-reporter,
  #maint-date {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    opacity: 1 !important;
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    font-weight: 700 !important;
  }

  #maint-room-display {
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
    opacity: 1 !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 800 !important;
  }

  /* 1. Header & Brand */
  .app-header {
    padding: 0.5rem 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav-menu.horizontal {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* 2. Home Page: Temple Grid & Columns */
  .temple-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .temple-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #home-video-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 1rem !important;
  }

  /* 3. Documents Tab: Featured Order & Grid */
  .doc-featured-card {
    flex-direction: column !important;
    padding: 1.1rem !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  .doc-featured-card .doc-thumbnail {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .doc-featured-card .doc-info {
    min-width: 0 !important;
    width: 100% !important;
  }

  .doc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Committee: Members Grid */
  .members-lower-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .members-lower-grid .board-member-card {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .board-carousel-container {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 280px !important;
    max-height: 520px !important;
    aspect-ratio: 3/4 !important;
    margin: 0 auto !important;
  }

  /* 5. Amulet Sanctum & Donations */
  .naga-sacred-ribbon {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .amulet-main-layout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .amulet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  /* 6. Merit Funds */
  #merit-funds-container {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* 7. Map Layout */
  .map-layout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .map-wrapper,
  .map-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 8. Rooms & Accommodation */
  #tab-temple-rooms .header-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  #booking-search-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  #input-search-monthly-booking {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 9. Naga Prep & Rules */
  .naga-subnav-bar {
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 14px !important;
  }

  .naga-subnav-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .naga-quick-anchors {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }

  .naga-anchor-link {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  .naga-hero-banner {
    padding: 1.35rem 1.1rem !important;
    border-radius: 16px !important;
  }

  .naga-hero-title {
    font-size: 1.45rem !important;
  }

  .naga-hero-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* 10. Dharma Room */
  .dharma-hero-card {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .dharma-hero-content h2 {
    font-size: 1.35rem !important;
  }

  .dharma-media-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .dharma-search-bar {
    width: 100% !important;
    min-width: 0 !important;
  }

  .dharma-search-bar input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 11. History Layout */
  .history-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .history-images {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 0.65rem !important;
  }

  .history-inline-images {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 0.65rem !important;
  }

  /* 12. Modal dialogs on mobile */
  .modal-dialog,
  .modal-content,
  .blessing-modal-content,
  .modal-reader-dialog,
  .modal-video-dialog,
  .modal-admin-dialog {
    width: 95% !important;
    max-width: 95% !important;
    margin: 1rem auto !important;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box !important;
  }
}

/* Extra Phone Screens (max-width: 640px) */
@media (max-width: 640px) {
  .main-content {
    padding: 0.5rem 0.25rem 6.5rem 0.25rem !important;
  }

  .card,
  .glass-card {
    padding: 0.85rem !important;
    border-radius: 14px !important;
  }

  .amulet-control-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .amulet-category-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .amulet-category-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .naga-tab-btn {
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.85rem !important;
  }

  .amulet-search-box {
    width: 100% !important;
    min-width: 0 !important;
  }

  .amulet-search-box input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  #home-video-grid-container {
    grid-template-columns: 1fr !important;
  }

  /* วัตถุมงคล: แถวละ 3 อันบนมือถือ กะทัดรัด สบายตา ไม่หลุดจอ */
  .amulet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* กองบุญ: 1 คอลัมน์เต็มความกว้าง และปุ่มเรียงแนวตั้งพอดีจอ */
  #merit-funds-container {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 1rem !important;
  }

  #merit-funds-container .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #merit-funds-container .card div[style*="display: flex; gap: 0.5rem;"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #merit-funds-container .card button {
    width: 100% !important;
  }

  .naga-prep-pillars-grid {
    grid-template-columns: 1fr !important;
  }

  .checklist-items-grid {
    grid-template-columns: 1fr !important;
  }

  .checklist-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .readiness-meter-wrap {
    width: 100% !important;
  }

  #rooms-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 0.65rem !important;
  }

  /* Home Registration Filter Bar */
  .registrations-list-card div[style*="display: flex; gap: 0.5rem; margin-bottom: 1rem;"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #registration-search {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #registration-month-filter {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .registration-filters {
    gap: 0.35rem !important;
    margin-bottom: 1rem !important;
  }

  .registration-filters .filter-pill {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.65rem !important;
  }
}

/* Small Screens (max-width: 380px) */
@media (max-width: 380px) {
  .doc-grid {
    grid-template-columns: 1fr !important;
  }

  .amulet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .chedi-title-main {
    font-size: 1.05rem !important;
  }

  .btn-chedi-view-plan {
    font-size: 0.9rem !important;
    padding: 0.75rem 0.85rem !important;
  }
}

/* ==========================================================================
   INTERACTIVE ROOM STATUS DASHBOARD & FILTERS (ระบบแดชบอร์ดและฟิลเตอร์สถานะห้องพัก)
   ========================================================================== */

/* Search input high-contrast placeholder */
#input-search-monthly-booking {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid #64748b !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

#input-search-monthly-booking::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

#input-search-monthly-booking::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

#input-search-monthly-booking::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

#input-search-monthly-booking:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.2px !important;
}

#input-search-monthly-booking:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4) !important;
  outline: none !important;
}

/* Dashboard Bar: Deep solid navy container */
.room-status-dashboard-bar {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  padding: 6px 12px !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Each Pill: Solid background with 100% white bold text */
.room-dashboard-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 13px !important;
  border-radius: 20px !important;
  background: #1e293b !important;
  border: 1.5px solid #475569 !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: inherit !important;
  outline: none !important;
  user-select: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.room-dashboard-pill .pill-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.room-dashboard-pill:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}

.room-dashboard-pill.active {
  background: #0f172a !important;
  border: 2px solid #fbbf24 !important;
  color: #fef08a !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45) !important;
  font-weight: 800 !important;
}

.room-dashboard-pill.active .pill-text {
  color: #fef08a !important;
  font-weight: 800 !important;
}

.room-dashboard-pill .pill-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

.room-dashboard-pill[data-status="all"] .pill-dot {
  background: #cbd5e1 !important;
}

.room-dashboard-pill[data-status="Maintenance"] .pill-dot {
  background: #ef4444 !important;
}

.room-dashboard-pill[data-status="Available"] .pill-dot {
  background: #22c55e !important;
}

.room-dashboard-pill[data-status="Occupied"] .pill-dot {
  background: #f97316 !important;
}

.room-dashboard-pill[data-status="PendingBedding"] .pill-dot {
  background: #ec4899 !important;
}

.room-dashboard-pill[data-status="PendingCleaning"] .pill-dot {
  background: #3b82f6 !important;
}

/* Number Badges: Solid, High-Contrast, Bright White Numbers */
.room-dashboard-pill .pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 11px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  background: #475569 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.2px !important;
}

.room-dashboard-pill .pill-badge-green {
  background: #16a34a !important;
  color: #ffffff !important;
}

.room-dashboard-pill .pill-badge-orange {
  background: #ea580c !important;
  color: #ffffff !important;
}

.room-dashboard-pill .pill-badge-pink {
  background: #db2777 !important;
  color: #ffffff !important;
}

.room-dashboard-pill .pill-badge-blue {
  background: #2563eb !important;
  color: #ffffff !important;
}

.room-dashboard-pill .pill-badge-red {
  background: #dc2626 !important;
  color: #ffffff !important;
}

@media (max-width: 900px) {
  #room-status-filter-wrapper {
    width: auto;
  }

  .room-status-dashboard-bar {
    width: 100%;
    margin-top: 4px;
  }
}

@media (max-width: 600px) {
  #room-status-filter-wrapper {
    width: 100%;
  }

  #room-status-filter-select {
    width: 100%;
  }

  .room-status-dashboard-bar {
    gap: 5px;
    padding: 6px 8px;
  }

  .room-dashboard-pill {
    padding: 5px 9px;
    font-size: 0.8rem;
    gap: 6px;
  }

  .room-dashboard-pill .pill-text {
    font-size: 0.8rem;
  }

  .room-dashboard-pill .pill-badge {
    min-width: 20px;
    height: 20px;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   INTERACTIVE PDF READER MODAL (หนังสือสวดมนต์ & บทสวดมนต์ PDF)
   Responsive, Mobile-friendly, High Aesthetics
   ========================================================================== */

#modal-pdf-viewer.pdf-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10005 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.pdf-modal-container {
  width: 98vw;
  max-width: 1350px;
  height: 96vh;
  max-height: 96vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, 0.4);
  display: flex;
  flex-direction: column;
  background: #0f172a;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
  z-index: 10006 !important;
  box-sizing: border-box;
}

/* Header & Controls */
.pdf-viewer-header {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  color: #fef08a;
  padding: 0.6rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

.pdf-header-row-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  overflow: hidden;
}

.pdf-header-title-box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
}

.pdf-header-icon {
  color: #fef08a;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.pdf-header-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fef08a;
}

.pdf-header-tag {
  background: rgba(254, 240, 138, 0.2);
  color: #fef08a;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  flex-shrink: 0;
  font-weight: 600;
}

.pdf-header-actions-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pdf-btn-external {
  background: rgba(254, 240, 138, 0.2);
  color: #fef08a !important;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(254, 240, 138, 0.4);
  transition: all 0.2s ease;
}

.pdf-btn-external:hover {
  background: rgba(254, 240, 138, 0.32);
  color: #ffffff !important;
}

.pdf-btn-external svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pdf-btn-close {
  background: none;
  border: none;
  color: #fef08a;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pdf-btn-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.pdf-btn-close svg {
  width: 22px;
  height: 22px;
}

/* Controls Toolbar */
.pdf-controls-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1px solid rgba(254, 240, 138, 0.25);
  box-sizing: border-box;
}

.pdf-tb-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.pdf-tb-btn {
  background: none;
  border: none;
  color: #fef08a;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.pdf-tb-btn:hover {
  background: rgba(254, 240, 138, 0.2);
}

.pdf-tb-btn svg {
  width: 17px;
  height: 17px;
}

.pdf-tb-page-info {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pdf-tb-page-info input {
  width: 42px;
  text-align: center;
  background: #064e3b;
  border: 1px solid #10b981;
  color: #fef08a;
  border-radius: 4px;
  font-size: 0.85rem;
  padding: 0.15rem;
}

.pdf-tb-page-info input:focus {
  outline: none;
  border-color: #fef08a;
}

.pdf-tb-separator {
  height: 16px;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.pdf-tb-zoom-level {
  font-size: 0.75rem;
  color: #d1fae5;
  font-weight: 600;
  min-width: 38px;
  text-align: center;
}

.pdf-tb-fit-btn {
  background: rgba(254, 240, 138, 0.15);
  border: 1px solid rgba(254, 240, 138, 0.3);
  color: #fef08a;
  cursor: pointer;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.15s ease;
}

.pdf-tb-fit-btn:hover {
  background: rgba(254, 240, 138, 0.3);
}

/* PDF Reader Body */
.pdf-reader-body {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  position: relative;
  background: #1a202c;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem 3rem 1rem;
  box-sizing: border-box;
}

.pdf-fallback-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f8fafc;
  padding: 1rem;
  box-sizing: border-box;
}

/* Fallback Card */
.pdf-fallback-card {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 2rem 1.8rem;
  max-width: 480px;
  width: 90%;
  margin: auto;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.pdf-fallback-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(254, 240, 138, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #fef08a;
  box-shadow: 0 0 16px rgba(254, 240, 138, 0.12);
}

.pdf-fallback-icon {
  width: 30px;
  height: 30px;
}

.pdf-fallback-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fef08a;
  margin-bottom: 0.6rem;
  line-height: 1.4;
  word-break: break-word;
}

.pdf-fallback-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

.pdf-fallback-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pdf-fallback-btn-read {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff !important;
  padding: 0.65rem 1.4rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pdf-fallback-btn-read:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.55);
}

.pdf-fallback-btn-close {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf-fallback-btn-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ==========================================================================
   MOBILE RESPONSIVE: PDF READER (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
  #modal-pdf-viewer.pdf-modal-backdrop {
    padding: 8px !important;
    z-index: 10005 !important;
  }

  .pdf-modal-container {
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
    margin: 0 !important;
  }

  .pdf-viewer-header {
    padding: 0.45rem 0.65rem !important;
    gap: 0.4rem !important;
    flex-direction: column !important;
  }

  .pdf-header-row-main {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .pdf-header-title-box {
    max-width: 62% !important;
  }

  .pdf-header-title {
    font-size: 0.85rem !important;
  }

  .pdf-header-tag {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.35rem !important;
  }

  .pdf-header-actions-box {
    gap: 0.35rem !important;
  }

  .pdf-btn-external {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
  }

  .pdf-btn-close {
    padding: 0.15rem !important;
  }

  .pdf-btn-close svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Controls Toolbar on Mobile: Compact & Centered */
  .pdf-controls-toolbar {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.2rem 0.4rem !important;
    gap: 0.25rem !important;
    border-radius: 12px !important;
  }

  .pdf-desktop-control {
    display: none !important;
  }

  .pdf-tb-page-info {
    font-size: 0.78rem !important;
  }

  .pdf-tb-page-info input {
    width: 32px !important;
    padding: 0.1rem 0.15rem !important;
    font-size: 0.78rem !important;
  }

  .pdf-tb-zoom-level {
    font-size: 0.72rem !important;
    min-width: 30px !important;
  }

  .pdf-tb-btn {
    padding: 0.18rem 0.25rem !important;
  }

  .pdf-tb-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Reader Body on Mobile */
  .pdf-reader-body {
    padding: 0.75rem 0.5rem 1.25rem 0.5rem !important;
  }

  .pdf-fallback-container {
    padding: 0.5rem !important;
  }

  /* Fallback Card on Mobile */
  .pdf-fallback-card {
    max-width: 320px !important;
    width: 95% !important;
    padding: 1.15rem 0.9rem !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  }

  .pdf-fallback-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0.65rem !important;
  }

  .pdf-fallback-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .pdf-fallback-title {
    font-size: 0.92rem !important;
    margin-bottom: 0.35rem !important;
  }

  .pdf-fallback-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.95rem !important;
  }

  .pdf-fallback-btn-read {
    padding: 0.52rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }

  .pdf-fallback-btn-close {
    padding: 0.52rem 0.8rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 380px) {
  .pdf-btn-external-label {
    display: none !important;
  }
}

/* ==========================================================================
   MODERN PREMIUM LOGIN MODAL (ม่อนพญานาคราช)
   ========================================================================== */
#login-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  animation: loginModalFadeIn 0.25s ease-out;
}

@keyframes loginModalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes loginCardPop {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(12px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-modal-card {
  width: 100% !important;
  max-width: 420px !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(217, 119, 6, 0.3) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(217, 119, 6, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  animation: loginCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  color: #1e293b !important;
}

body.dark-mode .login-modal-card {
  background: #0f172a !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(245, 158, 11, 0.2) !important;
  color: #f8fafc !important;
}

/* Header Banner with Golden Temple Theme */
.login-modal-header {
  position: relative;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
  padding: 2.2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(217, 119, 6, 0.18);
}

body.dark-mode .login-modal-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(217, 119, 6, 0.25);
}

/* Close Button */
.login-modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  z-index: 10;
}

body.dark-mode .login-modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.login-modal-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: rotate(90deg) scale(1.05);
}

.login-modal-close-btn svg,
.login-modal-close-btn i {
  width: 18px;
  height: 18px;
}

/* Temple Logo Badge */
.login-brand-badge {
  width: 68px;
  height: 68px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  border: 2px solid #d97706;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.dark-mode .login-brand-badge {
  background: #1e293b;
  border-color: #f59e0b;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

.login-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.login-modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #92400e;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.01em;
}

body.dark-mode .login-modal-title {
  color: #fbbf24;
}

.login-modal-subtitle {
  font-size: 0.82rem;
  color: #78350f;
  opacity: 0.85;
  margin: 0;
  font-weight: 600;
}

body.dark-mode .login-modal-subtitle {
  color: #cbd5e1;
  opacity: 0.85;
}

/* Body / Form Container */
.login-modal-body {
  padding: 1.75rem 1.75rem 2rem;
}

/* Error Alert */
#login-error {
  background: rgba(254, 242, 242, 0.95) !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: 12px !important;
  color: #b91c1c !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
  line-height: 1.4 !important;
  animation: shakeAlert 0.4s ease;
}

body.dark-mode #login-error {
  background: rgba(127, 29, 29, 0.35) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

@keyframes shakeAlert {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Form Styles */
.login-form-modern {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.login-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  text-align: left !important;
}

.login-field-label {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

body.dark-mode .login-field-label {
  color: #e2e8f0 !important;
}

.login-field-label svg,
.login-field-label i {
  width: 15px !important;
  height: 15px !important;
  color: #d97706 !important;
}

.login-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.login-input-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  transition: color 0.2s ease !important;
}

.login-input-icon svg,
.login-input-icon i {
  width: 18px !important;
  height: 18px !important;
}

.login-form-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 0.85rem 2.85rem 0.85rem 2.85rem !important;
  color: #0f172a !important;
  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

body.dark-mode .login-form-input {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.login-form-input:hover {
  border-color: #94a3b8 !important;
}

body.dark-mode .login-form-input:hover {
  border-color: #475569 !important;
}

.login-form-input:focus {
  background: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15) !important;
}

body.dark-mode .login-form-input:focus {
  background: #0f172a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25) !important;
}

.login-input-wrapper:focus-within .login-input-icon {
  color: #d97706 !important;
}

/* Password Toggle Eye Button */
.login-pwd-toggle-btn {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0.35rem !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s, background 0.2s !important;
  outline: none !important;
}

.login-pwd-toggle-btn:hover {
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.1) !important;
}

.login-pwd-toggle-btn svg,
.login-pwd-toggle-btn i {
  width: 18px !important;
  height: 18px !important;
}

/* Submit Button */
.btn-login-submit {
  width: 100% !important;
  margin-top: 0.5rem !important;
  padding: 0.9rem 1.5rem !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  border-radius: 14px !important;
  font-family: var(--font-main) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.btn-login-submit:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.45) !important;
}

.btn-login-submit:active {
  transform: translateY(0) scale(0.99) !important;
}

.btn-login-submit svg,
.btn-login-submit i {
  width: 20px !important;
  height: 20px !important;
}

/* Authenticated User View (เมื่อเข้าสู่ระบบแล้ว) */
.login-authenticated-box {
  text-align: center;
  padding: 0.5rem 0;
}

.login-auth-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.25) 100%);
  border: 2px solid #10b981;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
}

.login-auth-avatar svg,
.login-auth-avatar i {
  width: 32px;
  height: 32px;
}

.login-auth-status {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

body.dark-mode .login-auth-status {
  color: #94a3b8;
}

.login-auth-username {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #d97706;
  background: rgba(217, 119, 6, 0.08);
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  padding: 0.4rem 1.4rem;
  border-radius: 20px;
  margin-bottom: 0.65rem;
  letter-spacing: 0.02em;
}

body.dark-mode .login-auth-username {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}

.login-auth-hint {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 1.5rem;
}

.btn-logout-modern {
  width: 100% !important;
  padding: 0.85rem 1.5rem !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid #f87171 !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-logout-modern:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}

@media (max-width: 480px) {
  .login-modal-card {
    max-width: 95% !important;
    border-radius: 20px !important;
  }

  .login-modal-header {
    padding: 1.75rem 1.25rem 1.25rem;
  }

  .login-brand-badge {
    width: 58px;
    height: 58px;
  }

  .login-modal-title {
    font-size: 1.3rem;
  }

  .login-modal-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* Force notification-dropdown to stay properly aligned without translateX shift */
#notification-dropdown,
.notification-dropdown-panel,
#room-notification-dropdown,
.room-notification-dropdown {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ==========================================================================
   Chat Room (ห้องสนทนาม่อนพญานาคราช - ธรรมสนทนา & ถาม-ตอบ)
   ========================================================================== */
.chat-messages-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.4) rgba(15, 23, 42, 0.6);
}

.chat-messages-container::-webkit-scrollbar {
  width: 6px;
}

.chat-messages-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 6px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 6px;
}

.chat-messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.7);
}

.chat-message-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  align-items: flex-start;
  animation: chatFadeIn 0.2s ease-out;
  position: relative;
  margin-bottom: 5px !important;
  margin-top: 0px !important;
  padding: 3px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message-row.is-me {
  flex-direction: row !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.chat-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-content-wrap {
  display: block !important;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
  word-break: break-word;
}

.chat-message-row.is-me .chat-content-wrap {
  text-align: left;
}

.chat-message-row:not(.is-me) .chat-content-wrap {
  text-align: left;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0px !important;
  font-size: 0.74rem;
  line-height: 1.15;
}

.chat-message-row.is-me .chat-meta {
  justify-content: flex-end;
}

.chat-sender-name {
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.chat-time {
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 500;
}

.chat-role-badge {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.chat-role-badge.admin {
  background: #fef3c7;
  color: #854d0e !important;
  border: 1px solid #facc15;
}

.chat-role-badge.staff {
  background: #e0f2fe;
  color: #0369a1 !important;
  border: 1px solid #38bdf8;
}

.chat-role-badge.member {
  background: #f3e8ff;
  color: #6b21a8 !important;
  border: 1px solid #c084fc;
}

.chat-role-badge.guest {
  background: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #cbd5e1;
}

.chat-bubble {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: none !important;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.chat-message-row.is-me .chat-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fef08a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  text-align: right !important;
  align-self: flex-end !important;
}

.chat-message-row.is-me .chat-bubble div,
.chat-message-row.is-me .chat-bubble span {
  text-align: right !important;
}

.chat-message-row:not(.is-me) .chat-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.chat-message-row:not(.is-me) .chat-bubble div,
.chat-message-row:not(.is-me) .chat-bubble span {
  text-align: left !important;
}

.chat-bubble-image {
  margin-top: 0.45rem;
  max-width: 280px;
  max-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-bubble-image:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.chat-bubble-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-delete-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
  opacity: 0.6;
}

.chat-delete-btn:hover {
  color: #ef4444;
  opacity: 1;
}

.chat-quick-tag {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 2px 9px;
  border-radius: 14px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.chat-quick-tag:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: #94a3b8;
  text-align: center;
}

.chat-empty-state i {
  color: #f59e0b;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

/* Facebook-style Comment Thread & Continuous Replies */
.chat-thread-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  animation: chatFadeIn 0.2s ease-out;
}

.chat-fb-comment {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 9px;
  position: relative;
}

.chat-fb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.chat-fb-avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.chat-fb-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-fb-avatar-fallback-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.chat-fb-content-wrap {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  word-break: break-word;
  text-align: left;
}

.chat-fb-header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.25;
  margin-bottom: 2px;
}

.chat-fb-author {
  font-weight: 800;
  color: #0284c7 !important;
  font-size: 0.88rem;
}

.chat-fb-dot {
  color: #94a3b8;
  font-size: 0.75rem;
}

.chat-fb-time {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
}

.chat-fb-body {
  color: #000000 !important;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  margin-top: 1px;
}

.chat-fb-tag {
  color: #2563eb !important;
  font-weight: 800 !important;
  margin-right: 4px;
  display: inline;
}

.chat-fb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
  font-size: 0.74rem;
  color: #64748b;
}

.chat-fb-act-btn {
  background: none;
  border: none;
  padding: 0;
  color: #475569 !important;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s, transform 0.1s;
}

.chat-fb-act-btn:hover {
  color: #d97706 !important;
  text-decoration: underline;
}

.chat-fb-like-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #1877f2;
  color: #ffffff;
  border-radius: 12px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(24, 119, 242, 0.4);
}

.chat-fb-replies-list {
  margin-left: 36px;
  padding-left: 12px;
  border-left: 2px solid #cbd5e1;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

@media (max-width: 640px) {
  .chat-fb-replies-list {
    margin-left: 22px;
    padding-left: 8px;
  }
}

/* Typography for Chat Room Headers */
.chat-home-card .chat-header-title {
  color: #0f172a !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  letter-spacing: 0.2px !important;
}

#tab-chat .chat-header-title {
  color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  letter-spacing: 0.3px !important;
}

.chat-home-card .chat-header-desc {
  color: #334155 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  line-height: 1.35 !important;
}

#tab-chat .chat-header-desc {
  color: #ffffff !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7) !important;
  opacity: 1 !important;
  line-height: 1.4 !important;
}

/* White Placeholder & Input Text */
#chat-input-text-home,
#chat-input-text-full {
  color: #ffffff !important;
  font-weight: 600 !important;
}

#chat-input-text-home::placeholder,
#chat-input-text-full::placeholder,
.chat-home-card input::placeholder {
  color: #ffffff !important;
  opacity: 0.95 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.chat-home-card .live-pulse-badge,
#tab-chat .live-pulse-badge {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  border: 1.5px solid #22c55e !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* High Contrast Maximize Button (Ultra readable on light and dark backgrounds) */
.btn-chat-maximize {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1.5px solid #475569 !important;
  padding: 0.45rem 1rem !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-chat-maximize:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #f59e0b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3) !important;
}

.btn-chat-maximize i {
  color: #f59e0b !important;
}

/* Quick Emoji Chips Bar */
.chat-quick-emoji-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.25rem 0.2rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chat-quick-emoji-bar::-webkit-scrollbar {
  display: none;
}

.chat-quick-emoji-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 2px 8px;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
  user-select: none;
}
.chat-quick-emoji-chip:hover {
  background: rgba(245, 158, 11, 0.35);
  border-color: #f59e0b;
  transform: scale(1.2);
}

/* Emoji Trigger Inside Input */
.chat-emoji-trigger-btn {
  background: none;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: transform 0.15s ease;
  border-radius: 6px;
  outline: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.chat-emoji-trigger-btn:hover {
  transform: scale(1.22);
}

/* Emoji Popup Palette */
.chat-emoji-picker-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 60px;
  width: 320px;
  max-width: 92vw;
  background: #0f172a;
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 16px;
  padding: 0.85rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  backdrop-filter: blur(12px);
}

.chat-emoji-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 0.45rem;
}

.chat-emoji-tab-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-emoji-tab-btn.active, .chat-emoji-tab-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-emoji-grid button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1.3rem;
  padding: 5px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1;
}
.chat-emoji-grid button:hover {
  background: rgba(245, 158, 11, 0.35);
  border-color: rgba(245, 158, 11, 0.6);
  transform: scale(1.22);
}

/* Responsive Mobile Optimization for Chat Room (#tab-chat) */
@media (max-width: 768px) {
  #tab-chat {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #tab-chat > div {
    max-width: 100% !important;
    width: 100% !important;
    gap: 0.65rem !important;
    box-sizing: border-box !important;
  }

  /* Top Banner */
  #tab-chat .chat-room-top-banner {
    padding: 0.85rem 0.9rem !important;
    border-radius: 14px !important;
    gap: 0.65rem !important;
    box-sizing: border-box !important;
  }

  #tab-chat .chat-room-top-banner > div:first-child {
    gap: 0.65rem !important;
    width: 100% !important;
  }

  #tab-chat .chat-room-top-banner > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
  }

  #tab-chat .chat-room-top-banner > div:first-child > div:first-child i,
  #tab-chat .chat-room-top-banner > div:first-child > div:first-child svg {
    width: 22px !important;
    height: 22px !important;
  }

  #tab-chat .chat-header-title {
    font-size: 1.15rem !important;
    gap: 0.35rem !important;
    line-height: 1.3 !important;
  }

  #tab-chat .chat-header-desc {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
  }

  #tab-chat .live-pulse-badge {
    font-size: 0.7rem !important;
    padding: 1px 7px !important;
  }

  /* Main Chat Card */
  #tab-chat .chat-room-main-card {
    padding: 0.75rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* Filter bar */
  #tab-chat #chat-filter-buttons button {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Messages Container on Mobile - dynamic & comfortable height */
  #chat-messages-container-full {
    height: 380px !important;
    max-height: 48vh !important;
    min-height: 240px !important;
    padding: 0.65rem 0.5rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Chat Messages Row */
  .chat-fb-comment {
    gap: 7px !important;
  }

  .chat-fb-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .chat-fb-avatar-fallback {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }

  .chat-fb-author {
    font-size: 0.82rem !important;
  }

  .chat-fb-body {
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
  }

  .chat-fb-replies-list {
    margin-left: 18px !important;
    padding-left: 8px !important;
  }

  /* Input form and action rows */
  #chat-form-full {
    margin-top: 0.5rem !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Identity row */
  .chat-identity-row-full {
    gap: 0.4rem !important;
    width: 100% !important;
  }

  #chat-guest-name-wrap-full {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.8rem !important;
    box-sizing: border-box !important;
  }

  #chat-btn-identity-full {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }

  #chat-user-badge-full {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.82rem !important;
  }

  /* Input row */
  #chat-input-row-full {
    display: flex !important;
    gap: 0.4rem !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #chat-input-row-full > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #chat-input-text-full {
    padding: 0.65rem 2.2rem 0.65rem 0.75rem !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #btn-chat-attach-img-full {
    padding: 0.65rem 0.75rem !important;
    min-width: 42px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }

  #btn-chat-attach-img-full span {
    display: none !important; /* Hide 'แนบรูป' text on phone to prevent overflow, keep icon */
  }

  #chat-send-btn-full {
    padding: 0.65rem 0.9rem !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    gap: 4px !important;
  }

  #chat-reply-bar-preview-full {
    max-width: 180px !important;
  }
}

/* ==========================================================================
   TEMPLE NEWS (ข่าวสารม่อนพญานาคราช)
   ========================================================================== */
.temple-news-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.temple-news-card {
  display: flex;
  flex-direction: row;
  gap: 1.15rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 14px;
  padding: 1rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.temple-news-card:hover {
  background: rgba(217, 119, 6, 0.07);
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12);
}

.temple-news-thumb-wrap {
  width: 170px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(15, 23, 42, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.temple-news-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.temple-news-card:hover .temple-news-thumb-wrap img {
  transform: scale(1.06);
}

.temple-news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.temple-news-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.temple-news-badge-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #000000 !important;
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
}

.temple-news-badge-date i,
.temple-news-badge-date svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

.temple-news-badge-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.temple-news-title {
  margin: 0 0 0.4rem 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  color: #d97706 !important;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.temple-news-card:hover .temple-news-title {
  color: #b45309 !important;
}

.temple-news-excerpt {
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.temple-news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.temple-news-read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f59e0b;
  transition: gap 0.2s, color 0.2s;
}

.temple-news-card:hover .temple-news-read-more {
  color: #fbbf24;
  gap: 7px;
}

.temple-news-admin-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.temple-news-act-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s;
}

.temple-news-act-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.temple-news-act-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

@media (max-width: 640px) {
  .temple-news-card {
    flex-direction: column;
  }
  .temple-news-thumb-wrap {
    width: 100%;
    height: 180px;
  }
}

/* ==========================================================================
   AMULET ORDERS TRACKING & AUDIT MODAL (รายการคำสั่งซื้อ & ตรวจสอบการจัดส่ง)
   ========================================================================== */
.btn-order-tracking {
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.btn-order-tracking:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

.order-filter-pill {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #475569;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-filter-pill:hover {
  background: rgba(217, 119, 6, 0.15);
  border-color: #d97706;
  color: #b45309;
}

.order-filter-pill.active {
  background: #d97706;
  border-color: #b45309;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.amulet-order-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.15rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.2s ease;
}

.amulet-order-card:hover {
  border-color: #d4af37;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.15);
}

body.dark-mode .amulet-order-card {
  background: #1e293b;
  border-color: #334155;
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

body.dark-mode .order-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.order-card-id-block {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.order-id-label {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

.order-id-text {
  font-size: 1.02rem;
  font-weight: 800;
  color: #d97706;
  letter-spacing: 0.5px;
  font-family: monospace, sans-serif;
}

.order-copy-btn {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #d97706;
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.order-copy-btn:hover {
  background: #d97706;
  color: #ffffff;
}

/* Status Badges */
.badge-status-pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-status-approved {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-status-rejected {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.order-card-content {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .order-card-content {
    grid-template-columns: 1fr;
  }
}

.order-details-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: #334155;
}

body.dark-mode .order-details-col {
  color: #cbd5e1;
}

.order-info-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}

.order-info-row .info-icon {
  width: 16px;
  height: 16px;
  color: #64748b;
  flex-shrink: 0;
  margin-top: 3px;
}

.order-items-badge {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 600;
}

body.dark-mode .order-items-badge {
  color: #fbbf24;
}

.order-price-highlight {
  color: #15803d;
  font-size: 0.98rem;
}

body.dark-mode .order-price-highlight {
  color: #4ade80;
}

.delivery-date-highlight {
  background: #ecfdf5;
  color: #065f46;
  border: 1.5px solid #10b981;
  border-radius: 8px;
  padding: 2px 10px;
  font-weight: 800;
  display: inline-block;
}

body.dark-mode .delivery-date-highlight {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.order-slip-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}

body.dark-mode .order-slip-col {
  background: #0f172a;
  border-color: #334155;
}

/* Order Items Box (Right Column) */
.order-items-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 130px;
}

body.dark-mode .order-items-col {
  background: #0f172a;
  border-color: #334155;
}

.order-items-box-header {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .order-items-box-header {
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.order-items-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 2px;
}

.order-item-mini-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.order-item-mini-card:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

body.dark-mode .order-item-mini-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .order-item-mini-card:hover {
  border-color: #fbbf24;
}

.order-item-mini-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  background: #f1f5f9;
}

.order-item-mini-info {
  flex: 1;
  min-width: 0;
}

.order-item-mini-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .order-item-mini-name {
  color: #f1f5f9;
}

.order-item-mini-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

.order-item-mini-qty {
  font-size: 0.72rem;
  color: #d97706;
  font-weight: 700;
  background: rgba(217, 119, 6, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.order-item-mini-price {
  font-size: 0.72rem;
  color: #15803d;
  font-weight: 700;
}

body.dark-mode .order-item-mini-price {
  color: #4ade80;
}

/* Button "ดูสินค้าที่ตัวเองซื้อ" */
.btn-view-purchased-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-view-purchased-link:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #d97706;
  color: #92400e;
  transform: translateY(-1px);
}

body.dark-mode .btn-view-purchased-link {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}

body.dark-mode .btn-view-purchased-link:hover {
  background: rgba(245, 158, 11, 0.28);
  color: #fef08a;
}

.btn-view-slip-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-view-slip-link:hover {
  background: rgba(37, 99, 235, 0.15);
  color: #1d4ed8;
}

.slip-box-header {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.4rem;
}

.slip-thumbnail-wrap {
  position: relative;
  width: 100%;
  max-width: 160px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.slip-thumbnail-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.slip-thumbnail-wrap:hover img {
  transform: scale(1.08);
}

.slip-zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.slip-thumbnail-wrap:hover .slip-zoom-hint {
  opacity: 1;
}

/* Staff & Admin Approval Actions */
.order-card-actions {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .order-card-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.staff-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-audit-pass {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
}

.btn-audit-pass:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
}

.btn-audit-fail {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
  transition: all 0.2s ease;
}

.btn-audit-fail:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
}

.btn-audit-revert {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-audit-revert:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.btn-order-delete {
  background: rgba(239, 68, 68, 0.12);
  border: 1.5px solid #ef4444;
  color: #ef4444;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-order-delete:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

body.dark-mode .btn-order-delete {
  background: rgba(239, 68, 68, 0.15);
  border-color: #f87171;
  color: #f87171;
}

body.dark-mode .btn-order-delete:hover {
  background: #dc2626;
  color: #ffffff;
}

.delivery-picker-drawer {
  margin-top: 0.65rem;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 0.75rem;
}

body.dark-mode .delivery-picker-drawer {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

.delivery-date-input {
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  border: 1px solid #86efac;
  font-size: 0.85rem;
  font-weight: 600;
  background: #ffffff;
}

body.dark-mode .delivery-date-input {
  background: #0f172a;
  color: #ffffff;
  border-color: #334155;
}

.btn-confirm-delivery {
  background: #059669;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-confirm-delivery:hover {
  background: #047857;
}

.btn-cancel-delivery {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.guest-info-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  background: rgba(0, 0, 0, 0.03);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
}