/**
 * 925 Order Bump – Checkout styles.
 *
 * Theme-proof design: the checkbox is fully custom-drawn by the plugin
 * (appearance: none + explicit visuals) so it remains visible and clearly
 * clickable even when the active theme hides or restyles native checkboxes.
 * Critical properties use !important on purpose to win over theme CSS,
 * scoped strictly to .n925ob-* classes so nothing else is affected.
 */

/* ------------------------------------------------------------------ */
/* Bump container                                                       */
/* ------------------------------------------------------------------ */

.n925ob-order-bump {
    margin: 18px 0 !important;
    padding: 16px 18px !important;
    border: 2px solid #5acb6b !important;
    border-radius: 14px !important;
    background: #f2fbf4 !important;
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box !important;
}

/* Highlighted state when the bump is selected */
.n925ob-order-bump.is-selected {
    border-color: #2f9d43 !important;
    background: #e7f7ea !important;
}

/* Loading state – applied while the AJAX request is running */
.n925ob-order-bump.is-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------------ */
/* Label (wraps checkbox + image + content)                             */
/* ------------------------------------------------------------------ */

.n925ob-order-bump__label {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ------------------------------------------------------------------ */
/* Custom-drawn checkbox (theme-proof)                                  */
/* ------------------------------------------------------------------ */

.n925ob-order-bump__checkbox {
    /* Neutralise any theme hiding/restyling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;

    /* Explicit visual design */
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-shrink: 0 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border: 2px solid #2f9d43 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Checkmark drawn with CSS when checked */
.n925ob-order-bump__checkbox:checked {
    background: #2f9d43 !important;
    border-color: #2f9d43 !important;
    /* White tick as inline SVG background – no theme dependency */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Keyboard accessibility – visible focus ring */
.n925ob-order-bump__checkbox:focus-visible {
    outline: 2px solid #2f9d43 !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Product image                                                        */
/* ------------------------------------------------------------------ */

.n925ob-order-bump__media {
    flex-shrink: 0 !important;
    display: block !important;
    width: 64px !important;
    line-height: 0 !important;
}

.n925ob-order-bump__media img,
img.n925ob-order-bump__image {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #d9e8dc !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Content block (title, description, price, hint)                     */
/* ------------------------------------------------------------------ */

.n925ob-order-bump__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    line-height: 1.45 !important;
    min-width: 0 !important; /* allow text to wrap inside flex child */
}

.n925ob-order-bump__title {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    word-break: break-word;
}

.n925ob-order-bump__description {
    display: block !important;
    font-size: 14px !important;
    color: #5c5148 !important;
    word-break: break-word;
}

.n925ob-order-bump__price {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2f9d43 !important;
}

/* Small helper line telling the customer the block is clickable */
.n925ob-order-bump__hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #6b7f6e !important;
    margin-top: 2px !important;
}

/* State-dependent hint text: show/hide via the container class */
.n925ob-order-bump .n925ob-order-bump__hint--on { display: none !important; }
.n925ob-order-bump.is-selected .n925ob-order-bump__hint--on { display: inline-flex !important; }
.n925ob-order-bump.is-selected .n925ob-order-bump__hint--off { display: none !important; }

/* ------------------------------------------------------------------ */
/* Mobile adjustments (≤ 480 px)                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
    .n925ob-order-bump {
        padding: 14px 14px !important;
        border-radius: 10px !important;
    }

    .n925ob-order-bump__label {
        gap: 10px !important;
    }

    .n925ob-order-bump__media,
    .n925ob-order-bump__media img,
    img.n925ob-order-bump__image {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
    }

    .n925ob-order-bump__title {
        font-size: 15px !important;
    }

    .n925ob-order-bump__description,
    .n925ob-order-bump__price {
        font-size: 13px !important;
    }
}