/* ================= Base & Layout ================ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: Arial, sans-serif;
  height:100vh; display:flex; justify-content:center; align-items:center;
  background:linear-gradient(to right,#f4f4f4,#e9ecef); color:#333;
}
.background{
  background-image:url('assets/payment-portal-backgroundz.jpg');
  background-size:cover; background-position:left; background-repeat:no-repeat;
  position:relative;
}
.container{
  text-align:center; padding:20px; background:#fff; border-radius:10px;
  box-shadow:0 4px 6px rgba(0,0,0,.1); max-width:90%; width:630px;
}
.container.home{width:450px}
.logo-container{margin-bottom:20px}
.logo{width:100%; max-width:300px; height:auto; display:block; margin:0 auto}
h1{margin:27px 0 20px; font-size:30px; color:#2c3e50; letter-spacing:1px}
.info-text{margin-bottom:30px; font-size:16px; color:#555}
.button-container{display:flex; flex-direction:column; gap:15px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:15px 20px; border:none; border-radius:5px; text-decoration:none; color:#fff;
  font-size:16px; transition:transform .2s ease, box-shadow .3s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.2)
}
.btn:hover{transform:translateY(-5px); box-shadow:0 4px 8px rgba(0,0,0,.3)}
.icon{margin-right:8px; font-size:18px}
#card-payment{background:#218838} #card-payment:hover{background:#28a745}
#bank-transfer{background:#0056b3} #bank-transfer:hover{background:#007bff}
@media (min-width:768px){.button-container{flex-direction:row; justify-content:center; gap:30px} #card-payment .icon{position:relative; top:-4px}}
@media (max-width:767px){h1{font-size:22px}}

/* ================= Card Page Shell ================ */
.card-background{
  display:flex; justify-content:center; align-items:center; height:100vh;
  background:linear-gradient(to left,#a9bcd0,#3e5151); color:#333; padding:10px;
}
.card-container{
  text-align:center; padding:20px; background:#f7f9fb; border-radius:10px;
  box-shadow:0 4px 8px rgba(0,0,0,.2); width:100%; max-width:500px;
}
.card-container h1{font-size:28px; margin:40px 0 10px; color:#2c3e50}
.card-container h2{font-size:15px; margin-bottom:15px; color:#415262}
.processing-fee{font-size:16px; color:#555; margin-bottom:20px}
.input-group input{
  width:100%; padding:12px; font-size:16px; margin-bottom:20px;
  border:1px solid #ccc; border-radius:5px; transition:border-color .3s ease;
  box-shadow:-1px -1px 1px #4d4;
}
.input-group input:focus{border-color:#2a9d8f; outline:none}
.continue-btn{
  background:#264653; color:#fff; padding:12px 18px; border:none; border-radius:5px;
  font-size:16px; cursor:pointer; width:100%; transition:all .3s ease;
}
.continue-btn:hover{background:#2a9d8f}
.buttons a{
  display:block; margin-top:15px; text-decoration:none; color:#fff; padding:10px;
  border-radius:5px; font-size:14px; text-align:center;
}
.flywire-btn{background:#264653} .lvh-btn{background:#2a9d8f}
.bottom-logos{
  position:absolute; bottom:20px; left:20px; right:20px; display:flex;
  justify-content:space-between; align-items:center;
}
@media (max-width:768px){
  .card-container{padding:15px}
  .card{margin-top:-35px !important}
  .card-container h1{font-size:24px}
  .processing-fee{font-size:12px}
  .input-group input{padding:10px}
  .continue-btn{font-size:14px; padding:10px}
  .buttons a{font-size:12px}
  .bottom-logos{bottom:70px}
}
@media (max-width:480px){
  .card-container h1{font-size:24px}
  .processing-fee{font-size:16px}
  .continue-btn{font-size:18px; padding:8px}
  .bottom-logos{bottom:70px}
}

/* ================= Card Choices ================ */
.button-container{display:flex; flex-direction:column; gap:15px}
.payment-option{
  display:flex; align-items:center; padding:10px; border:2px solid #ccc;
  border-radius:5px; cursor:pointer; transition:background-color .3s ease;
}
.payment-option:hover{background:#f0f0f0}
.payment-option input[type="radio"]{margin-right:10px; transform:scale(1.2); cursor:pointer}
.card-logo{width:40px; margin-right:10px}
.continue-btn{margin-top:20px}
.payment-option{position:relative; transition:background-color .3s, border .3s, box-shadow .3s}
.cards.container{width:410px}
.payment-option:has(input[type="radio"]:checked){
  background:#d1e7dd; border:3px solid #bdd3c9; box-shadow:1px 2px 1px #a7bfb5;
}
.payment-option:has(input[type="radio"]:checked)::after{
  content:attr(data-card-type);
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  background:#f6e58d; color:#000; padding:5px 10px; border-radius:5px; font-size:.9rem;
  opacity:0; animation:popup .4s forwards; min-width:100px;
}
@keyframes popup{0%{opacity:0; transform:translateX(-50%) translateY(-10px)} 100%{opacity:1; transform:translateX(-50%) translateY(0)}}

/* ================= Modal ================ */
.modal{position:fixed; inset:0; z-index:1000; display:none}
.modal.is-open{display:grid; place-items:center}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(10,15,20,.55);
  backdrop-filter:blur(2px); opacity:0; animation:modal-fade-in 260ms ease forwards;
}
.modal__dialog{
  position:relative; width:min(720px,92vw); background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.2) inset;
  padding:clamp(20px,2.8vw,32px); transform-origin:50% 46%;
  opacity:0; animation:modal-pop-in 320ms cubic-bezier(.2,.8,.2,1) forwards;
}
.modal__close{
  position:absolute; top:10px; right:10px; width:38px; height:38px; border:none;
  border-radius:10px; cursor:pointer; background:rgba(0,0,0,.04);
  transition:background 160ms ease, transform 160ms ease;
}
.modal__close:hover{background:rgba(0,0,0,.08); transform:translateY(-1px)}
.modal__close:active{transform:translateY(0)}
.modal__close svg{width:22px; height:22px; display:block; margin:0 auto}

.modal__title{
  font-size:clamp(22px,3.2vw,30px); line-height:1.2; color:#2c3e50; font-weight:800; letter-spacing:.2px;
}
.modal__body{margin-top:10px; font-size:clamp(15px,2.2vw,17.5px); line-height:1.7; color:#34495e}
.modal__body .lead{margin-block:6px 14px; color:#415262}

/* ------- List alignment & bullets ------- */
:root{
  --gutter: 1.8rem;      /* left gutter for bullets/icons */
  --dot: 5px;            /* 50% smaller dot */
  --dot-color: #2f5167;  /* readable but subtle */
}

/* Align all list text to the same vertical edge */
.li-align{ padding-left: var(--gutter); }

/* Hanging indent for emoji lead items (✅) */
.li-lead-icon{
  padding-left: var(--gutter);
  text-indent: calc(-1 * var(--gutter));
}

/* Section header "📞 If your payment fails:" with hanging emoji */
.lead--icon{
  padding-left: var(--gutter);
  text-indent: calc(-1 * var(--gutter));
  margin-top: 6px;
}

/* Remove native bullets & normalize spacing */
.modal__body ul{ list-style:none; padding-left:0; margin:6px 0 12px }
.modal__body li{ margin:6px 0; position:relative }

/* FAT DOT for ALL li, except the emoji header items */
.modal__body li::before{
  content:"";
  position:absolute;
  left: calc(var(--gutter) - 0.9rem);  /* sits in the gutter */
  top: 0.6em;                          /* vertically centered with text line */
  width: var(--dot);
  height: var(--dot);
  border-radius:50%;
  background: var(--dot-color);
}

/* Suppress dot for emoji header items only */
.li-lead-icon::before,
.lead--icon::before{
  content:none !important;
}

/* Divider */
.modal__divider{
  height:1px; background:linear-gradient(90deg,transparent,#e7ecef,transparent); margin:14px 0;
}

/* Closing note emphasis */
.note-accent{
  font-style:italic;
  color:#2f5167;
  background:#f3f7fb;
  border:1px solid #e3edf6;
  border-radius:8px;
  padding:12px 14px;
  margin-top:8px;
}

/* Animations */
@keyframes modal-fade-in{from{opacity:0} to{opacity:1}}
@keyframes modal-pop-in{0%{opacity:0; transform:translateY(12px) scale(.96)} 70%{opacity:1; transform:translateY(-2px) scale(1.02)} 100%{opacity:1; transform:translateY(0) scale(1)}}
@keyframes modal-pop-out{from{opacity:1; transform:translateY(0) scale(1)} to{opacity:0; transform:translateY(8px) scale(.98)}}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .modal__backdrop, .modal__dialog{animation:none; opacity:1}
}