/**
 * Account Pages Redesign
 * Modern, clean styles for UM account pages: sidebar, profile, services, notifications.
 * Overrides um-account.css and theme defaults.
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT — overall account wrapper
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.um-account-side,
.um-account-main {
    float: none !important;
    width: auto !important;
}

/* Account wrapper — full width */
.um.um-account.um-editing {
    width: unset !important;
}

/* The sidebar + main live inside <form> which is inside .um-form */
.um .um-form > form {
    display: flex !important;
    gap: 16px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 !important;
}

/* Override UM's JS-based responsive classes that break the flex layout */
div.uimob800 .um-account-side,
div.uimob960 .um-account-side {
    width: 220px !important;
    padding: 0 !important;
}

div.uimob800 .um-account-main,
div.uimob960 .um-account-main {
    width: auto !important;
    max-width: none !important;
}

div.uimob800 .um-account-side ul,
div.uimob960 .um-account-side ul {
    border: none !important;
    border-radius: 0 !important;
}

div.uimob800 .um-account-side li a,
div.uimob960 .um-account-side li a {
    text-align: left !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Clear the UM clearfix that can break flex */
.um .um-form > form > .um-clear {
    display: none;
}

/* Hide UM's mobile accordion nav — we use sidebar on all sizes */
.um-account-nav {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.um .um-form .um-account-side {
    width: 220px !important;
    min-width: 220px;
    padding: 8px !important;
    flex-shrink: 0;
    background: #fff !important;
    border-radius: 12px;
    align-self: stretch;
}

/* Hide the avatar and name from sidebar — too large and distracting */
.um-account-side .um-account-meta {
    display: none !important;
}

/* Sidebar list reset */
.um-account-side ul {
    display: flex;
    flex-direction: column;
    gap: 2px !important;
}

.um-account-side li {
    background: none !important;
    margin: 0 !important;
}

/* Sidebar links */
.um-account-side li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    position: relative;
}

.um-account-side li a:hover {
    background: rgba(219, 53, 117, 0.06) !important;
    color: #333 !important;
}

/* Active tab — pill style */
.um-account-side li a.current,
.um-account-side li a.current:hover {
    background: rgba(219, 53, 117, 0.10) !important;
    color: #DB3575 !important;
    font-weight: 600 !important;
}

/* Sidebar icon styling */
.um-account-side li a span.um-account-icon {
    float: none !important;
    border-right: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    color: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    min-width: 20px;
}

.um-account-side li a span.um-account-icon i {
    display: block;
    height: auto !important;
    line-height: 1 !important;
}

/* Sidebar title */
.um-account-side li a span.um-account-title {
    float: none !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    color: inherit !important;
}

/* Hide the right arrow — not needed in pill style */
.um-account-side li a span.um-account-arrow {
    display: none !important;
}

/* Dark theme sidebar */
body[data-theme="dark"] .um .um-form .um-account-side {
    background: var(--vrd-dark-section-background, #141920) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .um-account-side li a {
    color: #aaa !important;
}

body[data-theme="dark"] .um-account-side li a:hover {
    background: rgba(219, 53, 117, 0.08) !important;
    color: #ddd !important;
}

body[data-theme="dark"] .um-account-side li a.current,
body[data-theme="dark"] .um-account-side li a.current:hover {
    background: rgba(219, 53, 117, 0.15) !important;
    color: #DB3575 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN CONTENT AREA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.um-account-main {
    width: auto !important;
    flex: 1;
    min-width: 0;
    padding: 0 !important;
}

/* Tab heading */
.um-account-main div.um-account-heading {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #212121 !important;
    margin-bottom: 32px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.um-account-main div.um-account-heading i {
    display: none !important;
}

body[data-theme="dark"] .um-account-main div.um-account-heading {
    color: #eee !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ALL UM TABS — card wrapper (includes heading + content)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.um-account-tab {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 28px !important;
}

body[data-theme="dark"] .um-account-tab {
    background: var(--vrd-dark-section-background, #141920) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Inner content divs inside UM tabs should NOT have their own card */
.um-account-tab .vrd_account_services_page,
.um-account-tab .vrd_account_notifications_page {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GENERAL TAB — Profile form (Compte)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Avatar — camera icon overlay only, don't touch size/shape */
.vrd_profile_photo_preview {
    position: relative !important;
    overflow: visible !important;
}

/* Camera icon overlay — pulsing */
.vrd_profile_photo_preview::after {
    content: "\f030";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: #DB3575;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    cursor: pointer;
    animation: vrd-pulse 2s ease-in-out infinite;
    z-index: 2;
}

body[data-theme="dark"] .vrd_profile_photo_preview::after {
    border-color: var(--vrd-dark-section-background, #141920);
}

@keyframes vrd-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.um-account-tab-general .um-account-name {
    padding: 0 !important;
}

.um-account-tab-general .um-account-name a {
    font-size: 16px !important;
    color: #333 !important;
}

body[data-theme="dark"] .um-account-tab-general .um-account-name a {
    color: #eee !important;
}

.um-account-tab-general .um-account-profile-link a {
    color: #DB3575 !important;
    font-size: 13px !important;
}

/* Form labels — smaller, uppercase, muted */
.um-account-main .um-field-label label,
.um-account-main label.um-field-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888 !important;
    margin-bottom: 6px !important;
}

body[data-theme="dark"] .um-account-main .um-field-label label,
body[data-theme="dark"] .um-account-main label.um-field-label {
    color: #777 !important;
}

/* Form inputs — must use #body-wrap ID to beat theme's
   .dark-schema#body-wrap .um .um-form input specificity */
#body-wrap .um.um-account .um-form input[type="text"],
#body-wrap .um.um-account .um-form input[type="email"],
#body-wrap .um.um-account .um-form input[type="password"],
#body-wrap .um.um-account .um-form input[type="url"],
#body-wrap .um.um-account .um-form input[type="tel"],
#body-wrap .um.um-account .um-form textarea,
#body-wrap .um.um-account .um-form select {
    background: #e2e2e8 !important;
    border: 1px solid #c0c0ca !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #333 !important;
    box-shadow: none !important;
    height: auto !important;
}

#body-wrap .um.um-account .um-form input[type="text"]:focus,
#body-wrap .um.um-account .um-form input[type="email"]:focus,
#body-wrap .um.um-account .um-form input[type="password"]:focus {
    border-color: #DB3575 !important;
    outline: none !important;
    background: #fff !important;
}

.dark-schema#body-wrap .um.um-account .um-form input[type="text"],
.dark-schema#body-wrap .um.um-account .um-form input[type="email"],
.dark-schema#body-wrap .um.um-account .um-form input[type="password"],
.dark-schema#body-wrap .um.um-account .um-form input[type="url"],
.dark-schema#body-wrap .um.um-account .um-form input[type="tel"],
.dark-schema#body-wrap .um.um-account .um-form textarea,
.dark-schema#body-wrap .um.um-account .um-form select {
    background: #12161b !important;
    border: 2px solid #2e2f32 !important;
    color: #e4e4ed !important;
}

.dark-schema#body-wrap .um.um-account .um-form input[type="text"]:focus,
.dark-schema#body-wrap .um.um-account .um-form input[type="email"]:focus,
.dark-schema#body-wrap .um.um-account .um-form input[type="password"]:focus {
    background: #0c0f14 !important;
    border-color: #DB3575 !important;
}

/* Submit button — align right */
.um-account-main .um-col-alt {
    text-align: right;
    margin-top: 20px !important;
    padding-top: 20px;
    border: none !important;
}

/* Remove all stray borders inside account tabs */
.um-account-tab .um-field,
.um-account-tab .um-col-alt,
.um-account-tab .um-col-alt-b,
.um-account-tab hr {
    border: none !important;
}

/* Match UM buttons to vrd_button.is_primary style */
.um input[type=submit].um-button,
.um a.um-button {
    background: #DB3575 !important;
    color: #FFF !important;
    border-radius: 5px !important;
    padding: 6px 20px !important;
    font-size: 1em !important;
    line-height: 2em !important;
    font-weight: normal !important;
    letter-spacing: 0;
    border: none !important;
    cursor: pointer;
    transition: background 0.15s !important;
}

.um input[type=submit].um-button:hover,
.um a.um-button:hover {
    background: #92346E !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES TAB — "Mes Services"
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Standalone page card (not inside UM tab) */
.vrd_account_content > .vrd_account_services_page {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

body[data-theme="dark"] .vrd_account_content > .vrd_account_services_page {
    background: var(--vrd-dark-section-background, #141920) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Remove the scroll container — let icons flow naturally */
.vrd_account_services_page .vrd_services_options {
    max-height: 380px !important;
    overflow-y: overlay !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(150,150,150,0.4) transparent;
}

.vrd_account_services_page .vrd_services_options::-webkit-scrollbar {
    width: 6px;
}

.vrd_account_services_page .vrd_services_options::-webkit-scrollbar-track {
    background: transparent;
}

.vrd_account_services_page .vrd_services_options::-webkit-scrollbar-thumb {
    background: rgba(150,150,150,0.4);
    border-radius: 3px;
}

.vrd_account_services_page .vrd_services_options::-webkit-scrollbar-thumb:hover {
    background: rgba(150,150,150,0.6);
}

/* Service tiles — larger with more breathing room */
#vrd_services_selector .vrd_refiner_option.is_icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s !important;
    position: relative;
}

/* Selection state — subtle accent border + soft glow, replacing thick pink border */
#vrd_services_selector .vrd_refiner_option.is_icon.is_active {
    border: 2px solid #DB3575 !important;
    opacity: 1 !important;
}

/* Centered checkmark overlay on selected services */
#vrd_services_selector .vrd_refiner_option.is_icon.is_active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border-radius: 6px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* Light mode — lighter overlay with pink check */
body:not([data-theme="dark"]) #vrd_services_selector .vrd_refiner_option.is_icon.is_active::after {
    background: rgba(255, 255, 255, 0.55);
    color: #DB3575;
}

/* Grid spacing */
.vrd_services_selector .vrd_refiner_options,
#vrd_services_selector .vrd_refiner_options {
    gap: 14px !important;
    padding-bottom: 24px;
}

/* Fallback icons for services without images */
#vrd_services_selector .vrd_refiner_option.is_icon.is_fallback {
    background: #f0f0f3 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-theme="dark"] #vrd_services_selector .vrd_refiner_option.is_icon.is_fallback {
    background: rgba(255,255,255,0.06) !important;
}

/* Search bar refinement */
.vrd_services_selector_header {
    margin-bottom: 20px !important;
}

/* Search input — match account input style */
#body-wrap .um .um-form #vrd_services_selector .vrd_services_search,
.vrd_services_search {
    background: #e2e2e8 !important;
    border: 1px solid #c0c0ca !important;
    border-radius: 8px !important;
    padding: 10px 14px 10px 28px !important;
    font-size: 14px !important;
    color: #333 !important;
    height: auto !important;
}

.dark-schema#body-wrap .vrd_services_search,
.dark-schema#body-wrap .um .um-form #vrd_services_selector .vrd_services_search {
    background: #12161b !important;
    border: 2px solid #2e2f32 !important;
    color: #e4e4ed !important;
}

