/* ================================================================
   AI Marketing Strategy Generator – Frontend v2.2
   BrandBrahma.com
   Orange accent · White text · Boxed layout
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Root: scope everything tightly to avoid theme conflicts ── */
#aimsg-form-container,
#aimsg-form-container * {
    box-sizing: border-box !important;
}

#aimsg-form-container {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    width: 100% !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
}

/* ── THE CARD BOX ─────────────────────────────────────────── */
#aimsg-form-container .aimsg-box {
    max-width: 760px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 36px !important;
    background: rgba(14, 14, 20, 0.95) !important;
    border: 1.5px solid rgba(255, 120, 0, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 0 1px rgba(255,120,0,0.07), 0 8px 48px rgba(0,0,0,0.55), 0 0 60px rgba(255,100,0,0.05) !important;
}

@media (max-width: 820px) {
    #aimsg-form-container .aimsg-box {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 28px 18px !important;
        border-radius: 12px !important;
    }
}

/* ── Utility ──────────────────────────────────────────────── */
#aimsg-form-container .aimsg-hidden,
#aimsg-form-container .aimsg-step-hidden { display: none !important; }

/* ── Progress bar ─────────────────────────────────────────── */
#aimsg-form-container .aimsg-progress-bar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    margin-bottom: 36px !important;
}

#aimsg-form-container .aimsg-progress-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 17px !important;
    left: 20% !important;
    right: 20% !important;
    height: 1px !important;
    background: rgba(255, 120, 0, 0.2) !important;
    z-index: 0 !important;
}

#aimsg-form-container .aimsg-progress-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

#aimsg-form-container .aimsg-step-number {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 120, 0, 0.3) !important;
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s !important;
}

#aimsg-form-container .aimsg-step-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    color: rgba(255,255,255,0.3) !important;
}

#aimsg-form-container .aimsg-progress-step.active .aimsg-step-number {
    background: linear-gradient(135deg, #ff6a00, #ff8c00) !important;
    border-color: #ff6a00 !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(255,106,0,0.2), 0 4px 12px rgba(255,106,0,0.35) !important;
}

#aimsg-form-container .aimsg-progress-step.active .aimsg-step-label { color: #ff8c00 !important; }

#aimsg-form-container .aimsg-progress-step.completed .aimsg-step-number {
    background: rgba(255,106,0,0.15) !important;
    border-color: #ff6a00 !important;
    color: #ff8c00 !important;
}

/* ── Form ─────────────────────────────────────────────────── */
#aimsg-form-container .aimsg-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

@media (max-width: 560px) {
    #aimsg-form-container .aimsg-form-row { grid-template-columns: 1fr !important; }
}

#aimsg-form-container .aimsg-form-group { margin-bottom: 20px !important; }

#aimsg-form-container .aimsg-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    color: rgba(255,255,255,0.5) !important;
    margin-bottom: 8px !important;
}

/* ── Inputs ───────────────────────────────────────────────── */
#aimsg-form-container .aimsg-input,
#aimsg-form-container .aimsg-input-large {
    display: block !important;
    width: 100% !important;
    padding: 13px 16px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid rgba(255, 120, 0, 0.45) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: "DM Sans", sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

#aimsg-form-container .aimsg-input-large {
    font-size: 15px !important;
    padding: 15px 18px !important;
}

#aimsg-form-container .aimsg-input::placeholder,
#aimsg-form-container .aimsg-input-large::placeholder {
    color: rgba(255,255,255,0.22) !important;
}

#aimsg-form-container .aimsg-input:focus,
#aimsg-form-container .aimsg-input-large:focus {
    border-color: #ff6a00 !important;
    background: rgba(255,106,0,0.06) !important;
    box-shadow: 0 0 0 3px rgba(255,106,0,0.15) !important;
}

#aimsg-form-container select.aimsg-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,140,0,.7)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

#aimsg-form-container select.aimsg-input option {
    background: #0e0e14 !important;
    color: #ffffff !important;
}

#aimsg-form-container .aimsg-error-field {
    border-color: #ff4444 !important;
}

