/* ============================================
   Portal + Newsletter Styling (theme‑consistent)
   ============================================ */

/* Portal root – stable selector */
#ghost-portal-root {
    /* Inherit theme variables defined in screen.css */
    color-scheme: light dark;
}

/* Typography */
#ghost-portal-root,
#ghost-portal-root * {
    font-family: var(--font-sans) !important;
    color: var(--text);
    box-sizing: border-box;
}

#ghost-portal-root p,
#ghost-portal-root span,
#ghost-portal-root div,
#ghost-portal-root label {
    color: var(--text);
    font-family: var(--font-sans);
}

#ghost-portal-root h1,
#ghost-portal-root h2,
#ghost-portal-root h3,
#ghost-portal-root h4,
#ghost-portal-root h5,
#ghost-portal-root h6 {
    font-family: var(--font-sans);
    color: var(--text);
    font-weight: 600;
}

#ghost-portal-root small,
#ghost-portal-root .gh-portal-text-small {
    color: var(--muted-text);
    font-size: 0.875rem;
}

/* Buttons */
#ghost-portal-root button,
#ghost-portal-root .gh-portal-btn {
    font-family: var(--font-sans) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: 500;
    transition: var(--btn-transition) !important;
    cursor: pointer;
    border: 1px solid var(--btn-border) !important;
    padding: var(--btn-padding) !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* Primary button - FORCE WHITE BACKGROUND (не розов!) */
#ghost-portal-root .gh-portal-popup-container button.gh-portal-btn-main,
#ghost-portal-root .gh-portal-popup-wrapper button.gh-portal-btn-main,
#ghost-portal-root .gh-portal-popup-container .gh-portal-btn-primary,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-btn-primary,
#ghost-portal-root .gh-portal-popup-container button[type="submit"],
#ghost-portal-root .gh-portal-popup-wrapper button[type="submit"],
#ghost-portal-root button.gh-portal-btn-main,
#ghost-portal-root .gh-portal-btn-primary,
#ghost-portal-root button[type="submit"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
}

#ghost-portal-root .gh-portal-popup-container button.gh-portal-btn-main:hover,
#ghost-portal-root .gh-portal-popup-wrapper button.gh-portal-btn-main:hover,
#ghost-portal-root .gh-portal-popup-container .gh-portal-btn-primary:hover,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-btn-primary:hover,
#ghost-portal-root .gh-portal-popup-container button[type="submit"]:hover,
#ghost-portal-root .gh-portal-popup-wrapper button[type="submit"]:hover,
#ghost-portal-root button.gh-portal-btn-main:hover,
#ghost-portal-root .gh-portal-btn-primary:hover,
#ghost-portal-root button[type="submit"]:hover {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2) !important;
}

/* Focus ring for Portal buttons (align with theme focus pattern) */
#ghost-portal-root button:focus-visible,
#ghost-portal-root .gh-portal-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent) !important;
}

/* Secondary button */
#ghost-portal-root .gh-portal-btn-secondary,
#ghost-portal-root button:not(.gh-portal-btn-primary):not([type="submit"]) {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

#ghost-portal-root .gh-portal-btn-secondary:hover,
#ghost-portal-root button:not(.gh-portal-btn-primary):not([type="submit"]):hover {
    background-color: var(--border) !important;
}

/* Inputs */
#ghost-portal-root input,
#ghost-portal-root .gh-portal-input {
    font-family: var(--font-sans) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--btn-radius) !important;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s;
}

#ghost-portal-root input:focus,
#ghost-portal-root .gh-portal-input:focus {
    border-color: var(--focus-ring) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

/* Modal and backdrop */
#ghost-portal-root .gh-portal-popup-wrapper,
#ghost-portal-root .gh-portal-popup-container {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-radius: calc(var(--radius) * 2);
    overflow: hidden;
}

#ghost-portal-root .gh-portal-popup-background {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Close button */
#ghost-portal-root .gh-portal-close,
#ghost-portal-root .gh-portal-close-btn {
    color: var(--muted-text) !important;
    background: transparent !important;
    border: none !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#ghost-portal-root .gh-portal-close:hover,
#ghost-portal-root .gh-portal-close-btn:hover {
    color: var(--text) !important;
    background-color: var(--border) !important;
}

