/*
 * ZenZit COD Pro - Full Frontend Styles
 *
 * Ensures mini form, popup, and order buttons fully match admin preview
 * and do not inherit styles from the WordPress theme.
 */

:root {
    --zenzit-primary: #00a859;
    --zenzit-secondary: #008a4b;
    --zenzit-bg: #ffffff;
    --zenzit-text: #333333;
    --zenzit-radius: 8px;
}

/* Mini Form */
.zenzit-mini-form {
    background-color: var(--zenzit-bg) !important;
    padding: 30px !important;
    border-radius: var(--zenzit-radius) !important;
    margin: 30px auto !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    max-width: 600px !important;
}

.zenzit-mini-form .form-row {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 15px !important;
}

.zenzit-mini-form label {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    color: var(--zenzit-text) !important;
}

.zenzit-mini-form input[type="text"],
.zenzit-mini-form input[type="tel"],
.zenzit-mini-form input[type="email"],
.zenzit-mini-form select,
.zenzit-mini-form textarea {
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: var(--zenzit-radius) !important;
    font-size: 14px !important;
    width: 100% !important;
    background-color: #fff !important;
    color: var(--zenzit-text) !important;
    transition: border-color 0.3s !important;
}

.zenzit-mini-form input:focus,
.zenzit-mini-form select:focus,
.zenzit-mini-form textarea:focus {
    outline: none !important;
    border-color: var(--zenzit-primary) !important;
}

.zenzit-mini-form textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

