/* =========================
 * TD Size Chart Studio — FINAL CSS (Vazirmatn + Responsive + Export) — UPDATED
 * ========================= */

/* Root */
.td-scs{
  max-width:1200px;
  margin:18px auto;
  padding:0 12px;
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
}
.td-scs, .td-scs *{ box-sizing:border-box; }
.td-scs a{ text-decoration:none; }

/* Card */
.td-scs-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

/* Buttons */
.td-btn{
  border:1px solid #e5e5e5;
  background:#fff;
  color:#222;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  line-height:1.2;
  font-family:inherit;
  transition:background .15s ease, transform .05s ease, border-color .15s ease;
}
.td-btn:hover{ background:#f7f7f7; }
.td-btn:active{ transform:translateY(1px); }
.td-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.td-btn-primary{ background:#111; color:#fff; border-color:#111; }
.td-btn-primary:hover{ background:#000; }
.td-btn-ghost{ background:#f7f7f7; }
.td-btn-ghost:hover{ background:#efefef; }

/* Header */
.td-scs-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.td-scs-brand-title{ font-weight:900; font-size:16px; }
.td-scs-brand-sub{ opacity:.65; font-size:12px; }
.td-scs-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Auth */
.td-scs-auth-title{ font-weight:900; font-size:16px; margin-bottom:10px; }
.td-scs-auth-row{ display:flex; gap:10px; flex-wrap:wrap; }
#td-scs-pass{
  flex:1;
  min-width:220px;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
  outline:none;
  font-family:inherit;
}
#td-scs-pass:focus{ border-color:#cfcfcf; }
.td-scs-note{ margin-top:8px; font-size:12px; opacity:.7; }

.td-scs-alert, .td-alert{
  margin-top:10px;
  background:#fff2f2;
  border:1px solid #ffd0d0;
  color:#a00000;
  padding:10px 12px;
  border-radius:12px;
  word-break:break-word;
}

/* Tabs */
.td-scs-tabs{
  display:flex;
  gap:8px;
  margin:12px 0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.td-tab{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #e5e5e5;
  background:#fafafa;
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
  font-family:inherit;
}
.td-tab.active{ background:#111; color:#fff; border-color:#111; }
.td-scs-tabcontent{ display:none; }
.td-scs-tabcontent.active{ display:block; }

/* Layout */
.td-scs-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .td-scs-grid{ grid-template-columns:1fr; }
}

/* Fields */
.td-field{ margin:10px 0; }
.td-field label{ display:block; font-weight:900; margin-bottom:6px; }
.td-field input,
.td-field select,
.td-presets-form textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
  outline:none;
  font:inherit;
  background:#fff;
}
.td-field input:focus,
.td-field select:focus,
.td-presets-form textarea:focus{ border-color:#cfcfcf; }

.td-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 980px){
  .td-row{ grid-template-columns:1fr; }
}

/* Actions responsive */
.td-inline-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width: 600px){
  .td-inline-actions .td-btn{ flex:1 1 auto; }
  .td-scs-actions .td-btn{ flex:1 1 auto; }
}

/* Side list */
.td-scs-side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.td-scs-side-title{ font-weight:900; }
.td-scs-list{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.td-item{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  background:#fafafa;
  cursor:pointer;
}
.td-item:hover{ background:#f0f0f0; }
.td-item b{ display:block; margin-bottom:4px; }
.td-item small{ opacity:.75; word-break:break-word; }

/* Sections */
.td-section{
  margin-top:12px;
  border:1px dashed #e7e7e7;
  border-radius:16px;
  padding:12px;
}
.td-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.td-section-title{ font-weight:900; }
.td-section-sub{ font-size:12px; opacity:.7; }

/* Columns chips */
.td-cols{ display:flex; gap:8px; flex-wrap:wrap; }
.td-colchip{
  background:#f7f7f7;
  border:1px solid #eee;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:12px;
}

/* Table (Editor) */
.td-table-wrap{
  border:1px solid #eee;
  border-radius:16px;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.td-table{
  width:100%;
  min-width:560px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.td-table th, .td-table td{
  border-bottom:1px solid #eee;
  padding:10px;
  text-align:center;
  vertical-align:middle;
  word-break:break-word;
}
.td-table th{
  background:#fff3b3;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:2;
}
.td-table td input{
  width:100%;
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:10px;
  text-align:center;
  min-width:0;
}
.td-table th:last-child,
.td-table td:last-child{
  width:88px;
  min-width:88px;
  white-space:nowrap;
}

/* Preview */
.td-preview{
  background:#f7f3ef;
  border:1px solid #e6ded6;
  border-radius:18px;
  padding:16px;
  direction:rtl;
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
  line-height:1.55;
}

.td-preview-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
@media (max-width: 600px){
  .td-preview-top{ flex-wrap:wrap; }
}

.td-brand-title{ font-weight:900; font-size:18px; color:#5a4637; }
.td-brand-sub{ font-size:12px; opacity:.7; }

.td-preview-name{
  font-weight:900;
  font-size:20px;
  color:#5a4637;
  text-align:center;
  flex:1;
  line-height:1.35;
  padding-top:2px;
  min-width:200px;
}
@media (max-width:600px){
  .td-preview-name{
    flex:0 0 100%;
    order:3;
    font-size:18px;
    margin-top:6px;
  }
}

/* Preview Icon */
.td-preview-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#td-preview-icon-img{
  width:56px;
  height:56px;
  object-fit:contain;
}
#td-preview-icon-fallback{
  font-size:32px;
  opacity:0.7;
}

/* Meta pills */
.td-preview-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.td-pill{
  background:#fff;
  border:1px solid #efe7df;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.td-pill span{ opacity:.7; }

/* Preview table */
.td-preview-table{
  border:1px solid #e6ded6;
  border-radius:14px;
  overflow:auto;
  background:#fff;
}
.td-preview-table table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  min-width:720px;
}
@media (max-width:600px){
  .td-preview-table table{ min-width:640px; }
}
.td-preview-table th,
.td-preview-table td{
  padding:12px 10px;
  border-bottom:1px solid #e6ded6;
  text-align:center;
  background:#fff;
  word-break:break-word;
  vertical-align:middle;
  line-height:1.35;
}
.td-preview-table th{
  background:#fff0a6;
  font-weight:900;
}
.td-preview-table tr:last-child td{ border-bottom:0; }

.td-preview-footer{
  text-align:center;
  margin-top:12px;
  letter-spacing:1px;
  opacity:.7;
  font-weight:900;
}

/* Footnote */
.td-footnote{
  margin-top:10px;
  background:#f6f6f6;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px;
  font-size:13px;
  word-break:break-word;
}

/* Presets UI */
.td-presets-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.td-presets-title{ font-weight:900; font-size:16px; }
.td-presets-sub{ opacity:.7; font-size:12px; }

.td-presets-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){
  .td-presets-grid{ grid-template-columns:1fr; }
}

.td-presets-list{ display:flex; flex-direction:column; gap:8px; }
.td-preset-item{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  background:#fafafa;
  cursor:pointer;
}
.td-preset-item:hover{ background:#f0f0f0; }

.td-preset-line{ display:flex; gap:10px; align-items:center; }
.td-preset-thumb{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid #e8e8e8;
  background:#fff;
  object-fit:contain;
}
.td-preset-thumb-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#999;
}
.td-preset-texts b{ display:block; margin-bottom:4px; }
.td-preset-texts small{ opacity:.75; word-break:break-word; }

.td-switch{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px 12px;
  background:#fafafa;
  flex-wrap:wrap;
}
.td-switch input{ width:18px; height:18px; }

.td-presets-form textarea{ resize:vertical; min-height:160px; }

/* Icon row */
.td-icon-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.td-icon-preview{
  width:92px;
  height:92px;
  border-radius:18px;
  border:1px solid #e7e7e7;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.td-icon-preview img{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
}
#td_preset_icon_empty{
  color:#999;
  font-weight:900;
}
.td-icon-actions{
  flex:1;
  min-width:240px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.td-icon-hint{ font-size:12px; opacity:.75; }

/* Display shortcode */
.td-scs-display{
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
}
.td-scs-display-title{ font-weight:900; font-size:18px; margin-bottom:6px; }
.td-scs-display-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  opacity:.85;
}
.td-scs-display-tablewrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #eee;
  border-radius:14px;
  margin-top:10px;
}
.td-scs-display-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
@media (max-width:600px){
  .td-scs-display-table{ min-width:640px; }
}
.td-scs-display-table th,
.td-scs-display-table td{
  border:1px solid #e8e8e8;
  padding:10px;
  text-align:center;
  vertical-align:middle;
}
.td-scs-display-table th{
  background:#fff3b3;
  font-weight:900;
  position:sticky; top:0; z-index:2;
}

/* Export stage (1250x1000) */
.td-export-stage{
  position:fixed;
  left:-99999px;
  top:0;
  width:1250px;
  height:1000px;
  background:#fff;
  z-index:-1;
  overflow:hidden;
  direction:rtl;
  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
  color:#5a4637;
}

.td-export-card{
  width:1250px;
  height:1000px;
  background:#fff;
  box-sizing:border-box;
  padding:40px 48px;
  position:relative;
}

/* Header */
.td-export-header{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  margin-bottom:32px;
}

.td-export-title{
  grid-column:1 / -1;
  text-align:center;
  margin:8px 0 0;
}

.td-export-title .product-name{
  font-size:40px;
  font-weight:900;
  line-height:1.1;
  color:#5a4637;
}

.td-export-title .size-chart-label,
.td-export-title .free-size-label{
  font-size:24px;
  opacity:0.8;
  font-weight:700;
  margin-top:8px;
}

.td-export-brand{
  justify-self:end;
  line-height:1.2;
}
.td-export-brand .t1{ font-weight:700; font-size:16px; opacity:.9; }
.td-export-brand .t2{ font-weight:900; font-size:20px; margin-top:4px; }

.td-export-icon{
  justify-self:end;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.td-export-icon img{
  width:64px;
  height:64px;
  object-fit:contain;
}

/* Body layout */
.td-export-body{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:32px;
  margin-top:20px;
}

/* تصویر دسته‌بندی */
.td-export-illus{
  display:flex;
  align-items:center;
  justify-content:center;
  height:520px;
  border:2px dashed #e6e0d8;
  border-radius:28px;
  padding:24px;
  background:#fbfbfb;
}

.td-export-illus img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.td-export-illus-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:900;
  color:#e6ded6;
  width:100%;
  height:100%;
}

/* Table */
.td-export-table-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.free-size-header{
  font-size:28px;
  font-weight:900;
  margin-bottom:20px;
  text-align:center;
  color:#5a4637;
}

.td-export-table{
  width:100%;
  max-width:520px;
  border:2px solid #d7d7d7;
  border-collapse:collapse;
  background:#fff;
}

.td-export-table th,
.td-export-table td{
  border:2px solid #d7d7d7;
  padding:16px 14px;
  text-align:center;
  vertical-align:middle;
  font-size:22px;
  line-height:1.2;
  color:#5a4637;
}
.td-export-table th{
  background:#fff3b3;
  font-weight:900;
}

.td-export-table-wide{
  width:100%;
  border:2px solid #d7d7d7;
  border-collapse:collapse;
  background:#fff;
}

.td-export-table-wide th,
.td-export-table-wide td{
  border:2px solid #d7d7d7;
  padding:14px 10px;
  text-align:center;
  vertical-align:middle;
  font-size:20px;
}

.td-export-table-wide th{
  background:#fff3b3;
  font-weight:900;
}

.td-export-table-wide tr:nth-child(even){
  background:#fafafa;
}

.td-export-num{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-variant-numeric:tabular-nums;
}

/* Meta */
.td-export-meta{
  display:flex;
  gap:20px;
  justify-content:center;
  margin-top:30px;
  flex-wrap:wrap;
}

.meta-item{
  background:#f7f3ef;
  border:1px solid #e6ded6;
  border-radius:20px;
  padding:10px 18px;
  display:flex;
  gap:8px;
  align-items:center;
}

.meta-item span{
  opacity:0.7;
}

.meta-item b{
  font-weight:900;
  color:#5a4637;
}

/* Footer */
.td-export-footer{
  position:absolute;
  left:0; right:0;
  bottom:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.td-export-footer .url{
  font-weight:800;
  letter-spacing:6px;
  font-size:16px;
  opacity:.75;
}
/* =========================
 * Description fields + SEO box
 * ========================= */
.td-desc-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 980px){
  .td-desc-fields{ grid-template-columns:1fr; }
}
.td-desc-fields .td-desc-item{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  background:#fafafa;
}
.td-desc-fields .td-desc-item label{
  display:block;
  font-weight:900;
  margin-bottom:6px;
}
.td-desc-fields .td-desc-item input{
  width:100%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
  outline:none;
  font:inherit;
  background:#fff;
}

.td-desc-preset-fields .td-desc-preset-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.td-desc-preset-fields input{
  flex:1;
}

.td-seo-textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:14px;
  padding:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.6;
  background:#0b0b0c;
  color:#f4f4f5;
  direction:ltr;
}

/* Front display specs */
.td-scs-display-specs{
  margin-top:12px;
  background:#fafafa;
  border:1px solid #eee;
  border-radius:16px;
  padding:12px;
}
.td-scs-display-specs-title{
  margin:0 0 10px 0;
  font-size:14px;
  font-weight:900;
}
.td-scs-display-specs-list{
  margin:0;
  padding:0 18px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
}
@media (max-width: 700px){
  .td-scs-display-specs-list{ grid-template-columns:1fr; }
}
.td-scs-display-specs-list li{ list-style:disc; }
.td-scs-display-specs-list .k{ font-weight:900; margin-left:6px; }
.td-scs-display-specs-list .v{ opacity:.9; }