/* =========================================================
   QUANTAPS CHECKOUT.CSS — TR FINAL CLEAN
   - Scoped mini bootstrap grid/utilities
   - Checkout form layout
   - Payment / coupon / summary
   - Delivery notes
   - Contract / EFT modals
   ========================================================= */

/* =========================================================
   0) CHECKOUT TOKENS / THEME
========================================================= */

.loftForm{
  --ink:#0f172a;
  --ink-2:#1e293b;
  --muted:#64748b;
  --muted-2:#8390a7;

  --ac:var(--qt-platform-default, #6a7eff);
  --ac2:color-mix(in srgb, var(--ac) 58%, #ffffff);
  --ac-soft:color-mix(in srgb, var(--ac) 9%, #ffffff);
  --ac-ring:color-mix(in srgb, var(--ac) 18%, transparent);
  --service-ac:var(--ac);

  --qt-shell-max:1320px;
  --qt-shell-pad:12px;
  --qt-shell-inner:min(var(--qt-shell-max), calc(100% - (var(--qt-shell-pad) * 2)));

  --line:rgba(15,23,42,.09);
  --line-soft:rgba(148,163,184,.24);
  --surface:#ffffff;
  --surface-soft:#f8faff;
  --surface-tint:color-mix(in srgb, var(--ac) 4%, #ffffff);

  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;

  --shadow-card:0 14px 34px rgba(15,23,42,.08);
  --shadow-soft:0 8px 20px rgba(15,23,42,.055);
  --shadow-ac:0 14px 30px color-mix(in srgb, var(--ac) 19%, transparent);

  --mbp-gutter-x:24px;
  --mbp-gutter-y:24px;

  color:var(--ink);
  background:transparent !important;
  padding:0 !important;
  min-height:auto !important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   CHECKOUT PLATFORM THEME BRIDGE
   - Renklerin ana kaynağı global.css :root değişkenleridir.
   - PHP form class üretir: instagram-theme, youtube-theme vb.
   - Bu blok sadece checkout içindeki --ac tokenını bağlar.
   ========================================================= */

.loftForm.instagram-theme{ --ac:var(--qt-platform-instagram, #E1306C); }
.loftForm.linkedin-theme{ --ac:var(--qt-platform-linkedin, #0A66C2); }
.loftForm.tiktok-theme{ --ac:var(--qt-platform-tiktok, #101626); }
.loftForm.youtube-theme{ --ac:var(--qt-platform-youtube, #FF0033); }
.loftForm.facebook-theme{ --ac:var(--qt-platform-facebook, #1877F2); }
.loftForm.twitter-theme{ --ac:var(--qt-platform-twitter, #1D9BF0); }
.loftForm.telegram-theme{ --ac:var(--qt-platform-telegram, #229ED9); }
.loftForm.whatsapp-theme{ --ac:var(--qt-platform-whatsapp, #25D366); }
.loftForm.spotify-theme{ --ac:var(--qt-platform-spotify, #1ED760); }
.loftForm.soundcloud-theme{ --ac:var(--qt-platform-soundcloud, #FF4E00); }
.loftForm.twitch-theme{ --ac:var(--qt-platform-twitch, #9146FF); }
.loftForm.kick-theme{ --ac:var(--qt-platform-kick, #00E701); }
.loftForm.pinterest-theme{ --ac:var(--qt-platform-pinterest, #E60023); }
.loftForm.snapchat-theme{ --ac:var(--qt-platform-snapchat, #B89A00); }

.loftForm.apple-theme{ --ac:var(--qt-platform-apple, #FA243C); }
.loftForm.android-theme{ --ac:var(--qt-platform-android, #3DDC84); }
.loftForm.ios-theme{ --ac:var(--qt-platform-apple, #FA243C); }
.loftForm.audiomack-theme{ --ac:var(--qt-platform-audiomack, #FFA200); }
.loftForm.bluesky-theme{ --ac:var(--qt-platform-bluesky, #1185FE); }
.loftForm.boomplay-theme{ --ac:var(--qt-platform-boomplay, #86C232); }
.loftForm.chzzk-theme{ --ac:var(--qt-platform-chzzk, #00E68A); }
.loftForm.clubhouse-theme{ --ac:var(--qt-platform-clubhouse, #F4C542); }
.loftForm.coinhunt-theme{ --ac:var(--qt-platform-coinhunt, #5B6CFF); }
.loftForm.coinmarketcap-theme{ --ac:var(--qt-platform-coinmarketcap, #3861FB); }
.loftForm.coinsniper-theme{ --ac:var(--qt-platform-coinsniper, #F7931A); }
.loftForm.coub-theme{ --ac:var(--qt-platform-coub, #004CFF); }
.loftForm.dailymotion-theme{ --ac:var(--qt-platform-dailymotion, #0066FF); }
.loftForm.datpiff-theme{ --ac:var(--qt-platform-datpiff, #16A34A); }
.loftForm.dribbble-theme{ --ac:var(--qt-platform-dribbble, #EA4C89); }
.loftForm.freshcoins-theme{ --ac:var(--qt-platform-freshcoins, #00C896); }
.loftForm.kwai-theme{ --ac:var(--qt-platform-kwai, #FF6A00); }
.loftForm.likee-theme{ --ac:var(--qt-platform-likee, #FF2D55); }
.loftForm.medium-theme{ --ac:var(--qt-platform-medium, #12100E); }
.loftForm.mixcloud-theme{ --ac:var(--qt-platform-mixcloud, #5000FF); }
.loftForm.opensea-theme{ --ac:var(--qt-platform-opensea, #2081E2); }
.loftForm.quora-theme{ --ac:var(--qt-platform-quora, #B92B27); }
.loftForm.rarible-theme{ --ac:var(--qt-platform-rarible, #FEDA03); }
.loftForm.reddit-theme{ --ac:var(--qt-platform-reddit, #FF4500); }
.loftForm.reverbnation-theme{ --ac:var(--qt-platform-reverbnation, #1793E6); }
.loftForm.rumble-theme{ --ac:var(--qt-platform-rumble, #85C742); }
.loftForm.shopee-theme{ --ac:var(--qt-platform-shopee, #EE4D2D); }
.loftForm.snackvideo-theme{ --ac:var(--qt-platform-snackvideo, #FFB000); }
.loftForm.threads-theme{ --ac:var(--qt-platform-threads, #101010); }
.loftForm.tumblr-theme{ --ac:var(--qt-platform-tumblr, #36465D); }
.loftForm.vimeo-theme{ --ac:var(--qt-platform-vimeo, #1AB7EA); }
.loftForm.vk-theme{ --ac:var(--qt-platform-vk, #0077FF); }
.loftForm.jaco-theme{ --ac:var(--qt-platform-jaco, #8A2BE2); }

.loftForm.default-theme{ --ac:var(--qt-platform-default, #6A7EFF); }

.loftForm,
.loftForm *{
  box-sizing:border-box;
}

.loftForm :where(h1,h2,h3,p,ul,ol){
  margin-top:0;
}

.loftForm a{
  color:color-mix(in srgb, var(--ac) 76%, #0f172a);
  text-decoration:none;
}

.loftForm .page-wrap{
  padding-top:0 !important;
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.loftForm .header-spacer,
.loftForm .header-gap,
.loftForm .top-spacer{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   1) SCOPED MINI BOOTSTRAP
   Not: Global .container/.row bozulmasın diye loftForm içinde scope edildi.
========================================================= */

.loftForm .container{
  width:100%;
  max-width:var(--qt-shell-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--qt-shell-pad);
  padding-right:var(--qt-shell-pad);
  background:transparent !important;
}

.loftForm .row{
  display:flex;
  flex-wrap:wrap;
  margin-left:calc(var(--mbp-gutter-x) * -0.5);
  margin-right:calc(var(--mbp-gutter-x) * -0.5);
  margin-top:calc(var(--mbp-gutter-y) * -1);
}

.loftForm .row > *{
  box-sizing:border-box;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-left:calc(var(--mbp-gutter-x) * 0.5);
  padding-right:calc(var(--mbp-gutter-x) * 0.5);
  margin-top:var(--mbp-gutter-y);
}

.loftForm .g-0{
  --mbp-gutter-x:0px;
  --mbp-gutter-y:0px;
}

.loftForm .g-3{
  --mbp-gutter-x:16px;
  --mbp-gutter-y:16px;
}

.loftForm .mt-3{
  margin-top:1rem !important;
}

.loftForm .d-none{
  display:none !important;
}

@media (min-width:768px){
  .loftForm .col-md-4{ flex:0 0 auto; width:33.333333%; }
  .loftForm .col-md-6{ flex:0 0 auto; width:50%; }
  .loftForm .col-md-8{ flex:0 0 auto; width:66.666667%; }
  .loftForm .col-md-12{ flex:0 0 auto; width:100%; }
}

/* =========================================================
   2) PAGE BACKGROUND / SHELL
========================================================= */

.orderArea{
  min-height:100vh;
  padding:0 0 44px;
  background:
    radial-gradient(860px 300px at 50% -160px, color-mix(in srgb, var(--ac) 10%, transparent), transparent 64%),
    radial-gradient(620px 230px at 7% 0%, rgba(159,174,255,.09), transparent 58%),
    radial-gradient(620px 230px at 93% 0%, rgba(97,242,255,.07), transparent 58%),
    linear-gradient(180deg, #f5f7ff 0%, #ffffff 72%);
}

.qt-checkout__page{
  width:100%;
}

.qt-checkout-shell,
.loftForm .qt-order-cols{
  width:var(--qt-shell-inner);
  max-width:var(--qt-shell-max);
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   3) ICONS
========================================================= */

.loftForm .qt-ic{
  width:22px;
  height:22px;
  display:inline-block;
  flex:0 0 auto;
  color:currentColor;
}

.loftForm .qt-ic--hero{
  width:23px;
  height:23px;
}

.loftForm .qt-ic--pay{
  width:18px;
  height:18px;
}

.loftForm .qt-ic--btn{
  width:16px;
  height:16px;
}

.loftForm .qt-pay-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
  color:var(--ac);
}

.loftForm .orActionIco{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
}

/* =========================================================
   4) HERO
========================================================= */

#order-hero.qt-order-hero{
  position:relative;
  width:100%;
  margin:12px 0 !important;
  padding:0 !important;
  color:var(--ink);
}

.qt-checkout-heroCard{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border:1px solid color-mix(in srgb, var(--ac) 15%, rgba(148,163,184,.30));
  border-radius:24px;
  background:
    radial-gradient(560px 180px at 0 0, color-mix(in srgb, var(--ac) 8%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.86));
  box-shadow:
    0 10px 26px rgba(15,23,42,.065),
    inset 0 0 0 1px rgba(255,255,255,.76);
}

.qt-checkout-heroCard::after{
  content:"";
  position:absolute;
  right:-58px;
  top:-72px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 14%, transparent), rgba(255,255,255,.10));
  pointer-events:none;
}

.qt-checkout-heroCard__icon,
.qt-checkout-heroCard__text{
  position:relative;
  z-index:1;
}

.qt-checkout-heroCard__icon{
  width:50px;
  height:50px;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--ac) 21%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.qt-checkout-heroCard__text{
  min-width:0;
}

.qt-checkout-heroCard__title{
  margin:0 0 5px;
  color:var(--ink);
  font-size:23px;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:1000;
}

.qt-checkout-heroCard__desc{
  margin:0;
  max-width:78ch;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.52;
  font-weight:720;
}

/* =========================================================
   5) STEPPER
========================================================= */

.qt-checkout-stepper{
  display:grid;
  grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:9px 12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 6px 14px rgba(15,23,42,.035);
}

.qt-checkout-stepper__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--muted);
}

.qt-checkout-stepper__item span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.32);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
  line-height:1;
}

.qt-checkout-stepper__item strong{
  font-size:12px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}

.qt-checkout-stepper__item.is-active{
  color:var(--ink);
}

.qt-checkout-stepper__item.is-active span{
  border-color:transparent;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb, var(--ac) 18%, transparent);
}

.qt-checkout-stepper__line{
  height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 20%, transparent), rgba(148,163,184,.24));
}

/* =========================================================
   6) MAIN GRID / CARDS
========================================================= */

@media (min-width:769px){
  .loftForm .qt-order-cols{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(345px,.92fr);
    gap:14px;
    align-items:start;
  }

  .loftForm .qt-order-cols > .col-md-8,
  .loftForm .qt-order-cols > .col-md-4{
    width:auto !important;
    max-width:none !important;
    flex:none !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
  }

  .loftForm .col-md-4 .orderTabs{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .loftForm .col-md-4 .orPayDetail{
    margin:0 !important;
    width:100% !important;
  }

  .loftForm .col-md-4 .orPayDetail .container,
  .loftForm .col-md-4 .orPayDetail .container-fluid{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .loftForm .col-md-4 .orPayDetail .row{
    --mbp-gutter-x:0px;
    --mbp-gutter-y:0px;
  }

  .loftForm .col-md-4 .orPayDetail [class*="col-"]{
    max-width:100% !important;
  }
}

@media (min-width:980px){
  .loftForm .col-md-4 .orderTabs{
    position:sticky;
    top:18px;
    align-self:start;
  }
}

.firstcont,
.orderTabs .orPayDetail,
.qt-checkout-card{
  position:relative;
  overflow:hidden;
  margin:0 0 14px;
  padding:15px;
  border-radius:var(--radius-xl);
  border:1px solid color-mix(in srgb, var(--ac) 13%, rgba(148,163,184,.34));
  background:
    radial-gradient(620px 180px at 0 0, color-mix(in srgb, var(--ac) 4%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.92));
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 1px rgba(255,255,255,.80);
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease;
}

.firstcont::before,
.orderTabs .orPayDetail::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.68);
  pointer-events:none;
}

.qt-checkout-card > *{
  position:relative;
  z-index:1;
}

.loftForm .qt-order-compact,
.loftForm .qt-orderSummaryCard{
  padding:15px;
}

/* =========================================================
   7) SECTIONS / STEP HEADS
========================================================= */

.loftForm .qt-order-compact .step,
.qt-checkout-section{
  position:relative;
  margin-bottom:14px;
}

.loftForm .qt-order-compact .step:last-child,
.qt-checkout-section:last-child{
  margin-bottom:0;
}

.loftForm .qt-order-compact .sectionTitle,
.loftForm .qt-order-compact .pay-sep{
  display:none !important;
}

.loftForm .qtbe2-stepHead,
.qt-checkout-sectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid rgba(15,23,42,.065);
  border-radius:17px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.78));
  box-shadow:0 4px 12px rgba(15,23,42,.03);
}

.loftForm .qtbe2-stepHead__l{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  column-gap:10px;
  align-items:center;
  min-width:0;
}

.loftForm .qtbe2-stepNum{
  width:30px;
  height:30px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  font-size:13px;
  font-weight:950;
  box-shadow:0 9px 18px color-mix(in srgb, var(--ac) 20%, transparent);
}

.loftForm .qtbe2-stepText{
  min-width:0;
}

.loftForm .qtbe2-stepTitle{
  margin:1px 0 4px;
  color:var(--ink);
  font-size:13px;
  font-weight:950;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.loftForm .qtbe2-stepSub{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.43;
  font-weight:720;
}

.loftForm .qt-orderSummaryCard .qtbe2-stepHead--right{
  margin-bottom:0;
}

.loftForm .qt-orderSummaryCard .qtbe2-stepHead--right .qtbe2-stepTitle{
  margin:0 0 4px;
  font-size:18px;
  line-height:1.16;
  text-transform:none;
  letter-spacing:-.025em;
}

.loftForm .qt-orderSummaryCard .qtbe2-stepHead--right .qtbe2-stepSub{
  font-size:12.5px;
  font-weight:780;
}

/* =========================================================
   8) INPUTS / FORM FIELDS
========================================================= */

.ord-control,
.ns-control,
.loftForm .iti input,
.qt-checkout-input{
  width:100%;
  min-height:46px;
  padding:10px 13px;
  border:1.35px solid rgba(148,163,184,.58);
  border-radius:14px;
  outline:none;
  background:linear-gradient(180deg, #fff, #f8fafc);
  color:var(--ink);
  font-size:13.8px;
  font-weight:720;
  box-shadow:0 1px 0 rgba(15,23,42,.035);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea.ord-control{
  min-height:104px;
  resize:vertical;
}

.ord-control:focus,
.ns-control:focus,
.loftForm .iti input:focus,
.qt-checkout-input:focus{
  border-color:var(--ac);
  background:#fff;
  box-shadow:
    0 0 0 4px var(--ac-ring),
    0 10px 22px rgba(15,23,42,.08);
}

.loftForm .ord-control::placeholder,
.loftForm .ns-control::placeholder,
.loftForm .iti input::placeholder{
  color:rgba(100,116,139,.88);
  font-size:13.4px;
  opacity:1;
}

.loftForm .iti{
  width:100%;
}

.loftForm .iti input{
  padding-left:60px;
}

.loftForm .qt-order-compact .row.g-3,
.qt-checkout-fieldGrid{
  --mbp-gutter-x:.8rem;
  --mbp-gutter-y:.8rem;
}

/* =========================================================
   9) PAYMENT METHODS / HELP / COUPON
========================================================= */

.PaymentMethod ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.PaymentMethod ul li{
  position:relative;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  margin-bottom:0;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.095);
  border-radius:17px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.88));
  color:#111827;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.PaymentMethod ul li::after,
.PaymentMethod ul li.selected::after{
  content:none !important;
  display:none !important;
}

.PaymentMethod ul li .qt-pay-pill{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, var(--ac) 32%, rgba(148,163,184,.70));
  background:#fff;
  flex:0 0 18px;
  box-shadow:inset 0 0 0 3px #fff;
}

.loftForm .qt-payCompact__text{
  font-weight:900;
  line-height:1.25;
}

.loftForm .qt-payCompact ul li.selected{
  border-color:transparent !important;
  color:#fff !important;
  background:
    radial-gradient(220px 90px at 0 0, rgba(255,255,255,.16), transparent 64%),
    linear-gradient(135deg, var(--ac), var(--ac2)) !important;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--ac) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.loftForm .qt-payCompact ul li.selected .qt-pay-pill{
  border-color:#fff;
  background:#fff;
  box-shadow:inset 0 0 0 4px var(--ac);
}

.loftForm .qt-payCompact ul li.selected .qt-pay-ico,
.loftForm .qt-payCompact ul li.selected .qt-pay-ico .qt-ic,
.loftForm .qt-payCompact ul li.selected .qt-payCompact__text{
  color:#fff !important;
}

.qt-payHelpRow{
  margin-top:12px;
}

.qt-payHelpBtn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.92));
  color:#536178;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.03);
  transition:border-color .16s ease, background .16s ease, transform .16s ease, color .16s ease;
}

.qt-payHelpBtn__icon{
  width:23px;
  height:23px;
  flex:0 0 23px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--ac) 11%, #fff);
  color:var(--ac);
  font-size:13px;
  font-weight:950;
  line-height:1;
}

.qt-payHelpBtn__text{
  font-size:14px;
  font-weight:820;
  line-height:1.35;
}

.loftForm .couponMini{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(148,163,184,.30);
  border-radius:17px;
  background:linear-gradient(145deg, #f9fbff, #ffffff);
  box-shadow:0 6px 14px rgba(15,23,42,.04);
}

.loftForm .couponMini .couponRow{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
}

.loftForm .couponMini input.ns-control{
  height:42px;
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13.5px;
}

.loftForm .couponMini .coupbtn{
  appearance:none;
  height:42px;
  padding:0 16px;
  border:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  font-size:13px;
  font-weight:950;
  line-height:1;
  box-shadow:0 8px 18px color-mix(in srgb, var(--ac) 17%, transparent);
  transition:filter .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* =========================================================
   10) SUMMARY
========================================================= */

.loftForm .qt-orderSummaryWrap{
  height:100%;
}

.qt-checkout-summaryFlow,
.loftForm .qt-summaryFlow{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.loftForm .qt-summarySection{
  min-width:0;
}

.loftForm .qt-summaryChecks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.loftForm .qt-summaryCheck,
.loftForm .qt-orderSummaryCard .orderAction,
.loftForm .qt-orderSummaryCard > .qt-summaryFlow .summaryBox{
  margin-top:0 !important;
}

.amount{
  padding:0;
  border:1px solid rgba(148,163,184,.30);
  border-radius:17px;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 8px 18px rgba(15,23,42,.05),
    inset 0 0 0 1px rgba(255,255,255,.82);
  overflow:hidden;
}

.amount ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  color:#111827;
  font-size:13.5px;
}

.amount ul li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 12px 15px;
  border-bottom:1px solid rgba(15,23,42,.055);
}

.amount ul li:last-child{
  border-bottom:0;
}

.amount ul li strong{
  font-weight:950;
}

.loftForm .qt-summaryCompact .amount{
  position:relative;
}

.loftForm .qt-summaryCompact .amount::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--ac), var(--ac2));
}

.loftForm .qt-summaryCompact .payable{
  background:color-mix(in srgb, var(--ac) 7%, #fff);
}

.loftForm .qt-summaryCompact .payable strong:first-child{
  color:var(--ink);
  font-size:14px;
}

.loftForm .qt-summaryCompact .payable strong:last-child{
  color:var(--ink);
  font-size:18px;
  letter-spacing:-.03em;
}

.loftForm #qtDiscountRow{
  background:rgba(34,197,94,.06);
}

.loftForm #qtDiscountRow span:last-child{
  font-weight:950;
}

/* =========================================================
   11) DELIVERY NOTES / QTSET
========================================================= */

.loftForm .qtset-panel{
  display:grid;
  gap:10px;
  min-width:0;
}

.loftForm .qt-checkout-summaryCard .qt-summarySection--notes{
  padding:12px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--service-ac) 15%, rgba(148,163,184,.24));
  background:
    radial-gradient(360px 140px at 0 0, color-mix(in srgb, var(--service-ac) 6%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.74));
}

.loftForm .qtset-wrap{
  margin:0;
  min-width:0;
}

.loftForm .qtset-box{
  position:relative;
  overflow:visible;
  padding:0 0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.loftForm .qtset-box::before{
  display:none;
}

.loftForm .qtset-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(15,23,42,.075);
}

.loftForm .qtset-head__main,
.loftForm .qtset-titleArea{
  min-width:0;
}

.loftForm .qtset-kicker{
  display:block;
  margin:0 0 3px;
  color:color-mix(in srgb, var(--service-ac) 72%, #475569);
  font-size:10.5px;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.loftForm .qtset-title{
  margin:0;
  padding:0;
  color:var(--ink);
  font-size:14px;
  line-height:1.22;
  font-weight:1000;
  letter-spacing:-.025em;
}

.loftForm .qtset-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  max-width:136px;
  min-height:26px;
  padding:0 9px;
  border:1px solid color-mix(in srgb, var(--service-ac) 18%, rgba(148,163,184,.28));
  border-radius:999px;
  background:color-mix(in srgb, var(--service-ac) 7%, #ffffff);
  color:color-mix(in srgb, var(--service-ac) 72%, #0f172a);
  font-size:10.5px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.loftForm .qtset-desc{
  margin:0 0 9px;
  color:#475569;
  font-size:12.8px;
  line-height:1.48;
  font-weight:720;
}

.loftForm .qtset-desc b,
.loftForm .qtset-note b,
.loftForm .qtset-step span b,
.loftForm .qtset-steps li b,
.loftForm .qtset-etaMini b,
.loftForm .qtset-eta b{
  color:var(--ink);
  font-weight:950;
}

.loftForm .qtset-note{
  position:relative;
  margin:0 0 9px;
  padding:10px 11px 10px 13px;
  border:1px solid color-mix(in srgb, var(--service-ac) 18%, rgba(148,163,184,.22));
  border-radius:13px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--service-ac) 5%, #fff), #fff);
  color:#475569;
  font-size:12.5px;
  line-height:1.45;
  font-weight:720;
}

.loftForm .qtset-note::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:999px;
  background:var(--service-ac);
  opacity:.78;
}

.loftForm .qtset-steps{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  border-top:1px solid rgba(15,23,42,.055);
}

.loftForm .qtset-step{
  display:grid;
  grid-template-columns:21px minmax(0,1fr);
  align-items:flex-start;
  gap:9px;
  padding:9px 0;
  border:0;
  border-bottom:1px solid rgba(15,23,42,.055);
  border-radius:0;
  background:transparent;
}

.loftForm .qtset-step:last-child{
  border-bottom:0;
}

.loftForm .qtset-step > i{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, var(--service-ac), color-mix(in srgb, var(--service-ac) 54%, #ffffff));
  font-style:normal;
  font-size:10.5px;
  font-weight:950;
  line-height:1;
  box-shadow:0 6px 14px color-mix(in srgb, var(--service-ac) 15%, transparent);
}

.loftForm .qtset-step > span,
.loftForm .qtset-steps li{
  color:#475569;
  font-size:12.55px;
  line-height:1.46;
  font-weight:720;
}

.loftForm .qtset-step > span{
  min-width:0;
  word-break:break-word;
}

.loftForm .qtset-steps ol,
.loftForm .qtset-steps ul{
  margin:0;
  padding:0;
}

.loftForm .qtset-step code,
.loftForm .qtset-note code,
.loftForm .qtset-desc code,
.loftForm .qtset-steps code{
  display:inline-block;
  max-width:100%;
  padding:2px 6px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:11.5px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.loftForm .qtset-etaMini,
.loftForm .qtset-eta{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:7px 9px;
  align-items:center;
  margin:9px 0 0;
  padding:9px 34px 9px 10px;
  border:1px solid color-mix(in srgb, var(--service-ac) 18%, rgba(148,163,184,.24));
  border-radius:13px;
  background:color-mix(in srgb, var(--service-ac) 5%, #ffffff);
  color:#334155;
  font-size:12px;
  line-height:1.38;
}

.loftForm .qtset-etaMini span,
.loftForm .qtset-eta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.loftForm .qtset-etaTip{
  position:absolute;
  top:8px;
  right:8px;
  width:19px;
  height:19px;
  padding:0;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.94);
  color:#64748b;
  cursor:help;
  font-size:11px;
  font-weight:950;
  line-height:1;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}

.loftForm .qtset-etaMini::before{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  width:min(320px, calc(100vw - 28px));
  padding:10px 11px;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  line-height:1.45;
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  transform:translate(-50%, 6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:12;
}

.loftForm .qtset-etaMini::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  width:10px;
  height:10px;
  background:#0f172a;
  transform:translateX(-50%) rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:11;
}

@supports selector(:has(*)){
  .loftForm .qtset-etaMini:has(.qtset-etaTip:hover)::before,
  .loftForm .qtset-etaMini:has(.qtset-etaTip:focus-visible)::before{
    opacity:1;
    transform:translate(-50%, 0);
  }

  .loftForm .qtset-etaMini:has(.qtset-etaTip:hover)::after,
  .loftForm .qtset-etaMini:has(.qtset-etaTip:focus-visible)::after{
    opacity:1;
  }
}

@supports not selector(:has(*)){
  .loftForm .qtset-etaMini:hover::before,
  .loftForm .qtset-etaMini:hover::after,
  .loftForm .qtset-etaMini:focus-within::before,
  .loftForm .qtset-etaMini:focus-within::after{
    opacity:1;
    transform:translate(-50%, 0);
  }
}

/* Fallback render support */
.loftForm .qtset-wrap > .qtset-head:not(.qtset-box .qtset-head){
  padding-bottom:10px;
  margin-bottom:10px;
}

.loftForm .qtset-wrap > .qtset-steps{
  list-style:none;
}

.loftForm .qtset-wrap > .qtset-steps li{
  position:relative;
  padding:9px 0 9px 30px;
  border-bottom:1px solid rgba(15,23,42,.055);
}

.loftForm .qtset-wrap > .qtset-steps li::before{
  content:counter(list-item);
  position:absolute;
  left:0;
  top:9px;
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, var(--service-ac), color-mix(in srgb, var(--service-ac) 54%, #ffffff));
  font-size:10.5px;
  font-weight:950;
  line-height:1;
}

/* =========================================================
   12) CHECKBOX / AGREEMENT
========================================================= */

.loftForm .qtset-agree{
  margin-top:10px;
}

.loftForm .qtset-chxarea,
.loftForm .qtset-check{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  overflow:hidden;
  padding:11px 12px;
  border:1px solid color-mix(in srgb, var(--ac) 16%, rgba(148,163,184,.18));
  border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,247,255,.98));
  box-shadow:
    0 8px 18px rgba(15,23,42,.045),
    inset 0 0 0 1px rgba(255,255,255,.78);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.loftForm .qtset-chxarea::before,
.loftForm .qtset-check::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--ac), var(--ac2));
  opacity:.85;
}

.loftForm .qtset-chxarea input[type="checkbox"],
.loftForm .qtset-check input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.loftForm .qtset-chxarea label,
.loftForm .qtset-check span{
  position:relative;
  display:block;
  padding-left:34px;
  margin:0;
  cursor:pointer;
  color:var(--ink);
  font:800 14px/1.4 Inter,system-ui;
  letter-spacing:-.1px;
}

.loftForm .qtset-chxarea label a{
  color:color-mix(in srgb, var(--ac) 72%, #0f172a);
  font-weight:950;
}

.loftForm .qtset-chxarea label::before,
.loftForm .qtset-check span::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:22px;
  height:22px;
  border:1px solid color-mix(in srgb, var(--ac) 24%, rgba(106,126,255,.34));
  border-radius:7px;
  background:linear-gradient(180deg, #fff, #f2f6ff);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 6px 12px rgba(15,23,42,.08);
}

.loftForm .qtset-chxarea label::after,
.loftForm .qtset-check span::after{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  width:10px;
  height:6px;
  border-left:3px solid var(--ac);
  border-bottom:3px solid var(--ac);
  transform:rotate(-45deg);
  opacity:0;
}

.loftForm .qtset-chxarea input[type="checkbox"]:focus + label::before,
.loftForm .qtset-check input[type="checkbox"]:focus + span::before{
  box-shadow:
    0 0 0 4px var(--ac-ring),
    inset 0 0 0 1px rgba(255,255,255,.70);
}

.loftForm .qtset-chxarea input[type="checkbox"]:checked + label::after,
.loftForm .qtset-check input[type="checkbox"]:checked + span::after{
  opacity:1;
}

.loftForm .qtset-chxarea input[type="checkbox"]:checked + label::before,
.loftForm .qtset-check input[type="checkbox"]:checked + span::before{
  border-color:color-mix(in srgb, var(--ac) 50%, rgba(106,126,255,.35));
  background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 10%, #ffffff), rgba(97,242,255,.06));
}

.loftForm .qtset-warn{
  display:none;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(239,68,68,.22);
  border-radius:12px;
  background:rgba(254,242,242,.92);
  color:#b91c1c;
  font-size:12.4px;
  font-weight:850;
  line-height:1.38;
}

.loftForm .qtset-wrap.qtset-error .qtset-warn{
  display:block;
}

.loftForm .qtset-wrap.qtset-error .qtset-chxarea,
.loftForm .qtset-wrap.qtset-error .qtset-check{
  border-color:rgba(239,68,68,.34);
  box-shadow:
    0 10px 20px rgba(239,68,68,.08),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

/* =========================================================
   13) CTA / VALIDATION
========================================================= */

.loftForm .orderAction{
  margin-top:14px !important;
}

.orActionBTN{
  appearance:none;
  width:100%;
  min-height:54px;
  margin-top:0;
  padding:14px 16px;
  border:0;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  color:#fff;
  background:
    radial-gradient(220px 90px at 0 0, rgba(255,255,255,.17), transparent 60%),
    linear-gradient(135deg, var(--ac), var(--ac2));
  font-size:14.8px;
  font-weight:1000;
  line-height:1;
  box-shadow:
    0 15px 32px color-mix(in srgb, var(--ac) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.orActionBTN:disabled{
  cursor:not-allowed;
  opacity:.64;
  background:#94a3b8 !important;
  box-shadow:none;
}

.field-hint{
  margin-top:4px !important;
  margin-bottom:6px !important;
  line-height:1.3;
}

#phoneHint,
#linkHint{
  margin-top:3px !important;
  margin-bottom:4px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#7c8197 !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

#phoneHint strong{
  color:#374151;
  font-weight:750;
}

#phoneHint em{
  color:#555;
  font-style:normal;
  font-weight:650;
}

.loftForm .ord-control.qt-invalid,
.loftForm .ns-control.qt-invalid,
.loftForm input.qt-invalid,
.loftForm textarea.qt-invalid,
#phonesel.qt-invalid{
  outline:none !important;
  border-color:rgba(239,68,68,.65) !important;
  background:linear-gradient(180deg, #fff, #fff7f7) !important;
  box-shadow:
    0 0 0 4px rgba(239,68,68,.12),
    0 10px 24px rgba(239,68,68,.10) !important;
}

.loftForm input#c2.qt-invalid + label{
  color:#991b1b;
}

.loftForm input#c2.qt-invalid + label::before{
  border-color:rgba(239,68,68,.65) !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.12) !important;
}

.qt-field-error{
  display:block;
  margin-top:8px;
  padding-left:14px;
  color:#c43d3d;
  font:750 13px/1.35 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
}

.qt-field-error::before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:8px;
  border-radius:999px;
  background:#ffeded;
  color:#d84a4a;
  font:950 11px/1 Inter,system-ui,sans-serif;
  vertical-align:middle;
  transform:translateY(-1px);
}

.loftForm .qt-inline-hint{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(239,68,68,.25);
  border-radius:12px;
  background:rgba(255,255,255,.78);
  color:#b91c1c;
  font-size:13px;
  line-height:1.35;
}

.loftForm .qt-shake{
  animation:qtShake .28s ease-in-out 1;
}

.qt-invalid + .qt-field-error{
  animation:qtFieldErrorIn .18s ease;
}

@keyframes qtFieldErrorIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

@keyframes qtShake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}

/* =========================================================
   14) MODAL CORE
   Bootstrap JS uyumlu minimal modal CSS.
========================================================= */

.modal{
  position:fixed;
  inset:0;
  z-index:1050;
  display:none;
  overflow:hidden;
  outline:0;
}

.modal.show{
  display:block;
}

.modal.fade .modal-dialog{
  transform:translateY(10px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

.modal.show .modal-dialog{
  transform:translateY(0);
  opacity:1;
}

.modal-dialog{
  position:relative;
  width:auto;
  margin:1rem;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:calc(100% - 2rem);
}

.modal-content{
  pointer-events:auto;
  width:min(560px, 100%);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.22);
}

.modal-header,
.modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.modal-footer{
  border-bottom:0;
  border-top:1px solid rgba(15,23,42,.08);
  justify-content:flex-end;
}

.modal-title{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.modal-body{
  padding:14px 16px;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1040;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .18s ease;
}

.modal-backdrop.show{
  opacity:1;
}

.btn-close{
  appearance:none;
  position:relative;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}

.btn-close::before,
.btn-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  background:rgba(15,23,42,.75);
  transform-origin:center;
}

.btn-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.btn-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.btn-close:hover{
  background:rgba(15,23,42,.06);
}

body.modal-open{
  overflow:hidden !important;
}

@media (min-width:576px){
  .modal-dialog{
    margin:1.75rem auto;
    min-height:calc(100% - 3.5rem);
  }
}

/* =========================================================
   15) CHECKOUT MODALS — TERMS / EFT / CONTRACTS
========================================================= */

:root{
  --qt-modal-ac:var(--qt-platform-default, #6a7eff);
  --qt-modal-ac2:color-mix(in srgb, var(--qt-modal-ac) 65%, #ffffff);
  --qt-modal-ring:color-mix(in srgb, var(--qt-modal-ac) 24%, transparent);
}

@supports selector(:has(*)){
  :root:has(#loftOrderForm.instagram-theme){ --qt-modal-ac:var(--qt-platform-instagram, #e1306c); }
  :root:has(#loftOrderForm.twitter-theme){ --qt-modal-ac:var(--qt-platform-twitter, #000000); }
  :root:has(#loftOrderForm.youtube-theme){ --qt-modal-ac:var(--qt-platform-youtube, #ff0000); }
  :root:has(#loftOrderForm.facebook-theme){ --qt-modal-ac:var(--qt-platform-facebook, #1877f2); }
  :root:has(#loftOrderForm.telegram-theme){ --qt-modal-ac:var(--qt-platform-telegram, #24a1de); }
  :root:has(#loftOrderForm.tiktok-theme){ --qt-modal-ac:var(--qt-platform-tiktok, #101626); }
  :root:has(#loftOrderForm.linkedin-theme){ --qt-modal-ac:var(--qt-platform-linkedin, #0a66c2); }
  :root:has(#loftOrderForm.spotify-theme){ --qt-modal-ac:var(--qt-platform-spotify, #1db954); }
  :root:has(#loftOrderForm.soundcloud-theme){ --qt-modal-ac:var(--qt-platform-soundcloud, #ff5500); }
  :root:has(#loftOrderForm.whatsapp-theme){ --qt-modal-ac:var(--qt-platform-whatsapp, #25d366); }
  :root:has(#loftOrderForm.kick-theme){ --qt-modal-ac:var(--qt-platform-kick, #16965f); }
  :root:has(#loftOrderForm.pinterest-theme){ --qt-modal-ac:var(--qt-platform-pinterest, #e60023); }
  :root:has(#loftOrderForm.twitch-theme){ --qt-modal-ac:var(--qt-platform-twitch, #9146ff); }

  :root:has(#loftOrderForm){
    --qt-modal-ac2:color-mix(in srgb, var(--qt-modal-ac) 65%, #ffffff);
    --qt-modal-ring:color-mix(in srgb, var(--qt-modal-ac) 24%, transparent);
  }
}

.modal.termsofuse{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important;

  --qt-modal-ink:#0f172a;
  --qt-modal-muted:#667198;
  --qt-modal-bd:rgba(148,163,184,.24);
  --qt-modal-bd-soft:rgba(15,23,42,.08);
  --qt-modal-radius:22px;
  --qt-modal-shadow:0 28px 80px rgba(2,6,23,.28), 0 8px 22px rgba(15,23,42,.18);
}

.modal-backdrop{
  z-index:2147483646 !important;
}

.modal-backdrop.show{
  opacity:.56;
  background:
    radial-gradient(1200px 520px at 50% 20%, rgba(15,23,42,.26), rgba(15,23,42,.68));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.modal.termsofuse .modal-dialog{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% - 24px);
  max-width:760px;
  max-height:calc(100svh - 24px) !important;
  margin:0 !important;
  pointer-events:none;
  display:flex !important;
  transform:translate(-50%, -50%) !important;
}

.modal.termsofuse .modal-content{
  position:relative;
  width:100%;
  max-height:calc(100svh - 24px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden;
  pointer-events:auto;
  border:1px solid var(--qt-modal-bd);
  border-radius:var(--qt-modal-radius);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,251,255,.92));
  box-shadow:var(--qt-modal-shadow);
}

.modal.termsofuse .modal-content::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 220px at 14% 0%, color-mix(in srgb, var(--qt-modal-ac) 10%, transparent), transparent 60%),
    radial-gradient(700px 220px at 86% 0%, color-mix(in srgb, var(--qt-modal-ac) 8%, transparent), transparent 60%);
  opacity:.9;
}

.modal.termsofuse .modal-content > *{
  position:relative;
  z-index:1;
}

.modal.termsofuse .modal-header{
  flex:0 0 auto !important;
  padding:14px 16px;
  border-bottom:1px solid var(--qt-modal-bd-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.88));
}

.modal.termsofuse .modal-title{
  max-width:calc(100% - 44px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--qt-modal-ink);
  font-size:15.6px;
  line-height:1.2;
  font-weight:1000;
  letter-spacing:-.24px;
}

.modal.termsofuse .btn-close{
  opacity:.82;
  transform:scale(.92);
}

.modal.termsofuse .btn-close:hover{
  opacity:1;
}

.modal.termsofuse .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  padding:14px 16px 18px;
  color:var(--qt-modal-ink);
  font-size:13.7px;
  line-height:1.66;
}

.modal.termsofuse .modal-body a{
  color:color-mix(in srgb, var(--qt-modal-ac) 70%, #0f172a);
  font-weight:900;
  text-decoration:none;
}

.modal.termsofuse .modal-body a:hover{
  text-decoration:underline;
}

.modal.termsofuse .modal-footer{
  flex:0 0 auto !important;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--qt-modal-bd-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.96));
}

.modal.termsofuse .modalbtn.anibut,
.modal.termsofuse .modal-footer .btn,
.modal.termsofuse .modal-footer button.btn,
.modal.termsofuse .modal-footer a.btn{
  appearance:none;
  height:44px;
  padding:0 18px;
  border:0 !important;
  border-radius:12px;
  cursor:pointer;
  color:#fff !important;
  background:linear-gradient(135deg, var(--qt-modal-ac), var(--qt-modal-ac2)) !important;
  font-size:13.6px;
  font-weight:950;
  letter-spacing:-.15px;
  box-shadow:0 12px 26px rgba(15,23,42,.16);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.modal.termsofuse .modalbtn.anibut:focus-visible,
.modal.termsofuse .modal-footer .btn:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 4px var(--qt-modal-ring),
    0 16px 30px rgba(15,23,42,.18);
}

.qt-efthelp .modal-content{
  border-color:color-mix(in srgb, var(--ac, #6a7eff) 18%, rgba(148,163,184,.34));
  border-radius:22px;
  box-shadow:0 22px 60px rgba(15,23,42,.18);
}

.qt-efthelp .modal-header{
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, #fff, #f8faff);
}

.qt-efthelp .modal-title{
  color:#0f172a;
  font-weight:950;
  letter-spacing:-.02em;
}

.qt-efthelp .modal-footer{
  border-top:1px solid rgba(148,163,184,.18);
  background:#f8faff;
}

/* Contract split */
.qt-contractSplit{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.qt-contractPane{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.20);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,251,255,.88));
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.qt-paneHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.88));
}

.qt-paneTitle{
  max-width:calc(100% - 120px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#0f172a;
  font-size:13.6px;
  line-height:1.2;
  font-weight:1000;
  letter-spacing:-.2px;
}

.qt-paneHint{
  white-space:nowrap;
  color:rgba(15,23,42,.55);
  font-size:12px;
  font-weight:800;
}

.qt-paneBody{
  max-height:30vh;
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  color:#0f172a;
  font-size:13.7px;
  line-height:1.66;
}

@media (min-width:992px){
  .qt-contractSplit{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .qt-paneBody{
    max-height:52vh;
  }
}

/* =========================================================
   16) HOVER
========================================================= */

@media (hover:hover){
  .firstcont:hover,
  .orderTabs .orPayDetail:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--ac) 26%, rgba(148,163,184,.42));
    box-shadow:
      0 16px 34px rgba(15,23,42,.095),
      inset 0 0 0 1px rgba(255,255,255,.80);
  }

  .PaymentMethod ul li:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--ac) 24%, #cbd5e1);
    background:#f9fbff;
  }

  .qt-payHelpBtn:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--ac) 22%, rgba(148,163,184,.22));
    background:linear-gradient(180deg, rgba(250,252,255,.98), rgba(244,247,251,.96));
    color:#2f4468;
  }

  .loftForm .couponMini .coupbtn:hover,
  .orActionBTN:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
  }

  .loftForm .couponMini .coupbtn:hover{
    box-shadow:0 10px 20px color-mix(in srgb, var(--ac) 18%, transparent);
  }

  .orActionBTN:hover{
    box-shadow:
      0 17px 36px color-mix(in srgb, var(--ac) 27%, transparent),
      inset 0 1px 0 rgba(255,255,255,.20);
  }

  .loftForm .qtset-chxarea:hover,
  .loftForm .qtset-check:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--ac) 24%, rgba(148,163,184,.18));
    box-shadow:
      0 10px 20px rgba(15,23,42,.075),
      inset 0 0 0 1px rgba(255,255,255,.82);
  }

  .modal.termsofuse .modalbtn.anibut:hover,
  .modal.termsofuse .modal-footer .btn:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(15,23,42,.18);
  }
}

/* =========================================================
   17) RESPONSIVE
========================================================= */

@media (max-width:768px){
  .loftForm .row.g-0 > [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  .loftForm .qt-order-cols{
    display:block;
  }

  .firstcont,
  .orderTabs .orPayDetail{
    margin:0 0 12px;
    border-radius:21px;
  }

  .firstcont::before,
  .orderTabs .orPayDetail::before{
    inset:6px;
    border-radius:16px;
  }

  .loftForm .orderTabs{
    width:100% !important;
    max-width:none !important;
    margin:0 0 14px !important;
    padding:0 !important;
  }

  .loftForm .orderTabs .orPayDetail{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
}

@media (max-width:640px){
  .loftForm{
    --qt-shell-pad:10px;
  }

  .orderArea{
    padding:6px 0 34px;
  }

  #order-hero.qt-order-hero{
    margin:10px 0 8px !important;
  }

  .qt-checkout-heroCard{
    padding:12px;
    gap:12px;
    border-radius:22px;
  }

  .qt-checkout-heroCard__icon{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .qt-checkout-heroCard__icon .qt-ic{
    width:20px;
    height:20px;
  }

  .qt-checkout-heroCard__title{
    font-size:20px;
    line-height:1.15;
  }

  .qt-checkout-heroCard__desc{
    font-size:13px;
    line-height:1.48;
  }

  .qt-checkout-stepper{
    grid-template-columns:auto minmax(12px,1fr) auto minmax(12px,1fr) auto;
    gap:6px;
    padding:9px 10px;
    border-radius:16px;
  }

  .qt-checkout-stepper__item{
    gap:6px;
  }

  .qt-checkout-stepper__item span{
    width:24px;
    height:24px;
    font-size:11px;
  }

  .qt-checkout-stepper__item strong{
    font-size:11px;
  }

  .loftForm .firstcont,
  .loftForm .qt-orderSummaryCard{
    padding:12px;
    border-radius:20px;
  }

  .loftForm .qtbe2-stepHead{
    padding:10px;
    margin-bottom:10px;
    border-radius:15px;
  }

  .loftForm .qtbe2-stepHead__l{
    grid-template-columns:28px minmax(0,1fr);
  }

  .loftForm .qtbe2-stepNum{
    width:28px;
    height:28px;
    border-radius:11px;
  }

  .loftForm .qtbe2-stepTitle{
    font-size:12.4px;
  }

  .loftForm .qtbe2-stepSub{
    font-size:12px;
  }

  .ord-control,
  .ns-control,
  .loftForm .iti input,
  .qt-checkout-input{
    min-height:44px;
    border-radius:13px;
    font-size:13.4px;
  }

  .loftForm .qt-payCompact ul li{
    min-height:50px;
    padding:11px 12px;
    border-radius:15px;
  }

  .loftForm .qt-checkout-summaryCard .qt-summarySection--notes{
    padding:11px;
    border-radius:16px;
  }

  .loftForm .qtset-title{
    font-size:13.5px;
  }

  .loftForm .qtset-desc,
  .loftForm .qtset-step > span,
  .loftForm .qtset-steps li{
    font-size:12.45px;
  }

  .loftForm .qtset-etaMini,
  .loftForm .qtset-eta{
    padding:10px 34px 10px 10px;
    font-size:12px;
  }

  .loftForm .qtset-etaMini::before{
    width:min(280px, calc(100vw - 22px));
  }

  .qt-field-error{
    margin-top:7px;
    padding-left:10px;
    font-size:12.5px;
  }

  .qt-field-error::before{
    width:16px;
    height:16px;
    margin-right:7px;
    font-size:10px;
  }

  .modal.termsofuse .modal-header{
    padding:12px;
  }

  .modal.termsofuse .modal-body{
    padding:12px 12px 16px;
    font-size:13.4px;
  }

  .modal.termsofuse .modal-footer{
    padding:10px 12px;
  }

  .qt-contractPane{
    border-radius:14px;
  }

  .qt-paneHead{
    padding:9px 10px;
  }

  .qt-paneBody{
    padding:10px;
  }
}

@media (max-width:576px){
  .loftForm .couponMini .couponRow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .loftForm .couponMini .coupbtn,
  .modal.termsofuse .modalbtn.anibut{
    width:100%;
  }

  .modal.termsofuse .modal-dialog{
    width:calc(100% - 18px);
    max-width:100%;
    max-height:calc(100svh - 18px) !important;
  }

  .modal.termsofuse .modal-title{
    font-size:14.8px;
  }
}

@media (max-width:430px){
  .qt-checkout-heroCard{
    grid-template-columns:auto minmax(0,1fr);
  }

  .qt-checkout-stepper{
    grid-template-columns:auto minmax(10px,1fr) auto minmax(10px,1fr) auto;
    gap:5px;
    padding:8px;
    border-radius:15px;
  }

  .qt-checkout-stepper__item{
    gap:5px;
    min-width:0;
  }

  .qt-checkout-stepper__item span{
    width:22px;
    height:22px;
    flex:0 0 22px;
    font-size:10px;
  }

  .qt-checkout-stepper__item strong{
    font-size:10.5px;
    letter-spacing:-.01em;
  }

  .qt-checkout-stepper__line{
    display:block;
    min-width:10px;
  }

  .loftForm .qtset-badge{
    max-width:112px;
  }
}

/* =========================================================
   18) REDUCED MOTION / IOS FIX
========================================================= */

@media (prefers-reduced-motion:reduce){
  .firstcont,
  .orderTabs .orPayDetail,
  .PaymentMethod ul li,
  .qt-payHelpBtn,
  .loftForm .couponMini .coupbtn,
  .loftForm .qtset-chxarea,
  .loftForm .qtset-check,
  .orActionBTN,
  .qt-checkout-card,
  .modal.fade .modal-dialog,
  .modal-backdrop,
  .modal.termsofuse .modalbtn.anibut,
  .modal.termsofuse .modal-footer .btn{
    transition:none !important;
  }

  .loftForm .qt-shake,
  .qt-invalid + .qt-field-error{
    animation:none !important;
  }
}

@supports (-webkit-touch-callout:none){
  @media (max-width:768px){
    .loftForm input,
    .loftForm select,
    .loftForm textarea,
    .loftForm .iti input,
    .loftForm .ord-control,
    .loftForm .ns-control,
    .loftForm .qt-checkout-input{
      font-size:16px !important;
    }
  }
}