/* ── User nav (fixed top-right) ─────────────────────────────────────────────── */
/*
 * Fixed top-right widget. Uses !important on visuals because themes commonly
 * apply global button resets (background, color, border, padding) that would
 * override the defaults without them.
 */
.de-user-nav {
    position: fixed;
    top: 16px; /* overridden by JS once #site-header height is known */
    right: 16px;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1;
}
/* The toggle <button> — reset everything the theme might set, then style it */
.de-user-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,.13) !important;
    border-radius: 999px !important;
    padding: 7px 12px 7px 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.13) !important;
    transition: box-shadow .15s, border-color .15s !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
}
.de-user-toggle:hover,
.de-user-toggle[aria-expanded="true"] {
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
}
.de-user-icon {
    width: 18px !important;
    height: 18px !important;
    color: #2271b1 !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.de-chevron {
    width: 16px !important;
    height: 16px !important;
    color: #999 !important;
    flex-shrink: 0 !important;
    display: block !important;
    transition: transform .2s !important;
}
.de-user-toggle[aria-expanded="true"] .de-chevron {
    transform: rotate(180deg) !important;
}
.de-user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.de-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    overflow: hidden;
    animation: deDropIn .14s ease;
}
@keyframes deDropIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.de-user-dropdown-item {
    display: block;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a2e;
    text-decoration: none;
    transition: background .1s;
    line-height: 1.2;
}
.de-user-dropdown-item:hover {
    background: #f5f6fa;
    color: #1a1a2e;
    text-decoration: none;
}
.de-user-dropdown-logout {
    border-top: 1px solid #eee;
    color: #c0392b;
}
.de-user-dropdown-logout:hover {
    color: #c0392b;
    background: #fff5f5;
}
/* Guest login panel inside dropdown */
.de-user-dropdown-auth {
    min-width: 240px;
    padding: 4px 0;
}
.de-nav-auth-panel {
    padding: 14px 18px 16px;
}
.de-nav-auth-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px;
}
.de-nav-auth-field {
    margin-bottom: 8px;
}
.de-nav-auth-field input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    outline: none !important;
    box-shadow: none !important;
}
.de-nav-auth-field input:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 2px rgba(34,113,177,.15) !important;
}
.de-nav-auth-error {
    display: block;
    font-size: 12px;
    color: #c0392b;
    margin-bottom: 8px;
}
.de-nav-auth-success {
    display: block;
    font-size: 12px;
    color: #2a7d2a;
    margin-bottom: 8px;
}
.de-resend-verification {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #2271b1;
    text-decoration: underline;
    margin-bottom: 8px;
}
.de-nav-auth-btn {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 8px !important;
    background: #2271b1 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    margin-top: 4px !important;
    transition: background .15s !important;
}
.de-nav-auth-btn:hover {
    background: #135e96 !important;
}
.de-nav-auth-switch {
    margin: 10px 0 0;
    font-size: 12px;
    color: #666;
    text-align: center;
}
.de-nav-auth-switch-btn {
    all: unset !important;
    color: #2271b1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}
/* Mobile: push left of the hamburger, vertically centred by JS */
@media (max-width: 600px) {
    .de-user-nav {
        /* right used to be a hardcoded "62px !important" guess at the hamburger's
           width - wrong for this theme's actual (wider) Elementor menu toggle, and
           its !important silently overrode positionUserNav()'s real measurement
           (frontend.js), which computes and sets the correct inline "right" from the
           toggle's live getBoundingClientRect(). No value here at all, so that inline
           style wins; top is set the same dynamic way, to match the header mid-point. */
    }
    .de-user-name { display: none !important; }
    .de-user-toggle {
        padding: 7px 10px !important;
        gap: 4px !important;
    }
    .de-user-dropdown {
        right: 0;
        min-width: 140px;
    }
    .de-user-dropdown-auth {
        width: calc(100vw - 78px); /* right edge at 62px from viewport, left edge at 16px */
        min-width: unset;
        max-width: 360px;
    }
}

/* ── Profile page ────────────────────────────────────────────────────────────── */
.de-profile-table {
    border-collapse: collapse;
    font-size: 15px;
}
.de-profile-table th {
    text-align: left;
    padding: 6px 16px 6px 0;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}
.de-profile-table td {
    padding: 6px 0;
    color: #1a1a2e;
}
.de-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
.de-field-row label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.de-field-row input[type="tel"] {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
}
.de-field-row input[type="tel"]:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}
#de-profile-message {
    font-size: 13px;
    margin-top: 6px;
    min-height: 20px;
}
.de-schedule-group-title {
    font-size: 15px;
    font-weight: 700;
    color: #2271b1;
    margin: 20px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e8ecf0;
}

