/**
 * Smart PayGate Pro - Elementor-Optimized Frontend Stylesheet
 */

:root {
    --spa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --spa-primary: #2563eb;
    --spa-primary-hover: #1d4ed8;
    --spa-secondary: #0f172a;
    --spa-emerald: #10b981;
    --spa-bg: #ffffff;
    --spa-border: #e2e8f0;
}

/* Isolate from Theme / Elementor Overrides */
.spa-root-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 0 !important;
    font-family: var(--spa-font) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    color: #1e293b !important;
}

.spa-root-wrapper * {
    box-sizing: border-box !important;
}

/* Main Container */
.spa-main-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* When Video is Enabled (2-Column Grid) */
.spa-layout-grid.spa-has-video {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 32px !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}

/* Stacked with Video */
.spa-layout-stacked.spa-has-video {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    max-width: 580px !important;
    margin: 0 auto !important;
}

/* Single Checkout Card (No Video or Centered Card) */
.spa-no-video {
    max-width: 500px !important;
    margin: 0 auto !important;
}

@media (max-width: 860px) {
    .spa-layout-grid.spa-has-video {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        max-width: 500px !important;
    }
}

/* ============================================================
   Checkout Payment Card (Bulletproof Solid Container)
   ============================================================ */
.spa-checkout-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

/* Card Header */
.spa-card-header {
    background: #ffffff !important;
    padding: 24px 28px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.spa-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

.spa-badge-pill {
    background: #eef2ff !important;
    color: #4338ca !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid #e0e7ff !important;
}

.spa-secure-shield {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    border: 1px solid #d1fae5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.spa-product-title {
    margin: 0 0 6px 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

.spa-product-price {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--spa-primary) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.spa-product-price del {
    font-size: 18px !important;
    color: #94a3b8 !important;
    margin-right: 8px !important;
    font-weight: normal !important;
}

.spa-product-price ins {
    text-decoration: none !important;
}

.spa-product-desc {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
}

/* ============================================================
   Price Countdown Urgency Timer Box
   ============================================================ */
.spa-countdown-container {
    background: #fffbeb !important;
    border: 1.5px solid #fef3c7 !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin: 12px auto 6px !important;
    max-width: 360px !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.1) !important;
    text-align: center !important;
    user-select: none !important;
}

.spa-countdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #b45309 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.spa-countdown-icon {
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: spaFlamePulse 1.5s infinite alternate !important;
}

/* Eliminate any WordPress wp-emoji image tags that might be injected anywhere in SPA */
.spa-root-wrapper img.emoji,
.spa-countdown-container img.emoji,
.spa-countdown-header img.emoji,
.spa-modal-box img.emoji,
.spa-modal-overlay img.emoji {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

@keyframes spaFlamePulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.5)); }
    100% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); }
}

.spa-countdown-boxes {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.spa-countdown-unit {
    background: #ffffff !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    min-width: 54px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.spa-countdown-number {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #d97706 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace !important;
}

.spa-countdown-text {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #92400e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 3px !important;
    display: block !important;
}

.spa-countdown-sep {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #f59e0b !important;
    line-height: 1 !important;
    margin-top: -6px !important;
}

/* Card Body */
.spa-card-body {
    background: #ffffff !important;
    padding: 26px 28px 24px !important;
    flex: 1 !important;
}

.spa-form-group {
    margin-bottom: 20px !important;
}

.spa-form-group label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: left !important;
}

.spa-required {
    color: #ef4444 !important;
}

