/* =========================================================
   WC Cart Shortcodes — v1.2
   ========================================================= */
:root {
    --wccs-font:         system-ui, sans-serif;
    --wccs-radius:       6px;
    --wccs-border:       #e5e7eb;
    --wccs-bg:           #ffffff;
    --wccs-bg-subtle:    #f9fafb;
    --wccs-text:         #111827;
    --wccs-muted:        #6b7280;
    --wccs-accent:       #16a34a;
    --wccs-accent-h:     #15803d;
    --wccs-discount:     #dc2626;
    --wccs-badge-bg:     #dcfce7;
    --wccs-badge-border: #bbf7d0;
    --wccs-badge-text:   #166534;
    --wccs-error-bg:     #fee2e2;
    --wccs-error-text:   #991b1b;
    --wccs-success-bg:   #dcfce7;
    --wccs-success-text: #166534;
    --wccs-t:            0.18s ease;
}
.wccs-hidden { display: none !important; }

/* =========================================================
   SHORTCODE 1 — Totale carrello
   ========================================================= */
.wccs-cart-total {
    font-family: var(--wccs-font);
    background:  var(--wccs-bg);
    border:      1px solid var(--wccs-border);
    border-radius: var(--wccs-radius);
    padding:     0.65rem 0.95rem;
    display:     flex;
    flex-direction: column;
    gap:         0.32rem;
    width:       100%;
    box-sizing:  border-box;
}
.wccs-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.82rem;
    color:           var(--wccs-text);
    line-height:     1.3;
    gap:             0.5rem;
}
.wccs-total-row  { border-top: 1px solid var(--wccs-border); margin-top: 0.25rem; padding-top: 0.32rem; }
.wccs-total-label { font-weight: 700; font-size: 0.88rem; }
.wccs-total-value { font-weight: 700; font-size: 1rem; }
.wccs-discount-amount { color: var(--wccs-discount); font-weight: 600; }
.wccs-shipping .wccs-value em { color: var(--wccs-muted); font-style: italic; font-size: 0.76rem; }

/* Riga sconto — label sinistra, badge+importo destra */
.wccs-discount-row { align-items: flex-start; }
.wccs-discount-label { padding-top: 2px; flex-shrink: 0; }
.wccs-discount-right {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-wrap:   wrap;
    justify-content: flex-end;
}

.wccs-cart-total.wccs-loading .wccs-value,
.wccs-cart-total.wccs-loading .wccs-badge { opacity: 0.3; transition: opacity var(--wccs-t); }

/* =========================================================
   PILL coupon rimovibile — condiviso tra i due shortcode
   ========================================================= */
.wccs-coupon-badges {
    display:  inline-flex;
    flex-wrap: wrap;
    gap:      4px;
    align-items: center;
}

/* Pill base (non rimovibile — usata nel wc_cart_total come fallback) */
.wccs-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            3px;
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    padding:        2px 6px 2px 8px;
    border-radius:  999px;
    background:     var(--wccs-badge-bg);
    border:         1px solid var(--wccs-badge-border);
    color:          var(--wccs-badge-text);
    white-space:    nowrap;
    animation:      wccs-pop 0.18s ease both;
}

/* Pill rimovibile */
.wccs-badge-removable { padding: 2px 4px 2px 8px; }

.wccs-remove-coupon {
    background:    transparent;
    border:        none;
    cursor:        pointer;
    color:         var(--wccs-badge-text);
    font-size:     0.9rem;
    line-height:   1;
    width:         16px;
    height:        16px;
    padding:       0;
    border-radius: 50%;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--wccs-t), color var(--wccs-t);
}
.wccs-remove-coupon:hover {
    background: rgba(220, 38, 38, 0.12);
    color:      var(--wccs-discount);
}

/* =========================================================
   SHORTCODE 2 — Form coupon orizzontale compatto
   ========================================================= */
.wccs-coupon-form {
    font-family: var(--wccs-font);
    background:  var(--wccs-bg-subtle);
    border:      1px solid var(--wccs-border);
    border-radius: var(--wccs-radius);
    padding:     0.5rem 0.85rem;
    display:     flex;
    flex-direction: column;
    gap:         0.32rem;
    width:       100%;
    box-sizing:  border-box;
}

/* RIGA 1 */
.wccs-form-row1 {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.wccs-coupon-title {
    font-size:   0.76rem;
    font-weight: 600;
    color:       var(--wccs-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.wccs-input-group { display: flex; gap: 0.3rem; flex: 1; min-width: 0; }

.wccs-coupon-input {
    flex:           1;
    min-width:      0;
    padding:        0 0.6rem;
    height:         1.85rem;
    font-size:      0.78rem;
    font-family:    var(--wccs-font);
    border:         1px solid var(--wccs-border);
    border-radius:  5px;
    background:     var(--wccs-bg);
    color:          var(--wccs-text);
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color var(--wccs-t), box-shadow var(--wccs-t);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wccs-coupon-input::placeholder { text-transform: none; letter-spacing: normal; color: var(--wccs-muted); }
.wccs-coupon-input:focus { border-color: var(--wccs-accent); box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }

/* Bottoni generali */
.wccs-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.28rem;
    padding:       0 0.75rem;
    height:        1.85rem;
    font-size:     0.76rem;
    font-family:   var(--wccs-font);
    font-weight:   600;
    border:        1px solid transparent;
    border-radius: 5px;
    cursor:        pointer;
    white-space:   nowrap;
    flex-shrink:   0;
    transition:    background var(--wccs-t), color var(--wccs-t), transform 0.1s ease;
    text-decoration: none;
    box-sizing:    border-box;
    line-height:   1;
}
.wccs-btn:active { transform: scale(0.96); }

.wccs-btn-apply { background: var(--wccs-accent); color: #fff; border-color: var(--wccs-accent); }
.wccs-btn-apply:hover:not(:disabled) { background: var(--wccs-accent-h); border-color: var(--wccs-accent-h); }
.wccs-btn-apply:disabled { opacity: 0.5; cursor: not-allowed; }

/* RIGA 2 */
.wccs-form-row2 {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    min-height:  1.5rem;
    flex-wrap:   wrap;
}
.wccs-row2-left {
    flex:        1;
    min-width:   0;
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-wrap:   wrap;
}

.wccs-messages {
    font-size:   0.72rem;
    border-radius: 4px;
    line-height: 1.3;
    flex-shrink: 0;
}
.wccs-messages:not(:empty)  { padding: 0.18rem 0.55rem; }
.wccs-messages.wccs-success { background: var(--wccs-success-bg); color: var(--wccs-success-text); }
.wccs-messages.wccs-error   { background: var(--wccs-error-bg);   color: var(--wccs-error-text);   }

.wccs-applied-list { display: contents; }

/* Bottone aggiorna — outline, si spinge a destra */
.wccs-btn-refresh {
    background:  transparent;
    color:       var(--wccs-accent);
    border-color: var(--wccs-accent);
    margin-left: auto;
}
.wccs-btn-refresh:hover  { background: var(--wccs-accent); color: #fff; }
.wccs-btn-refresh:disabled { opacity: 0.4; cursor: not-allowed; }

/* Animazioni */
@keyframes wccs-pop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 520px) {
    .wccs-form-row1 { flex-wrap: wrap; }
    .wccs-coupon-title { width: 100%; }
    .wccs-btn-refresh { margin-left: 0; }
}