html, body {
    font-family: 'Roboto', Arial, sans-serif;
    background: white;
}

html {
    font-size: 15px;
}

/* Admin dropdown — full-width clickable rows.
   Defined globally (not scoped) so it applies to NavLink-rendered anchors. */
#admDrop .navbar-dropdown-container li {
    list-style: none;
    display: block;
}

#admDrop .navbar-dropdown-container li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: #1a1a1a;
    cursor: pointer;
}

#admDrop .navbar-dropdown-container li a:hover {
    background-color: #f7f7f7;
}

#admDrop .navbar-dropdown-container li a:active,
#admDrop .navbar-dropdown-container li a:focus {
    background-color: transparent;
    outline: none;
}

/* Suppress browser-native password reveal button (Edge/IE) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

body {
    background: #fefefe;
    height: 100vh;
}

a, .btn-link {
    color: #006bb7;
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50820;
}

.validation-message {
    color: #e50820;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.upload-element {
    /*    max-width: 80px;*/
}

/* Blazor reconnect modal — state-driven display.
   Blazor toggles the wrapper's class between .components-reconnect-hide / -show /
   -failed / -rejected. Only the child div matching the current state becomes visible;
   the inner Bootstrap-modal markup in App.razor handles the rest (backdrop, card,
   buttons, icons). */
.my-reconnect-modal > div {
    display: none;
}

/* Transient-disconnect guard: `show` and `failed` fade in after a 1s delay. Full-page
   navigations (e.g. clicking Cont → /Account/Manage) briefly drop the circuit, which
   would otherwise flash the dark backdrop + spinner on every navigation. The delay
   means the modal only becomes visible for genuine outages lasting more than a second.
   `rejected` is NOT delayed because that state only fires when the server has
   explicitly declared the circuit dead — the user needs to see it immediately. */
.components-reconnect-show > .show,
.components-reconnect-failed > .failed {
    display: block;
    animation: reconnect-appear 200ms ease-out 1s both;
}

.components-reconnect-rejected > .rejected {
    display: block;
}

@keyframes reconnect-appear {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; visibility: visible; }
}

/* Page-level loading overlay — used by pages that fetch heavy data in OnInitializedAsync
   (Account/Manage/Index.razor, Administrare/CreateEditUser.razor, ...). Two design goals:
    1. Soft white fog instead of harsh black 70% — less visually disruptive, keeps the
       pre-rendered page shell faintly visible through the fog.
    2. 400ms appear-delay — fast loads (the common case) complete before the overlay
       ever becomes visible, so the user sees an instant transition. Slow loads get a
       gentle 250ms fade-in. */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: page-loading-appear 250ms ease-out 400ms both;
}

    .page-loading-overlay .spinner-border {
        color: #2563eb;
        width: 3rem;
        height: 3rem;
    }

    .page-loading-overlay .page-loading-overlay-text {
        margin-top: 1rem;
        font-size: 1.1rem;
        color: #1a1a1a;
        font-weight: 500;
    }

@keyframes page-loading-appear {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; visibility: visible; }
}

.lista button {
    padding: 5px;
    color: #fff;
}

    .lista button img {
        width: 12px;
        height: 12px;
    }