/* Buttons */
.zenzit-order-button,
.zenzit-submit-button,
.zenzit-popup-trigger {
    background-color: var(--zenzit-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 10px !important;
    box-shadow: none !important;
    text-align: center !important;
    display: inline-block !important;
    transition: all 0.3s !important;
}

.zenzit-order-button:hover,
.zenzit-submit-button:hover,
.zenzit-popup-trigger:hover {
    background-color: var(--zenzit-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Popup Modal */
.zenzit-popup-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.7) !important;
    display: none !important;
}

.zenzit-popup-content {
    position: relative !important;
    width: 90% !important;
    max-width: 800px !important;
    margin: 5% auto !important;
    height: auto !important;
    background: var(--zenzit-bg) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    animation: slideUp 0.3s !important;
    padding: 30px !important;
}

.zenzit-popup-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #e6e6e6 !important;
    background-color: #f7f7f7 !important;
    color: var(--zenzit-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background-color 0.2s ease !important;
}

.zenzit-popup-close:hover {
    background-color: #ececec !important;
}

/* Popup Animation */
@keyframes slideUp {
    from { transform: translateY(50px) !important; opacity: 0 !important; }
    to { transform: translateY(0) !important; opacity: 1 !important; }
}

/* Upsell Offers */
.zenzit-upsell-wrapper {
    margin-top: 15px !important;
    border: 1px dashed #0040ff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background-color: #f6f9ff !important;
}
.zenzit-upsell-heading {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    color: var(--zenzit-text) !important;
}

/* New card style for upsell offers */
.zenzit-upsell-offer-card {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
}
.zenzit-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: var(--zenzit-radius) !important;
    background-color: #fff !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.zenzit-card-left img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}
.zenzit-card-middle {
    flex-grow: 1 !important;
    margin-left: 12px !important;
}
.zenzit-card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.zenzit-card-discount-label {
    display: inline-block !important;
    background-color: #e1eaff !important;
    color: #0040ff !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}
.zenzit-card-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-left: auto !important;
}
.zenzit-card-original-price {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    display: block !important;
}
.zenzit-card-discount-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0040ff !important;
    display: block !important;
    margin-top: 2px !important;
}
.zenzit-card-variants {
    margin-top: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 6px !important;
    background-color: #f9f9f9 !important;
    display: none !important;
}
.zenzit-card-variants .zenzit-variant-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.zenzit-card-variants .zenzit-row-index {
    font-weight: 600 !important;
    margin-right: 4px !important;
}
.zenzit-card-variants label {
    font-size: 12px !important;
    margin-right: 4px !important;
    font-weight: 500 !important;
}
.zenzit-card-variants select {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 4px !important;
    font-size: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Highlight selected card */
.zenzit-upsell-offer-card input[type="radio"] {
    /* hide default radio but keep accessible */
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.zenzit-upsell-offer-card input[type="radio"]:checked + .zenzit-card {
    border-color: #0040ff !important;
    background-color: #eef2ff !important;
}
.zenzit-upsell-offer-radio {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 10px !important;
    background-color: #fff !important;
    position: relative !important;
}
.zenzit-upsell-offer-radio input[type="radio"] {
    /* Hide the default radio element but keep it accessible for screen readers */
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Highlight the selected upsell card */
.zenzit-upsell-offer-radio input[type="radio"]:checked + .zenzit-upsell-content {
    border: 2px solid #0040ff !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 8px !important;
    background-color: #eef2ff !important;
}

.zenzit-upsell-offer-radio .zenzit-upsell-content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Variant selectors inside each offer */
.zenzit-offer-variants {
    margin-top: 6px !important;
    width: 100% !important;
}
.zenzit-offer-variants .zenzit-variant-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    flex-wrap: wrap !important;
}
.zenzit-offer-variants .zenzit-variant-row select {
    flex: 1 1 auto !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 4px !important;
    padding: 4px !important;
    font-size: 14px !important;
    background-color: #fff !important;
    min-width: 0 !important;
}

/* Thumbnail swatches for variant selection */
.zenzit-variant-thumb-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
}
.zenzit-variant-thumb {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.zenzit-variant-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.zenzit-variant-thumb.selected {
    border-color: #0040ff !important;
    box-shadow: 0 0 0 2px rgba(0, 64, 255, 0.4) !important;
}

/* Discount badge shown on the top right of the upsell card */
.zenzit-upsell-badge {
    position: absolute !important;
    top: 0 !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    /* Use a green background similar to bg‑green‑500 from Tailwind for the badge.
     * White text ensures good contrast.  Rounded corners and subtle shadow
     * replicate the example. */
    background-color: #22c55e !important; /* green-500 */
    color: #ffffff !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    z-index: 3 !important;
    line-height: 1 !important;
}

/* Layout for the primary information row within an upsell card.  This row
 * uses flexbox to align the title/description on the left and the price
 * block on the right.  It ensures the two columns remain on the same
 * line regardless of content length and provides a small gap between
 * them. */
.zenzit-upsell-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 16px !important;
}
@media (max-width: 480px) {
    .zenzit-upsell-offer-radio {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .zenzit-upsell-image {
        margin-bottom: 6px !important;
    }
    .zenzit-upsell-info {
        width: 100% !important;
    }
    .zenzit-offer-variants .zenzit-variant-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .zenzit-offer-variants .zenzit-variant-row select {
        width: 100% !important;
    }
    .zenzit-upsell-badge {
        font-size: 10px !important;
    }
}
.zenzit-upsell-image img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
}
.zenzit-upsell-info {
    flex: 1 1 auto !important;
}
.zenzit-upsell-title {
    font-weight: 600 !important;
    font-size: 16px !important;
    display: block !important;
    color: #1f2937 !important; /* gray-800 */
}
.zenzit-upsell-description {
    font-size: 13px !important;
    /* Use a medium green similar to text‑green‑600 for the
     * description, matching the example where the shipping text is
     * coloured green. */
    color: #16a34a !important; /* green-600 */
    display: block !important;
    margin-top: 4px !important;
}
.zenzit-upsell-prices {
    display: flex !important;
    gap: 4px !important;
    font-size: 14px !important;
    margin-top: 4px !important;
    align-items: baseline !important;
}
.zenzit-upsell-original {
    color: #6b7280 !important; /* gray-500 */
    text-decoration: line-through !important;
    font-size: 14px !important;
}
.zenzit-upsell-discounted {
    color: #1d4ed8 !important; /* blue-700 */
    font-weight: 800 !important;
    font-size: 16px !important;
}
.zenzit-variant-selectors {
    margin-top: 10px !important;
}
.zenzit-variant-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
 * Custom overrides for upsell card design
 *
 * The following rules adjust the appearance of the upsell offer cards to
 * match the blue bordered style shown in the reference screenshot. They
 * override earlier definitions using !important to ensure they take effect.
 */
.zenzit-upsell-wrapper {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}
.zenzit-upsell-offer-radio {
    display: block !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
}
/*
 * Base styling for each upsell card.  Cards are block‑level elements with
 * generous padding and rounded corners.  They use a columnar flex layout
 * so the main row (title/description and prices) sits above the optional
 * variant section.  A light grey border and subtle shadow are applied
 * to unselected cards, while selected cards override these colours via
 * sibling selectors (see below).
 */
.zenzit-upsell-offer-radio .zenzit-upsell-content {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border: 2px solid #e5e7eb !important; /* gray‑200 */
    border-radius: 16px !important;
    padding: 20px 16px 16px 16px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* Highlight selected card: use the vibrant blue used in the provided example
 * (border-blue-500) for the border and a light blue background (blue-50).
 */
.zenzit-upsell-offer-radio input[type="radio"]:checked + .zenzit-upsell-content {
    border: 2px solid #3b82f6 !important; /* blue-500 */
    background-color: #eff6ff !important; /* blue-50 */
}

/* When a card is selected, its variant section should use a light blue top border */
.zenzit-upsell-offer-radio input[type="radio"]:checked + .zenzit-upsell-content .zenzit-offer-variants {
    border-top-color: #bfdbfe !important; /* blue-200 */
}

/* Hover state for upsell cards.  When hovering over an unselected offer, the
 * border becomes a mid‑blue to indicate interactivity. */
.zenzit-upsell-offer-radio:hover .zenzit-upsell-content {
    border-color: #60a5fa !important; /* blue-400 */
}

/*
 * Grid layout variations based on presence of variants.  When the
 * `has-variants` class is present, the upsell card reserves two rows:
 * one for the info/price and another for the variant selectors.  For
 * simple products (`no-variants`), the layout collapses into a single
 * row.  These rules override the default grid template defined on
 * `.zenzit-upsell-content`.
 */
.zenzit-upsell-content.has-variants {
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "info price"
        "variants variants" !important;
}
.zenzit-upsell-content.no-variants {
    grid-template-rows: auto !important;
    grid-template-areas: "info price" !important;
}
.zenzit-upsell-info {
    /* Left column in the upsell card flex layout */
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-right: 16px !important;
}
/*
 * Layout for the price block inside each upsell offer.  Position the
 * prices at the far right of the row by letting the flex item take up
 * remaining space.  Align values to the right so both original and
 * discounted amounts line up neatly.  When the card wraps for small
 * screens the price will still stay on its own line above the variant
 * selectors.
 */
.zenzit-upsell-prices {
    /* Right column in the upsell card flex layout */
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    /* Add a small top padding to separate the price block from the title,
     * similar to pt‑1 in the example. */
    padding-top: 4px !important;
    text-align: right !important;
}
/*
 * Position the variant selectors below the main row of title/description and
 * price.  By giving the container a full width basis, it will wrap onto
 * its own line regardless of screen size.  We also reset alignment so the
 * selects stack or wrap naturally depending on the number of attributes.
 */
.zenzit-offer-variants {
    /* Occupies the full width row in the upsell card grid */
    grid-area: variants !important;
    width: 100% !important;
    border-top: 1px solid #e5e7eb !important;
    /* Space the variant section slightly from the main row.  Use 12px
     * spacing to mirror the Tailwind example (mt-3 pt-3). */
    margin-top: 12px !important;
    padding-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.zenzit-offer-variants .zenzit-variant-row {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

/*
 * Additional variant styling to emulate the Tailwind example.  The row
 * index is styled with a muted dark grey, labels are small and semi-bold,
 * and selects have generous padding, rounded corners and a light grey
 * border.  Each select will take up roughly half the row width on
 * larger screens but wrap on smaller viewports.
 */
.zenzit-row-index {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important; /* gray-700 */
    margin-right: 4px !important;
}
.zenzit-offer-variants .zenzit-variant-row label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}
.zenzit-offer-variants .zenzit-variant-row select {
    border: 1px solid #d1d5db !important; /* gray‑300 */
    border-radius: 6px !important;
    /* Use p‑1.5 padding (approx. 6px) similar to the example.  Add
     * horizontal padding for comfort. */
    padding: 6px 8px !important;
    font-size: 14px !important;
    color: #374151 !important;
    background-color: #ffffff !important;
    /* Stretch the select across the row while allowing it to shrink
     * gracefully. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Remove default appearance and insert a custom arrow icon on the
     * right side using a data URI.  Extra right padding keeps the
     * selected value away from the arrow. */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg%20fill='none'%20stroke='%236b7280'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='M19%209l-7%207-7-7'%/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1rem 1rem !important;
    padding-right: 2rem !important;
}

/* Quick Order Wrapper */
.zenzit-order-wrapper {
    background-color: var(--zenzit-bg) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.zenzit-order-header {
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--zenzit-text) !important;
    border-bottom: 1px solid #e6e6e6 !important;
    background-color: #f7f7f7 !important;
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
}

.zenzit-product-summary {
    display: flex !important;
    align-items: center !important;
    padding: 20px !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

.zenzit-product-image {
    position: relative !important;
    flex-shrink: 0 !important;
}

.zenzit-product-image img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.zenzit-quantity {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: var(--zenzit-primary) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}

.zenzit-product-details {
    margin-left: 12px !important;
    flex-grow: 1 !important;
}

.zenzit-product-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--zenzit-text) !important;
}

.zenzit-product-variant {
    margin: 0 !important;
    font-size: 12px !important;
    color: #888 !important;
}

.zenzit-product-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--zenzit-primary) !important;
    margin-left: auto !important;
}

