/**
 * PersoNailit — collapsible personalization details in the cart,
 * checkout and mini-cart (see
 * PersoNailit_Cart_Order_Data::build_collapsible_row()).
 *
 * Loaded on every frontend page (not just the product page) because the
 * mini-cart can appear anywhere. Kept deliberately small.
 *
 * The color and font size come from PersoNailit → Global Settings →
 * "Cart Details Button" (printed as inline custom properties right after
 * this file, see PersoNailit_Assets::build_cart_inline_css()). The
 * values below are only the fallback.
 */

/* WooCommerce prints our single row as
   <dt class="variation-PersoNailit">PersoNailit:</dt><dd class="variation-PersoNailit">…</dd>
   — the button already says it, so the label is hidden and the value
   takes the full width. */
dl.variation dt.variation-PersoNailit {
    display: none !important;
}

dl.variation dd.variation-PersoNailit {
    float: none;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}

dl.variation dd.variation-PersoNailit p {
    margin: 0;
}

.personailit-cart-details {
    --pi-cart-accent: #2271b1;
    --pi-cart-font-size: 13px;

    margin: 6px 0 0;
}

/* The button. */
.personailit-cart-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    color: var(--pi-cart-accent);
    font-size: var(--pi-cart-font-size);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.15s ease;
}

/* Hover: the same color, a bit darker — works for any chosen color. */
.personailit-cart-details-toggle:hover {
    color: color-mix(in srgb, var(--pi-cart-accent) 75%, #000);
}

.personailit-cart-details-toggle:focus-visible {
    outline: 2px solid var(--pi-cart-accent);
    outline-offset: 2px;
}

/* Hides the browser's own triangle marker (we draw our own arrow). */
.personailit-cart-details-toggle::-webkit-details-marker {
    display: none;
}

.personailit-cart-details-toggle::marker {
    content: "";
}

/* The arrow after the text: points down when closed, up when open. */
.personailit-cart-details-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease, margin-top 0.15s ease;
}

.personailit-cart-details[open] > .personailit-cart-details-toggle::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* The attributes shown when open. */
.personailit-cart-details-list {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--pi-cart-accent);
    background: rgba(0, 0, 0, 0.03);
    background: color-mix(in srgb, var(--pi-cart-accent) 6%, transparent);
    font-size: 13px;
    line-height: 1.5;
}

.personailit-cart-details-row + .personailit-cart-details-row {
    margin-top: 2px;
}

.personailit-cart-details-key {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .personailit-cart-details-toggle,
    .personailit-cart-details-toggle::after {
        transition: none;
    }
}