/* =============================================================================
   DEISO WordPress Pro — Global Stylesheet
   -----------------------------------------------------------------------------
   File:        assets/css/deiso-global-style.css
   Purpose:     Single, consolidated source of truth for every visual rule
                used by the DEISO WordPress Pro plugin. This file replaces
                all previously inline <style> blocks and the legacy
                deiso-banner-style.css partial.

   Sections:
     01  Design tokens (CSS custom properties)
     02  Admin shell scope, reset, and base typography
     03  Admin page header, titles, subtitles
     04  Admin section headings and dividers
     05  Admin cards
     06  Admin form table layout
     07  Admin form fields (inputs, textareas, selects, checkboxes, labels)
     08  Admin code editor surface (CSS / JS boxes)
     09  Admin buttons
     10  Admin notices and inline status messages
     11  Admin endpoint / code blocks
     12  Admin tables (widefat, striped)
     13  Admin dashboard status table & migration note
     14  Admin background image picker
     15  Admin Mirai chat iframe card
     16  Admin reset confirmation messages
     17  Admin responsive rules
     18  Frontend banner
     19  Frontend Footer CTA
     20  Frontend animations & utilities

   Notes:
     - All admin styles are scoped under `.deiso-wp-pro-page` (a class
       added to every DEISO admin <div class="wrap">). This guarantees
       that DEISO styling never leaks into other WordPress admin screens.
     - Frontend selectors use the `.deiso-banner-*` and `.deiso-footer-cta-*`
       prefixes so they coexist safely with any active theme.
     - Brand color is DEISO green (#00A62D) used as a sparing accent
       on top of an enterprise neutral palette.
   ============================================================================= */


/* =============================================================================
   01  DESIGN TOKENS
   -----------------------------------------------------------------------------
   Every color, radius, shadow, spacing, and font choice flows from these
   custom properties. Changing one variable here propagates everywhere.
   ============================================================================= */

:root {
    /* Brand — DEISO green as the primary accent.
       Used for primary buttons, active borders, focus rings, link hovers. */
    --deiso-brand:            #00A62D;
    --deiso-brand-hover:      #00811E;
    --deiso-brand-active:     #006B19;
    --deiso-brand-soft:       #E8F7EC;
    --deiso-brand-soft-2:     #D1EFD8;
    --deiso-brand-ring:       rgba(0, 166, 45, 0.18);

    /* Secondary accent — used on the Mirai header pill button. */
    --deiso-accent:           #094971;
    --deiso-accent-hover:     #073855;

    /* Neutral palette — enterprise gray scale, slightly cool. */
    --deiso-ink:              #0E1B2C;   /* page titles, strong headings */
    --deiso-text:             #2C3A50;   /* body copy */
    --deiso-text-secondary:   #52617A;   /* descriptions, sub-headings */
    --deiso-text-muted:       #8693A8;   /* placeholders, captions */
    --deiso-text-inverse:     #FFFFFF;

    /* Surfaces and lines. */
    --deiso-surface:          #FFFFFF;
    --deiso-surface-alt:      #F8FAFD;
    --deiso-page-bg:          #F4F6FA;
    --deiso-border:           #DDE3EC;
    --deiso-border-strong:    #C5CFDD;
    --deiso-border-subtle:    #EEF2F7;

    /* Status colors. */
    --deiso-success:          #16A34A;
    --deiso-success-soft:     #DCFCE7;
    --deiso-warning:          #D97706;
    --deiso-warning-soft:     #FEF3C7;
    --deiso-danger:           #DC2626;
    --deiso-danger-soft:      #FEE2E2;
    --deiso-info:             #0369A1;
    --deiso-info-soft:        #E0F2FE;

    /* Code editor surface — used by the CSS Box / JS Box textareas. */
    --deiso-code-bg:          #0F172A;
    --deiso-code-bg-2:        #111B30;
    --deiso-code-fg:          #E2E8F0;
    --deiso-code-line:        rgba(255, 255, 255, 0.06);
    --deiso-code-caret:       #6EE7B7;

    /* Typography. */
    --deiso-font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --deiso-font-mono:        ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;

    /* Radii. */
    --deiso-radius-sm:        6px;
    --deiso-radius:           10px;
    --deiso-radius-lg:        14px;
    --deiso-radius-pill:      999px;

    /* Elevation — subtle, layered shadows for an enterprise feel. */
    --deiso-shadow-sm:        0 1px 2px rgba(14, 27, 44, 0.04), 0 1px 1px rgba(14, 27, 44, 0.03);
    --deiso-shadow:           0 1px 3px rgba(14, 27, 44, 0.06), 0 4px 12px rgba(14, 27, 44, 0.05);
    --deiso-shadow-lg:        0 4px 6px rgba(14, 27, 44, 0.04), 0 12px 28px rgba(14, 27, 44, 0.10);
    --deiso-shadow-focus:     0 0 0 4px var(--deiso-brand-ring);

    /* Motion. */
    --deiso-transition:       150ms cubic-bezier(0.4, 0, 0.2, 1);
    --deiso-transition-slow:  240ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
   02  ADMIN SHELL — SCOPE, RESET, BASE TYPOGRAPHY
   -----------------------------------------------------------------------------
   `.deiso-wp-pro-page` is the wrapper class added to every DEISO admin
   page. All admin styling is scoped under this class so the rules cannot
   leak into other WordPress core or third-party plugin screens.
   ============================================================================= */

/* Adjust the WordPress wrap so it inherits our typography and breathes
   more generously than the WP default. */
.wrap.deiso-wp-pro-page {
    max-width: 1240px;
    margin: 18px 20px 60px 0;
    padding: 4px 0 28px;
    color: var(--deiso-text);
    font-family: var(--deiso-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tone the WP admin page background a touch toward our cool gray. */
body.toplevel_page_deiso-wordpress-pro,
body[class*="page_deiso-wp-pro-"],
body[class*="page_deiso-mirai-ai-pro-"] {
    background: var(--deiso-page-bg);
}

/* Generic prose paragraphs inside any DEISO admin page. */
.deiso-wp-pro-page p {
    color: var(--deiso-text);
    font-size: 14px;
    line-height: 1.6;
}

/* WordPress's `.description` is used for inline help text under fields. */
.deiso-wp-pro-page .description,
.deiso-wp-pro-page p.description {
    color: var(--deiso-text-secondary);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 8px;
    font-style: normal;
}

/* `<code>` snippets such as endpoints and shared secrets. */
.deiso-wp-pro-page code {
    display: inline-block;
    padding: 3px 8px;
    background: var(--deiso-surface-alt);
    border: 1px solid var(--deiso-border-subtle);
    border-radius: var(--deiso-radius-sm);
    color: var(--deiso-ink);
    font-family: var(--deiso-font-mono);
    font-size: 12.5px;
    line-height: 1.4;
    word-break: break-all;
}

/* Inline links are tinted with the brand color. */
.deiso-wp-pro-page a {
    color: var(--deiso-brand);
    text-decoration: none;
    transition: color var(--deiso-transition);
}
.deiso-wp-pro-page a:hover,
.deiso-wp-pro-page a:focus {
    color: var(--deiso-brand-hover);
    text-decoration: underline;
}

/* Universal focus ring — accessibility first. Applies to every focusable
   element inside the DEISO admin pages that does not declare its own. */
.deiso-wp-pro-page :focus-visible {
    outline: none;
    box-shadow: var(--deiso-shadow-focus);
    border-color: var(--deiso-brand) !important;
}


/* =============================================================================
   03  PAGE HEADER — TITLE, SUBTITLE, ACCESS BUTTON
   -----------------------------------------------------------------------------
   The `.deiso-admin-page-header` block hosts the page H1 (title), an
   optional subtitle paragraph, and the right-aligned "Access Mirai"
   button. Used by every Mirai admin page.
   ============================================================================= */

.deiso-wp-pro-page .deiso-admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    margin: 0 0 24px;
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-lg);
    box-shadow: var(--deiso-shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Subtle brand-colored accent bar along the left edge of every page header. */
.deiso-wp-pro-page .deiso-admin-page-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--deiso-brand) 0%, #1FB54B 100%);
}

/* Page title — large, tight, ink-colored. */
.deiso-wp-pro-page .deiso-admin-page-header h1,
.deiso-wp-pro-page > h1 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--deiso-ink);
    padding: 0;
}

