:root{
--bg:#f5f7fb;
--card:#ffffff;
--accent:#2b6cb0;
--muted:#6b7280;
--color-primary: #6c63ff;
--color-success: #00bf8e;
--color-warning: #f7c94b;
--color-danger: #f75842;
--color-white: #fff;
--red:#d62828;
--bg:#f5f5f5;
--muted:#666;
--color-light: rgba(255, 255, 255, 0.7);
--color-danger-varlent: rgba(247, 88, 66, 0.4);
--color-bg: #1f2641;
--color-black: #000;
--color-bg1: #2e3267;
--color-bg2: #424890;
--radius:12px;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background:linear-gradient(180deg,var(--color-bg2) 0%,var(--bg) 100%);
color:#0f172a;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.container{
max-width:920px;
margin:36px auto;
padding:24px;
}
.hero{
text-align:center;
margin-bottom:20px;
}
.hero h1{margin:0;font-size:28px}
.hero p{margin:8px 0 0;color:var(--color-black)}
.donation-card{
background:var(--card);
border-radius:var(--radius);
padding:20px;
box-shadow: 0 6px 22px rgba(16,24,40,0.06);
}
.frequency-section label {
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.frequency-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.freq {
padding: 10px 14px;
background: #f1f5f9;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
.freq.active {
background: var(--accent);
color: #fff;
}
.amount-presets label, .custom-amount label {display:block;font-weight:600;margin-bottom:8px}
.preset-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.preset{
background:#f1f5f9;
border:1px solid transparent;
padding:10px 14px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}
.preset.active{background:var(--accent);color:#fff}
.custom-amount input{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #e6edf3;
margin-bottom:14px;
}
.donor-details label{display:block;margin-top:8px;font-weight:600}
.donor-details input{
width:100%;
padding:10px 12px;
margin-top:6px;
border-radius:8px;
border:1px solid #e6edf3;
}
.actions{margin-top:16px;text-align:right}
.primary{
background:var(--accent);
color:#fff;
border:none;
padding:10px 18px;
border-radius:10px;
font-weight:700;
cursor:pointer;
}
.primary:disabled{opacity:0.6;cursor:not-allowed}
.status{margin-top:12px;color:var(--muted)}
@media (max-width:600px){
.preset-buttons{justify-content:space-between}
.actions{text-align:center}
}
.hero a.primary{
display: inline-block;
margin-top: 1.5rem;
text-decoration: none;
}
/* Back Home Button */
.back-home-btn{
display: inline-block;
margin-bottom: 1.5rem;
color: var(--color-light);
font-weight: 600;
text-decoration: none;
}
.back-home-btn:hover{
text-decoration: underline;
}
/* Mobile menu fix */
@media (max-width: 991px){
  .navbar-collapse{background:#5f61ff;}
  .navbar-nav{padding:10px 0;}
  .navbar-nav .nav-link{color:#fff!important;padding:14px 20px;}
  .navbar-toggler{border:0;}
}