/* =========================================================
   ORDER CREATE — CLEAN / LIGHTER / SINGLE SOURCE
   - TR sipariş oluşturma sayfası
   - Hero + form + summary
   - Modal/sözleşme css bu dosyada YOK
   - Kategori / platform tarafına daha yakın, daha hafif yapı
   ========================================================= */

/* =========================================================
   0) ROOT / THEME / PAGE
   ========================================================= */
.loftForm{
  --ink:#0f172a;
  --muted:#667198;
  --outer:8px;

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

  --qt-ic:22px;
  --qt-ic-hero:22px;
  --qt-ic-pay:18px;
  --qt-ic-sum:18px;
  --qt-ic-btn:16px;

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

  --qt-hero-icon-box:48px;
  --qt-card-radius:24px;
  --qt-card-radius-sm:16px;
  --qt-border:rgba(15,23,42,.10);

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

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

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

.loftForm header,
.loftForm .site-header,
.loftForm .qp-header{
  margin-bottom:0 !important;
}

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

.loftForm .page-wrap > #order-hero:first-child{
  margin-top:0 !important;
}

.orderArea{
  min-height:100vh;
  padding:0 0 40px;
  background:
    radial-gradient(900px 320px at 50% -140px, rgba(106,126,255,.12), transparent 60%),
    radial-gradient(640px 220px at 18% 0%, rgba(159,174,255,.10), transparent 55%),
    linear-gradient(180deg, #f5f7ff 0%, #ffffff 70%);
}

.orderArea .container{
  background:transparent !important;
  max-width:var(--qt-shell-max) !important;
  padding-left:var(--qt-shell-pad) !important;
  padding-right:var(--qt-shell-pad) !important;
}

/* =========================================================
   1) SVG ICONS
   ========================================================= */
.loftForm .qt-ic{
  width:var(--qt-ic);
  height:var(--qt-ic);
  display:inline-block;
  flex:0 0 auto;
  color:var(--muted);
}

.loftForm .qt-ic--hero{
  width:var(--qt-ic-hero);
  height:var(--qt-ic-hero);
  color:currentColor;
}

.loftForm .qt-ic--pay{
  width:var(--qt-ic-pay);
  height:var(--qt-ic-pay);
  color:currentColor;
}

.loftForm .qt-ic--sum{
  width:var(--qt-ic-sum);
  height:var(--qt-ic-sum);
  color:var(--ac);
}

.loftForm .orActionBTN .qt-ic--btn{
  width:var(--qt-ic-btn);
  height:var(--qt-ic-btn);
  color:currentColor;
}

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

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

.loftForm .qt-summaryLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:6px;
}

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

.loftForm .orActionIco .qt-ic{
  width:16px;
  height:16px;
  display:block;
  color:currentColor;
}

/* =========================================================
   2) HERO — CATEGORY / PLATFORM STYLE LIGHT
   ========================================================= */
#order-hero.qt-order-hero{
  position:relative;
  width:100%;
  margin:12px 0 8px !important;
  padding:0 !important;
  color:var(--ink);
}

#order-hero.qt-order-hero .qt-order-hero-shell{
  width:var(--qt-shell-inner);
  max-width:100%;
  margin:0 auto;
}

#order-hero.qt-order-hero .qtbe2-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid var(--qt-border);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,253,.86));
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}

#order-hero.qt-order-hero .qtbe2-hero__icon{
  width:var(--qt-hero-icon-box);
  height:var(--qt-hero-icon-box);
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:var(--ac);
  box-shadow:0 8px 18px rgba(2,6,23,.12);
}

#order-hero.qt-order-hero .qtbe2-hero__icon .qt-ic{
  width:22px;
  height:22px;
  display:block;
  color:currentColor;
}

#order-hero.qt-order-hero .qtbe2-hero__icon .qt-ic *{
  vector-effect:non-scaling-stroke;
}

#order-hero.qt-order-hero .qtbe2-hero__icon .qt-ic [fill]:not([fill="none"]){
  fill:currentColor;
}

#order-hero.qt-order-hero .qtbe2-hero__icon .qt-ic [stroke]{
  stroke:currentColor;
}

#order-hero.qt-order-hero .qtbe2-hero__text{
  min-width:0;
  flex:1 1 auto;
}

#order-hero.qt-order-hero .qtbe2-hero__title{
  margin:0 0 4px;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-0.02em;
  font-weight:950;
  color:var(--ink);
}

