/**
 * AI Workflow Toolkit — Public Styles.
 *
 * Member-facing styles for the workflow dashboard ([aiwftk_dashboard]
 * shortcode), the branded login form ([aiwftk_login] shortcode), and
 * the workshop landing page ([aiwftk_workshop] shortcode).
 *
 * DIVI THEME COMPATIBILITY: The production site uses the Divi theme,
 * which aggressively overrides plugin CSS through high-specificity
 * selectors like #main-content, .et_pb_module, and element-level styles.
 * To reliably override Divi, every rule in this file:
 *   - Is prefixed with "body .aiwftk-dashboard" for maximum specificity
 *   - Uses !important on all key visual properties
 *   - Includes Divi-specific selectors where needed (body #main-content,
 *     body .et_pb_module) for especially stubborn elements like headings
 *
 * CSS variables (defined on .aiwftk-dashboard) make brand color changes
 * a single-location edit. Search for "--aiwftk-" to see all variables.
 *
 * The search hide rule uses both a CSS class AND inline styles (set via
 * jQuery) because Divi's list-item styles override class-only hiding.
 *
 * @package AI_Workflow_Toolkit
 * @since 0.2.0
 */

/* =====================================================
   CSS Variables
   ===================================================== */
body .aiwftk-dashboard,
body .aiwftk-login-required,
body .aiwftk-workshop,
body .aiwftk-upgrade-form,
body .aiwftk-prompt-delivery {
    --aiwftk-primary: #2271b1;
    --aiwftk-primary-hover: #135e96;
    --aiwftk-primary-light: #f0f6fc;
    --aiwftk-cta: #f36f21;
    --aiwftk-cta-hover: #ee600d;
    --aiwftk-success: #00a32a;
    --aiwftk-success-light: #edfaef;
    --aiwftk-error: #d63638;
    --aiwftk-text: #1d2327;
    --aiwftk-text-light: #646970;
    --aiwftk-border: #dcdcde;
    --aiwftk-border-light: #e9ecef;
    --aiwftk-bg: #ffffff;
    --aiwftk-bg-subtle: #f6f7f7;
    --aiwftk-radius: 8px;
    --aiwftk-radius-sm: 4px;
    --aiwftk-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --aiwftk-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.12);
    --aiwftk-transition: 0.2s ease;
    --aiwftk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* =====================================================
   Login Required
   ===================================================== */
body .aiwftk-login-required {
    padding: 60px 20px !important;
    text-align: center !important;
    background: var(--aiwftk-bg-subtle) !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
    font-family: var(--aiwftk-font) !important;
}

body .aiwftk-login-required .aiwftk-login-inner h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 24px !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body .aiwftk-login-required .aiwftk-login-inner p {
    margin: 0 0 24px !important;
    padding: 0 !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 16px !important;
}

body .aiwftk-login-required a.aiwftk-login-btn {
    display: inline-block !important;
    padding: 12px 32px !important;
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background var(--aiwftk-transition) !important;
}

body .aiwftk-login-required a.aiwftk-login-btn:hover {
    background: var(--aiwftk-primary-hover) !important;
    color: #fff !important;
}

/* =====================================================
   Dashboard Container
   ===================================================== */