/* Subheading paragraph below the title. */
.deiso-wp-pro-page .deiso-admin-page-subheading {
    font-size: 15px;
    line-height: 1.55;
    color: var(--deiso-text-secondary);
    margin: 0;
    max-width: 780px;
}

/* The right-aligned external "Access Mirai" pill button. */
.deiso-wp-pro-page .deiso-mirai-access-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--deiso-accent);
    color: var(--deiso-text-inverse) !important;
    text-decoration: none !important;
    padding: 10px 18px;
    border-radius: var(--deiso-radius-pill);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: var(--deiso-shadow-sm);
    transition: background var(--deiso-transition), transform var(--deiso-transition), box-shadow var(--deiso-transition);
}
.deiso-wp-pro-page .deiso-mirai-access-button:hover,
.deiso-wp-pro-page .deiso-mirai-access-button:focus {
    background: var(--deiso-accent-hover);
    color: var(--deiso-text-inverse) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: var(--deiso-shadow);
}

/* Append a small chevron arrow indicating an external link. */
.deiso-wp-pro-page .deiso-mirai-access-button::after {
    content: "↗";
    font-size: 13px;
    line-height: 1;
    margin-left: 2px;
}


/* =============================================================================
   04  SECTION HEADINGS AND DIVIDERS
   -----------------------------------------------------------------------------
   In-page H2-level headings used by render functions to introduce form
   groups (e.g., "Middleware Settings", "API Settings", "CSS Styling").
   ============================================================================= */

/* Plain H2 inside a DEISO admin page (no special class assigned). */
.deiso-wp-pro-page form > h2,
.deiso-wp-pro-page > h2 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--deiso-ink);
    margin: 28px 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--deiso-border-subtle);
}

/* Larger, decorated section heading used by the Code page. */
.deiso-wp-pro-page .deiso-mirai-section-heading {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--deiso-ink);
    margin: 30px 0 6px;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Decorative dot in front of the section heading for visual rhythm. */
.deiso-wp-pro-page .deiso-mirai-section-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--deiso-brand);
    flex-shrink: 0;
}

.deiso-wp-pro-page .deiso-mirai-section-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--deiso-text-secondary);
    max-width: 780px;
}

/* Hairline divider used between major sections. */
.deiso-wp-pro-page .deiso-mirai-divider,
.deiso-wp-pro-page hr.deiso-mirai-divider,
.deiso-wp-pro-page form > hr {
    border: 0;
    border-top: 1px solid var(--deiso-border-subtle);
    margin: 32px 0;
    height: 0;
}


/* =============================================================================
   05  CARDS
   -----------------------------------------------------------------------------
   `.deiso-mirai-card` is the universal container used to group a single
   logical block (a CSS Box, a JS Box, an export option, the Global CSS
   editor, etc.). Cards stack vertically with consistent margin.
   ============================================================================= */

.deiso-wp-pro-page .deiso-mirai-card {
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-lg);
    padding: 22px 24px;
    margin: 0 0 18px;
    box-shadow: var(--deiso-shadow-sm);
    transition: box-shadow var(--deiso-transition), border-color var(--deiso-transition);
}

/* Slight lift on hover communicates interactivity for cards that contain
   editable code or controls. */
.deiso-wp-pro-page .deiso-mirai-card:hover {
    box-shadow: var(--deiso-shadow);
    border-color: var(--deiso-border-strong);
}

