/* Modern Theme - Inspired by Uiverse.io Templates */

:root {
  /* Color Palette */
  --white: hsl(0, 0%, 100%);
  --black: hsl(240, 15%, 9%);
  --dark-bg: hsl(240, 15%, 9%);
  --paragraph: hsl(0, 0%, 83%);
  --line: hsl(240, 9%, 17%);
  
  /* Primary Colors - Cyan/Teal */
  --primary: hsl(189, 92%, 58%);
  --primary-dark: hsl(189, 99%, 26%);
  --primary-light: hsl(189, 100%, 50%);
  
  /* Purple Accent */
  --purple: #a370f0;
  --purple-dark: #7b52b9;
  --purple-darker: rgb(122, 48, 143);
  --purple-light: rgb(199, 95, 228);
  
  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  
  /* Backgrounds */
  --card-bg: hsla(240, 15%, 9%, 1);
  --input-bg: #212121;
  --glass-bg: rgba(255, 255, 255, 0.1);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px 0 var(--primary);
  --shadow-glow-purple: 0 0 20px 0 var(--purple-light);
  
  /* Neomorphism Shadows */
  --neo-shadow-out: 6px 6px 10px rgba(0,0,0,1), 1px 1px 10px rgba(255, 255, 255, 0.6);
  --neo-shadow-in: inset 2px 2px 10px rgba(0,0,0,1), inset -1px -1px 5px rgba(255, 255, 255, 0.6);
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: 0.3s cubic-bezier(1, 0, 0, 1);
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--dark-bg);
  background-image: 
    radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
  color: var(--white);
  min-height: 100vh;
}

/* Modern Card Styles */
.modern-card {
  position: relative;
  background-color: var(--card-bg);
  background-image: radial-gradient(
      at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  transition: var(--transition-base);
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

/* Animated Border */
.modern-card-border {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );
  border-radius: var(--radius-lg);
}

.modern-card-border::before {
  content: "";
  pointer-events: none;
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(189, 100%, 50%) 40%,
    hsl(189, 100%, 50%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );
  animation: rotate-border 8s linear infinite;
}

@keyframes rotate-border {
  to {
    transform: rotate(360deg);
  }
}

/* Modern Buttons */
.modern-btn {
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  background: var(--purple);
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: none;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: inset 0 0 1.6em -0.6em var(--purple-dark);
  overflow: hidden;
  position: relative;
  transition: var(--transition-base);
}

.modern-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-purple);
}

.modern-btn:active {
  transform: scale(0.95);
}

.modern-btn-primary {
  background-image: linear-gradient(
    0deg,
    hsl(189, 92%, 58%),
    hsl(189, 99%, 26%) 100%
  );
  box-shadow: inset 0 -2px 25px -4px var(--white);
}

.modern-btn-primary:hover {
  box-shadow: var(--shadow-glow);
}

/* Modern Inputs */
.modern-input {
  width: 100%;
  min-height: 45px;
  color: var(--white);
  outline: none;
  transition: var(--transition-base);
  padding: 0.75rem 1rem;
  background-color: var(--input-bg);
  border-radius: var(--radius-md);
  border: 2px solid var(--input-bg);
  box-shadow: var(--neo-shadow-out);
  font-size: 1rem;
}

.modern-input::placeholder {
  color: #999;
}

.modern-input:focus {
  transform: scale(1.02);
  box-shadow: var(--neo-shadow-out), var(--neo-shadow-in);
  border-color: var(--primary);
}

/* Glass Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Purple Card (for pricing/payment methods) */
.purple-card {
  overflow: hidden;
  position: relative;
  background-color: var(--purple-darker);
  background-image: radial-gradient(
      circle at 0% 0%,
      rgb(37, 7, 44) 15%,
      rgba(0, 0, 0, 0) 75%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgb(25, 2, 31, 0.9) 15%,
      rgba(0, 0, 0, 0) 150%
    ),
    linear-gradient(
      135deg,
      rgba(24, 8, 28, 0) 0%,
      rgb(122, 48, 143) 50%,
      rgba(24, 8, 28, 0) 100%
    );
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: var(--transition-base);
}

.purple-card::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background-color: var(--purple-darker);
  background-image: linear-gradient(
    0deg,
    rgba(118, 42, 180, 1) 0%,
    rgb(199, 95, 228) 75%
  );
  border-radius: var(--radius-full);
  box-shadow: 0 1px 5px 3px var(--purple-light), 0 0 30px 5px var(--purple-light);
}

.purple-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-purple);
}

/* Badges */
.modern-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--white);
}

.modern-badge-success {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.modern-badge-warning {
  background: var(--warning);
  box-shadow: 0 0 10px var(--warning);
}

.modern-badge-danger {
  background: var(--danger);
  box-shadow: 0 0 10px var(--danger);
}

.modern-badge-info {
  background: var(--info);
  box-shadow: 0 0 10px var(--info);
}

/* Loader */
.modern-loader {
  position: relative;
  font-size: 16px;
  width: 5.5em;
  height: 5.5em;
  margin: 2rem auto;
}

.modern-loader:before {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%) rotate(45deg);
  height: 100%;
  width: 4px;
  background: var(--white);
  left: 50%;
  top: 50%;
}

.modern-loader:after {
  content: '';
  position: absolute;
  left: 0.2em;
  bottom: 0.18em;
  width: 1em;
  height: 1em;
  background-color: var(--primary);
  border-radius: 15%;
  animation: rolling-rock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
}

@keyframes rolling-rock {
  0% { transform: translate(0, -1em) rotate(-45deg) }
  5% { transform: translate(0, -1em) rotate(-50deg) }
  20% { transform: translate(1em, -2em) rotate(47deg) }
  25% { transform: translate(1em, -2em) rotate(45deg) }
  30% { transform: translate(1em, -2em) rotate(40deg) }
  45% { transform: translate(2em, -3em) rotate(137deg) }
  50% { transform: translate(2em, -3em) rotate(135deg) }
  55% { transform: translate(2em, -3em) rotate(130deg) }
  70% { transform: translate(3em, -4em) rotate(217deg) }
  75% { transform: translate(3em, -4em) rotate(220deg) }
  100% { transform: translate(0, -1em) rotate(-225deg) }
}

/* Modern Tables */
.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
  color: var(--white);
}

.modern-table thead {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.modern-table thead th {
  color: var(--primary) !important;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  background: transparent !important;
  border: none !important;
}

.modern-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition-base);
  background: transparent !important;
}

.modern-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.modern-table tbody td {
  padding: 1rem;
  color: var(--white) !important;
  background: transparent !important;
  border: none !important;
}

.modern-table tbody td.text-muted,
.modern-table tbody td small {
  color: var(--paragraph) !important;
}

.modern-table tbody td code {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

.modern-table tbody td strong {
  color: var(--white);
  font-weight: 600;
}

/* Utility Classes */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-text {
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
}