/* =========================================================
   THE MAHOHA — CHECKOUT FORM UI v1
   Scope ONLY:
   - .product_form_checkout
   - quantity inside checkout
   - inputs / textarea
   - React Select dropdown
   - coupon
   - shipping
   - payment methods
   - total
   - final submit button

   IMPORTANT:
   - NO HTML changes
   - NO DOM reorder
   - NO display/flex/grid logic changes
   - NO product gallery / title / price styling
========================================================= */

:root{
  --mh-burgundy:#74162c;
  --mh-burgundy-hi:#962246;
  --mh-burgundy-deep:#541024;
  --mh-plum:#2b1028;
  --mh-wasabi:#d8f24a;
  --mh-blue:#d7efff;
  --mh-blush:#f7e9ec;
  --mh-white:#ffffff;
  --mh-ease:cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   CHECKOUT SHELL — BURGUNDY LIQUID GLASS
========================================================= */

#product-id .product_form_checkout{
  --mh-liquid-x:72%;
  --mh-liquid-y:18%;
  --mh-liquid-sat:1;

  position:relative!important;
  isolation:isolate;
  overflow:visible!important;

  border:
    1px solid
    rgba(255,255,255,.16)!important;

  border-radius:
    24px!important;

  background:
    radial-gradient(
      circle at
      var(--mh-liquid-x)
      var(--mh-liquid-y),

      rgba(255,255,255,.18) 0 3%,
      rgba(216,242,74,.07) 10%,
      transparent 29%
    ),

    radial-gradient(
      circle at 10% 13%,
      rgba(247,233,236,.11),
      transparent 31%
    ),

    radial-gradient(
      circle at 93% 87%,
      rgba(215,239,255,.085),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      #8b1d3d 0%,
      var(--mh-burgundy) 43%,
      #631126 70%,
      var(--mh-plum) 118%
    )!important;

  box-shadow:
    0 32px 92px
    rgba(74,10,31,.26),

    inset 0 1px
    rgba(255,255,255,.15),

    inset 0 0 0 1px
    rgba(255,255,255,.04)!important;

  backdrop-filter:
    blur(28px)
    saturate(
      calc(
        1.36 *
        var(--mh-liquid-sat)
      )
    )!important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(
      calc(
        1.36 *
        var(--mh-liquid-sat)
      )
    )!important;

  transition:
    transform .40s var(--mh-ease),
    box-shadow .36s var(--mh-ease),
    filter .30s ease,
    border-color .25s ease!important;
}


/* liquid cursor glow */

#product-id .product_form_checkout::after{
  content:"";

  position:absolute;

  inset:-1px;

  z-index:-1;

  border-radius:
    inherit;

  pointer-events:none;

  background:
    radial-gradient(
      circle at
      var(--mh-liquid-x)
      var(--mh-liquid-y),

      rgba(216,242,74,.12),
      rgba(255,255,255,.06) 17%,
      transparent 36%
    );

  filter:
    blur(22px);

  opacity:.78;

  transition:
    opacity .28s ease,
    filter .32s ease;
}


@media(hover:hover){

  #product-id .product_form_checkout:hover{

    --mh-liquid-sat:1.22;

    transform:
      translateY(-3px);

    filter:
      saturate(1.07);

    border-color:
      rgba(255,255,255,.24)!important;

    box-shadow:
      0 44px 118px
      rgba(74,10,31,.34),

      0 0 0 1px
      rgba(216,242,74,.07),

      inset 0 1px
      rgba(255,255,255,.19),

      inset 0 0 60px
      rgba(255,255,255,.035)!important;
  }


  #product-id .product_form_checkout:hover::after{

    opacity:1;

    filter:
      blur(28px);
  }

}


/* Keep EasyOrders decorative SVG */

#product-id .product_form_checkout > svg{

  color:
    rgba(255,255,255,.14)!important;
}


/* =========================================================
   CHECKOUT TITLE
========================================================= */

#product-id .product_form_checkout
> p:first-of-type{

  position:relative;

  color:
    #fff!important;

  font-family:
    Georgia,
    "Times New Roman",
    serif!important;

  font-size:
    clamp(
      23px,
      2vw,
      30px
    )!important;

  font-weight:
    400!important;

  line-height:
    1.16!important;

  letter-spacing:
    -.02em;
}


/* small accent line under title */

#product-id .product_form_checkout
> p:first-of-type::after{

  content:"";

  display:block;

  width:42px;
  height:3px;

  margin-top:10px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--mh-wasabi),
      rgba(255,255,255,.35)
    );
}