/* Card heading — slightly smaller than a section H2 because it is nested. */
.deiso-wp-pro-page .deiso-mirai-card h2 {
    margin: 0 0 14px;
    padding: 0 0 12px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--deiso-ink);
    border-bottom: 1px solid var(--deiso-border-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Brand-tinted square in front of card headings to establish a clear
   visual hierarchy between section heading and card heading. */
.deiso-wp-pro-page .deiso-mirai-card h2::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--deiso-brand);
    flex-shrink: 0;
}

/* Card paragraphs and descriptions sit a touch tighter than page-level prose. */
.deiso-wp-pro-page .deiso-mirai-card p {
    margin: 10px 0;
}
.deiso-wp-pro-page .deiso-mirai-card p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   06  FORM TABLE LAYOUT
   -----------------------------------------------------------------------------
   WordPress uses `<table class="form-table">` to lay out admin settings.
   Below we restyle this table so it reads as an enterprise label/field
   pair list rather than a 1990s spreadsheet.
   ============================================================================= */

.deiso-wp-pro-page .form-table {
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-lg);
    box-shadow: var(--deiso-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
}

/* Each row is a label/value pair. Hairline border between rows; none on
   the last row to keep the rounded corner clean. */
.deiso-wp-pro-page .form-table tr {
    border-bottom: 1px solid var(--deiso-border-subtle);
}
.deiso-wp-pro-page .form-table tr:last-child {
    border-bottom: 0;
}

.deiso-wp-pro-page .form-table th,
.deiso-wp-pro-page .form-table td {
    padding: 18px 24px;
    vertical-align: top;
    border: 0;
}

/* Labels — fixed width column on the left, ink color, semibold. */
.deiso-wp-pro-page .form-table th {
    width: 260px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    color: var(--deiso-ink);
    background: transparent;
    text-align: left;
}

/* Value column — gives breathing room around inputs. */
.deiso-wp-pro-page .form-table td {
    color: var(--deiso-text);
    font-size: 14px;
    line-height: 1.55;
}

/* Some rows contain only `<th colspan="2"><hr></th>` as a visual divider. */
.deiso-wp-pro-page .form-table th[colspan="2"] {
    width: auto;
    padding: 0;
}
.deiso-wp-pro-page .form-table th[colspan="2"] hr {
    border: 0;
    border-top: 1px solid var(--deiso-border-subtle);
    margin: 0;
}


/* =============================================================================
   07  FORM FIELDS — INPUTS, SELECTS, TEXTAREAS, CHECKBOXES, LABELS
   -----------------------------------------------------------------------------
   We restyle every WordPress text input class (`regular-text`,
   `large-text`, `code`) plus checkboxes and selects. All controls share
   the same height rhythm and focus ring for a uniform feel.
   ============================================================================= */

/* Generic text-style inputs (text, email, url, password, number, search). */
.deiso-wp-pro-page input[type="text"],
.deiso-wp-pro-page input[type="email"],
.deiso-wp-pro-page input[type="url"],
.deiso-wp-pro-page input[type="password"],
.deiso-wp-pro-page input[type="number"],
.deiso-wp-pro-page input[type="search"],
.deiso-wp-pro-page input[type="tel"],
.deiso-wp-pro-page input[type="date"],
.deiso-wp-pro-page input[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    min-height: 42px;
    padding: 10px 14px;
    background: var(--deiso-surface);
    color: var(--deiso-text);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-sm);
    font-family: var(--deiso-font);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: inset 0 1px 0 rgba(14, 27, 44, 0.02);
    transition: border-color var(--deiso-transition), box-shadow var(--deiso-transition), background var(--deiso-transition);
}

/* WordPress provides .regular-text and .large-text utility classes that
   override widths. We honor them but cap at sensible enterprise limits. */
.deiso-wp-pro-page input.regular-text {
    max-width: 480px;
}
.deiso-wp-pro-page input.large-text,
.deiso-wp-pro-page textarea.large-text {
    max-width: 100%;
    width: 100%;
}

/* Hover — reveal a slightly stronger border to signal interactivity. */
.deiso-wp-pro-page input[type="text"]:hover,
.deiso-wp-pro-page input[type="email"]:hover,
.deiso-wp-pro-page input[type="url"]:hover,
.deiso-wp-pro-page input[type="password"]:hover,
.deiso-wp-pro-page input[type="number"]:hover,
.deiso-wp-pro-page input[type="search"]:hover,
.deiso-wp-pro-page input[type="tel"]:hover,
.deiso-wp-pro-page input[type="date"]:hover,
.deiso-wp-pro-page input[type="datetime-local"]:hover,
.deiso-wp-pro-page select:hover,
.deiso-wp-pro-page textarea:hover {
    border-color: var(--deiso-border-strong);
}

/* Focus — accent ring matches the brand color. */
.deiso-wp-pro-page input[type="text"]:focus,
.deiso-wp-pro-page input[type="email"]:focus,
.deiso-wp-pro-page input[type="url"]:focus,
.deiso-wp-pro-page input[type="password"]:focus,
.deiso-wp-pro-page input[type="number"]:focus,
.deiso-wp-pro-page input[type="search"]:focus,
.deiso-wp-pro-page input[type="tel"]:focus,
.deiso-wp-pro-page input[type="date"]:focus,
.deiso-wp-pro-page input[type="datetime-local"]:focus,
.deiso-wp-pro-page select:focus,
.deiso-wp-pro-page textarea:focus {
    outline: none;
    border-color: var(--deiso-brand) !important;
    box-shadow: var(--deiso-shadow-focus);
    background: var(--deiso-surface);
}

/* Placeholder text uses the muted neutral. */
.deiso-wp-pro-page input::placeholder,
.deiso-wp-pro-page textarea::placeholder {
    color: var(--deiso-text-muted);
    opacity: 1;
}

