/* =========================================================
   نوار نمایشی ارسال سریع تهران — استایل فرانت‌اند
   رنگ‌ها از طریق متغیرهای CSS از پنل مدیریت تزریق می‌شوند.
   مقادیر fallback زیر، حالت پیش‌فرض را تضمین می‌کنند.
   ========================================================= */

.tfs-progress-wrap {
    --tfs-c-start: #f5a623;
    --tfs-c-end: #ff6b00;
    --tfs-c-done-1: #34c759;
    --tfs-c-done-2: #00a844;
    --tfs-bg-1: #fff8e7;
    --tfs-bg-2: #fff3d4;
    --tfs-border: #f5a623;
    --tfs-text: #4a3500;
    --tfs-track: #ffe5a0;
    --tfs-radius: 14px;

    direction: rtl;
    background: linear-gradient(135deg, var(--tfs-bg-1) 0%, var(--tfs-bg-2) 100%);
    border: 2px solid var(--tfs-border);
    border-radius: var(--tfs-radius);
    padding: 16px 20px 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    position: relative;
    overflow: hidden;
    color: var(--tfs-text);
}

.tfs-progress-wrap::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    background: radial-gradient(circle at top right, rgba(0, 0, 0, .06) 0%, transparent 70%);
    pointer-events: none;
}

/* Header row */
.tfs-progress-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--tfs-text);
    line-height: 1.6;
}

.tfs-bolt {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    animation: tfs-pulse 1.8s ease-in-out infinite;
}

@keyframes tfs-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.tfs-label strong { color: var(--tfs-c-end); }

.tfs-label em {
    font-style: normal;
    font-weight: 700;
    color: var(--tfs-c-end);
    text-decoration: underline dotted;
}

/* Track */
.tfs-bar-track {
    position: relative;
    height: 12px;
    background: var(--tfs-track);
    border-radius: 999px;
    overflow: visible;
    margin-bottom: 4px;
}

/* Fill */
.tfs-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tfs-c-start) 0%, var(--tfs-c-end) 100%);
    transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
}

.tfs-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, transparent 60%);
}

.tfs-bar-fill.tfs-bar-complete {
    background: linear-gradient(90deg, var(--tfs-c-done-1) 0%, var(--tfs-c-done-2) 100%);
}

/* Milestone flag */
.tfs-bar-milestone {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* Labels */
.tfs-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: .65;
    margin-top: 2px;
}

/* ---- Mini-cart notice ---- */
.tfs-mini-notice {
    --tfs-bg-1: #fff8e7;
    --tfs-border: #f5a623;
    --tfs-c-end: #ff6b00;
    --tfs-c-done-2: #00a844;

    direction: rtl;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--tfs-bg-1);
    border-right: 3px solid var(--tfs-border);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--tfs-text, #4a3500);
}

.tfs-mini-notice.tfs-mini-free {
    background: #edfff3;
    border-right-color: var(--tfs-c-done-2);
    color: #1a4a2a;
}

.tfs-mini-icon { font-size: 16px; flex-shrink: 0; }
.tfs-mini-notice strong { color: var(--tfs-c-end); }
.tfs-mini-notice.tfs-mini-free strong { color: var(--tfs-c-done-2); }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .tfs-progress-wrap { padding: 12px 14px 10px; }
    .tfs-progress-header { font-size: 13px; }
}