/*
 * Yuluma Conversie Booster — Trust & Urgency styles
 *
 * Covers:
 *  - .ycb-low-stock   Low stock urgency message (product page + checkout)
 *  - .ycb-fsp         Free shipping progress bar
 *  - .ycb-trust-box   Trust box preset items
 *
 * All classes are prefixed ycb- to prevent collisions.
 */

/* ============================================================
   Low stock urgency
   ============================================================ */

.ycb-low-stock {
    display:     inline-block;
    margin:      0.75rem 0 0;
}

.ycb-low-stock--checkout {
    margin:      0.25rem 0 0;
    display:     block;
}

.ycb-low-stock__text {
    display:       inline-flex;
    align-items:   center;
    gap:           0.35rem;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         #b45309;
    background:    #fffbeb;
    border:        1px solid #fde68a;
    border-radius: 4px;
    padding:       0.3rem 0.65rem;
    line-height:   1.3;
}

.ycb-low-stock__text svg {
    flex-shrink: 0;
    color:       #d97706;
}

/* ============================================================
   Free shipping progress bar
   ============================================================ */

.ycb-fsp-wrap {
    /* Fragment target — always present in DOM even when empty */
}

.ycb-fsp {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Inside OC sidebar — inherits CSS vars */
.ycb-optimized-checkout .ycb-fsp {
    border-bottom-color: var(--ycb-color-border, #e5e7eb);
}

.ycb-fsp__text {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.8125rem;
    color:       #374151;
    margin:      0 0 0.5rem;
    line-height: 1.3;
}

.ycb-optimized-checkout .ycb-fsp__text {
    color: var(--ycb-color-text, #374151);
}

.ycb-fsp__text svg {
    flex-shrink: 0;
    color:       #6b7280;
}

.ycb-fsp__text--reached {
    color:       #15803d;
    font-weight: 600;
}

.ycb-fsp__text--reached svg {
    color: #16a34a;
}

.ycb-fsp__track {
    height:        6px;
    background:    #e5e7eb;
    border-radius: 99px;
    overflow:      hidden;
}

.ycb-optimized-checkout .ycb-fsp__track {
    background: var(--ycb-color-border, #e5e7eb);
}

.ycb-fsp__fill {
    height:           100%;
    background:       #16a34a;
    border-radius:    99px;
    transition:       width 0.4s ease;
}

.ycb-optimized-checkout .ycb-fsp__fill {
    background: var(--ycb-color-accent, #16a34a);
}

.ycb-fsp__fill--reached {
    background: #16a34a;
}

/* ============================================================
   Trust box
   ============================================================ */

.ycb-trust-box {
    margin-top:     1.25rem;
    padding-top:    1.25rem;
    border-top:     1px solid #e5e7eb;
}

.ycb-optimized-checkout .ycb-trust-box {
    border-top-color: var(--ycb-color-border, #e5e7eb);
}

/* Layout: list (default) */
.ycb-trust-box--list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.ycb-trust-box--list .ycb-trust-box__item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.ycb-trust-box--list .ycb-trust-box__icon {
    display:     flex;
    align-items: center;
    color:       #16a34a;
    flex-shrink: 0;
}

.ycb-optimized-checkout .ycb-trust-box--list .ycb-trust-box__icon {
    color: var(--ycb-color-accent, #16a34a);
}

.ycb-trust-box--list .ycb-trust-box__label {
    font-size:  0.8125rem;
    color:      #374151;
    font-weight:500;
}

.ycb-optimized-checkout .ycb-trust-box--list .ycb-trust-box__label {
    color: var(--ycb-color-text, #374151);
}

/* Layout: cards */
.ycb-trust-box--cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap:                   0.5rem;
}

.ycb-trust-box--cards .ycb-trust-box__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.65rem 0.5rem;
    border:         1px solid #e5e7eb;
    border-radius:  8px;
    background:     #f9fafb;
    text-align:     center;
}

.ycb-optimized-checkout .ycb-trust-box--cards .ycb-trust-box__item {
    border-color: var(--ycb-color-border, #e5e7eb);
    background:   var(--ycb-color-bg, #f9fafb);
}

.ycb-trust-box--cards .ycb-trust-box__icon {
    display:     flex;
    align-items: center;
    color:       #16a34a;
}

.ycb-optimized-checkout .ycb-trust-box--cards .ycb-trust-box__icon {
    color: var(--ycb-color-accent, #16a34a);
}

.ycb-trust-box--cards .ycb-trust-box__label {
    font-size:   0.6875rem;
    font-weight: 600;
    color:       #374151;
    line-height: 1.2;
}

.ycb-optimized-checkout .ycb-trust-box--cards .ycb-trust-box__label {
    color: var(--ycb-color-text, #374151);
}

/* Layout: minimal */
.ycb-trust-box--minimal {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.75rem 1.25rem;
}

.ycb-trust-box--minimal .ycb-trust-box__item {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}

.ycb-trust-box--minimal .ycb-trust-box__icon {
    display:    flex;
    align-items:center;
    color:      #6b7280;
    flex-shrink:0;
}

.ycb-trust-box--minimal .ycb-trust-box__label {
    font-size: 0.75rem;
    color:     #6b7280;
}

/* ============================================================
   Trust box — content wrapper (label + description)
   ============================================================ */

.ycb-trust-box__content {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    min-width:      0;
}

.ycb-trust-box__desc {
    font-size:  0.72rem;
    color:      #9ca3af;
    line-height:1.2;
}

.ycb-optimized-checkout .ycb-trust-box__desc {
    color: var(--ycb-color-muted, #9ca3af);
}

/* Cards layout: center-align description */
.ycb-trust-box--cards .ycb-trust-box__content {
    align-items: center;
}

/* ============================================================
   Trust box — responsive (mobile)
   ============================================================ */

@media (max-width: 600px) {
    /* Cards wrap to 2 columns on small screens */
    .ycb-trust-box--cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* List stays single column but more compact */
    .ycb-trust-box--list {
        gap: 0.35rem;
    }

    /* Minimal wraps tightly */
    .ycb-trust-box--minimal {
        gap: 0.5rem 0.75rem;
    }

    /* Low stock badge wraps cleanly */
    .ycb-low-stock__text {
        font-size: 0.75rem;
        padding:   0.25rem 0.5rem;
    }
}