/**
 * Lumina Subscription — My Account (client side)
 *
 * All selectors are scoped under .lumina-acc. Custom properties are also
 * declared on .lumina-acc, NOT :root, so they don't clobber theme variables.
 * No build step: flex/grid only, no autoprefixer.
 *
 * This renders inside an arbitrary host theme we don't control, so layout
 * (display/flex/grid), spacing, and color are marked `!important`
 * throughout — the host's own CSS has repeatedly won cascade fights on
 * exactly these properties otherwise. Font-size/line-height are the
 * exception: no host collision has ever touched those, so they're left
 * to normal cascade and just kept on a consistent scale instead.
 */

.lumina-acc {
    /* Brand: navy + orange from the LuminaCharge logo. */
    --lumina-acc-blue: #0c1f3f;
    --lumina-acc-blue-pale: #e9edf5;
    --lumina-acc-green: #1f7a4d;
    --lumina-acc-green-pale: #e6f5ee;
    --lumina-acc-orange: #e2680f;
    --lumina-acc-orange-pale: #fdeee0;
    --lumina-acc-red: #b3261e;
    --lumina-acc-red-pale: #fdecea;
    --lumina-acc-grey: #5c6470;
    --lumina-acc-grey-pale: #eef0f3;
    --lumina-acc-border: #e3e6eb;
    --lumina-acc-text: #1f2933;
    --lumina-acc-muted: #6b7280;
    --lumina-acc-bg: #fff;
    --lumina-acc-radius: 10px;

    color: var(--lumina-acc-text) !important;
}

.lumina-acc *,
.lumina-acc *::before,
.lumina-acc *::after {
    box-sizing: border-box !important;
}

/* Default link color for the component, not inherited from the theme.
 * Elements that own their own color (buttons, actions, emergency
 * number, pagination) are excluded. */
.lumina-acc a:not(.lumina-acc-btn):not(.lumina-acc-action):not(.lumina-acc-help__phone):not(.page-numbers) {
    color: var(--lumina-acc-blue) !important;
    text-decoration: underline;
}

.lumina-acc a:not(.lumina-acc-btn):not(.lumina-acc-action):not(.lumina-acc-help__phone):not(.page-numbers):hover,
.lumina-acc a:not(.lumina-acc-btn):not(.lumina-acc-action):not(.lumina-acc-help__phone):not(.page-numbers):focus {
    color: var(--lumina-acc-orange) !important;
}

.lumina-acc__intro {
    color: var(--lumina-acc-muted) !important;
    margin: 0 0 20px !important;
}

/* ─── Notice ─────────────────────────────────────────────────────────────── */

.lumina-acc-notice {
    border-radius: var(--lumina-acc-radius);
    padding: 12px 16px !important;
    margin: 0 0 20px !important;
    border-left: 4px solid var(--lumina-acc-grey) !important;
    background: var(--lumina-acc-grey-pale) !important;
    font-size: 14px;
}

.lumina-acc-notice--success {
    border-left-color: var(--lumina-acc-green) !important;
    background: var(--lumina-acc-green-pale) !important;
}

.lumina-acc-notice--error {
    border-left-color: var(--lumina-acc-red) !important;
    background: var(--lumina-acc-red-pale) !important;
}

/* ─── Card grid ──────────────────────────────────────────────────────────── */

.lumina-acc__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch !important;
    gap: 16px !important;
    margin: 0 0 28px !important;
}

