/*Title*/
.lumome-section-title {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 0.75em;
    padding-bottom: 0.4em;
    border-bottom: var(--line-width) solid var(--color-light-gray);
    margin-bottom: 1.5rem;
}

.lumome-section-title.nomargin {
    margin-bottom: 0;
}

.lumome-dashboard-intro {
    margin-top: 1.5rem;
}

/*Link*/
.lumome-lnk {
    color: var(--color-yellow) !important;
    text-decoration: none;
}

/* ── Accordion & toggle animation ───────────────────────────────── */

/*
 * Override hidden attr's display: none so elements stay in the
 * render tree during the CSS transition. Screen readers and focus
 * management still respect the `hidden` attribute itself.
 */
.lumome-accordion__panel[hidden],
.lumome-send-invite-form-wrap[hidden],
.lumome-send-another-form[hidden] {
    display: grid !important;
}

/* Base state: collapsed */
.lumome-accordion__panel,
.lumome-send-another-form {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

/* Direct child needs min-height: 0 so the grid row can compress to 0 */
.lumome-accordion__panel > *,
.lumome-send-another-form > * {
    min-height: 0;
}

/*
 * Padding belongs on the child, not the grid container — a container's
 * own padding is not clipped by overflow: hidden, so it would remain
 * visible even at grid-template-rows: 0fr.
 */
.lumome-accordion__panel > * {
    padding: 0 2rem;
}

.lumome-accordion__panel ul li:first-child {
    padding-top: 1rem;
}

.lumome-accordion__panel ul li:last-child {
    padding-bottom: 1rem;
}

.lumome-send-invite-form-wrap > * {
    padding: 0;
}

.lumome-send-another-form > * {
    padding: 0;
}

/* ── Open states ────────────────────────────────────────────────── */

/* Accordion panels — My Orders and My Reports share the same classes */
.lumome-accordion__trigger[aria-expanded="true"] + .lumome-accordion__panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.lumome-accordion__trigger[aria-expanded="true"] > span {
    border: none;
}

/* My Codes: Send Invite inline form */
#lumome-send-invite-toggle[aria-expanded="true"] + .lumome-send-invite-form-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* My Codes: Send Another form — aria-expanded lives on a nested <a> inside
   .lumome-invite__actions, so we use :has() to reach it from the sibling span */
.lumome-invite__actions:has(.lumome-send-another-toggle[aria-expanded="true"])
    ~ .lumome-send-another-form {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ── Mobile: drop left indent from accordion panel content ──────── */
@media (max-width: 768px) {
    .lumome-accordion__panel > * {
        padding-left: 0;
    }
}