/*
 * WC Composite Products v5.1 — Frontend styles
 * Palette: Fauna y Flora — crema cálida, tostado dorado, negro profundo
 *
 * All rules scoped under #wccp-fe to guarantee specificity over theme styles
 * and ensure Playfair Display and #111111 always win.
 */

/* ── Force font + color on the entire widget ── */
#wccp-fe,
#wccp-fe * {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    box-sizing: border-box;
}
#wccp-fe,
#wccp-fe p,
#wccp-fe span,
#wccp-fe div,
#wccp-fe strong,
#wccp-fe label {
    color: #111111;
}

/* ── Wrap ── */
#wccp-fe.wccp-wrap {
    margin: 32px 0 36px;
}

/* ── Header ── */
#wccp-fe .wccp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #d9cfc4;
    border-bottom: 2px solid #111111;
    margin-bottom: 20px;
}
#wccp-fe .wccp-header strong {
    display: block;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    letter-spacing: .02em;
    margin-bottom: 2px;
}
#wccp-fe .wccp-header > div > span {
    display: block;
    font-size: 12.5px !important;
    color: #7a6f64 !important;
    font-style: italic;
}
#wccp-fe .wccp-global-counter {
    margin-left: auto;
    flex-shrink: 0;
    border: 1.5px solid #111111 !important;
    padding: 4px 13px;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    display: flex;
    align-items: center;
    gap: 2px;
    letter-spacing: .03em;
    background: transparent !important;
    border-radius: 0 !important;
}
#wccp-fe .wccp-counter-sep { opacity: .4; margin: 0 1px; }

/* ── Slots list ── */
#wccp-fe .wccp-slots { display: flex; flex-direction: column; gap: 10px; }

/* ── Single slot ── */
#wccp-fe .wccp-slot {
    border: 1px solid #d9cfc4;
    background: #ffffff;
    transition: border-color .2s;
}
#wccp-fe .wccp-slot.is-filled { border-color: #a8926f; }
#wccp-fe .wccp-slot.is-open   { border-color: #111111; }
#wccp-fe .wccp-slot.has-error { border-color: #8b3a2a; }

/* Slot header */
#wccp-fe .wccp-slot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    background: #faf8f5;
    min-height: 54px;
    transition: background .15s;
    user-select: none;
}
#wccp-fe .wccp-slot-header:hover                    { background: #f3efe8; }
#wccp-fe .wccp-slot.is-open   .wccp-slot-header     { background: #f0ece4; }

/* Slot number badge */
#wccp-fe .wccp-slot-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1.5px solid #c4b49a;
    background: #ffffff;
    color: #7a6f64 !important;
    font-size: 13px !important; font-weight: 700 !important;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    border-radius: 0 !important;
}
#wccp-fe .wccp-slot.is-filled .wccp-slot-num {
    background: #a8926f !important; border-color: #a8926f; color: #ffffff !important;
}
#wccp-fe .wccp-slot.is-open .wccp-slot-num {
    background: #111111 !important; border-color: #111111; color: #ffffff !important;
}

#wccp-fe .wccp-slot-empty-label {
    flex: 1;
    font-size: 13px !important;
    color: #b5a898 !important;
    font-style: italic;
}

/* Chosen product in slot header */
#wccp-fe .wccp-slot-chosen { display: flex; align-items: center; gap: 12px; flex: 1; }
#wccp-fe .wccp-chosen-thumb {
    width: 40px; height: 40px;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid #d9cfc4;
    border-radius: 0 !important;
}
#wccp-fe .wccp-chosen-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#wccp-fe .wccp-chosen-group {
    font-size: 10px !important; font-weight: 600 !important;
    color: #a8926f !important;
    text-transform: uppercase; letter-spacing: .08em;
}
#wccp-fe .wccp-chosen-name {
    font-size: 13px !important; font-weight: 700 !important;
    color: #111111 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#wccp-fe .wccp-chosen-price {
    font-size: 12px !important; color: #7a6f64 !important;
    font-weight: 600 !important; font-style: italic;
}
#wccp-fe .wccp-slot-clear {
    flex-shrink: 0; margin-left: auto;
    background: #ffffff !important;
    border: 1px solid #d9cfc4 !important;
    color: #7a6f64 !important;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; padding: 0;
    transition: all .15s;
    border-radius: 0 !important;
}
#wccp-fe .wccp-slot-clear:hover {
    background: #111111 !important; color: #ffffff !important; border-color: #111111 !important;
}
#wccp-fe .wccp-slot-chevron {
    font-size: 18px; color: #c4b49a !important; flex-shrink: 0;
    transition: transform .2s; line-height: 1;
}
#wccp-fe .wccp-slot.is-open .wccp-slot-chevron { transform: rotate(90deg); color: #111111 !important; }