#order-hero.qt-order-hero .qtbe2-hero__desc{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.55;
  max-width:72ch;
}

/* =========================================================
   3) MAIN GRID
   ========================================================= */
.loftForm .qt-order-cols{
  width:var(--qt-shell-inner);
  max-width:var(--qt-shell-max);
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:769px){
  .loftForm .qt-order-cols{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.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{
    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{
    --bs-gutter-x:0px;
  }

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

  .loftForm .qt-orderSummaryWrap,
  .loftForm .qt-orderSummaryCard{
    margin-top:0 !important;
  }
}

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

  .loftForm .qt-orderSummaryCard{
    position:static;
  }
}

/* =========================================================
   4) SURFACE CARDS
   ========================================================= */
.firstcont,
.orderTabs .orPayDetail{
  position:relative;
  margin:0 0 14px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,251,255,.92));
  border-radius:var(--qt-card-radius);
  border:1px solid color-mix(in srgb, var(--ac) 18%, rgba(148,163,184,.42));
  box-shadow:
    0 10px 26px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(255,255,255,.82);
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease;
}

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

.loftForm .qt-order-compact{
  padding:14px;
}

.loftForm .qt-orderSummaryCard{
  padding:14px;
  border-radius:var(--qt-card-radius);
}

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

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

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

/* =========================================================
   5) STEP HEADS
   ========================================================= */
.loftForm .qtbe2-stepHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,253,.84));
}

.loftForm .qtbe2-stepHead__l{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}

.loftForm .qtbe2-stepNum{
  width:28px;
  height:28px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:950;
  color:#fff;
  background:var(--ac);
  box-shadow:0 8px 18px rgba(2,6,23,.14);
}

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

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

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

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

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

/* =========================================================
   6) INPUTS
   ========================================================= */
.ord-control,
.loftForm .iti input{
  width:100%;
  min-height:44px;
  padding:10px 13px;
  border-radius:14px;
  border:1.4px solid rgba(148,163,184,.68);
  background:linear-gradient(180deg, #fff, #f8fafc);
  font-size:13.8px;
  color:var(--ink);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

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

.ord-control:focus,
.loftForm .iti input:focus{
  outline:none;
  border-color:var(--ac);
  background:#fff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ac) 20%, transparent),
    0 10px 22px rgba(15,23,42,.10);
}

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

.loftForm .iti{
  width:100%;
}

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

.loftForm .qt-order-compact .row.g-3{
  --bs-gutter-x:.8rem;
  --bs-gutter-y:.8rem;
}

/* =========================================================
   7) PAYMENT METHODS
   ========================================================= */
.PaymentMethod ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

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

.loftForm .qt-payCompact ul li .qt-pay-ico .qt-ic{
  color:var(--ac);
  transition:color .16s ease;
}

.loftForm .qt-payCompact ul li.selected{
  border-color:transparent !important;
  color:#fff !important;
  background:var(--ac) !important;
  box-shadow:0 10px 24px rgba(2,6,23,.14);
}

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

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

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

/* =========================================================
   8) PAYMENT HELP
   ========================================================= */
.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,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
  color:#536178;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, color .16s ease;
  box-shadow:none;
}

.qt-payHelpBtn__icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(106,126,255,.10);
  color:#6a7eff;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

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

.qt-payCompact + .qt-payHelpRow .qt-payHelpBtn{
  opacity:.96;
}

/* =========================================================
   9) COUPON
   ========================================================= */
.loftForm .couponMini{
  margin-top:10px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.34);
  background:linear-gradient(145deg, #f9fbff, #ffffff);
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}

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

.loftForm .couponMini input.ns-control{
  width:100%;
  height:42px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.55);
  background:linear-gradient(180deg, #fff, #f8fafc);
  font-size:13.5px;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.loftForm .couponMini input.ns-control::placeholder{
  color:rgba(71,85,105,.85);
}

.loftForm .couponMini input.ns-control:focus{
  background:#fff;
  border-color:var(--ac);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent);
}

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

/* =========================================================
   10) SUMMARY
   ========================================================= */
.loftForm .qt-orderSummaryWrap{
  height:100%;
}

.amount{
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(145deg, #f9fbff, #ffffff);
  border:1px solid #e2e8f0;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}

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

.amount ul li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

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

.loftForm .qt-summaryCompact{
  margin-top:12px;
}

.loftForm .qt-summaryCompact .amount{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.36);
  background:rgba(255,255,255,.90);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

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

.loftForm .qt-summaryCompact .amount ul{
  gap:4px;
  padding:2px 0 0;
}

.loftForm .qt-summaryCompact .amount ul li{
  padding:10px 10px 10px 14px;
  border-bottom:1px solid rgba(15,23,42,.06);
}

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

.loftForm .qt-summaryCompact .payable{
  border-radius:12px;
  background:color-mix(in srgb, var(--ac) 8%, #fff);
}

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

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

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

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

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

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

.loftForm .qt-summaryCheck{
  margin-top:0 !important;
}

.loftForm .qt-orderSummaryCard > .qt-summaryFlow .qtset-wrap{
  margin:0;
}

.loftForm .qt-orderSummaryCard > .qt-summaryFlow .qtset-agree{
  margin-top:0;
}

.loftForm .qt-orderSummaryCard > .qt-summaryFlow .summaryBox{
  margin-top:0;
}

.loftForm .qt-orderSummaryCard .orderAction{
  margin-top:0 !important;
}

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

.loftForm .qt-orderSummaryCard .qt-summaryCompact .amount{
  box-shadow:
    0 8px 18px rgba(15,23,42,.06),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

/* =========================================================
   11) INLINE HELP / ERROR
   ========================================================= */
.field-hint{
  margin-top:4px !important;
  margin-bottom:6px !important;
  line-height:1.3;
}

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

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

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

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

.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;
}

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

.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;
}

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

/* =========================================================
   12) CHECKBOX / AGREEMENT / QTSET
   ========================================================= */
.loftForm .otherDetail{
  margin-top:12px;
}

.loftForm .qtset-wrap{
  margin:12px 0 14px;
}

.loftForm .qtset-box{
  position:relative;
  overflow:hidden;
  padding:13px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--ac) 18%, rgba(148,163,184,.30));
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.96));
  box-shadow:
    0 8px 18px rgba(15,23,42,.06),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

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

