/* ==========================================================================
   PUPA UNIFIED UI 2026
   One blue / cyan / gold theme for all legacy inner pages.
   This file intentionally overrides the old fixed 1200px layout.
   ========================================================================== */
:root{
  --pupa-navy:#021a3a;
  --pupa-navy-2:#06336f;
  --pupa-blue:#078cff;
  --pupa-cyan:#43dcff;
  --pupa-gold:#ffc429;
  --pupa-gold-2:#ff9400;
  --pupa-surface:#f8fcff;
  --pupa-surface-2:#eaf7ff;
  --pupa-line:#b9def6;
  --pupa-text:#103f6c;
  --pupa-muted:#6887a3;
}
*{box-sizing:border-box}
html,body{margin:0!important;padding:0!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
html{background:#e9f7ff!important}
body{
  color:var(--pupa-text)!important;
  font-family:Tahoma,"Leelawadee UI","Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  background:
    linear-gradient(to bottom,rgba(255,255,255,0) 0 560px,#eaf7ff 790px,#eaf7ff 100%),
    url("../../images/pupa-unified-bg.jpg") center 82px / cover no-repeat!important;
  background-attachment:scroll!important;
}
body,button,input,select,textarea,table{
  font-family:Tahoma,"Leelawadee UI","Segoe UI",Arial,sans-serif!important;
}
img{max-width:100%!important;height:auto}
table{max-width:100%!important}

/* ---------------- unified top navigation ---------------- */
.navbar_menu,.navbar_menu_bg{height:auto!important;min-height:0!important;background:none!important}
.pupa-site-nav{
  position:relative;z-index:1000;
  width:100%;
  background:linear-gradient(180deg,#03152f 0%,#052b5e 100%);
  border-bottom:3px solid var(--pupa-gold);
  box-shadow:0 8px 28px rgba(0,30,70,.34);
}
.pupa-site-nav__inner{
  width:min(1380px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.pupa-site-nav a{
  min-width:0;min-height:82px;
  display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:1fr 18px;
  padding:10px 10px 8px;
  align-items:center;text-align:center;text-decoration:none!important;color:#fff!important;
  border-left:1px solid rgba(80,180,255,.16);
  transition:background .18s ease,box-shadow .18s ease;
}
.pupa-site-nav a:last-child{border-right:1px solid rgba(80,180,255,.16)}
.pupa-site-nav a:hover{
  background:linear-gradient(180deg,#087de8,#064790);
  box-shadow:inset 0 -4px var(--pupa-gold);
}
.pupa-nav-ico{
  grid-row:1/3;
  font-size:25px;line-height:1;color:#ffd45d;
  filter:drop-shadow(0 2px 2px #001);
}
.pupa-site-nav strong{
  min-width:0;
  font-size:17px!important;line-height:1.15!important;
  color:#fff!important;font-weight:800!important;
  white-space:nowrap;text-shadow:0 2px 3px rgba(0,0,0,.75);
}
.pupa-site-nav small{
  font-size:10px!important;color:#ffc72a!important;font-weight:900!important;letter-spacing:.3px;
}

/* ---------------- remove broken old background layers ---------------- */
/* .change is the animated bg_body1 layer that caused the giant red/heart-like graphic */
.wrapper,.change,#particles-js,#particles-js2{
  display:none!important;
}

/* ---------------- legacy page canvas ---------------- */
.header_table{
  position:relative!important;
  z-index:5!important;
  width:min(1180px,calc(100% - 28px))!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto 45px!important;
  padding:0!important;
  background:transparent!important;
}
.header_table>table,
.header_table>table>tbody,
.header_table>table>tbody>tr,
.header_table>table>tbody>tr>td,
.header_table table[width="1200"],
.header_table table[width="1160"]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.header_table>table>tbody>tr:first-child>td{
  height:500px!important; /* hero area over the main artwork */
}
.header_table>table>tbody>tr:nth-child(2)>td{
  height:auto!important;
}
.header_table td[width="20"]{width:12px!important;min-width:12px!important}
.header_table td[width="1160"]{width:auto!important}
.header_table td[height="1130"],.header_table td[height="1500"],.header_table td[height="1800"]{height:auto!important}

/* single clean content shell - no triple borders */
.ui.piled.segment:before,.ui.piled.segment:after{display:none!important}
.ui.message.piled.segment,
.ui.message.segment{
  margin:0!important;
  padding:12px!important;
  border:0!important;
  border-radius:20px!important;
  background:rgba(245,251,255,.96)!important;
  box-shadow:0 18px 48px rgba(0,39,88,.20)!important;
}
.well{
  margin:0!important;
  padding:28px!important;
  min-height:0!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid var(--pupa-line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
.ui.message.segment .well + .well{margin-top:16px!important}

/* breadcrumb */
.breadcrumb{
  margin:0 0 16px!important;
  padding:12px 16px!important;
  background:linear-gradient(180deg,#f8fdff,#e9f6ff)!important;
  border:1px solid #b8ddf7!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.breadcrumb>li,.breadcrumb>li>a{font-size:14px!important}
.breadcrumb>li>a{color:#087bd7!important;font-weight:800!important}
.breadcrumb>.active{color:#7d95aa!important}

/* headings / type */
.main-header{
  margin:6px 0 28px!important;
  padding:0!important;
  text-align:center!important;
}
.main-header span,.main-header>span{
  color:#073f7c!important;
  font-size:34px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.1px!important;
  text-shadow:0 1px #fff!important;
}
.main-header small{
  display:block!important;margin-top:8px!important;
  color:#6688a6!important;font-size:15px!important;font-weight:600!important;
}
.main-header:after{
  content:"";
  display:block;width:130px;height:4px;margin:13px auto 0;
  border-radius:999px;background:linear-gradient(90deg,transparent,var(--pupa-gold),transparent);
}
h1,h2,h3,h4,h5,h6{color:#073f7c!important}
p,li,td,label{line-height:1.65}
a{color:#087bd7}

/* cards / boss panels / info panels */
.box-sv{
  width:100%!important;
  margin:0 0 18px!important;
  overflow:hidden!important;
  border:1px solid #b7ddf6!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(9,80,137,.08)!important;
}
.box-text-haeder{
  margin:0!important;padding:12px 15px!important;
  color:#07518f!important;font-size:16px!important;font-weight:800!important;
  background:linear-gradient(90deg,#e3f5ff,#fff)!important;
  border:0!important;border-bottom:2px solid var(--pupa-gold)!important;
}
.box-sv-body{border:0!important;padding:15px!important}
.line-box{border-color:#d9ecf8!important}
.panel,.panel-default{
  border:1px solid var(--pupa-line)!important;border-radius:12px!important;overflow:hidden!important;
  box-shadow:none!important;
}
.panel-heading{
  color:#fff!important;background:linear-gradient(180deg,#0c8ee9,#0869bc)!important;
  border:0!important;font-weight:800!important;
}

/* forms: no overflow and better visual */
.form-group{margin-bottom:19px!important}
.form-control,input[type=text],input[type=password],input[type=email],select,textarea{
  max-width:100%!important;
  width:100%;
  height:auto!important;
  min-height:46px;
  color:#103f6c!important;
  background:#fff!important;
  border:1px solid #73c6f7!important;
  border-radius:10px!important;
  box-shadow:0 2px 8px rgba(0,85,155,.05)!important;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  outline:0!important;border-color:#078cff!important;
  box-shadow:0 0 0 3px rgba(7,140,255,.13)!important;
}
.form-control-feedback{color:#7b9ab3!important}
.help-block{color:#4686bd!important;font-size:12px!important}
.input-group{width:100%!important;display:flex!important}
.input-group-addon{
  flex:0 0 auto!important;
  background:#fff!important;border:1px solid #73c6f7!important;border-right:0!important;
  border-radius:10px 0 0 10px!important;
}
.input-group-addon img{max-width:190px!important}
.input-group .form-control{flex:1 1 auto!important;min-width:0!important;border-radius:0 10px 10px 0!important}
.radio-inline{margin:6px 20px 6px 0!important}
.radio-inline img{max-height:54px!important;width:auto!important}
.form-panel,.form-panel-default{
  overflow:hidden!important;
  border:1px solid #c8e6f8!important;border-radius:11px!important;background:#f8fcff!important;
}
.form-panel-heading{background:#f1faff!important;border:0!important}
.form-panel-body{background:#fff!important;color:#315f86!important}
.form-panel-title a{color:#126db5!important}

/* buttons */
.btn,.button,button{
  max-width:100%;border-radius:10px!important;font-weight:800!important;letter-spacing:.1px;
}
.btn-register,.btn-primary,.ui.primary.button{
  color:#fff!important;
  background:linear-gradient(180deg,#169cff,#0566bd)!important;
  border:1px solid #076fc7!important;
  box-shadow:0 5px 12px rgba(0,92,170,.18)!important;
}
.btn-register:hover,.btn-primary:hover{background:linear-gradient(180deg,#32adff,#0875d2)!important}
.btn-close,.btn-danger{
  color:#fff!important;background:linear-gradient(180deg,#ff635d,#db302d)!important;border-color:#cf312d!important;
}

/* tables */
.table,.table-responsive{max-width:100%!important}
.table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.table{
  width:100%!important;background:#fff!important;
  border-collapse:separate!important;border-spacing:0!important;
}
.table>thead>tr>th{
  color:#fff!important;font-weight:800!important;
  background:linear-gradient(180deg,#1199ef,#086bbb)!important;
  border-color:#69bdeb!important;
}
.table>tbody>tr>td{color:#184c76!important;border-color:#d0e7f6!important;vertical-align:middle!important}
.table-striped>tbody>tr:nth-of-type(odd){background:#f3faff!important}

/* bootstrap columns: let narrow screens actually collapse */
.row{margin-left:-10px!important;margin-right:-10px!important}
[class*="col-"]{min-width:0!important;padding-left:10px!important;padding-right:10px!important}

/* old fixed/content width fallbacks */
.container{width:min(1170px,100%)!important;max-width:1170px!important}
iframe,video,embed,object,canvas{max-width:100%!important}

/* remove decorative overlays/pseudo-images that create random blobs */
body:before,.wrapper:before,.wrapper:after,.change:before,.change:after{display:none!important}

/* lower page fade without blurring the hero itself */
.header_table:after{
  content:"";position:absolute;z-index:-1;
  top:430px;left:-25vw;width:150vw;height:250px;
  background:linear-gradient(180deg,transparent,#eaf7ff 90%);
  pointer-events:none;
}

/* responsive */
@media(max-width:992px){
  .pupa-site-nav__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pupa-site-nav a{min-height:68px}
  body{background-position:center 138px!important;background-size:auto 620px!important}
  .header_table{width:calc(100% - 18px)!important}
  .header_table>table>tbody>tr:first-child>td{height:430px!important}
}
@media(max-width:767px){
  body{font-size:14px!important;background-position:center 204px!important;background-size:auto 500px!important}
  .pupa-site-nav__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pupa-site-nav a{min-height:62px;grid-template-columns:27px minmax(0,1fr);padding:7px 5px}
  .pupa-nav-ico{font-size:20px}
  .pupa-site-nav strong{font-size:13px!important}
  .pupa-site-nav small{font-size:8px!important}
  .header_table>table>tbody>tr:first-child>td{height:350px!important}
  .ui.message.piled.segment,.ui.message.segment{padding:6px!important;border-radius:13px!important}
  .well{padding:17px!important;border-radius:11px!important}
  .main-header span,.main-header>span{font-size:25px!important}
  .breadcrumb{padding:10px 12px!important}
  .row>[class*="col-xs-6"]{width:100%!important;float:none!important}
  .row>[class*="col-sm-6"]{width:100%!important;float:none!important}
  .input-group{display:block!important}
  .input-group-addon{display:block!important;width:100%!important;border-right:1px solid #73c6f7!important;border-radius:10px 10px 0 0!important;text-align:center!important}
  .input-group .form-control{border-radius:0 0 10px 10px!important}
}
@media(max-width:420px){
  body{background-size:auto 430px!important}
  .header_table>table>tbody>tr:first-child>td{height:300px!important}
  .pupa-site-nav strong{white-space:normal!important}
  .main-header span,.main-header>span{font-size:22px!important}
}


/* ==========================================================================
   REGISTER HOTFIX
   Legacy AOS hides most form rows before JS animation starts.
   Keep all form controls visible and remove the empty top strip.
   ========================================================================== */
body [data-aos],
body [data-aos^="zoom-"],
body [data-aos^="fade-"]{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
  pointer-events:auto!important;
}

/* Never let the registration form inherit a fixed/min-height from legacy CSS */
#add_account,
#add_account .row,
#add_account .form-group,
#add_account [class*="col-"]{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#add_account .row{
  display:flex!important;
  flex-wrap:wrap!important;
}
#add_account .col-lg-12,
#add_account .col-md-12,
#add_account .col-sm-12{
  flex:0 0 100%!important;
  width:100%!important;
}
#add_account .col-lg-6,
#add_account .col-md-6,
#add_account .col-sm-6{
  flex:0 0 50%!important;
  width:50%!important;
}
#add_account .col-lg-4,
#add_account .col-md-4,
#add_account .col-sm-4{
  flex:0 0 33.333333%!important;
  width:33.333333%!important;
}

/* Remove the pale empty legacy header band above the artwork */
body > .navbar_menu,
body > .navbar_menu_bg{
  margin:0!important;
  padding:0!important;
}
.pupa-site-nav + #particles-js,
.pupa-site-nav ~ #particles-js{
  display:none!important;
}

/* Form spacing / readability */
#add_account .form-group{margin-bottom:20px!important}
#add_account label{
  display:block!important;
  margin-bottom:7px!important;
  color:#073d74!important;
  font-weight:800!important;
}
#add_account .radio-inline{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
#add_account .radio-inline img{
  width:auto!important;
  height:52px!important;
}
#add_account .form-panel-group{
  width:100%!important;
  margin-top:3px!important;
}
#add_account .form-panel{
  width:100%!important;
}
#add_account .form-panel-heading{
  padding:13px 16px!important;
  border:0!important;
  background:#f6fbff!important;
}
#add_account .form-panel-title{
  margin:0!important;
  font-size:14px!important;
}
#add_account .checkbox-inline{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  white-space:normal!important;
}
#add_account .checkbox-inline a{
  color:#126eb6!important;
  text-decoration:none!important;
}

/* Make title bar clean instead of the old blue image/gradient conflict */
#add_account ~ *{}
.well .main-header{
  padding:17px 20px!important;
  margin:0 0 25px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#0752a6,#119ce8)!important;
  border-left:6px solid #ffc429!important;
}
.well .main-header:after{display:none!important}
.well .main-header span,
.well .main-header span small{
  color:#fff!important;
  text-shadow:0 2px 4px rgba(0,0,0,.35)!important;
}
.well .main-header span{
  font-size:30px!important;
}
.well .main-header span small{
  display:block!important;
  margin-top:4px!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.6px!important;
}

/* Keep the whole form shell naturally sized */
.header_table>table>tbody>tr:nth-child(2)>td,
.header_table>table>tbody>tr:nth-child(2)>td>table,
.header_table td[height="1130"]{
  height:auto!important;
  min-height:0!important;
}

/* responsive */
@media(max-width:767px){
  #add_account .col-lg-6,
  #add_account .col-md-6,
  #add_account .col-sm-6,
  #add_account .col-xs-6,
  #add_account .col-lg-4,
  #add_account .col-md-4,
  #add_account .col-sm-4,
  #add_account .col-xs-4{
    flex:0 0 100%!important;
    width:100%!important;
  }
  #add_account .row{margin-left:-6px!important;margin-right:-6px!important}
  #add_account [class*="col-"]{padding-left:6px!important;padding-right:6px!important}
  .well .main-header span{font-size:24px!important}
}


/* ==========================================================================
   CAPTCHA WIDTH HOTFIX
   system/captcha.php outputs a 160x40 image. Legacy Bootstrap .input-group-addon
   uses width:1%, which can collapse the image and show only the first digit.
   ========================================================================== */
#add_account .input-group{
  display:flex!important;
  width:100%!important;
  align-items:stretch!important;
}
#add_account .input-group-addon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 180px!important;
  width:180px!important;
  min-width:180px!important;
  max-width:180px!important;
  padding:6px 9px!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
#add_account .input-group-addon img[name="image"],
#add_account .input-group-addon img[src*="captcha.php"]{
  display:block!important;
  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;
  height:40px!important;
  object-fit:contain!important;
  margin:0!important;
}
#add_account .input-group > .form-control{
  flex:1 1 auto!important;
  width:1%!important;
  min-width:0!important;
}

/* On phones, put the captcha image above the answer field so nothing gets clipped. */
@media(max-width:560px){
  #add_account .input-group{
    display:flex!important;
    flex-direction:column!important;
  }
  #add_account .input-group-addon{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    border-right:1px solid #73c6f7!important;
    border-bottom:0!important;
    border-radius:10px 10px 0 0!important;
    padding:8px!important;
  }
  #add_account .input-group > .form-control{
    width:100%!important;
    border-radius:0 0 10px 10px!important;
  }
}