/* ============================================================
   ULTRAKIT PROGRESS BAR — Premium
   10 Bar Styles × 6 Track Shapes × 5 Label Positions
   Circle / Half-Arc · Stripe · Glow · Bubble Tip · Step Segmented
   ============================================================ */

.ultrakit-pb-wrapper {
    --ultrakit-pb-accent:  #6c5ce7;
    --ultrakit-pb-accent2: #a29bfe;
    width: 100%;
}

/* ============================================================
   GRID
   ============================================================ */
.ultrakit-pb-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}
.ultrakit-pb-circle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ============================================================
   LABEL ROW (above / below)
   ============================================================ */
.ultrakit-pb-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}
.ultrakit-pb-label-row-below { margin-bottom: 0; margin-top: 8px; }
.ultrakit-pb-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ultrakit-pb-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--ultrakit-pb-accent);
}
.ultrakit-pb-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    display: block;
}
.ultrakit-pb-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--ultrakit-pb-accent);
    white-space: nowrap;
    flex-shrink: 0;
}
.ultrakit-pb-desc {
    font-size: 12px;
    color: #aaa;
    margin: 6px 0 0;
}

/* ============================================================
   TRACK & FILL BASE
   ============================================================ */
.ultrakit-pb-track {
    position: relative;
    width: 100%;
    height: 14px;
    background: #eeeeee;
    overflow: hidden;
}
.ultrakit-pb-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background-color: var(--ultrakit-pb-accent);
    display: flex;
    align-items: center;
    overflow: visible;
}

/* ============================================================
   TRACK SHAPES
   ============================================================ */
.ultrakit-pb-track-shape-rounded .ultrakit-pb-track,
.ultrakit-pb-track-shape-rounded .ultrakit-pb-fill { border-radius: 6px; }

.ultrakit-pb-track-shape-pill .ultrakit-pb-track,
.ultrakit-pb-track-shape-pill .ultrakit-pb-fill { border-radius: 999px; }

.ultrakit-pb-track-shape-square .ultrakit-pb-track,
.ultrakit-pb-track-shape-square .ultrakit-pb-fill { border-radius: 0; }

.ultrakit-pb-track-shape-beveled .ultrakit-pb-track { clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); }
.ultrakit-pb-track-shape-beveled .ultrakit-pb-fill  { clip-path: polygon(0 0,100% 0,calc(100% - 6px) 100%,0% 100%); }

.ultrakit-pb-track-shape-arrow .ultrakit-pb-track { clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); border-radius: 0; }
.ultrakit-pb-track-shape-arrow .ultrakit-pb-fill  { clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%); border-radius: 0; }

.ultrakit-pb-track-shape-wave .ultrakit-pb-track { clip-path: polygon(0% 20%,2% 0%,4% 20%,6% 0%,8% 20%,10% 0%,12% 20%,14% 0%,16% 20%,18% 0%,20% 20%,22% 0%,24% 20%,26% 0%,28% 20%,30% 0%,32% 20%,34% 0%,36% 20%,38% 0%,40% 20%,42% 0%,44% 20%,46% 0%,48% 20%,50% 0%,52% 20%,54% 0%,56% 20%,58% 0%,60% 20%,62% 0%,64% 20%,66% 0%,68% 20%,70% 0%,72% 20%,74% 0%,76% 20%,78% 0%,80% 20%,82% 0%,84% 20%,86% 0%,88% 20%,90% 0%,92% 20%,94% 0%,96% 20%,98% 0%,100% 20%,100% 100%,0% 100%); border-radius: 0; }

/* ============================================================
   BAR STYLES
   ============================================================ */

/* Style 1: Classic Flat (default) */
.ultrakit-pb-style-1 .ultrakit-pb-fill { background-color: var(--ultrakit-pb-accent); }

/* Style 2: Gradient */
.ultrakit-pb-style-2 .ultrakit-pb-fill {
    background: linear-gradient(90deg, var(--ultrakit-pb-accent) 0%, var(--ultrakit-pb-accent2) 100%);
}

/* Style 3: Striped Animated */
.ultrakit-pb-style-3 .ultrakit-pb-fill {
    background: repeating-linear-gradient(
        -45deg,
        var(--ultrakit-pb-accent),
        var(--ultrakit-pb-accent) 10px,
        rgba(255,255,255,0.15) 10px,
        rgba(255,255,255,0.15) 20px
    );
    background-size: 28px 28px;
    animation: ultrakit-pb-stripes 0.8s linear infinite;
}
@keyframes ultrakit-pb-stripes {
    from { background-position: 0 0; }
    to   { background-position: 28px 0; }
}

