:root{
  --pupa-navy:#03162f;
  --pupa-navy2:#052d61;
  --pupa-blue:#078cff;
  --pupa-cyan:#47dcff;
  --pupa-gold:#ffc329;
  --pupa-gold2:#ff9400;
  --pupa-white:#f8fcff;
  --pupa-text:#143d65;
  --pupa-line:#b9def7;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body.pupa-donate-page{
  min-height:100vh;
  font-family:'Kanit',Tahoma,"Leelawadee UI","Segoe UI",Arial,sans-serif;
  color:var(--pupa-text);
  background:
    linear-gradient(180deg,rgba(0,20,52,.08),rgba(0,20,52,.30)),
    url('img/pupa-donate-bg.jpg') center top/cover fixed no-repeat;
}

/* Same blue/gold nav as the main site */
.pupa-donate-nav{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg,#03152f,#052b5e);
  border-bottom:3px solid var(--pupa-gold);
  box-shadow:0 8px 28px rgba(0,22,55,.34);
}
.pupa-donate-nav__inner{
  width:min(1380px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.pupa-donate-nav a{
  min-width:0;min-height:82px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:1fr 18px;
  align-items:center;
  padding:10px 9px 8px;
  text-align:center;text-decoration:none!important;color:#fff!important;
  border-left:1px solid rgba(85,180,255,.16);
  transition:.18s ease;
}
.pupa-donate-nav a:last-child{border-right:1px solid rgba(85,180,255,.16)}
.pupa-donate-nav a>span{
  grid-row:1/3;
  color:#ffd55d;font-size:25px;line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.pupa-donate-nav strong{
  color:#fff;font-size:17px;line-height:1.15;font-weight:800;white-space:nowrap;
  text-shadow:0 2px 3px rgba(0,0,0,.75);
}
.pupa-donate-nav small{
  color:#ffc329;font-size:10px;font-weight:900;letter-spacing:.3px;
}
.pupa-donate-nav a:hover,.pupa-donate-nav a.active{
  background:linear-gradient(180deg,#087de8,#064790);
  box-shadow:inset 0 -4px var(--pupa-gold);
}

/* Landing */
.pupa-donate-shell{
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
  min-height:calc(100vh - 85px);
  padding:115px 0 70px;
}
.pupa-member-shell{padding-top:55px}
.pupa-donate-heading{
  max-width:720px;margin:0 auto 28px;text-align:center;color:#fff;
  text-shadow:0 3px 12px rgba(0,24,60,.75);
}
.pupa-donate-heading>span{
  display:inline-block;
  padding:7px 22px;
  color:#6fe5ff;
  background:rgba(2,33,73,.88);
  border:1px solid rgba(90,210,255,.7);
  border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:1.5px;
}
.pupa-donate-heading h1{
  margin:10px 0 4px;
  font-size:38px;font-weight:900;
}
.pupa-donate-heading p{margin:0;color:#e7f7ff;font-size:15px}

.pupa-donate-container{max-width:1100px}
.card{
  overflow:hidden;
  border:1px solid rgba(111,199,248,.75)!important;
  border-radius:18px!important;
  background:rgba(250,253,255,.97)!important;
  box-shadow:0 24px 60px rgba(0,35,80,.30)!important;
}
.card-header{
  padding:25px 26px 21px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(74,197,255,.13),transparent 45%),
    linear-gradient(180deg,#fff,#eef8ff)!important;
  border-bottom:1px solid #cce8f8!important;
}
.card-header h5{
  margin:4px 0 2px!important;
  color:#073f7c!important;
  font-size:25px!important;font-weight:900!important;
}
.card-header h6{color:#6486a3!important;margin:4px 0!important}
.pupa-card-badge{
  display:inline-block;padding:6px 15px;
  color:#087bcf;background:#e7f7ff;
  border:1px solid #a9dcf8;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:1px;
}
.pupa-alert{
  margin:13px auto 0;
  padding:9px 12px;
  border-radius:9px;
  color:#b53b35;
  background:#fff1f0;
  border:1px solid #ffd1ce;
  font-size:12px;
}
.card-body{padding:24px!important;background:#fff!important}
.card-footer{
  padding:14px 24px 20px!important;
  background:#f5fbff!important;
  border-top:1px solid #d9edf9!important;
}
.input-group{width:100%}
.input-group-text{
  min-width:48px;justify-content:center;
  color:#086bae!important;
  background:#e9f7ff!important;
  border-color:#85c9f1!important;
}
.form-control{
  min-height:47px!important;
  color:#123f69!important;
  background:#fff!important;
  border-color:#85c9f1!important;
  box-shadow:none!important;
}
.form-control:focus{
  border-color:#078cff!important;
  box-shadow:0 0 0 3px rgba(7,140,255,.13)!important;
}
.pupa-login-button{
  min-height:48px;
  color:#fff!important;
  font-size:17px!important;font-weight:900!important;
  background:linear-gradient(180deg,#149dff,#0869c1)!important;
  border:1px solid #0867b8!important;
  border-bottom:4px solid #064a8a!important;
  border-radius:10px!important;
  box-shadow:0 6px 16px rgba(0,103,185,.22);
}
.pupa-login-button:hover{background:linear-gradient(180deg,#35b0ff,#0879d7)!important}

/* Member dashboard */
.pupa-member-card{border-radius:20px!important}
.pupa-member-nav{
  background:linear-gradient(180deg,#073b79,#052852)!important;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:2px solid var(--pupa-gold);
}
.pupa-member-nav .nav-link{color:#eaf8ff!important;font-weight:700!important}
.pupa-member-nav .nav-link:hover{color:#ffd457!important}
.pupa-member-nav .dropdown-menu{
  overflow:hidden;border:1px solid #9fd5f5;border-radius:10px;
  box-shadow:0 13px 30px rgba(0,37,82,.20);
}
.pupa-member-nav .dropdown-item{color:#164e78!important}
.pupa-member-nav .dropdown-item:hover{background:#eaf7ff!important;color:#0876c7!important}
.pupa-logout-button{
  color:#fff!important;border-color:#ff7a70!important;
  background:rgba(220,49,44,.22)!important;border-radius:9px!important;
}
.pupa-logout-button:hover{background:#dc413b!important}
.table-responsive{overflow-x:auto}
.table{
  margin-bottom:0!important;
  background:#fff!important;
  color:#174a72!important;
}
.table thead th{
  color:#fff!important;
  background:linear-gradient(180deg,#1099ef,#0769bb)!important;
  border-color:#5ab8ee!important;
  white-space:nowrap;
}
.table td,.table th{vertical-align:middle!important;border-color:#d3e9f7!important}
.table-hover tbody tr:hover{background:#edf8ff!important}
.table tbody tr[onclick]{cursor:pointer}
.table tbody tr[onclick]:hover{box-shadow:inset 4px 0 var(--pupa-gold)}
.online{color:#169d58!important;font-weight:800}
.offline{color:#e64740!important;font-weight:800}
.pupa-refill-note{
  color:#9f4038!important;
  background:#fff3f1!important;
  border:1px solid #ffd1cc!important;
  border-radius:10px!important;
}
.card-footer>.table{overflow-x:auto!important}

/* QR dialogs from JS / SweetAlert */
.swal2-popup{
  font-family:'Kanit',Tahoma,sans-serif!important;
  border-radius:18px!important;
  box-shadow:0 24px 70px rgba(0,25,65,.34)!important;
}
.swal2-confirm{
  background:linear-gradient(180deg,#159cff,#086cc6)!important;
  border-radius:9px!important;
}

/* Responsive */
@media(max-width:900px){
  .pupa-donate-nav__inner{grid-template-columns:repeat(3,1fr)}
  .pupa-donate-nav a{min-height:68px}
  .pupa-donate-shell{padding-top:70px}
  .pupa-member-shell{padding-top:30px}
  body.pupa-donate-page{background-attachment:scroll}
}
@media(max-width:560px){
  .pupa-donate-nav__inner{grid-template-columns:repeat(2,1fr)}
  .pupa-donate-nav a{min-height:60px;grid-template-columns:27px 1fr;padding:7px 5px}
  .pupa-donate-nav a>span{font-size:20px}
  .pupa-donate-nav strong{font-size:13px;white-space:normal}
  .pupa-donate-nav small{font-size:8px}
  .pupa-donate-shell{width:calc(100% - 18px);padding-top:48px}
  .pupa-donate-heading h1{font-size:29px}
  .card-header,.card-body,.card-footer{padding-left:15px!important;padding-right:15px!important}
  .table{min-width:680px}
}