/* Disabled state. */
.deiso-wp-pro-page input:disabled,
.deiso-wp-pro-page textarea:disabled,
.deiso-wp-pro-page select:disabled {
    background: var(--deiso-surface-alt);
    color: var(--deiso-text-muted);
    cursor: not-allowed;
}

/* Inputs flagged with the `code` class (used for URLs, secrets, API keys)
   render in monospace for legibility. */
.deiso-wp-pro-page input.code,
.deiso-wp-pro-page input[type="url"].code {
    font-family: var(--deiso-font-mono);
    font-size: 13px;
    letter-spacing: 0;
}

/* Textareas — same field language as inputs but with a comfortable
   minimum height and natural resizing. */
.deiso-wp-pro-page textarea {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    background: var(--deiso-surface);
    color: var(--deiso-text);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-sm);
    font-family: var(--deiso-font);
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    transition: border-color var(--deiso-transition), box-shadow var(--deiso-transition);
}

/* Selects — replace the native chevron with an SVG so the dropdown
   matches the rest of the visual system. */
.deiso-wp-pro-page select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 40px 10px 14px;
    background-color: var(--deiso-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2352617A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--deiso-text);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-sm);
    font-family: var(--deiso-font);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--deiso-transition), box-shadow var(--deiso-transition);
}

/* Native checkboxes — restyle into pill-square brand checkboxes. */
.deiso-wp-pro-page input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    background: var(--deiso-surface);
    border: 1.5px solid var(--deiso-border-strong);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background var(--deiso-transition), border-color var(--deiso-transition), box-shadow var(--deiso-transition);
    vertical-align: middle;
}
.deiso-wp-pro-page input[type="checkbox"]:hover {
    border-color: var(--deiso-brand);
}
.deiso-wp-pro-page input[type="checkbox"]:checked {
    background: var(--deiso-brand);
    border-color: var(--deiso-brand);
}
/* Custom checkmark glyph drawn via a CSS pseudo-element. */
.deiso-wp-pro-page input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.deiso-wp-pro-page input[type="checkbox"]:focus-visible {
    box-shadow: var(--deiso-shadow-focus);
    border-color: var(--deiso-brand) !important;
}