/* ── Cart badge (floating, bottom-LEFT to avoid scroll-to-top) ──────────────── */
.de-cart-badge {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    background: #2271b1;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    transform: translateY(8px);
    cursor: pointer;
    white-space: nowrap;
}
.de-cart-badge.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.de-cart-badge:hover {
    background: #135e96;
    color: #fff;
    text-decoration: none;
}
.de-badge-count {
    background: #fff;
    color: #2271b1;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── "Add to cart" button inside the schedule modal ─────────────────────────── */
.de-modal-cart-row {
    margin-top: 16px;
}
.de-modal-cart-btn {
    padding: 10px 28px !important;
    background: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    transition: background .15s;
}
.de-modal-cart-btn:hover {
    background: #135e96 !important;
}
.de-modal-cart-btn.in-cart {
    background: #46b450 !important;
}
.de-modal-cart-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* ── Cart page ───────────────────────────────────────────────────────────────── */
.de-cart {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 20px;
}
.de-cart * { box-sizing: border-box; }

/* Force our own look for any <button> inside the plugin, regardless of the active
   theme's global button styling (OceanWP applies an uppercase/accent-colored
   `body button` rule via `!important`-free but very broad selectors — we need to
   out-rank it deliberately, not rely on source order or class specificity alone). */
.de-cart button,
.de-my-courses button {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
}

/* Native checkboxes render tiny/inconsistent across browsers by default —
   size and recolor them so they read as deliberate UI, not unstyled defaults. */
/* Custom checkbox: native rendering (even with accent-color) is inconsistent
   and often chunky/blurry across browsers, so we draw our own instead of
   relying on the OS control. */
/* Native checkbox rendering is inconsistent across browsers, and Safari in
   particular only partially honors `appearance: none` on checkboxes (it keeps
   drawing its own checkmark glyph on top of a custom box). So instead of
   styling the native control, hide it and draw the box entirely with a
   sibling <span class="de-checkbox-box">, toggled via the :checked selector —
   this renders identically everywhere. */
.de-cart input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 19px;
    height: 19px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.de-checkbox-box {
    display: inline-block;
    width: 19px;
    height: 19px;
    min-width: 19px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    position: relative;
    vertical-align: middle;
    transition: background-color .15s, border-color .15s;
}
.de-cart label:hover .de-checkbox-box {
    border-color: #2271b1;
}
.de-cart input[type="checkbox"]:checked + .de-checkbox-box {
    background-color: #2271b1;
    border-color: #2271b1;
}
.de-cart input[type="checkbox"]:checked + .de-checkbox-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.de-cart input[type="checkbox"]:focus-visible + .de-checkbox-box {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.de-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    padding: 24px 28px;
    margin-bottom: 24px;
}

/* ── Nav bar (back to schedule / add another) ──────────────────────────────────── */
.de-nav-bar {
    display: flex;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}
.de-nav-link {
    font-size: 14px;
    font-weight: 600;
    color: #2271b1;
    text-decoration: none;
}
.de-nav-link:hover { color: #135e96; text-decoration: underline; }

/* ── Login / register toggle ────────────────────────────────────────────────────── */
.de-auth-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.de-auth-toggle-btn {
    flex: 1;
    padding: 10px 14px !important;
    border: 1px solid #ccc !important;
    background: #f6f6f6 !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #444 !important;
}
.de-auth-toggle-btn.active {
    background: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #fff !important;
}
.de-account-panel,
.de-guest-panel {
    margin-bottom: 24px;
}
.de-auth-switch {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}

/* ── Per-item role / partner controls ───────────────────────────────────────────── */
.de-role-select {
    width: 100%;
    max-width: 150px;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}
.de-role-cell.de-role-missing .de-role-select {
    border-color: #c00;
    background: #fff0f0;
}
.de-partner-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.de-partner-check {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    font-size: 10px;
    font-weight: normal;
    color: #444;
    white-space: nowrap;
}
/* Smaller checkbox inside compact cart rows */
.de-partner-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
}
.de-partner-check .de-checkbox-box {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 3px;
}
.de-partner-check input[type="checkbox"]:checked + .de-checkbox-box::after {
    left: 3px;
    top: 1px;
    width: 4px;
    height: 7px;
}
.de-partner-email {
    font-size: 13px !important;
    padding: 5px 8px !important;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    max-width: 200px;
    height: auto !important;
    line-height: 1.4 !important;
    box-sizing: border-box;
}
.de-partner-email.de-partner-invalid {
    border-color: #c00;
    background: #fff0f0;
}

/* ── Cart item list (grid, collapses to stacked cards on narrow screens) ─────────── */
.de-cart-list {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
}
.de-cart-row {
    display: grid;
    grid-template-columns: minmax(120px,1.6fr) minmax(110px,1.2fr) minmax(100px,1.1fr) 70px minmax(110px,1fr) minmax(160px,1.3fr) 110px;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}
.de-cart-list-compact .de-cart-row {
    grid-template-columns: minmax(130px,1.6fr) minmax(120px,1.2fr) 70px minmax(110px,1fr) minmax(160px,1.3fr) 110px;
}
@media (max-width: 1100px) {
    .de-cart-list { overflow-x: auto; }
    .de-cart-row        { min-width: 800px; }
    .de-cart-list-compact .de-cart-row { min-width: 700px; }
}
.de-cart-row:last-child { border-bottom: none; }
.de-cart-row:not(.de-cart-row-head):nth-child(even) { background: #fafafa; }
.de-cart-row-head {
    background: #f6f6f6;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #666;
    padding-top: 10px;
    padding-bottom: 10px;
}
.de-cart-cell {
    font-size: 14px;
    min-width: 0;
}
.de-cart-cell-title { font-weight: 600; }
.de-cart-cell-remove { text-align: right; }
.de-dash { color: #bbb; }

@media (max-width: 880px) {
    .de-cart-row-head { display: none; }
    .de-cart-row {
        grid-template-columns: 1fr;
        min-width: 0;
        gap: 10px;
        padding: 16px;
    }
    .de-cart-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #999;
        margin-bottom: 3px;
    }
    .de-cart-cell:empty,
    .de-cart-cell[data-label=""]::before { display: none; }
    .de-cart-cell-remove { text-align: left; }
    .de-role-select,
    .de-partner-email { max-width: 100%; }
}

/* ── Discounted price display ───────────────────────────────────────────────────── */
.de-price-original {
    color: #999;
    text-decoration: line-through;
    font-size: .92em;
    margin-right: 4px;
}
.de-price-discounted {
    color: #2a7d2a;
    font-weight: 700;
}
.de-discount-note {
    color: #2a7d2a;
    font-size: .9em;
}

/* ── Totals ──────────────────────────────────────────────────────────────────────── */
/* !important throughout: these are plain <p> tags (frontend.js builds this block as a
   string of <p class="de-...">), and the theme's own global paragraph spacing (a much
   larger default margin-bottom) otherwise wins over our plain, non-!important margins. */
.de-group-total {
    text-align: right;
    font-size: 14px;
    margin: 0 0 24px !important;
    color: #444;
}
.de-grand-subtotal {
    text-align: right;
    font-size: 14px;
    color: #666;
    margin: 0 0 4px !important;
}
.de-discount-disclaimer {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin: 6px 0 0 !important;
}
.de-grand-total {
    text-align: right;
    font-size: 1.15em;
    border-top: 2px solid #2271b1;
    padding-top: 12px;
    margin: 0 !important;
}

/* ── Comment / checkbox rows ─────────────────────────────────────────────────────── */
.de-field-row textarea {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
}
.de-checkbox-row label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.de-cart-heading {
    font-size: 1.4em;
    margin-bottom: 16px;
}
.de-empty,
.de-loading {
    color: #777;
    font-style: italic;
}
.de-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
.de-cart-table th,
.de-cart-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    font-size: 14px;
}
.de-cart-table th {
    background: #f6f6f6;
    font-weight: 600;
}
.de-schedule-group-title {
    margin: 24px 0 8px;
    font-size: 1.1em;
    font-weight: 700;
    border-bottom: 2px solid #2271b1;
    padding-bottom: 4px;
    color: #2271b1;
}
.de-cart-table + .de-schedule-group-title,
.de-cart-list + .de-schedule-group-title,
.de-group-total + .de-schedule-group-title {
    margin-top: 32px;
}
.de-cart-heading + .de-schedule-group-title,
#de-cart-items > .de-schedule-group-title:first-child {
    margin-top: 4px;
}
.de-remove-btn {
    background: #fff !important;
    border: 1px solid #e0b3b3 !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    cursor: pointer;
    color: #c00 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
.de-remove-btn:hover { background: #fff0f0 !important; border-color: #c00 !important; }

/* ── Enrollment form ─────────────────────────────────────────────────────────── */
.de-form-note {
    color: #777;
    font-size: 13px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: #f9f9f9;
    border-left: 3px solid #ccc;
}
.de-field-row {
    margin-bottom: 16px;
}
.de-field-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}
.de-field-row input {
    width: 100%;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}
.de-required {
    color: #c00;
}
.de-promo-code-row {
    display: flex;
    gap: 8px;
    max-width: 360px;
}
.de-promo-code-row input {
    flex: 1;
    max-width: none;
}
#de-promo-apply-btn {
    flex-shrink: 0;
    background: #fff !important;
    border: 1px solid #2271b1 !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    cursor: pointer;
    color: #2271b1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
#de-promo-apply-btn:hover { background: #f0f6fb !important; }
#de-promo-apply-btn:disabled { opacity: .6; cursor: default; }
.de-submit-btn {
    display: inline-block;
    padding: 12px 32px !important;
    background: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    margin-top: 8px;
    text-decoration: none;
    transition: background .15s;
}
.de-submit-btn:hover  { background: #135e96 !important; color: #fff !important; }
.de-submit-btn:disabled { opacity: .6; cursor: default; }
.de-error {
    color: #c00;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    margin-top: 12px;
}
.de-success-msg {
    color: #2a7d2a;
    background: #f0fff4;
    border: 1px solid #c6e8cc;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    margin-top: 12px;
}

/* ── Status / payment badges (also used on the "my courses" page) ──────────────── */
.de-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.de-badge-pending   { background: #fff3cd; color: #856404; }
.de-badge-accepted  { background: #d4edda; color: #155724; }
.de-badge-denied    { background: #f8d7da; color: #721c24; }
.de-badge-waiting   { background: #fff0c2; color: #7a5800; }
.de-badge-not-ready { background: #e8e8e8; color: #444; }
.de-badge-pay-unpaid  { background: #f0f0f0; color: #555; }
.de-badge-pay-pending { background: #cce5ff; color: #004085; }
.de-badge-pay-paid    { background: #d4edda; color: #155724; }

/* ── Existing registrations section in cart ──────────────────────────────────── */
#de-my-registrations .de-my-reg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.de-my-reg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.de-my-reg-row:last-child { border-bottom: none; }
.de-my-reg-title {
    font-size: 14px;
    color: #333;
}

/* ── Registered (already enrolled) rows in cart ─────────────────────────────── */
.de-cart-row-registered {
    opacity: 0.6;
    pointer-events: none;
    background: #fafafa;
}
.de-cart-row-registered .de-cart-cell-title {
    color: #666;
}
.de-reg-role {
    font-size: 12px;
    color: #666;
    margin-right: 4px;
}

/* ── Cart: 2-column field rows ───────────────────────────────────────────────── */
.de-field-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 480px) {
    .de-field-row-2col { grid-template-columns: 1fr; }
}

/* Fix theme overriding input text to grey */
#de-contact-edit input {
    color: #1a1a2e !important;
}

/* Cancel / secondary action row in the edit block */
.de-contact-edit-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8ecf0;
}

/* ── Cart: logged-in user info block ─────────────────────────────────────────── */
.de-user-info-block {
    background: #f7f9fc;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.de-user-info-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 14px;
}
.de-user-info-label {
    font-weight: 600;
    color: #666;
    min-width: 120px;
    flex-shrink: 0;
}
.de-user-info-value {
    color: #1a1a2e;
}
.de-edit-profile-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin-top: 10px;
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2271b1 !important;
    text-decoration: underline !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    line-height: inherit !important;
}
.de-edit-profile-link:hover {
    color: #135e96 !important;
    background: transparent !important;
}

/* ── "Already registered" modal button ───────────────────────────────────────── */
.de-modal-cart-btn-registered {
    background: #888 !important;
    cursor: default !important;
    opacity: 0.75;
}

/* ── "Registration closed" modal button ──────────────────────────────────────── */
.de-modal-cart-btn-closed {
    background: #b03a2e !important;
    cursor: default !important;
    opacity: 0.8;
}

/* ── My courses page ─────────────────────────────────────────────────────────── */
.de-my-courses table.de-cart-table td { vertical-align: middle; }

/* ── Success box ─────────────────────────────────────────────────────────────── */
.de-success-box {
    background: #f0faf0;
    border: 1px solid #b3e0b3;
    border-radius: 4px;
    padding: 28px 32px;
    text-align: center;
    margin-top: 24px;
}

/* ── Dialog (alert() replacement, deAlert() in frontend.js) ────────────────────
   Same .de-modal/.de-modal-overlay/.de-modal-box convention as the admin side's
   DeDialog (admin.js/admin.css), so both halves of the plugin share one dialog look. */
.de-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.de-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}
.de-modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 24px 28px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    width: min(680px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    z-index: 100001;
}
.de-dialog-box {
    width: min(420px, 92vw);
}
.de-dialog-message {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    white-space: pre-line;
}
.de-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.de-dialog-ok {
    background: #2a7d2a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}
.de-dialog-ok:hover {
    background: #236823;
}
.de-success-box h3 { color: #2a7d2a; font-size: 1.5em; margin-bottom: 12px; }