/* =========================================================
   ORDER CREATE MODAL — CLEAN / LIGHTER / SINGLE SOURCE
   - Term of use / contract / payment help modalları
   - Ana sipariş sayfasından ayrılmış temiz sürüm
   - Buy-engine uyumlu ama daha hafif render maliyeti
   ========================================================= */

/* =========================================================
   0) ACCENT BRIDGE
   ========================================================= */
: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.default-theme){    --qt-modal-ac:var(--qt-platform-default, #6a7eff); }

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

/* =========================================================
   1) MODAL LAYER
   ========================================================= */
.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{
  position:fixed !important;
  inset:0 !important;
  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);
}

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

/* =========================================================
   2) DIALOG
   ========================================================= */
.modal.termsofuse .modal-dialog{
  margin:0 !important;
  width:calc(100% - 24px);
  max-width:760px;
  max-height:calc(100svh - 24px) !important;
  pointer-events:none;

  position:fixed !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;

  display:flex !important;
}

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

/* =========================================================
   3) PANEL
   ========================================================= */
.modal.termsofuse .modal-content{
  pointer-events:auto;
  position:relative;
  width:100%;
  max-height:calc(100svh - 24px) !important;

  display:flex !important;
  flex-direction:column !important;

  border-radius:var(--qt-modal-radius);
  overflow:hidden;
  border:1px solid var(--qt-modal-bd);
  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;
}

/* =========================================================
   4) HEADER
   ========================================================= */
.modal.termsofuse .modal-header{
  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));
  flex:0 0 auto !important;
}

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

@media (max-width:576px){
  .modal.termsofuse .modal-title{
    font-size:14.8px;
  }
}

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

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

/* =========================================================
   5) BODY
   ========================================================= */
.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;
}

/* =========================================================
   6) FOOTER
   ========================================================= */
.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));
}

@media (max-width:576px){
  .modal.termsofuse .modal-footer{
    padding:10px 12px;
  }
}

/* =========================================================
   7) BUTTON
   ========================================================= */
.modal.termsofuse .modalbtn.anibut,
.modal.termsofuse .modal-footer .btn,
.modal.termsofuse .modal-footer button.btn,
.modal.termsofuse .modal-footer a.btn{
  appearance:none;
  border:0 !important;
  cursor:pointer;
  height:44px;
  padding:0 18px;
  border-radius:12px;

  font-size:13.6px;
  font-weight:950;
  letter-spacing:-.15px;

  color:#fff !important;
  background:linear-gradient(135deg, var(--qt-modal-ac), var(--qt-modal-ac2)) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.16);

  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

@media (max-width:576px){
  .modal.termsofuse .modalbtn.anibut{
    width:100%;
  }
}

@media (hover:hover){
  .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);
  }
}

.modal.termsofuse .modalbtn.anibut:active,
.modal.termsofuse .modal-footer .btn:active{
  filter:brightness(.98);
  transform:translateY(0);
}

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

/* =========================================================
   8) CONTRACT SPLIT PANE
   ========================================================= */
.qt-contractSplit{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

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

.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);
  white-space:nowrap;
  overflow:hidden;
  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{
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  max-height:30vh;
  color:#0f172a;
  font-size:13.7px;
  line-height:1.66;
}

@media (min-width:992px){
  .qt-paneBody{
    max-height:52vh;
  }
}

/* =========================================================
   9) SMALL DEVICES
   ========================================================= */
@media (max-width:640px){
  .modal.termsofuse .modal-header{
    padding:12px 12px;
  }

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

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

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

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

/* =========================================================
   10) REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .modal.termsofuse .modal-content,
  .modal.termsofuse .modalbtn.anibut,
  .modal.termsofuse .modal-footer .btn{
    transition:none !important;
  }
}