:root 
{ 
    color-scheme: dark; 
}

body
{
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0; padding: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: #050509; color: #f5f5f5;
}

.box
{
    max-width: 520px; padding: 2rem 2.5rem;
    background: radial-gradient(circle at top left, #222 0, #111 60%, #050509 100%);
    border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.75);
    text-align: center;
}

.payment-container
{
    margin-top: 20px;
    border-top: 1px solid #333;
    padding-top: 20px; 
}

.error-msg
{ 
    color: #ff6b6b; 
    font-size: 0.85rem; 
    display: none; 
    margin: 10px 0; 
}

input[type="text"], select 
{ 
      padding: 8px; 
      border-radius: 6px; 
      border: 1px solid #444; 
      background: #222; 
      color: white; 
}

.input-group
{
  display: flex;
  gap: 10px;
}

#amount-input
{
  flex: 2;
}

#currency
{
  flex: 1;
}

#github-section 
{
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px; 
    margin: 15px 0;
    display: none;
}

button 
{ 
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

button#stripe-checkout
{
    background: #043080;
    color: white;
    width: 100%;
}

button#stripe-checkout:disabled
{ 
    opacity: 0.5;
    cursor: not-allowed;
}

.fade-in 
{
    opacity: 0;
    animation: fade_in_up 0.6s ease-out forwards;
}

.fade-out
{
    animation: fade_out_down 0.4s ease-in forwards;
    pointer-events: none;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.slide-in
{
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    background: #1c2128;
    padding: 15px;
    border-radius: 12px;
    margin: 15px 0;
    border: 1px solid #30363d;
    animation: slide_down 0.4s ease-out;
}

.loading
{
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.loading::after
{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}