/* Action buttons (Tous / Aucun) — all four borders explicit */
a.vrd_button.vrd_services_action {
    font-size: 13px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    color: #666 !important;
    background: none !important;
    border-top: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    margin: 0 !important;
    line-height: 1.8 !important;
    transition: all 0.15s !important;
}

a.vrd_button.vrd_services_action:hover {
    background: rgba(219, 53, 117, 0.06) !important;
    border-color: #DB3575 !important;
    color: #DB3575 !important;
}

body[data-theme="dark"] a.vrd_button.vrd_services_action {
    color: #999 !important;
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] a.vrd_button.vrd_services_action:hover {
    background: rgba(219, 53, 117, 0.1) !important;
    color: #DB3575 !important;
}

/* Save button area */
.vrd_services_selector_actions {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

body[data-theme="dark"] .vrd_services_selector_actions {
    border-top-color: rgba(255,255,255,0.06);
}

/* Save button styling */
.vrd_services_save {
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Page title & desc when on standalone page */
.vrd_account_services_title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #212121;
    margin-bottom: 6px !important;
    border: none !important;
    padding-bottom: 0 !important;
}

body[data-theme="dark"] .vrd_account_services_title {
    color: #eee;
}

.vrd_account_services_desc {
    font-size: 14px !important;
    color: #888 !important;
    margin-bottom: 24px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTIFICATIONS TAB — Notification Preferences
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Standalone page card (not inside UM tab) */
.vrd_account_content > .vrd_account_notifications_page {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
    max-width: none !important;
}

body[data-theme="dark"] .vrd_account_content > .vrd_account_notifications_page {
    background: var(--vrd-dark-section-background, #141920) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Section group headers — inside card */
.vrd_notif_section_title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin-top:32px;
    padding: 0;
    border: none !important;
}

.vrd_notif_section_title:first-child {
    margin-top: 4px;
}

body[data-theme="dark"] .vrd_notif_section_title {
    color: #777;
}

/* Remove stray borders inside notification card */
.vrd_account_notifications_page .vrd_notif_pref_row,
.vrd_account_notifications_page .vrd_notif_section_title,
.vrd_account_notifications_page p,
.vrd_account_notifications_page div:not(.vrd_notif_pref_slider) {
    border-bottom: none !important;
    border-top: none !important;
}

/* Notification preference rows — tighter spacing, toggle on right */
.vrd_notif_pref_row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 16px !important;
    padding: 12px 0 !important;
    border-bottom: none !important;
    margin-bottom: 8px;
}

/* Toggle — on the left */
.vrd_notif_pref_toggle_wrap {
    position: relative;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 24px;
    cursor: pointer;
    order: 1;
    flex-shrink: 0;
}

/* Text block — on the right */
.vrd_notif_pref_text {
    flex: 1;
    min-width: 0;
    order: 2;
}

.vrd_notif_pref_input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.vrd_notif_pref_title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333;
    line-height: 1.4 !important;
}

body[data-theme="dark"] .vrd_notif_pref_title {
    color: #ddd;
}

.vrd_notif_pref_desc {
    font-size: 14px !important;
    color: #999 !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
}

/* Toggle switch */
.vrd_notif_pref_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--vrd-light-dialog-inputs-border-color);
    border-radius: 24px;
    transition: background-color 0.2s;
}

