/* Qpon-360 Public Styles v1.7.5
   Uses high-specificity selectors + !important where needed to survive theme overrides.
   NOTE: The inline <style id="qpon360-inline"> block printed by PHP takes priority.
         This file serves as a fallback / enqueue. */

/* ====================================================
   CSS VARIABLES
   ==================================================== */
.qpon-gate-box, .qpon-search-block, .qpon-list-wrapper,
.qpon-coupon-card, .qpon-single-wrapper, .qpon-modal-overlay {
    --qp: #0e2691;
    --qp-light: #1a35b0;
    --qp-dark: #0a1e7a;
    --qp-grad: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%);
    --qp-success: #10b981;
    --qp-danger: #ef4444;
    --qp-warn: #f59e0b;
    --qp-gray: #6b7280;
    --qp-gray2: #9ca3af;
    --qp-border: #e5e7eb;
    --qp-white: #ffffff;
    --qp-text: #111827;
    --qp-radius: 12px;
    --qp-shadow: 0 2px 14px rgba(0,0,0,.08);
    --qp-shadow-lg: 0 8px 32px rgba(14,38,145,.14);
}

/* ====================================================
   SEARCH BLOCK — HORIZONTAL layout (desktop first)
   ==================================================== */
#qpon-search-outer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    margin-bottom: 28px !important;
}

.qpon-search-block {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 22px rgba(14,38,145,.13) !important;
    border: 1px solid #d4ddf8 !important;
}

.qpon-sb-header {
    background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important;
    padding: 16px 22px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 14px !important;
}

.qpon-sb-icon-wrap {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
    display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
    -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
}

.qpon-sb-title {
    font-size: 17px !important; font-weight: 800 !important; color: #fff !important;
    margin: 0 !important; padding: 0 !important; line-height: 1.2 !important;
}
.qpon-sb-sub {
    font-size: 12px !important; color: rgba(255,255,255,.75) !important; margin-top: 2px !important;
}

.qpon-sb-body {
    background: #f9fafb !important;
    padding: 16px 20px !important;
}

/* ---- The form: ONE ROW on desktop ---- */
.qpon-sb-form {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-box-align: flex-end !important;
    -ms-flex-align: flex-end !important;
    align-items: flex-end !important;
    gap: 10px !important;
}

