/* ═══════════════════════════════════════════════
   SVS × WCPA — Professional Addon Styling
   Auto-injected when WCPA plugin detected
   ═══════════════════════════════════════════════ */

:root {
    --wcpa-primary: #111;
    --wcpa-border: #e2e2e2;
    --wcpa-border-hover: #999;
    --wcpa-text: #333;
    --wcpa-muted: #777;
    --wcpa-bg: #fff;
    --wcpa-bg-hover: #f7f7f7;
    --wcpa-active-bg: #111;
    --wcpa-active-text: #fff;
    --wcpa-radius: 8px;
    --wcpa-speed: 0.18s;
}


/* ═══════════════════════════════════════════════
   FORM LAYOUT
   ═══════════════════════════════════════════════ */

.wcpa_form_outer {
    padding: 0 !important;
    margin: 0 !important;
}

/* Each field group */
.wcpa_form_item {
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Label / title */
.wcpa_form_item > label,
.wcpa_form_item > .wcpa_label,
.wcpa_form_item .wcpa-field-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--wcpa-muted) !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* Required asterisk */
.wcpa_form_item > label .required,
.wcpa_form_item > label .wcpa_required {
    color: #dc2626 !important;
    font-weight: 400 !important;
}

/* Description text */
.wcpa_form_item .wcpa_desc,
.wcpa_form_item .wcpa-field-desc,
.wcpa_form_item > p {
    font-size: 12px !important;
    color: #999 !important;
    margin: -6px 0 10px !important;
    line-height: 1.5 !important;
}


/* ═══════════════════════════════════════════════
   COLOR GROUP BUTTONS (Type, Size, Yes/No, etc.)
   ═══════════════════════════════════════════════ */

/* Container */
.wcpa-color-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual button */
.wcpa-color-group-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 38px !important;
    padding: 0 16px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--wcpa-text) !important;
    background: var(--wcpa-bg) !important;
    border: 1.5px solid var(--wcpa-border) !important;
    border-radius: var(--wcpa-radius) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all var(--wcpa-speed) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    outline: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    margin: 0 !important;
    float: none !important;
    /* Remove default WCPA background color */
    background-color: var(--wcpa-bg) !important;
}

/* Remove WCPA default squircle/circle shape */
.wcpa-color-group-item.wcpa-cg-squircle,
.wcpa-color-group-item.wcpa-cg-circle,
.wcpa-color-group-item.wcpa-cg-square {
    border-radius: var(--wcpa-radius) !important;
    width: auto !important;
    height: 38px !important;
    min-width: 42px !important;
    aspect-ratio: unset !important;
}

/* Hover state */
.wcpa-color-group-item:hover:not(.selected):not(.wcpa_selected):not(.active) {
    background: var(--wcpa-bg-hover) !important;
    border-color: var(--wcpa-border-hover) !important;
}

