/* ==========================================================
   Mabani UOT Clean UI v3
   WooCommerce + WoodMart + Elementor
========================================================== */
/* ===============================
   Base
================================ */
#uot-widget,
#uot-modal {
    direction: rtl;
    font-family: inherit;
}
#uot-widget *,
#uot-modal * {
    box-sizing: border-box;
}
/* ===============================
   Floating Button
================================ */
#uot-widget {
    position: fixed;
    right: 26px;
    bottom: 100px;
    z-index: 999999;
}
.uot-launcher {
    width:64px;
    height:64px;
    border:0;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    cursor:pointer;
    background:
    linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );
    box-shadow:
    0 15px 40px rgba(15,118,110,.35);
}
.uot-launcher svg {
    width:30px;
    height:30px;
    fill:#fff;
    transition:.3s;
}
.uot-icon-close {
    position:absolute;
    opacity:0;
    transform:
    rotate(-90deg)
    scale(.5);
}
#uot-widget.is-open 
.uot-icon-chat {
    opacity:0;
    transform:
    rotate(90deg)
    scale(.5);
}
#uot-widget.is-open 
.uot-icon-close {
    opacity:1;
    transform:
    rotate(0)
    scale(1);
}
.uot-launcher-ring {
    position:absolute;
    inset:0;
    border-radius:50%;
    border:
    2px solid rgba(20,184,166,.45);
    animation:
    uotPulse 2s infinite;
}
@keyframes uotPulse {
    from {
        transform:scale(1);
        opacity:.8;
    }
    to {
        transform:scale(1.45);
        opacity:0;
    }
}

/* ===============================
   Contact Panel
================================ */
.uot-panel {
    position:absolute;
    right:0;
    bottom:82px;
    width:360px;
    background:
    rgba(255,255,255,.96);
    backdrop-filter:
    blur(18px);
    border-radius:26px;
    overflow:hidden;
    box-shadow:
    0 30px 80px rgba(15,23,42,.22);
    opacity:0;
    visibility:hidden;
    transform:
    translateY(20px)
    scale(.96);
    transition:.35s ease;
    pointer-events:none;
}
#uot-widget.is-open 
.uot-panel {
    opacity:1;
    visibility:visible;
    transform:
    translateY(0)
    scale(1);
    pointer-events:auto;
}

/* ===============================
 Header
================================ */
.uot-head {
    padding:28px;
    color:#fff;
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );
}
.uot-head:before {
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    left:-40px;
    top:-60px;
    background:
    rgba(255,255,255,.12);
    border-radius:50%;
}
.uot-head strong,
.uot-head span {
    position:relative;
    z-index:2;
}
.uot-head strong {
    display:block;
    font-size:19px;
    margin-bottom:8px;
}
.uot-head span {
    font-size:13px;
}

/* ===============================
 Items
================================ */
.uot-item {
    width:100%;
    min-height:70px;
    padding:12px 18px;
    border:0;
    background:#fff;
    display:flex;
    align-items:center;
    gap:15px;
    cursor:pointer;
    color:#1e293b;
    text-decoration:none;
}
.uot-item:hover {
    background:#f8fafc;
}
.uot-item i {
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
    0 8px 20px rgba(0,0,0,.12);
}
.uot-item svg {
    width:25px;
    height:25px;
    fill:#fff;
}
.uot-item span {
    font-size:15px;
    font-weight:700;
}
.uot-item small {
    display:block;
    margin-top:5px;
    color:#64748b;
    font-size:12px;
}

/* Icons */
.uot-icon.tracker {
    background:#2563eb;
}
.uot-icon.telegram {
    background:#229ed9;
}
.uot-icon.whatsapp {
    background:#22c55e;
}
.uot-icon.instagram {
    background:
    linear-gradient(
    135deg,
    #833ab4,
    #fd1d1d
    );
}
.uot-icon.phone {
    background:#0f766e;
}

