/* MyVibe unified form controls. Loaded last so fields stay consistent across app surfaces. */
:root {
    --mv-control-border: var(--mv-border-soft, rgba(226, 232, 240, 0.82));
    --mv-control-border-hover: rgba(13, 62, 154, 0.3);
    --mv-control-border-active: rgba(13, 62, 154, 0.46);
    --mv-control-bg: var(--mv-surface-soft, #f8fafc);
    --mv-control-bg-hover: var(--mv-surface, #fff);
    --mv-control-bg-disabled: var(--mv-surface-muted, #f1f5f9);
    --mv-control-text: var(--text-body, #334155);
    --mv-control-placeholder: #94a3b8;
    --mv-control-height: 44px;
    --mv-control-radius: var(--mv-radius-control, 12px);
    --mv-control-focus: var(--mv-focus-ring, 0 0 0 3px rgba(13, 62, 154, 0.16));
    --mv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
    --mv-control-border: rgba(71, 85, 105, 0.82);
    --mv-control-border-hover: rgba(139, 181, 255, 0.44);
    --mv-control-border-active: rgba(139, 181, 255, 0.68);
    --mv-control-bg: #0f1728;
    --mv-control-bg-hover: #111c30;
    --mv-control-bg-disabled: #182235;
    --mv-control-text: var(--text-main, #e5edf8);
    --mv-control-placeholder: #6f7f96;
    --mv-control-focus: 0 0 0 3px rgba(139, 181, 255, 0.14);
    --mv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238bb5ff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(
    input:not([type]),
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    textarea,
    .auth-input,
    .editor-input,
    .form-control,
    .permalink-input,
    .wm-search-input,
    .wm-linked-email,
    .mail-readonly-input,
    .mail-textarea,
    .mail-vanity-textarea,
    .voucher-input,
    .note-textarea
):not(.input-clean):not(.domain-input):not(.dc-input):not(.domain-check-input):not(.mv-chat-input-field):not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]) {
    width: 100%;
    min-height: var(--mv-control-height) !important;
    padding: var(--mv-control-padding, 10px 14px) !important;
    border: 1px solid var(--mv-control-border) !important;
    border-radius: var(--mv-control-radius) !important;
    background-color: var(--mv-control-bg) !important;
    color: var(--mv-control-text) !important;
    box-shadow: none !important;
    font-family: "Inter", sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    outline: none !important;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
    box-sizing: border-box;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(textarea, textarea.editor-input, textarea.form-control, .mail-textarea, .mail-vanity-textarea, .note-textarea) {
    min-height: 120px !important;
    resize: vertical;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(select, select.editor-input, select.form-control, .mv-custom-select):not([multiple]):not([size]) {
    padding-right: 42px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: var(--mv-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(
    input:not([type]),
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    textarea,
    .auth-input,
    .editor-input,
    .form-control,
    .permalink-input,
    .wm-search-input,
    .wm-linked-email,
    .mail-readonly-input,
    .mail-textarea,
    .mail-vanity-textarea,
    .voucher-input,
    .note-textarea
):not(.input-clean):not(.domain-input):not(.dc-input):not(.domain-check-input):not(.mv-chat-input-field):not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]):hover:not(:disabled):not([readonly]) {
    border-color: var(--mv-control-border-hover) !important;
    background-color: var(--mv-control-bg-hover) !important;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(
    input:not([type]),
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    textarea,
    .auth-input,
    .editor-input,
    .form-control,
    .permalink-input,
    .wm-search-input,
    .wm-linked-email,
    .mail-readonly-input,
    .mail-textarea,
    .mail-vanity-textarea,
    .voucher-input,
    .note-textarea
):not(.input-clean):not(.domain-input):not(.dc-input):not(.domain-check-input):not(.mv-chat-input-field):not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]):is(:focus, :focus-visible, :active) {
    border-color: var(--mv-control-border-active) !important;
    background-color: var(--mv-control-bg-hover) !important;
    box-shadow: var(--mv-control-focus) !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay, .sl-stats-modal) :is(
    .input-group-merge,
    .shortlink-slug-wrapper,
    .select-wrapper-clean,
    .compose-row,
    .compose-row-first,
    .compose-row-mid,
    .compose-row-last
) {
    border-color: var(--mv-control-border) !important;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay, .sl-stats-modal) :is(
    .input-group-merge,
    .shortlink-slug-wrapper,
    .select-wrapper-clean,
    .compose-row,
    .compose-row-first,
    .compose-row-mid,
    .compose-row-last
):hover {
    border-color: var(--mv-control-border-hover) !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay, .sl-stats-modal) :is(
    .input-group-merge,
    .shortlink-slug-wrapper,
    .select-wrapper-clean,
    .compose-row,
    .compose-row-first,
    .compose-row-mid,
    .compose-row-last
):focus-within {
    border-color: var(--mv-control-border-active) !important;
    box-shadow: var(--mv-control-focus) !important;
}

:where(.seo-app) .shortlink-slug-wrapper input,
:where(.dashboard-section) .input-group-merge .input-clean,
:where(body.mail-app-mode) .compose-row > input,
:where(body.mail-app-mode) .compose-row .select-wrapper-clean select {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(body) .password-input-wrapper input {
    padding-right: 48px !important;
}

:where(body) :is(.admin-search-field, .user-search-box, .wm-search-box, .tpl-search-container) {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

:where(body) :is(.admin-search-field, .user-search-box, .wm-search-box, .tpl-search-container) > svg {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 18px;
    height: 18px;
    color: var(--mv-control-placeholder) !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
}

:where(body) :is(.admin-search-field, .user-search-box, .wm-search-box) :is(input, .editor-input, .wm-search-input) {
    --mv-control-padding: 10px 14px 10px 46px;
}

:where(body) .admin-search-field .editor-input {
    --mv-control-padding: 10px 14px 10px 46px;
}

:where(body) .tpl-search-container input {
    --mv-control-padding: 10px 14px 10px 54px;
}

:where(body) .faq-search-box > input {
    --mv-control-padding: 16px 20px 16px 50px;
}

:where(body) .faq-search-box > svg {
    pointer-events: none;
}

:where(body) .searchable-select-container .input-search-text {
    --mv-control-padding: 10px 40px 10px 14px;
}

:where(body) :is(.select-wrapper, .select-wrapper-clean) select {
    background-image: none !important;
}

:where(body) .dashboard-section .category-tools.admin-table-tools {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .dashboard-section :is(.admin-search-field, .user-search-box) > svg,
body.mail-app-mode .wm-search-box > svg,
body .tpl-search-container > svg {
    left: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

body .dashboard-section :is(.admin-search-field, .user-search-box) > input:is(.editor-input, .search-rounded),
body .dashboard-section :is(.admin-search-field, .user-search-box) > .editor-input.search-rounded,
body.mail-app-mode .wm-search-box > .wm-search-input {
    --mv-control-padding: 10px 14px 10px 56px;
    text-indent: 0 !important;
}

body .tpl-search-container > input {
    --mv-control-padding: 10px 14px 10px 58px;
    text-indent: 0 !important;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(input, textarea)::placeholder {
    color: var(--mv-control-placeholder) !important;
    opacity: 1;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(input, select, textarea, .auth-input, .editor-input, .form-control):is(:disabled, [readonly]) {
    background-color: var(--mv-control-bg-disabled) !important;
    color: var(--text-light, #64748b) !important;
    cursor: not-allowed;
    opacity: 0.86;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) select option:checked {
    background: var(--primary, #0d3e9a);
    color: #fff;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay) :is(.is-selected, .selected, .active)[data-form-control],
:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay) :is(input, select, textarea)[aria-selected="true"] {
    border-color: var(--mv-control-border-active) !important;
    box-shadow: var(--mv-control-focus) !important;
}

/* Final alignment pass for controls with older page-specific heights. */
:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(
    input:not([type]),
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    .auth-input,
    .editor-input,
    .form-control,
    .permalink-input,
    .wm-search-input,
    .wm-linked-email,
    .mail-readonly-input,
    .voucher-input
):not(textarea):not(.post-title-input):not(.input-clean):not(.domain-input):not(.dc-input):not(.domain-check-input):not(.mv-chat-input-field):not(.textarea-sapo):not(.textarea-h100):not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]) {
    height: var(--mv-control-height) !important;
    max-height: none !important;
}

:where(
    body,
    .dashboard-section,
    .seo-app,
    body.seo-app-mode,
    body.mail-app-mode,
    .mail-standalone-login,
    .auth-section,
    .register-section,
    .payment-section,
    .contact-section,
    .contact-page-section,
    .modal-overlay,
    .mv-modal-overlay,
    .sl-stats-modal
) :is(textarea, textarea.editor-input, textarea.form-control, .mail-textarea, .mail-vanity-textarea, .note-textarea):not(.mv-chat-input-field) {
    border-color: var(--mv-control-border) !important;
}

:where(body) :is(.select-wrapper, .select-wrapper-clean) {
    position: relative;
    overflow: visible !important;
}

:where(body) :is(.select-wrapper, .select-wrapper-clean)::after,
:where(body) :is(.select-wrapper, .select-wrapper-clean) > svg {
    color: var(--mv-control-placeholder) !important;
    pointer-events: none;
}

:where(body) :is(.select-wrapper, .select-wrapper-clean):hover::after,
:where(body) :is(.select-wrapper, .select-wrapper-clean):hover > svg,
:where(body) :is(.select-wrapper, .select-wrapper-clean):focus-within::after,
:where(body) :is(.select-wrapper, .select-wrapper-clean):focus-within > svg {
    color: var(--primary, #0d3e9a) !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay) :is(.wp-editor-wrap, .mce-tinymce) {
    border-color: var(--mv-control-border) !important;
    border-radius: var(--mv-control-radius) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .modal-overlay, .mv-modal-overlay) :is(.wp-editor-wrap, .mce-tinymce):focus-within {
    border-color: var(--mv-control-border-active) !important;
    box-shadow: var(--mv-control-focus) !important;
}

:where(.dashboard-section, .seo-app, body.mail-app-mode, .register-section, .payment-section) :is(
    .admin-filter-chip.is-active,
    .btn-qr-type.active,
    .price-option.selected,
    .template-option.selected,
    .duration-item.selected,
    .plan-summary-item.selected
) {
    border-color: var(--mv-control-border-active) !important;
}

:where(body) :is(
    .admin-search-field,
    .user-search-box,
    .wm-search-box,
    .tpl-search-container,
    .search-form-relative
) {
    isolation: isolate;
    overflow: visible !important;
}

:where(body) .search-form-relative .search-input-rounded {
    width: 100% !important;
    --mv-control-padding: 10px 58px 10px 14px;
}

:where(body) .search-form-wrap {
    width: min(500px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
}

:where(body) .search-form-relative {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 640px) {
    :where(body) .search-form-wrap {
        width: min(320px, calc(100vw - 32px)) !important;
    }
}

:where(body) .search-form-relative .search-btn-absolute {
    right: 6px !important;
    z-index: 4 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--primary, #0d3e9a) !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

:where(body) .search-form-relative .search-btn-absolute:hover,
:where(body) .search-form-relative .search-btn-absolute:focus-visible {
    border-color: var(--mv-control-border-hover) !important;
    background: var(--primary-bg, rgba(13, 62, 154, 0.08)) !important;
    color: var(--primary, #0d3e9a) !important;
    box-shadow: 0 6px 16px rgba(13, 62, 154, 0.08) !important;
    transform: translateY(-50%) scale(1.04) !important;
}

:where(body) .search-form-relative .search-btn-absolute:active {
    border-color: var(--mv-control-border-active) !important;
    transform: translateY(-50%) scale(0.98) !important;
}

:where(body) :is(.domain-checker-box, .domain-check-wrapper, .hero-domain-checker, .cta-domain-checker) {
    overflow: visible !important;
}

:where(body) :is(.checker-input-group, .dc-input-group) {
    min-width: 0;
}

:where(body) :is(.btn-check-domain, .btn-check-action) {
    position: relative;
    z-index: 3;
    min-height: var(--mv-control-height) !important;
    border: 0 !important;
    box-sizing: border-box;
}

/* --- Global Select Dropdowns Enhancements --- */
select:not([multiple]):not([size]) {
    width: 100%;
    max-width: 100%;
    min-height: var(--mv-control-height, 44px) !important;
    height: var(--mv-control-height, 44px) !important;
    padding: var(--mv-control-padding, 10px 42px 10px 14px) !important;
    border: 1px solid var(--mv-control-border) !important;
    border-radius: var(--mv-control-radius, 12px) !important;
    background-color: var(--mv-control-bg) !important;
    color: var(--mv-control-text) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: var(--mv-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    cursor: pointer;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

/* Hover and active states for global selects */
select:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: var(--mv-control-border-hover) !important;
    background-color: var(--mv-control-bg-hover) !important;
}
select:not([multiple]):not([size]):focus:not(:disabled) {
    border-color: var(--mv-control-border-active) !important;
    background-color: var(--mv-control-bg-hover) !important;
    box-shadow: var(--mv-control-focus) !important;
}

/* Ensure containers that wrap selects have proper styling and show arrows */
.select-wrapper, .select-wrapper-clean {
    position: relative;
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
}

.select-wrapper select, .select-wrapper-clean select {
    padding-right: 42px !important;
    width: 100% !important;
}

/* If background image is disabled on select-wrapper's select, ensure the wrapper has an arrow indicator */
:where(body) :is(.select-wrapper, .select-wrapper-clean) select {
    background-image: none !important; /* Keep native arrow hidden as wrapper has its own */
}

/* Define standard arrow for select-wrapper if not present */
.select-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 14px !important;
    height: 14px !important;
    background-image: var(--mv-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
    display: block !important;
    opacity: 0.8;
}

.select-wrapper:hover::after {
    transform: translateY(-50%) scale(1.1) !important;
    opacity: 1;
}