/* ==========================================================================
   Alternative 4: Interactive Pure ChatGPT Hero (Clean White Experience)
   ========================================================================== */

/* Hero container layout */
.hero-copy-block {
    max-width: 920px !important;
    width: 100%;
    margin: 0 auto clamp(30px, 4vh, 48px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-centered-section {
    padding-top: clamp(120px, 15vh, 150px) !important;
    padding-bottom: clamp(30px, 4vh, 45px) !important;
}

/* ==========================================================================
   Hero Presentation Title: Dynamic Zero-CLS Stack with Premium Easing
   ========================================================================== */
.hero-presentation-header {
    opacity: 1;
    margin-bottom: 22px;
    width: 100%;
}

.hero-presentation-header .hero-centered-title {
    display: grid;
    grid-template-areas: "title-stack";
    place-items: center;
    font-size: clamp(38px, 4.8vw, 62px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
    max-width: clamp(640px, 94vw, 940px) !important;
    margin: 0 auto !important;
    text-wrap: balance !important;
    min-height: clamp(96px, 13vw, 175px);
    position: relative;
    overflow: visible;
}

/* Individual Dynamic Slide
   Zero-CLS Architecture: All slides share the same grid-area. Inactive slides 
   use visibility: hidden and opacity: 0, which keeps them participating in the 
   layout calculation of the grid cell. This ensures the title container naturally 
   and automatically matches the maximum height needed across any viewport width, 
   completely eliminating layout shift (CLS = 0) of the chat box below. */
.hero-dynamic-slide {
    grid-area: title-stack;
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.97);
    filter: blur(4px);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
    -webkit-font-smoothing: antialiased;
}

.hero-dynamic-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    user-select: auto;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dynamic-slide.is-leaving {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(1.02);
    filter: blur(4px);
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradual Size Escalation: Each capability step grows noticeably larger as it accelerates */
.hero-dynamic-slide[data-index="0"] { font-size: 0.85em; }
.hero-dynamic-slide[data-index="1"] { font-size: 0.87em; }
.hero-dynamic-slide[data-index="2"] { font-size: 0.89em; }
.hero-dynamic-slide[data-index="3"] { font-size: 0.91em; }
.hero-dynamic-slide[data-index="4"] { font-size: 0.93em; }
.hero-dynamic-slide[data-index="5"] { font-size: 0.95em; }
.hero-dynamic-slide[data-index="6"] { font-size: 0.98em; }
.hero-dynamic-slide[data-index="7"] { font-size: 1.01em; }
.hero-dynamic-slide[data-index="8"] { font-size: 1.04em; }
.hero-dynamic-slide[data-index="9"] { font-size: 1.07em; }
.hero-dynamic-slide[data-index="10"] { font-size: 1.10em; }
.hero-dynamic-slide[data-index="11"] { font-size: 1.13em; }
.hero-dynamic-slide[data-index="12"] { font-size: 1.16em; }
.hero-dynamic-slide[data-index="13"] { font-size: 1.19em; }
.hero-dynamic-slide[data-index="14"] { font-size: 1.22em; font-weight: 650; }
.hero-dynamic-slide[data-index="15"],
.hero-dynamic-slide.is-final {
    font-size: 1.26em;
    font-weight: 700;
    letter-spacing: -0.035em;
}

/* Final Climax Slide: "Get superintelligence for your website"
   All text in electric brand blue without underline, with continuous glowing AI shimmer */
.hero-dynamic-slide.is-final,
.hero-dynamic-slide.is-final .highlight-superintel-all,
.hero-dynamic-slide .highlight-superintel {
    color: #2563eb;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 25%, #60a5fa 50%, #2563eb 75%, #1d4ed8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: superintel-blue-shimmer 3s linear infinite;
    filter: drop-shadow(0 2px 16px rgba(37, 99, 235, 0.32));
}

@keyframes superintel-blue-shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-dynamic-slide {
        transform: none !important;
        filter: none !important;
        transition: opacity 0.25s ease !important;
    }
    .hero-dynamic-slide.is-active,
    .hero-dynamic-slide.is-leaving {
        transform: none !important;
        filter: none !important;
        transition: opacity 0.25s ease !important;
    }
    .hero-dynamic-slide.is-final,
    .hero-dynamic-slide.is-final .highlight-superintel-all,
    .hero-dynamic-slide .highlight-superintel {
        animation: none !important;
        background: none !important;
        -webkit-text-fill-color: #2563eb !important;
        color: #2563eb !important;
        filter: none !important;
    }
}

/* White ChatGPT Hero Container (Balanced empty canvas space below opening messages, expands on interaction) */
.hero-chat-container {
    width: 100%;
    max-width: 1040px;
    height: 410px;
    margin: 0 auto;
    background: #ffffff;
    color: #0f172a;
    border-radius: 20px;
    border: 1px solid rgba(27, 27, 27, 0.08);
    box-shadow: 0 16px 44px -12px rgba(27, 27, 27, 0.08),
                0 1px 3px rgba(27, 27, 27, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    text-align: left;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.hero-chat-container.is-extended {
    height: 540px;
}

.hero-chat-container.is-extended .hero-chat-messages {
    padding: 20px 24px 14px;
    gap: 14px;
}

.hero-chat-container:hover {
    box-shadow: 0 20px 50px -12px rgba(27, 27, 27, 0.12),
                0 1px 3px rgba(27, 27, 27, 0.04);
}

/* Chat Messages Window */
.hero-chat-messages {
    flex: 1;
    padding: 16px 20px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    background: #ffffff;
    transition: padding 0.3s ease, gap 0.3s ease;
}

.hero-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.hero-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.hero-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* Message Rows */
.chat-msg-row {
    display: flex;
    gap: 10px;
    width: 100%;
    animation: chatMsgAppear 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chatMsgAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-msg-row.is-user {
    justify-content: flex-end;
}

.chat-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: width 0.3s ease, height 0.3s ease;
}

.chat-msg-avatar svg {
    width: 13px;
    height: 13px;
    transition: width 0.3s ease, height 0.3s ease;
}

.chat-msg-avatar.avatar-bot {
    background: #0f172a;
    color: #ffffff;
}

.chat-msg-avatar.avatar-user {
    display: none;
}

.chat-msg-bubble {
    font-size: 14px;
    line-height: 1.48;
    word-break: break-word;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

.hero-chat-container.is-extended .chat-msg-row {
    gap: 12px;
}

.hero-chat-container.is-extended .chat-msg-avatar {
    width: 26px;
    height: 26px;
    margin-top: 2px;
}

.hero-chat-container.is-extended .chat-msg-avatar svg {
    width: 14px;
    height: 14px;
}

.hero-chat-container.is-extended .chat-msg-bubble {
    font-size: 14.5px;
    line-height: 1.55;
}

.chat-msg-row.is-user .chat-msg-bubble {
    background: #f4f1ea;
    color: #1b1b1b;
    border: 1px solid rgba(27, 27, 27, 0.08);
    border-radius: 18px 18px 4px 18px;
    padding: 10px 16px;
    max-width: 82%;
    font-weight: 450;
}

.chat-msg-row.is-bot .chat-msg-bubble {
    color: #1e293b;
    max-width: 92%;
    padding: 2px 0;
}

/* Clean Bot List & Text Typography */
.bot-reply-text p {
    margin: 0 0 10px 0;
    color: #1e293b;
    line-height: 1.6;
}

.bot-reply-text p:last-child {
    margin-bottom: 0;
}

.bot-clean-list {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    color: #334155;
    line-height: 1.65;
}

.bot-clean-list li {
    margin-bottom: 12px;
}

.bot-clean-list li:last-child {
    margin-bottom: 0;
}

.bot-clean-list strong {
    color: #0f172a;
    font-weight: 600;
}

.chat-benefit-link {
    color: #0f172a;
    text-decoration: underline;
    text-decoration-color: #2563eb;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.chat-benefit-link:hover {
    color: #2563eb;
    text-decoration-color: #1d4ed8;
}

.agent-split-row {
    scroll-margin-top: 100px;
}

/* Chat Input Area (Pure ChatGPT style) */
.hero-chat-input-area {
    padding: 8px 16px 10px;
    background: #ffffff;
    border-top: 1px solid rgba(27, 27, 27, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    transition: padding 0.3s ease;
}

.hero-chat-container.is-extended .hero-chat-input-area {
    padding: 12px 20px 14px;
}

.chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid rgba(27, 27, 27, 0.14);
    border-radius: 22px;
    padding: 5px 8px 5px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, padding 0.3s ease, border-radius 0.3s ease;
}

.hero-chat-container.is-extended .chat-input-wrapper {
    padding: 6px 8px 6px 18px;
    border-radius: 26px;
    gap: 10px;
}

.chat-input-wrapper:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.chat-input-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.hero-chat-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #0f172a;
    font-size: 13.5px;
    line-height: 1.4;
    resize: none;
    max-height: 90px;
    font-family: inherit;
    transition: font-size 0.3s ease;
}

.hero-chat-container.is-extended .hero-chat-input {
    font-size: 14.5px;
    line-height: 1.45;
}

.hero-chat-input::placeholder {
    color: #94a3b8;
}

.hero-chat-send-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hero-chat-send-btn svg {
    width: 13px;
    height: 13px;
}

.hero-chat-container.is-extended .hero-chat-send-btn {
    width: 32px;
    height: 32px;
}

.hero-chat-container.is-extended .hero-chat-send-btn svg {
    width: 15px;
    height: 15px;
}

.hero-chat-send-btn:hover:not(:disabled) {
    background: #2563eb;
    transform: scale(1.05);
}

.hero-chat-send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #cbd5e1;
    color: #ffffff;
}

/* ==========================================================================
   Live Interactive CRO AI Chat Section (Placed after Brands Carousel)
   ========================================================================== */
.live-chat-section {
    padding: clamp(64px, 8vh, 96px) 0 clamp(72px, 9vh, 108px);
    background: var(--color-bg, #f7f5f2) !important;
    border-top: 1px solid rgba(27, 27, 27, 0.08) !important;
    border-bottom: 1px solid rgba(27, 27, 27, 0.08) !important;
    position: relative;
}

.live-chat-header {
    max-width: 1040px;
    margin: 0 auto clamp(28px, 4vh, 36px);
    text-align: center;
}

.live-chat-title {
    font-size: clamp(30px, 4.2vw, 48px) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
    margin: 0 !important;
    text-wrap: balance;
}

/* Live typing effect cursor & input welcome pulse */
.chat-cursor {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    background-color: #2563eb;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: chatCursorBlink 0.5s infinite;
}

@keyframes chatCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.chat-input-welcomed {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22) !important;
    transition: all 0.3s ease !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-centered-section {
        padding-top: 90px !important;
    }

    .hero-presentation-header {
        margin-bottom: 18px !important;
    }

    .hero-presentation-header .hero-centered-title {
        font-size: clamp(28px, 7.5vw, 40px) !important;
        line-height: 1.12 !important;
        max-width: 100% !important;
        min-height: clamp(68px, 16vw, 96px);
    }

    .hero-dynamic-slide {
        transform: translateY(12px);
        filter: blur(3px);
    }

    .hero-dynamic-slide.is-leaving {
        transform: translateY(-12px);
        filter: blur(3px);
    }

    .hero-chat-container {
        border-radius: 16px;
        height: 330px;
    }

    .hero-chat-container.is-extended {
        height: 480px;
    }

    .hero-chat-messages {
        padding: 14px 16px 8px;
        gap: 8px;
    }

    .chat-msg-row.is-user .chat-msg-bubble {
        max-width: 88%;
        font-size: 13.5px;
    }

    .hero-chat-input-area {
        padding: 8px 12px 10px;
    }

    .live-chat-section {
        padding: 48px 0 60px;
    }

    .live-chat-title {
        font-size: clamp(24px, 6.5vw, 32px) !important;
    }
}

/* ==========================================================================
   Floating "Ask Seatext AI" Glassmorphic Widget
   ========================================================================== */

.floating-ask-ai-widget {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 990 !important;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s ease;
    will-change: transform, opacity;
}

.floating-ask-ai-widget.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(18px) scale(0.92) !important;
}

.floating-ask-ai-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 9px 16px 9px 10px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
    backdrop-filter: blur(18px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.14),
                0 0 0 1px rgba(255, 255, 255, 0.9) inset,
                0 2px 6px -1px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.floating-ask-ai-btn:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 18px 40px -4px rgba(15, 23, 42, 0.18),
                0 0 0 1px rgba(255, 255, 255, 1) inset,
                0 6px 16px -2px rgba(37, 99, 235, 0.16) !important;
}

.floating-ask-ai-btn:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
}

