/* ========== Variables ========== */
:root{
  --bg-start:#0f172a;      /* deep navy */
  --bg-end:#1e293b;        /* slate */
  --card-bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --primary:#2563eb;       /* blue */
  --primary-hover:#1d4ed8;
  --success:#16a34a;
  --danger:#ef4444;
  --ring:rgba(37,99,235,.35);
  --shadow-xs:0 1px 2px rgba(16,24,40,.08);
  --shadow-lg:0 10px 25px rgba(2,6,23,.15);
  --radius:14px;
}

/* ========== Page Background ========== */
.auth-bg{
  min-height:100vh;
  background:
    radial-gradient(1000px 700px at -10% -20%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(900px 600px at 110% 120%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(140deg, var(--bg-start), var(--bg-end));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ========== Card ========== */
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(2,6,23,.06);
}

.auth-title{
  color:var(--text);
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}

.auth-subtitle{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:1.25rem;
}

/* ========== Alerts (professional) ========== */
.alert{
  border:none;
  border-left:4px solid transparent;
  box-shadow:var(--shadow-xs);
  border-radius:12px;
  padding:.85rem .9rem;
  font-size:.95rem;
}
.alert-danger{ border-left-color:var(--danger); }
.alert-success{ border-left-color:var(--success); }

/* ========== Inputs with Icons ========== */
.input-group-text{
  background:#f8fafc;
  border-color:#e5e7eb;
  color:#475569;
}
.form-control{
  border-color:#e5e7eb;
  padding:.72rem .9rem;
  font-size:.96rem;
  border-radius:10px;
}
.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
.input-group .form-control{
  border-left:0;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.input-group .input-group-text{
  border-right:0;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}

/* Labels & links */
.form-label{ font-weight:600; color:#111827; }
.link-accent{ color:var(--primary); text-decoration:none; }
.link-accent:hover{ color:var(--primary-hover); text-decoration:underline; }
.link-muted{ color:var(--muted); text-decoration:none; }
.link-muted:hover{ color:#475569; text-decoration:underline; }

/* ========== Buttons ========== */
.btn{
  border-radius:12px !important;
  padding:.8rem 1rem;
  font-weight:600;
  letter-spacing:.2px;
  transition:transform .04s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active{ transform:translateY(1px); }

/* Primary */
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 6px 14px rgba(37,99,235,.24);
}
.btn-primary:hover{
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  box-shadow:0 8px 18px rgba(29,78,216,.28);
}
.btn-primary:focus{
  box-shadow:0 0 0 4px var(--ring);
}

/* Success (Pay button) */
.btn-success{
  background:var(--success);
  border-color:var(--success);
  box-shadow:0 6px 14px rgba(22,163,74,.20);
}
.btn-success:hover{
  filter:brightness(.96);
}

/* Outline Google */
.btn-outline-danger{
  border-width:2px;
  font-weight:700;
}

/* Login-specific spacing */
.btn-login{ margin-top:.25rem; }
.btn-pay{ margin-top:.25rem; }

/* ========== Minor UI ========== */
.small{ font-size:.875rem; }
.text-muted{ color:var(--muted) !important; }
.input-error{ border-color:var(--danger) !important; }

/* Divider (if you add a custom one) */
.or-divider{
  position:relative;
  text-align:center;
  color:#94a3b8;
  font-weight:600;
  font-size:.85rem;
}
.or-divider::before,
.or-divider::after{
  content:"";
  position:absolute;
  top:50%;
  width:42%;
  height:1px;
  background:#e5e7eb;
}
.or-divider::before{ left:0; }
.or-divider::after{ right:0; }

/* ========== Checkboxes ========== */
.form-check-input{
  border-color:#cbd5e1;
  width:1.05rem; height:1.05rem;
}
.form-check-input:checked{
  background-color:var(--primary);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring);
}

/* ========== Responsive Tweaks ========== */
@media (max-width:480px){
  .auth-card{ padding:22px; border-radius:12px; }
  .auth-title{ font-size:1.4rem; }
  .btn{ padding:.78rem .9rem; }
}

/* ========== Optional: subtle hover for inputs ========== */
.form-control:hover{
  border-color:#d1d5db;
}

/* ========== Optional: close button color in alerts ========== */
.btn-close{
  filter: invert(40%);
}


/* Style the Google Sign-In wrapper */
.google-signin-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* Resize and center the button itself */
.g_id_signin {
  transform: scale(1.2);
  transform-origin: center;
}


#google-login-message {
  font-size: 0.95rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  font-weight: 500;
}

.g_id_signin {
  transform: scale(1.12);
  transform-origin: center;
  margin-bottom: 14px;
}