/* ── Selected / Active state ── */
.wcpa-color-group-item.selected,
.wcpa-color-group-item.wcpa_selected,
.wcpa-color-group-item.active,
.wcpa-color-group-item[aria-checked="true"],
.wcpa-color-group-item.wcpa-cg-border.selected,
.wcpa-color-group-item.wcpa-cg-border.active {
    background: var(--wcpa-active-bg) !important;
    color: var(--wcpa-active-text) !important;
    border-color: var(--wcpa-active-bg) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Label text inside button ── */
.wcpa-color-group-item .wcpa-cg-label,
.wcpa-color-group-item span:not(.wcpa_price):not(.wcpa-cg-price):not(.price-val) {
    font-size: 13px !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* ── Color dot (if WCPA shows a color swatch inside) ── */
.wcpa-color-group-item .wcpa-cg-color,
.wcpa-color-group-item .color-preview {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    flex-shrink: 0 !important;
}


/* ═══════════════════════════════════════════════
   AUTO-DETECTED COLOR SWATCHES
   When our JS detects a color name in WCPA label,
   it adds data-svs-color attribute and .svs-wcpa-color class
   ═══════════════════════════════════════════════ */

.wcpa-color-group-item.svs-wcpa-color {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    overflow: visible !important;
}

.wcpa-color-group-item.svs-wcpa-color .svs-wcpa-dot {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.wcpa-color-group-item.svs-wcpa-color .wcpa-cg-label,
.wcpa-color-group-item.svs-wcpa-color > span {
    display: none !important;
}

.wcpa-color-group-item.svs-wcpa-color.selected,
.wcpa-color-group-item.svs-wcpa-color.active,
.wcpa-color-group-item.svs-wcpa-color.wcpa_selected {
    border-color: var(--wcpa-primary) !important;
    background: none !important;
}

/* Tooltip for color swatches */
.wcpa-color-group-item.svs-wcpa-color .svs-wcpa-tip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(3px) !important;
    background: var(--wcpa-primary) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 9px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.12s, transform 0.12s !important;
    z-index: 20 !important;
}

.wcpa-color-group-item.svs-wcpa-color .svs-wcpa-tip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 4px solid transparent !important;
    border-top-color: var(--wcpa-primary) !important;
}

.wcpa-color-group-item.svs-wcpa-color:hover .svs-wcpa-tip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* ═══════════════════════════════════════════════
   HIDE PRICE VALUES IN BUTTONS
   Transform "S ($0.00)" → "S"
   Done by JS, but also hide via CSS for safety
   ═══════════════════════════════════════════════ */

.svs-wcpa-enhanced .wcpa-color-group-item .wcpa_price,
.svs-wcpa-enhanced .wcpa-color-group-item .wcpa-cg-price,
.svs-wcpa-enhanced .wcpa_form_item .wcpa-addon-price-display,
.svs-wcpa-enhanced .wcpa_form_item > .wcpa_price_val {
    display: none !important;
}


/* ═══════════════════════════════════════════════
   TEXT INPUT FIELD (Custom Name/Number)
   ═══════════════════════════════════════════════ */

.wcpa_form_item input[type="text"],
.wcpa_form_item textarea,
.wcpa_form_item select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid var(--wcpa-border) !important;
    border-radius: var(--wcpa-radius) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--wcpa-text) !important;
    background: #fff !important;
    transition: border-color var(--wcpa-speed) !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.wcpa_form_item input[type="text"]:focus,
.wcpa_form_item textarea:focus {
    border-color: var(--wcpa-primary) !important;
}


/* ═══════════════════════════════════════════════
   PRICE SUMMARY (Options Price / Product Price / Total)
   ═══════════════════════════════════════════════ */

.wcpa_price_summary,
.wcpa-summary-section {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #eee !important;
}

.wcpa_price_summary table,
.wcpa-summary-section table {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
}

.wcpa_price_summary td,
.wcpa-summary-section td {
    padding: 4px 0 !important;
    border: none !important;
    font-size: 14px !important;
    color: var(--wcpa-text) !important;
}

.wcpa_price_summary .wcpa-total-label,
.wcpa_price_summary td:first-child {
    font-weight: 500 !important;
    color: var(--wcpa-muted) !important;
}

.wcpa_price_summary .wcpa-total-val,
.wcpa_price_summary td:last-child {
    text-align: right !important;
    font-weight: 600 !important;
}

/* Total row */
.wcpa_price_summary tr:last-child td,
.wcpa_price_summary .wcpa-total-row td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--wcpa-primary) !important;
    padding-top: 8px !important;
}


/* ═══════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════ */

.wcpa-color-group-item {
    animation: svsWcpaUp 0.2s ease both;
}

.wcpa-color-group-item:nth-child(1) { animation-delay: 0.02s; }
.wcpa-color-group-item:nth-child(2) { animation-delay: 0.04s; }
.wcpa-color-group-item:nth-child(3) { animation-delay: 0.06s; }
.wcpa-color-group-item:nth-child(4) { animation-delay: 0.08s; }
.wcpa-color-group-item:nth-child(5) { animation-delay: 0.10s; }
.wcpa-color-group-item:nth-child(n+6) { animation-delay: 0.12s; }

@keyframes svsWcpaUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .wcpa-color-group { gap: 6px !important; }
    .wcpa-color-group-item {
        min-width: 38px !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }
    .wcpa-color-group-item.svs-wcpa-color {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
    }
    .wcpa-color-group-item.svs-wcpa-color .svs-wcpa-tip {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════
   FLATSOME OVERRIDES FOR WCPA
   ═══════════════════════════════════════════════ */

.woocommerce .wcpa_form_outer .wcpa-color-group-item,
.product-info .wcpa_form_outer .wcpa-color-group-item,
.product-lightbox .wcpa_form_outer .wcpa-color-group-item {
    box-shadow: none !important;
    outline: none !important;
    float: none !important;
}