/**
 * Sidebar RW V2.0 (preferencia de Apariencia en Cuenta; por defecto): el mismo
 * Frontend\VerticalSidebar con sus animaciones de colapso, presentado como
 * tarjeta flotante. Vale en todas las páginas con sidebar (body.rw-sidebar-v2);
 * con "Legacy" no se aplica nada de esta hoja.
 *
 * @package RecursosWorship\Modules\ShopUI
 */

/* ==========================================================================
   Ancho y desplazamiento del contenido por la tarjeta
   ========================================================================== */

html body.rw-sidebar-v2 {
    --rw-sidebar-width: var(--rws-sidebar-w);
}

/* Solo en escritorio: por debajo de 1200 px el sidebar no existe (lo decide vertical-sidebar.css). */
@media (min-width: 1200px) {
    html body.rw-sidebar-v2.rw-has-sidebar {
        --rw-current-sidebar-width: calc(var(--rws-inset-x) + var(--rws-sidebar-w) + var(--rws-gap));
    }

    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed {
        --rw-current-sidebar-width: calc(var(--rws-inset-x) + var(--rw-sidebar-width-collapsed, 64px) + var(--rws-gap));
    }

    /* El CSS crítico coloca el header colapsado a 64 px fijos; aquí cuenta el margen de la tarjeta. */
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed .whb-main-header,
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed .whb-clone,
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed .whb-sticked .whb-main-header,
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed .whb-scroll-down .whb-main-header,
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed .whb-scroll-up .whb-main-header {
        left: var(--rw-current-sidebar-width) !important;
        width: calc(100% - var(--rw-current-sidebar-width)) !important;
    }
}

@media (max-width: 1199px) {
    html body.rw-sidebar-v2.rw-has-sidebar,
    html body.rw-sidebar-v2.rw-has-sidebar.rw-sidebar-collapsed {
        --rw-current-sidebar-width: 0px;
    }
}

/* La reserva del CSS crítico no hace falta (el sidebar va en el HTML inicial) y,
   desplazada por la barra de admin, se veía como un segundo borde encima del logo. */
html body.rw-sidebar-v2.rw-has-sidebar::before {
    display: none !important;
}

/* ==========================================================================
   Sidebar en tarjeta (mismo componente, mismas animaciones de colapso)
   ========================================================================== */

html body.rw-sidebar-v2 #rw-sidebar {
    --rw-sidebar-bg-surface: var(--rws-surface);
    --rw-sidebar-border: var(--rws-surface-line);
    --rw-sidebar-text: var(--rws-text-2);
    --rw-sidebar-text-hover: var(--rws-text);
    --rw-sidebar-icon: var(--rws-text-2);
    --rw-sidebar-icon-hover: var(--rws-text);
    --rw-sidebar-active-bg: var(--rws-hover);
    --rw-sidebar-site-name: var(--rws-text);
    --rw-sidebar-toggle-icon: #a0a5b5;
    --rw-sidebar-user-bg: transparent;
    --rw-sidebar-user-bg-hover: var(--rws-hover);
    --rw-sidebar-user-border: transparent;
    --rw-sidebar-user-menu-hover: transparent;
    --rw-sidebar-shadow: none;
    top: var(--rws-inset-top);
    left: var(--rws-inset-x);
    height: calc(100vh - var(--rws-inset-top) - var(--rws-inset-bottom));
    height: calc(100dvh - var(--rws-inset-top) - var(--rws-inset-bottom));
    border: 1px solid var(--rws-surface-line);
    border-radius: calc(41 * var(--rws-u));
    background: var(--rws-surface);
    box-shadow: none;
    font-family: var(--rws-font);
    color: var(--rws-text);
}

html body.rw-sidebar-v2.admin-bar #rw-sidebar {
    top: calc(32px + var(--rws-inset-top));
    height: calc(100vh - 32px - var(--rws-inset-top) - var(--rws-inset-bottom));
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] {
    border-radius: 32px;
}

