/*
 * 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; }
}

/* -------------------------------------------------------------------
 * Theme specific styles for the mini checkout form.  When a merchant
 * selects a form template in the plugin settings, the chosen value is
 * appended as an extra class on the order wrapper (e.g. zenzit-theme-agro).
 * These rules override the default palette and component styling to
 * provide five visually distinct experiences.  Each theme defines its
 * own CSS variables for primary, secondary, background, text and light
 * colours, along with customised shadows, borders and radii.  They
 * apply only to children of the corresponding wrapper class so the
 * rest of the site remains unaffected.
 * ------------------------------------------------------------------- */

/* Agro — Natural Confidence
 * Fresh, earthy colours and soft gradients convey calm and organic
 * authenticity. Rounded corners and gentle shadows keep the form
 * approachable. Useful for eco‑friendly and wellness brands. */
.zenzit-theme-agro {
    --zenzit-primary: #8ABD65;
    --zenzit-secondary: #A0C98A;
    --zenzit-bg: #F7F4E8;
    --zenzit-text: #333333;
    --zenzit-light: #EEF7E5;
    --zenzit-radius: 12px;
}
.zenzit-theme-agro .zenzit-order-wrapper {
    background: linear-gradient(to bottom right, var(--zenzit-bg), #ffffff) !important;
    border-radius: var(--zenzit-radius) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 24px !important;
}
.zenzit-theme-agro .zenzit-order-header {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}
.zenzit-theme-agro .zenzit-product-summary {
    margin-bottom: 16px !important;
}
.zenzit-theme-agro .zenzit-product-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--zenzit-text) !important;
}
.zenzit-theme-agro .zenzit-product-price {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
}
.zenzit-theme-agro .zenzit-order-form .zenzit-field,
.zenzit-theme-agro .zenzit-order-form .zenzit-field input,
.zenzit-theme-agro .zenzit-order-form .zenzit-field select {
    border-radius: calc(var(--zenzit-radius) - 4px) !important;
}
.zenzit-theme-agro .zenzit-order-form input[type="text"],
.zenzit-theme-agro .zenzit-order-form input[type="tel"],
.zenzit-theme-agro .zenzit-order-form input[type="email"],
.zenzit-theme-agro .zenzit-order-form select {
    border: 1px solid var(--zenzit-secondary) !important;
    padding: 10px 12px !important;
    background-color: #fff !important;
    color: var(--zenzit-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.zenzit-theme-agro .zenzit-order-form input:focus,
.zenzit-theme-agro .zenzit-order-form select:focus {
    border-color: var(--zenzit-primary) !important;
    box-shadow: 0 0 0 3px rgba(138,189,101,0.25) !important;
    outline: none !important;
}
.zenzit-theme-agro .zenzit-button {
    background: linear-gradient(90deg, var(--zenzit-primary), var(--zenzit-secondary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
}
.zenzit-theme-agro .zenzit-button:hover {
    background: linear-gradient(90deg, var(--zenzit-secondary), var(--zenzit-primary)) !important;
    transform: translateY(-2px) !important;
}
.zenzit-theme-agro .zenzit-button:active {
    transform: translateY(0) !important;
}

/* Askor — Futuristic Pulse
 * Electric neon gradients on a dark canvas evoke cutting‑edge tech and
 * luxury. Glassmorphism (blurred backgrounds and transparent panels)
 * introduces a sense of depth and modernity. Designed for digital
 * natives and high‑energy brands. */
.zenzit-theme-askor {
    --zenzit-primary: #7928CA;
    --zenzit-secondary: #00C6FF;
    --zenzit-bg: rgba(13, 17, 23, 0.8);
    --zenzit-text: #E0E9FF;
    --zenzit-light: rgba(255, 255, 255, 0.1);
    --zenzit-radius: 16px;
}
.zenzit-theme-askor .zenzit-order-wrapper {
    background: linear-gradient(to bottom right, rgba(121,40,202,0.3), rgba(0,198,255,0.2)) !important;
    border-radius: var(--zenzit-radius) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(10px) !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    color: var(--zenzit-text) !important;
}
.zenzit-theme-askor .zenzit-order-header {
    color: #A5B4FC !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}
.zenzit-theme-askor .zenzit-product-summary {
    margin-bottom: 18px !important;
}
.zenzit-theme-askor .zenzit-product-title {
    color: var(--zenzit-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.zenzit-theme-askor .zenzit-product-price {
    color: var(--zenzit-secondary) !important;
    font-weight: 700 !important;
}
.zenzit-theme-askor .zenzit-order-form input[type="text"],
.zenzit-theme-askor .zenzit-order-form input[type="tel"],
.zenzit-theme-askor .zenzit-order-form input[type="email"],
.zenzit-theme-askor .zenzit-order-form select {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    color: var(--zenzit-text) !important;
    padding: 12px 14px !important;
    backdrop-filter: blur(6px) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.zenzit-theme-askor .zenzit-order-form input::placeholder {
    color: rgba(224,233,255,0.5) !important;
}
.zenzit-theme-askor .zenzit-order-form input:focus,
.zenzit-theme-askor .zenzit-order-form select:focus {
    border-color: var(--zenzit-secondary) !important;
    box-shadow: 0 0 0 3px rgba(0,198,255,0.3) !important;
    outline: none !important;
}
.zenzit-theme-askor .zenzit-button {
    background: linear-gradient(90deg, var(--zenzit-primary), var(--zenzit-secondary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease, filter 0.3s ease !important;
}
.zenzit-theme-askor .zenzit-button:hover {
    box-shadow: 0 6px 16px rgba(0,198,255,0.5) !important;
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
}
.zenzit-theme-askor .zenzit-button:active {
    transform: translateY(0) !important;
}

/* Tilas — Minimal Luxury
 * A crisp, understated style favouring whitespace and fine lines.  The
 * palette of whites, soft greys and black accents creates a luxe,
 * distraction‑free environment. Ideal for premium fashion and
 * minimalist brands. */
.zenzit-theme-tilas {
    --zenzit-primary: #111111;
    --zenzit-secondary: #444444;
    --zenzit-bg: #FFFFFF;
    --zenzit-text: #111111;
    --zenzit-light: #F7F7F7;
    --zenzit-radius: 10px;
}
.zenzit-theme-tilas .zenzit-order-wrapper {
    background: var(--zenzit-bg) !important;
    border: 1px solid #EAEAEA !important;
    border-radius: var(--zenzit-radius) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    padding: 24px !important;
}
.zenzit-theme-tilas .zenzit-order-header {
    color: var(--zenzit-secondary) !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.zenzit-theme-tilas .zenzit-product-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--zenzit-text) !important;
}
.zenzit-theme-tilas .zenzit-product-price {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
}
.zenzit-theme-tilas .zenzit-order-form input[type="text"],
.zenzit-theme-tilas .zenzit-order-form input[type="tel"],
.zenzit-theme-tilas .zenzit-order-form input[type="email"],
.zenzit-theme-tilas .zenzit-order-form select {
    background: var(--zenzit-light) !important;
    border: none !important;
    border-bottom: 1px solid #EAEAEA !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    color: var(--zenzit-text) !important;
    transition: border-color 0.2s ease !important;
}
.zenzit-theme-tilas .zenzit-order-form input:focus,
.zenzit-theme-tilas .zenzit-order-form select:focus {
    border-bottom-color: var(--zenzit-primary) !important;
    outline: none !important;
}
.zenzit-theme-tilas .zenzit-button {
    background: var(--zenzit-primary) !important;
    color: #FFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
}
.zenzit-theme-tilas .zenzit-button:hover {
    background: #000000 !important;
    transform: translateY(-2px) !important;
}
.zenzit-theme-tilas .zenzit-button:active {
    transform: translateY(0) !important;
}

/* Tiskart — Urban Energy
 * High contrast black and yellow with gritty textures and bold
 * typography.  Sharp corners and animated interactions deliver a
 * youthful, streetwise attitude perfect for urban or gaming brands. */
.zenzit-theme-tiskart {
    --zenzit-primary: #FFB703;
    --zenzit-secondary: #FFD166;
    --zenzit-bg: #0D0D0D;
    --zenzit-text: #F5F5F5;
    --zenzit-light: #1F1F1F;
    --zenzit-radius: 6px;
}
.zenzit-theme-tiskart .zenzit-order-wrapper {
    background: var(--zenzit-light) !important;
    border: 2px solid var(--zenzit-primary) !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 24px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6) !important;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 3px, transparent 3px, transparent 8px) !important;
    color: var(--zenzit-text) !important;
}
.zenzit-theme-tiskart .zenzit-order-header {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}
.zenzit-theme-tiskart .zenzit-product-title {
    color: var(--zenzit-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.zenzit-theme-tiskart .zenzit-product-price {
    color: var(--zenzit-primary) !important;
    font-weight: 800 !important;
}
.zenzit-theme-tiskart .zenzit-order-form input[type="text"],
.zenzit-theme-tiskart .zenzit-order-form input[type="tel"],
.zenzit-theme-tiskart .zenzit-order-form input[type="email"],
.zenzit-theme-tiskart .zenzit-order-form select {
    background: var(--zenzit-bg) !important;
    border: 2px solid var(--zenzit-primary) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    color: var(--zenzit-text) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.zenzit-theme-tiskart .zenzit-order-form input::placeholder {
    color: rgba(245,245,245,0.6) !important;
}
.zenzit-theme-tiskart .zenzit-order-form input:focus,
.zenzit-theme-tiskart .zenzit-order-form select:focus {
    border-color: #FFD166 !important;
    transform: translateX(2px) !important;
    outline: none !important;
}
.zenzit-theme-tiskart .zenzit-button {
    background: var(--zenzit-primary) !important;
    color: var(--zenzit-bg) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.zenzit-theme-tiskart .zenzit-button:hover {
    background: #FFD166 !important;
    transform: translateY(-3px) rotate(-1deg) !important;
}
.zenzit-theme-tiskart .zenzit-button:active {
    transform: translateY(0) !important;
}

/* Titrit — Cultural Glow
 * Deep indigo and violet with warm gold accents.  Subtle radial
 * gradients and glowing borders reflect the romance and artistry of
 * Moroccan craftsmanship.  Perfect for artisan goods and cultural
 * experiences. */
.zenzit-theme-titrit {
    --zenzit-primary: #C69C6D;
    --zenzit-secondary: #E6BA8C;
    --zenzit-bg: #2E2B5F;
    --zenzit-text: #F5F1EB;
    --zenzit-light: #382F70;
    --zenzit-radius: 14px;
}
.zenzit-theme-titrit .zenzit-order-wrapper {
    background: var(--zenzit-light) !important;
    border: 2px solid var(--zenzit-primary) !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 28px !important;
    position: relative !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 10px rgba(198,156,109,0.4) !important;
    background-image:
        radial-gradient(circle at top left, rgba(198,156,109,0.15), transparent 70%),
        radial-gradient(circle at bottom right, rgba(198,156,109,0.1), transparent 70%) !important;
    color: var(--zenzit-text) !important;
}
.zenzit-theme-titrit .zenzit-order-header {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.04em !important;
}
.zenzit-theme-titrit .zenzit-product-title {
    color: var(--zenzit-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.zenzit-theme-titrit .zenzit-product-price {
    color: var(--zenzit-primary) !important;
    font-weight: 700 !important;
}
.zenzit-theme-titrit .zenzit-order-form input[type="text"],
.zenzit-theme-titrit .zenzit-order-form input[type="tel"],
.zenzit-theme-titrit .zenzit-order-form input[type="email"],
.zenzit-theme-titrit .zenzit-order-form select {
    background: rgba(255,255,255,0.05) !important;
    border: 2px solid var(--zenzit-primary) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    color: var(--zenzit-text) !important;
    backdrop-filter: blur(4px) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.zenzit-theme-titrit .zenzit-order-form input::placeholder {
    color: rgba(245,241,235,0.6) !important;
}
.zenzit-theme-titrit .zenzit-order-form input:focus,
.zenzit-theme-titrit .zenzit-order-form select:focus {
    border-color: #E1C08C !important;
    box-shadow: 0 0 0 3px rgba(198,156,109,0.4) !important;
    outline: none !important;
}
.zenzit-theme-titrit .zenzit-button {
    background: linear-gradient(90deg, var(--zenzit-primary), var(--zenzit-secondary)) !important;
    color: var(--zenzit-light) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 8px rgba(198,156,109,0.6) !important;
    transition: transform 0.25s ease, filter 0.25s ease !important;
}
.zenzit-theme-titrit .zenzit-button:hover {
    filter: brightness(1.1) saturate(1.2) !important;
    transform: translateY(-3px) !important;
}
.zenzit-theme-titrit .zenzit-button:active {
    transform: translateY(0) !important;
}

/* Upsell Offers */
.zenzit-upsell-wrapper {
    margin-top: 15px !important;
    border: 1px dashed var(--zenzit-primary) !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 12px !important;
    background-color: var(--zenzit-light) !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: var(--zenzit-light) !important;
    color: var(--zenzit-primary) !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: var(--zenzit-primary) !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: var(--zenzit-primary) !important;
    background-color: var(--zenzit-light) !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 var(--zenzit-primary) !important;
    border-radius: var(--zenzit-radius) !important;
    padding: 8px !important;
    background-color: var(--zenzit-light) !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: var(--zenzit-primary) !important;
    /* Use the light variant for the glow effect to ensure good contrast */
    box-shadow: 0 0 0 2px var(--zenzit-light) !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 var(--zenzit-primary) !important;
    background-color: var(--zenzit-light) !important;
}

/* 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: var(--zenzit-light) !important;
}

/* 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: var(--zenzit-primary) !important;
}

/*
 * 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;
    }
}