/* Labels paired with checkboxes — align inline, choose a comfortable size. */
.deiso-wp-pro-page label {
    display: inline-flex;
    align-items: center;
    color: var(--deiso-text);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

/* Standalone label headings (such as the "Injection Location" label
   above a select) are rendered as a small, semibold caption. */
.deiso-wp-pro-page .deiso-mirai-card label[for] {
    font-weight: 600;
    color: var(--deiso-ink);
    margin-right: 10px;
}

/* `.deiso-field-row` wraps grouped sub-fields inside a settings cell
   (e.g., the "Text / URL" pairs for Footer CTA buttons). */
.deiso-wp-pro-page p.deiso-field-row {
    margin: 0 0 10px;
    color: var(--deiso-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
.deiso-wp-pro-page p.deiso-field-row:last-child {
    margin-bottom: 0;
}
.deiso-wp-pro-page p.deiso-field-row label {
    display: block;
    color: var(--deiso-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11.5px;
    margin-bottom: 6px;
    cursor: text;
}
.deiso-wp-pro-page p.deiso-field-row label br {
    display: block;
    margin-bottom: 4px;
    content: "";
}
.deiso-wp-pro-page p.deiso-field-row input {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* `.deiso-bg-actions` sits below the background image preview and groups
   the "Upload" and "Remove" buttons with consistent inline spacing. */
.deiso-wp-pro-page p.deiso-bg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

/* File input (used by the Import Settings page). */
.deiso-wp-pro-page input[type="file"] {
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 14px;
    background: var(--deiso-surface-alt);
    border: 1.5px dashed var(--deiso-border-strong);
    border-radius: var(--deiso-radius-sm);
    color: var(--deiso-text);
    font-family: var(--deiso-font);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color var(--deiso-transition), background var(--deiso-transition);
}
.deiso-wp-pro-page input[type="file"]:hover {
    border-color: var(--deiso-brand);
    background: var(--deiso-brand-soft);
}
.deiso-wp-pro-page input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 14px;
    background: var(--deiso-ink);
    color: var(--deiso-text-inverse);
    border: 0;
    border-radius: var(--deiso-radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--deiso-transition);
}
.deiso-wp-pro-page input[type="file"]::file-selector-button:hover {
    background: var(--deiso-brand);
}


/* =============================================================================
   08  CODE EDITOR SURFACE — CSS BOX / JAVASCRIPT BOX TEXTAREAS
   -----------------------------------------------------------------------------
   The Mirai Code page exposes 5 CSS boxes and 5 JavaScript boxes. These
   are textareas with class `large-text code`. We style them as proper
   dark-themed code editor surfaces — rounded, monospaced, with a
   subtle window-chrome top bar and a glowing focus ring.
   ============================================================================= */

.deiso-wp-pro-page textarea.code,
.deiso-wp-pro-page textarea.large-text.code {
    width: 100%;
    min-height: 200px;
    padding: 18px 18px 18px 20px;
    background: var(--deiso-code-bg);
    color: var(--deiso-code-fg);
    border: 1px solid #1E293B;
    border-radius: var(--deiso-radius);
    font-family: var(--deiso-font-mono);
    font-size: 13px;
    line-height: 1.65;
    /* Synthetic line-number gutter via repeating gradient — purely visual. */
    background-image: linear-gradient(180deg, var(--deiso-code-bg-2) 0%, var(--deiso-code-bg) 80px);
    box-shadow: inset 1px 0 0 var(--deiso-code-line);
    caret-color: var(--deiso-code-caret);
    tab-size: 4;
    -moz-tab-size: 4;
    transition: box-shadow var(--deiso-transition), border-color var(--deiso-transition);
}

.deiso-wp-pro-page textarea.code:hover,
.deiso-wp-pro-page textarea.large-text.code:hover {
    border-color: #2A3B57;
}

.deiso-wp-pro-page textarea.code:focus,
.deiso-wp-pro-page textarea.large-text.code:focus {
    outline: none;
    border-color: var(--deiso-brand) !important;
    box-shadow: 0 0 0 4px rgba(0, 166, 45, 0.25), inset 0 0 0 1px var(--deiso-brand);
}

.deiso-wp-pro-page textarea.code::placeholder,
.deiso-wp-pro-page textarea.large-text.code::placeholder {
    color: #64748B;
    font-style: italic;
}

/* Selection inside the code editor is brand-tinted but legible. */
.deiso-wp-pro-page textarea.code::selection,
.deiso-wp-pro-page textarea.large-text.code::selection {
    background: rgba(0, 166, 45, 0.30);
    color: #fff;
}


/* =============================================================================
   09  BUTTONS — PRIMARY, SECONDARY, DESTRUCTIVE
   -----------------------------------------------------------------------------
   Restyles WordPress's `.button`, `.button-primary`, `.button-secondary`
   classes inside the DEISO admin scope. Buttons share a single height,
   radius, and motion language; only color differentiates intent.
   ============================================================================= */

/* Base button (secondary / neutral). */
.deiso-wp-pro-page .button,
.deiso-wp-pro-page button.button,
.deiso-wp-pro-page input[type="submit"].button,
.deiso-wp-pro-page a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-height: 40px;
    padding: 10px 18px;
    background: var(--deiso-surface);
    color: var(--deiso-ink) !important;
    border: 1px solid var(--deiso-border-strong);
    border-radius: var(--deiso-radius-sm);
    font-family: var(--deiso-font);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--deiso-shadow-sm);
    transition: background var(--deiso-transition), border-color var(--deiso-transition),
                color var(--deiso-transition), transform var(--deiso-transition),
                box-shadow var(--deiso-transition);
    text-shadow: none;
}
.deiso-wp-pro-page .button:hover,
.deiso-wp-pro-page button.button:hover,
.deiso-wp-pro-page input[type="submit"].button:hover,
.deiso-wp-pro-page a.button:hover {
    background: var(--deiso-brand-soft);
    color: var(--deiso-brand-hover) !important;
    border-color: var(--deiso-brand);
    transform: translateY(-1px);
    box-shadow: var(--deiso-shadow);
}
.deiso-wp-pro-page .button:active,
.deiso-wp-pro-page button.button:active {
    transform: translateY(0);
    box-shadow: var(--deiso-shadow-sm);
}
.deiso-wp-pro-page .button:focus-visible,
.deiso-wp-pro-page button.button:focus-visible {
    box-shadow: var(--deiso-shadow-focus);
    border-color: var(--deiso-brand) !important;
}

/* Primary call-to-action — solid brand fill. */
.deiso-wp-pro-page .button-primary,
.deiso-wp-pro-page button.button-primary,
.deiso-wp-pro-page input[type="submit"].button-primary,
.deiso-wp-pro-page a.button-primary {
    background: var(--deiso-brand);
    color: var(--deiso-text-inverse) !important;
    border-color: var(--deiso-brand);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 166, 45, 0.18);
}
.deiso-wp-pro-page .button-primary:hover,
.deiso-wp-pro-page button.button-primary:hover,
.deiso-wp-pro-page input[type="submit"].button-primary:hover,
.deiso-wp-pro-page a.button-primary:hover {
    background: var(--deiso-brand-hover);
    color: var(--deiso-text-inverse) !important;
    border-color: var(--deiso-brand-hover);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 8px 18px rgba(0, 166, 45, 0.28);
}
.deiso-wp-pro-page .button-primary:active,
.deiso-wp-pro-page button.button-primary:active {
    background: var(--deiso-brand-active);
    border-color: var(--deiso-brand-active);
}

/* Secondary alias retains the neutral style of the base button. */
.deiso-wp-pro-page .button-secondary {
    /* Inherits from .button. */
}

/* Hard-reset / destructive action. The render functions emit "Hard Reset"
   buttons whose `value` attribute starts with `css:` or `js:` — we use
   that as a styling hook so callers don't need to add a new class. */
.deiso-wp-pro-page button.button[name="deiso_mirai_reset_code_box"],
.deiso-wp-pro-page button.button[value^="css:"],
.deiso-wp-pro-page button.button[value^="js:"] {
    background: var(--deiso-surface);
    color: var(--deiso-danger) !important;
    border-color: var(--deiso-border);
}
.deiso-wp-pro-page button.button[name="deiso_mirai_reset_code_box"]:hover,
.deiso-wp-pro-page button.button[value^="css:"]:hover,
.deiso-wp-pro-page button.button[value^="js:"]:hover {
    background: var(--deiso-danger-soft);
    color: var(--deiso-danger) !important;
    border-color: var(--deiso-danger);
}

/* The `.submit` paragraph wrapper that WordPress places around submit
   buttons by default. */
.deiso-wp-pro-page p.submit {
    margin: 24px 0 0;
    padding: 0;
}


/* =============================================================================
   10  NOTICES AND INLINE STATUS MESSAGES
   -----------------------------------------------------------------------------
   Restyles WordPress admin notices when they render inside a DEISO page,
   plus our custom `.deiso-mirai-reset-message` inline status line.
   ============================================================================= */

.deiso-wp-pro-page .notice,
.deiso-wp-pro-page div.notice {
    margin: 0 0 18px;
    padding: 14px 18px;
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-left-width: 4px;
    border-radius: var(--deiso-radius-sm);
    box-shadow: var(--deiso-shadow-sm);
    color: var(--deiso-text);
    font-size: 14px;
    line-height: 1.5;
}
.deiso-wp-pro-page .notice p {
    margin: 0;
    color: inherit;
}
.deiso-wp-pro-page .notice-success {
    border-left-color: var(--deiso-success);
    background: linear-gradient(90deg, var(--deiso-success-soft) 0%, var(--deiso-surface) 60%);
}
.deiso-wp-pro-page .notice-error {
    border-left-color: var(--deiso-danger);
    background: linear-gradient(90deg, var(--deiso-danger-soft) 0%, var(--deiso-surface) 60%);
}
.deiso-wp-pro-page .notice-warning {
    border-left-color: var(--deiso-warning);
    background: linear-gradient(90deg, var(--deiso-warning-soft) 0%, var(--deiso-surface) 60%);
}
.deiso-wp-pro-page .notice-info {
    border-left-color: var(--deiso-info);
    background: linear-gradient(90deg, var(--deiso-info-soft) 0%, var(--deiso-surface) 60%);
}


/* =============================================================================
   11  ENDPOINT / CODE BLOCKS
   -----------------------------------------------------------------------------
   The Webhooks page prints several endpoint URLs as `<code>` blocks.
   We give those a card-like presentation so they read clearly.
   ============================================================================= */

.deiso-wp-pro-page form > p > code,
.deiso-wp-pro-page p > code {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 12px;
    background: var(--deiso-surface-alt);
    border: 1px solid var(--deiso-border-subtle);
    border-radius: var(--deiso-radius-sm);
    font-family: var(--deiso-font-mono);
    font-size: 12.5px;
    color: var(--deiso-ink);
    word-break: break-all;
    user-select: all;
}

/* "Shared secret:" / "Webhook endpoint:" prose paragraphs become
   subtle labeled rows. */
.deiso-wp-pro-page form > p strong:first-child {
    color: var(--deiso-text-secondary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =============================================================================
   12  TABLES — widefat & striped
   -----------------------------------------------------------------------------
   Used by the dashboard module status table and by the Markdown Sync
   recent-conversations table. Restyled to match the form-table card.
   ============================================================================= */

.deiso-wp-pro-page table.widefat {
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-lg);
    box-shadow: var(--deiso-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
    font-size: 13.5px;
}

.deiso-wp-pro-page table.widefat thead th {
    background: var(--deiso-surface-alt);
    color: var(--deiso-ink);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--deiso-border);
}

.deiso-wp-pro-page table.widefat tbody td {
    padding: 14px 18px;
    border-top: 1px solid var(--deiso-border-subtle);
    color: var(--deiso-text);
    vertical-align: top;
}

/* `.striped` produces the subtle alternating row tint. */
.deiso-wp-pro-page table.widefat.striped tbody tr:nth-child(even) {
    background: var(--deiso-surface-alt);
}

/* Hover row affordance. */
.deiso-wp-pro-page table.widefat tbody tr:hover {
    background: var(--deiso-brand-soft);
}

/* Inline links inside table cells (e.g., "Download .md" buttons). */
.deiso-wp-pro-page table.widefat tbody td a.button {
    margin: 0;
}


/* =============================================================================
   13  DASHBOARD STATUS TABLE & MIGRATION NOTE
   -----------------------------------------------------------------------------
   Hooks specifically targeting the main DEISO Pro dashboard page so the
   "Module / Status / Settings" table feels designed rather than raw.
   The dashboard wrap also gets a `.deiso-dashboard-page` modifier class.
   ============================================================================= */

.deiso-wp-pro-page.deiso-dashboard-page > p:first-of-type {
    color: var(--deiso-text-secondary);
    font-size: 14px;
    margin: 0 0 8px;
}
.deiso-wp-pro-page.deiso-dashboard-page > p:first-of-type strong {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    background: var(--deiso-brand-soft);
    color: var(--deiso-brand-hover);
    border-radius: var(--deiso-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.deiso-wp-pro-page.deiso-dashboard-page > p {
    margin: 12px 0;
    color: var(--deiso-text);
}

/* The "Migration Note" H2 inherits the section heading rules above; the
   following paragraph block gets a subtle info-card treatment. */
.deiso-wp-pro-page.deiso-dashboard-page .deiso-migration-note {
    background: var(--deiso-info-soft);
    border: 1px solid #BAE6FD;
    border-left: 4px solid var(--deiso-info);
    border-radius: var(--deiso-radius);
    padding: 18px 22px;
    margin: 8px 0 0;
}
.deiso-wp-pro-page.deiso-dashboard-page .deiso-migration-note p {
    margin: 0 0 8px;
    color: var(--deiso-ink);
}
.deiso-wp-pro-page.deiso-dashboard-page .deiso-migration-note p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   14  BACKGROUND IMAGE PICKER (Footer CTA settings page)
   -----------------------------------------------------------------------------
   Two adjacent buttons ("Upload / Select Image", "Remove") plus a
   preview image. We give the preview a framed thumbnail look.
   ============================================================================= */

.deiso-wp-pro-page #deiso_bg_preview {
    margin: 0 0 12px;
}
.deiso-wp-pro-page #deiso_bg_preview img {
    display: block;
    max-width: 420px;
    height: auto;
    padding: 6px;
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-sm);
    box-shadow: var(--deiso-shadow-sm);
}
.deiso-wp-pro-page #deiso_bg_preview em {
    display: inline-block;
    padding: 14px 18px;
    background: var(--deiso-surface-alt);
    border: 1px dashed var(--deiso-border-strong);
    border-radius: var(--deiso-radius-sm);
    color: var(--deiso-text-muted);
    font-style: normal;
    font-size: 13px;
}