/* Style 4: Glow Neon */
.ultrakit-pb-style-4 .ultrakit-pb-track { background: #1a1a2e; }
.ultrakit-pb-style-4 .ultrakit-pb-fill {
    background: linear-gradient(90deg, var(--ultrakit-pb-accent), var(--ultrakit-pb-accent2));
    box-shadow: 0 0 12px var(--ultrakit-pb-accent), 0 0 30px var(--ultrakit-pb-accent) , 0 0 6px var(--ultrakit-pb-accent2);
    border-radius: 999px !important;
}
.ultrakit-pb-style-4 .ultrakit-pb-track { border-radius: 999px !important; }
.ultrakit-pb-style-4 .ultrakit-pb-title { color: #fff; }
.ultrakit-pb-style-4 .ultrakit-pb-pct   { color: var(--ultrakit-pb-accent2); }

/* Style 5: Thin Elegant */
.ultrakit-pb-style-5 .ultrakit-pb-track {
    height: 4px !important;
    background: rgba(108,92,231,0.15);
    border-radius: 2px !important;
    overflow: visible;
}
.ultrakit-pb-style-5 .ultrakit-pb-fill {
    height: 4px !important;
    border-radius: 2px !important;
    background-color: var(--ultrakit-pb-accent);
}
/* Dot at fill end */
.ultrakit-pb-style-5 .ultrakit-pb-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ultrakit-pb-accent);
    box-shadow: 0 0 0 4px rgba(108,92,231,0.2);
}

/* Style 6: Step Segmented */
.ultrakit-pb-style-6 .ultrakit-pb-track {
    display: flex;
    gap: 3px;
    background: transparent;
    overflow: visible;
}
.ultrakit-pb-step {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    background: #eeeeee;
    transition: background 0.3s ease;
}
.ultrakit-pb-step.filled { background: var(--ultrakit-pb-accent); }

/* Style 7: Bubble Tip */
.ultrakit-pb-style-7 .ultrakit-pb-track { overflow: visible; }
.ultrakit-pb-tip {
    position: absolute;
    right: 0;
    top: calc(-100% - 14px);
    background: var(--ultrakit-pb-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
    transform: translateX(50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ultrakit-pb-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ultrakit-pb-accent);
}

/* Style 8: Half-Arc (rendered via SVG in PHP) */
.ultrakit-pb-half-svg { display: block; }
.ultrakit-pb-half-label {
    text-align: center;
    margin-top: 6px;
}
.ultrakit-pb-half-label .ultrakit-pb-pct  { font-size: 24px; font-weight: 800; display: block; }
.ultrakit-pb-half-label .ultrakit-pb-title{ font-size: 13px; color: #888; }

/* Style 9: Full Circle */
.ultrakit-pb-circle-item { text-align: center; }
.ultrakit-pb-circle-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ultrakit-pb-svg { display: block; }
.ultrakit-pb-circle-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
}
.ultrakit-pb-circle-inner .ultrakit-pb-pct  { font-size: 28px; font-weight: 800; color: var(--ultrakit-pb-accent); }
.ultrakit-pb-circle-inner .ultrakit-pb-title{ font-size: 12px; color: #888; text-align: center; }

/* Style 10: Glassmorphism */
.ultrakit-pb-style-10 .ultrakit-pb-track {
    background: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
}
.ultrakit-pb-style-10 .ultrakit-pb-fill {
    background: rgba(108,92,231,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ============================================================
   LABEL INSIDE FILL
   ============================================================ */
.ultrakit-pb-inside-label {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}
.ultrakit-pb-label-inside .ultrakit-pb-title { color: #fff; font-size: 12px; }
.ultrakit-pb-label-inside .ultrakit-pb-pct   { color: rgba(255,255,255,0.8); font-size: 12px; }

/* ============================================================
   ENTRY ANIMATION
   ============================================================ */
.ultrakit-pb-item {
    opacity: 0;
    transform: translateX(-16px);
}
.ultrakit-pb-item.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ultrakit-pb-circle-item {
    opacity: 0;
    transform: scale(0.9);
}
.ultrakit-pb-circle-item.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .ultrakit-pb-circle-grid { grid-template-columns: repeat(2,1fr) !important; }
    .ultrakit-pb-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .ultrakit-pb-circle-grid { grid-template-columns: 1fr !important; }
}