.lumina-acc-card {
    background: var(--lumina-acc-bg) !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
    display: flex !important;
    flex-direction: column !important;
    /* Explicit, not just default: a host flex/card reset can set these on
       an axis we never declared, and an undeclared property has nothing
       of ours to lose the cascade to. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

.lumina-acc-card__header {
    padding: 14px 16px 0 !important;
}

.lumina-acc-card__title {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 1.3;
}

.lumina-acc-card__body {
    padding: 12px 16px 16px !important;
    flex: 1 !important;
}

.lumina-acc-card__footlink {
    display: inline-block !important;
    margin-top: 10px !important;
    font-size: 14px;
}

/* ─── Card: profile info ─────────────────────────────────────────────────── */

.lumina-acc-info {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lumina-acc-info__row {
    margin: 0 0 8px !important;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.lumina-acc-info__value--strong {
    font-weight: 600 !important;
}

/* ─── Card: subscription ─────────────────────────────────────────────────── */

.lumina-acc-field {
    margin: 0 0 12px !important;
}

.lumina-acc-field__label {
    display: block !important;
    font-size: 12px;
    color: var(--lumina-acc-muted) !important;
    margin-bottom: 2px !important;
}

.lumina-acc-field__hint {
    display: block !important;
    font-size: 12px;
    color: var(--lumina-acc-orange) !important;
    margin-top: 2px !important;
}

.lumina-acc-plan {
    display: block !important;
    font-size: 18px;
    font-weight: 600 !important;
    color: var(--lumina-acc-blue) !important;
    line-height: 1.3;
}

.lumina-acc-date {
    display: block !important;
    font-size: 14px;
    font-weight: 600 !important;
}

.lumina-acc-date--ok {
    color: var(--lumina-acc-green) !important;
}

.lumina-acc-date--expired {
    color: var(--lumina-acc-red) !important;
}

.lumina-acc-field--muted code {
    font-size: 12px;
    background: var(--lumina-acc-grey-pale) !important;
    padding: 2px 6px !important;
    border-radius: 4px;
}

/* ─── Card: quick actions ────────────────────────────────────────────────── */

.lumina-acc-actions {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.lumina-acc-action-form {
    margin: 0 !important;
}

.lumina-acc-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: 8px !important;
    background: var(--lumina-acc-bg) !important;
    color: var(--lumina-acc-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.lumina-acc-action:hover {
    background: var(--lumina-acc-blue-pale) !important;
    border-color: var(--lumina-acc-blue) !important;
    color: var(--lumina-acc-blue) !important;
    box-shadow: 0 2px 6px rgba(12, 31, 63, .12) !important;
}

.lumina-acc-action:active {
    transform: scale(0.98);
    box-shadow: none !important;
}

.lumina-acc-action:focus-visible {
    outline: 2px solid var(--lumina-acc-blue);
    outline-offset: 2px;
}

.lumina-acc-action--danger {
    background: var(--lumina-acc-red) !important;
    border-color: var(--lumina-acc-red) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(179, 38, 30, .25) !important;
}

.lumina-acc-action--danger:hover {
    background: #8f1d17 !important;
    border-color: #8f1d17 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(143, 29, 23, .3) !important;
}

.lumina-acc-action--danger:focus-visible {
    outline: 2px solid var(--lumina-acc-red);
    outline-offset: 2px;
}

.lumina-acc-action--muted {
    color: var(--lumina-acc-muted) !important;
}

.lumina-acc-action[disabled] {
    opacity: .6;
    cursor: default;
}

.lumina-acc-action__fallback {
    display: block !important;
    margin-top: 6px !important;
    text-align: center;
    font-size: 12px;
}

/* ─── Card: help ──────────────────────────────────────────────────────────── */

.lumina-acc-help__copy {
    margin: 0 0 12px !important;
    font-size: 14px;
    color: var(--lumina-acc-muted) !important;
    line-height: 1.5;
}

.lumina-acc-help__box {
    background: var(--lumina-acc-red-pale) !important;
    border-radius: 8px;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.lumina-acc-help__label {
    display: block !important;
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--lumina-acc-red) !important;
    margin-bottom: 2px !important;
}

.lumina-acc-help__phone {
    font-size: 16px;
    font-weight: 700 !important;
    color: var(--lumina-acc-red) !important;
    text-decoration: none;
    word-break: break-word;
}

/* ─── Section & table ─────────────────────────────────────────────────────── */

.lumina-acc-section {
    margin: 0 0 28px !important;
}

.lumina-acc-section__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 0 12px !important;
}

.lumina-acc-section__title {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600 !important;
}

.lumina-acc-section__link {
    font-size: 14px;
}

/* Wide content must scroll within its own container, not shift the page. */
.lumina-acc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
}

.lumina-acc-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 !important;
}

.lumina-acc-table th,
.lumina-acc-table td {
    padding: 10px 12px !important;
    text-align: left;
    border-bottom: 1px solid var(--lumina-acc-border) !important;
    vertical-align: middle;
}

.lumina-acc-table thead th {
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--lumina-acc-muted) !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.lumina-acc-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.lumina-acc-table code {
    font-size: 12px;
}

.lumina-acc-empty {
    border: 1px dashed var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
    padding: 24px 16px !important;
    text-align: center;
    color: var(--lumina-acc-muted) !important;
    font-size: 14px;
}

.lumina-acc-empty p {
    margin: 0 !important;
}

/* ─── Pill / badge ────────────────────────────────────────────────────────── */

.lumina-pill {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600 !important;
    line-height: 1.5;
    white-space: nowrap;
}

.lumina-pill--blue   { background: var(--lumina-acc-blue-pale)   !important; color: var(--lumina-acc-blue)   !important; }
.lumina-pill--green  { background: var(--lumina-acc-green-pale)  !important; color: var(--lumina-acc-green)  !important; }
.lumina-pill--orange { background: var(--lumina-acc-orange-pale) !important; color: var(--lumina-acc-orange) !important; }
.lumina-pill--red    { background: var(--lumina-acc-red-pale)    !important; color: var(--lumina-acc-red)    !important; }
.lumina-pill--grey   { background: var(--lumina-acc-grey-pale)   !important; color: var(--lumina-acc-grey)   !important; }

.lumina-acc-dot {
    display: inline-block !important;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lumina-acc-blue) !important;
    margin-left: 6px !important;
    vertical-align: middle;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

.lumina-acc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    border: 1px solid var(--lumina-acc-blue) !important;
    background: var(--lumina-acc-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(12, 31, 63, .15) !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.lumina-acc-btn:hover {
    background: #061426 !important;
    border-color: #061426 !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(6, 20, 38, .25) !important;
}

.lumina-acc-btn:active {
    transform: scale(0.97);
    box-shadow: none !important;
}

.lumina-acc-btn:focus-visible {
    outline: 2px solid var(--lumina-acc-blue);
    outline-offset: 2px;
}

.lumina-acc-btn--sm {
    min-height: 32px !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
}

.lumina-acc-btn--ghost {
    background: transparent !important;
    color: var(--lumina-acc-blue) !important;
    box-shadow: none !important;
}

.lumina-acc-btn--ghost:hover {
    background: var(--lumina-acc-blue-pale) !important;
    color: var(--lumina-acc-blue) !important;
    box-shadow: none !important;
}

.lumina-acc-btn--ghost:focus-visible {
    outline: 2px solid var(--lumina-acc-blue);
    outline-offset: 2px;
}

.lumina-acc-btn--danger {
    background: var(--lumina-acc-red) !important;
    border-color: var(--lumina-acc-red) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(179, 38, 30, .25) !important;
}

.lumina-acc-btn--danger:hover {
    background: #8f1d17 !important;
    border-color: #8f1d17 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(143, 29, 23, .3) !important;
}

.lumina-acc-btn--danger:focus-visible {
    outline: 2px solid var(--lumina-acc-red);
    outline-offset: 2px;
}

/* ─── Helper text ─────────────────────────────────────────────────────────── */

.lumina-acc-muted {
    color: var(--lumina-acc-muted) !important;
    font-size: 14px;
    line-height: 1.5;
}

.lumina-acc-muted--sm {
    font-size: 12px;
}

.lumina-acc-back {
    margin: 20px 0 0 !important;
    font-size: 14px;
}

.lumina-acc-pagination {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}

.lumina-acc-pagination .page-numbers {
    display: inline-block !important;
    padding: 5px 10px !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
}

.lumina-acc-pagination .page-numbers.current {
    background: var(--lumina-acc-blue) !important;
    border-color: var(--lumina-acc-blue) !important;
    color: #fff !important;
}

/* ─── Mobile: table becomes stacked rows, no JS ──────────────────────────── */

@media (max-width: 600px) {
    .lumina-acc-table-wrap {
        border: 0 !important;
        border-radius: 0;
        overflow-x: visible;
    }

    .lumina-acc-table thead {
        display: none !important;
    }

    .lumina-acc-table,
    .lumina-acc-table tbody,
    .lumina-acc-table tr,
    .lumina-acc-table td {
        display: block !important;
        width: 100% !important;
    }

    .lumina-acc-table tr {
        border: 1px solid var(--lumina-acc-border) !important;
        border-radius: var(--lumina-acc-radius);
        margin-bottom: 10px;
        padding: 4px 0;
    }

    .lumina-acc-table td {
        border-bottom: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 6px 12px !important;
    }

    .lumina-acc-table td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600 !important;
        color: var(--lumina-acc-muted) !important;
        flex: 0 0 auto;
    }

    .lumina-acc-table td:not([data-label])::before {
        content: "";
    }
}

/* Intentionally no @media (prefers-color-scheme: dark) — this page is
 * always white with navy/orange accents, regardless of the reader's
 * OS/browser preference. */

/* ─── Ticket detail: meta, thread, form ──────────────────────────────────── */

.lumina-acc-card--flat {
    margin-bottom: 16px !important;
}

.lumina-acc-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px 24px !important;
}

.lumina-acc-meta__item {
    font-size: 14px;
}

.lumina-acc-thread {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
}

.lumina-acc-msg {
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
    padding: 12px 14px !important;
    max-width: 88% !important;
    font-size: 14px;
}

/* Client on the left, staff on the right — conversation direction reads at a glance. */
.lumina-acc-msg--client {
    align-self: flex-start !important;
    background: var(--lumina-acc-bg) !important;
}

.lumina-acc-msg--staff {
    align-self: flex-end !important;
    background: var(--lumina-acc-blue-pale) !important;
    border-color: transparent !important;
}

.lumina-acc-msg--system {
    align-self: center !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 2px 0 !important;
    text-align: center;
    font-size: 12px;
    color: var(--lumina-acc-muted) !important;
}

.lumina-acc-msg__meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
    font-size: 12px;
}