/* Fields container: also a flex row */
.qpon-sb-fields {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* Each individual field: grows equally */
.qpon-sb-field {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.qpon-sb-field-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;
    color: #0e2691 !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important;
    white-space: nowrap !important;
}

.qpon-sb-sel {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 28px 10px 10px !important;
    border: 1.5px solid #c6d0f0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #111827 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231a35b0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color .18s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.qpon-sb-sel:focus {
    border-color: #1a35b0 !important;
    box-shadow: 0 0 0 3px rgba(14,38,145,.12) !important;
}

.qpon-sb-actions {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: flex-end !important;
    -ms-flex-align: flex-end !important;
    align-items: flex-end !important;
    gap: 8px !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.qpon-sb-btn {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
    gap: 7px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 10px rgba(14,38,145,.30) !important;
    -webkit-appearance: none !important;
    line-height: 1.4 !important;
    transition: opacity .18s !important;
}
.qpon-sb-btn:hover { opacity: .92 !important; }

.qpon-sb-clear {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
    padding: 9px 12px !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    transition: all .18s !important;
}
.qpon-sb-clear:hover { border-color: #fca5a5 !important; color: #ef4444 !important; }

/* ---- Responsive breakpoints ---- */
/* Tablet: allow 2-column wrap */
@media (max-width: 900px) {
    .qpon-sb-form   { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
    .qpon-sb-fields { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
    .qpon-sb-field  {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 calc(50% - 10px) !important;
        flex: 1 1 calc(50% - 10px) !important;
    }
    .qpon-sb-actions { width: 100% !important; }
    .qpon-sb-btn {
        -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important;
        -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
    }
}
/* Mobile: single column */
@media (max-width: 560px) {
    .qpon-sb-body { padding: 14px 14px !important; }
    .qpon-sb-fields {
        -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important; flex-direction: column !important;
    }
    .qpon-sb-field {
        -webkit-box-flex: unset !important; -ms-flex: unset !important; flex: unset !important;
        width: 100% !important;
    }
    .qpon-sb-actions { width: 100% !important; }
    .qpon-sb-btn { width: 100% !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
}

/* ====================================================
   REGISTRATION GATE
   ==================================================== */
.qpon-gate-box {
    max-width: 500px !important; margin: 0 auto 30px !important;
    border-radius: 16px !important; overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(14,38,145,.18) !important; border: 1px solid #c6d0f0 !important;
}
.qpon-gate-top {
    background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important;
    padding: 32px 28px 26px !important; text-align: center !important;
}
.qpon-gate-emoji { display: block !important; font-size: 42px !important; margin-bottom: 12px !important; line-height: 1 !important; }
.qpon-gate-heading { font-size: 22px !important; font-weight: 800 !important; color: #ffffff !important; margin: 0 0 8px !important; padding: 0 !important; line-height: 1.3 !important; }
.qpon-gate-desc { font-size: 14px !important; color: rgba(255,255,255,.82) !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; }
.qpon-gate-form-area { background: #ffffff !important; padding: 24px 28px !important; }
.qpon-gf-row { margin-bottom: 16px !important; display: block !important; }
.qpon-gf-label { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #0a1e7a !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 6px !important; }
.qpon-req { color: #ef4444 !important; font-weight: 700 !important; }
.qpon-opt { font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #6b7280 !important; }
.qpon-gf-input { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 11px 14px !important; border: 1.5px solid #c6d0f0 !important; border-radius: 9px !important; font-size: 14px !important; font-family: inherit !important; color: #111827 !important; background: #fff !important; transition: border-color .18s !important; outline: none !important; -webkit-appearance: none !important; }
.qpon-gf-input:focus { border-color: #1a35b0 !important; box-shadow: 0 0 0 3px rgba(14,38,145,.12) !important; }
.qpon-gate-err { background: #fee2e2 !important; color: #991b1b !important; border-radius: 7px !important; padding: 9px 13px !important; font-size: 13px !important; margin-bottom: 10px !important; }
.qpon-gate-submit-btn { display: block !important; width: 100% !important; padding: 13px 20px !important; background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important; color: #ffffff !important; border: none !important; border-radius: 9px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; box-shadow: 0 3px 10px rgba(14,38,145,.28) !important; transition: opacity .18s !important; margin-top: 6px !important; -webkit-appearance: none !important; }
.qpon-gate-submit-btn:hover { opacity: .92 !important; }
.qpon-gate-submit-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; }
.qpon-gate-lock { text-align: center !important; background: #f5f7ff !important; padding: 12px 28px !important; font-size: 12px !important; color: #6b7280 !important; border-top: 1px solid #d4ddf8 !important; }

/* ====================================================
   COUPON LIST GRID
   ==================================================== */
.qpon-list-wrapper { margin: 0 !important; }
.qpon-results-meta { font-size: 13px !important; color: #6b7280 !important; margin-bottom: 16px !important; font-weight: 500 !important; }
.qpon-list-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
@media (min-width: 900px) { .qpon-list-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 540px) { .qpon-list-grid { grid-template-columns: 1fr !important; } }
.qpon-coupon-card { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 2px 14px rgba(0,0,0,.08) !important; overflow: hidden !important; transition: transform .25s, box-shadow .25s !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; border: 1px solid #e5e7eb !important; }
.qpon-coupon-card:hover { transform: translateY(-5px) !important; box-shadow: 0 8px 32px rgba(14,38,145,.14) !important; border-color: #c6d0f0 !important; }
.qpon-card-img { position: relative !important; height: 185px !important; overflow: hidden !important; background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important; }
.qpon-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .4s !important; }
.qpon-coupon-card:hover .qpon-card-img img { transform: scale(1.05) !important; }
.qpon-card-img-placeholder { width: 100% !important; height: 100% !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; font-size: 52px !important; }
.qpon-card-status-badge { position: absolute !important; top: 10px !important; right: 10px !important; padding: 4px 11px !important; border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; }
.qpon-badge-active    { background: rgba(16,185,129,.9) !important; color: #fff !important; }
.qpon-badge-inactive  { background: rgba(239,68,68,.9)  !important; color: #fff !important; }
.qpon-badge-exhausted { background: rgba(245,158,11,.9) !important; color: #fff !important; }
.qpon-card-body { padding: 16px 18px 18px !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; }
.qpon-card-company { font-size: 11px !important; font-weight: 800 !important; color: #0e2691 !important; margin-bottom: 3px !important; text-transform: uppercase !important; letter-spacing: .4px !important; }
.qpon-card-category { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .8px !important; color: #9ca3af !important; margin-bottom: 6px !important; }
.qpon-card-title { font-size: 15px !important; font-weight: 700 !important; color: #111827 !important; margin-bottom: 10px !important; line-height: 1.45 !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; }
.qpon-card-meta { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: #6b7280 !important; margin-bottom: 5px !important; }
.qpon-card-meta svg { width: 13px !important; height: 13px !important; min-width: 13px !important; flex-shrink: 0 !important; }
.qpon-card-footer { margin-top: auto !important; padding-top: 12px !important; }
.qpon-btn-view { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 7px !important; background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important; color: #ffffff !important; padding: 11px 16px !important; border-radius: 9px !important; text-decoration: none !important; font-weight: 700 !important; font-size: 13px !important; transition: opacity .18s !important; box-shadow: 0 2px 8px rgba(14,38,145,.22) !important; width: 100% !important; box-sizing: border-box !important; }
.qpon-btn-view:hover { opacity: .92 !important; color: #fff !important; text-decoration: none !important; }
.qpon-btn-view svg { width: 14px !important; height: 14px !important; }
.qpon-empty { text-align: center !important; padding: 52px 24px !important; color: #6b7280 !important; }
.qpon-empty-icon { font-size: 48px !important; margin-bottom: 12px !important; }

/* ====================================================
   SINGLE COUPON
   ==================================================== */
.qpon-single-wrapper { max-width: 680px !important; margin: 0 auto !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(14,38,145,.14) !important; border: 1px solid #d4ddf8 !important; }
.qpon-single-header { background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important; padding: 30px 28px 22px !important; }
.qpon-single-company { font-size: 13px !important; font-weight: 800 !important; color: rgba(255,255,255,.95) !important; margin: 0 0 5px !important; display: block !important; text-transform: uppercase !important; letter-spacing: .4px !important; }
.qpon-single-cat-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(255,255,255,.7) !important; margin: 0 0 8px !important; display: block !important; }
.qpon-single-title { font-size: 24px !important; font-weight: 900 !important; color: #ffffff !important; margin: 0 0 16px !important; line-height: 1.3 !important; }
.qpon-single-dates { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; gap: 8px !important; }
.qpon-date-pill { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; gap: 5px !important; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 20px !important; padding: 5px 13px !important; font-size: 12px !important; font-weight: 600 !important; color: #fff !important; }
.qpon-date-pill svg { width: 12px !important; height: 12px !important; }
.qpon-single-body { background: #ffffff !important; padding: 26px 28px !important; }
.qpon-biz-buttons { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 16px !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; margin-bottom: 24px !important; padding-bottom: 22px !important; border-bottom: 1px solid #d4ddf8 !important; }
.qpon-biz-btn { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 5px !important; width: 76px !important; height: 76px !important; min-width: 76px !important; border-radius: 50% !important; text-decoration: none !important; font-size: 10px !important; font-weight: 700 !important; color: #fff !important; border: none !important; cursor: pointer !important; text-align: center !important; line-height: 1.2 !important; transition: transform .2s !important; }
.qpon-biz-btn svg { width: 22px !important; height: 22px !important; display: block !important; }
.qpon-biz-btn:hover { transform: translateY(-3px) scale(1.06) !important; text-decoration: none !important; color: #fff !important; }
.qpon-biz-btn-web      { background: linear-gradient(135deg,#0e2691 0%,#1a35b0 100%) !important; box-shadow: 0 4px 12px rgba(14,38,145,.32) !important; }
.qpon-biz-btn-whatsapp { background: linear-gradient(135deg,#25d366 0%,#1fba57 100%) !important; box-shadow: 0 4px 12px rgba(37,211,102,.32) !important; }
.qpon-biz-btn-map      { background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important; box-shadow: 0 4px 12px rgba(239,68,68,.32) !important; }
.qpon-qr-section { text-align: center !important; padding: 20px !important; background: linear-gradient(135deg,#f5f7ff 0%,#eef2fd 100%) !important; border-radius: 11px !important; margin-bottom: 20px !important; border: 1px solid #d4ddf8 !important; }
.qpon-qr-section img { max-width: 160px !important; border-radius: 9px !important; border: 3px solid #c6d0f0 !important; margin: 0 auto 8px !important; display: block !important; }
.qpon-qr-label { font-size: 13px !important; color: #0a1e7a !important; font-weight: 600 !important; }
.qpon-single-description { font-size: 14px !important; line-height: 1.75 !important; margin-bottom: 20px !important; padding-bottom: 20px !important; border-bottom: 1px solid #e5e7eb !important; color: #374151 !important; }
.qpon-single-actions { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 10px !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.qpon-btn-download { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; min-width: 160px !important; background: linear-gradient(135deg, #0a1e7a 0%, #1a35b0 100%) !important; color: #fff !important; padding: 12px 18px !important; border: none !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 8px !important; font-family: inherit !important; box-shadow: 0 3px 10px rgba(14,38,145,.28) !important; transition: opacity .18s !important; -webkit-appearance: none !important; }
.qpon-btn-download:hover { opacity: .92 !important; }
.qpon-btn-whatsapp-share { background: linear-gradient(135deg,#25d366 0%,#1fba57 100%) !important; color: #fff !important; padding: 12px 16px !important; border-radius: 9px !important; text-decoration: none !important; font-size: 13px !important; font-weight: 700 !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; gap: 7px !important; box-shadow: 0 3px 10px rgba(37,211,102,.28) !important; transition: opacity .18s !important; }
.qpon-btn-whatsapp-share:hover { opacity: .92 !important; color: #fff !important; text-decoration: none !important; }
.qpon-carousel-wrapper { position: relative !important; margin-bottom: 22px !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 3px 14px rgba(0,0,0,.09) !important; }
.qpon-carousel-slides { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; transition: transform .45s cubic-bezier(.25,.46,.45,.94) !important; }
.qpon-carousel-slide { min-width: 100% !important; height: 260px !important; overflow: hidden !important; }
.qpon-carousel-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.qpon-carousel-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255,255,255,.9) !important; border: none !important; border-radius: 50% !important; width: 38px !important; height: 38px !important; cursor: pointer !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0,0,0,.14) !important; z-index: 10 !important; padding: 0 !important; }
.qpon-carousel-btn-prev { left: 10px !important; }
.qpon-carousel-btn-next { right: 10px !important; }
.qpon-carousel-dots { text-align: center !important; margin-top: 8px !important; display: flex !important; justify-content: center !important; gap: 6px !important; }
.qpon-carousel-dots span { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #e5e7eb !important; cursor: pointer !important; }
.qpon-carousel-dots span.active { background: #1a35b0 !important; width: 18px !important; border-radius: 10px !important; }

/* Modal */
.qpon-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.58) !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
.qpon-modal { background: #fff !important; border-radius: 16px !important; max-width: 410px !important; width: 100% !important; box-shadow: 0 24px 80px rgba(0,0,0,.22) !important; position: relative !important; overflow: hidden !important; }
.qpon-modal-top { background: linear-gradient(135deg,#0a1e7a 0%,#1a35b0 100%) !important; padding: 22px 24px 18px !important; }
.qpon-modal-top h3 { font-size: 18px !important; font-weight: 800 !important; margin: 0 0 4px !important; color: #fff !important; line-height: 1.3 !important; padding: 0 !important; }
.qpon-modal-top p  { font-size: 13px !important; color: rgba(255,255,255,.82) !important; margin: 0 !important; padding: 0 !important; }
.qpon-modal-close { position: absolute !important; top: 12px !important; right: 14px !important; background: rgba(255,255,255,.2) !important; border: none !important; border-radius: 50% !important; font-size: 18px !important; cursor: pointer !important; color: #fff !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; }
.qpon-modal-form-area { padding: 20px 24px 24px !important; }
.qpon-modal-form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.qpon-modal-field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.qpon-modal-field label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: #0a1e7a !important; margin: 0 !important; padding: 0 !important; }
.qpon-modal-field input { padding: 10px 12px !important; border: 1.5px solid #c6d0f0 !important; border-radius: 8px !important; font-size: 14px !important; width: 100% !important; font-family: inherit !important; color: #111827 !important; background: #fff !important; outline: none !important; -webkit-appearance: none !important; }
.qpon-modal-field input:focus { border-color: #1a35b0 !important; box-shadow: 0 0 0 3px rgba(14,38,145,.12) !important; }
.qpon-modal-submit { background: linear-gradient(135deg,#0a1e7a 0%,#1a35b0 100%) !important; color: #fff !important; padding: 12px !important; border: none !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; width: 100% !important; font-family: inherit !important; box-shadow: 0 3px 10px rgba(14,38,145,.28) !important; margin-top: 2px !important; transition: opacity .18s !important; -webkit-appearance: none !important; }
.qpon-modal-submit:hover { opacity: .92 !important; }
.qpon-modal-submit:disabled { opacity: .6 !important; cursor: not-allowed !important; }
.qpon-modal-success { padding: 24px !important; text-align: center !important; }
.qpon-modal-success .checkmark { font-size: 44px !important; display: block !important; margin-bottom: 10px !important; }
.qpon-modal-success h3 { font-size: 18px !important; font-weight: 800 !important; color: #111827 !important; margin: 0 0 5px !important; padding: 0 !important; }
.qpon-modal-success p  { font-size: 14px !important; color: #6b7280 !important; margin: 0 !important; }
.qpon-qr-reveal { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-top: 14px !important; padding: 16px !important; background: #eef2fd !important; border-radius: 10px !important; border: 2px solid #c6d0f0 !important; }
.qpon-qr-img { max-width: 160px !important; border-radius: 8px !important; border: 3px solid #c6d0f0 !important; display: block !important; }
.qpon-qr-hint { font-size: 13px !important; color: #0e2691 !important; font-weight: 600 !important; text-align: center !important; margin: 0 !important; }
.qpon-btn-dl-qr { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #0e2691 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 9px 18px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; }
.qpon-btn-dl-qr:hover { background: #0a1e7a !important; }

@media (max-width: 640px) {
    .qpon-single-header { padding: 22px 18px 18px !important; }
    .qpon-single-title { font-size: 18px !important; }
    .qpon-single-body { padding: 18px !important; }
    .qpon-single-actions { -webkit-box-orient: vertical !important; -ms-flex-direction: column !important; flex-direction: column !important; }
    .qpon-btn-download, .qpon-btn-whatsapp-share { width: 100% !important; }
}