/* ===============================
 Modal
================================ */
.uot-modal {
    position:fixed;
    inset:0;
    z-index:1000000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
}
.uot-overlay {
    position:absolute;
    inset:0;
    background:
    rgba(15,23,42,.65);
    backdrop-filter:
    blur(8px);
}
.uot-dialog {
    position:relative;
    width:100%;
    max-width:440px;
    max-height:90vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:28px;
    box-shadow:
    0 40px 100px rgba(0,0,0,.3);
}
.uot-dialog-head {
    flex-shrink:0;
    padding:24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    background:
    linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );
}
.uot-close {
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    rgba(255,255,255,.18);
}
.uot-close svg {
    width:22px;
    height:22px;
    fill:#fff;
}

/* ===============================
 Form
================================ */
.uot-body {
    padding:26px;
    overflow-y:auto;
}
.uot-input {
    width:100%;
    height:52px;
    padding:15px;
    margin:8px 0 18px;
    border:
    1px solid #e2e8f0;
    border-radius:16px;
    background:#f8fafc;
    font:inherit;
}
.uot-submit {
    width:100%;
    height:54px;
    border:0;
    border-radius:16px;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    background:
    linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );
}

/* ===============================
   Result Card
================================ */
.uot-result-card,
.premium-result {
    width:100%;
    margin-top:22px;
    padding:22px;
    border-radius:24px;
    background:
    linear-gradient(
        180deg,
        #f0fdfa,
        #ffffff
    );
    border:
    1px solid #ccfbf1;
    overflow:hidden;
}
/* Order Header */
.uot-order-head {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding-bottom:15px;
    margin-bottom:20px;
    border-bottom:
    1px solid #e5e7eb;
}
.uot-order-head span {
    color:#64748b;
    font-size:13px;
}
.uot-order-head strong {
    color:#0f766e;
    font-size:22px;
}
/* Status */
.uot-status-box {
    text-align:center;
}
.uot-status-title {
    font-size:20px;
    font-weight:800;
    color:#0f766e;
    margin-bottom:10px;
}
.uot-status-box p {
    color:#64748b;
    font-size:13px;
    line-height:2;
}

/* ===============================
 Progress
================================ */
.uot-progress-wrap {
    margin-top:20px;
}
.uot-progress-label {
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    color:#475569;
    font-size:12px;
}
.uot-progress-label b {
    color:#0f766e;
}
.uot-progress {
    width:100%;
    height:12px;
    border-radius:20px;
    overflow:hidden;
    background:#d1fae5;
}
.uot-progress span {
    display:block;
    height:100%;
    border-radius:20px;
    background:
    linear-gradient(
        90deg,
        #14b8a6,
        #10b981
    );
}

/* ===============================
 Timeline
================================ */
.uot-timeline {
    margin-top:25px;
}
.uot-step {
    display:flex;
    gap:14px;
    position:relative;
    padding-bottom:22px;
}
.uot-step:not(:last-child):before {
    content:"";
    position:absolute;
    right:15px;
    top:34px;
    width:2px;
    height:35px;
    background:#e2e8f0;
}
.uot-step.active:not(:last-child):before {
    background:#14b8a6;
}
.uot-step span {
    width:32px;
    height:32px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e2e8f0;
    color:#94a3b8;
    font-weight:bold;
}
.uot-step.active span {
    background:#14b8a6;
    color:#fff;
}
.uot-step b {
    display:block;
    color:#334155;
}
.uot-step small {
    color:#94a3b8;
}

/* ===============================
 Tracking Code
================================ */
.uot-code-box,
.premium-code {
    margin-top:18px;
    padding:18px;
    border-radius:18px;
    text-align:center;
    background:#fff;
    border:
    1px solid #e2e8f0;
}
.uot-code-box span,
.premium-code span {
    display:block;
    color:#718096;
    margin-bottom:10px;
}
.uot-code-box b,
.premium-code b {
    display:block;
    color:#0f766e;
    font-size:15px;
    line-height:2;
    word-break:break-word;
    overflow-wrap:anywhere;
}
.uot-code-box a,
.premium-code a {
    display:inline-block;
    margin-top:14px;
    padding:10px 18px;
    border-radius:14px;
    background:#eff6ff;
    color:#2563eb;
    text-decoration:none;
    font-size:13px;
}

