@import "tailwindcss";
@import "./main.css";

@custom-variant dark (&: where(.dark, .dark *));

:root {
  --bg: #fafbfc;
  --panel: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --border: #e2e8f0;
  --glass: rgba(255, 255, 255, 0.8);
}

.dark {
  --bg: #0c0d11;
  --panel: #13151c;
  --muted: #94a3b8;
  --text: #f1f5f9;
  --border: #1e293b;
  --glass: rgba(19, 21, 28, 0.8);
}
@theme {
  --color-bg: var(--bg);
  --color-panel: var(--panel);
  --color-muted: var(--muted);
  --color-text: var(--text);
  --color-border: var(--border);
  --color-glass: var(--glass);
  --primary: #6366f1;
  --color-accent: #00c850;
  --color-orange: #f59e0b;
  --color-danger: #ef4444;
  --color-pink: #ec4899;
  --color-success: #10b981;
  --color-emerald-soft: #10b98119;
  --color-brown-soft: #6366f119;

  /* breakpoint definitions */
  --breakpoint-xs: 400px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 1800px;
}

* {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}
.gradient-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, var(--color-pink) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

.gradient-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.gradient-pink-yellow {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.gradient-pink {
  background: linear-gradient(90deg, #ec4899, var(--color-pink));
}

.gradient-yellow {
  background: linear-gradient(135deg, #ffd89b 0%, #f59e0b 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-dark {
  background: linear-gradient(135deg, #2b2d42 0%, #14213d 100%);
}

.text-gradient {
  background: linear-gradient(135deg, #6366f1, #8b5cf6 50%, darkorange 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}
.badge-info {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: white;
}

.badge-gold {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
}
.badge-warning {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
}

.badge-diamond {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.badge-platinum {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #1f2937;
}

.gold {
  background: linear-gradient(135deg, #ffd89b 0%, #f59e0b 100%);
}

.silver {
  background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
}

.bronze {
  background: linear-gradient(135deg, #fde68a 0%, #d97706 100%);
}

.green {
  background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
}

h3 {
  @apply text-sm md:text-lg font-bold text-text;
}
h5 {
  @apply font-semibold text-xs sm:text-sm text-text;
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
}

@media (max-width: 1200px) {
  .bottom-nav {
    display: none;
  }
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  padding: clamp(10px, 2vw, 14px) clamp(12px, 3vw, 16px);
  border-radius: clamp(12px, 2vw, 16px);
  color: var(--muted);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 16px);
}

.nav-item::before {
  content: "";
  position: absolute;
  left: -clamp(2px, 0.5vw, 4px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2px, 0.5vw, 4px);
  height: 0;
  background: linear-gradient(180deg, #6366f1, var(--color-pink));
  border-radius: 0 clamp(2px, 0.5vw, 4px) clamp(2px, 0.5vw, 4px) 0;
  transition: height 0.3s ease;
}

.nav-item:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
  color: var(--text);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(236, 72, 153, 0.1));
  color: #6366f1;
  font-weight: 600;
}

.btn-primary {
  @apply text-white font-semibold cursor-pointer relative overflow-hidden border-none transition-all duration-300 bg-[linear-gradient(135deg,var(--primary),#8b5cf6)] px-3 py-1.5 text-[0.675rem] rounded-xl sm:px-6 sm:py-3 sm:text-[0.95rem] sm:rounded-xl lg:px-7 lg:py-3 lg:text-base lg:rounded-2xl hover:-translate-y-0.5;
}
.btn-primary::before {
  @apply absolute inset-0 opacity-0 transition-opacity duration-300;
  background: linear-gradient(135deg, #8b5cf6, var(--color-pink));
}
.btn-primary:hover::before {
  @apply opacity-100;
}
.btn-primary span {
  @apply relative z-1;
}
.btn-secondary {
  @apply cursor-pointer font-semibold transition-transform duration-300 bg-panel border-2 border-border text-text px-5 py-2.5 text-[0.675rem] rounded-xl sm:px-6 sm:py-3 sm:text-[0.95rem] sm:rounded-xl lg:px-7 lg:py-3.5 lg:text-base lg:rounded-2xl hover:-translate-y-0.5 hover:border-[var(--primary)] hover:bg-[rgba(99,102,241,0.05)];
}
.tab-nav {
  @apply flex flex-wrap gap-2 p-1.5 bg-[rgba(99,102,241,0.05)] border border-border rounded-2xl md:gap-1.5 md:p-[5px] md:rounded-xl sm:gap-1 sm:p-1 sm:rounded-lg;
}

.tab-btn {
  @apply flex-1 font-semibold text-muted  bg-transparent border-none cursor-pointer transition-shadow duration-300 ease-in-out whitespace-nowrap px-2 py-3 rounded-lg text-xs md:px-2.5 md:py-4 md:rounded-xl md:text-sm  lg:px-3 lg:py-4 lg:text-sm  hover:text-text hover:bg-[rgba(99,102,241,0.1)];
}

.tab-btn.active {
  @apply text-white bg-[linear-gradient(135deg,#6366f1,#8b5cf6)] shadow-[0_4px_12px_rgba(99,102,241,0.3)];
}

.badge-modern {
  @apply rounded-2xl font-bold text-[8px] uppercase inline-flex items-center px-2 py-1 md:text-xs md:px-2.5 md:py-2 md:gap-2 lg:text-sm lg:px-3.5 lg:py-1.5 lg:gap-1.5;
}
@keyframes pulse-slow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.progress-bar {
  @apply h-2.5 bg-[rgba(99,102,241,0.1)] rounded-full overflow-hidden relative;
}
.progress-fill {
  @apply h-full rounded-full relative overflow-hidden transition-[width] duration-1000 ease-in;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
}

.progress-fill::after {
  content: "";
  @apply absolute top-0 -left-full w-full h-full;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.progress-dot {
  @apply w-8 h-1.5 rounded-[10px] bg-[rgba(255,255,255,0.3)] transition-all duration-300 ease-in;
}

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

.badge-icon {
  @apply w-16 h-16 rounded-xl flex items-center justify-center text-2xl mx-auto mb-2 relative cursor-pointer transition-transform duration-300 ease-in-out hover:-translate-y-2 hover:scale-[1.05];
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.goal-item {
  @apply flex items-center gap-4 p-5 bg-panel border border-border rounded-2xl mb-3 transition-transform duration-300 ease-in-out hover:border-[var(--primary)] hover:bg-[linear-gradient(135deg,rgba(99,102,241,0.03),rgba(236,72,153,0.02))] hover:translate-x-1;
}

.goal-icon {
  @apply w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-xl md:text-2xl lg:text-3xl rounded-xl flex items-center justify-center shrink-0;
}

.search-input {
  @apply w-full border border-border bg-(--panel) text-text transition-all duration-300 ease-in-out;
  padding: clamp(12px, 2.5vw, 14px) clamp(12px, 3vw, 16px) clamp(12px, 2.5vw, 14px) clamp(20px, 6vw, 34px);
  border-radius: clamp(12px, 3vw, 16px);
  font-size: clamp(12px, 1.5vw, 14px);
}

.search-input:focus {
  @apply outline-none border-[var(--primary)] bg-[rgba(99,102,241,0.03)] shadow-[0_0_0_4px_rgba(99,102,241,0.1)];
}

.search-input::placeholder {
  @apply text-muted;
}

.live-dot {
  @apply w-2 h-2 rounded-full relative bg-success;
}

.live-dot::after {
  content: "";
  @apply absolute rounded-full border-2 border-success;
  inset: -4px;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.bottom-nav {
  @apply flex fixed bottom-0 left-0 right-0 bg-(--panel) border-t border-border z-50;
  padding: 8px 0 env(safe-area-inset-bottom);
  backdrop-filter: blur(20px);
}
.bottom-nav-item.active {
  @apply text-[var(--primary)];
}

.modal {
  @apply fixed inset-0  bg-[rgba(0,0,0,0.7)] flex justify-center items-center w-full h-full backdrop-blur-sm z-200 opacity-0 pointer-events-none transition-opacity duration-300 ease-in p-5;
}
.modal-content {
  @apply bg-(--panel) border border-border rounded-xl max-w-[500px] p-4 md:p-6 md:rounded-3xl lg:w-full max-h-[90vh] overflow-y-auto  transform transition-transform duration-300 ease-in flex flex-col mx-auto w-full;
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal.open .modal-content {
  transform: scale(1);
}

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(400px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 250;
  max-width: 400px;
}

.toast.show {
  transform: translateX(0);
}

.toast.success {
  border-left: 4px solid #10b981;
}
.toast.error {
  border-left: 4px solid #ef4444;
}
.toast.info {
  border-left: 4px solid #3b82f6;
}
.toast.warning {
  border-left: 4px solid #f59e0b;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.chart-container {
  position: relative;
  height: 300px;
}

.slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card {
  @apply p-[clamp(12px,3vw,1.5rem)] rounded-[clamp(12px,3vw,20px)] border border-border bg-(--panel) transition-shadow duration-300 ease-in-out relative hover:shadow-[0_8px_24px_rgba(99,102,241,0.15)];
}

.stat-card-sm {
  padding: clamp(8px, 2vw, 16px);
  border-radius: clamp(8px, 2vw, 16px);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
  border: clamp(1px, 0.2vw, 1px) solid var(--border);
  text-align: center;
}

.stat-card.warning {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(239, 68, 68, 0.03));
}

.stat-card::after {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::after {
  opacity: 1;
}

.card-elevated {
  @apply transition-transform duration-[0.4s] ease-in-out bg-panel border border-border relative overflow-hidden  rounded-xl p-3 md:rounded-[20px] md:p-5 lg:rounded-3xl lg:p-6 hover:-translate-y-0.5;
}
.card-elevated::before {
  @apply absolute inset-0 rounded-3xl;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
}

.card-elevated:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.transaction-row {
  @apply flex items-center border border-border mb-2 transition-transform duration-300 ease-in bg-panel px-3.5 py-3 rounded-xl md:px-4 md:py-3.5 md:rounded-2xl lg:px-5 lg:py-4 hover:border-[var(--primary)] hover:bg-[rgba(99,102,241,0.02)] hover:text-text hover:translate-y-0.5;
}

/* Transaction */

.transaction-row:hover {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(236, 72, 153, 0.02));
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.filter-btn {
  @apply flex items-center justify-center font-semibold text-muted bg-(--panel) border border-border cursor-pointer transition-transform duration-300 ease-in text-nowrap gap-1 px-3 py-1.5 md:gap-3 md:px-5 md:py-2.5 text-xs rounded-xl hover:border-[var(--primary)] hover:text-text hover:translate-y-0.5;
}

.filter-btn.active {
  @apply text-white bg-[linear-gradient(135deg,var(--primary),#8b5cf6)] border-[var(--primary)];
}

.animationTwo {
  animation: fadeDown2 0.5s linear;
}
.animationOne {
  animation: fadeDown 0.5s linear;
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown2 {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* sidebar */
.sidebar-open {
  visibility: visible;
  opacity: 1;
  left: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   MODAL HEADER
=========================== */
.modal-header {
  @apply pb-3  md:pb-4  lg:pb-6 border-b border-border flex justify-between items-center sticky top-0 z-10;
}

/* ===========================
   MODAL BODY
=========================== */
.modal-body {
  @apply pt-2 px-2 py-4 md:pt-2.5  lg:pt-3  overflow-y-auto;
}

/* ===========================
   MODAL FOOTER
=========================== */
.modal-footer {
  @apply pb-4 mt-4  md:pb-6  lg:pb-8 border-border flex gap-4;
}

/* ===========================
   CLOSE BUTTON
=========================== */
.close-modal {
  @apply w-8 h-8 md:w-9 md:h-9 lg:w-10 lg:h-10 rounded-lg md:rounded-[10px] lg:rounded-xl bg-bg border-none text-muted cursor-pointer transition-all duration-300 ease-in flex items-center justify-center hover:bg-border hover:text-text;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  @apply text-xs mb-2.5 block md:text-sm font-semibold text-text md:mb-3;
}

.form-input,
.form-select {
  @apply w-full p-2.5 md:p-3.5 lg:p-4 rounded-xl text-xs md:text-sm md:rounded-[14px] lg:rounded-2xl bg-panel border border-border text-text lg:text-base font-semibold  outline-none;
}

.form-input:focus,
.form-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input::placeholder {
  color: var(--muted);
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.step-indicator {
  @apply flex items-center justify-between mb-8 relative;
}

.step-indicator::before {
  @apply content-[""] absolute top-5 left-5 right-5 h-2 bg-border z-0;
}

.step-indicator-progress {
  @apply absolute top-5 left-5 h-2 z-1 transition-colors ease-in-out;
  background: linear-gradient(135deg, #10b981, #059669);
}

.step {
  @apply relative z-2 flex flex-col items-center gap-2;
}

.step-circle {
  @apply w-10 h-10 rounded-[50%] bg-bg border-2 border-border flex items-center justify-center font-bold text-muted transition-all duration-300 ease-in;
}

.step.active .step-circle {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.step.completed .step-circle {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  color: white;
}

.step-label {
  @apply text-xs font-semibold text-muted whitespace-nowrap;
}

.step.active .step-label {
  @apply text-xs font-semibold text-text whitespace-nowrap;
}

.step.completed .step-label {
  color: #10b981;
}

.step-content {
  display: none;
  animation: fadeInStep 0.4s ease;
}

.step-content.active {
  display: block;
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.otp-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}

@media (max-width: 480px) {
  .otp-inputs {
    gap: 8px;
  }
}
.otp-input {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  transition: all 0.3s ease;
  outline: none;
}

.otp-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.recipient-card {
  padding: 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.recipient-card:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}

.recipient-card.selected {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.user-avatar {
  width: clamp(32px, 6vw, 48px);
  height: clamp(32px, 6vw, 48px);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

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

.user-avatar.default {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: clamp(12px, 2vw, 18px);
}

.summary-card {
  background: var(--bg);
  border-radius: clamp(16px, 4vw, 20px);
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: clamp(16px, 3vw, 24px);
}

.summary-row {
  @apply flex justify-between items-center border-b border-border;
  padding: clamp(8px, 2vw, 12px) 0;
}

.summary-row:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 18px);
  padding-top: clamp(12px, 2vw, 16px);
}

.qr-code {
  width: clamp(150px, 40vw, 200px);
  height: clamp(150px, 40vw, 200px);
  background: white;
  border-radius: clamp(12px, 3vw, 16px);
  margin: clamp(16px, 3vw, 24px) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: clamp(4px, 1.5vw, 8px) solid var(--bg);
}

.success-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet */
@media (max-width: 768px) {
  .success-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .success-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bill-item {
  padding: 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Tablet */
@media (max-width: 768px) {
  .bill-item {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 10px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .bill-item {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
  }
}

.online-indicator {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.bill-item:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}

.bill-item.selected {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.bill-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center text-white;
}

.info-box {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.info-box svg {
  flex-shrink: 0;
  color: #6366f1;
}

@media (max-width: 640px) {
  .modal-content {
    max-width: 100%;
  }

  .otp-input {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  @media (max-width: 480px) {
    .otp-input {
      width: 30px;
      height: 30px;
    }
  }

  .step-label {
    font-size: 10px;
  }

  .step-circle {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* deposit  */
.overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200;
}

/* Drawer Styles */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.deposit-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.deposit-drawer.show {
  transform: translateX(0);
}

.quick-amount {
  @apply px-4 py-3 rounded-xl border-2 border-border bg-panel text-text font-semibold cursor-pointer transition-all duration-300;
}

.quick-amount:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}

.quick-amount.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
  color: #6366f1;
}

.payment-method {
  @apply p-4 rounded-2xl border-2 border-border bg-panel flex items-center gap-4 cursor-pointer transition-all duration-300 ease-in;
}

.payment-method:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

.payment-method.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
}
.item.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
}

.input-field {
  width: 100%;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2vw, 16px);
  border-radius: clamp(8px, 2vw, 12px);
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  transition: all 0.3s ease;
}

.input-field:focus {
  outline: none;
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Light mode - show moon icon (click to go dark) */
html #theme-toggle .sun {
  display: none;
}
html #theme-toggle .moon {
  display: block;
}

/* Dark mode - show sun icon (click to go light) */
html.dark #theme-toggle .moon {
  display: none;
}
html.dark #theme-toggle .sun {
  display: block;
}

.custom-date::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.popular-offers .text-sm{
    text-align:right!important;
    flex:auto!important;
}

.popular-offers .text-accent{
    color:darkorange!important;
    font-size:large!important;
}
.popular-offers .text-primary{
    color:darkorange!important;
    font-size:large!important;
}

.h-10{
    font-size:3rem!important;
}

.bg-accent{
    background-color: #4fc1b8!important;
}