.loftForm .qtset-head{
  position:relative;
  margin:0 0 10px;
  padding:0;
}

.loftForm .qtset-title{
  margin:0;
  padding:0 0 0 2px;
  font-size:14px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--ink);
}

.loftForm .qtset-desc{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.55;
  color:#475569;
}

.loftForm .qtset-desc b,
.loftForm .qtset-note b,
.loftForm .qtset-step span b{
  color:var(--ink);
  font-weight:900;
}

.loftForm .qtset-note{
  margin:0 0 10px;
  padding:10px 11px;
  border-radius:13px;
  border:1px dashed color-mix(in srgb, var(--ac) 26%, rgba(15,23,42,.14));
  background:color-mix(in srgb, var(--ac) 6%, #ffffff);
  color:#475569;
  font-size:12.7px;
  line-height:1.5;
}

.loftForm .qtset-steps{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
}

.loftForm .qtset-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 11px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,255,.94));
}

.loftForm .qtset-step > i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 22px;
  margin-top:1px;
  border-radius:999px;
  font-style:normal;
  font-size:11.5px;
  font-weight:950;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

.loftForm .qtset-step > span{
  min-width:0;
  font-size:12.9px;
  line-height:1.5;
  color:#475569;
  word-break:break-word;
}

.loftForm .qtset-step code,
.loftForm .qtset-note code,
.loftForm .qtset-desc code{
  display:inline-block;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.26);
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

.loftForm .qtset-etaMini{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  margin:10px 0 0;
  padding:10px 36px 10px 11px;
  border-radius:13px;
  border:1px solid color-mix(in srgb, var(--ac) 20%, rgba(148,163,184,.22));
  background:color-mix(in srgb, var(--ac) 6%, #ffffff);
  color:#334155;
  font-size:12.3px;
  line-height:1.4;
}

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

.loftForm .qtset-etaMini b{
  color:var(--ink);
  font-weight:900;
}

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

.loftForm .qtset-etaTip .qt-ic{
  width:13px;
  height:13px;
  color:currentColor;
}

.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);
  }
}

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

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

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

.loftForm .qtset-wrap.qtset-error .qtset-box{
  border-color:rgba(239,68,68,.30);
  box-shadow:
    0 12px 28px rgba(239,68,68,.08),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

.loftForm .qtset-wrap.qtset-error .qtset-chxarea{
  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);
}

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