/* ===============================
 Mobile Responsive
================================ */
@media(max-width:600px){
    #uot-widget {
        right:12px;
        bottom:20px;
    }
    .uot-launcher {
        width:58px;
        height:58px;
    }
    .uot-panel {
        position:fixed;
        right:12px;
        bottom:90px;
        width:
        calc(100vw - 24px);
        max-width:none;
        max-height:
        calc(100vh - 120px);
        overflow-y:auto;
        border-radius:24px;
    }
    .uot-head {
        padding:22px 18px;
    }
    .uot-item {
        min-height:68px;
        padding:12px 15px;
    }
    .uot-modal {
        align-items:flex-start;
        padding:12px;
    }
    .uot-dialog {
        width:100%;
        max-width:none;
        margin-top:10px;
        max-height:
        calc(100vh - 24px);
        border-radius:24px;
    }
    .uot-body {
        padding:18px;
    }
    .uot-result-card,
    .premium-result {
        padding:18px;
        border-radius:22px;
    }
    .uot-order-head strong {
        font-size:20px;
    }
    .uot-status-title {
        font-size:18px;
    }
    .premium-code b {
        font-size:13px;
    }
}

/* ===============================
 Small Phones
================================ */
@media(max-width:380px){
    .uot-body {
        padding:15px;
    }
    .uot-result-card,
    .premium-result {
        padding:15px;
    }
    .uot-item span {
        font-size:14px;
    }
}

/* =========================================
   Mabani UOT Visual Fix Patch
   Floating Button + Pulse + Modal Close
========================================= */
/* دکمه شناور اصلی */
#uot-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999999;
    width: auto;
    height: auto;
    overflow: visible !important;
}

/* خود دکمه */
#uot-widget .uot-launcher {
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    box-shadow:
        0 16px 35px rgba(15, 118, 110, 0.35),
        0 0 0 8px rgba(20, 184, 166, 0.10) !important;
    cursor: pointer;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* حذف استایل‌های قالب که باعث مربع شدن می‌شوند */
#uot-widget .uot-launcher::before,
#uot-widget .uot-launcher::after {
    display: none !important;
    content: none !important;
}

/* آیکن‌های داخل دکمه */
#uot-widget .uot-launcher svg {
    position: absolute;
    width: 30px !important;
    height: 30px !important;
    fill: #ffffff !important;
    transition: opacity .25s ease, transform .25s ease;
}

#uot-widget .uot-icon-chat {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

#uot-widget .uot-icon-close {
    opacity: 0;
    transform: scale(.65) rotate(-90deg);
}

#uot-widget.is-open .uot-icon-chat {
    opacity: 0;
    transform: scale(.65) rotate(90deg);
}

#uot-widget.is-open .uot-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* حلقه پالس */
#uot-widget .uot-launcher-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(20, 184, 166, 0.45) !important;
    pointer-events: none;
    animation: uotPulseRing 1.8s infinite ease-out;
}

/* یک حلقه دوم برای جان بیشتر */
#uot-widget .uot-launcher::after {
    content: "" !important;
    position: absolute !important;
    inset: -8px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(20, 184, 166, 0.20) !important;
    animation: uotPulseOuter 1.8s infinite ease-out;
    pointer-events: none;
}

/* وقتی پنل باز است، پالس متوقف شود */
#uot-widget.is-open .uot-launcher-ring,
#uot-widget.is-open .uot-launcher::after {
    animation-play-state: paused;
    opacity: 0.35;
}

@keyframes uotPulseRing {
    0% {
        transform: scale(1);
        opacity: .85;
    }
    70% {
        transform: scale(1.28);
        opacity: 0;
    }
    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@keyframes uotPulseOuter {
    0% {
        transform: scale(.92);
        opacity: .55;
    }
    70% {
        transform: scale(1.35);
        opacity: 0;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* حالت هاور */
#uot-widget .uot-launcher:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 22px 45px rgba(15, 118, 110, 0.40),
        0 0 0 10px rgba(20, 184, 166, 0.12) !important;
}

/* =========================
   دکمه بستن مودال پیگیری سفارش
========================= */
.uot-dialog-head {
    position: relative;
}

.uot-dialog-head .uot-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}

.uot-dialog-head .uot-close:hover {
    background: rgba(255,255,255,.24) !important;
}

.uot-dialog-head .uot-close::before,
.uot-dialog-head .uot-close::after {
    display: none !important;
    content: none !important;
}

.uot-dialog-head .uot-close svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* اگر hidden باشد واقعا مخفی شود */
.uot-modal[hidden] {
    display: none !important;
}

/* موبایل */
@media (max-width: 600px) {
    #uot-widget {
        right: 14px;
        bottom: 14px;
    }

    #uot-widget .uot-launcher {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
    }

    .uot-dialog-head .uot-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .uot-dialog-head .uot-close svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =========================================
   Mabani UOT Customer Account Card