/* ── Step panels ── */
#wccp-fe .wccp-step-groups,
#wccp-fe .wccp-step-products {
    border-top: 1px solid #e8e0d5;
    background: #fdfcfb;
    padding: 16px;
}
#wccp-fe .wccp-step-label {
    font-size: 11px !important; font-weight: 700 !important;
    color: #a8926f !important;
    text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px;
}

/* Group pills */
#wccp-fe .wccp-group-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#wccp-fe .wccp-group-pill {
    background: #ffffff !important;
    border: 1.5px solid #111111 !important;
    padding: 8px 20px;
    color: #111111 !important;
    font-size: 13px !important; font-weight: 700 !important;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s, color .15s;
    border-radius: 0 !important;
}
#wccp-fe .wccp-group-pill:hover {
    background: #111111 !important; color: #ffffff !important;
}
#wccp-fe .wccp-group-pill.maxed {
    opacity: .35; cursor: not-allowed; border-style: dashed !important;
}

/* Step 2 header */
#wccp-fe .wccp-step-products-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#wccp-fe .wccp-back-btn {
    background: #ffffff !important; border: 1px solid #d9cfc4 !important;
    padding: 4px 12px; font-size: 12px !important; color: #7a6f64 !important;
    cursor: pointer; transition: all .15s; border-radius: 0 !important;
}
#wccp-fe .wccp-back-btn:hover {
    background: #111111 !important; color: #ffffff !important; border-color: #111111 !important;
}
#wccp-fe .wccp-step-group-title {
    font-size: 14px !important; font-weight: 700 !important; color: #111111 !important; letter-spacing: .02em;
}

/* ── Option cards ── */
#wccp-fe .wccp-picker-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
}
#wccp-fe .wccp-option {
    border: 1.5px solid #e0d8cc;
    background: #ffffff;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: border-color .15s, transform .13s, box-shadow .15s;
    border-radius: 0 !important;
}
#wccp-fe .wccp-option:hover {
    border-color: #a8926f;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.07);
}
#wccp-fe .wccp-option.selected {
    border-color: #111111;
    box-shadow: 0 0 0 2px rgba(17,17,17,.12);
}
#wccp-fe .wccp-option img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
#wccp-fe .wccp-option-name {
    display: block;
    font-size: 12px !important; font-weight: 600 !important; color: #111111 !important;
    padding: 6px 6px 2px; line-height: 1.3; font-style: italic;
}
#wccp-fe .wccp-option-price {
    display: block;
    font-size: 11.5px !important; color: #7a6f64 !important; font-weight: 700 !important;
    padding: 0 6px 8px;
}
#wccp-fe .wccp-option-check {
    display: none;
    position: absolute; top: 5px; right: 5px;
    background: #111111; color: #ffffff !important;
    width: 20px; height: 20px;
    font-size: 11px !important; font-weight: 700 !important;
    align-items: center; justify-content: center;
    border-radius: 0 !important;
}
#wccp-fe .wccp-option.selected .wccp-option-check { display: flex; }

/* ── Total bar ── */
#wccp-fe .wccp-total-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: #ffffff;
    border: 1px solid #d9cfc4;
    border-left: 3px solid #a8926f;
    padding: 12px 18px;
    margin-top: 8px;
}
#wccp-fe .wccp-total-label {
    font-size: 13px !important; font-weight: 600 !important;
    color: #7a6f64 !important; font-style: italic;
}
#wccp-fe .wccp-total-val {
    font-size: 17px !important; font-weight: 700 !important; color: #111111 !important;
    letter-spacing: .01em;
}

/* ── Validation message ── */
#wccp-fe .wccp-validation-msg {
    background: #fff8f6;
    border: 1px solid #d9a090;
    border-left: 3px solid #8b3a2a;
    padding: 10px 14px;
    color: #8b3a2a !important;
    font-size: 13px !important;
    margin-top: 8px;
    font-style: italic;
}

@media (max-width: 480px) {
    #wccp-fe .wccp-picker-options { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 8px; }
}

/* ── Cart / checkout composition display ── */
.wccp-cart-composition {
    display: block;
    margin-top: 6px;
}
.wccp-cart-slot {
    display: block;
    font-size: 12px;
    color: #7a6f64;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wccp-cart-slot-group {
    font-weight: 600;
    color: #a8926f;
}