/**
 * MSB Shop 7.0.3
 * Floating controls layout + graphical checkout account creation.
 */

/* --------------------------------------------------------------------------
   1) Floating controls: support and back-to-top never overlap.
   Desktop: support on the right, back-to-top on the left.
   Mobile: both sit above the bottom navigation / product buy bar.
   -------------------------------------------------------------------------- */
.msb-floating-support{
  position:fixed!important;
  right:24px!important;
  left:auto!important;
  bottom:24px!important;
  align-items:flex-end!important;
  z-index:9990!important;
}
.msb-back-to-top{
  position:fixed!important;
  left:24px!important;
  right:auto!important;
  bottom:24px!important;
  z-index:9988!important;
}

/* Support panel should grow inward, not outside the viewport. */
.msb-floating-support__panel{
  margin-right:0!important;
  margin-left:auto!important;
  transform-origin:bottom right!important;
}

@media(max-width:782px){
  .msb-floating-support{
    right:14px!important;
    left:auto!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
  .msb-back-to-top{
    left:14px!important;
    right:auto!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
  }
  .msb-floating-support__trigger{
    width:52px!important;
    height:52px!important;
  }
  /* Product page has a fixed purchase bar instead of the bottom nav. */
  body.single-product .msb-floating-support,
  body.single-product .msb-back-to-top{
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
  }
}

/* --------------------------------------------------------------------------
   2) Checkout account creation — turn the plain Woo block into a visual card.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-account-fields{
  position:relative!important;
  clear:both!important;
  margin:18px 0 4px!important;
  padding:16px!important;
  border:1px solid #ebe7e9!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#fff8fa)!important;
  box-shadow:0 12px 32px rgba(34,12,16,.045)!important;
  overflow:hidden!important;
}
.woocommerce-checkout .woocommerce-account-fields:after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  left:-58px;
  top:-58px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(243,10,73,.08),rgba(243,10,73,0) 70%);
  pointer-events:none;
}

.woocommerce-checkout .woocommerce-account-fields>p.create-account{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  padding:0!important;
}
.woocommerce-checkout .woocommerce-account-fields>p.create-account>label{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:54px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #eee9ec!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--msb-text,#220c10)!important;
  font-size:12px!important;
  font-weight:800!important;
  cursor:pointer!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.woocommerce-checkout .woocommerce-account-fields>p.create-account>label:hover{
  border-color:rgba(243,10,73,.28)!important;
  box-shadow:0 8px 22px rgba(243,10,73,.06)!important;
}

/* Style Woo's real checkbox as a modern switch; no fake input required. */
.woocommerce-checkout #createaccount{
  appearance:none!important;
  -webkit-appearance:none!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:24px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#ded9dc!important;
  box-shadow:inset 0 0 0 1px rgba(34,12,16,.04)!important;
  cursor:pointer!important;
  position:relative!important;
  transition:background .2s ease!important;
}
.woocommerce-checkout #createaccount:before{
  content:""!important;
  position:absolute!important;
  top:3px!important;
  right:3px!important;
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(34,12,16,.18)!important;
  transition:transform .2s ease!important;
}
.woocommerce-checkout #createaccount:checked{
  background:var(--msb-primary,#f30a49)!important;
}
.woocommerce-checkout #createaccount:checked:before{
  transform:translateX(-20px)!important;
}
.woocommerce-checkout #createaccount:focus-visible{
  outline:3px solid rgba(243,10,73,.16)!important;
  outline-offset:3px!important;
}

.msb-checkout-account-intro-v703{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  margin:14px 0 0!important;
  padding:12px 13px!important;
  border-radius:14px!important;
  background:#fff4f7!important;
  color:var(--msb-text,#220c10)!important;
}
.msb-checkout-account-intro-v703__icon{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--msb-primary,#f30a49)!important;
  box-shadow:0 7px 20px rgba(243,10,73,.08)!important;
}
.msb-checkout-account-intro-v703__icon .msb-icon{
  width:20px!important;
  height:20px!important;
}
.msb-checkout-account-intro-v703 strong,
.msb-checkout-account-intro-v703 small{
  display:block!important;
}
.msb-checkout-account-intro-v703 strong{
  font-size:11px!important;
  margin-bottom:3px!important;
}
.msb-checkout-account-intro-v703 small{
  font-size:9px!important;
  line-height:1.8!important;
  color:#786d73!important;
}

/* WooCommerce injects account fields in a .create-account container. */
.woocommerce-checkout .woocommerce-account-fields>div.create-account{
  position:relative!important;
  z-index:1!important;
  margin:14px 0 0!important;
  padding:14px!important;
  border:1px solid #eee9ec!important;
  border-radius:15px!important;
  background:#fff!important;
}
.woocommerce-checkout .woocommerce-account-fields>div.create-account .form-row{
  margin:0 0 12px!important;
}
.woocommerce-checkout .woocommerce-account-fields>div.create-account .form-row:last-child{
  margin-bottom:0!important;
}
.woocommerce-checkout .woocommerce-account-fields>div.create-account label{
  display:block!important;
  margin-bottom:6px!important;
  color:#5f565b!important;
  font-size:10px!important;
  font-weight:700!important;
}
.woocommerce-checkout .woocommerce-account-fields>div.create-account input.input-text,
.woocommerce-checkout .woocommerce-account-fields>div.create-account input[type="password"]{
  width:100%!important;
  min-height:48px!important;
  padding:9px 13px!important;
  border:1px solid #e5e1e3!important;
  border-radius:12px!important;
  background:#faf9fa!important;
  color:var(--msb-text,#220c10)!important;
  font:inherit!important;
  font-size:11px!important;
  box-shadow:none!important;
  outline:0!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.woocommerce-checkout .woocommerce-account-fields>div.create-account input.input-text:focus,
.woocommerce-checkout .woocommerce-account-fields>div.create-account input[type="password"]:focus{
  background:#fff!important;
  border-color:var(--msb-primary,#f30a49)!important;
  box-shadow:0 0 0 3px rgba(243,10,73,.07)!important;
}

@media(max-width:782px){
  .woocommerce-checkout .woocommerce-account-fields{
    margin-top:14px!important;
    padding:12px!important;
    border-radius:15px!important;
  }
  .woocommerce-checkout .woocommerce-account-fields>p.create-account>label{
    min-height:50px!important;
    padding:9px 10px!important;
    font-size:10px!important;
  }
  .msb-checkout-account-intro-v703{
    padding:10px!important;
  }
  .msb-checkout-account-intro-v703__icon{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
  }
  .woocommerce-checkout .woocommerce-account-fields>div.create-account{
    padding:11px!important;
  }
}