/* CLOTHINK DTF LANDING — REDESIGN v1.2
   Full presentation layer. Backend/upload/calculation logic stays untouched. */
.clothink-dtf-redesign,.clothink-dtf-redesign *{box-sizing:border-box}
.clothink-dtf-redesign{--ink:#0b1220;--ink2:#111c31;--paper:#f4f4f1;--white:#fff;--muted:#687385;--line:#dedfdc;--red:#e1202d;--green:#10b65c;--yellow:#ffc928;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;padding-bottom:0;overflow:hidden}
.clothink-dtf-redesign .container{max-width:1180px}

/* HERO */
.dtf-rd-hero{position:relative;background:#0b1220;color:#fff;padding:76px 0 70px;overflow:hidden}
.dtf-rd-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,201,40,.13),transparent 31%),linear-gradient(115deg,transparent 0 58%,rgba(255,255,255,.035) 58% 59%,transparent 59% 100%);pointer-events:none}
.dtf-rd-hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.dtf-rd-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:18px}
.dtf-rd-eyebrow span{width:32px;height:3px;background:var(--yellow);display:inline-block}
.dtf-rd-hero h1{font-size:56px;line-height:1.02;letter-spacing:-2px;color:#fff;margin:0 0 20px;font-weight:900;max-width:760px}
.dtf-rd-lead{font-size:19px;line-height:1.65;color:#cbd2de;max-width:690px;margin:0 0 26px}
.dtf-rd-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.dtf-rd-badges span{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.055);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:800;color:#eef2f7}
.dtf-rd-badges .dtf-rd-badge-accent{border-color:rgba(255,201,40,.55);color:#ffe071;background:rgba(255,201,40,.08)}
.dtf-rd-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.dtf-rd-primary,.dtf-rd-secondary{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:8px;text-decoration:none!important;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.7px;transition:.18s ease}
.dtf-rd-primary{background:var(--red);color:#fff!important;box-shadow:0 10px 28px rgba(225,32,45,.25)}
.dtf-rd-primary:hover{transform:translateY(-2px);background:#f02936}
.dtf-rd-secondary{border:1px solid rgba(255,255,255,.28);color:#fff!important;background:transparent}
.dtf-rd-secondary:hover{background:#fff;color:var(--ink)!important}

/* abstract DTF visual */
.dtf-rd-visual{position:relative;height:330px;min-width:0}
.dtf-rd-sheet{position:absolute;right:36px;top:0;width:350px;height:260px;background:#f7f5ee;border-radius:12px;transform:rotate(-4deg);box-shadow:0 30px 55px rgba(0,0,0,.38);padding:18px;overflow:hidden}
.dtf-rd-sheet:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.38),transparent 38%);pointer-events:none}
.dtf-rd-sheet-tag{position:absolute;right:15px;top:14px;font-size:9px;letter-spacing:1.6px;font-weight:900;color:#77808b}
.dtf-rd-art{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:1000;line-height:.82;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.art-a{left:22px;top:32px;width:135px;height:105px;border-radius:50% 40% 45% 35%;background:linear-gradient(145deg,#ff2a40,#ff9c1a);font-size:30px;transform:rotate(-8deg)}
.art-b{right:25px;top:65px;width:145px;height:132px;border-radius:38% 62% 50% 45%;background:linear-gradient(145deg,#0798ff,#8b35ff 55%,#ff2899);font-size:27px;transform:rotate(7deg)}
.art-c{left:65px;bottom:20px;width:118px;height:78px;border-radius:14px;background:#111c31;font-size:34px;transform:rotate(3deg)}
.dtf-rd-roll{position:absolute;right:-45px;bottom:7px;width:430px;height:68px;border-radius:0 0 70px 70px;background:linear-gradient(#f4f1e9,#d9d7d0);transform:rotate(-4deg);box-shadow:0 25px 36px rgba(0,0,0,.38)}
.dtf-rd-roll:after{content:"";position:absolute;right:-16px;top:5px;width:58px;height:58px;border-radius:50%;background:#c7c4bb;border:10px solid #ece9e1}
.dtf-rd-machine-label{position:absolute;left:15px;bottom:18px;border:2px solid var(--yellow);color:var(--yellow);padding:9px 13px;font-weight:1000;font-size:13px;letter-spacing:1.4px;transform:rotate(-4deg)}

/* PROCESS STRIP */
.dtf-rd-strip{background:#fff;border-bottom:1px solid #e4e5e2}
.dtf-rd-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.dtf-rd-strip-grid>div{display:flex;align-items:center;gap:12px;min-height:88px;padding:12px 22px;border-right:1px solid #e6e6e3}
.dtf-rd-strip-grid>div:last-child{border-right:0}
.dtf-rd-strip strong{font-size:24px;color:var(--red);font-weight:1000}
.dtf-rd-strip span{font-size:13px;font-weight:900;text-transform:uppercase;line-height:1.25}

/* HOW */
.dtf-rd-how{padding:72px 0 58px;background:#f4f4f1}
.dtf-rd-section-head,.dtf-rd-order-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:34px}
.dtf-rd-label{display:block;color:var(--red);font-size:11px;letter-spacing:1.8px;font-weight:1000;margin-bottom:8px}
.dtf-rd-section-head h2,.dtf-rd-order-head h2,.dtf-rd-info h2{font-size:34px;line-height:1.08;letter-spacing:-.8px;margin:0;color:var(--ink);font-weight:1000}
.dtf-rd-section-head p,.dtf-rd-order-head p{margin:0;color:var(--muted);line-height:1.65;font-size:15px}
.dtf-rd-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dtf-rd-feature-grid article{background:#fff;border:1px solid #e1e2df;padding:24px 22px 22px;min-height:210px;position:relative;transition:.18s ease}
.dtf-rd-feature-grid article:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(12,18,31,.08)}
.dtf-rd-feature-icon{width:50px;height:50px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:1000;font-size:12px;letter-spacing:.5px;margin-bottom:25px}
.dtf-rd-feature-grid h3{margin:0 0 9px;font-size:17px;font-weight:1000}
.dtf-rd-feature-grid p{margin:0;color:var(--muted);line-height:1.55;font-size:13px}

/* ORDER */
.dtf-rd-order{background:#fff;padding:72px 0 54px;border-top:1px solid #e2e2df}
.dtf-rd-app-shell{border:1px solid #dfe1e4;background:#f8f9fa;padding:18px;border-radius:14px;box-shadow:0 20px 55px rgba(11,18,32,.08)}

/* FULL SELF-CONTAINED UPLOADER DESIGN */
.dtf-rd-app-shell .clothink-dtf{max-width:none;margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.dtf-rd-app-shell .clothink-dtf *{box-sizing:border-box}
.dtf-rd-app-shell .dtf-topbar{background:var(--ink);color:#fff;border-radius:8px;padding:14px 18px;text-align:left;border:0;border-left:5px solid var(--red);font-size:12px;letter-spacing:1.4px;font-weight:900}
.dtf-rd-app-shell .dtf-intro{background:transparent;border:0;border-radius:0;box-shadow:none;text-align:left;padding:15px 0 7px;margin:0;color:#505a68;font-size:14px;font-weight:700}
.dtf-rd-app-shell .dtf-tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 20px}
.dtf-rd-app-shell .dtf-tier{border-radius:8px;border:1px solid #dcdeda;padding:15px 8px;background:#fff;box-shadow:none;text-align:center;transition:.18s ease}
.dtf-rd-app-shell .dtf-tier.active{border:2px solid var(--red);box-shadow:0 0 0 3px rgba(225,32,45,.08)}
.dtf-rd-app-shell .dtf-tier-name{color:#9a9ea5;font-size:10px;font-weight:900;letter-spacing:1px}
.dtf-rd-app-shell .dtf-tier-range{color:#636c78;margin:8px 0 4px;font-size:13px}
.dtf-rd-app-shell .dtf-tier-price{font-size:18px;color:var(--ink);font-weight:900}
.dtf-rd-app-shell .dtf-upload-zone{position:relative;border:2px dashed #b8bcc2;border-radius:10px;background:#fff;padding:58px 20px;text-align:center;cursor:pointer;transition:.18s ease}
.dtf-rd-app-shell .dtf-upload-zone:hover,.dtf-rd-app-shell .dtf-upload-zone.dragover{border-color:var(--red);background:#fff8f8}
.dtf-rd-app-shell .dtf-file-input{display:none!important}
.dtf-rd-app-shell .dtf-upload-icon{font-size:0;opacity:1;margin-bottom:14px}
.dtf-rd-app-shell .dtf-upload-icon:before{content:"+";display:inline-flex;width:50px;height:50px;border-radius:50%;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:30px;font-weight:400;line-height:1}
.dtf-rd-app-shell .dtf-upload-title{font-size:21px;font-weight:1000;color:var(--ink);margin-top:8px}
.dtf-rd-app-shell .dtf-upload-hint{font-size:14px;color:#646e7a;margin-top:6px}
.dtf-rd-app-shell .dtf-upload-subhint{color:#9a9fa7;text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.9px;margin-top:7px}
.dtf-rd-app-shell .dtf-message{padding:12px 14px;border-radius:6px;margin:12px 0;font-weight:700}
.dtf-rd-app-shell .dtf-message.error{background:#ffe7e7;color:#9e2f2f}
.dtf-rd-app-shell .dtf-message.ok{background:#e5faeb;color:#25753c}
.dtf-rd-app-shell .dtf-files{margin-top:14px}
.dtf-rd-app-shell .dtf-empty{padding:22px;color:#999fa8;font-size:13px;text-align:center}
.dtf-rd-app-shell .dtf-file-card{border:1px solid #dedfdc;border-radius:9px;padding:15px;margin-bottom:14px;box-shadow:none;background:#fff}
.dtf-rd-app-shell .dtf-file-head{display:flex;align-items:center;gap:12px}
.dtf-rd-app-shell .dtf-file-index{width:28px;height:28px;background:var(--red);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.dtf-rd-app-shell .dtf-thumb{width:52px;height:52px;object-fit:contain;border:1px solid #dde1e5;border-radius:5px;background:#f8f9fa;flex:0 0 auto}
.dtf-rd-app-shell .dtf-file-meta{flex:1;min-width:0}
.dtf-rd-app-shell .dtf-file-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtf-rd-app-shell .dtf-file-sub{font-size:12px;color:#6d7480;margin-top:4px}
.dtf-rd-app-shell .dtf-head-actions{display:flex;gap:7px;flex-wrap:wrap}
.dtf-rd-app-shell .dtf-mini-btn{border:1px solid #dce0e4;border-radius:5px;background:#f3f3f1;color:#333;padding:8px 10px;font-weight:700;cursor:pointer}
.dtf-rd-app-shell .dtf-mini-btn.danger{color:#b52c35;background:#fff4f4}
.dtf-rd-app-shell .dtf-crop-warning,.dtf-rd-app-shell .dtf-crop-success{margin-top:12px;padding:12px 14px;border-radius:6px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.dtf-rd-app-shell .dtf-crop-warning{background:#fff5d8;border:1px solid #f0bf3d;color:#8b5c00}
.dtf-rd-app-shell .dtf-crop-success{background:#effcf2;border:1px solid #88d69a;color:#237d3d}
.dtf-rd-app-shell .dtf-item{margin-top:12px;padding:14px;border:1px solid #dde1e5;border-radius:7px;background:#f6f7f7}
.dtf-rd-app-shell .dtf-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dtf-rd-app-shell .dtf-item-grid-lock{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.dtf-rd-app-shell .dtf-field label{display:block;font-size:10px;font-weight:900;color:#56606d;text-transform:uppercase;margin-bottom:5px}
.dtf-rd-app-shell .dtf-field input{width:100%;border:1px solid #cfd4d9;border-radius:5px;height:44px;padding:0 10px;background:#fff;text-align:center;font-weight:900;color:var(--ink)}
.dtf-rd-app-shell .dtf-ratio-lock{align-self:center;white-space:nowrap}
.dtf-rd-app-shell .dtf-qty-control{display:flex;align-items:center;gap:6px}
.dtf-rd-app-shell .dtf-qty-control button{height:44px;min-width:38px;border:1px solid #cfd4d9;background:#fff;border-radius:5px;font-weight:900;cursor:pointer}
.dtf-rd-app-shell .dtf-qty-control input{flex:1;min-width:60px}
.dtf-rd-app-shell .dtf-item-foot{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dtf-rd-app-shell .dtf-item-info{font-size:12px;color:#5d6672}
.dtf-rd-app-shell .dtf-quality{display:inline-block;margin-left:7px;padding:4px 8px;border-radius:999px;font-weight:900}
.dtf-rd-app-shell .dtf-quality.good{background:#dcf8e4;color:#1e7f40}.dtf-rd-app-shell .dtf-quality.warn{background:#fff1c7;color:#926500}.dtf-rd-app-shell .dtf-quality.bad{background:#ffe0e0;color:#a93232}
.dtf-rd-app-shell .dtf-line-total{background:var(--ink);color:#fff;border-radius:5px;padding:9px 13px;font-size:16px;font-weight:900}
.dtf-rd-app-shell .dtf-duplicate{margin-top:12px;width:100%;border:1px dashed #aeb4bc;background:#fff;color:var(--ink);border-radius:6px;padding:11px;font-weight:900;cursor:pointer}
.dtf-rd-app-shell .dtf-actions-row{display:grid;grid-template-columns:1fr 180px;gap:9px;margin:18px 0}
.dtf-rd-app-shell .dtf-btn{border:0;border-radius:6px;padding:15px;font-weight:900;color:#fff;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.4px}
.dtf-rd-app-shell .dtf-btn-primary{background:var(--ink)}
.dtf-rd-app-shell .dtf-btn-primary:hover{background:#202c40}
.dtf-rd-app-shell .dtf-btn-danger{background:#f0f0ee;color:#6b7078;border:1px solid #d8d9d5}
.dtf-rd-app-shell .dtf-note-box{border:1px solid #dbe0e5;border-radius:7px;padding:16px;margin-top:15px;background:#fff}
.dtf-rd-app-shell .dtf-note-box label{display:block;font-weight:900;margin-bottom:10px}
.dtf-rd-app-shell .dtf-note-box textarea{width:100%;border:1px solid #cfd4da;border-radius:5px;padding:12px;resize:vertical}
/* Declaration removed from the service. Hide legacy markup as a safety fallback. */
.dtf-rd-app-shell .dtf-declaration{display:none!important}
.dtf-rd-app-shell .dtf-sticky-spacer{height:105px}
.dtf-rd-app-shell .dtf-summary-bar{position:sticky;bottom:12px;z-index:50;display:grid;grid-template-columns:120px 70px 1fr 260px;gap:15px;align-items:center;background:var(--ink);color:#fff;border-radius:9px;padding:13px 16px;box-shadow:0 12px 32px rgba(0,0,0,.22)}
.dtf-rd-app-shell .dtf-summary-stat small{display:block;color:#9fb0c5;text-transform:uppercase;font-size:10px;font-weight:900}
.dtf-rd-app-shell .dtf-summary-stat strong{display:block;color:#fff;font-size:23px;margin-top:3px}
.dtf-rd-app-shell .dtf-summary-progress{text-align:center;color:#fff;font-size:12px;font-weight:900}
.dtf-rd-app-shell .dtf-progress{height:7px;background:#2a3445;border-radius:20px;margin-top:8px;overflow:hidden}
.dtf-rd-app-shell .dtf-progress i{display:block;height:100%;width:0;background:var(--yellow)}
.dtf-rd-app-shell .dtf-cart-button{border:0;border-radius:6px;background:var(--red);color:#fff;padding:17px 18px;font-size:13px;font-weight:900;cursor:pointer;box-shadow:none;text-transform:uppercase;letter-spacing:.4px}
.dtf-rd-app-shell .dtf-cart-button:hover{background:#f02b37}
.dtf-rd-app-shell .dtf-busy{opacity:.55;pointer-events:none}

/* INFO */
.dtf-rd-info{background:#0b1220;color:#fff;padding:64px 0 72px}
.dtf-rd-info-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.dtf-rd-requirements,.dtf-rd-tech{border:1px solid rgba(255,255,255,.13);padding:30px;background:rgba(255,255,255,.035)}
.dtf-rd-info h2{color:#fff;margin-bottom:22px}
.dtf-rd-requirements ul{margin:0;padding-left:18px;color:#c9d0da;line-height:1.65}
.dtf-rd-requirements li{margin:8px 0}
.dtf-rd-tech-list{display:grid;gap:1px;background:rgba(255,255,255,.12)}
.dtf-rd-tech-list>div{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#0f1828;padding:17px 18px}
.dtf-rd-tech-list strong{font-size:20px;color:var(--yellow)}
.dtf-rd-tech-list span{text-align:right;color:#b9c1cd;font-size:12px;line-height:1.35}

/* HOW-IT-WORKS MODAL */
html.dtf-modal-open{overflow:hidden}
.dtf-rd-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}
.dtf-rd-modal.is-open{display:flex}
.dtf-rd-modal-backdrop{position:absolute;inset:0;background:rgba(5,10,19,.76);backdrop-filter:blur(3px)}
.dtf-rd-modal-card{position:relative;width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:14px;padding:34px;box-shadow:0 28px 90px rgba(0,0,0,.42)}
.dtf-rd-modal-card h2{margin:0 0 24px;font-size:31px;color:var(--ink);font-weight:1000;letter-spacing:-.7px}
.dtf-rd-modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#f0f1f2;color:#29313c;font-size:27px;line-height:1;cursor:pointer}
.dtf-rd-modal-steps{display:grid;gap:9px}
.dtf-rd-modal-steps>div{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid #e1e3e5;background:#fafafa;border-radius:8px}
.dtf-rd-modal-steps b{display:flex;width:48px;height:48px;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:6px;font-size:14px}
.dtf-rd-modal-steps span{color:#66707d;font-size:13px;line-height:1.45}
.dtf-rd-modal-steps strong{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.dtf-rd-modal-note{margin-top:15px;padding:14px 16px;background:#fff8dc;border:1px solid #f1d66a;border-radius:8px;display:flex;gap:10px;justify-content:space-between;align-items:center}
.dtf-rd-modal-note strong{color:#6b5200}.dtf-rd-modal-note span{font-size:12px;color:#725f1b;text-align:right}
.dtf-rd-modal-upload{width:100%;margin-top:18px;border:0;border-radius:7px;background:var(--red);color:#fff;padding:15px;font-weight:900;text-transform:uppercase;cursor:pointer}

@media(max-width:991px){
  .dtf-rd-hero-grid{grid-template-columns:1fr}.dtf-rd-visual{display:none}.dtf-rd-hero h1{font-size:46px}
  .dtf-rd-feature-grid{grid-template-columns:repeat(2,1fr)}
  .dtf-rd-strip-grid{grid-template-columns:repeat(2,1fr)}.dtf-rd-strip-grid>div:nth-child(2){border-right:0}
  .dtf-rd-section-head,.dtf-rd-order-head,.dtf-rd-info-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:767px){
  .clothink-dtf-redesign .container{padding-left:15px;padding-right:15px}
  .dtf-rd-hero{padding:48px 0 44px}.dtf-rd-hero h1{font-size:35px;letter-spacing:-1px}.dtf-rd-lead{font-size:16px}
  .dtf-rd-primary,.dtf-rd-secondary{width:100%}
  .dtf-rd-strip-grid{grid-template-columns:1fr 1fr}.dtf-rd-strip-grid>div{padding:10px 12px;min-height:74px}.dtf-rd-strip strong{font-size:19px}.dtf-rd-strip span{font-size:10px}
  .dtf-rd-how,.dtf-rd-order{padding:48px 0}.dtf-rd-feature-grid{grid-template-columns:1fr}.dtf-rd-section-head h2,.dtf-rd-order-head h2,.dtf-rd-info h2{font-size:28px}
  .dtf-rd-app-shell{padding:8px;border-radius:9px}
  .dtf-rd-app-shell .dtf-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dtf-rd-app-shell .dtf-upload-zone{padding:42px 12px}
  .dtf-rd-app-shell .dtf-file-head{align-items:flex-start;flex-wrap:wrap}.dtf-rd-app-shell .dtf-file-meta{min-width:calc(100% - 95px)}.dtf-rd-app-shell .dtf-head-actions{width:100%}
  .dtf-rd-app-shell .dtf-item-grid,.dtf-rd-app-shell .dtf-item-grid-lock{grid-template-columns:1fr}
  .dtf-rd-app-shell .dtf-actions-row{grid-template-columns:1fr}
  .dtf-rd-app-shell .dtf-summary-bar{grid-template-columns:1fr 1fr;border-radius:8px}.dtf-rd-app-shell .dtf-summary-progress,.dtf-rd-app-shell .dtf-cart-button{grid-column:1/3}
  .dtf-rd-info{padding:48px 0}.dtf-rd-requirements,.dtf-rd-tech{padding:22px}
  .dtf-rd-modal-card{padding:26px 18px 20px}.dtf-rd-modal-card h2{font-size:25px;padding-right:35px}.dtf-rd-modal-note{display:block}.dtf-rd-modal-note span{display:block;text-align:left;margin-top:4px}
}


/* ===== v1.2 polish ===== */
/* The functional uploader is rendered by extension/module/clothink_dtf.tpl. */
.dtf-rd-app-shell .dtf-topbar{display:none!important}
.dtf-rd-app-shell #dtf-file-input{display:none!important}
.dtf-rd-app-shell .dtf-declaration{display:none!important}
.dtf-rd-app-shell .dtf-intro{padding:2px 2px 16px!important;background:transparent!important;border:0!important;color:#445064!important;font-weight:700!important}

/* Keep upload area itself as the only upload target. */
.dtf-rd-app-shell .dtf-upload-zone{cursor:pointer!important;position:relative!important}
.dtf-rd-app-shell .dtf-upload-zone:after{content:"Кликни или плъзни PNG файловете тук";display:block;margin-top:9px;color:#667085;font-size:12px;font-weight:700}
.dtf-rd-app-shell #dtf-add-files{box-shadow:none!important}

/* Tooltips for express production cutoff. */
.dtf-rd-tooltip{position:relative;cursor:help!important}
.dtf-rd-tooltip:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(5px);width:300px;max-width:80vw;padding:11px 13px;border-radius:8px;background:#050b16;color:#fff;font-size:11px;font-weight:600;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 10px 35px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:.16s ease;z-index:1000}
.dtf-rd-tooltip:before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);border:6px solid transparent;border-top-color:#050b16;opacity:0;visibility:hidden;transition:.16s ease;z-index:1001}
.dtf-rd-tooltip:hover:after,.dtf-rd-tooltip:hover:before,.dtf-rd-tooltip:focus:after,.dtf-rd-tooltip:focus:before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dtf-rd-tipmark,.dtf-rd-inline-tip{display:inline-flex!important;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid currentColor;font-size:10px;line-height:1;margin-left:5px;font-style:normal}
.dtf-rd-inline-tip{vertical-align:2px;color:#a06a00;background:#fff7db}

/* New hero roll: actual transfer motifs instead of placeholder wording. */
.dtf-rd-rollscene{position:relative;width:100%;min-height:390px;display:flex;align-items:center;justify-content:center}
.dtf-rd-rollsvg{width:min(610px,110%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.20))}
.dtf-rd-rollscene .dtf-rd-machine-label{position:absolute;left:10%;bottom:16%;transform:rotate(-5deg)}

/* Make uploaded-file UI readable even if legacy module CSS is present. */
.dtf-rd-app-shell .dtf-files{display:block!important;margin-top:16px!important}
.dtf-rd-app-shell .dtf-empty{padding:18px 10px!important;text-align:center!important;color:#98a2b3!important;background:transparent!important;border:0!important}
.dtf-rd-app-shell .dtf-file-card{position:relative!important;margin:0 0 14px!important;padding:16px!important;border:1px solid #dfe3e8!important;border-radius:10px!important;background:#fff!important;box-shadow:0 4px 16px rgba(11,18,32,.04)!important}
.dtf-rd-app-shell .dtf-file-head{display:flex!important;align-items:center!important;gap:12px!important}
.dtf-rd-app-shell .dtf-file-index{flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:7px!important;background:#e1202d!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:900!important}
.dtf-rd-app-shell .dtf-thumb{flex:0 0 82px!important;width:82px!important;height:82px!important;object-fit:contain!important;border:1px solid #e0e4e8!important;border-radius:8px!important;background:#f7f7f5!important}
.dtf-rd-app-shell .dtf-file-meta{flex:1!important;min-width:0!important}
.dtf-rd-app-shell .dtf-file-name{font-size:14px!important;font-weight:900!important;color:#0b1220!important;white-space:normal!important;word-break:break-word!important}
.dtf-rd-app-shell .dtf-file-sub{margin-top:5px!important;font-size:11px!important;line-height:1.4!important;color:#6d7684!important}
.dtf-rd-app-shell .dtf-head-actions{display:flex!important;gap:7px!important;align-items:center!important}
.dtf-rd-app-shell .dtf-mini-btn{border:1px solid #d9dde2!important;background:#f8f8f6!important;color:#394252!important;border-radius:6px!important;padding:8px 10px!important;font-size:11px!important;font-weight:800!important}
.dtf-rd-app-shell .dtf-mini-btn.danger{color:#b61f2b!important;background:#fff5f5!important}
.dtf-rd-app-shell .dtf-item{margin-top:12px!important;padding:13px!important;background:#f6f7f8!important;border:1px solid #e2e5e8!important;border-radius:8px!important}
.dtf-rd-app-shell .dtf-item-grid-lock{display:grid!important;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) minmax(150px,.9fr)!important;gap:10px!important;align-items:end!important;width:100%!important}
.dtf-rd-app-shell .dtf-field label{display:block!important;margin:0 0 5px!important;font-size:10px!important;font-weight:900!important;color:#596274!important;text-transform:uppercase!important}
.dtf-rd-app-shell .dtf-field input{width:100%!important;height:38px!important;min-height:38px!important;border:1px solid #c9d1da!important;border-radius:7px!important;background:#fff!important;color:#111827!important;text-align:center!important;box-shadow:none!important}
.dtf-rd-app-shell .dtf-item-foot{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin-top:10px!important;flex-wrap:wrap!important}
.dtf-rd-app-shell .dtf-line-total{background:#0b1220!important;color:#fff!important;border-radius:6px!important;padding:8px 12px!important;font-weight:900!important}
.dtf-rd-app-shell .dtf-duplicate{width:100%!important;margin-top:11px!important;padding:10px!important;border:1px dashed #adb5bf!important;border-radius:7px!important;background:#fff!important;color:#0b1220!important;font-weight:900!important}
.dtf-rd-app-shell .dtf-upload-progress{margin:12px 0!important;padding:12px!important;border:1px solid #dce1e6!important;border-radius:8px!important;background:#fff!important}

@media(max-width:767px){
  .dtf-rd-tooltip:after{left:0;transform:none;width:260px}.dtf-rd-tooltip:before{left:18px;transform:none}
  .dtf-rd-tooltip:hover:after,.dtf-rd-tooltip:focus:after{transform:none}
  .dtf-rd-app-shell .dtf-file-head{align-items:flex-start!important;flex-wrap:wrap!important}
  .dtf-rd-app-shell .dtf-file-meta{min-width:calc(100% - 128px)!important}
  .dtf-rd-app-shell .dtf-head-actions{width:100%!important}
  .dtf-rd-app-shell .dtf-item-grid-lock{grid-template-columns:1fr 32px 1fr!important}
  .dtf-rd-app-shell .dtf-qty-field{grid-column:1/4!important;min-width:0!important}
}

/* =========================================================
   CLOTHINK DTF REDESIGN v1.3 — mockup-aligned presentation
   Functional selectors/IDs remain unchanged.
   ========================================================= */
.clothink-dtf-redesign{--dtf-navy:#081321;--dtf-navy2:#0d1b2b;--dtf-red:#ef1528;--dtf-soft:#f7f8fa}

/* Hero: use the real DTF roll asset from the package. */
.dtf-rd-hero{padding:54px 0 42px;background:linear-gradient(100deg,#07111e 0%,#0a1422 55%,#101820 100%)}
.dtf-rd-hero-grid{grid-template-columns:.9fr 1.1fr;gap:32px;min-height:315px}
.dtf-rd-hero h1{font-size:49px;max-width:600px;margin-bottom:12px}
.dtf-rd-lead{font-size:16px;line-height:1.48;max-width:590px;margin-bottom:18px}
.dtf-rd-badges{margin-bottom:19px;gap:8px}
.dtf-rd-badges span{padding:7px 11px;font-size:11px}
.dtf-rd-badge-accent{display:inline-flex!important;align-items:center;gap:5px}
.dtf-rd-shuttle{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.dtf-rd-primary,.dtf-rd-secondary{min-height:46px;padding:0 22px}
.dtf-rd-real-roll{position:relative;width:100%;height:330px;display:flex;align-items:center;justify-content:flex-end}
.dtf-rd-real-roll img{display:block;width:min(720px,118%);max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 23px 27px rgba(0,0,0,.22));transform:translateX(4%)}
.dtf-rd-width-line{position:absolute;right:3%;bottom:4%;display:flex;align-items:center;gap:8px;color:#ffc928;font-size:17px;font-weight:1000;transform:rotate(-5deg)}
.dtf-rd-width-line span{display:block;width:60px;height:2px;background:#ffc928;position:relative}
.dtf-rd-width-line span:first-child:before,.dtf-rd-width-line span:last-child:after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-top:2px solid #ffc928;transform:rotate(45deg)}
.dtf-rd-width-line span:first-child:before{left:0;border-left:2px solid #ffc928}.dtf-rd-width-line span:last-child:after{right:0;border-right:2px solid #ffc928;transform:rotate(-135deg)}
.dtf-rd-badge-accent.dtf-rd-tooltip:after{bottom:auto;top:calc(100% + 10px);left:50%}
.dtf-rd-badge-accent.dtf-rd-tooltip:before{bottom:auto;top:calc(100% + 4px);border-top-color:transparent;border-bottom-color:#050b16}

/* Four-step strip, closer to the approved mockup. */
.dtf-rd-strip-grid>div{gap:11px;min-height:78px;padding:10px 16px}
.dtf-rd-strip strong{font-size:22px}
.dtf-step-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--dtf-red);font-size:25px;font-style:normal;flex:0 0 auto}
.dtf-rd-strip span{display:block;text-transform:none;line-height:1.12}
.dtf-rd-strip span b{display:block;font-size:11px;line-height:1.08;color:#111;font-weight:1000}
.dtf-rd-strip span small{display:block;margin-top:4px;color:#7a8490;font-size:10px;line-height:1.15;font-weight:500}

.dtf-rd-feature-shuttle svg{width:27px;height:27px;fill:#fff}

/* Order block: left uploader + sticky order summary. */
.dtf-rd-order{padding:48px 0 70px;background:#fff}
.dtf-rd-order-head{grid-template-columns:1fr auto;gap:24px;margin-bottom:14px;align-items:end}
.dtf-rd-order-head h2{font-size:33px}
.dtf-rd-app-shell{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.dtf-rd-app-shell .dtf-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.dtf-rd-app-shell .dtf-work-main{min-width:0}
.dtf-rd-app-shell .dtf-order-aside{position:relative;min-width:0}

/* Tiers */
.dtf-rd-app-shell .dtf-tiers{margin:0 0 14px;gap:10px}
.dtf-rd-app-shell .dtf-tier{padding:13px 8px;border-radius:8px;background:#fff;box-shadow:0 3px 13px rgba(10,20,35,.035)}
.dtf-rd-app-shell .dtf-tier.active{border:2px solid var(--dtf-red);box-shadow:none}
.dtf-rd-app-shell .dtf-tier-range{margin:5px 0 3px;font-size:12px}
.dtf-rd-app-shell .dtf-tier-price{font-size:17px}

/* Clickable upload zone. */
.dtf-rd-app-shell .dtf-upload-zone{padding:33px 18px 29px;border:1.5px dashed #9fc1e8;border-radius:8px;background:#fff;min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dtf-rd-app-shell .dtf-upload-zone:after{display:none!important}
.dtf-rd-app-shell .dtf-upload-icon{display:flex!important;align-items:center;justify-content:center;width:44px;height:38px;margin:0 auto 10px!important;border-radius:50% 50% 48% 48%;background:#ff6674;color:#fff;font-size:0!important;position:relative}
.dtf-rd-app-shell .dtf-upload-icon:before{content:"↑"!important;width:auto!important;height:auto!important;background:none!important;color:#fff!important;font-size:27px!important;font-weight:900!important;border-radius:0!important}
.dtf-rd-app-shell .dtf-upload-title{font-size:17px;margin-top:0}
.dtf-rd-app-shell .dtf-upload-hint{font-size:12px;margin-top:4px}
.dtf-rd-app-shell .dtf-upload-subhint{font-size:9px;margin-top:5px}

/* Uploaded files: compact rows like the approved mockup. */
.dtf-rd-app-shell .dtf-files{margin-top:10px!important}
.dtf-rd-app-shell .dtf-file-card{padding:9px 10px!important;margin:0 0 8px!important;border-radius:8px!important;box-shadow:none!important}
.dtf-rd-app-shell .dtf-file-head{gap:9px!important;min-height:54px}
.dtf-rd-app-shell .dtf-file-index{width:27px!important;height:27px!important;flex-basis:27px!important;border-radius:6px!important;font-size:13px}
.dtf-rd-app-shell .dtf-thumb{width:58px!important;height:48px!important;flex-basis:58px!important;border-radius:6px!important}
.dtf-rd-app-shell .dtf-file-name{font-size:12px!important;line-height:1.2}
.dtf-rd-app-shell .dtf-file-sub{font-size:9.5px!important;margin-top:3px!important}
.dtf-rd-app-shell .dtf-head-actions{gap:5px!important}
.dtf-rd-app-shell .dtf-mini-btn{padding:6px 8px!important;font-size:9px!important;border-radius:5px!important}
.dtf-rd-app-shell .dtf-item{margin-top:7px!important;padding:8px 10px!important;border-radius:7px!important;background:#fbfcfd!important}
.dtf-rd-app-shell .dtf-item-grid-lock{grid-template-columns:minmax(110px,1fr) 30px minmax(110px,1fr) minmax(135px,.85fr)!important;gap:7px!important}
.dtf-rd-app-shell .dtf-field label{font-size:8px!important;margin-bottom:3px!important}
.dtf-rd-app-shell .dtf-field input{height:32px!important;min-height:32px!important;font-size:12px!important}
.dtf-rd-app-shell .dtf-ratio-lock{height:32px!important;min-height:32px!important;width:30px!important;min-width:30px!important}
.dtf-rd-app-shell .dtf-qty-control{height:32px!important;grid-template-columns:31px minmax(50px,1fr) 31px!important}
.dtf-rd-app-shell .dtf-qty-control button{line-height:32px!important;font-size:17px!important;background:#e7ebef!important;color:#46515f!important}
.dtf-rd-app-shell .dtf-qty-control input{height:32px!important;min-height:32px!important}
.dtf-rd-app-shell .dtf-item-foot{margin-top:5px!important;font-size:9px!important}
.dtf-rd-app-shell .dtf-line-total{padding:5px 8px!important;border-radius:5px!important;font-size:11px!important;background:transparent!important;color:#0b1220!important}
.dtf-rd-app-shell .dtf-duplicate{margin-top:7px!important;padding:7px!important;font-size:11px!important;border-color:#adc0d3!important}

/* Buttons below list. */
.dtf-rd-app-shell .dtf-actions-row{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;margin-top:8px!important}
.dtf-rd-app-shell .dtf-btn{min-height:38px!important;border-radius:6px!important;font-size:11px!important;font-weight:900!important;text-transform:none!important}
.dtf-rd-app-shell #dtf-add-files{background:#fff!important;border:1px dashed #a9bfd6!important;color:#0b1220!important}
.dtf-rd-app-shell #dtf-delete-all{background:#fff!important;border:1px solid #e1e4e8!important;color:#7a8490!important}

/* Sticky order panel. */
.dtf-rd-app-shell .dtf-summary-bar{position:sticky!important;top:125px!important;display:block!important;width:100%!important;padding:17px!important;border:1px solid #16283c!important;border-radius:10px!important;background:linear-gradient(145deg,#071321,#0e1d2d)!important;color:#fff!important;box-shadow:0 18px 38px rgba(7,19,33,.18)!important;z-index:20}
.dtf-rd-app-shell .dtf-summary-title{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:1000;letter-spacing:.7px}
.dtf-rd-app-shell .dtf-summary-bag{font-size:20px;color:#fff}
.dtf-rd-app-shell .dtf-summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 0 11px}
.dtf-rd-app-shell .dtf-summary-stat{display:block!important}
.dtf-rd-app-shell .dtf-summary-stat small{display:block!important;color:#b9c5d1!important;font-size:9px!important;text-transform:none!important;margin-bottom:4px}
.dtf-rd-app-shell .dtf-summary-stat strong{display:block!important;color:#fff!important;font-size:25px!important;line-height:1!important}
.dtf-rd-app-shell .dtf-summary-progress{display:block!important;padding:4px 0 14px!important;border-bottom:1px solid rgba(255,255,255,.10)}
.dtf-rd-app-shell .dtf-progress{height:7px!important;background:#1a3148!important;border-radius:99px!important;overflow:hidden!important;margin-bottom:9px!important}
.dtf-rd-app-shell .dtf-progress i{display:block!important;height:100%!important;background:linear-gradient(90deg,#ff1735,#ff3b52)!important;border-radius:99px!important}
.dtf-rd-app-shell #dtf-rate-text{display:block!important;text-align:center!important;color:#d2dae3!important;font-size:9px!important;font-weight:600!important;white-space:normal!important}
.dtf-rd-app-shell .dtf-cart-button{width:100%!important;min-height:49px!important;margin:15px 0 12px!important;border:0!important;border-radius:7px!important;background:linear-gradient(90deg,#ef0d29,#ff1835)!important;color:#fff!important;font-size:12px!important;font-weight:1000!important;text-transform:uppercase!important;box-shadow:0 9px 22px rgba(239,13,41,.20)!important}
.dtf-rd-app-shell .dtf-cart-glyph{margin-right:7px;font-size:16px}
.dtf-rd-app-shell .dtf-summary-benefits{display:grid;gap:9px;padding:4px 0 13px;border-bottom:1px solid rgba(255,255,255,.10)}
.dtf-rd-app-shell .dtf-summary-benefits>div{display:flex;align-items:center;gap:8px;color:#fff;font-size:10.5px;line-height:1.25}
.dtf-rd-app-shell .dtf-summary-benefits>div>b{display:flex;align-items:center;justify-content:center;width:19px;height:19px;flex:0 0 19px;border-radius:50%;background:#35ca79;color:#fff;font-size:11px}
.dtf-rd-app-shell .dtf-summary-benefits .dtf-rd-inline-tip{color:#fff!important;background:transparent!important;width:15px!important;height:15px!important;font-size:8px!important;margin-left:3px!important}
.dtf-rd-app-shell .dtf-summary-safe{display:flex;align-items:center;justify-content:center;gap:7px;padding-top:13px;color:#c8d2dd;font-size:10px}

/* No notes field and no old bottom summary spacer. */
.dtf-rd-app-shell .dtf-note-box,.dtf-rd-app-shell .dtf-sticky-spacer{display:none!important}

@media(max-width:991px){
  .dtf-rd-hero-grid{grid-template-columns:1fr 1fr}.dtf-rd-hero h1{font-size:39px}.dtf-rd-real-roll{height:275px}.dtf-rd-real-roll img{width:130%;transform:translateX(17%)}
  .dtf-rd-app-shell .dtf-workspace{grid-template-columns:1fr 260px;gap:18px}
  .dtf-rd-app-shell .dtf-item-grid-lock{grid-template-columns:1fr 30px 1fr!important}.dtf-rd-app-shell .dtf-qty-field{grid-column:1/4!important}
}
@media(max-width:767px){
  .dtf-rd-visual{display:none}.dtf-rd-hero-grid{grid-template-columns:1fr}.dtf-rd-hero{padding:40px 0 34px}.dtf-rd-hero h1{font-size:34px}
  .dtf-rd-strip-grid>div{padding:8px 10px}.dtf-step-icon{display:none}.dtf-rd-strip span small{display:none}
  .dtf-rd-order-head{grid-template-columns:1fr}.dtf-rd-app-shell .dtf-workspace{display:block}
  .dtf-rd-app-shell .dtf-order-aside{margin-top:14px}
  .dtf-rd-app-shell .dtf-summary-bar{position:sticky!important;top:auto!important;bottom:8px!important;border-radius:10px!important}
  .dtf-rd-app-shell .dtf-summary-benefits,.dtf-rd-app-shell .dtf-summary-safe,.dtf-rd-app-shell .dtf-summary-title{display:none!important}
  .dtf-rd-app-shell .dtf-summary-stats{padding:0 0 8px}.dtf-rd-app-shell .dtf-summary-stat strong{font-size:20px!important}.dtf-rd-app-shell .dtf-cart-button{margin:9px 0 0!important}
  .dtf-rd-app-shell .dtf-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.dtf-rd-app-shell .dtf-tier:last-child{grid-column:1/3}
  .dtf-rd-app-shell .dtf-file-head{flex-wrap:wrap!important}.dtf-rd-app-shell .dtf-file-meta{min-width:calc(100% - 104px)!important}.dtf-rd-app-shell .dtf-head-actions{width:100%!important;justify-content:flex-end}
}

/* ===== v1.4 HERO / STEP ICON FIXES ===== */
.dtf-rd-hero-copy{position:relative;z-index:3}
.dtf-rd-visual{z-index:1;overflow:visible}
.dtf-rd-real-roll{height:310px;justify-content:center;overflow:visible}
.dtf-rd-real-roll img{
  width:100%;
  max-width:700px;
  height:auto;
  object-fit:contain;
  transform:none;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.28));
}
.dtf-rd-width-line{margin-top:5px}
.dtf-rd-primary{position:relative;z-index:5;cursor:pointer}
.dtf-rd-modal-upload{cursor:pointer}

.dtf-step-icon{width:38px;height:38px;font-size:0!important}
.dtf-step-icon svg{width:30px;height:30px;display:block;fill:none;stroke:var(--red);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1199px) and (min-width:992px){
  .dtf-rd-real-roll img{width:108%;max-width:none}
}
@media(max-width:991px) and (min-width:768px){
  .dtf-rd-real-roll{height:255px}
  .dtf-rd-real-roll img{width:100%;max-width:560px;transform:none}
}


/* ===== v1.5 hard fixes ===== */
.dtf-rd-visual{height:360px!important;overflow:visible!important}
.dtf-rd-real-roll{height:360px!important;width:100%!important;overflow:visible!important;display:flex!important;align-items:center!important;justify-content:center!important}
.dtf-rd-real-roll img{width:94%!important;max-width:700px!important;height:auto!important;object-fit:contain!important;object-position:center!important;transform:none!important;margin:0 auto!important}

/* Native file input overlay: this makes the whole upload field open the OS file picker even if JS click handlers fail. */
.dtf-rd-app-shell .dtf-upload-zone{position:relative!important;overflow:hidden!important}
.dtf-rd-app-shell .dtf-file-input-native{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  z-index:20!important;
}
.dtf-rd-app-shell #dtf-add-files{display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;text-decoration:none!important}
@media(max-width:1199px){.dtf-rd-real-roll img{width:90%!important;max-width:620px!important}}

/* ===== v1.6 target mockup alignment ===== */
/* Hero: use the approved wide DTF-roll artwork as one integrated scene. */
.dtf-rd-visual{height:330px!important;display:flex!important;align-items:center!important;overflow:visible!important}
.dtf-rd-real-roll{width:100%!important;height:330px!important;display:block!important;overflow:hidden!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.dtf-rd-real-roll img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center center!important;transform:none!important;margin:0!important;filter:none!important}
.dtf-rd-width-line{display:none!important}

/* Upload zone: actual click + drag/drop is handled in JS; keep the file input hidden. */
.dtf-rd-app-shell .dtf-upload-zone{position:relative!important;overflow:visible!important;cursor:pointer!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important}
.dtf-rd-app-shell .dtf-upload-zone.dragover{border-color:#ef233c!important;background:#fff5f6!important;box-shadow:0 0 0 3px rgba(239,35,60,.08)!important}
.dtf-rd-app-shell .dtf-file-input-native{display:none!important;position:static!important;width:0!important;height:0!important;opacity:0!important;pointer-events:none!important}

/* Quantity: one single control, not an input nested inside another visible field. */
.dtf-rd-app-shell .dtf-qty-control{display:grid!important;grid-template-columns:31px minmax(54px,1fr) 31px!important;height:32px!important;border:1px solid #cfd7df!important;border-radius:6px!important;overflow:hidden!important;background:#fff!important;gap:0!important}
.dtf-rd-app-shell .dtf-qty-control button{height:30px!important;min-width:31px!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;background:#eef1f4!important;color:#5d6876!important;line-height:30px!important;box-shadow:none!important}
.dtf-rd-app-shell .dtf-qty-control input,.dtf-rd-app-shell input.dtf-qty{height:30px!important;min-height:30px!important;border:0!important;border-left:1px solid #dde3e8!important;border-right:1px solid #dde3e8!important;border-radius:0!important;margin:0!important;padding:0 4px!important;background:#fff!important;box-shadow:none!important;outline:0!important;text-align:center!important;appearance:textfield!important;-moz-appearance:textfield!important}
.dtf-rd-app-shell input.dtf-qty::-webkit-outer-spin-button,.dtf-rd-app-shell input.dtf-qty::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}

/* The approved card ends after the benefit list. */
.dtf-rd-app-shell .dtf-summary-safe{display:none!important}
.dtf-rd-app-shell .dtf-summary-benefits{border-bottom:0!important;padding-bottom:2px!important}

@media(max-width:1199px) and (min-width:768px){
  .dtf-rd-real-roll{height:280px!important}
  .dtf-rd-visual{height:280px!important}
}