========================================= */
.mabani-uot-account-card {
    margin:25px 0;
    padding:22px;
    border-radius:18px;
    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );
    border:1px solid #e5e7eb;
    box-shadow:
    0 12px 30px rgba(0,0,0,.06);
    font-family:inherit;
}
.mabani-uot-card-head {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}
.mabani-uot-card-icon {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#ecfeff;
    font-size:22px
}
.mabani-uot-card-head strong {
    display:block;
    font-size:16px;
    color:#111827;
}
.mabani-uot-card-head span {
    display:block;
    margin-top:4px;
    color:#6b7280;
    font-size:13px;
}
.mabani-uot-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eee;
    font-size:14px;
}
.mabani-uot-row span {
    color:#6b7280;
}
.mabani-uot-row b {
    color:#111827;
}
.mabani-uot-code-box {
    margin-top:18px;
    padding:14px;
    background:#f9fafb;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.mabani-uot-code-box span {
    font-size:12px;
    color:#6b7280;
}
.mabani-uot-code-box strong {
    direction:ltr;
    font-size:15px;
    letter-spacing:1px;
}
.mabani-uot-copy {
    border:0;
    background:#0f766e;
    color:white;
    padding:7px 14px;
    border-radius:9px;
    cursor:pointer;
    font-size:12px;
}
.mabani-uot-copy:hover {
    opacity:.9;
}
.mabani-uot-track-button {
    display:flex;
    justify-content:center;
    margin-top:16px;
    padding:13px;
    border-radius:12px;
    background:#0f766e;
    color:white !important;
    text-decoration:none !important;
    font-weight:700;
}
.mabani-uot-track-button:hover {
    opacity:.9;
}
@media(max-width:600px){
    .mabani-uot-code-box {
        flex-wrap:wrap;
    }
    .mabani-uot-code-box strong {
        width:100%;
        order:1;
    }
    .mabani-uot-copy {
        width:100%;
    }
}

/* Fix hover color - Mabani UOT Customer Tracking Button */
.mabani-uot-track-button,
.mabani-uot-track-button:visited {
    background: #0f766e !important;
    color: #ffffff !important;
}
.mabani-uot-track-button:hover,
.mabani-uot-track-button:focus,
.mabani-uot-track-button:active {
    background: #115e59 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}
/* اگر قالب روی span داخل لینک رنگ اعمال کند */
.mabani-uot-track-button span {
    color: #ffffff !important;
}
/* جلوگیری از transition های قالب */
.mabani-uot-track-button:hover span {
    color: #ffffff !important;
}

/* =====================================
   Mabani UOT - Fix My Account Layout
===================================== */
#uot-widget .uot-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}
/* همه آیتم‌ها چه a چه button یکسان شوند */
#uot-widget button.uot-item,
#uot-widget a.uot-item {
    font-family: inherit !important;
    line-height: normal !important;
}
/* جلوگیری از دخالت قالب روی لینک‌ها */
#uot-widget a.uot-item:hover,
#uot-widget a.uot-item:focus {
    text-decoration: none !important;
}
/* بخش آیکن */
#uot-widget .uot-item .uot-icon {
    flex: 0 0 46px !important;
    width:46px !important;
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
/* متن */
#uot-widget .uot-item > span {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    text-align:right !important;
}
/* عنوان */
#uot-widget .uot-item > span:first-line {
    line-height:1.8 !important;
}
/* زیرعنوان */
#uot-widget .uot-item small {
    display:block !important;
    margin-top:3px !important;
    line-height:1.7 !important;
}
/* حذف فاصله های قالب ووکامرس */
.woocommerce-account #uot-widget .uot-item {
    margin-bottom:0 !important;
}