.administrator {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .administrator h3 {
        font-size: 24px;
    }

    .administrator button {
        padding: 5px 10px;
        font-size: 14px;
    }

.administrator-data {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 15px;
    border-radius: 10px;
}

.administrator-head h4 {
    font-size: 22px;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.administrator-data table thead tr {
    background: #ededed;
}

.administrator-data table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.administrator-data table {
    width: 100%;
}

    .administrator-data table tr th,
    .administrator-data table tr td {
        font-size: 14px;
        padding: 10px 5px !important;
    }

        .administrator-data table tr td button {
            background: transparent;
            border: none;
        }

        .administrator-data table tr td .delete {
            color: red;
        }

        .administrator-data table tr td .edit {
            color: #085eb9;
        }

[b-5wuud7risv] thead {
    position: sticky;
    top: -20px;
    background-color: #eee;
}

.grid[b-5wuud7risv] {
    height: unset !important;
    max-height: 80vh;
}

/*Inregister*/
.form-floating {
    position: relative;
}

.form-control {
    padding-right: 3rem;
}

.eye-icon {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    font-size: 1.2rem;
    color: #000;
    right: 0.5rem;
    top: 31px;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0;
    margin: 0;
}

/*AdmClienti-Search*/
/* ATENTIE — abatere fata de app.css-ul din wikidoc (fisier oglinda, CONVENTII §9).
   Acolo regula asta adauga `justify-content: space-between` si `align-items: center` peste utilitarul Bootstrap
   `.d-flex`. Numele comentariului spune ca era gandita pentru O bara de cautare, dar selectorul prinde ORICE `.d-flex`
   din aplicatie — 145 de locuri doar in RESUMAN. Efectele vizibile: intr-un `d-flex flex-column` copiii nu se mai
   intind pe latime (ies dimensionati dupa continut si centrati), iar intr-un rand copiii sunt impinsi la capete.
   Paginile RESUMAN sunt porturi 1:1 dupa aplicatia veche si folosesc `d-flex` cu intelesul din Bootstrap, deci aici
   utilitarul ramane doar `display: flex`. Cine are nevoie de celelalte doua le cere explicit, cu
   `justify-content-between` / `align-items-center`. */
.d-flex {
    display: flex;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.form-label {
    margin: 0;
    white-space: nowrap;
}

.form-control {
    flex: 1;
}


.selected-module {
    border: 1px solid #1b6ec2 !important;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb !important;
}

.no-drop {
    cursor: not-allowed !important;
}

/* Style the module cards */
.module {
    background-color: #ffffff;
    border: 2px solid transparent; /* Make border transparent by default */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    width: 300px; /* Set a fixed width for the cards */
}

    /* Style for the labels and custom checkbox */
    .module label {
        margin-left: 10px;
        font-size: 18px;
        color: #333;
        cursor: pointer;
    }

/* Style for the total and button container */
.col-md-4 {
    margin-bottom: 20px;
}

/* Style the button */
.btn-finalizeaza {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn-finalizeaza:hover {
        background-color: #0056b3;
    }

hr {
    margin: 20px 0;
}

/* Update selected module style */
.module.selected {
    border-color: #198754; /* Green border for selected module */
}

.fake-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fafafa;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

/* Using the .selected class from the parent div to change the appearance */
.module.selected .fake-checkbox {
    background-color: #007bff; /* Background color for checked state */
}

    .module.selected .fake-checkbox::before {
        content: '';
        width: 12px;
        height: 12px;
        clip-path: polygon(14% 44%, 0% 44%, 50% 100%, 100% 0%, 44% 0%);
        background-color: #007bff; /* Change this color if you need */
        display: block;
    }

.subscription-box {
    padding: 60px 30px;
    background: #EFF0FF;
    border-radius: 10px;
    border-top: 15px solid #565ADE;
    text-align: center;
    color: #2C1C51;
    transition: all 0.5s ease;
}

    .subscription-box.default-highlighted {
        background: #fff;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .subscription-box.hovered {
        background: #fff;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .subscription-box:hover {
        background: #fff;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .subscription-box h3 {
        font-weight: 500;
        text-transform: capitalize;
        margin-bottom: 20px;
    }

    .subscription-box p {
        font-size: 13px !important;
        font-weight: 400;
    }

        .subscription-box p span {
            font-weight: 600;
        }

    .subscription-box h1 sub {
        font-size: 16px;
    }

.btn-subscription {
    background: linear-gradient(176deg, rgba(86, 90, 222, 1) 0%, rgba(144, 148, 255, 1) 100%);
    padding: 10px 30px;
    border-radius: 50px;
    border: none;
    color: #fff;
    border: 1px solid #565ADE;
    font-size: 17px;
}

    .btn-subscription:hover {
        border: 1px solid #565ADE;
        background: transparent;
        color: #000;
    }

    .btn-subscription:focus {
        box-shadow: none !important;
        outline: none;
    }

@media only screen and (max-width:1199px) {
    .subscription-box {
        padding: 20px;
    }

        .subscription-box h1 {
            font-size: 26px;
        }
}

.subscription-box-container {
    display: flex;
    gap: 15px;
}

    .subscription-box-container .subscription-box {
        flex: 1;
    }

.renewal-link {
    margin-left: 5px;
    color: #007bff;
    text-decoration: underline;
}
/*.status-active:active {
   color: green;
}
.status-active tr td{
    color: orangered;
}*/

.status-active {
    color: green;
}

.status-notexpired {
    color: green;
}

.status-expired {
    color: red;
}

/* ===== Tier Badges ===== */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    white-space: nowrap;
    text-transform: uppercase;
    border: 1.5px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tier-badge:hover {
    transform: translateY(-1px);
}

/* FREE — verde smarald */
.bg-free {
    background: linear-gradient(135deg, #00b09b, #0F9D58);
    color: #fff;
    border-color: rgba(15, 157, 88, 0.4);
    box-shadow: 0 3px 10px rgba(15, 157, 88, 0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* SILVER — metalic cu text închis pentru contrast */
.bg-silver {
    background: linear-gradient(135deg, #c8d6df, #a0aab4, #dce3e8);
    color: #1a1a2e;
    border-color: rgba(160, 170, 180, 0.6);
    box-shadow: 0 3px 10px rgba(140, 150, 160, 0.4);
}

/* GOLD — auriu bogat cu text închis pentru contrast */
.bg-gold {
    background: linear-gradient(135deg, #f9c200, #e67e00, #f9c200);
    color: #3d1f00;
    border-color: rgba(230, 126, 0, 0.5);
    box-shadow: 0 3px 12px rgba(249, 194, 0, 0.5);
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* PLATINUM — premium indigo/deep blue */
.bg-platinum {
    background: linear-gradient(135deg, #1a1a6e, #2d6bdd, #0f3460);
    color: #e8eeff;
    border-color: rgba(45, 107, 221, 0.5);
    box-shadow: 0 3px 14px rgba(45, 107, 221, 0.5);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* MULTIUSER — indigo/violet, un nivel sub Admin */
.bg-multiuser {
    background: linear-gradient(135deg, #3730a3, #4f46e5, #6366f1);
    color: #fff;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 3px 14px rgba(79, 70, 229, 0.5), 0 0 0 2px rgba(99,102,241,0.15);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-size: 13px;
}

.bg-multiuser:hover {
    box-shadow: 0 5px 18px rgba(79, 70, 229, 0.6), 0 0 0 3px rgba(99,102,241,0.2);
}

/* ADMIN — roșu crimson spectaculos */
.bg-admin {
    background: linear-gradient(135deg, #8b0000, #c0392b, #e74c3c);
    color: #fff;
    border-color: rgba(231, 76, 60, 0.6);
    box-shadow: 0 3px 14px rgba(192, 57, 43, 0.6), 0 0 0 2px rgba(231,76,60,0.15);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    font-size: 13px;
}

.bg-admin:hover {
    box-shadow: 0 5px 18px rgba(192, 57, 43, 0.7), 0 0 0 3px rgba(231,76,60,0.2);
}

    .bg-free a, .bg-silver a, .bg-gold a, .bg-platinum a, .bg-multiuser a, .bg-admin a {
        color: inherit !important;
    }

.quickgrid[theme=default] > tbody > tr > td {
    padding: 10px !important;
}


/*.btn:focus {
    box-shadow: none !important;
    border: none !important;
}*/

.back-button {
    background: #565ADE;
    padding: 10px 15px;
}

    .back-button:hover {
        background: #565ADE;
        /*padding: 10px 15px;*/
    }

/* Plan Expiry Date CSS */
.validation-messages {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

    .validation-messages li {
        text-align: left; /* Ensure text is aligned to the left */
        margin-bottom: 0.5rem; /* Add some space between messages */
    }

.link-button {
    /* Basic styles for the link button */
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

    .link-button[aria-disabled="true"] {
        pointer-events: none;
        opacity: 0.5;
    }

.disabled-link {
    color: #6c757d; /* Grey color to indicate disabled state */
    cursor: not-allowed; /* Changes the cursor to indicate disabled state */
    pointer-events: none; /* Disables all mouse events */
    text-decoration: none; /* Removes underline to indicate disabled state */
    opacity: 0.65; /* Makes the link appear faded */
}

.usersubscription-modal-label {
    width: 30%;
}

.expiry-date-w {
    width: 23%;
}

.form-group label {
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
}

.main-content-container {
    /*    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 92vh;*/
}

.content h3 {
    font-size: 32px;
    margin-bottom: 20px;
}


.main-content {
    height: 92vh;
    align-content: center;
    justify-content: center;
    hr

{
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

}

.subscription-tab {
    color: #fff;
}

.nav-pills .subscription-tab .nav-link.active, .nav-pills .show > .subscription-tab .nav-link {
    background: #565ADE !important;
    color: #fff !important;
}

.nav-pills .subscription-tab .nav-link {
    width: 250px;
    height: 95px;
    font-size: x-large;
    font-weight: bold;
    line-height: 65px;
}

.nav-link i {
    font-size: 22px;
}

.subscription-tab .nav-link {
    color: #565ADE !important;
    text-transform: uppercase;
}

.tab-pane {
    color: #b5b5b5;
}

.tab-border {
    margin-right: 30px;
    border: 1px solid #565ADE;
    border-radius: 10px;
    background-color: transparent;
    margin-top: 10px;
}

.description {
    white-space: pre-line;
}
/*create user edit*/
/* ATENTIE — a doua abatere fata de app.css-ul din wikidoc (fisier oglinda, CONVENTII §9), din acelasi motiv ca la
   `.d-flex` de mai sus. Regula facea ALBE iconitele si textele din ORICE buton. Pe butoanele pline (btn-primary etc.)
   e inutila: Bootstrap pune deja `color:#fff` pe buton, iar copiii mostenesc. Pe butoanele deschise — `btn-link`,
   `btn-outline-*` pe fundal alb — le facea invizibile: asa au disparut etichetele antetelor de tabel si sagetile de
   navigare pe luna din grila de pontaj. Iconitele cu `text-primary`/`text-muted` scapau doar fiindca utilitarele
   Bootstrap sunt `!important`, ceea ce facea defectul si mai greu de vazut.
   Culoarea copiilor se mosteneste acum de la buton, cum face Bootstrap. Cine chiar vrea alb o cere cu `text-white`. */

/* Container for the grid layout */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjust the column width */
    gap: 20px; /* Space between grid items */
    margin-bottom: 30px;
}

/* Style the module cards */
.module {
    background-color: #ffffff;
    border: 2px solid transparent; /* Make border transparent by default */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
    display: flex;
    align-items: center;
    transition: border-color 0.3s ease;
}

    /* Style for the labels and custom checkbox */
    .module label {
        margin-left: 10px;
        font-size: 18px;
        color: #333;
        cursor: pointer;
    }

/* Style the button */
button[type="submit"] {
    background-color: #4385f5;
    border: none;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button[type="submit"]:hover {
        background-color: #0056b3;
    }

hr {
    margin: 20px 0;
}

/* Update selected module style */
.module.selected {
    border-color: #198754; /* Green border for selected module */
}

.fake-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fafafa;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: grid;
    place-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Using the .selected class from the parent div to change the appearance */
.module.selected .fake-checkbox {
    background-color: #007bff; /* Background color for checked state */
    border-color: #007bff; /* Border color for checked state */
}

    .module.selected .fake-checkbox::before {
        content: '';
        width: 12px;
        height: 12px;
        clip-path: polygon(14% 44%, 0% 44%, 50% 100%, 100% 0%, 44% 0%);
        background-color: #007bff; /* Change this color if you need */
        display: block;
    }

.img-fluid-user {
    height: 20%;
    width: 33%;
}

button {
    padding: 8px !important;
}

.selected-button {
    border: 1px solid #1b6ec2;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


table tbody tr {
    vertical-align: middle;
}

.subscription-info i {
    right: 5px;
    position: relative;
}

.domeni-p {
    color: #686868;
    font-weight: 500;
    margin-bottom: 0;
    text-wrap: wrap;
}

hr {
    margin-top: 5px;
}

#numeDocument {
    height: 38px;
}

@media screen and (max-width:768px) {
    .content h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .main-content {
        flex-shrink width: 100% !important;
    }
}

/* =============================================================== */
/* Subscription / Upgrade / ActivateSubscription — shared visuals  */
/* Mirror of Subscription.razor <style> block, usable on any page  */
/* =============================================================== */

.sub-page {
    min-height: 100vh;
    padding-bottom: 4rem;
}

.sub-title {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #1e3a5f;
    font-weight: 700;
    font-size: 1.6rem;
}

.sub-subtitle {
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
    max-width: 720px;
    margin: 0 auto 16px;
}

.sub-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.tier-col {
    flex-shrink: 0;
    width: 264px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 90px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 22px;
    padding: 16px 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}

.tier-col-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    margin-bottom: 6px;
    padding-left: 4px;
}

.tier-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    width: 100%;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.tier-btn:not(.tier-btn--active) {
    opacity: 0.36;
    filter: saturate(0.55);
}
.tier-btn:not(.tier-btn--active):hover {
    opacity: 0.65;
    filter: saturate(0.8);
    transform: translateX(2px);
}

.tier-btn--active {
    transform: translateX(4px);
    outline: 2.5px solid rgba(255,255,255,0.88);
    outline-offset: 3px;
    opacity: 1;
    filter: none;
}

.tier-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tier-btn-text { flex: 1; }
.tier-btn-name { font-size: 0.97rem; font-weight: 700; line-height: 1.2; }
.tier-btn-hint { font-size: 0.7rem; opacity: 0.82; margin-top: 1px; font-weight: 400; }

.tier-btn-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    border: 1.5px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tier-btn--free    { background: #16a34a; }
.tier-btn--free.tier-btn--active { background: #15803d; box-shadow: 0 6px 22px rgba(22,163,74,0.5); }

.tier-btn--silver  { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.tier-btn--silver.tier-btn--active { background: linear-gradient(135deg, #374151, #6b7280); box-shadow: 0 6px 22px rgba(107,114,128,0.5); }

.tier-btn--gold    { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tier-btn--gold.tier-btn--active { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 6px 22px rgba(245,158,11,0.55); }

.tier-btn--platinum { background: linear-gradient(135deg, #1e3a5f, #1e40af); }
.tier-btn--platinum.tier-btn--active { background: linear-gradient(135deg, #0f172a, #1e3a5f); box-shadow: 0 6px 22px rgba(30,58,95,0.55); }

.plans-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
}

.plan-card {
    flex: 1;
    min-width: 240px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.plan-card:hover:not(.plan-card--selected) {
    border-color: #93c5fd;
    box-shadow: 0 4px 20px rgba(59,130,246,0.1);
    transform: translateY(-2px);
}

.plan-card--selected {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.15), 0 6px 24px rgba(22,163,74,0.12);
    transform: translateY(-2px);
}

.plan-card-header {
    height: 86px;
    position: relative;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    flex-shrink: 0;
    clip-path: inset(0 round 14px 14px 0 0);
}

.plan-card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.plan-card-header--free {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
.plan-card-header--free::before {
    background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}

.plan-card-header--silver {
    background: linear-gradient(135deg, #8b9cb3 0%, #475569 100%);
}
.plan-card-header--silver::before {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 9px);
    background-size: 9px 9px;
}

.plan-card-header--gold {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}
.plan-card-header--gold::before {
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 14px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 14px),
        repeating-linear-gradient(0deg,   rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px);
    background-size: 14px 24px;
}

.plan-card-header--platinum {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #312e81 100%);
}
.plan-card-header--platinum::before {
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(147,197,253,0.28) 0%, transparent 60%),
        radial-gradient(circle at 10% 28%, rgba(255,255,255,0.75) 0.6px, transparent 0.6px),
        radial-gradient(circle at 25% 72%, rgba(255,255,255,0.5)  0.8px, transparent 0.8px),
        radial-gradient(circle at 42% 18%, rgba(255,255,255,0.8)  0.5px, transparent 0.5px),
        radial-gradient(circle at 58% 80%, rgba(255,255,255,0.55) 0.7px, transparent 0.7px),
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.7)  0.5px, transparent 0.5px),
        radial-gradient(circle at 83% 65%, rgba(255,255,255,0.45) 0.9px, transparent 0.9px),
        radial-gradient(circle at 91% 15%, rgba(255,255,255,0.65) 0.6px, transparent 0.6px),
        radial-gradient(circle at 35% 50%, rgba(196,181,253,0.5)  1px,   transparent 1px),
        radial-gradient(circle at 76% 50%, rgba(147,197,253,0.4)  0.8px, transparent 0.8px),
        radial-gradient(circle at 18% 88%, rgba(255,255,255,0.4)  0.6px, transparent 0.6px),
        repeating-linear-gradient(45deg,  rgba(139,92,246,0.16) 0px, rgba(139,92,246,0.16) 1px, transparent 1px, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(139,92,246,0.16) 0px, rgba(139,92,246,0.16) 1px, transparent 1px, transparent 18px);
    background-size:
        100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        18px 18px, 18px 18px;
}
.plan-card-header--platinum::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 82% 15%, rgba(196,181,253,0.35) 0%, rgba(147,197,253,0.18) 30%, transparent 62%);
    pointer-events: none;
}

.plan-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 16px 5px 12px;
    border-radius: 20px;
    box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(180,83,9,0.45);
    z-index: 3;
    pointer-events: none;
}

.plan-select-ring {
    position: absolute;
    top: 10px; right: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}

.plan-card--selected .plan-select-ring {
    border-color: #fff;
    background: #16a34a;
    color: #fff;
}

.plan-card-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

.plan-name {
    font-weight: 700;
    color: #1e3a5f;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.plan-card-desc {
    color: #6b7280;
    font-size: 0.83rem;
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}

.plan-pricing { margin-bottom: 0; }

.plan-price-main {
    font-size: 2rem;
    font-weight: 800;
    color: #1e3a5f;
    line-height: 1;
}

.plan-period-label {
    font-size: 0.95rem;
    color: #6b7280;
    margin-left: 2px;
}

.plan-monthly-equiv {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 3px;
}

.plan-vat-note {
    font-size: 0.73rem;
    color: #d1d5db;
    margin-top: 2px;
}

.plan-feats {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    align-self: stretch;
}
.plan-feats li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.45;
    text-align: left;
}
.plan-feats li .pf-icon { flex-shrink: 0; margin-top: 1px; color: #16a34a; }

.plan-disc-box {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.78rem;
    color: #166534;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin-top: auto;
    align-self: stretch;
}
.plan-disc-box--none { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; font-weight: 400; }

.contract-section {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.contract-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contract-header-title {
    font-weight: 700;
    color: #1e3a5f;
    font-size: 0.95rem;
}

.contract-body {
    height: 260px;
    overflow-y: auto;
    padding: 18px 22px;
    font-size: 0.84rem;
    color: #374151;
    line-height: 1.7;
}

.contract-body::-webkit-scrollbar { width: 6px; }
.contract-body::-webkit-scrollbar-track { background: #f3f4f6; }
.contract-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }

.contract-body h6 {
    font-weight: 700;
    color: #1e3a5f;
    margin: 16px 0 6px;
    font-size: 0.88rem;
}

.contract-body h6:first-child { margin-top: 0; }

.contract-footer {
    border-top: 1px solid #e5e7eb;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.contract-agree-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: #374151;
    font-weight: 500;
    flex: 1;
}

.contract-agree-label input[type=checkbox] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #16a34a;
    flex-shrink: 0;
}

.btn-subscribe-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
    white-space: nowrap;
}

.btn-subscribe-main:not(:disabled):hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(22,163,74,0.35);
}

.btn-subscribe-main:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.sub-error-msg {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    color: #991b1b;
    padding: 12px 20px;
    font-size: 0.88rem;
}

.no-plan-hint {
    background: #fffbeb;
    border: 1.5px dashed #fcd34d;
    border-radius: 12px;
    padding: 18px 22px;
    text-align: center;
    color: #92400e;
    font-size: 0.88rem;
}

/* Prorata highlight box used on the Upgrade page */
.plan-prorata-box {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: #1e3a5f;
    text-align: center;
}
.plan-prorata-box strong { font-size: 1.05rem; color: #1d4ed8; }

@media (max-width: 860px) {
    .sub-layout { flex-direction: column; }
    .tier-col { width: 100%; position: static; }
    .tier-btn { transform: none !important; outline-offset: 2px; }
    .tier-btn--active { transform: none !important; }
}

@media (max-width: 540px) {
    .contract-footer { flex-direction: column; align-items: stretch; }
    .btn-subscribe-main { justify-content: center; }
}
.setdoc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.setdoc-modal {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.setdoc-modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setdoc-modal-header h5 {
    margin: 0;
    color: #5b21b6;
    font-weight: 700;
    font-size: 17px;
}

.setdoc-close-btn {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.setdoc-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1f2937;
}

.setdoc-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.setdoc-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f9fafb;
}

.setdoc-name-row {
    margin-bottom: 14px;
}

.setdoc-name-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.setdoc-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.setdoc-search-wrap {
    position: relative;
    flex: 1 1 auto;
}

.setdoc-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
}

.setdoc-search-input {
    padding-left: 36px !important;
    padding-right: 36px !important;
}

.setdoc-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
}
.setdoc-search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
}

.setdoc-counter {
    flex: 0 0 auto;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}

.setdoc-counter-num {
    font-weight: 700;
    color: #5b21b6;
    font-size: 16px;
    margin-right: 4px;
}

.setdoc-doc-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    max-height: 50vh;
    min-height: 240px;
    overflow-y: auto;
    background: #ffffff;
}

.setdoc-doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.1s;
}

.setdoc-doc-row:last-child {
    border-bottom: 0;
}

.setdoc-doc-row:hover {
    background: #f9fafb;
}

.setdoc-doc-row-selected {
    background: #ecfdf5;
}

.setdoc-doc-row-selected:hover {
    background: #d1fae5;
}

.setdoc-doc-check {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #d1d5db;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    flex: 0 0 auto;
    transition: background-color 0.1s, border-color 0.1s;
}

.setdoc-doc-row-selected .setdoc-doc-check {
    background: #10b981;
    border-color: #10b981;
}

.setdoc-doc-info {
    flex: 1 1 auto;
    min-width: 0;
}

.setdoc-doc-name {
    color: #1f2937;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setdoc-doc-meta {
    color: #6b7280;
    font-size: 12px;
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.setdoc-loading,
.setdoc-empty {
    padding: 24px;
    text-align: center;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.setdoc-modal-small {
    max-width: 460px;
}

.setdoc-modal-header-danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.setdoc-modal-header-danger h5 {
    color: #991b1b;
}

/* ============================================================================
   Chatbot AI disclaimer (§4.21). In app.css (not ChatbotLauncher.razor.css) for
   the same deploy-reliability reason as the review styles below — the scoped
   rule missed the published bundle and rendered black/full-size on prod.
   Rendered as a separated footer band under the chat input (NOT a chat message).
   ============================================================================ */
.chatbot-disclaimer {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 16px 7px;
    font-size: 10px;
    line-height: 1.25;
    color: #9aa5bb;                 /* muted grey — must not compete with input text */
    text-align: center;
    background: #f7f8fa;            /* faint band so it reads as chrome */
    border-top: 1px solid #eceff3;  /* hairline separator from the input */
}

/* ============================================================================
   Document-grid column resizing (Home.razor). While a column-resize drag is in
   progress, window.wikidocResize toggles body.wd-col-resizing — force the
   resize cursor everywhere and suppress text selection. Lives here (global)
   because Blazor scoped CSS can't target <body>.
   ============================================================================ */
body.wd-col-resizing,
body.wd-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ============================================================================
   Review / feedback system styles (§4.25). Moved here from per-component
   .razor.css files because Blazor CSS isolation didn't consistently load the
   bundled wikidocweb.styles.css for new components after publish (cache /
   bundling edge cases). app.css is referenced directly in App.razor and
   always loads on first paint, so styles here are deploy-safe.

   Class-name conventions:
   - .feedback-*       → public /Feedback page
   - .review-wizard-*  → in-app wizard inside the chatbot panel
   - .review-popup-*   → Clippy-style speech bubble next to the launcher
   - .review-list-*    → admin reader tabs + filters on /Administrare/TrimitereEmail
   - .review-card-*    → individual review card in the admin list

   Star/scale/pill inputs are shared visual patterns intentionally duplicated
   across the wizard and the public form because the surrounding component
   widths differ (420px panel vs 760px page) and tuning each pair independently
   is easier than maintaining a single shared widget.
   ============================================================================ */

/* -- Public /Feedback page ----------------------------------------------- */

.feedback-page {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px;
    color: #1f2937;
}

.feedback-header {
    text-align: center;
    margin-bottom: 32px;
}

.feedback-logo {
    max-height: 56px;
    margin-bottom: 14px;
}

.feedback-header h1 {
    font-size: 26px;
    color: #1f2937;
    margin: 0 0 10px;
    font-weight: 700;
}

.feedback-subtitle {
    color: #4b5563;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}

.feedback-form {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.feedback-honeypot {
    /* Bot trap. NOT display:none — bots check for that. Off-screen via absolute. */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.feedback-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 24px;
}

.feedback-fieldset legend {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    padding: 0;
    margin: 0 0 12px;
    width: 100%;
    border-bottom: 1px solid #e6e9ef;
    padding-bottom: 6px;
}

.feedback-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

@media (max-width: 560px) {
    .feedback-row {
        grid-template-columns: 1fr;
    }
}

.feedback-form label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.feedback-required {
    color: #dc2626;
    margin-left: 2px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form input[type="tel"],
.feedback-form textarea,
.feedback-text-input,
.feedback-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.feedback-form textarea {
    resize: vertical;
    min-height: 100px;
}

.feedback-stars-label {
    margin-bottom: 8px;
}

.feedback-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.feedback-star {
    background: transparent;
    border: none;
    font-size: 44px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.12s ease, transform 0.08s ease;
}

.feedback-star:hover {
    transform: scale(1.1);
}

.feedback-star.active {
    color: #fbbf24;
}

.feedback-question {
    margin-bottom: 14px;
}

.feedback-textarea-label {
    margin-top: 14px;
}

.feedback-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.feedback-pill {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.12s ease;
}

.feedback-pill:hover {
    border-color: #4285f4;
    color: #4285f4;
}

.feedback-pill.active {
    background: #4285f4;
    border-color: #4285f4;
    color: #ffffff;
}

.feedback-scale {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.feedback-scale-btn {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.feedback-scale-btn:hover {
    border-color: #4285f4;
    color: #4285f4;
}

.feedback-scale-btn.active {
    background: #4285f4;
    border-color: #4285f4;
    color: #ffffff;
}

.feedback-accordion {
    margin-top: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e6e9ef;
}

.feedback-accordion > summary {
    cursor: pointer;
    color: #374151;
    list-style: none;
    user-select: none;
    padding: 4px 0;
}

.feedback-accordion > summary::-webkit-details-marker {
    display: none;
}

.feedback-accordion > summary::before {
    content: "▸";
    color: #4285f4;
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
}

.feedback-accordion[open] > summary::before {
    transform: rotate(90deg);
}

.feedback-accordion-hint {
    color: #6b7280;
    font-weight: 400;
    font-size: 13px;
}

.feedback-accordion-body {
    padding-top: 14px;
    border-top: 1px dashed #e6e9ef;
    margin-top: 12px;
}

.feedback-category {
    font-size: 13px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 18px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e6e9ef;
}

.feedback-category:first-child {
    margin-top: 0;
}

.feedback-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 16px 0 8px;
    font-size: 13.5px;
}

.feedback-submit {
    margin-top: 24px;
    text-align: center;
}

.feedback-thanks {
    background: #ffffff;
    border-radius: 12px;
    padding: 48px 28px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.feedback-thanks-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
}

.feedback-thanks h2 {
    margin: 0 0 8px;
    color: #1f2937;
    font-size: 22px;
}

.feedback-thanks p {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14.5px;
}

/* -- In-app review wizard (inside chatbot panel) ------------------------- */

.review-wizard {
    padding: 18px 16px 24px;
    font-size: 14px;
    color: #1f2937;
}

.review-wizard-header {
    text-align: center;
    margin-bottom: 18px;
}

.review-wizard-header h3 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #1f2937;
}

.review-wizard-header p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.review-wizard-section {
    margin-bottom: 16px;
}

.review-wizard-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #374151;
    font-size: 13.5px;
}

.review-required {
    color: #dc2626;
    margin-left: 2px;
}

.review-stars {
    display: flex;
    gap: 4px;
}

.review-star {
    background: transparent;
    border: none;
    font-size: 38px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.12s ease, transform 0.08s ease;
}

.review-star:hover {
    transform: scale(1.1);
}

.review-star.active {
    color: #fbbf24;
}

.review-star:disabled {
    cursor: not-allowed;
}

.review-wizard-input,
.review-wizard-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.review-wizard-input:focus,
.review-wizard-textarea:focus {
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.review-wizard-textarea {
    resize: vertical;
    min-height: 70px;
}

.review-wizard-radio-group,
.review-wizard-multi-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.review-wizard-pill {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    transition: all 0.12s ease;
}

.review-wizard-pill:hover {
    border-color: #4285f4;
    color: #4285f4;
}

.review-wizard-pill.active {
    background: #4285f4;
    border-color: #4285f4;
    color: #ffffff;
}

.review-wizard-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.review-wizard-scale {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.review-wizard-scale-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.review-wizard-scale-btn:hover {
    border-color: #4285f4;
    color: #4285f4;
}

.review-wizard-scale-btn.active {
    background: #4285f4;
    border-color: #4285f4;
    color: #ffffff;
}

.review-wizard-scale-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.review-wizard-accordion {
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e6e9ef;
}

.review-wizard-accordion > summary {
    cursor: pointer;
    font-size: 13.5px;
    color: #374151;
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

.review-wizard-accordion > summary::-webkit-details-marker {
    display: none;
}

.review-wizard-accordion > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
    color: #4285f4;
}

.review-wizard-accordion[open] > summary::before {
    transform: rotate(90deg);
}

.review-wizard-accordion-hint {
    color: #6b7280;
    font-weight: 400;
    font-size: 12.5px;
}

.review-wizard-accordion-body {
    padding-top: 12px;
    border-top: 1px dashed #e6e9ef;
    margin-top: 10px;
}

.review-wizard-category {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e6e9ef;
}

.review-wizard-category:first-child {
    margin-top: 0;
}

.review-wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e6e9ef;
}

.review-wizard-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 13px;
}

.review-wizard-thanks {
    text-align: center;
    padding: 40px 16px;
}

.review-wizard-thanks-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
}

.review-wizard-thanks h3 {
    margin: 0 0 6px;
    color: #1f2937;
}

.review-wizard-thanks p {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 13.5px;
}

/* -- Clippy-style review popup (next to launcher) ----------------------- */

.review-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    right: -10px;
    width: 280px;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid #e6e9ef;
    z-index: 1040;
    animation: review-popup-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.review-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 36px;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
}

@keyframes review-popup-pop-in {
    0% { transform: translateY(10px) scale(0.6); opacity: 0; }
    60% { transform: translateY(-4px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.review-popup-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.review-popup-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1f2937;
}

.review-popup-body {
    cursor: pointer;
    padding-right: 18px;
}

.review-popup-body strong {
    display: block;
    color: #1f2937;
    font-size: 14px;
    margin-bottom: 3px;
}

.review-popup-body p {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.45;
}

.review-popup-cta {
    display: inline-block;
    color: #4285f4;
    font-size: 12px;
    font-weight: 600;
}

.review-popup-body:hover .review-popup-cta {
    text-decoration: underline;
}

/* -- Admin review list (tab on /Administrare/TrimitereEmail) ------------- */

.review-list {
    padding: 8px 0;
}

.review-list-filters {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.review-list-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6e9ef;
}

.review-list-tab {
    background: transparent;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: #6b7280;
    font-weight: 500;
    font-size: 13.5px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.review-list-tab:hover {
    color: #4285f4;
}

.review-list-tab.active {
    color: #4285f4;
    border-bottom-color: #4285f4;
}

.review-list-tab-count {
    margin-left: 4px;
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.review-list-tab.active .review-list-tab-count {
    background: #4285f4;
    color: #ffffff;
}

.review-list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: #4b5563;
}

.review-list-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.review-list-controls select,
.review-list-controls input[type="date"] {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #ffffff;
}

.review-list-loading,
.review-list-empty {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.review-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.review-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    border-left: 4px solid #4285f4;
    display: flex;
    flex-direction: column;
}

.review-card-inapp {
    border-left-color: #4285f4;
}

.review-card-external {
    border-left-color: #10b981;
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.review-card-identity {
    flex: 1;
    min-width: 0;
}

.review-card-identity strong {
    color: #1f2937;
    font-size: 14px;
}

.review-card-company {
    color: #6b7280;
    font-size: 12.5px;
    margin-left: 4px;
}

.review-card-source-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-card-source-inapp {
    background: #dbeafe;
    color: #1e40af;
}

.review-card-source-external {
    background: #d1fae5;
    color: #065f46;
}

.review-card-stars {
    flex-shrink: 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.review-card-star {
    color: #d1d5db;
}

.review-card-star.filled {
    color: #fbbf24;
}

.review-card-contact {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 10px;
}

.review-card-contact a {
    color: #4285f4;
    text-decoration: none;
}

.review-card-contact a:hover {
    text-decoration: underline;
}

.review-card-phone,
.review-card-ip {
    margin-left: 4px;
}

.review-card-ip {
    color: #9ca3af;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 11.5px;
}

.review-card-freetext {
    margin: 0 0 12px;
    color: #374151;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.review-card-answers {
    margin-bottom: 10px;
    font-size: 12.5px;
}

.review-card-answers > summary {
    cursor: pointer;
    color: #4285f4;
    user-select: none;
    list-style: none;
    padding: 4px 0;
}

.review-card-answers > summary::-webkit-details-marker {
    display: none;
}

.review-card-answers > summary::before {
    content: "▸ ";
    transition: transform 0.15s ease;
    display: inline-block;
}

.review-card-answers[open] > summary::before {
    transform: rotate(90deg);
}

.review-card-answers-body {
    padding: 8px 0 4px;
    border-top: 1px dashed #e6e9ef;
    margin-top: 4px;
}

.review-card-answers-body h6 {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    margin: 8px 0 4px;
}

.review-card-answer-list {
    margin: 0;
}

.review-card-answer-list dt {
    color: #6b7280;
    font-size: 12px;
    margin-top: 6px;
}

.review-card-answer-list dd {
    margin: 2px 0 0;
    color: #1f2937;
    font-size: 13px;
}

.review-card-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.review-card-date {
    color: #9ca3af;
    font-size: 11.5px;
}

/* ============================================================================
   Support message admin list + TopMenu badge (V71).
   ============================================================================ */

/* TopMenu badge — small red pill on the "Comunicare cu clienții" dropdown item. */
.topbar-ddown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}

/* Tab-level badge (smaller, on the in-page "Mesaje suport" tab). */
.tab-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 1;
}

/* Support list container. */
.support-list {
    padding: 8px 0;
}

.support-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.support-list-stats {
    display: flex;
    gap: 16px;
    font-size: 13.5px;
    color: #4b5563;
}

.support-list-stat strong {
    color: #1f2937;
    margin-right: 4px;
}

.support-list-stat-unread strong {
    color: #dc2626;
}

.support-list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.support-list-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #4b5563;
    cursor: pointer;
}

.support-list-loading,
.support-list-empty {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.support-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.support-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    border-left: 4px solid #d1d5db;
}

.support-card-unread {
    border-left-color: #dc2626;
    background: #fffbf5;
}

.support-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.support-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.support-card-new-badge {
    background: #dc2626;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

.support-card-category {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.support-card-category-urgent {
    background: #fee2e2;
    color: #991b1b;
}

.support-card-category-ops {
    background: #fef3c7;
    color: #92400e;
}

.support-card-category-comm {
    background: #dbeafe;
    color: #1e40af;
}

.support-card-category-other {
    background: #f3f4f6;
    color: #6b7280;
}

.support-card-topic {
    color: #1f2937;
    font-size: 14.5px;
}

.support-card-date {
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
}

.support-card-contact {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.support-card-contact strong {
    color: #1f2937;
}

.support-card-contact a {
    color: #4285f4;
    text-decoration: none;
}

.support-card-contact a:hover {
    text-decoration: underline;
}

.support-card-body {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 13.5px;
    color: #374151;
    background: #f8fafc;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 10px;
    line-height: 1.5;
    max-height: 280px;
    overflow-y: auto;
}

.support-card-footer {
    display: flex;
    justify-content: flex-end;
}

.support-card-read-indicator {
    color: #6b7280;
    font-size: 12.5px;
    font-style: italic;
}

/* === Google Translate widget chrome (language switcher, window.wikidocLang) ===
   The widget is injected hidden and driven only by the googtrans cookie; every
   piece of Google-injected UI (top banner iframe, tooltips, spinner, highlight)
   is suppressed so the translation is invisible plumbing. */
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner-pos {
    display: none !important;
}

body {
    top: 0 !important; /* Google offsets body to make room for its banner — undo it */
}

#google_translate_element {
    display: none;
}

font.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* === Language switcher (.wd-lang-*, Components/Common/LanguageSwitcher.razor) ===
   Global on purpose: the same component renders inside TopMenu (navbar) AND
   floating on AuthLayout (Login/Register), so scoped .razor.css can't own it.
   Dark-mode overrides live in dark-mode.css (html.wd-dark .wd-lang-*). */
.wd-lang-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    transition: background-color 0.18s ease;
}

    .wd-lang-wrap:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

.wd-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    text-decoration: none;
    color: #1a1a1a;
    cursor: pointer;
}

.wd-lang-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    display: block;
    flex-shrink: 0;
}

.wd-lang-caret {
    font-size: 0.6rem;
    color: #6b7280;
}

.wd-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    padding: 6px;
    min-width: 175px;
    z-index: 1060;
}

    .wd-lang-menu.wd-open {
        display: block;
    }

.wd-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 0.9rem;
    white-space: nowrap;
}

    .wd-lang-option:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #1a1a1a;
    }

.wd-lang-check {
    width: 14px;
    color: #16a34a;
    font-size: 0.7rem;
    visibility: hidden;
    flex-shrink: 0;
}

.wd-lang-option.wd-lang-active .wd-lang-check {
    visibility: visible;
}

/* Floating variant on AuthLayout (Login/Register — no navbar there). A subtle
   pill background keeps the flag readable over any page background. */
.wd-lang-floating {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1055;
}

    .wd-lang-floating .wd-lang-wrap {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);
    }

        .wd-lang-floating .wd-lang-wrap:hover {
            background: #fff;
        }