/* =============================================================================
   15  MIRAI CHAT IFRAME CARD
   -----------------------------------------------------------------------------
   The "Chat with Mirai" admin page embeds an iframe. We frame it with
   a tall card and give the iframe a clean white surface to render on.
   ============================================================================= */

.deiso-wp-pro-page .deiso-mirai-chat-admin-card {
    background: var(--deiso-surface);
    border: 1px solid var(--deiso-border);
    border-radius: var(--deiso-radius-lg);
    box-shadow: var(--deiso-shadow);
    overflow: hidden;
    min-height: 720px;
    position: relative;
    padding: 0;
}

.deiso-wp-pro-page .deiso-mirai-chat-iframe {
    display: block;
    width: 100%;
    height: 720px;
    min-height: 660px;
    border: 0;
    background: var(--deiso-surface);
}


/* =============================================================================
   16  RESET CONFIRMATION MESSAGES (Code page)
   -----------------------------------------------------------------------------
   After a "Hard Reset CSS Box N" or "Hard Reset JavaScript Box N"
   submit, the render function prints a small status line. We turn that
   into a colored badge.
   ============================================================================= */

.deiso-wp-pro-page .deiso-mirai-reset-message {
    margin: 12px 0 0;
    font-weight: 600;
    font-size: 13px;
}