.spa-input {
    width: 100% !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.spa-input:focus {
    border-color: var(--spa-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

.spa-helper-text {
    display: block !important;
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.spa-form-message {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.spa-form-message.spa-error {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.spa-form-message.spa-success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

/* Gateway Selector on Card */
.spa-gateway-group {
    margin-bottom: 20px !important;
}

.spa-gateway-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.spa-gateway-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    user-select: none !important;
}

.spa-gateway-option:hover {
    border-color: #93c5fd !important;
    background: #f8fafc !important;
}

.spa-gateway-option.spa-gateway-selected {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 0 0 1px #2563eb !important;
}

.spa-gateway-radio {
    margin: 0 !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
}

.spa-gateway-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Pay Submit Button */
.spa-btn-submit {
    width: 100% !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.spa-btn-submit:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.spa-btn-submit:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.spa-btn-spinner {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: #ffffff !important;
    animation: spaSpin 0.7s infinite linear !important;
}

@keyframes spaSpin {
    to { transform: rotate(360deg); }
}

/* Gateway Selection Options */
.spa-gateway-group {
    margin-bottom: 18px !important;
}

.spa-gateway-heading {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

.spa-gateway-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.spa-gateway-pill {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.spa-gateway-pill:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}

.spa-gateway-pill.spa-gateway-active {
    border-color: #4f46e5 !important;
    background: #eef2ff !important;
    box-shadow: 0 0 0 1px #4f46e5 !important;
}

.spa-gateway-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.spa-gateway-dot {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid #94a3b8 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.spa-gateway-pill.spa-gateway-active .spa-gateway-dot {
    border-color: #4f46e5 !important;
    background: #4f46e5 !important;
}

.spa-gateway-pill.spa-gateway-active .spa-gateway-dot::after {
    content: '' !important;
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.spa-gateway-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.spa-gateway-pill.spa-gateway-active .spa-gateway-title {
    color: #3730a3 !important;
    font-weight: 700 !important;
}

/* Secure Badges Footer */
.spa-secure-footer {
    margin-top: 22px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.spa-payment-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.spa-pay-badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
}

.spa-ssl-text {
    font-size: 12px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

/* Vector SVG Icons */
.spa-svg-icon {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
}

.spa-label-svg {
    width: 16px !important;
    height: 16px !important;
    color: #64748b !important;
    display: inline-block !important;
}

.spa-btn-svg {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
}

.spa-lock-svg {
    width: 13px !important;
    height: 13px !important;
    color: #059669 !important;
    display: inline-block !important;
}

.spa-feat-svg {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
}

.spa-contact-svg {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
}

/* ============================================================
   Video Player Box (Left Column)
   ============================================================ */
.spa-video-card {
    background: #0f172a !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
}

.spa-video-header {
    margin-bottom: 16px !important;
}

.spa-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.spa-live-dot {
    width: 6px !important;
    height: 6px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.spa-video-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
}

.spa-video-player-wrap {
    position: relative !important;
    border-radius: 14px !important;
    background: #000000 !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Direct HTML5 Video (Full Native Display & Hardware Surface on Mobile & PC) */
.spa-video-html5-wrap {
    position: relative !important;
    width: 100% !important;
    background: transparent !important;
    border-radius: 10px !important;
    display: block !important;
}

.spa-video-html5-wrap video,
.spa-html5-video {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: 480px !important;
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
    overflow: clip !important;
    margin: 0 auto !important;
}

/* 16:9 Iframe Ratio (YouTube, Vimeo, Google Drive) */
.spa-video-ratio {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* 16:9 Aspect Ratio */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #000000 !important;
}

.spa-video-ratio iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* ============================================================
   Anti-Download Video Protection Engine
   ============================================================ */
.spa-video-card,
.spa-video-player-wrap {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.spa-video-ratio video,
.spa-video-html5-wrap video {
    -webkit-touch-callout: none !important;
    user-select: none !important;
}

/* Hide native download button on WebKit / Chromium / Blink / Edge without breaking mobile layout */
.spa-video-ratio video::-internal-media-controls-download-button,
.spa-video-html5-wrap video::-internal-media-controls-download-button,
.spa-video-card video::-internal-media-controls-download-button {
    display: none !important;
}

/* Google Drive & 3rd-party popout corner guard */
.spa-video-shield-corner {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 65px !important;
    height: 65px !important;
    z-index: 5 !important;
    background: transparent !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* ============================================================
   Highlighted "Tap to Unmute" Button
   ============================================================ */
.spa-video-unmute-overlay {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 15 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    color: #ffffff !important;
    border: 1.5px solid #3b82f6 !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45) !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    outline: none !important;
}

.spa-video-unmute-overlay:hover {
    background: #1d4ed8 !important;
    border-color: #60a5fa !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.65) !important;
}

.spa-unmute-pulse-ring {
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.7) !important;
    animation: spaPulseRed 1.8s infinite !important;
    flex-shrink: 0 !important;
}

.spa-unmute-svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* When Audio is Active (Unmuted) */
.spa-video-unmute-overlay.spa-sound-active {
    background: rgba(6, 78, 59, 0.9) !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
}

.spa-video-unmute-overlay.spa-sound-active:hover {
    background: #047857 !important;
    border-color: #34d399 !important;
}

.spa-video-unmute-overlay.spa-sound-active .spa-unmute-pulse-ring {
    background: #10b981 !important;
    animation: spaPulseGreen 1.8s infinite !important;
}

@keyframes spaPulseRed {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes spaPulseGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.spa-sound-hint {
    display: none !important;
}

.spa-video-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.spa-feature-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 10px 8px !important;
    text-align: center !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ============================================================
   Popup Modal (Verified Access)
   ============================================================ */
.spa-modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.spa-modal-overlay.spa-modal-active {
    opacity: 1 !important;
    visibility: visible !important;
}

.spa-modal-box {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 500px !important;
    border-radius: 24px !important;
    padding: 34px 30px 26px !important;
    position: relative !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    transform: scale(0.92) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.spa-modal-overlay.spa-modal-active .spa-modal-box {
    transform: scale(1) !important;
}

/* Verification Loader */
.spa-verify-loader {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 16px auto !important;
    border: 4px solid rgba(99, 102, 241, 0.18) !important;
    border-top: 4px solid #6366f1 !important;
    border-radius: 50% !important;
    animation: spaSpin 0.9s linear infinite !important;
}

.spa-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    background: #f1f5f9 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.spa-modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.spa-modal-icon-wrap {
    margin-bottom: 18px !important;
}

.spa-modal-icon-circle {
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    border: 2px solid #a7f3d0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18) !important;
}

.spa-modal-success-svg {
    width: 38px !important;
    height: 38px !important;
    color: #10b981 !important;
    stroke: #10b981 !important;
    display: block !important;
    animation: spaPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes spaPopIn {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.spa-checkmark {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    stroke-width: 3 !important;
    stroke: #10b981 !important;
    stroke-miterlimit: 10 !important;
}

.spa-checkmark-circle,
.spa-checkmark-check {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    stroke-width: 3 !important;
    stroke: #10b981 !important;
    fill: none !important;
    display: block !important;
}

.spa-modal-title {
    margin: 0 0 8px 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

.spa-modal-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
    color: #10b981 !important;
    font-weight: 600 !important;
}

.spa-modal-divider {
    height: 1px !important;
    background: #e2e8f0 !important;
    margin: 18px 0 !important;
}

.spa-modal-desc {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
    text-align: left !important;
    background: #f8fafc !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border-left: 3px solid var(--spa-primary) !important;
}

.spa-modal-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.spa-btn-access {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 15px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.spa-btn-access:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-2px) !important;
}

.spa-btn-arrow {
    font-size: 18px !important;
    transition: transform 0.2s ease !important;
}

.spa-btn-access:hover .spa-btn-arrow {
    transform: translateX(4px) !important;
}

.spa-btn-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.spa-btn-contact-whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
}

.spa-btn-contact-whatsapp:hover {
    background: #20bd5a !important;
    transform: translateY(-1px) !important;
}

.spa-btn-contact-phone {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.spa-btn-contact-phone:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
}

.spa-modal-footer {
    margin-top: 18px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.spa-footer-secure-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}

.spa-footer-shield-svg {
    width: 15px !important;
    height: 15px !important;
    color: #059669 !important;
    stroke: #059669 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.spa-flame-svg {
    width: 16px !important;
    height: 16px !important;
    color: #ef4444 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor !important;
}

/* Alerts */
.spa-alert {
    padding: 14px 18px !important;
    border-radius: 10px !important;
    margin: 15px auto !important;
    max-width: 500px !important;
    font-size: 14px !important;
    text-align: left !important;
}

.spa-alert-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fef3c7 !important;
}

.spa-alert-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fee2e2 !important;
}