body .aiwftk-dashboard {
    max-width: 960px !important;
    margin: 0 auto !important;
    font-family: var(--aiwftk-font) !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

/* =====================================================
   Header
   ===================================================== */
body .aiwftk-dashboard .aiwftk-header {
    margin-bottom: 24px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* =====================================================
   Roundtable Banner
   ===================================================== */
body .aiwftk-dashboard .aiwftk-roundtable {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    background: var(--aiwftk-primary-light) !important;
    border: none !important;
    border-left: 4px solid var(--aiwftk-primary) !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    font-size: 14px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body .aiwftk-dashboard .aiwftk-roundtable-label {
    font-weight: 600 !important;
    color: var(--aiwftk-text) !important;
}

body .aiwftk-dashboard .aiwftk-roundtable-date {
    color: var(--aiwftk-text) !important;
}

body .aiwftk-dashboard a.aiwftk-roundtable-link {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background var(--aiwftk-transition) !important;
    margin-left: auto !important;
    border: none !important;
}

body .aiwftk-dashboard a.aiwftk-roundtable-link:hover {
    background: var(--aiwftk-primary-hover) !important;
    color: #fff !important;
}

/* =====================================================
   Roundtable Recordings
   ===================================================== */

/* --- Latest Recording Section --- */
body .aiwftk-dashboard .aiwftk-recording-latest {
    margin-bottom: 24px !important;
    padding: 20px !important;
    background: var(--aiwftk-bg) !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
    box-shadow: var(--aiwftk-shadow) !important;
}

body .aiwftk-dashboard .aiwftk-recording-latest-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

body .aiwftk-dashboard .aiwftk-recording-latest-label {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--aiwftk-primary) !important;
}

body .aiwftk-dashboard .aiwftk-recording-latest-date {
    font-size: 14px !important;
    color: var(--aiwftk-text-light) !important;
}

/* --- Takeaways Text --- */
body .aiwftk-dashboard .aiwftk-recording-takeaways {
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--aiwftk-text) !important;
}

body .aiwftk-dashboard .aiwftk-recording-takeaways p {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-recording-takeaways ul,
body .aiwftk-dashboard .aiwftk-recording-takeaways ol {
    margin: 0 0 8px 20px !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-recording-takeaways li {
    margin-bottom: 4px !important;
}

/* --- Responsive YouTube Embed --- */
body .aiwftk-dashboard .aiwftk-recording-video {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: var(--aiwftk-radius-sm) !important;
}

body .aiwftk-dashboard .aiwftk-recording-video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* --- Dismiss Button (× in header) --- */
body .aiwftk-dashboard .aiwftk-recording-dismiss {
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    color: var(--aiwftk-text-light) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    transition: color var(--aiwftk-transition) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

body .aiwftk-dashboard .aiwftk-recording-dismiss:hover {
    color: var(--aiwftk-text) !important;
    background: none !important;
}

/* --- Recall Button (compact pill in search row) --- */
body .aiwftk-dashboard .aiwftk-recording-recall-btn {
    display: none;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    background: var(--aiwftk-primary-light) !important;
    color: var(--aiwftk-primary) !important;
    border: 1px solid var(--aiwftk-primary) !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--aiwftk-font) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background var(--aiwftk-transition), color var(--aiwftk-transition) !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body .aiwftk-dashboard .aiwftk-recording-recall-btn:hover {
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
}

/* =====================================================
   Start Here — Featured Workflows
   ===================================================== */
body .aiwftk-dashboard .aiwftk-start-here {
    position: relative !important;
    padding: 24px !important;
    background: var(--aiwftk-primary-light) !important;
    border: 1px solid #c8ddf0 !important;
    border-left: 4px solid var(--aiwftk-primary) !important;
    border-radius: var(--aiwftk-radius) !important;
    margin-bottom: 24px !important;
}

body .aiwftk-dashboard .aiwftk-start-here-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

body .aiwftk-dashboard .aiwftk-start-here-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--aiwftk-primary-hover) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-start-here-dismiss {
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    color: var(--aiwftk-text-light) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    transition: color var(--aiwftk-transition) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-dismiss:hover {
    color: var(--aiwftk-text) !important;
    background: none !important;
}

/*
 * WYSIWYG intro content — must override Divi for every HTML element
 * the WordPress visual editor can produce: paragraphs, lists, bold,
 * italic, links, blockquotes, and headings.
 */
body .aiwftk-dashboard .aiwftk-start-here-intro {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.6 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.6 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro p:last-child {
    margin-bottom: 0 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro ol,
body .aiwftk-dashboard .aiwftk-start-here-intro ul {
    margin: 0 0 12px 24px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.6 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro ol {
    list-style-type: decimal !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro ul {
    list-style-type: disc !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro li {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.6 !important;
    list-style-position: outside !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro strong,
body .aiwftk-dashboard .aiwftk-start-here-intro b {
    font-weight: 700 !important;
    color: inherit !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro em,
body .aiwftk-dashboard .aiwftk-start-here-intro i {
    font-style: italic !important;
    color: inherit !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro a {
    color: var(--aiwftk-accent) !important;
    text-decoration: underline !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro a:hover {
    color: var(--aiwftk-accent-hover) !important;
}

body .aiwftk-dashboard .aiwftk-start-here-intro blockquote {
    margin: 0 0 12px 16px !important;
    padding: 8px 16px !important;
    border-left: 3px solid var(--aiwftk-border) !important;
    color: var(--aiwftk-text-light) !important;
    font-style: italic !important;
}

/* Cards container — horizontal flexbox that wraps on narrow screens */
body .aiwftk-dashboard .aiwftk-start-here-cards {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual card — white background, subtle border, flex layout */
body .aiwftk-dashboard .aiwftk-start-here-card {
    flex: 1 1 220px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px !important;
    background: var(--aiwftk-bg) !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
    box-shadow: var(--aiwftk-shadow) !important;
    transition: box-shadow var(--aiwftk-transition), transform 0.1s ease !important;
    margin: 0 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-card:hover {
    box-shadow: var(--aiwftk-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

body .aiwftk-dashboard .aiwftk-start-here-card-body {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-card-context {
    display: block !important;
    font-size: 12px !important;
    color: var(--aiwftk-text-light) !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

body .aiwftk-dashboard .aiwftk-start-here-card-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-start-here-card-desc {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--aiwftk-text-light) !important;
    line-height: 1.5 !important;
}

/* Copy button inside card — full width at bottom */
body .aiwftk-dashboard .aiwftk-start-here-card button.aiwftk-copy-btn {
    width: 100% !important;
    text-align: center !important;
}

/* Recall button — compact pill in the search row */
body .aiwftk-dashboard .aiwftk-start-here-recall-btn {
    display: none;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    background: var(--aiwftk-primary-light) !important;
    color: var(--aiwftk-primary) !important;
    border: 1px solid var(--aiwftk-primary) !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--aiwftk-font) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background var(--aiwftk-transition), color var(--aiwftk-transition) !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body .aiwftk-dashboard .aiwftk-start-here-recall-btn:hover {
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
}

/* =====================================================
   Search / Filter + Info Button
   ===================================================== */
body .aiwftk-dashboard .aiwftk-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-search {
    position: relative !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-search-input {
    width: 100% !important;
    padding: 12px 40px 12px 42px !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
    font-size: 15px !important;
    font-family: var(--aiwftk-font) !important;
    color: var(--aiwftk-text) !important;
    background: var(--aiwftk-bg) !important;
    transition: border-color var(--aiwftk-transition), box-shadow var(--aiwftk-transition) !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
}

body .aiwftk-dashboard .aiwftk-search-input:focus {
    outline: none !important;
    border-color: var(--aiwftk-primary) !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15) !important;
}

body .aiwftk-dashboard .aiwftk-search-input::placeholder {
    color: #a7aaad !important;
}

body .aiwftk-dashboard .aiwftk-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #a7aaad !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

body .aiwftk-dashboard .aiwftk-search-clear {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: var(--aiwftk-text-light) !important;
    cursor: pointer !important;
    padding: 4px !important;
    line-height: 1 !important;
    display: none !important;
    transition: color var(--aiwftk-transition) !important;
}

body .aiwftk-dashboard .aiwftk-search-clear:hover {
    color: var(--aiwftk-text) !important;
}

body .aiwftk-dashboard .aiwftk-search-clear.aiwftk-visible {
    display: block !important;
}

body .aiwftk-dashboard .aiwftk-no-results {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 15px !important;
}

body .aiwftk-dashboard .aiwftk-no-results p {
    margin: 0 !important;
}

/* =====================================================
   Toolkit Sections
   ===================================================== */
body .aiwftk-dashboard .aiwftk-toolkit {
    margin-bottom: 16px !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
    background: var(--aiwftk-bg) !important;
    box-shadow: var(--aiwftk-shadow) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-toolkit-header {
    padding: 18px 20px !important;
    background: var(--aiwftk-bg-subtle) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background var(--aiwftk-transition) !important;
    border: none !important;
    margin: 0 !important;
}

body .aiwftk-dashboard .aiwftk-toolkit-header:hover {
    background: #eef1f3 !important;
}

body .aiwftk-dashboard .aiwftk-toolkit-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .aiwftk-dashboard .aiwftk-toolkit-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--aiwftk-text) !important;
    flex-grow: 1 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-toolkit-desc {
    margin: 6px 0 0 26px !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: var(--aiwftk-text-light) !important;
}

/* =====================================================
   Toggle Icons & Collapsible
   ===================================================== */
body .aiwftk-dashboard .aiwftk-toggle-icon {
    font-size: 12px !important;
    color: var(--aiwftk-text-light) !important;
    transition: transform var(--aiwftk-transition) !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    text-align: center !important;
    line-height: 1 !important;
}

body .aiwftk-dashboard .aiwftk-toggle-icon.aiwftk-open {
    transform: rotate(0deg) !important;
}

body .aiwftk-dashboard .aiwftk-toggle-icon.aiwftk-closed {
    transform: rotate(-90deg) !important;
}

body .aiwftk-dashboard .aiwftk-collapsible {
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.2s ease !important;
    max-height: 5000px !important;
    opacity: 1 !important;
}

body .aiwftk-dashboard .aiwftk-collapsible.aiwftk-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
}

/* =====================================================
   Badges (Workflow Counts)
   ===================================================== */
body .aiwftk-dashboard .aiwftk-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 24px !important;
    padding: 0 8px !important;
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-badge.aiwftk-badge-sm {
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    background: var(--aiwftk-text-light) !important;
    border-radius: 10px !important;
    color: #fff !important;
}

/* =====================================================
   Category Sections
   ===================================================== */
body .aiwftk-dashboard .aiwftk-toolkit-body {
    padding: 0 20px 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-category {
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

body .aiwftk-dashboard .aiwftk-category:last-child {
    margin-bottom: 4px !important;
}

body .aiwftk-dashboard .aiwftk-category-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    transition: background var(--aiwftk-transition) !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

body .aiwftk-dashboard .aiwftk-category-header:hover {
    background: var(--aiwftk-bg-subtle) !important;
}

body .aiwftk-dashboard .aiwftk-category-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--aiwftk-text) !important;
    flex-grow: 1 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
}

body .aiwftk-dashboard .aiwftk-category-body {
    padding-left: 24px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* =====================================================
   Workflow List & Items
   ===================================================== */
body .aiwftk-dashboard ul.aiwftk-workflow-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border: 1px solid var(--aiwftk-border-light) !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    margin-bottom: 4px !important;
    background: var(--aiwftk-bg) !important;
    transition: background var(--aiwftk-transition), box-shadow var(--aiwftk-transition) !important;
    gap: 12px !important;
    list-style: none !important;
}

body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item::before {
    display: none !important;
    content: none !important;
}

body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item:hover {
    background: var(--aiwftk-primary-light) !important;
    box-shadow: var(--aiwftk-shadow) !important;
}

body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item:last-child {
    margin-bottom: 0 !important;
}

body .aiwftk-dashboard .aiwftk-workflow-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--aiwftk-text) !important;
    line-height: 1.4 !important;
}

/* Search hide — ultra-specific to override Divi list-item styles */
body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item.aiwftk-search-hidden,
body #main-content .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item.aiwftk-search-hidden,
body .et_pb_module .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item.aiwftk-search-hidden {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* =====================================================
   Copy Button
   ===================================================== */
body .aiwftk-dashboard button.aiwftk-copy-btn {
    padding: 7px 18px !important;
    background: var(--aiwftk-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--aiwftk-font) !important;
    white-space: nowrap !important;
    transition: background var(--aiwftk-transition), transform 0.1s ease !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
}

body .aiwftk-dashboard button.aiwftk-copy-btn:hover {
    background: var(--aiwftk-primary-hover) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

body .aiwftk-dashboard button.aiwftk-copy-btn:active {
    transform: translateY(0) !important;
}

body .aiwftk-dashboard button.aiwftk-copy-btn.aiwftk-copied {
    background: var(--aiwftk-success) !important;
    color: #fff !important;
}

body .aiwftk-dashboard button.aiwftk-copy-btn.aiwftk-error {
    background: var(--aiwftk-error) !important;
    color: #fff !important;
}

body .aiwftk-dashboard button.aiwftk-copy-btn.aiwftk-copying {
    opacity: 0.7 !important;
    cursor: wait !important;
}

/* =====================================================
   Preview Banner (admin-only, when descriptions unpublished)
   ===================================================== */
body .aiwftk-dashboard .aiwftk-preview-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 18px !important;
    margin-bottom: 20px !important;
    background: #fff3e0 !important;
    border: 2px solid #ffcc80 !important;
    border-radius: var(--aiwftk-radius) !important;
    font-size: 14px !important;
    color: #e65100 !important;
    font-weight: 600 !important;
    flex-wrap: wrap !important;
    line-height: 1.4 !important;
}

body .aiwftk-dashboard .aiwftk-preview-banner .aiwftk-preview-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

body .aiwftk-dashboard .aiwftk-preview-banner .aiwftk-preview-label {
    flex: 1 !important;
}

body .aiwftk-dashboard .aiwftk-preview-banner a.aiwftk-preview-publish-link {
    display: inline-block !important;
    background: #e65100 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background var(--aiwftk-transition) !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

body .aiwftk-dashboard .aiwftk-preview-banner a.aiwftk-preview-publish-link:hover {
    background: #bf360c !important;
    color: #fff !important;
}

/* =====================================================
   View Toggle (Descriptions on/off switch)
   ===================================================== */
body .aiwftk-dashboard .aiwftk-view-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--aiwftk-text-light) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

/*
 * No hidden checkbox — the toggle uses role="switch" with aria-checked
 * on a <div> instead of a <label> wrapping a checkbox. This avoids the
 * browser's native label-to-checkbox focus behavior which caused scroll
 * jumps in the Divi theme (the hidden checkbox was positioned off-screen,
 * and the browser scrolled to it on focus).
 */

body .aiwftk-dashboard .aiwftk-toggle-track {
    display: block !important;
    width: 36px !important;
    height: 20px !important;
    background: #ccc !important;
    border-radius: 10px !important;
    position: relative !important;
    transition: background var(--aiwftk-transition) !important;
    flex-shrink: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

body .aiwftk-dashboard .aiwftk-toggle-track::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform var(--aiwftk-transition) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* "On" state — driven by aria-checked on the parent div */
body .aiwftk-dashboard .aiwftk-view-toggle[aria-checked="true"] .aiwftk-toggle-track {
    background: var(--aiwftk-primary) !important;
}

body .aiwftk-dashboard .aiwftk-view-toggle[aria-checked="true"] .aiwftk-toggle-track::after {
    transform: translateX(16px) !important;
}

/* Focus ring for keyboard accessibility */
body .aiwftk-dashboard .aiwftk-view-toggle:focus-visible {
    outline: 2px solid var(--aiwftk-primary) !important;
    outline-offset: 2px !important;
}

body .aiwftk-dashboard .aiwftk-toggle-label {
    font-weight: 500 !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 13px !important;
}

/* =====================================================
   Workflow Info (title + description wrapper)
   ===================================================== */
body .aiwftk-dashboard .aiwftk-workflow-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

body .aiwftk-dashboard .aiwftk-workflow-desc {
    display: block !important;
    font-size: 13px !important;
    color: var(--aiwftk-text-light) !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
    padding: 0 !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.2s ease !important;
    max-height: 80px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
}

/*
 * When descriptions are visible, workflow items should align to the top
 * so the copy button sits next to the title, not centered next to the
 * title+description block.
 */
body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item:has(.aiwftk-workflow-desc) {
    align-items: flex-start !important;
}

/*
 * Utility: kill transitions instantly during view toggle so the JS
 * scroll-correction can measure the real layout shift. Applied via
 * JS, removed one frame later. Must use !important to override the
 * !important transition on .aiwftk-workflow-desc.
 */
body .aiwftk-dashboard .aiwftk-no-transition {
    transition: none !important;
}

/* =====================================================
   Compact Mode (descriptions collapsed via toggle)
   ===================================================== */
body .aiwftk-dashboard.aiwftk-compact .aiwftk-workflow-list li.aiwftk-workflow-item {
    align-items: center !important;
}

body .aiwftk-dashboard.aiwftk-compact .aiwftk-workflow-desc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
}

/* =====================================================
   Empty States
   ===================================================== */
body .aiwftk-dashboard .aiwftk-empty {
    color: var(--aiwftk-text-light) !important;
    font-style: italic !important;
    font-size: 14px !important;
    padding: 8px 0 !important;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 600px) {
    body .aiwftk-dashboard .aiwftk-roundtable {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    body .aiwftk-dashboard a.aiwftk-roundtable-link {
        margin-left: 0 !important;
    }

    body .aiwftk-dashboard .aiwftk-toolkit-header {
        padding: 14px 16px !important;
    }

    body .aiwftk-dashboard .aiwftk-toolkit-body {
        padding: 0 12px 8px !important;
    }

    body .aiwftk-dashboard .aiwftk-category-body {
        padding-left: 12px !important;
    }

    body .aiwftk-dashboard .aiwftk-workflow-list li.aiwftk-workflow-item {
        padding: 10px 12px !important;
    }

    body .aiwftk-dashboard button.aiwftk-copy-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    body .aiwftk-dashboard .aiwftk-start-here {
        padding: 16px !important;
    }

    body .aiwftk-dashboard .aiwftk-start-here-cards {
        flex-direction: column !important;
    }

    body .aiwftk-dashboard .aiwftk-start-here-card {
        flex: 1 1 auto !important;
    }

    /*
     * Search row wraps so toggle goes below the search field.
     * Toggle is left-aligned (not floating right on its own row)
     * so it sits naturally under the search bar.
     */
    body .aiwftk-dashboard .aiwftk-search-row {
        flex-wrap: wrap !important;
    }

    body .aiwftk-dashboard .aiwftk-view-toggle {
        order: 2 !important;
        justify-content: flex-start !important;
        margin-top: 4px !important;
    }

    /* Descriptions wrap to more lines on narrow screens — need more room */
    body .aiwftk-dashboard .aiwftk-workflow-desc {
        max-height: 160px !important;
    }

    /* Preview banner stacks vertically on mobile */
    body .aiwftk-dashboard .aiwftk-preview-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body .aiwftk-dashboard .aiwftk-preview-banner a.aiwftk-preview-publish-link {
        width: 100% !important;
        text-align: center !important;
        margin-top: 6px !important;
        margin-left: 0 !important;
    }

    /* Recording section stacks header elements vertically on mobile */
    body .aiwftk-dashboard .aiwftk-recording-latest {
        padding: 16px !important;
    }

    body .aiwftk-dashboard .aiwftk-recording-latest-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}

/* =====================================================
   Login Page
   ===================================================== */
body .aiwftk-login-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 300px !important;
    padding: 40px 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
}

body .aiwftk-login-box {
    width: 100% !important;
    max-width: 420px !important;
    padding: 40px !important;
    background: #ffffff !important;
    border: 1px solid #dcdcde !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}

body .aiwftk-login-box h2 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1d2327 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    background: none !important;
}

body .aiwftk-login-box .aiwftk-login-subtitle {
    margin: 0 0 24px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: #646970 !important;
}

body .aiwftk-login-box .aiwftk-login-error {
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    background: #fcf0f1 !important;
    border: 1px solid #d63638 !important;
    border-radius: 4px !important;
    color: #d63638 !important;
    font-size: 14px !important;
    text-align: left !important;
}

/*
 * Success banner shown on the login page after a completed password reset
 * and on the reset-request page after an email has been sent. Uses the same
 * box model as the error banner but with a green palette to signal success.
 */
body .aiwftk-login-box .aiwftk-login-success {
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    background: #edfaef !important;
    border: 1px solid #2c8c4a !important;
    border-radius: 4px !important;
    color: #1e6a36 !important;
    font-size: 14px !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

/*
 * Instruction/help text on the password reset request and reset forms.
 * Muted color, left-aligned above the form fields.
 */
body .aiwftk-login-box .aiwftk-login-instructions {
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #646970 !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

body .aiwftk-login-box .aiwftk-login-form {
    text-align: left !important;
}

body .aiwftk-login-box .aiwftk-form-field {
    margin-bottom: 16px !important;
}

body .aiwftk-login-box .aiwftk-form-field label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
}

body .aiwftk-login-box .aiwftk-form-field input[type="text"],
body .aiwftk-login-box .aiwftk-form-field input[type="password"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #dcdcde !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    color: #1d2327 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
}

body .aiwftk-login-box .aiwftk-form-field input[type="text"]:focus,
body .aiwftk-login-box .aiwftk-form-field input[type="password"]:focus {
    outline: none !important;
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15) !important;
}

body .aiwftk-login-box .aiwftk-remember {
    margin-bottom: 20px !important;
}

body .aiwftk-login-box .aiwftk-remember label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #646970 !important;
    cursor: pointer !important;
}

body .aiwftk-login-box .aiwftk-remember input[type="checkbox"] {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    position: static !important;
}

body .aiwftk-login-box button.aiwftk-login-submit {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    background: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

body .aiwftk-login-box button.aiwftk-login-submit:hover {
    background: #135e96 !important;
}

body .aiwftk-login-box .aiwftk-login-footer {
    margin: 20px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

body .aiwftk-login-box .aiwftk-login-footer a {
    color: #2271b1 !important;
    text-decoration: none !important;
}

body .aiwftk-login-box .aiwftk-login-footer a:hover {
    color: #135e96 !important;
    text-decoration: underline !important;
}

body .aiwftk-login-box a.aiwftk-login-btn {
    display: inline-block !important;
    padding: 12px 32px !important;
    background: #2271b1 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease !important;
    margin-top: 12px !important;
}

body .aiwftk-login-box a.aiwftk-login-btn:hover {
    background: #135e96 !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    body .aiwftk-login-box {
        padding: 24px 20px !important;
    }
}

/* =====================================================
   Workshop Landing Page ([aiwftk_workshop])
   =====================================================
   Structural styles only — colors and fonts inherit from
   the theme. Uses high-specificity "body .aiwftk-workshop"
   prefix for Divi compatibility, same pattern as dashboard.
   ===================================================== */

/* --- Workshop Container --- */
body .aiwftk-workshop {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* --- Episode Header --- */
body .aiwftk-workshop .aiwftk-workshop-header {
    margin-bottom: 32px !important;
    text-align: center !important;
}

body .aiwftk-workshop .aiwftk-workshop-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

body .aiwftk-workshop .aiwftk-workshop-episode {
    margin: 0 !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 14px !important;
    font-style: italic !important;
}

/* --- YouTube Video Embed --- */
body .aiwftk-workshop .aiwftk-workshop-video {
    margin-bottom: 40px !important;
}

body .aiwftk-workshop .aiwftk-video-wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important;  /* 16:9 aspect ratio */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: var(--aiwftk-radius) !important;
    box-shadow: var(--aiwftk-shadow) !important;
}

body .aiwftk-workshop .aiwftk-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* --- Simple Prompt Callout --- */
body .aiwftk-workshop .aiwftk-workshop-simple-prompt {
    margin-bottom: 40px !important;
    padding: 24px !important;
    background: var(--aiwftk-bg-subtle) !important;
    border: 1px solid var(--aiwftk-border) !important;
    border-radius: var(--aiwftk-radius) !important;
}

body .aiwftk-workshop .aiwftk-workshop-simple-prompt h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body .aiwftk-workshop .aiwftk-workshop-simple-prompt-intro {
    margin: 0 0 16px !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 14px !important;
}

body .aiwftk-workshop .aiwftk-prompt-block {
    background: var(--aiwftk-bg) !important;
    border: 1px solid var(--aiwftk-border-light) !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    padding: 16px !important;
    overflow-x: auto !important;
}

body .aiwftk-workshop .aiwftk-prompt-text {
    margin: 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--aiwftk-text) !important;
    background: transparent !important;
    border: none !important;
}

/* --- Prompt Upgrade CTA --- */
body .aiwftk-workshop .aiwftk-workshop-upgrade {
    margin-bottom: 40px !important;
    padding: 32px 24px !important;
    background: var(--aiwftk-primary-light) !important;
    border: 1px solid var(--aiwftk-primary) !important;
    border-radius: var(--aiwftk-radius) !important;
}

body .aiwftk-workshop .aiwftk-workshop-upgrade h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--aiwftk-primary) !important;
}

body .aiwftk-workshop .aiwftk-workshop-upgrade-intro {
    margin: 0 0 12px !important;
    line-height: 1.5 !important;
}

body .aiwftk-workshop .aiwftk-workshop-form {
    margin-top: 20px !important;
}

/* --- Next Workshop CTA --- */
body .aiwftk-workshop .aiwftk-workshop-next {
    margin-bottom: 24px !important;
    padding: 24px !important;
    background: var(--aiwftk-success-light) !important;
    border: 1px solid var(--aiwftk-success) !important;
    border-radius: var(--aiwftk-radius) !important;
    text-align: center !important;
}

body .aiwftk-workshop .aiwftk-workshop-next h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--aiwftk-success) !important;
}

body .aiwftk-workshop .aiwftk-workshop-next p {
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* --- Workshop Responsive --- */
@media (max-width: 768px) {
    body .aiwftk-workshop {
        padding: 0 12px !important;
    }

    body .aiwftk-workshop .aiwftk-workshop-simple-prompt,
    body .aiwftk-workshop .aiwftk-workshop-upgrade,
    body .aiwftk-workshop .aiwftk-workshop-next {
        padding: 20px 16px !important;
    }
}

/* =====================================================
   Gravity Forms Styling Inside Plugin Shortcodes
   =====================================================
   When the Gravity Form is rendered via [aiwftk_upgrade] or
   [aiwftk_workshop], it lives outside Divi's GF module wrapper
   (.et_pb_wpt_gravityform) and gets Divi's default transparent-
   button .et_pb_button styling instead of the polished orange
   form look from the Divi GF module.

   These rules provide consistent form styling in any context:
   Divi pages, blog posts, or other templates. They target the
   GF markup inside the plugin's wrapper divs (.aiwftk-upgrade-form
   and .aiwftk-workshop-form).

   The MI4P orange (#f36f21) matches the production site's CTA
   color. Uses the Divi-compatible high-specificity "body" prefix
   and !important pattern established throughout this file.
   ===================================================== */

/*
 * Visually hide field labels and sub-labels when the form is inside
 * a plugin wrapper. The GF form has placeholders configured on all
 * fields, so the labels are redundant visually but kept accessible
 * for screen readers via the sr-only pattern.
 */
body .aiwftk-upgrade-form .gform_wrapper .gfield_label,
body .aiwftk-workshop-form .gform_wrapper .gfield_label,
body .aiwftk-upgrade-form .gform_wrapper .gform-field-label--type-sub,
body .aiwftk-workshop-form .gform_wrapper .gform-field-label--type-sub {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Hide the "* indicates required fields" legend text */
body .aiwftk-upgrade-form .gform_wrapper .gform_required_legend,
body .aiwftk-workshop-form .gform_wrapper .gform_required_legend {
    display: none !important;
}

/* --- Form Wrapper — constrain width and center to match Divi GF module ---
   The Divi GF module renders at max-width: 600px centered. Replicate that
   so the form doesn't stretch across the full blog post content width. */
body .aiwftk-upgrade-form .gform_wrapper,
body .aiwftk-workshop-form .gform_wrapper {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Form Input Fields ---
   Matches the Divi GF module exactly: 34px height with border-box,
   16px padding, 0px border-radius. The 34px height + 16px vertical
   padding compresses the content area — this is how Divi's GF module
   renders compact inputs. Without the explicit height, the inputs
   expand to ~56px naturally. */
body .aiwftk-upgrade-form .gform_wrapper input[type="text"],
body .aiwftk-upgrade-form .gform_wrapper input[type="email"],
body .aiwftk-upgrade-form .gform_wrapper input[type="tel"],
body .aiwftk-workshop-form .gform_wrapper input[type="text"],
body .aiwftk-workshop-form .gform_wrapper input[type="email"],
body .aiwftk-workshop-form .gform_wrapper input[type="tel"] {
    width: 100% !important;
    height: 34px !important;
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 0px !important;
    font-size: 15px !important;
    line-height: 26px !important;
    color: #4e4e4e !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

body .aiwftk-upgrade-form .gform_wrapper input[type="text"]:focus,
body .aiwftk-upgrade-form .gform_wrapper input[type="email"]:focus,
body .aiwftk-upgrade-form .gform_wrapper input[type="tel"]:focus,
body .aiwftk-workshop-form .gform_wrapper input[type="text"]:focus,
body .aiwftk-workshop-form .gform_wrapper input[type="email"]:focus,
body .aiwftk-workshop-form .gform_wrapper input[type="tel"]:focus {
    border-color: var(--aiwftk-cta) !important;
    outline: none !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(243, 111, 33, 0.2) !important;
}

/* Placeholder text color */
body .aiwftk-upgrade-form .gform_wrapper input::placeholder,
body .aiwftk-workshop-form .gform_wrapper input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* --- Field Containers — match Divi's field spacing (5px top, 0 bottom) --- */
body .aiwftk-upgrade-form .gform_wrapper .gfield,
body .aiwftk-workshop-form .gform_wrapper .gfield {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
}

/* Name field sub-fields (First / Last) sit side by side via GF's
   built-in ginput_complex layout — just ensure they fill their halves */
body .aiwftk-upgrade-form .gform_wrapper .ginput_complex .name_first,
body .aiwftk-upgrade-form .gform_wrapper .ginput_complex .name_last,
body .aiwftk-workshop-form .gform_wrapper .ginput_complex .name_first,
body .aiwftk-workshop-form .gform_wrapper .ginput_complex .name_last {
    padding: 0 !important;
}

/* --- Submit Button — MI4P orange CTA style ---
   Matches the Divi GF module button exactly: 500 weight, normal letter-spacing,
   centered text, 4.8px 16px padding. The button fills the form width (100%). */
body .aiwftk-upgrade-form .gform_wrapper .gform_button,
body .aiwftk-workshop-form .gform_wrapper .gform_button,
body .aiwftk-upgrade-form .gform_wrapper .gform_button.et_pb_button,
body .aiwftk-workshop-form .gform_wrapper .gform_button.et_pb_button,
body .aiwftk-upgrade-form .gform_wrapper input[type="submit"].gform_button,
body .aiwftk-workshop-form .gform_wrapper input[type="submit"].gform_button {
    display: block !important;
    width: 100% !important;
    padding: 4.8px 16px !important;
    background: var(--aiwftk-cta) !important;
    background-color: var(--aiwftk-cta) !important;
    color: #fff !important;
    border: 1px solid var(--aiwftk-cta-hover) !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 27.2px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    min-height: 44px !important;  /* Touch target minimum */
    box-sizing: border-box !important;
    /* Reset Divi's default transparent .et_pb_button overrides */
    -webkit-appearance: none !important;
    appearance: none !important;
}

body .aiwftk-upgrade-form .gform_wrapper .gform_button:hover,
body .aiwftk-workshop-form .gform_wrapper .gform_button:hover,
body .aiwftk-upgrade-form .gform_wrapper .gform_button.et_pb_button:hover,
body .aiwftk-workshop-form .gform_wrapper .gform_button.et_pb_button:hover {
    background: var(--aiwftk-cta-hover) !important;
    background-color: var(--aiwftk-cta-hover) !important;
    border-color: #d55400 !important;
    color: #fff !important;
}

/* --- Divi-Specific Button Override ---
   On Divi sites, the button inherits the .et_pb_button class and Divi's
   global styles use #et-boc in their selectors (e.g., .et-db #et-boc
   .et-l .et_pb_button). When both rules have !important, the one with
   higher specificity wins. Adding #et-boc to our selectors ensures our
   padding, line-height, and height values beat Divi's defaults.
   The base rules above still apply on non-Divi themes. */
body #et-boc .aiwftk-upgrade-form .gform_wrapper .gform_button,
body #et-boc .aiwftk-workshop-form .gform_wrapper .gform_button,
body #et-boc .aiwftk-upgrade-form .gform_wrapper .gform_button.et_pb_button,
body #et-boc .aiwftk-workshop-form .gform_wrapper .gform_button.et_pb_button {
    padding: 4.8px 16px !important;
    line-height: 27.2px !important;
    height: auto !important;
}

/* Divi-specific input override — same pattern as button above */
body #et-boc .aiwftk-upgrade-form .gform_wrapper input[type="text"],
body #et-boc .aiwftk-upgrade-form .gform_wrapper input[type="email"],
body #et-boc .aiwftk-upgrade-form .gform_wrapper input[type="tel"],
body #et-boc .aiwftk-workshop-form .gform_wrapper input[type="text"],
body #et-boc .aiwftk-workshop-form .gform_wrapper input[type="email"],
body #et-boc .aiwftk-workshop-form .gform_wrapper input[type="tel"] {
    height: 34px !important;
    padding: 16px !important;
    line-height: 26px !important;
}

/* Override Divi's .et_pb_button::after arrow icon that appears on hover */
body .aiwftk-upgrade-form .gform_wrapper .gform_button.et_pb_button::after,
body .aiwftk-workshop-form .gform_wrapper .gform_button.et_pb_button::after {
    display: none !important;
}

/* --- Form Footer — match Divi GF module spacing and centering --- */
body .aiwftk-upgrade-form .gform_wrapper .gform_footer,
body .aiwftk-workshop-form .gform_wrapper .gform_footer {
    margin-top: 16px !important;
    padding: 16px 0 10px !important;
    text-align: center !important;
}

/* --- Responsive: stack name fields on small screens --- */
@media (max-width: 600px) {
    body .aiwftk-upgrade-form .gform_wrapper .ginput_complex,
    body .aiwftk-workshop-form .gform_wrapper .ginput_complex {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    body .aiwftk-upgrade-form .gform_wrapper .ginput_complex .name_first,
    body .aiwftk-upgrade-form .gform_wrapper .ginput_complex .name_last,
    body .aiwftk-workshop-form .gform_wrapper .ginput_complex .name_first,
    body .aiwftk-workshop-form .gform_wrapper .ginput_complex .name_last {
        width: 100% !important;
        flex: none !important;
    }
}

/* =====================================================
   Prompt Delivery Page ([aiwftk_prompt_delivery])
   =====================================================
   Post-submission page that delivers the upgraded prompt
   and bridges to the workshop/membership conversion funnel.
   Uses high-specificity "body .aiwftk-prompt-delivery"
   prefix for Divi compatibility, same pattern as dashboard
   and workshop pages.
   ===================================================== */

/* --- Container --- */
body .aiwftk-prompt-delivery {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: var(--aiwftk-font) !important;
}

/* --- Block 0: Back to Article Link --- */
body .aiwftk-prompt-delivery .aiwftk-delivery-back {
    margin-bottom: 24px !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-back-link {
    color: var(--aiwftk-text-light) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color var(--aiwftk-transition) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-back-link:hover {
    color: var(--aiwftk-primary) !important;
}

/* --- Block 1: Upgraded Prompt --- */
body .aiwftk-prompt-delivery .aiwftk-delivery-prompt {
    margin-bottom: 40px !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-prompt-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-prompt-intro {
    margin: 0 0 16px !important;
    color: var(--aiwftk-text-light) !important;
    line-height: 1.5 !important;
}

body .aiwftk-prompt-delivery .aiwftk-prompt-block {
    background: var(--aiwftk-bg-subtle) !important;
    border: 1px solid var(--aiwftk-border-light) !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    padding: 20px !important;
    overflow-x: auto !important;
}

body .aiwftk-prompt-delivery .aiwftk-prompt-text {
    margin: 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-family: var(--aiwftk-font) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--aiwftk-text) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-prompt-note {
    margin: 12px 0 0 !important;
    color: var(--aiwftk-text-light) !important;
    font-size: 13px !important;
    font-style: italic !important;
}

/* --- Block 2: Contextual Next Step --- */
body .aiwftk-prompt-delivery .aiwftk-delivery-next-step {
    margin-bottom: 40px !important;
    padding: 32px 24px !important;
    background: var(--aiwftk-primary-light) !important;
    border: 1px solid var(--aiwftk-border-light) !important;
    border-radius: var(--aiwftk-radius) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-next-step h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--aiwftk-primary) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-next-step p {
    margin: 0 0 16px !important;
    line-height: 1.5 !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-next-step p:last-child {
    margin-bottom: 0 !important;
}

/* Video wrapper inside the next-step block — reuse the 16:9 pattern */
body .aiwftk-prompt-delivery .aiwftk-video-wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    box-shadow: var(--aiwftk-shadow) !important;
    margin-bottom: 20px !important;
}

body .aiwftk-prompt-delivery .aiwftk-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-workshop-secondary {
    margin: 16px 0 0 !important;
    font-size: 14px !important;
    color: var(--aiwftk-text-light) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-replay-link {
    color: var(--aiwftk-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color var(--aiwftk-transition) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-replay-link:hover {
    color: var(--aiwftk-primary-hover) !important;
}

/* --- Block 3: Membership CTA --- */
body .aiwftk-prompt-delivery .aiwftk-delivery-membership {
    margin-bottom: 24px !important;
    padding: 32px 24px !important;
    background: var(--aiwftk-success-light) !important;
    border: 1px solid var(--aiwftk-border-light) !important;
    border-radius: var(--aiwftk-radius) !important;
    text-align: center !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-membership h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--aiwftk-success) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-membership p {
    margin: 0 0 12px !important;
    line-height: 1.5 !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-membership p:last-child {
    margin-bottom: 0 !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-membership-link {
    display: inline-block !important;
    padding: 10px 24px !important;
    background: var(--aiwftk-cta) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-radius: var(--aiwftk-radius-sm) !important;
    transition: background var(--aiwftk-transition) !important;
}

body .aiwftk-prompt-delivery .aiwftk-delivery-membership-link:hover {
    background: var(--aiwftk-cta-hover) !important;
    color: #fff !important;
}

/* --- Prompt Delivery Responsive --- */
@media (max-width: 768px) {
    body .aiwftk-prompt-delivery {
        padding: 0 12px !important;
    }

    body .aiwftk-prompt-delivery .aiwftk-delivery-next-step,
    body .aiwftk-prompt-delivery .aiwftk-delivery-membership {
        padding: 20px 16px !important;
    }
}