/* ==========================================================
   SENYUMTOTO UI FIX V2
   Pasang PALING BAWAH setelah seluruh CSS lama.
   Dibuat untuk memperbaiki layout walau utility CSS asli gagal load.
   ========================================================== */

:root{
  --st-red:#c90018;
  --st-red-dark:#960012;
  --st-black:#101014;
  --st-text:#202126;
  --st-muted:#686b73;
  --st-line:#e5e6e9;
  --st-bg:#f5f6f8;
  --st-white:#fff;
  --st-radius:12px;
  --st-container:1180px;
  --st-shadow:0 8px 30px rgba(0,0,0,.10);
}

/* ===== RESET ===== */
html{
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:inherit}

html,body{
  margin:0!important;
  padding:0;
  width:100%;
  min-height:100%;
}

body{
  overflow-x:hidden;
  background:var(--st-bg)!important;
  color:var(--st-text);
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px;
  line-height:1.55;
  padding-bottom:76px!important;
}

img,svg,video,iframe{max-width:100%}
img{height:auto}
a{text-decoration:none}
button,input,select,textarea{font:inherit}

/* ===== BOOTSTRAP-LIKE UTILITIES YANG HILANG ===== */
.container,
.main-container{
  width:100%!important;
  max-width:var(--st-container)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
}

.row{
  display:flex;
  flex-wrap:wrap;
  margin-left:-8px;
  margin-right:-8px;
}

.row > [class*="col-"]{
  min-width:0;
  padding-left:8px;
  padding-right:8px;
}

.col-12{width:100%;flex:0 0 100%}

.d-none{display:none!important}
.d-block{display:block!important}
.d-flex{display:flex!important}
.w-100{width:100%!important}
.w-auto{width:auto!important}
.align-items-center{align-items:center!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-center{justify-content:center!important}
.flex-column{flex-direction:column!important}
.text-center{text-align:center!important}
.m-0{margin:0!important}
.mt-1{margin-top:.5rem!important}
.mt-2{margin-top:1rem!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.5rem!important}
.mb-2{margin-bottom:1rem!important}
.ml-2{margin-left:1rem!important}
.mr-0{margin-right:0!important}
.p-2{padding:1rem!important}
.hide{display:none!important}

.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.order-4{order:4}

/* ===== HIDE LEGACY BLOCK YANG BIKIN HEADER PECAH ===== */
/* panel lokasi muncul polos karena CSS vendor tidak termuat */
.offsite-panel,
.js-ld-wrapper,
[data-panel-name="location picker location"],
[data-panel-name="location picker branch"]{
  display:none!important;
}

/* toggle VAT / top bar lama */
.header-alt__top-bar,
.toggle-alt{
  display:none!important;
}

/* bar lokasi mobile lama */
.header-alt__location-picker{
  display:none!important;
}

/* search overlay duplikat */
.header-alt__search-overlay{
  display:none!important;
}

/* widget lokasi / toko di kanan */
.header-alt__quick-bar-icon{
  display:none!important;
}

/* ===== HEADER ===== */
header,
.header-alt{
  width:100%;
  position:relative;
  z-index:100;
}

.header-alt{
  background:#fff!important;
  border-bottom:1px solid var(--st-line);
  box-shadow:0 3px 14px rgba(0,0,0,.07);
}

.header-alt__middle{
  background:#fff!important;
}

.header-alt__middle > .container{
  padding-top:14px!important;
  padding-bottom:14px!important;
}

.header-alt__components{
  width:100%;
}

.header-alt__components > .d-flex{
  display:grid!important;
  grid-template-columns:220px minmax(260px,1fr) auto;
  align-items:center!important;
  gap:22px;
  width:100%;
}

.header-alt__logo{
  min-width:0;
}

.header-alt__logo a{
  display:flex!important;
  align-items:center;
}

.header-alt__logo-img{
  display:block!important;
  width:auto!important;
  max-width:190px!important;
  max-height:62px!important;
  object-fit:contain;
}

/* ===== HEADER SEARCH ===== */
.header-alt__search{
  width:100%;
  min-width:0;
}

.header-alt__search .search,
.header-alt__search .form-group--search{
  width:100%;
}

.header-alt__search .form-group--search{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:8px;
  margin:0!important;
}

.header-alt__search .form-group__element{
  min-width:0;
}

.header-alt__search input.form-control{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  border:1px solid #d5d7dc!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#222!important;
  outline:none!important;
  box-shadow:none!important;
}

.header-alt__search input.form-control:focus{
  border-color:var(--st-red)!important;
  box-shadow:0 0 0 3px rgba(201,0,24,.10)!important;
}

.header-alt__search .search__form-cta{
  margin:0!important;
}

.header-alt__search .btn-search{
  width:auto!important;
  min-width:88px!important;
  height:44px!important;
  margin:0!important;
  padding:0 17px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--st-red)!important;
  color:#fff!important;
  font-weight:800!important;
  cursor:pointer;
}

