@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --customer-bg-1: #0f766e;
  --customer-bg-2: #0f172a;
  --customer-bg-3: #155e75;
  --customer-surface: rgba(255, 255, 255, 0.92);
  --customer-surface-strong: #ffffff;
  --customer-border: rgba(148, 163, 184, 0.36);
  --customer-text: #0f172a;
  --customer-muted: #475569;
  --customer-primary: #0f766e;
  --customer-primary-2: #0e7490;
  --customer-primary-3: #0284c7;
  --customer-accent: #f97316;
  --customer-focus: rgba(15, 118, 110, 0.2);
}

body.customer-theme-page,
body.customer-theme,
body[data-customer-theme='1'] {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  color: var(--customer-text) !important;
  background:
    radial-gradient(1200px 600px at 90% 10%, rgba(249, 115, 22, 0.22), transparent 55%),
    radial-gradient(900px 500px at 10% 100%, rgba(20, 184, 166, 0.24), transparent 60%),
    linear-gradient(145deg, var(--customer-bg-2) 0%, var(--customer-bg-3) 52%, var(--customer-bg-1) 100%) !important;
  min-height: 100vh;
}

body.customer-theme-page::before,
body.customer-theme::before,
body[data-customer-theme='1']::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), transparent 24%, rgba(2, 132, 199, 0.08));
  z-index: 0;
}

body.customer-theme-page .container,
body.customer-theme-page .main-container,
body.customer-theme-page .login-container,
body.customer-theme-page .register-container,
body.customer-theme-page .otp-container,
body.customer-theme-page .content-section,
body.customer-theme-page .row,
body.customer-theme-page .navbar,
body.customer-theme .container,
body.customer-theme .main-container,
body.customer-theme .content-section,
body.customer-theme .row,
body.customer-theme .navbar,
body[data-customer-theme='1'] .container,
body[data-customer-theme='1'] .main-container,
body[data-customer-theme='1'] .content-section,
body[data-customer-theme='1'] .row,
body[data-customer-theme='1'] .navbar {
  position: relative;
  z-index: 1;
}

body.customer-theme-page .navbar,
body.customer-theme-page .customer-top-flying-bar,
body.customer-theme .navbar,
body.customer-theme .customer-top-flying-bar,
body[data-customer-theme='1'] .navbar,
body[data-customer-theme='1'] .customer-top-flying-bar {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--customer-border) !important;
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.16) !important;
  backdrop-filter: blur(10px);
}

body.customer-theme-page .card,
body.customer-theme-page .main-container,
body.customer-theme-page .report-item,
body.customer-theme-page .info-card,
body.customer-theme-page .timeline-content,
body.customer-theme-page .comment-form,
body.customer-theme-page .customer-info,
body.customer-theme-page .payment-card,
body.customer-theme-page .result-box,
body.customer-theme .card,
body.customer-theme .main-container,
body.customer-theme .report-item,
body.customer-theme .info-card,
body.customer-theme .timeline-content,
body.customer-theme .comment-form,
body.customer-theme .customer-info,
body.customer-theme .payment-card,
body.customer-theme .result-box,
body[data-customer-theme='1'] .card,
body[data-customer-theme='1'] .main-container,
body[data-customer-theme='1'] .report-item,
body[data-customer-theme='1'] .info-card,
body[data-customer-theme='1'] .timeline-content,
body[data-customer-theme='1'] .comment-form,
body[data-customer-theme='1'] .customer-info {
body[data-customer-theme='1'] .payment-card,
body[data-customer-theme='1'] .result-box {
  background: var(--customer-surface) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 38px rgba(2, 6, 23, 0.16) !important;
}

body.customer-theme-page .card-header,
body.customer-theme-page .header-section,
body.customer-theme-page .register-header,
body.customer-theme-page .otp-header,
body.customer-theme-page .invoice-header,
body.customer-theme .card-header,
body.customer-theme .header-section,
body.customer-theme .register-header,
body.customer-theme .otp-header,
body.customer-theme .invoice-header,
body[data-customer-theme='1'] .card-header,
body[data-customer-theme='1'] .header-section,
body[data-customer-theme='1'] .register-header,
body[data-customer-theme='1'] .otp-header,
body[data-customer-theme='1'] .invoice-header {
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.96) 0%, rgba(14, 116, 144, 0.94) 60%, rgba(12, 74, 110, 0.94) 100%) !important;
  color: #f8fafc !important;
  border: none !important;
}