.lumina-acc-msg__author {
    font-weight: 600 !important;
}

.lumina-acc-msg__time {
    color: var(--lumina-acc-muted) !important;
}

.lumina-acc-msg__body {
    line-height: 1.55;
    word-break: break-word;
}

/* ─── Form ─────────────────────────────────────────────────────────────────── */

.lumina-acc-form {
    background: var(--lumina-acc-bg) !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
    padding: 16px !important;
}

.lumina-acc-form--inline {
    border: 0 !important;
    background: transparent !important;
    padding: 12px 0 0 !important;
}

.lumina-acc-form__field {
    margin-bottom: 14px !important;
}

.lumina-acc-form__label {
    display: block !important;
    font-size: 12px;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.lumina-acc-form__input,
.lumina-acc-form__textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: 8px;
    background: var(--lumina-acc-bg) !important;
    color: var(--lumina-acc-text) !important;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
}

.lumina-acc-form__input:focus,
.lumina-acc-form__textarea:focus {
    outline: 2px solid var(--lumina-acc-blue);
    outline-offset: 1px;
    border-color: var(--lumina-acc-blue) !important;
}

.lumina-acc-form__textarea {
    resize: vertical;
    min-height: 96px;
}

.lumina-acc-form__hint {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px;
    color: var(--lumina-acc-muted) !important;
}

.lumina-acc-form__actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 600px) {
    .lumina-acc-msg {
        max-width: 100% !important;
    }
}

/* ─── Service report body (rich content from admin) ──────────────────────── */

.lumina-acc-report {
    background: var(--lumina-acc-bg) !important;
    border: 1px solid var(--lumina-acc-border) !important;
    border-radius: var(--lumina-acc-radius);
    padding: 18px 20px !important;
    font-size: 14px;
    line-height: 1.65;
}

.lumina-acc-report > *:first-child { margin-top: 0 !important; }
.lumina-acc-report > *:last-child  { margin-bottom: 0 !important; }

.lumina-acc-report img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.lumina-acc-report table {
    width: 100% !important;
    border-collapse: collapse;
    display: block !important;
    overflow-x: auto;
}