.zenzit-order-form {
    padding: 20px !important;
}

.zenzit-field {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: var(--zenzit-radius) !important;
    background-color: #fff !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
}

.zenzit-field-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 8px !important;
    color: var(--zenzit-primary) !important;
    flex-shrink: 0 !important;
}

.zenzit-field input,
.zenzit-field select {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--zenzit-text) !important;
    padding: 0 !important;
}

.zenzit-field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 24px !important;
}

.zenzit-field select option {
    color: var(--zenzit-text) !important;
}

/* Hide default WooCommerce Add to Cart */
.single-product form.cart,
.single-product .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart {
    display: none !important;
}

.zenzit-submit-icon {
    display: inline-flex !important;
    margin-right: 6px !important;
}

/* -------------------------------------------------------------------------
 * Custom styling to match the modern quick‑order design shown in the
 * provided example. These overrides adjust the colour palette to a
 * rich blue, introduce a prominent border around the summary card and
 * add a top‑right ribbon. Input fields and buttons are softened and
 * enlarged. Merchants can still customise colours via the Design tab,
 * as the variables defined here rely on --zenzit-primary etc.
 */

/* Give the entire order wrapper a bold border and remove the drop shadow */
.zenzit-order-wrapper {
    border: 2px solid var(--zenzit-primary) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Hide the default header message area; the new design places key
   information inside the summary card instead. Merchants may re‑enable
   this by removing this rule or overriding it in their theme. */
.zenzit-order-header {
    display: none !important;
}

/* Style the product summary to stand out with a border bottom and white
   background. Position relative allows the top‑right ribbon to be
   absolutely positioned inside. */
.zenzit-product-summary {
    position: relative !important;
    background-color: #ffffff !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--zenzit-primary) !important;
}

/* Highlight the price in the primary colour and enlarge it */
.zenzit-product-summary .zenzit-product-price {
    color: var(--zenzit-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Adjust product title and variant */
.zenzit-product-summary .zenzit-product-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.zenzit-product-summary .zenzit-product-variant {
    font-size: 12px !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}
.zenzit-free-shipping {
    font-size: 12px !important;
    color: var(--zenzit-primary) !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Top offer ribbon at the top right of the product summary */
.zenzit-top-offer {
    position: absolute !important;
    top: -12px !important;
    right: -2px !important;
    background-color: var(--zenzit-primary) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
}

/* Hide the top offer ribbon and free shipping text in the summary card. These
 * elements are no longer part of the new design. */
.zenzit-top-offer,
.zenzit-free-shipping {
    display: none !important;
}

/* Input field wrapper: softer border and generous padding */
.zenzit-field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
    background-color: #f9fafb !important;
}

/* Ensure icons inside fields use the primary colour and have space */
.zenzit-field-icon {
    color: var(--zenzit-primary) !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
}

/* Remove default border and outline from inputs/selects inside custom field */
.zenzit-field input,
.zenzit-field select {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--zenzit-text) !important;
    padding: 0 !important;
}

/* Style the submit button to use the primary colour and centre its contents */
.zenzit-submit-button {
    background-color: var(--zenzit-primary) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    margin-top: 16px !important;
}
.zenzit-submit-button .zenzit-submit-icon {
    margin-right: 8px !important;
}
.zenzit-submit-button .zenzit-submit-sep {
    margin: 0 8px !important;
}

/* ------------------------------------------------------------------------
 * Mobile order button
 *
 * Merchants can optionally enable a secondary submit button that sticks to
 * the bottom of the viewport on small devices. This button duplicates the
 * functionality of the primary submit button but provides a persistent
 * call‑to‑action on phones where the main form may be scrolled off screen.
 *
 * By default the mobile button is hidden. When the screen width is below
 * 640px the button becomes visible, is positioned fixed to the bottom, and
 * spans nearly the full width with a small margin on either side. The
 * original submit button is hidden on mobile to avoid duplicate buttons.
 */
.zenzit-mobile-order-btn {
    display: none !important;
}

@media screen and (max-width: 640px) {
    .zenzit-mobile-order-btn {
        display: flex !important;
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        margin: 0 !important;
        width: auto !important;
        /* Ensure the fixed button sits above other content */
        z-index: 9999 !important;
        /* Remove any top margin on the mobile button */
        margin-top: 0 !important;
    }
    /* Hide the desktop submit button on small screens */
    .zenzit-submit-button:not(.zenzit-mobile-order-btn) {
        display: none !important;
    }
}