/* ===== LOGIN / DAFTAR QUICK BAR ===== */
.header-alt__widgets{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-width:0;
}

.header-alt__quick-bar{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.header-alt__quick-bar > *{
  min-width:0;
}

/* sembunyikan semua quick item kecuali yang berisi user/login */
.header-alt__quick-bar > *:not(:last-child){
  display:none!important;
}

.header-alt__quick-bar-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px;
  padding:10px 15px!important;
  border:1px solid var(--st-red)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--st-red)!important;
  font-size:13px!important;
  font-weight:800!important;
  white-space:nowrap;
}

.header-alt__quick-bar-link:hover{
  background:var(--st-red)!important;
  color:#fff!important;
}

/* ===== MENU DESKTOP ===== */
.menu-alt{
  display:block!important;
  position:relative!important;
  width:100%!important;
  background:var(--st-black)!important;
  border:0!important;
}

.menu-alt > .container{
  padding-top:0!important;
  padding-bottom:0!important;
}

.menu-alt__wrap,
.menu-alt__inner,
.menu-alt__tray{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.menu-alt__tray > .yCmsComponent{
  width:100%!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:2px!important;
}

.menu-alt__tray-item{
  flex:1 1 0!important;
  min-width:0!important;
}

.menu-alt__link,
.menu-alt__link--main{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:50px!important;
  padding:11px 12px!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-align:center!important;
  transition:.2s ease!important;
}

.menu-alt__link:hover,
.menu-alt__link--main:hover{
  background:var(--st-red)!important;
  color:#fff!important;
}

/* login + daftar pada dua item terakhir */
.menu-alt__tray-item:nth-last-child(2) .menu-alt__link--main,
.menu-alt__tray-item:last-child .menu-alt__link--main{
  background:#2a2a2f!important;
}

.menu-alt__tray-item:last-child .menu-alt__link--main{
  background:var(--st-red)!important;
}

/* elemen menu mobile jangan muncul di desktop */
.menu-alt .d-lg-none,
.header-alt__menu{
  display:none!important;
}

/* ===== CTA BAWAH HEADER ===== */
.CTASENYUMTOTO468516465{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  width:calc(100% - 36px)!important;
  max-width:var(--st-container)!important;
  margin:14px auto!important;
  padding:9px!important;
  border:1px solid var(--st-line)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--st-shadow)!important;
  overflow:hidden!important;
  animation:none!important;
}

.CTASENYUMTOTO468516465 .m-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  padding:10px 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--st-black)!important;
  color:#fff!important;
  font:800 13px/1.2 Arial,Helvetica,sans-serif!important;
  letter-spacing:.02em!important;
  text-shadow:none!important;
  box-shadow:none!important;
  animation:none!important;
}

.CTASENYUMTOTO468516465 .m-btn:first-child{
  background:var(--st-red)!important;
}

.CTASENYUMTOTO468516465 .m-btn::before,
.CTASENYUMTOTO468516465 .m-btn::after{
  display:none!important;
}

.CTASENYUMTOTO468516465 .m-btn:hover{
  transform:translateY(-1px)!important;
  filter:brightness(.94);
}

/* ===== MAIN CONTENT ===== */
main.main{
  display:block!important;
  width:100%!important;
}

.main-container{
  padding-top:8px!important;
  padding-bottom:40px!important;
}

.yCmsContenttoto{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid var(--st-line)!important;
  border-radius:14px!important;
  box-shadow:var(--st-shadow)!important;
}

.yCmsContenttoto > .row{
  margin:0!important;
}

.yCmsContenttoto > .row > [class*="col-"]{
  padding-left:0!important;
  padding-right:0!important;
}

.breadcrumb{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:0!important;
  padding:11px 16px!important;
  list-style:none!important;
  background:#fafafa!important;
  border-bottom:1px solid #ececef!important;
}

.main-container h1,
.main-container h2,
.main-container h3{
  line-height:1.25!important;
  overflow-wrap:anywhere;
}

.main-container h1{font-size:clamp(25px,3vw,38px)!important}
.main-container h2{font-size:clamp(21px,2.4vw,30px)!important}
.main-container h3{font-size:clamp(18px,2vw,24px)!important}

.main-container p,
.main-container li{
  overflow-wrap:anywhere;
}

.main-container img{
  display:block;
  max-width:100%!important;
  height:auto!important;
}

.main-container table{
  width:100%!important;
  border-collapse:collapse;
}

.main-container iframe,
.main-container video{
  max-width:100%!important;
}