/* =========================================================
   LABELS
========================================================= */

#product-id .product_form_checkout label,
#product-id .product_form_checkout form
> div
> span.text-lg{

  color:
    rgba(255,255,255,.84)!important;

  font-weight:
    800!important;

  letter-spacing:
    .01em;
}


/* =========================================================
   QUANTITY
========================================================= */

#product-id .product_form_checkout
.quantity_container
> div{

  border:
    1px solid
    rgba(255,255,255,.14)!important;

  border-radius:
    14px!important;

  background:
    rgba(255,255,255,.085)!important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.08),

    0 7px 18px
    rgba(35,6,16,.08);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


#product-id .product_form_checkout
.quantity_container button{

  border-radius:
    9px!important;

  background:
    rgba(255,255,255,.08)!important;

  color:
    #fff!important;

  transition:
    transform .24s var(--mh-ease),
    background .22s ease,
    color .22s ease,
    box-shadow .24s ease!important;
}


@media(hover:hover){

  #product-id .product_form_checkout
  .quantity_container button:hover{

    transform:
      scale(1.06);

    background:
      var(--mh-wasabi)!important;

    color:
      var(--mh-plum)!important;

    box-shadow:
      0 6px 18px
      rgba(216,242,74,.16);
  }

}


#product-id .product_form_checkout
.quantity_container p{

  color:
    #fff!important;

  font-weight:
    800!important;
}


/* =========================================================
   INPUTS / TEXTAREA / SELECT CONTROL
========================================================= */

#product-id .product_form_checkout
.global_input,

#product-id .product_form_checkout
.global_textarea,

#product-id .product_form_checkout
.select__control{

  border:
    1px solid
    rgba(255,255,255,.14)!important;

  border-radius:
    14px!important;

  background:
    rgba(255,255,255,.085)!important;

  color:
    #fff!important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.09),

    0 8px 22px
    rgba(35,6,16,.08)!important;

  backdrop-filter:
    blur(13px)
    saturate(1.13);

  -webkit-backdrop-filter:
    blur(13px)
    saturate(1.13);

  transition:
    transform .27s var(--mh-ease),
    border-color .22s ease,
    background .22s ease,
    box-shadow .27s ease,
    filter .22s ease!important;
}


#product-id .product_form_checkout
.global_input:hover,

#product-id .product_form_checkout
.global_textarea:hover,

#product-id .product_form_checkout
.select__control:hover{

  border-color:
    rgba(255,255,255,.22)!important;

  background:
    rgba(255,255,255,.115)!important;

  filter:
    saturate(1.08);
}


#product-id .product_form_checkout
.global_input:focus,

#product-id .product_form_checkout
.global_textarea:focus,

#product-id .product_form_checkout
.select__control:focus-within{

  transform:
    translateY(-1px);

  border-color:
    rgba(216,242,74,.40)!important;

  background:
    rgba(255,255,255,.14)!important;

  box-shadow:
    0 0 0 4px
    rgba(216,242,74,.075),

    0 12px 30px
    rgba(35,6,16,.14),

    inset 0 1px
    rgba(255,255,255,.12)!important;

  outline:
    none!important;
}


/* text color */

#product-id .product_form_checkout
.global_input,

#product-id .product_form_checkout
.global_textarea{

  color:
    #fff!important;
}


/* placeholder */

#product-id .product_form_checkout
.global_input::placeholder,

#product-id .product_form_checkout
.global_textarea::placeholder,

#product-id .product_form_checkout
.select__placeholder{

  color:
    rgba(255,255,255,.56)!important;
}


/* React Select current value */

#product-id .product_form_checkout
.select__single-value,

#product-id .product_form_checkout
.select__input-container{

  color:
    #fff!important;
}


/* icons */

#product-id .product_form_checkout
.pointer-events-none.absolute svg{

  color:
    var(--mh-wasabi)!important;

  opacity:
    .83;
}


/* =========================================================
   DROPDOWN — PREMIUM FLOATING MENU
========================================================= */

#product-id .gov_select{

  z-index:
    70!important;
}


#product-id .gov_select
.select__indicator-separator{

  display:
    none!important;
}


#product-id .gov_select
.select__dropdown-indicator{

  color:
    rgba(255,255,255,.68)!important;

  transition:
    transform .26s var(--mh-ease),
    color .22s ease!important;
}


#product-id .gov_select:focus-within
.select__dropdown-indicator{

  transform:
    rotate(180deg);

  color:
    var(--mh-wasabi)!important;
}


/* dropdown panel */