.deiso-wp-pro-page .deiso-mirai-reset-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--deiso-success-soft);
    color: var(--deiso-success);
    border: 1px solid #86EFAC;
    border-radius: var(--deiso-radius-pill);
}
.deiso-wp-pro-page .deiso-mirai-reset-success::before {
    content: "✓";
    font-weight: 700;
}

.deiso-wp-pro-page .deiso-mirai-reset-error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--deiso-danger-soft);
    color: var(--deiso-danger);
    border: 1px solid #FCA5A5;
    border-radius: var(--deiso-radius-pill);
}
.deiso-wp-pro-page .deiso-mirai-reset-error::before {
    content: "✕";
    font-weight: 700;
}


/* =============================================================================
   17  RESPONSIVE RULES (Admin)
   -----------------------------------------------------------------------------
   Below ~960px the form-table label column collapses above the field,
   buttons stack, and the page header switches to a vertical layout.
   ============================================================================= */

@media (max-width: 1100px) {
    .wrap.deiso-wp-pro-page {
        max-width: 100%;
        margin-right: 12px;
    }
    .deiso-wp-pro-page .form-table th {
        width: 220px;
    }
}

@media (max-width: 960px) {
    .deiso-wp-pro-page .deiso-admin-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 22px;
    }
    .deiso-wp-pro-page .deiso-mirai-access-button {
        align-self: flex-start;
    }
    .deiso-wp-pro-page .deiso-admin-page-header h1,
    .deiso-wp-pro-page > h1 {
        font-size: 24px;
    }
    .deiso-wp-pro-page .form-table th,
    .deiso-wp-pro-page .form-table td {
        display: block;
        width: 100%;
        padding: 14px 18px;
    }
    .deiso-wp-pro-page .form-table th {
        padding-bottom: 4px;
    }
    .deiso-wp-pro-page .form-table tr {
        border-bottom: 1px solid var(--deiso-border-subtle);
    }
}

@media (max-width: 600px) {
    .deiso-wp-pro-page .deiso-mirai-card {
        padding: 18px 16px;
    }
    .deiso-wp-pro-page input[type="text"],
    .deiso-wp-pro-page input[type="email"],
    .deiso-wp-pro-page input[type="url"],
    .deiso-wp-pro-page input[type="password"],
    .deiso-wp-pro-page input[type="number"] {
        max-width: 100%;
    }
    .deiso-wp-pro-page .button,
    .deiso-wp-pro-page .button-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =============================================================================
   18  FRONTEND BANNER
   -----------------------------------------------------------------------------
   Top-of-page promotional banner. Renders on every public page when
   enabled. Uses brand gradient, large rounded close button, smooth
   close animation, optional countdown.
   ============================================================================= */

.deiso-banner-wrapper {
    /* Use a multi-stop brand gradient with a soft sheen overlay. */
    position: relative;
    z-index: 9999;
    display: block;
    box-sizing: border-box;
    padding: 22px 28px 22px 80px;
    background: linear-gradient(135deg, #0E1B2C 0%, #112A52 55%, #0B5C32 100%);
    color: #FFFFFF;
    font-family: var(--deiso-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 15.5px;
    line-height: 1.55;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

    /* Smoothly fade out when `.closed` is added by JS. */
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    opacity: 1;
    visibility: visible;
}

/* Subtle decorative diagonal gloss across the banner. */
.deiso-banner-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 166, 45, 0.10) 100%);
    pointer-events: none;
}

/* Inner banner text wrapper. */
.deiso-banner-wrapper .deiso-banner-message {
    position: relative;
    z-index: 1;
    margin: 0 auto 14px;
    max-width: 980px;
    color: #FFFFFF;
}
.deiso-banner-wrapper .deiso-banner-message :is(p, span, strong, em) {
    color: inherit;
}
.deiso-banner-wrapper .deiso-banner-message a {
    color: #BCF7CC;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.deiso-banner-wrapper .deiso-banner-message a:hover {
    color: #FFFFFF;
}

/* Primary CTA button inside the banner. */
.deiso-banner-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 22px;
    background: var(--deiso-brand, #00A62D) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--deiso-brand, #00A62D);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 166, 45, 0.30);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.deiso-banner-cta:hover {
    background: #00811E !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 166, 45, 0.40);
}
.deiso-banner-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.40), 0 6px 14px rgba(0, 166, 45, 0.30);
}

/* Optional sales-block HTML rendered below the CTA. */
.deiso-banner-sales-block {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
}

/* Countdown line ("Offer ends in: 3d : 4h : 22m : 18s"). */
.deiso-banner-countdown {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-weight: 700;
    font-size: 14.5px;
    color: #FFFFFF;
    letter-spacing: 0.02em;
}
.deiso-banner-countdown span {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-family: var(--deiso-font-mono, monospace);
    font-size: 13px;
}

/* Round close button anchored to the left edge. */
.deiso-banner-close {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;

    background: #FFFFFF !important;
    color: #0E1B2C !important;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);

    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.deiso-banner-close:hover {
    background: #F2F4F8 !important;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
.deiso-banner-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 166, 45, 0.45);
}