body.customer-theme-page .header-section h2,
body.customer-theme-page .header-section h4,
body.customer-theme-page .report-title,
body.customer-theme-page .card-title,
body.customer-theme-page h1,
body.customer-theme-page h2,
body.customer-theme-page h3,
body.customer-theme-page h4,
body.customer-theme-page h5,
body.customer-theme .header-section h2,
body.customer-theme .header-section h4,
body.customer-theme .report-title,
body.customer-theme .card-title,
body.customer-theme h1,
body.customer-theme h2,
body.customer-theme h3,
body.customer-theme h4,
body.customer-theme h5,
body[data-customer-theme='1'] .header-section h2,
body[data-customer-theme='1'] .header-section h4,
body[data-customer-theme='1'] .report-title,
body[data-customer-theme='1'] .card-title,
body[data-customer-theme='1'] h1,
body[data-customer-theme='1'] h2,
body[data-customer-theme='1'] h3,
body[data-customer-theme='1'] h4,
body[data-customer-theme='1'] h5 {
  color: var(--customer-text);
}

body.customer-theme-page .header-section h2,
body.customer-theme-page .header-section h4,
body.customer-theme .header-section h2,
body.customer-theme .header-section h4,
body[data-customer-theme='1'] .header-section h2,
body[data-customer-theme='1'] .header-section h4 {
  color: #f8fafc !important;
}

body.customer-theme-page .btn-primary,
body.customer-theme-page .btn-submit,
body.customer-theme-page .btn-verify,
body.customer-theme .btn-primary,
body.customer-theme .btn-submit,
body.customer-theme .btn-verify,
body[data-customer-theme='1'] .btn-primary,
body[data-customer-theme='1'] .btn-submit,
body[data-customer-theme='1'] .btn-verify {
  background: linear-gradient(135deg, var(--customer-primary) 0%, var(--customer-primary-2) 55%, var(--customer-primary-3) 100%) !important;
  border-color: transparent !important;
  color: #f8fafc !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.24);
}

body.customer-theme-page .btn-outline-primary,
body.customer-theme .btn-outline-primary,
body[data-customer-theme='1'] .btn-outline-primary {
  border: 1.5px solid var(--customer-primary) !important;
  color: var(--customer-primary) !important;
  border-radius: 12px !important;
}

body.customer-theme-page .btn-secondary,
body.customer-theme .btn-secondary,
body[data-customer-theme='1'] .btn-secondary,
body.customer-theme-page .btn-back,
body.customer-theme .btn-back,
body[data-customer-theme='1'] .btn-back,
body.customer-theme-page .payment-buttons .btn-outline-secondary,
body.customer-theme .payment-buttons .btn-outline-secondary,
body[data-customer-theme='1'] .payment-buttons .btn-outline-secondary {
  border: 1.5px solid #94a3b8 !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 12px !important;
}

body.customer-theme-page .btn-secondary:hover,
body.customer-theme .btn-secondary:hover,
body[data-customer-theme='1'] .btn-secondary:hover,
body.customer-theme-page .btn-back:hover,
body.customer-theme .btn-back:hover,
body[data-customer-theme='1'] .btn-back:hover,
body.customer-theme-page .payment-buttons .btn-outline-secondary:hover,
body.customer-theme .payment-buttons .btn-outline-secondary:hover,
body[data-customer-theme='1'] .payment-buttons .btn-outline-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

body.customer-theme-page .btn-outline-primary:hover,
body.customer-theme .btn-outline-primary:hover,
body[data-customer-theme='1'] .btn-outline-primary:hover {
  background: var(--customer-primary) !important;
  color: #fff !important;
}