#product-id .product_form_checkout
.select__menu{

  z-index:
    160!important;

  overflow:
    hidden!important;

  margin-top:
    8px!important;

  padding:
    7px!important;

  border:
    1px solid
    rgba(116,22,44,.11)!important;

  border-radius:
    18px!important;

  background:
    rgba(255,250,252,.96)!important;

  box-shadow:
    0 24px 72px
    rgba(43,16,40,.22),

    inset 0 1px
    rgba(255,255,255,.96)!important;

  backdrop-filter:
    blur(22px)
    saturate(1.20)!important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.20)!important;
}


/* list */

#product-id .product_form_checkout
.select__menu-list{

  padding:
    0!important;

  max-height:
    260px!important;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(116,22,44,.25)
    transparent;
}


/* each option */

#product-id .product_form_checkout
.select__option{

  min-height:
    42px;

  display:
    flex!important;

  align-items:
    center;

  padding:
    0 12px!important;

  border-radius:
    11px!important;

  background:
    transparent!important;

  color:
    var(--mh-plum)!important;

  font-size:
    11px!important;

  transition:
    transform .24s var(--mh-ease),
    background .20s ease,
    color .20s ease!important;
}


/* hover/focus */

#product-id .product_form_checkout
.select__option--is-focused{

  background:
    rgba(116,22,44,.075)!important;

  color:
    var(--mh-burgundy)!important;

  transform:
    translateX(-2px);
}


/* selected */

#product-id .product_form_checkout
.select__option--is-selected{

  background:
    linear-gradient(
      115deg,
      var(--mh-burgundy),
      var(--mh-plum)
    )!important;

  color:
    #fff!important;
}


/* selected indicator */

#product-id .product_form_checkout
.select__option--is-selected::after{

  content:
    "✓";

  margin-inline-start:
    auto;

  color:
    var(--mh-wasabi);

  font-weight:
    900;
}


/* =========================================================
   SHIPPING
========================================================= */

#product-id .shipping_cost_container{

  border:
    1px solid
    rgba(255,255,255,.12)!important;

  border-radius:
    14px;

  background:
    rgba(255,255,255,.065);

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.055);
}


#product-id .shipping_cost_container dt{

  color:
    rgba(255,255,255,.60)!important;
}


#product-id .shipping_cost_container dd{

  color:
    var(--mh-wasabi)!important;

  font-weight:
    800!important;
}


/* =========================================================
   COUPON
========================================================= */

#product-id .product_form_checkout
form
.mt-2.flex.justify-between
> p{

  color:
    rgba(255,255,255,.61)!important;
}


#product-id .product_form_checkout
form
.mt-2.flex.justify-between
> button{

  border:
    1px solid
    rgba(255,255,255,.14)!important;

  border-radius:
    11px!important;

  background:
    rgba(255,255,255,.075)!important;

  color:
    #fff!important;

  transition:
    transform .24s var(--mh-ease),
    background .22s ease,
    border-color .22s ease,
    color .22s ease!important;
}


@media(hover:hover){

  #product-id .product_form_checkout
  form
  .mt-2.flex.justify-between
  > button:hover{

    transform:
      translateY(-2px);

    border-color:
      rgba(216,242,74,.26)!important;

    background:
      rgba(216,242,74,.14)!important;

    color:
      var(--mh-wasabi)!important;
  }

}


/* =========================================================
   PAYMENT METHODS
========================================================= */

#product-id .payment_card{

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.12)!important;

  border-radius:
    15px!important;

  background:
    rgba(255,255,255,.065)!important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.06)!important;

  transition:
    transform .28s var(--mh-ease),
    border-color .22s ease,
    background .22s ease,
    box-shadow .28s ease!important;
}


#product-id .payment_card::after{

  content:"";

  position:absolute;

  inset:
    auto 14px 8px;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--mh-wasabi);

  opacity:
    0;

  transform:
    scaleX(.20);

  transition:
    opacity .22s ease,
    transform .28s var(--mh-ease);
}


#product-id .payment_card:has(
.radio_circle.\!bg-skin-primary
){

  border-color:
    rgba(216,242,74,.24)!important;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(216,242,74,.11),
      transparent 30%
    ),

    rgba(255,255,255,.10)!important;

  box-shadow:
    0 12px 28px
    rgba(35,6,16,.12),

    inset 0 1px
    rgba(255,255,255,.08)!important;
}


#product-id .payment_card:has(
.radio_circle.\!bg-skin-primary
)::after{

  opacity:
    1;

  transform:
    scaleX(1);
}


