/*
 * PEWC Color Popup — frontend styles
 * Version: 1.0.1
 */

/* Hide DDSlick container when our trigger is present as its sibling */
.pewcp-trigger + .dd-container,
.pewcp-trigger ~ .dd-container {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* CSS custom properties (fallbacks if PHP vars not present)           */
/* ------------------------------------------------------------------ */
:root {
    --pewc-accent:       #c1092c;
    --pewc-accent-hover: #9e0824;
    --pewc-swatch-size:  70px;
    --pewcp-radius:      6px;
    --pewcp-shadow:      0 20px 60px rgba(0, 0, 0, 0.28);
    --pewcp-border:      1px solid #e0e0e0;
    --pewcp-bg:          #ffffff;
    --pewcp-surface:     #f7f7f7;
    --pewcp-text:        #1a1a1a;
    --pewcp-muted:       #777;
    --pewcp-transition:  0.18s ease;
}

/* ------------------------------------------------------------------ */
/* Body lock when popup is open                                         */
/* ------------------------------------------------------------------ */
body.pewcp-body-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Trigger button                                                       */
/* ------------------------------------------------------------------ */
.pewcp-trigger {
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      10px 14px;
    border:       var(--pewcp-border);
    border-radius: var(--pewcp-radius);
    cursor:       pointer;
    background:   var(--pewcp-bg);
    transition:   border-color var(--pewcp-transition), box-shadow var(--pewcp-transition);
    max-width:    420px;
    user-select:  none;
}
.pewcp-trigger:hover,
.pewcp-trigger:focus-visible {
    border-color: var(--pewc-accent);
    outline:      none;
    box-shadow:   0 0 0 2px rgba(var(--pewc-accent), 0.15);
}

.pewcp-trigger-preview {
    width:        52px;
    height:       52px;
    border-radius: calc(var(--pewcp-radius) - 2px);
    overflow:     hidden;
    flex-shrink:  0;
    background:   var(--pewcp-surface);
    border:       var(--pewcp-border);
}
.pewcp-trigger-preview img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.pewcp-no-img {
    display:    block;
    width:      100%;
    height:     100%;
    background: var(--pewcp-surface);
}

.pewcp-trigger-info {
    flex:       1;
    min-width:  0;
}
.pewcp-trigger-title {
    display:     block;
    font-size:   12px;
    color:       var(--pewcp-muted);
    margin-bottom: 3px;
    line-height: 1.2;
}
.pewcp-trigger-value {
    display:     block;
    font-size:   14px;
    font-weight: 600;
    color:       var(--pewcp-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.pewcp-trigger-cta {
    font-size:   13px;
    color:       var(--pewc-accent);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Popup overlay                                                        */
/* ------------------------------------------------------------------ */
.pewcp-popup {
    position: fixed;
    inset:    0;
    z-index:  999999;
}
.pewcp-popup[hidden] {
    display: none;
}

.pewcp-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    animation:  pewcp-fade-in 0.18s ease;
}

@keyframes pewcp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Popup box                                                            */
/* ------------------------------------------------------------------ */
.pewcp-box {
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    background:     var(--pewcp-bg);
    border-radius:  var(--pewcp-radius);
    width:          min(94vw, 700px);
    max-height:     88vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    box-shadow:     var(--pewcp-shadow);
    animation:      pewcp-slide-in 0.2s ease;
}
@keyframes pewcp-slide-in {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Header ---- */
.pewcp-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         15px 20px;
    border-bottom:   var(--pewcp-border);
    flex-shrink:     0;
}
.pewcp-heading {
    margin:      0;
    font-size:   17px;
    font-weight: 600;
    color:       var(--pewcp-text);
    line-height: 1.3;
}
.pewcp-close {
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
    color:      var(--pewcp-muted);
    display:    flex;
    align-items: center;
    border-radius: 4px;
    transition: color var(--pewcp-transition), background var(--pewcp-transition);
}
.pewcp-close:hover,
.pewcp-close:focus-visible {
    color:      var(--pewcp-text);
    background: var(--pewcp-surface);
    outline:    none;
}

/* ---- Preview ---- */
.pewcp-preview {
    display:       flex;
    align-items:   center;
    gap:           16px;
    padding:       14px 20px;
    background:    var(--pewcp-surface);
    border-bottom: var(--pewcp-border);
    flex-shrink:   0;
}
.pewcp-preview-img {
    width:         90px;
    height:        90px;
    border-radius: calc(var(--pewcp-radius) - 1px);
    overflow:      hidden;
    border:        var(--pewcp-border);
    background:    #e8e8e8;
    flex-shrink:   0;
}
.pewcp-preview-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity 0.15s;
}
.pewcp-preview-label {
    margin:    0 0 4px;
    font-size: 12px;
    color:     var(--pewcp-muted);
}
.pewcp-preview-name {
    margin:      0;
    font-size:   15px;
    font-weight: 600;
    color:       var(--pewcp-text);
}

/* ---- Search ---- */
.pewcp-search-wrap {
    padding:       12px 20px 0;
    flex-shrink:   0;
}
.pewcp-search {
    width:         100%;
    box-sizing:    border-box;
    padding:       9px 14px;
    border:        var(--pewcp-border);
    border-radius: calc(var(--pewcp-radius) - 2px);
    font-size:     14px;
    color:         var(--pewcp-text);
    background:    var(--pewcp-bg);
    transition:    border-color var(--pewcp-transition);
}
.pewcp-search:focus {
    outline:      none;
    border-color: var(--pewc-accent);
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--pewc-accent) 15%, transparent);
}