/* Closed state — the JS adds `.closed` and the row collapses gracefully. */
.deiso-banner-wrapper.closed {
    opacity: 0;
    visibility: hidden;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateY(-12px);
}

/* Banner — small screens. */
@media (max-width: 768px) {
    .deiso-banner-wrapper {
        padding: 18px 20px 18px 64px;
        font-size: 14.5px;
    }
    .deiso-banner-close {
        left: 14px;
        width: 34px;
        height: 34px;
        font-size: 20px;
    }
    .deiso-banner-cta {
        padding: 11px 18px;
        font-size: 14px;
    }
}


/* =============================================================================
   19  FRONTEND FOOTER CTA
   -----------------------------------------------------------------------------
   Full-width footer call-to-action block injected above the theme
   footer. Supports an optional left "announcement" block plus a main
   right-side title + subtitle + two buttons.

   The render function emits CSS custom properties on the wrapper so
   dynamic option-driven values (background image URL, position, size)
   stay in PHP, while every static rule lives in this stylesheet.
   ============================================================================= */

.deiso-footer-cta {
    /* Reset host wrapper. The plugin renders this with display:none until
       the JS hand-off moves it next to the theme footer. */
    width: 100%;
    margin: 0;
    padding: 0;
}

.deiso-footer-cta__wrap {
    position: relative;
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    padding: 56px 80px 56px 48px;
    overflow: hidden;

    /* Default brand gradient — a refined version of the original triplet.
       The render function may override the background-image variable
       when an admin uploads a custom background image. */
    background-image: var(
        --deiso-cta-bg-image,
        linear-gradient(95deg, #0E1B2C 0%, #0B5C32 45%, #00A62D 100%)
    );
    background-position: var(--deiso-cta-bg-pos, center center);
    background-size: var(--deiso-cta-bg-size, cover);
    background-repeat: no-repeat;
}

/* Dark legibility overlay so any uploaded photo never washes out the type. */
.deiso-footer-cta__wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg,
        rgba(14, 27, 44, 0.55) 0%,
        rgba(14, 27, 44, 0.40) 50%,
        rgba(14, 27, 44, 0.30) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Both content columns sit above the overlay. */
.deiso-footer-cta__left,
.deiso-footer-cta__content {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
}

/* Left "announcement" column. */
.deiso-footer-cta__left {
    flex: 1 1 auto;
    max-width: 720px;
    padding-left: 80px;
    margin-right: auto;
}
.deiso-footer-cta__left-title {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}
.deiso-footer-cta__left-text {
    margin: 0 0 22px;
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 720px;
}
.deiso-footer-cta__left-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Right main CTA column. */
.deiso-footer-cta__content {
    flex: 1 1 auto;
    max-width: 720px;
    text-align: left;
    margin-right: 80px;
}
.deiso-footer-cta h2.deiso-footer-cta__title {
    margin: 0 0 14px;
    font-size: 32px !important;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}
.deiso-footer-cta p.deiso-footer-cta__subtitle {
    margin: 0 0 24px !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 720px !important;
}

.deiso-footer-cta__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Footer CTA button — base. */
.deiso-footer-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 30px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

/* Outline variant — translucent fill, white border. */
.deiso-footer-cta__btn--outline {
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.deiso-footer-cta__btn--outline:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

/* Solid variant — stark white pill, brand-tinted hover. */
.deiso-footer-cta__btn--solid {
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    color: #0E1B2C !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.deiso-footer-cta__btn--solid:hover {
    background: var(--deiso-brand, #00A62D);
    border-color: var(--deiso-brand, #00A62D);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 166, 45, 0.34);
}

.deiso-footer-cta__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45), 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Footer CTA — responsive collapses. */
@media (max-width: 1100px) {
    .deiso-footer-cta__wrap {
        padding: 44px 44px 44px 28px;
        min-height: 240px;
        gap: 28px;
    }
    .deiso-footer-cta__left {
        padding-left: 32px;
    }
    .deiso-footer-cta__content {
        margin-right: 32px;
    }
    .deiso-footer-cta h2.deiso-footer-cta__title,
    .deiso-footer-cta__left-title {
        font-size: 28px !important;
    }
    .deiso-footer-cta p.deiso-footer-cta__subtitle,
    .deiso-footer-cta__left-text {
        font-size: 17px !important;
    }
    .deiso-footer-cta__btn {
        font-size: 16px;
        padding: 14px 24px;
    }
}

@media (max-width: 800px) {
    .deiso-footer-cta__wrap {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 56px;
        padding: 40px 24px;
    }
    .deiso-footer-cta__left {
        padding-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
    .deiso-footer-cta__content {
        margin-right: 0;
        max-width: 100%;
    }
    .deiso-footer-cta__buttons,
    .deiso-footer-cta__left-actions {
        width: 100%;
    }
    .deiso-footer-cta__btn {
        flex: 1 1 200px;
    }
}


/* =============================================================================
   20  ANIMATIONS & UTILITIES
   -----------------------------------------------------------------------------
   Small reusable utilities and motion primitives.
   ============================================================================= */

/* Visually hide but keep accessible (screen readers). */
.deiso-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Respect users who prefer reduced motion — disable hover transforms. */
@media (prefers-reduced-motion: reduce) {
    .deiso-wp-pro-page *,
    .deiso-banner-wrapper,
    .deiso-banner-cta,
    .deiso-banner-close,
    .deiso-footer-cta__btn {
        transition: none !important;
        animation: none !important;
    }
    .deiso-wp-pro-page .button:hover,
    .deiso-wp-pro-page .button-primary:hover,
    .deiso-banner-cta:hover,
    .deiso-banner-close:hover,
    .deiso-footer-cta__btn--outline:hover,
    .deiso-footer-cta__btn--solid:hover {
        transform: none !important;
    }
}

/* === End of file =========================================================== */