@media(hover:hover){

  #product-id .payment_card:hover{

    transform:
      translateY(-2px);

    border-color:
      rgba(255,255,255,.20)!important;

    background:
      rgba(255,255,255,.095)!important;
  }

}


#product-id .payment_card_name{

  color:
    #fff!important;

  font-weight:
    800!important;
}


#product-id .payment_card_description{

  color:
    rgba(255,255,255,.58)!important;
}


#product-id .radio_container{

  border-color:
    rgba(255,255,255,.22)!important;

  background:
    rgba(255,255,255,.07);
}


#product-id .radio_circle.\!bg-skin-primary{

  background:
    var(--mh-wasabi)!important;
}


/* =========================================================
   TOTAL
========================================================= */

#product-id .total_price_container{

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    rgba(216,242,74,.17)!important;

  border-radius:
    15px!important;

  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(216,242,74,.16),
      transparent 27%
    ),

    rgba(25,7,19,.31)!important;

  box-shadow:
    0 14px 32px
    rgba(35,6,16,.12);
}


#product-id .total_price_container dt{

  color:
    rgba(255,255,255,.60)!important;
}


#product-id .total_price_container dd{

  color:
    var(--mh-wasabi)!important;

  font-weight:
    900!important;

  text-shadow:
    0 0 24px
    rgba(216,242,74,.10);
}


/* =========================================================
   FINAL SUBMIT BUTTON
========================================================= */

#product-id .form_checkout_btn{

  --mh-submit-x:25%;
  --mh-submit-y:50%;

  position:
    relative!important;

  isolation:
    isolate;

  overflow:
    hidden!important;

  border:
    1px solid
    rgba(255,255,255,.12)!important;

  border-radius:
    14px!important;

  background:
    radial-gradient(
      circle at
      var(--mh-submit-x)
      var(--mh-submit-y),

      rgba(255,255,255,.24),

      transparent 27%
    ),

    linear-gradient(
      110deg,
      #fff 0%,
      #f9f6f7 100%
    )!important;

  color:
    var(--mh-burgundy)!important;

  font-weight:
    900!important;

  box-shadow:
    0 15px 34px
    rgba(35,6,16,.16)!important;

  transition:
    transform .34s var(--mh-ease),
    box-shadow .34s var(--mh-ease),
    filter .24s ease!important;
}


/* light sweep */

#product-id .form_checkout_btn::before{

  content:"";

  position:absolute;

  top:-90%;
  bottom:-90%;

  left:-34%;

  width:
    25%;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(116,22,44,.14),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .72s var(--mh-ease);
}


/* arrow */

#product-id .form_checkout_btn::after{

  content:
    "↗";

  position:absolute;

  inset-inline-end:
    7px;

  top:
    50%;

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  background:
    var(--mh-wasabi);

  color:
    var(--mh-plum);

  font:
    900 15px/1
    Arial,
    sans-serif;

  transform:
    translateY(-50%);

  transition:
    transform .35s var(--mh-ease),
    border-radius .35s var(--mh-ease);
}


@media(hover:hover){

  #product-id .form_checkout_btn:hover{

    transform:
      translateY(-4px)
      scale(1.005);

    filter:
      saturate(1.08);

    box-shadow:
      0 23px 46px
      rgba(35,6,16,.23)!important;
  }


  #product-id .form_checkout_btn:hover::before{

    left:
      112%;
  }


  #product-id .form_checkout_btn:hover::after{

    transform:
      translateY(-50%)
      rotate(9deg)
      scale(1.05);

    border-radius:
      50%;
  }

}


#product-id .form_checkout_btn:active{

  transform:
    translateY(0)
    scale(.985)!important;
}


/* =========================================================
   MOBILE COSMETIC ONLY
========================================================= */

@media(max-width:700px){

  #product-id .product_form_checkout{

    border-radius:
      20px!important;
  }


  #product-id .product_form_checkout
  > p:first-of-type{

    font-size:
      23px!important;
  }


  #product-id .product_form_checkout
  .select__menu{

    border-radius:
      15px!important;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

#product-id .product_form_checkout
input:focus-visible,

#product-id .product_form_checkout
textarea:focus-visible,

#product-id .product_form_checkout
button:focus-visible{

  outline:
    2px solid
    var(--mh-wasabi)!important;

  outline-offset:
    3px!important;
}


@media(prefers-reduced-motion:reduce){

  #product-id .product_form_checkout,
  #product-id .product_form_checkout *,
  #product-id .product_form_checkout::after{

    transition:
      none!important;
  }

}