.loftForm .qtset-chxarea::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"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

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

.loftForm .qtset-chxarea label a{
  font-weight:900;
  text-decoration:none;
  color:color-mix(in srgb, var(--ac) 70%, #0f172a);
}

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

.loftForm .qtset-chxarea label::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{
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.7);
}

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

.loftForm .qtset-chxarea input[type="checkbox"]:checked + label::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-chxarea.qt-payhelp-chx{
  padding:12px 14px;
}

.loftForm .qtset-chxarea.qt-payhelp-chx label{
  padding-left:0;
}

.loftForm .qtset-chxarea.qt-payhelp-chx label::before,
.loftForm .qtset-chxarea.qt-payhelp-chx label::after{
  display:none;
}

.loftForm .qtset-chxarea.qt-payhelp-chx .qt-ic{
  color:var(--ac);
  margin-top:2px;
}

/* =========================================================
   13) CTA
   ========================================================= */
.loftForm .orderAction{
  margin-top:14px !important;
}

.orActionBTN{
  width:100%;
  min-height:50px;
  margin-top:12px;
  padding:13px 16px;
  appearance:none;
  border:0;
  border-radius:16px;
  cursor:pointer;
  font-weight:900;
  font-size:14.5px;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow:0 12px 28px rgba(2,6,23,.16);
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* =========================================================
   14) HOVER ONLY
   ========================================================= */
@media (hover:hover){
  .firstcont:hover,
  .orderTabs .orPayDetail:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--ac) 30%, rgba(148,163,184,.42));
    box-shadow:
      0 14px 30px rgba(15,23,42,.10),
      inset 0 0 0 1px rgba(255,255,255,.82);
  }

  .PaymentMethod ul li:hover{
    transform:translateY(-1px);
    border-color:#cbd5e1;
    background:#f9fbff;
  }

  .qt-payHelpBtn:hover{
    border-color:rgba(106,126,255,.22);
    background:linear-gradient(180deg, rgba(250,252,255,.98), rgba(244,247,251,.96));
    color:#2f4468;
    transform:translateY(-1px);
  }

  .loftForm .couponMini .coupbtn:hover{
    filter:brightness(1.05);
    box-shadow:0 10px 20px rgba(15,23,42,.12);
    transform:translateY(-1px);
  }

  .loftForm .qtset-chxarea: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,.08),
      inset 0 0 0 1px rgba(255,255,255,.82);
  }

  .orActionBTN:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(15,23,42,.18);
  }
}

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

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

  .firstcont::before,
  .orderTabs .orPayDetail::before{
    inset:6px;
  }

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

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

@media (max-width:640px){
  .loftForm{
    --outer:6px;
    --qt-shell-pad:10px;
    --qt-hero-icon-box:42px;
  }

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

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

  #order-hero.qt-order-hero .qt-order-hero-shell{
    width:var(--qt-shell-inner);
  }

  #order-hero.qt-order-hero .qtbe2-hero{
    padding:12px;
    gap:12px;
    border-radius:22px;
  }

  #order-hero.qt-order-hero .qtbe2-hero__icon{
    width:42px;
    height:42px;
    border-radius:14px;
  }

  #order-hero.qt-order-hero .qtbe2-hero__icon .qt-ic{
    width:20px;
    height:20px;
  }

  #order-hero.qt-order-hero .qtbe2-hero__title{
    font-size:20px;
  }

  #order-hero.qt-order-hero .qtbe2-hero__desc{
    font-size:13px;
    line-height:1.5;
  }

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

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

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

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

  .loftForm .qt-payCompact ul li{
    padding:11px 12px;
    border-radius:14px;
  }

  .loftForm .qtset-wrap{
    margin:10px 0 12px;
  }

  .loftForm .qtset-box{
    padding:12px;
    border-radius:16px;
  }

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

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

  .loftForm .qtset-step{
    padding:9px 10px;
    border-radius:13px;
  }

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

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

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

/* =========================================================
   16) REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .firstcont,
  .orderTabs .orPayDetail,
  .PaymentMethod ul li,
  .qt-payHelpBtn,
  .loftForm .couponMini .coupbtn,
  .loftForm .qtset-chxarea,
  .orActionBTN,
  #order-hero.qt-order-hero .qtbe2-hero{
    transition:none !important;
  }

  .loftForm .qt-shake{
    animation:none !important;
  }
}