/* /order page restyle.

   CSS ONLY, deliberately. The order listing is rendered by a core FOSSBilling template plus the
   Orderbutton module, and neither is in this theme - so changing the markup would mean copying a
   module file into the theme and hand-syncing it on every FOSSBilling update. Everything here works
   on the elements the module already emits today, so an upgrade cannot overwrite it. The worst case
   is that a class name changes upstream and the page simply looks less polished.

   Every selector is scoped under body.order-index, so none of this affects another page. Each step
   keeps the icon the module already gives it - one per step, each describing that step - rather
   than being renumbered.

   The one thing this cannot do is show prices: the order page ships no price in its HTML, only the
   plan name, so a price here would mean hard-coding it (stale as soon as a plan changes) or
   injecting it with JS coupled to these class names. */

/* ---- the stepper shell -------------------------------------------------------------- */

body.order-index #orderManager {
    border: 1px solid var(--osir-line);
    border-radius: 14px;
    overflow: hidden;
}

body.order-index #orderManager > .accordion-item {
    background: var(--osir-surface);
    border: 0;
    border-bottom: 1px solid var(--osir-line-soft);
    border-radius: 0;
}

body.order-index #orderManager > .accordion-item:last-child { border-bottom: 0; }

/* ---- step headers ------------------------------------------------------------------- */

body.order-index #orderManager .accordion-button {
    gap: 14px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--osir-ink-900);
    background: var(--osir-surface);
    box-shadow: none;
}

body.order-index #orderManager .accordion-button:hover { background: var(--osir-violet-25); }
body.order-index #orderManager .accordion-button:not(.collapsed) { background: var(--osir-surface); }
body.order-index #orderManager .accordion-button:focus { box-shadow: none; }
body.order-index #orderManager .accordion-button:focus-visible {
    outline: 2px solid var(--osir-violet-600);
    outline-offset: -2px;
}

/* The module puts a tabler icon before each label (#apps, #settings, #user, #shopping-cart,
   #credit-card) - one per step, and each one describes that step. They are kept rather than
   replaced with numbers, and just sized and coloured to sit in the header. Scoped with the child
   combinator so it cannot reach the arrow inside the product rows below. */
body.order-index #orderManager .accordion-button > .icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    color: var(--osir-violet-600);
}

/* Bootstrap's own ::after chevron is kept rather than replaced, so the open/closed rotation keeps
   working untouched. Only its colour is re-pointed, because the default is a hard-coded grey that
   does not follow the theme's ink. */
body.order-index #orderManager .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236a6d78'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 15px;
    margin-left: auto;
}

/* "4 Items" count. The cart counter uses .text-bg-success, which is left alone on purpose so a
   non-empty cart still reads as green. */
body.order-index #orderManager .accordion-button .badge.bg-info {
    font-family: var(--osir-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--osir-violet-700);
    background: var(--osir-violet-25);
    border: 1px solid var(--osir-violet-200);
    border-radius: 20px;
    padding: 1px 9px;
}

body.order-index #orderManager .accordion-body { padding: 4px 20px 22px 60px; }

/* ---- product rows ------------------------------------------------------------------- */

/* "Domains" / "Hosting" group labels, which the module writes as bare <h4>. */
body.order-index #orderManager .accordion-body h4 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--osir-ink-500);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

/* The module's own .list-group-item links, so they keep their hrefs, click targets and keyboard
   behaviour; only the appearance changes. */
body.order-index #orderManager .list-group {
    display: grid;
    gap: 8px;
    background: none;
    border: 0;
    border-radius: 0;
}

body.order-index #orderManager .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--osir-surface);
    border: 1px solid var(--osir-line);
    border-radius: 10px;
    color: var(--osir-ink-900);
    font-size: 15px;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

body.order-index #orderManager .list-group-item:hover,
body.order-index #orderManager .list-group-item:focus {
    background: var(--osir-violet-25);
    border-color: var(--osir-violet-200);
    color: var(--osir-ink-900);
}

body.order-index #orderManager .list-group-item:focus-visible {
    outline: 2px solid var(--osir-violet-600);
    outline-offset: 2px;
}

body.order-index #orderManager .list-group-item .icon {
    margin-left: auto;
    color: var(--osir-violet-700);
}

/* ---- flatten the module's nested card ----------------------------------------------- */

/* The product list sits inside a borderless card whose p-1 body presses the rows against the
   accordion edge. !important is needed because .p-1 is itself a !important Bootstrap utility. */
body.order-index #orderbutton { background: none; border: 0; }
body.order-index #orderbutton > .card-body { padding: 0 !important; }
body.order-index #orderbutton .row > [class*="col-"] { padding: 0; }