.dark-schema .vrd_notif_pref_slider {
    background-color: var(--vrd-dark-dialog-inputs-border-color);
}

.vrd_notif_pref_slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.vrd_notif_pref_input:checked + .vrd_notif_pref_slider {
    background-color: #DB3575 !important;
}

.vrd_notif_pref_input:checked + .vrd_notif_pref_slider::before {
    transform: translateX(20px);
}

/* Enable/Disable All buttons — top right of tab card, next to heading */
.um-account-tab-notifications-preferences {
    position: relative;
}

.vrd_notif_master_actions {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    gap: 8px;
}

.vrd_notif_master_actions a.vrd_button {
    font-size: 13px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    color: #666 !important;
    background: none !important;
    border-top: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    margin: 0 !important;
    line-height: 1.8 !important;
}

.vrd_notif_master_actions a.vrd_button:hover {
    background: rgba(219, 53, 117, 0.06) !important;
    border-color: #DB3575 !important;
    color: #DB3575 !important;
}

body[data-theme="dark"] .vrd_notif_master_actions a.vrd_button {
    color: #999 !important;
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .vrd_notif_master_actions a.vrd_button:hover {
    background: rgba(219, 53, 117, 0.1) !important;
    color: #DB3575 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE NAV (UM's accordion nav for small screens)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.um-account-nav a {
    border-radius: 8px !important;
    border-bottom: none !important;
    padding: 10px 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    margin-bottom: 2px;
}

.um-account-nav a.current {
    background: rgba(219, 53, 117, 0.10) !important;
    color: #DB3575 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 800px) {
    .um .um-form {
        flex-direction: column;
        gap: 0;
        padding: 0 16px;
    }

    .um-account-side {
        width: 100% !important;
        min-width: 0;
        margin-bottom: 24px;
    }

    .um-account-side ul {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .um-account-side li a {
        padding: 8px 12px !important;
        font-size: 13px !important;
        gap: 6px;
    }

    .um-account-side li a span.um-account-icon {
        font-size: 14px !important;
    }

    .um-account-main {
        width: 100% !important;
    }

    .um-account-tab,
    .vrd_account_content > .vrd_account_services_page,
    .vrd_account_content > .vrd_account_notifications_page {
        padding: 20px !important;
    }

    /* Services grid — smaller tiles on mobile */
    #vrd_services_selector .vrd_refiner_option.is_icon {
        width: 64px !important;
        height: 64px !important;
    }
}

@media (max-width: 500px) {
    .um-account-side li a span.um-account-title {
        display: none !important;
    }

    .um-account-side li a span.um-account-icon {
        font-size: 18px !important;
    }

    .um-account-side li a {
        padding: 10px !important;
        justify-content: center;
    }

    #vrd_services_selector .vrd_refiner_option.is_icon {
        width: 56px !important;
        height: 56px !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STANDALONE PAGE TEMPLATES (services/notifications at /account/services etc.)
   These pages don't have UM's sidebar, so we add one via PHP partial.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.vrd_account_layout {
    display: flex;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 !important;
}

.vrd_account_sidebar {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    align-self: flex-start;
}

body[data-theme="dark"] .vrd_account_sidebar {
    background: var(--vrd-dark-section-background, #141920);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
}

.vrd_account_sidebar_nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vrd_account_sidebar_nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vrd_account_sidebar_nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.vrd_account_sidebar_nav a:hover {
    background: rgba(219, 53, 117, 0.06);
    color: #333;
}

.vrd_account_sidebar_nav a.is_active {
    background: rgba(219, 53, 117, 0.10);
    color: #DB3575;
    font-weight: 600;
}

.vrd_account_sidebar_nav a i {
    width: 20px;
    text-align: center;
    font-size: 15px;
}

body[data-theme="dark"] .vrd_account_sidebar_nav a {
    color: #aaa;
}

body[data-theme="dark"] .vrd_account_sidebar_nav a:hover {
    background: rgba(219, 53, 117, 0.08);
    color: #ddd;
}

body[data-theme="dark"] .vrd_account_sidebar_nav a.is_active {
    background: rgba(219, 53, 117, 0.15);
    color: #DB3575;
}

.vrd_account_content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 800px) {
    .vrd_account_layout {
        flex-direction: column;
        gap: 0;
        padding: 0 16px;
    }

    .vrd_account_sidebar {
        width: 100%;
        min-width: 0;
        margin-bottom: 24px;
    }

    .vrd_account_sidebar_nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .vrd_account_sidebar_nav a {
        padding: 8px 12px;
        font-size: 13px;
        gap: 6px;
    }
}

@media (max-width: 500px) {
    .vrd_account_sidebar_nav a span {
        display: none;
    }

    .vrd_account_sidebar_nav a i {
        font-size: 18px;
    }

    .vrd_account_sidebar_nav a {
        padding: 10px;
        justify-content: center;
    }
}