/**
 * sfp-front.css
 * Front-end styles for the Ship From Manager plugin.
 * All selectors are prefixed with .sfp- so they never collide with theme styles.
 * Override any rule in your child theme's style.css without touching this file.
 */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */
.sfp-ship-from-wrap {
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    margin:          0 0 14px;
    font-size:       14px;
    line-height:     1.5;
}

/* ── Main row: flag · label · country · badge ────────────────────────────── */
.sfp-ship-from-row {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
}

/* Flag image */
.sfp-flag {
    width:         24px;
    height:        auto;
    flex-shrink:   0;
    border-radius: 2px;
}

/* "Ships from:" label */
.sfp-label {
    font-weight:   600;
    color:         inherit;
    white-space:   nowrap;
}

/* Country name link */
.sfp-country {
    font-weight:     600;
    color:           inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sfp-country:hover {
    opacity: 0.75;
}

/* ── Authenticity badge ───────────────────────────────────────────────────── */
.sfp-badge {
    display:          inline-flex;
    align-items:      center;
    gap:              4px;
    background-color: #e1f5ee;
    color:            #085041;
    font-size:        12px;
    font-weight:      600;
    padding:          3px 9px;
    border-radius:    4px;
    white-space:      nowrap;
}

/* Small checkmark before the badge text via CSS content */
.sfp-badge::before {
    content:     "✓";
    font-size:   11px;
    line-height: 1;
}

/* ── Delivery row ─────────────────────────────────────────────────────────── */
.sfp-delivery-row {
    font-size:   13px;
    color:       #555;
    padding-left: 32px; /* aligns under the country name, past flag + gap */
}

.sfp-delivery-row strong {
    color: #333;
}

/* ── Dark mode support (respects prefers-color-scheme) ───────────────────── */
@media ( prefers-color-scheme: dark ) {
    .sfp-badge {
        background-color: #0a3728;
        color:            #9fe1cb;
    }

    .sfp-delivery-row {
        color: #aaa;
    }

    .sfp-delivery-row strong {
        color: #ddd;
    }
}