/* El scroll de una columna del sidebar no debe asomar por las esquinas redondeadas. */
html body.rw-sidebar-v2 #rw-sidebar::-webkit-scrollbar {
    width: 0;
}

/* --- Cabecera: isotipo + marca + botón de colapsar --------------------- */

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__header {
    min-height: 0;
    padding: calc(30 * var(--rws-u)) calc(16 * var(--rws-u)) calc(10 * var(--rws-u)) calc(30 * var(--rws-u));
    border-bottom: 0;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__logo {
    gap: calc(10 * var(--rws-u));
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__logo img.rw-sidebar__logo-img {
    width: auto;
    height: calc(32 * var(--rws-u));
    max-height: none;
    max-width: none;
    flex: 0 0 auto;
}

/* Logos de la marca (texto en trazos): RW Library, RW Media y Recursos Worship.
   Claro: isotipo de color y texto negro; oscuro: todo blanco, como los SVG blancos. */
html body.rw-sidebar-v2 #rw-sidebar .rw-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    color: var(--rws-text);
    overflow: visible;
}

.rw-brand-logo {
    display: block;
    width: auto;
    height: calc(34 * var(--rws-u));
    min-height: 28px;
}

/* Recursos Worship es mucho más ancho: ocupa el hueco hasta el botón de colapsar. */
.rw-brand-logo--recursos-worship {
    width: calc(var(--rws-sidebar-w) - 2px - 86 * var(--rws-u) - 18px);
    height: auto;
    min-height: 0;
}

html[data-rw-mode="dark"] .rw-brand-logo__mark-a,
html[data-rw-mode="dark"] .rw-brand-logo__mark-b,
html:not([data-rw-mode]) body.global-color-scheme-light .rw-brand-logo__mark-a,
html:not([data-rw-mode]) body.global-color-scheme-light .rw-brand-logo__mark-b {
    fill: #ffffff;
}

/* Expandido: el logo completo ya trae su isotipo; colapsado queda solo el isotipo. */
html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-sidebar__logo:has(.rw-brand-logo-wrap) img.rw-sidebar__logo-img {
    display: none;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__toggle {
    width: calc(40 * var(--rws-u));
    height: calc(36 * var(--rws-u));
    min-height: 0;
    padding: 0;
    border-radius: 16px;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__header {
    padding: 22px 12px 12px;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__logo img.rw-sidebar__logo-img {
    height: 28px;
}

/* --- Colapsar/expandir sin reflujo ------------------------------------
   Mientras la tarjeta anima su ancho, el contenido de la versión ancha conserva
   su ancho final (el sidebar recorta lo que sobra) y los filtros entran con un
   fundido, en lugar de recolocarse fotograma a fotograma. */

@media (min-width: 1200px) {
    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-sidebar__header,
    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-shop-filters-slot,
    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-sidebar__nav,
    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-sidebar__footer {
        flex-shrink: 0;
        box-sizing: border-box;
        width: calc(var(--rws-sidebar-w) - 2px) !important;
    }

    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-sidebar__credits.rw-sidebar__credits {
        flex-shrink: 0;
        width: calc(var(--rws-sidebar-w) - 2px - 2 * var(--rws-pad)) !important;
    }

    html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="false"] .rw-shop-filters {
        animation: rws-fade-in 0.28s ease both;
    }
}

/* El tema pone un contorno punteado al botón al pulsarlo; solo con teclado. */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__toggle:focus:not(:focus-visible) {
    outline: none !important;
}

/* ==========================================================================
   Menú habitual dentro de la tarjeta
   ========================================================================== */

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__nav {
    padding: calc(12 * var(--rws-u)) calc(18 * var(--rws-u)) calc(12 * var(--rws-u));
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__nav {
    padding: 12px 8px;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__label {
    font-family: var(--rws-font);
}

/* ==========================================================================
   Descargas (tarjeta inferior)
   ========================================================================== */

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits.rw-sidebar__credits {
    position: relative !important;
    margin: auto var(--rws-pad) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: calc(26 * var(--rws-u)) !important;
    background: var(--rws-card) !important;
    transition: border-radius 0.2s ease !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits:has([aria-expanded="true"]) {
    border-radius: calc(28 * var(--rws-u)) !important;
}

html body.rw-sidebar-v2 #rw-sidebar button.rw-sidebar__credits-toggle.rw-sidebar__credits-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title label arrow"
        "title bar arrow" !important;
    align-items: center !important;
    column-gap: calc(12 * var(--rws-u)) !important;
    row-gap: 2px !important;
    width: 100% !important;
    min-height: calc(52 * var(--rws-u)) !important;
    margin: 0 !important;
    padding: calc(8 * var(--rws-u)) calc(13 * var(--rws-u)) calc(8 * var(--rws-u)) calc(16 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: var(--rws-text) !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-summary.rw-sidebar__credits-summary {
    display: contents !important;
}

.rw-sidebar__credits-title {
    grid-area: title !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: calc(7 * var(--rws-u)) !important;
    color: var(--rws-text) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.rw-sidebar__credits-title-icon {
    display: inline-flex !important;
    width: calc(16.4 * var(--rws-u)) !important;
    height: calc(11.6 * var(--rws-u)) !important;
}

.rw-sidebar__credits-title-icon svg {
    width: 100% !important;
    height: 100% !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-label.rw-sidebar__credits-label {
    grid-area: label !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rws-text-3) !important;
    font-size: max(10px, calc(10 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-arrow.rw-sidebar__credits-arrow {
    grid-area: arrow !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(19 * var(--rws-u)) !important;
    height: calc(19 * var(--rws-u)) !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--rws-circle-bg) !important;
    color: var(--rws-circle-icon) !important;
    transform: none !important;
    opacity: 1 !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-arrow.rw-sidebar__credits-arrow svg {
    width: calc(9 * var(--rws-u)) !important;
    height: calc(9 * var(--rws-u)) !important;
    transform: rotate(180deg) !important;
    transition: transform 0.25s ease !important;
}

html body.rw-sidebar-v2 #rw-sidebar button.rw-sidebar__credits-toggle[aria-expanded="true"] .rw-sidebar__credits-arrow svg {
    transform: none !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-bar.rw-sidebar__credits-bar {
    grid-area: bar !important;
    width: 100% !important;
    height: calc(11 * var(--rws-u)) !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--rws-bar-track) !important;
    overflow: hidden !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-bar-fill.rw-sidebar__credits-bar-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--rws-bar-fill) !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-details.rw-sidebar__credits-details {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-details-inner.rw-sidebar__credits-details-inner {
    padding: calc(4 * var(--rws-u)) calc(16 * var(--rws-u)) calc(16 * var(--rws-u)) calc(21 * var(--rws-u)) !important;
    border: 0 !important;
    background: transparent !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-list.rw-sidebar__credits-list {
    display: grid !important;
    gap: calc(8 * var(--rws-u)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Las filas ocultas siguen ocultas (p. ej. la nota de promocionales sin saldo)… */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row[hidden] {
    display: none !important;
}

/* …salvo la de promocionales, que la referencia muestra siempre (también en 0). */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row[data-rw-credits-promo-row][hidden] {
    display: flex !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row dt {
    margin: 0 !important;
    color: var(--rws-text-3) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row:not([data-rw-credits-promo-note]) dt::after {
    content: ":" !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row dd {
    margin: 0 !important;
    color: var(--rws-value) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-row[data-rw-credits-promo-note] dt {
    font-size: max(11px, calc(12 * var(--rws-u))) !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__credits-actions.rw-sidebar__credits-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: calc(18 * var(--rws-u)) 0 0 !important;
    padding: 0 !important;
}

html body.rw-sidebar-v2 #rw-sidebar a.rw-sidebar__credits-action--upgrade.rw-sidebar__credits-action--upgrade {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: calc(102 * var(--rws-u)) !important;
    height: calc(26 * var(--rws-u)) !important;
    padding: 0 calc(18 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--rws-upgrade) !important;
    color: #ffffff !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body.rw-sidebar-v2 #rw-sidebar a.rw-sidebar__credits-action--upgrade.rw-sidebar__credits-action--upgrade:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
}

html body.rw-sidebar-v2 #rw-sidebar a.rw-sidebar__credits-action--info.rw-sidebar__credits-action--info {
    padding: 0 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rws-underline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rws-text-3) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body.rw-sidebar-v2 #rw-sidebar a.rw-sidebar__credits-action--info.rw-sidebar__credits-action--info:hover {
    color: var(--rws-text) !important;
    background: transparent !important;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits.rw-sidebar__credits {
    margin: auto 8px 0 !important;
    border-radius: 24px !important;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] button.rw-sidebar__credits-toggle.rw-sidebar__credits-toggle {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
    justify-items: center !important;
    padding: 12px 0 !important;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-title-text,
html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-label,
html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-arrow,
html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-bar {
    display: none !important;
}

/* ==========================================================================
   Pie: usuario o línea de inicio de sesión
   ========================================================================== */

/* Pie en su sitio (no sticky): con las descargas desplegadas no las tapa. */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__footer {
    position: static !important;
    margin-top: 0 !important;
    padding: calc(18 * var(--rws-u)) var(--rws-pad) calc(16 * var(--rws-u)) !important;
    border-top: 0 !important;
    background: var(--rws-surface) !important;
    border-radius: 0 0 calc(41 * var(--rws-u)) calc(41 * var(--rws-u)) !important;
}

/* Sin tarjeta de descargas, el pie baja al fondo de la tarjeta. */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__nav + .rw-sidebar__footer {
    margin-top: auto !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-menu {
    padding: 0 !important;
}

html body.rw-sidebar-v2 #rw-sidebar button.rw-sidebar__user.rw-sidebar__user-trigger {
    gap: calc(12 * var(--rws-u)) !important;
    padding: 6px calc(6 * var(--rws-u)) 6px calc(8 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: 22px !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-main {
    gap: calc(12 * var(--rws-u)) !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-avatar {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--rws-card-line) !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-trigger,
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-trigger * {
    text-transform: none !important;
    text-align: left !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 1px !important;
}

html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-name {
    color: var(--rws-text) !important;
    font-family: var(--rws-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rw-sidebar__user-email {
    display: block !important;
    color: var(--rws-text-3) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Menú de usuario: 10 px más ancho y crece hacia la izquierda. Su animación
   (sidebar-footer.css) lo centra con translateX(-50%): se desplaza el centro
   5 px para que el borde derecho quede donde estaba. */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-panel {
    width: 230px !important;
    left: calc(50% - 5px) !important;
}

/* La referencia no muestra insignia ni flecha: el menú se abre igual al pulsar. */
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-badge,
html body.rw-sidebar-v2 #rw-sidebar .rw-sidebar__user-trigger-icon {
    display: none !important;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__footer {
    padding: 12px 0 16px !important;
    border-radius: 0 0 32px 32px !important;
}

html body.rw-sidebar-v2 #rw-sidebar[data-collapsed="true"] .rw-sidebar__user-avatar {
    width: 36px !important;
    height: 36px !important;
}

.rw-sidebar__login-line {
    margin: 0 !important;
    padding: calc(4 * var(--rws-u)) 0 calc(8 * var(--rws-u)) !important;
    color: #636363 !important;
    font-family: var(--rws-font) !important;
    font-size: max(13px, calc(15 * var(--rws-u))) !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

html[data-rw-mode="dark"] .rw-sidebar__login-line {
    color: var(--rws-text-2) !important;
}

html body.rw-sidebar-v2 .rw-sidebar__login-line-link {
    color: var(--rws-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

html body.rw-sidebar-v2 .rw-sidebar__login-line-link:hover {
    color: var(--rws-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.rw-sidebar__login-line-icon {
    display: none !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-text,
#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-label {
    display: none !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    border: 1px solid var(--rws-card-line) !important;
    border-radius: 50% !important;
    background: var(--rws-card) !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-icon svg {
    width: 18px !important;
    height: 18px !important;
}