.floating-ask-ai-btn:focus-visible {
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 4px #2563eb,
                0 12px 32px -4px rgba(15, 23, 42, 0.14) !important;
}

.floating-ask-ai-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

.floating-ask-ai-sparkle {
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
}

.floating-ask-ai-status-dot {
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6) !important;
    animation: floatingDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes floatingDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.floating-ask-ai-label {
    white-space: nowrap !important;
    line-height: 1 !important;
}

.floating-ask-ai-action {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-left: 2px !important;
}

.floating-ask-ai-btn:hover .floating-ask-ai-action {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
    .floating-ask-ai-widget {
        bottom: 18px !important;
        right: 18px !important;
    }

    .floating-ask-ai-btn {
        padding: 8px 13px 8px 9px !important;
        font-size: 13px !important;
        gap: 9px !important;
    }

    .floating-ask-ai-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .floating-ask-ai-action {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-ask-ai-widget,
    .floating-ask-ai-btn,
    .floating-ask-ai-status-dot {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Personal Enterprise Presentation Reservation Modal
   ========================================================================== */
.sales-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sales-modal.is-open {
    display: flex;
}

.sales-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sales-modal-dialog {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: clamp(28px, 4vw, 40px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    color: #0f172a;
    text-align: left;
    animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.sales-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s ease;
}

.sales-modal-close:hover {
    color: #0f172a;
}

.sales-modal-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.sales-modal-header p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 22px 0;
    line-height: 1.5;
}

.sales-modal-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.sales-modal-form label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sales-modal-form input,
.sales-modal-form select {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sales-modal-form input:focus,
.sales-modal-form select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #ffffff;
}

.sales-modal-form .sales-submit-btn {
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.sales-modal-form .sales-submit-btn:hover {
    background: #1e293b !important;
    transform: translateY(-1px);
}