/* ---- Grid ---- */
.pewcp-grid {
    padding:         16px 20px;
    display:         grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pewc-swatch-size, 70px), 1fr));
    gap:             10px;
    overflow-y:      auto;
    flex:            1;
}

.pewcp-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    cursor:         pointer;
    padding:        6px;
    border-radius:  calc(var(--pewcp-radius) - 2px);
    border:         2px solid transparent;
    position:       relative;
    transition:     border-color var(--pewcp-transition), background var(--pewcp-transition);
}
.pewcp-item:hover,
.pewcp-item:focus-visible {
    background:  var(--pewcp-surface);
    border-color: #ccc;
    outline:     none;
}
.pewcp-item.pewcp-selected {
    border-color: var(--pewc-accent);
    background:   color-mix(in srgb, var(--pewc-accent) 8%, transparent);
}

.pewcp-swatch {
    width:         var(--pewc-swatch-size, 70px);
    height:        var(--pewc-swatch-size, 70px);
    border-radius: 3px;
    overflow:      hidden;
    border:        var(--pewcp-border);
    background:    #f0f0f0;
}
.pewcp-swatch img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.pewcp-swatch-blank {
    background: #ddd;
}

.pewcp-name {
    font-size:   11px;
    color:       #555;
    text-align:  center;
    line-height: 1.3;
    word-break:  break-word;
    max-width:   100%;
}
.pewcp-item.pewcp-selected .pewcp-name {
    color:       var(--pewc-accent);
    font-weight: 600;
}

.pewcp-check {
    display:       none;
    position:      absolute;
    top:           4px;
    right:         4px;
    width:         18px;
    height:        18px;
    background:    var(--pewc-accent);
    color:         #fff;
    border-radius: 50%;
    font-size:     11px;
    line-height:   18px;
    text-align:    center;
}
.pewcp-item.pewcp-selected .pewcp-check {
    display: block;
}

/* ---- No results ---- */
.pewcp-no-results {
    padding:    12px 20px;
    color:      var(--pewcp-muted);
    font-style: italic;
    text-align: center;
    flex-shrink: 0;
}

/* ---- Footer ---- */
.pewcp-footer {
    padding:         14px 20px;
    border-top:      var(--pewcp-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    flex-shrink:     0;
    background:      var(--pewcp-bg);
}
.pewcp-footer-selected {
    font-size:   13px;
    color:       var(--pewcp-muted);
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pewcp-confirm {
    background:    var(--pewc-accent);
    color:         #fff;
    border:        none;
    padding:       11px 28px;
    border-radius: calc(var(--pewcp-radius) - 2px);
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    letter-spacing: 0.4px;
    transition:    background var(--pewcp-transition), transform 0.1s;
    flex-shrink:   0;
}
.pewcp-confirm:hover {
    background: var(--pewc-accent-hover);
}
.pewcp-confirm:active {
    transform: scale(0.97);
}
.pewcp-confirm:focus-visible {
    outline:    2px solid var(--pewc-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .pewcp-box {
        top:        auto;
        bottom:     0;
        left:       0;
        right:      0;
        transform:  none;
        width:      100%;
        max-height: 90vh;
        border-radius: var(--pewcp-radius) var(--pewcp-radius) 0 0;
        animation:  pewcp-slide-up 0.22s ease;
    }
    @keyframes pewcp-slide-up {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    :root { --pewc-swatch-size: 60px; }

    .pewcp-preview {
        padding: 10px 14px;
    }
    .pewcp-preview-img {
        width:  64px;
        height: 64px;
    }
    .pewcp-header,
    .pewcp-footer,
    .pewcp-search-wrap,
    .pewcp-grid {
        padding-left:  14px;
        padding-right: 14px;
    }
}