/* Image edit wizard (crop/rotate + target-size compression) shown after picking
   a file on a TZFileUpload with data-allow-image-edit="true". RTL.
   Portal ships "Vazir" (fonts/Vazir-*.ttf), not "Vazirmatn" like TaskManager's New
   UI — listed first so it's used here if ever registered under that family name,
   falling back to Tahoma either way. */
.ux-iew-modal{direction:rtl;font-family:"Vazir","Vazirmatn",Tahoma,sans-serif!important;}
.ux-iew-modal *{font-family:"Vazir","Vazirmatn",Tahoma,sans-serif!important;}
/* [hidden] has the same specificity as a plain class selector, so any element below
   that also sets its own `display` (e.g. .ux-iew-spinner-row{display:flex}) would
   otherwise win the cascade tie and stay visible even with the hidden attribute set —
   this is what kept the spinner showing after compression finished. !important forces
   the attribute to always win regardless of what else targets the element. */
.ux-iew-modal [hidden]{display:none!important;}
.ux-iew-dialog{max-width:640px;margin:2rem auto;}
.ux-iew-modal .modal-content{border-radius:16px;border:none;box-shadow:0 20px 60px rgba(15,23,42,.25);overflow:hidden;}

.ux-iew-header{display:flex;align-items:center;gap:10px;padding:18px 20px 6px;position:relative;}
.ux-iew-title{margin:0;font-size:16px;font-weight:700;color:#0F172A;flex:1;text-align:center;}
.ux-iew-filesize-badge{display:inline-flex;align-items:center;gap:6px;background:#F1F5F9;color:#334155;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;}
.ux-iew-close{border:none;background:transparent;color:#94A3B8;font-size:16px;cursor:pointer;padding:4px;}
.ux-iew-close:hover{color:#334155;}

.ux-iew-steps{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px 4px;}
.ux-iew-step{display:flex;flex-direction:column;align-items:center;gap:4px;}
.ux-iew-step-badge{width:32px;height:32px;border-radius:50%;background:#E2E8F0;color:#64748B;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.ux-iew-step-label{font-size:11.5px;color:#94A3B8;font-weight:600;}
.ux-iew-step.is-active .ux-iew-step-badge{background:#1D4ED8;color:#fff;}
.ux-iew-step.is-active .ux-iew-step-label{color:#1D4ED8;}
.ux-iew-step.is-done .ux-iew-step-badge{background:#16A34A;color:#fff;}
.ux-iew-step.is-done .ux-iew-step-label{color:#16A34A;}
.ux-iew-step-line{width:40px;height:2px;background:#E2E8F0;margin-top:-16px;}

.ux-iew-body{padding:18px 20px 6px;}
.ux-iew-section-label{font-size:12.5px;font-weight:700;color:#334155;margin:14px 0 8px;}

/* Step 1: crop */
.ux-iew-crop-wrap{width:100%;height:280px;background:#0F172A;border-radius:10px;overflow:hidden;}
.ux-iew-crop-wrap img{display:block;max-width:100%;}
.ux-iew-zoom-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;font-size:12.5px;font-weight:700;color:#334155;}
.ux-iew-round-btn{width:30px;height:30px;border-radius:50%;border:1px solid #E2E8F0;background:#fff;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.ux-iew-round-btn:hover{background:#F1F5F9;}
.ux-iew-tools-row,.ux-iew-ratio-row{display:flex;flex-wrap:wrap;gap:8px;}
.ux-iew-tool-btn{width:40px;height:40px;border-radius:10px;border:1px solid #E2E8F0;background:#fff;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;}
.ux-iew-tool-btn:hover{background:#F1F5F9;color:#1D4ED8;}
.ux-iew-ratio-btn{height:34px;padding:0 14px;border-radius:8px;border:1px solid #E2E8F0;background:#fff;color:#334155;font-size:12.5px;font-weight:600;cursor:pointer;}
.ux-iew-ratio-btn.is-active{background:#1D4ED8;border-color:#1D4ED8;color:#fff;}

/* Step 2: compress */
.ux-iew-preview-wrap{width:100%;max-height:220px;display:flex;align-items:center;justify-content:center;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;overflow:hidden;}
.ux-iew-preview-wrap img{max-width:100%;max-height:220px;object-fit:contain;}
.ux-iew-compress-ask{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:13px;font-weight:700;color:#0F172A;}
.ux-iew-yesno{display:inline-flex;border:1px solid #E2E8F0;border-radius:8px;overflow:hidden;}
.ux-iew-yesno-btn{border:none;background:#fff;color:#334155;padding:6px 16px;font-size:12.5px;font-weight:700;cursor:pointer;}
.ux-iew-yesno-btn.is-active{background:#1D4ED8;color:#fff;}
.ux-iew-target-row{display:flex;align-items:center;gap:10px;margin-top:14px;}
.ux-iew-target-row label{font-size:12.5px;font-weight:600;color:#334155;white-space:nowrap;}
.ux-iew-target-input{width:110px;height:36px;border:1px solid #E2E8F0;border-radius:8px;padding:0 10px;font-size:13px;font-weight:700;text-align:center;}
.ux-iew-target-hint{font-size:11.5px;color:#94A3B8;font-weight:600;}
.ux-iew-spinner-row{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:#64748B;font-weight:600;}
.ux-iew-spinner{width:16px;height:16px;border-radius:50%;border:2px solid #DBEAFE;border-top-color:#1D4ED8;animation:ux-iew-spin .7s linear infinite;display:inline-block;}
@keyframes ux-iew-spin{to{transform:rotate(360deg)}}
.ux-iew-compress-result{margin-top:16px;padding:14px;border-radius:10px;background:#F0FDF4;border:1px solid #BBF7D0;}
.ux-iew-compress-status{display:flex;align-items:center;gap:6px;color:#15803D;font-weight:700;font-size:13px;}
.ux-iew-compress-tries{font-size:11.5px;color:#64748B;margin-top:4px;font-weight:600;}
.ux-iew-compress-sizes{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.ux-iew-badge-down{background:#DCFCE7;color:#15803D;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;}
#uxIewCompressSizesText{font-size:13px;font-weight:700;color:#0F172A;direction:ltr;}

/* Step 3: compare */
.ux-iew-compare-row{display:flex;gap:14px;}
.ux-iew-compare-card{flex:1;border:1px solid #E2E8F0;border-radius:10px;padding:10px;text-align:center;background:#F8FAFC;}
.ux-iew-compare-card.is-after{background:#F0FDF4;border-color:#BBF7D0;}
.ux-iew-compare-caption{font-size:12px;font-weight:700;color:#64748B;margin-bottom:6px;}
.ux-iew-compare-card.is-after .ux-iew-compare-caption{color:#15803D;}
.ux-iew-compare-card img{max-width:100%;max-height:140px;object-fit:contain;border-radius:6px;}
.ux-iew-compare-size{margin-top:6px;font-size:12.5px;font-weight:700;color:#0F172A;}
.ux-iew-summary-table{margin-top:16px;border:1px solid #E2E8F0;border-radius:10px;overflow:hidden;}
.ux-iew-summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:12.5px;}
.ux-iew-summary-row:nth-child(odd){background:#F8FAFC;}
.ux-iew-summary-row span:first-child{font-weight:700;color:#0F172A;direction:ltr;}
.ux-iew-summary-row span:last-child{color:#64748B;font-weight:600;}
.ux-iew-ring-wrap{position:relative;width:120px;height:120px;margin:18px auto 4px;}
.ux-iew-ring{width:120px;height:120px;transform:rotate(-90deg);}
.ux-iew-ring-bg{fill:none;stroke:#E2E8F0;stroke-width:10;}
.ux-iew-ring-fg{fill:none;stroke:#16A34A;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .4s ease;}
.ux-iew-ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#0F172A;}

.ux-iew-footer{display:flex;gap:10px;padding:14px 20px 20px;border:none;}
.ux-iew-btn{flex:1;height:42px;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.ux-iew-btn-outline{background:#fff;border:1px solid #E2E8F0;color:#334155;}
.ux-iew-btn-outline:hover{background:#F1F5F9;}
.ux-iew-btn-primary{background:#1D4ED8;border:1px solid #1D4ED8;color:#fff;}
.ux-iew-btn-primary:hover{background:#1E40AF;}
.ux-iew-btn-success{background:#16A34A;border:1px solid #16A34A;color:#fff;}
.ux-iew-btn-success:hover{background:#15803D;}

@media (max-width:480px){
  .ux-iew-dialog{margin:0;max-width:100%;height:100%;}
  .ux-iew-modal .modal-content{height:100%;border-radius:0;}
  .ux-iew-compare-row{flex-direction:column;}
}