/* Newsletter forms in content (outside Portal) */
.gh-form,
.gh-signup-form,
.gh-subscribe-form,
.kg-form {
    font-family: var(--font-sans);
    color: var(--text);
}

.gh-form input,
.gh-signup-form input,
.gh-subscribe-form input,
.kg-form input {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--btn-radius) !important;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.gh-form input:focus,
.gh-signup-form input:focus,
.gh-subscribe-form input:focus,
.kg-form input:focus {
    border-color: var(--focus-ring) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

.gh-form button,
.gh-signup-form button,
.gh-subscribe-form button,
.kg-form button {
    background-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border-radius: var(--btn-radius) !important;
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.gh-form button:hover,
.gh-signup-form button:hover,
.gh-subscribe-form button:hover,
.kg-form button:hover {
    background-color: color-mix(in srgb, var(--accent) 80%, black) !important;
    transform: translateY(-1px);
}

/* Utility */
#ghost-portal-root a {
    color: var(--accent);
    text-decoration: none;
}

#ghost-portal-root a:hover {
    text-decoration: none;
}

/* Sign-in link styling (Вход) - make it look like a button */
#ghost-portal-root .gh-portal-popup-container .gh-portal-signin-link,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-signin-link,
#ghost-portal-root .gh-portal-popup-container .gh-portal-switch-subtext a,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-switch-subtext a,
#ghost-portal-root .gh-portal-signin-link,
#ghost-portal-root .gh-portal-switch-subtext a,
#ghost-portal-root a.gh-portal-btn-secondary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 14px 32px !important;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s !important;
    font-weight: 500;
}

#ghost-portal-root .gh-portal-popup-container .gh-portal-signin-link:hover,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-signin-link:hover,
#ghost-portal-root .gh-portal-popup-container .gh-portal-switch-subtext a:hover,
#ghost-portal-root .gh-portal-popup-wrapper .gh-portal-switch-subtext a:hover,
#ghost-portal-root .gh-portal-signin-link:hover,
#ghost-portal-root .gh-portal-switch-subtext a:hover,
#ghost-portal-root a.gh-portal-btn-secondary:hover {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    text-decoration: none !important;
}

/* FORCE OVERRIDE INLINE STYLES (Ghost Portal JavaScript) */
/* Target buttons with inline background-color (розов!) */
#ghost-portal-root button.gh-portal-btn-main[style*="background-color"],
#ghost-portal-root button.gh-portal-btn-primary[style*="background-color"],
#ghost-portal-root button[type="submit"][style*="background-color"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
}

#ghost-portal-root button.gh-portal-btn-main[style*="background-color"]:hover,
#ghost-portal-root button.gh-portal-btn-primary[style*="background-color"]:hover,
#ghost-portal-root button[type="submit"][style*="background-color"]:hover {
    background-color: #ffffff !important;
    border-color: #000000 !important;
}

/* Target sign-in span (Вход) */
#ghost-portal-root .gh-portal-signin-link span,
#ghost-portal-root .gh-portal-switch-subtext span {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    display: inline-block;
}

#ghost-portal-root .gh-portal-signin-link:hover span,
#ghost-portal-root .gh-portal-switch-subtext:hover span {
    border-color: #000000 !important;
}

/* JavaScript-applied classes (from portal-fix.js) */
#ghost-portal-root button.portal-theme-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}

#ghost-portal-root button.portal-theme-btn:hover {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(255,255,255,0.2) !important;
}

#ghost-portal-root .portal-theme-link {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e5e7eb !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: border-color 0.2s !important;
}

#ghost-portal-root .portal-theme-link:hover {
    border-color: #000000 !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    #ghost-portal-root {
        --surface: var(--surface, #111827);
        --surface-2: var(--surface-2, #1f2937);
        --text: var(--text, #f9fafb);
        --muted-text: var(--muted-text, #9ca3af);
        --border: var(--border, #374151);
    }
}

[data-theme="dark"] #ghost-portal-root {
    --surface: var(--surface, #111827);
    --surface-2: var(--surface-2, #1f2937);
    --text: var(--text, #f9fafb);
    --muted-text: var(--muted-text, #9ca3af);
    --border: var(--border, #374151);
}