/* ── Checkboxes ───────────────────────────────────────────── */
#aimsg-form-container .aimsg-checkbox-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

#aimsg-form-container .aimsg-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1.5px solid rgba(255,120,0,0.25) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: border-color 0.18s, background 0.18s !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

#aimsg-form-container .aimsg-checkbox-label:hover {
    border-color: #ff6a00 !important;
    background: rgba(255,106,0,0.07) !important;
}

#aimsg-form-container .aimsg-checkbox-label input[type="checkbox"] {
    accent-color: #ff6a00 !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
#aimsg-form-container .aimsg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 12px 26px !important;
    border: 1.5px solid transparent !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: "DM Sans", sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

#aimsg-form-container .aimsg-btn-primary,
#aimsg-form-container .aimsg-btn-gold {
    background: linear-gradient(135deg, #ff6a00, #ff8c00) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

#aimsg-form-container .aimsg-btn-primary:hover,
#aimsg-form-container .aimsg-btn-gold:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(255,106,0,0.4) !important;
    color: #ffffff !important;
}

#aimsg-form-container .aimsg-btn-secondary,
#aimsg-form-container .aimsg-btn-ghost {
    background: transparent !important;
    border-color: rgba(255,120,0,0.45) !important;
    color: #ff8c00 !important;
}

#aimsg-form-container .aimsg-btn-secondary:hover,
#aimsg-form-container .aimsg-btn-ghost:hover {
    background: rgba(255,106,0,0.08) !important;
    border-color: #ff6a00 !important;
    color: #ff8c00 !important;
}

#aimsg-form-container .aimsg-btn-full { width: 100% !important; }

#aimsg-form-container .aimsg-button-group {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
}

/* ── Error text ───────────────────────────────────────────── */
#aimsg-form-container .aimsg-error {
    display: block !important;
    color: #ff6b6b !important;
    font-size: 12px !important;
    margin-top: 5px !important;
}

/* ── Loading ──────────────────────────────────────────────── */
#aimsg-form-container #aimsg-loading {
    text-align: center !important;
    padding: 60px 20px !important;
}

#aimsg-form-container .aimsg-spinner-ring {
    width: 52px !important;
    height: 52px !important;
    border: 3px solid rgba(255,106,0,0.15) !important;
    border-top-color: #ff6a00 !important;
    border-radius: 50% !important;
    animation: aimsg-spin 0.85s linear infinite !important;
    margin: 0 auto 20px !important;
}

@keyframes aimsg-spin { to { transform: rotate(360deg); } }

#aimsg-form-container .aimsg-loading-text { color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px !important; }
#aimsg-form-container .aimsg-loading-sub  { color: rgba(255,255,255,0.4) !important; font-size: 13px !important; margin: 0 !important; }

/* ── Login / Credits card ─────────────────────────────────── */
#aimsg-form-container .aimsg-login-card {
    background: rgba(10,10,16,0.98) !important;
    border: 1.5px solid rgba(255,120,0,0.4) !important;
    border-radius: 14px !important;
    padding: 36px 28px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    text-align: center !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

#aimsg-form-container .aimsg-login-icon { font-size: 40px !important; margin-bottom: 16px !important; line-height: 1 !important; }
#aimsg-form-container .aimsg-login-card h3 { font-size: 21px !important; color: #ffffff !important; margin: 0 0 10px !important; }
#aimsg-form-container .aimsg-login-card p { color: rgba(255,255,255,0.55) !important; font-size: 14px !important; margin: 0 0 20px !important; }
#aimsg-form-container .aimsg-login-btns { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; }
#aimsg-form-container .aimsg-login-note { font-size: 12px !important; color: rgba(255,255,255,0.22) !important; margin: 0 !important; }

/* ── Results ──────────────────────────────────────────────── */
#aimsg-form-container #aimsg-results { animation: aimsg-fadein 0.4s ease !important; }
@keyframes aimsg-fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

#aimsg-form-container #aimsg-results-inner {
    background: rgba(10,10,16,0.7) !important;
    border: 1px solid rgba(255,120,0,0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
}