body.customer-theme-page .payment-alert,
body.customer-theme .payment-alert,
body[data-customer-theme='1'] .payment-alert {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.36);
}

body.customer-theme-page .payment-order-id,
body.customer-theme .payment-order-id,
body[data-customer-theme='1'] .payment-order-id,
body.customer-theme-page .payment-contact,
body.customer-theme .payment-contact,
body[data-customer-theme='1'] .payment-contact {
  color: var(--customer-muted) !important;
}

body.customer-theme-page .btn-danger,
body.customer-theme .btn-danger,
body[data-customer-theme='1'] .btn-danger {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  border-color: #dc2626 !important;
}

body.customer-theme-page .form-control,
body.customer-theme-page .form-select,
body.customer-theme .form-control,
body.customer-theme .form-select,
body[data-customer-theme='1'] .form-control,
body[data-customer-theme='1'] .form-select {
  border: 2px solid #dbe3ea !important;
  border-radius: 12px !important;
  box-shadow: none;
}

body.customer-theme-page .form-control:focus,
body.customer-theme-page .form-select:focus,
body.customer-theme .form-control:focus,
body.customer-theme .form-select:focus,
body[data-customer-theme='1'] .form-control:focus,
body[data-customer-theme='1'] .form-select:focus {
  border-color: var(--customer-primary) !important;
  box-shadow: 0 0 0 0.22rem var(--customer-focus) !important;
}

body.customer-theme-page .badge.bg-primary,
body.customer-theme .badge.bg-primary,
body[data-customer-theme='1'] .badge.bg-primary {
  background: #0284c7 !important;
}

body.customer-theme-page .badge.bg-success,
body.customer-theme .badge.bg-success,
body[data-customer-theme='1'] .badge.bg-success {
  background: #0f766e !important;
}

body.customer-theme-page .badge.bg-warning,
body.customer-theme .badge.bg-warning,
body[data-customer-theme='1'] .badge.bg-warning {
  background: #f59e0b !important;
  color: #111827 !important;
}

body.customer-theme-page .badge.bg-danger,
body.customer-theme .badge.bg-danger,
body[data-customer-theme='1'] .badge.bg-danger {
  background: #dc2626 !important;
}

body.customer-theme-page .text-muted,
body.customer-theme .text-muted,
body[data-customer-theme='1'] .text-muted {
  color: var(--customer-muted) !important;
}

body.customer-theme-page .table,
body.customer-theme .table,
body[data-customer-theme='1'] .table {
  color: var(--customer-text);
}

body.customer-theme-page .table thead th,
body.customer-theme .table thead th,
body[data-customer-theme='1'] .table thead th {
  background: rgba(15, 118, 110, 0.08);
  border-color: #d7e3ea;
}

body.customer-theme-page .table tbody tr:hover,
body.customer-theme .table tbody tr:hover,
body[data-customer-theme='1'] .table tbody tr:hover {
  background: rgba(14, 165, 233, 0.08);
}

body.customer-theme-page #customer-bottom-nav,
body.customer-theme #customer-bottom-nav,
body[data-customer-theme='1'] #customer-bottom-nav {
  border-top: 1px solid var(--customer-border);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

body.customer-theme-page #customer-bottom-nav .nav-item,
body.customer-theme #customer-bottom-nav .nav-item,
body[data-customer-theme='1'] #customer-bottom-nav .nav-item {
  color: #64748b;
}

body.customer-theme-page #customer-bottom-nav .nav-item.active,
body.customer-theme #customer-bottom-nav .nav-item.active,
body[data-customer-theme='1'] #customer-bottom-nav .nav-item.active {
  color: var(--customer-primary);
}

body.customer-theme-page .customer-top-flying-name,
body.customer-theme .customer-top-flying-name,
body[data-customer-theme='1'] .customer-top-flying-name {
  color: var(--customer-primary) !important;
}

@media (max-width: 768px) {
  body.customer-theme-page .main-container,
  body.customer-theme .main-container,
  body[data-customer-theme='1'] .main-container {
    margin: 1rem auto;
    border-radius: 16px !important;
  }
}