/* =========================================================
   V76.50 - KARTU PERIODE PENDAFTARAN MINIMALIS
   ========================================================= */

:root{
  --registration-page-width-v7649:calc(100% - clamp(36px,4vw,76px));
}

body:not(.app-body) .period-public-v58.period-public-v58{
  width:var(--registration-page-width-v7649) !important;
  max-width:none !important;
  min-height:112px !important;
  margin:28px auto 32px !important;
  padding:26px clamp(28px,3vw,46px) !important;
  display:grid !important;
  grid-template-columns:minmax(280px,1fr) max-content !important;
  align-items:center !important;
  gap:18px clamp(32px,4vw,72px) !important;
  overflow:hidden !important;
  border:1px solid rgba(37,99,235,.16) !important;
  border-radius:26px !important;
  background:linear-gradient(135deg,#ffffff,#f8fbff) !important;
  box-shadow:0 18px 46px rgba(15,39,71,.08) !important;
  box-sizing:border-box !important;
}

body:not(.app-body) .period-public-v58.period-public-v58 > div{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:8px !important;
}

body:not(.app-body) .period-public-v58.period-public-v58 span:first-child{
  display:block !important;
  margin:0 !important;
  color:#64748b !important;
  font-size:clamp(13px,.9vw,15px) !important;
  font-weight:650 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
}

body:not(.app-body) .period-public-v58.period-public-v58 b{
  display:block !important;
  margin:0 !important;
  color:#0b2f6f !important;
  font-size:clamp(19px,1.2vw,25px) !important;
  font-weight:720 !important;
  line-height:1.24 !important;
  letter-spacing:-.01em !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

body:not(.app-body) .period-public-v58.period-public-v58 .period-chip-v58{
  min-width:210px !important;
  min-height:58px !important;
  padding:0 30px !important;
  justify-self:end !important;
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:clamp(14px,.9vw,16px) !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media(max-width:1180px){
  body:not(.app-body) .period-public-v58.period-public-v58{
    width:calc(100% - 48px) !important;
    min-height:104px !important;
    margin:26px auto 30px !important;
    padding:24px 28px !important;
    grid-template-columns:minmax(0,1fr) max-content !important;
    gap:16px 24px !important;
  }

  body:not(.app-body) .period-public-v58.period-public-v58 .period-chip-v58{
    min-width:190px !important;
    min-height:54px !important;
    padding:0 24px !important;
  }
}

@media(max-width:760px){
  body:not(.app-body) .period-public-v58.period-public-v58{
    width:calc(100% - 28px) !important;
    min-height:0 !important;
    margin:20px auto 24px !important;
    padding:20px !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:18px !important;
    border-radius:22px !important;
  }

  body:not(.app-body) .period-public-v58.period-public-v58 .period-chip-v58{
    min-width:0 !important;
    width:auto !important;
    justify-self:start !important;
  }
}