#aimsg-form-container .aimsg-strategy-header {
    background: linear-gradient(135deg, rgba(255,106,0,0.12), rgba(255,140,0,0.04)) !important;
    border-bottom: 1px solid rgba(255,120,0,0.18) !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

#aimsg-form-container .aimsg-strategy-badge {
    background: linear-gradient(135deg, #ff6a00, #ff8c00) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
}

#aimsg-form-container .aimsg-strategy-title-main { font-size: 18px !important; color: #ffffff !important; margin: 0 !important; }

#aimsg-form-container .aimsg-strategy-body { padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }

#aimsg-form-container .aimsg-strategy-section {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,120,0,0.14) !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    transition: border-color 0.2s !important;
}

#aimsg-form-container .aimsg-strategy-section:hover { border-color: rgba(255,106,0,0.35) !important; }

#aimsg-form-container .aimsg-section-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; }

#aimsg-form-container .aimsg-section-icon {
    width: 32px !important; height: 32px !important; border-radius: 8px !important;
    background: rgba(255,106,0,0.12) !important; border: 1px solid rgba(255,106,0,0.25) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; flex-shrink: 0 !important;
}

#aimsg-form-container .aimsg-section-title { font-size: 16px !important; color: #ff8c00 !important; margin: 0 !important; }

#aimsg-form-container .aimsg-section-content { color: rgba(255,255,255,0.8) !important; font-size: 14px !important; line-height: 1.75 !important; }
#aimsg-form-container .aimsg-section-content h2,
#aimsg-form-container .aimsg-section-content h3 { color: #ffffff !important; margin: 10px 0 5px !important; }
#aimsg-form-container .aimsg-section-content ul,
#aimsg-form-container .aimsg-section-content ol { padding-left: 18px !important; margin: 8px 0 !important; }
#aimsg-form-container .aimsg-section-content li { margin-bottom: 5px !important; color: rgba(255,255,255,0.8) !important; }
#aimsg-form-container .aimsg-section-content strong { color: #ffffff !important; }
#aimsg-form-container .aimsg-section-content p { margin: 0 0 10px !important; }
#aimsg-form-container .aimsg-section-content p:last-child { margin-bottom: 0 !important; }

#aimsg-form-container .aimsg-strategy-raw { padding: 22px !important; color: rgba(255,255,255,0.8) !important; font-size: 14px !important; line-height: 1.75 !important; }

/* ── Dual CTA ─────────────────────────────────────────────── */
#aimsg-form-container .aimsg-cta-section { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-top: 6px !important; }

@media (max-width: 560px) { #aimsg-form-container .aimsg-cta-section { grid-template-columns: 1fr !important; } }

#aimsg-form-container .aimsg-cta-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,120,0,0.18) !important;
    border-radius: 12px !important;
    padding: 22px 18px !important;
    text-align: center !important;
    transition: border-color 0.2s !important;
}

#aimsg-form-container .aimsg-cta-card:hover { border-color: rgba(255,106,0,0.4) !important; }
#aimsg-form-container .aimsg-cta-consult { border-top: 2px solid #3d8bff !important; }
#aimsg-form-container .aimsg-cta-more { border-top: 2px solid #ff6a00 !important; }
#aimsg-form-container .aimsg-cta-icon { font-size: 30px !important; margin-bottom: 10px !important; }
#aimsg-form-container .aimsg-cta-card h4 { font-size: 16px !important; color: #ffffff !important; margin: 0 0 7px !important; }
#aimsg-form-container .aimsg-cta-card p { color: rgba(255,255,255,0.5) !important; font-size: 13px !important; margin: 0 0 16px !important; }

/* ── Error box ────────────────────────────────────────────── */
#aimsg-form-container .aimsg-error-box {
    background: rgba(255,68,68,0.07) !important;
    border: 1.5px solid rgba(255,68,68,0.3) !important;
    border-radius: 10px !important;
    padding: 22px 24px !important;
    text-align: center !important;
}

#aimsg-form-container .aimsg-error-message { color: #ff8f8f !important; margin: 0 0 14px !important; font-size: 14px !important; }