/* Brand colors */
:root{--brand-orange:#F15A29;--brand-blue:#2E3192;--white:#ffffff;}
body{font-family:Arial, sans-serif;}
.asi-wrap{padding:12px;}
.banner{width:100%;max-width:940px;margin:0 auto;background:linear-gradient(135deg,var(--brand-orange),var(--brand-blue));border-radius:20px;color:var(--white);padding:15px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.15)}
.title-en{
  font-size:clamp(16px,4vw,24px);
  font-weight:bold;
  margin-bottom:10px
}
.timer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:8px
}
.unit{
  background:rgba(255,255,255,.15);
  border-radius:10px;
  padding:8px 5px;
  text-align:center;
}
.value{
  font-size:clamp(20px,6vw,34px);
  font-weight:bold
}
.label{
  font-size:12px;
  margin-top:4px;
  display:block;
}
.note{
  margin-top:8px;
  font-size:13px;
  background:rgba(255,255,255,.14);
  border-radius:10px;
  padding:6px
}

/* ✅ Added Responsive Fix */
@media (max-width:768px){
  .timer{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 5px;
  }
  .value{
    font-size:clamp(22px,8vw,38px);
  }
  .label{
    font-size:13px;
    margin-top:2px;
  }
}

/* Packages */
.packages{max-width:940px;margin:18px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}
.package{background:#fff;border-radius:15px;padding:15px;box-shadow:0 5px 15px rgba(0,0,0,.1);text-align:center}
.package h3{margin-bottom:10px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand-orange),var(--brand-blue));color:#fff;border:none;padding:10px 18px;margin-top:10px;border-radius:8px;cursor:pointer;font-size:14px}

/* Modal */
.asi-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:99999}
.asi-modal-content{background:#fff;padding:20px;border-radius:12px;width:90%;max-width:420px;position:relative;box-shadow:0 8px 25px rgba(0,0,0,.2)}
.asi-modal-close{position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:26px;cursor:pointer}
.asi-modal h3{color:var(--brand-blue);margin-top:0}
.asi-modal input[type="email"], .asi-modal input[type="file"]{width:100%;padding:8px;margin-top:6px;border:1px solid #ddd;border-radius:6px}
.asi-submit-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--brand-orange),var(--brand-blue));color:#fff;border:none;border-radius:8px;margin-top:12px}

/* Modal spinner */
.asi-modal-spinner{position:absolute;inset:0;background:rgba(255,255,255,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px}
.asi-loader{border:6px solid #f3f3f3;border-top:6px solid var(--brand-orange);border-right:6px solid var(--brand-blue);border-radius:50%;width:48px;height:48px;animation:asi-spin 1s linear infinite}
@keyframes asi-spin{100%{transform:rotate(360deg)}}

/* Global loader on redirect target page */
#asi-global-loader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#fff;z-index:999999}
#asi-global-loader .asi-loader{width:80px;height:80px;border-width:8px}
#asi-global-loader p{margin-top:12px;color:var(--brand-orange);font-weight:700}