/* AI Girlfriend Plugin - Frontend Styles */
/* Variables and animations are now loaded via WordPress enqueue system */

/* ==========================================================================
   Global Page Background Control - Theme Override
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
        -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Force plugin background control over theme */
body.aigf-plugin-active {
    background: var(--page-bg-default) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alternative background themes */
body.aigf-plugin-active.aigf-bg-light {
    background: var(--page-bg-light) !important;
}

body.aigf-plugin-active.aigf-bg-gradient {
    background: var(--page-bg-gradient) !important;
}

body.aigf-plugin-active.aigf-bg-purple {
    background: var(--page-bg-purple) !important;
}

body.aigf-plugin-active.aigf-bg-neon {
    background: var(--page-bg-neon) !important;
}

body.aigf-plugin-active.aigf-bg-custom1 {
    background: var(--page-bg-custom1) !important;
}

body.aigf-plugin-active.aigf-bg-custom2 {
    background: var(--page-bg-custom2) !important;
}

body.aigf-plugin-active.aigf-bg-custom3 {
    background: var(--page-bg-custom3) !important;
}

body.aigf-plugin-active.aigf-bg-custom4 {
    background: var(--page-bg-custom4) !important;
}

/* Gradient background variants */
body.aigf-plugin-active.aigf-bg-light-gradient {
    background: var(--page-bg-light-gradient) !important;
}

body.aigf-plugin-active.aigf-bg-purple-gradient {
    background: var(--page-bg-purple-gradient) !important;
}

body.aigf-plugin-active.aigf-bg-neon-gradient {
    background: var(--page-bg-neon-gradient) !important;
}

.page-header {
    display: none !important;
}

.site-main {
    padding-top: 75px;
}

@media (max-width: 768px) {
    .site-main {
        padding-top: 60px;
    }
}

input:-internal-autofill-selected {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    color: var(--tex) !important;
}

/* ------------------------------------------------------------------
   Global Select2 alignment helpers - ensures the select2 text and
   the caret/arrow are vertically centered across the app
   ------------------------------------------------------------------ */
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Prevent horizontal scrolling and ensure long option text wraps in Select2 dropdowns */
.select2-dropdown,
.select2-container--default .select2-results__options,
.select2-container--default .select2-results__option {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Allow results to wrap instead of creating horizontal scrollbars */
.select2-container--default .select2-results__option {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Truncate the selection display to avoid overflowing the control */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Make small arrow b element behave predictably */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: block;
}



/* Select2 Styling for Dropdowns */
.select2-container--default .select2-selection--single {
    background: var(--bg-1) !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 12px !important;
    height: 44px !important;
    padding: 8px 16px !important;
    /* Ensure select and its arrow are vertically centered */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.15) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: var(--text-light1) !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted1) !important;
    opacity: 0.7;
}

/* Keep arrow vertically centered and tucked to the right */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-right: 4px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
}

.select2-dropdown {
    background: var(--bg-1) !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px);
    overflow-x: hidden !important; /* Prevent horizontal scrollbar */
}

.select2-container--default .select2-results__option {
    background: var(--bg-1) !important;
    color: var(--text-light1) !important;
    padding: 12px 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--primary) !important;
    color: var(--text-light1) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(155, 93, 229, 0.2) !important;
}

.select2-selection__clear span {
    color: var(--text-muted1) !important;
    font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 15px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--glass-border) !important;
    background-color: var(--bg-2) !important;
}