/* ── Tabel Product Add-Ons — Frontend Styles ────────────────────
   The add-on group HTML is initially rendered inside a <strong> tag
   (via woocommerce_cart_item_name), then relocated by JS to sit
   below the qty/price row. Styles handle both states.
   ──────────────────────────────────────────────────────────── */

/* Ensure the group acts as a block regardless of parent context */
.tabel-addon-group {
    display: block !important;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 4px;
    clear: both;
    /* Override any inline/strong parent styling */
    font-weight: normal;
    font-size: 13px;
    line-height: 1.4;
}

/* Flex row of pill labels */
.tabel-addon-group > .tabel-addon-label,
.tabel-addon-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px;
}

/* Override: the outer group is block, the labels inside it are flex items */
.tabel-addon-group > .tabel-addon-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid #c9a96e;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: #3a2a0e !important;
    background: transparent;
    user-select: none;
    font-weight: normal;
    text-decoration: none;
}

.tabel-addon-group > .tabel-addon-label:hover {
    background: #f5e6cc;
}

.tabel-addon-group > .tabel-addon-label.selected,
.tabel-addon-group .tabel-addon-input:checked + span {
    background: #3d2f1a !important;
    color: #fff !important;
    border-color: #3d2f1a;
}

/* Hide the actual radio/checkbox — the label is the visual control */
.tabel-addon-input {
    display: none !important;
    appearance: none;
    -webkit-appearance: none;
}

/* Select dropdown variant */
.tabel-addon-select {
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1.5px solid #c9a96e;
    color: #3a2a0e;
    background: transparent;
    cursor: pointer;
    font-weight: normal;
}

/* Make the parent <strong> break to a new line when add-on is inside it
   (before JS relocation fires) */
.orderable-mini-cart-item strong,
.woocommerce-mini-cart-item strong {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}