@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Design tokens */
:root{
  --surface: #ffffff;
  --surface-2: #f8fafc; /* slate-50 */
  --text: #0f172a;      /* slate-900 */
  --muted: #64748b;     /* slate-500 */
  --ring: #6366f1;      /* indigo-500 */
  --border: #e5e7eb;    /* gray-200 */
  --radius: 14px;
}

/* Subtle gradient app background */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(800px 400px at 90% 0%, rgba(14,165,233,.06), transparent 55%),
    var(--surface-2);
  color: var(--text);
}

/* Modern header “frosted” feel */
header{
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(226,232,240,.7);
}

/* Card elevation + rounded */
.card-shadow{
  background: var(--surface);
  border: 1px solid rgba(226,232,240,.7);
  border-radius: var(--radius);
  box-shadow:
    0 12px 24px -8px rgba(2,6,23,.10),
    0 6px 14px -6px rgba(2,6,23,.08);
}

/* Badges: cleaner pills with soft border */
.badge{
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: saturate(120%) blur(2px);
}
.badge-green{ background:#ecfdf5; color:#065f46; border-color: rgba(5,150,105,.18);}
.badge-amber{ background:#fff7ed; color:#92400e; border-color: rgba(234,88,12,.18);}
.badge-slate{ background:#f1f5f9; color:#0f172a; border-color: rgba(15,23,42,.12);}

/* Numeric alignment */
.mono{ font-variant-numeric: tabular-nums; }

/* Inputs: softer, with ring focus + subtle inner shadow */
.sr-input{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.sr-input:hover{ border-color: #d1d5db; }
.sr-input:focus{
  outline: none;
  border-color: var(--ring);
  box-shadow:
    0 0 0 4px rgba(99,102,241,.15),
    inset 0 1px 0 rgba(2,6,23,.04);
}
.sr-input:active{ transform: translateY(0px); }

/* Stripe Payment Element container */
#payment-element{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.04);
  transition: box-shadow .15s ease, border-color .15s ease;
}
#payment-element:focus-within{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12), inset 0 1px 0 rgba(2,6,23,.04);
}

/* Primary button micro-interactions (uses existing #pay-btn) */
#pay-btn{
  border-radius: 12px;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:
    0 8px 20px -8px rgba(79,70,229,.45),
    0 2px 6px -2px rgba(79,70,229,.30);
}
#pay-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px -10px rgba(79,70,229,.50),
    0 6px 10px -4px rgba(79,70,229,.28);
}
#pay-btn:active{
  transform: translateY(0px);
  box-shadow:
    0 8px 18px -10px rgba(79,70,229,.46),
    0 2px 6px -3px rgba(79,70,229,.26);
}
#pay-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(99,102,241,.25),
    0 8px 20px -8px rgba(79,70,229,.45);
}

/* Alert box polish */
#pay-alert{
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: linear-gradient(0deg, #fff1f2, #fff1f2) padding-box,
              linear-gradient(90deg, #fecaca, #fca5a5) border-box;
}

/* Hide Stripe’s internal button (unchanged behavior) */
.SubmitButton, .p-SubmitButton, button[type="submit"].SubmitButton{ display: none !important; }

/* Motion-safe settings */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --surface:#0b1220;
    --surface-2:#0a0f1a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
    --ring:#818cf8;
  }
  body{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(129,140,248,.10), transparent 60%),
      radial-gradient(800px 400px at 90% 0%, rgba(56,189,248,.08), transparent 55%),
      var(--surface-2);
    color: var(--text);
  }
  header{ background: rgba(11,18,32,.6); border-color: rgba(148,163,184,.12); }
  .card-shadow{
    border-color: rgba(148,163,184,.12);
    box-shadow:
      0 12px 24px -8px rgba(2,6,23,.6),
      0 6px 14px -6px rgba(2,6,23,.5);
  }
  .sr-input, #payment-element{ background:#0f172a; border-color:#1f2937; color: var(--text); }
  .badge-slate{ background:#0f172a; color:#e5e7eb; border-color: rgba(148,163,184,.18); }
  #pay-alert{
    border-color:#7f1d1d;
    background: linear-gradient(0deg, #1f0a0a, #1f0a0a) padding-box,
                linear-gradient(90deg, #7f1d1d, #b91c1c) border-box;
  }
}