/* ===== BUTTON UMUM ===== */
.btn{
  min-height:40px;
  padding:9px 15px;
  border-radius:8px;
  font-weight:700;
}

.btn-primary{
  border:1px solid var(--st-red)!important;
  background:var(--st-red)!important;
  color:#fff!important;
}

.btn-tertiary{
  border:1px solid #d4d5d9!important;
  background:#fff!important;
  color:#222!important;
}

/* ===== FOOTER ===== */
footer{
  width:100%!important;
  background:var(--st-black)!important;
  color:#ddd!important;
}

.footer-floating-toto{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  width:calc(100% - 20px)!important;
  max-width:760px!important;
  gap:6px!important;
  padding:7px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:13px!important;
  background:rgba(16,16,20,.96)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.35)!important;
  z-index:9999!important;
  animation:none!important;
}

.footer-btn-toto{
  flex:1 1 0!important;
  min-width:0!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:7px 8px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:8px!important;
  background:#29292e!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.1!important;
  text-align:center!important;
  white-space:normal!important;
  box-shadow:none!important;
  animation:none!important;
}

.footer-btn-toto:hover{
  background:var(--st-red)!important;
}

/* ===== DESKTOP UTILITIES ===== */
@media (min-width:992px){
  .d-lg-none{display:none!important}
  .d-lg-block{display:block!important}
  .d-lg-flex{display:flex!important}

  .order-lg-4{order:4}
}

/* ===== TABLET / MOBILE ===== */
@media (max-width:991.98px){
  body{
    padding-bottom:72px!important;
  }

  .container,
  .main-container{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .d-lg-none{display:block!important}
  .d-lg-block,
  .d-lg-flex{display:none!important}

  /* header jadi logo + hamburger */
  .header-alt__middle > .container{
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  .header-alt__components > .d-flex{
    display:grid!important;
    grid-template-columns:minmax(130px,1fr) auto!important;
    gap:10px!important;
  }

  .header-alt__logo{
    grid-column:1;
  }

  .header-alt__logo-img{
    max-width:165px!important;
    max-height:50px!important;
  }

  /* search tengah desktop disembunyikan di mobile supaya tidak dobel */
  .header-alt__search{
    display:none!important;
  }

  .header-alt__widgets{
    display:none!important;
  }

  .header-alt__menu{
    display:flex!important;
    grid-column:2;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    padding:8px!important;
    border-radius:9px!important;
    background:#f1f1f3!important;
    cursor:pointer;
  }

  .header-alt__menu-icon{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    width:22px!important;
  }

  .header-alt__menu-icon-bar{
    display:block!important;
    width:100%!important;
    height:2px!important;
    border-radius:10px!important;
    background:#222!important;
  }

  /* menu overlay hanya tampil kalau JS memberi state buka */
  .menu-alt{
    display:none!important;
  }

  .menu-alt.is-active,
  .menu-alt.active,
  .menu-alt.open,
  .menu-alt.menu-alt--open,
  body.menu-open .menu-alt{
    display:block!important;
  }

  .menu-alt__tray > .yCmsComponent{
    display:block!important;
    padding:8px 0!important;
  }

  .menu-alt__tray-item{
    width:100%!important;
  }

  .menu-alt__link,
  .menu-alt__link--main{
    justify-content:flex-start!important;
    min-height:44px!important;
    padding:10px 14px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    text-align:left!important;
  }

  .menu-alt .d-lg-none{
    display:block!important;
  }

  /* mobile CTA */
  .CTASENYUMTOTO468516465{
    width:calc(100% - 20px)!important;
    margin:10px auto!important;
    gap:7px!important;
    padding:7px!important;
  }

  .CTASENYUMTOTO468516465 .m-btn{
    min-height:43px!important;
    padding:8px 6px!important;
    font-size:11px!important;
  }

  .main-container{
    padding-top:4px!important;
  }

  .yCmsContenttoto{
    border-radius:10px!important;
  }
}

/* ===== MOBILE KECIL ===== */
@media (max-width:575.98px){
  .container,
  .main-container{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .header-alt__logo-img{
    max-width:145px!important;
  }

  .main-container h1{font-size:23px!important}
  .main-container h2{font-size:20px!important}
  .main-container h3{font-size:18px!important}

  .main-container p,
  .main-container li{
    font-size:14px!important;
    line-height:1.65!important;
  }

  .footer-floating-toto{
    width:calc(100% - 12px)!important;
    bottom:5px!important;
    padding:5px!important;
    gap:4px!important;
  }

  .footer-btn-toto{
    min-height:40px!important;
    padding:5px 4px!important;
    font-size:9px!important;
  }

  .footer-btn-toto svg{
    width:17px!important;
    height:17px!important;
  }
}

/* ===== AKSESIBILITAS ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}