/* ==========================================================================
   123-radio.nl Design System — FOSSBilling orderform skin
   ==========================================================================
   Restyles the Orderbutton order flow (/order, /order/:id, /orderbutton) to
   the 123-radio.nl design language: brand orange #FF7F00, warm ink neutrals,
   Galano Grotesque Bold display type with Poppins body, modest 8px rounding,
   flat surfaces with hairline borders. "Duidelijk, helder, geen poespas."

   Scoped to the order pages' content block and the #orderbutton card so the
   rest of the theme (nav, menu, footer, other pages) is untouched.
   ========================================================================== */

/* Poppins — sanctioned substitute for Galano Grotesque's missing body weights */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* Galano Grotesque — display font, bold only (matches the brand kit) */
@font-face {
    font-family: "Galano Grotesque";
    src: url("../fonts/GalanoGrotesqueBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Galano Grotesque";
    src: url("../fonts/GalanoGrotesqueBoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens (from tokens/colors.css, typography.css, spacing.css)
   -------------------------------------------------------------------------- */
body:is(.order-index, .order-product) .content-block,
#orderbutton {
    --orange-50: #FFF3E6;
    --orange-100: #FFE1C2;
    --orange-300: #FFA84F;
    --orange-500: #FF7F00;
    --orange-600: #E86F00;
    --orange-700: #C05C00;

    --ink-0: #FFFFFF;
    --ink-50: #FAF9F7;
    --ink-100: #F2F0EC;
    --ink-200: #E4E1DA;
    --ink-300: #CFCABE;
    --ink-400: #A9A296;
    --ink-500: #837C6E;
    --ink-600: #625D52;
    --ink-900: #1A1815;
    --ink-950: #100F0D;

    --green-500: #1E8E5A;
    --green-100: #DCF3E7;
    --red-500: #D6412E;
    --red-100: #FBE1DD;

    --color-brand: var(--orange-500);
    --color-brand-hover: var(--orange-600);
    --color-brand-active: var(--orange-700);
    --color-brand-soft: var(--orange-50);

    --surface-sunken: var(--ink-50);
    --surface-card: var(--ink-0);

    --border-default: var(--ink-200);
    --border-strong: var(--ink-300);

    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-tertiary: var(--ink-400);
    --text-on-brand: var(--ink-0);
    --text-link: var(--orange-600);
    --text-link-hover: var(--orange-700);

    --font-display: "Galano Grotesque", "Poppins", sans-serif;
    --font-body: "Poppins", "Galano Grotesque", sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(26, 24, 21, 0.06);
    --shadow-focus: 0 0 0 3px var(--orange-100);

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 120ms;

    --o123-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23837C6E'%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");
    --o123-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C05C00'%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");
}

/* Dark theme — flat warm darks, translucent hairlines, softened brand tint */
[data-bs-theme="dark"] body:is(.order-index, .order-product) .content-block,
[data-bs-theme="dark"] #orderbutton {
    --color-brand-soft: rgba(255, 127, 0, 0.14);

    --surface-sunken: var(--ink-950);
    --surface-card: var(--ink-900);

    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.24);

    --text-primary: var(--ink-50);
    --text-secondary: var(--ink-300);
    --text-tertiary: var(--ink-400);

    --shadow-focus: 0 0 0 3px rgba(255, 127, 0, 0.3);

    --o123-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CFCABE'%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");
    --o123-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFA84F'%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");
}

/* --------------------------------------------------------------------------
   Page chrome on /order and /order/:id — outer card, title, currency picker
   -------------------------------------------------------------------------- */
body:is(.order-index, .order-product) .content-block > .row .card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

body:is(.order-index, .order-product) .content-block > .row .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-default);
    padding: 20px 24px;
}

body:is(.order-index, .order-product) .card-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

body:is(.order-index, .order-product) .card-header .form-select {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    width: auto;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Base type & links inside the orderform
   -------------------------------------------------------------------------- */
#orderbutton {
    font-family: var(--font-body);
    color: var(--text-primary);
}

#orderbutton :is(h1, h2, h3, h4, h5) {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

#orderbutton a:not(.btn):not(.list-group-item) {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

#orderbutton a:not(.btn):not(.list-group-item):hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

#orderbutton.card {
    background: transparent;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Accordion → step cards (mirrors the design system's StepIndicator + Card)
   -------------------------------------------------------------------------- */
#orderManager.accordion {
    counter-reset: o123step;
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-bg: var(--surface-card);
    --bs-accordion-border-color: var(--border-default);
}

#orderManager .accordion-item {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-standard);
}

#orderManager .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--border-strong);
}

#orderManager .accordion-header {
    margin: 0;
}

#orderManager .accordion-button {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--text-primary);
    background: var(--surface-card);
    padding: 16px 20px;
    box-shadow: none;
    border-radius: 0;
    transition: background var(--duration-fast) var(--ease-standard);
}

#orderManager .accordion-button:hover {
    background: var(--surface-sunken);
}

#orderManager .accordion-button:not(.collapsed) {
    background: var(--color-brand-soft);
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 var(--border-default);
}

#orderManager .accordion-button:focus {
    outline: none;
    border-color: transparent;
    box-shadow: var(--shadow-focus);
    z-index: 1;
}

/* Numbered step dots replace the generic icons */
#orderManager .accordion-button > svg.icon {
    display: none;
}

#orderManager .accordion-button::before {
    counter-increment: o123step;
    content: counter(o123step);
    flex: none;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: var(--radius-pill);
    background: var(--ink-100);
    color: var(--ink-600);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

[data-bs-theme="dark"] #orderManager .accordion-button::before {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-300);
}

#orderManager .accordion-button:not(.collapsed)::before {
    background: var(--color-brand);
    color: var(--text-on-brand);
}

#orderManager .accordion-button::after {
    background-image: var(--o123-chevron);
    transition: transform var(--duration-fast) var(--ease-standard);
}

#orderManager .accordion-button:not(.collapsed)::after {
    background-image: var(--o123-chevron-active);
}

#orderManager .accordion-body {
    padding: 20px;
    background: var(--surface-card);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Badges (item counts in step headers, prices)
   -------------------------------------------------------------------------- */
#orderbutton .badge {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

#orderbutton .badge.bg-info {
    --bs-badge-color: var(--orange-700);
    background: var(--color-brand-soft) !important;
    color: var(--orange-700) !important;
}

[data-bs-theme="dark"] #orderbutton .badge.bg-info {
    --bs-badge-color: var(--orange-300);
    color: var(--orange-300) !important;
}

#orderbutton .badge.text-bg-success {
    background: var(--green-100) !important;
    color: var(--green-500) !important;
}

/* --------------------------------------------------------------------------
   Product list (styled like the design system's RadioGroup option cards)
   -------------------------------------------------------------------------- */
#orderManager .list-group {
    gap: 8px;
    border-radius: 0;
}

#orderManager .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md) !important;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

#orderManager .list-group-item:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
    color: var(--text-primary);
}

#orderManager .list-group-item svg.icon {
    color: var(--text-tertiary);
    transition: color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

#orderManager .list-group-item:hover svg.icon {
    color: var(--color-brand);
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
#orderbutton .btn {
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

#orderbutton .btn:not(.btn-sm) {
    padding: 10px 20px;
    font-size: 0.9375rem;
}

#orderbutton .btn-sm {
    padding: 7px 14px;
    font-size: 0.8125rem;
}

#orderbutton .btn:active:not(:disabled) {
    transform: translateY(1px);
}

#orderbutton .btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-color: var(--text-on-brand);
    --bs-btn-hover-bg: var(--color-brand-hover);
    --bs-btn-hover-border-color: var(--color-brand-hover);
    --bs-btn-hover-color: var(--text-on-brand);
    --bs-btn-active-bg: var(--color-brand-active);
    --bs-btn-active-border-color: var(--color-brand-active);
    --bs-btn-active-color: var(--text-on-brand);
    --bs-btn-disabled-bg: var(--ink-100);
    --bs-btn-disabled-border-color: var(--ink-100);
    --bs-btn-disabled-color: var(--text-tertiary);
}

#orderbutton .btn-primary:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Secondary-style actions (remove item / remove promo) */
#orderbutton :is(.btn-dark, .btn-warning) {
    --bs-btn-bg: var(--surface-card);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--color-brand-soft);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-active-bg: var(--color-brand-soft);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-primary);
}

#orderbutton .btn-link {
    font-family: var(--font-display);
    color: var(--text-link);
    text-decoration: none;
}

#orderbutton .btn-link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
#orderbutton :is(.form-control, .form-select) {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

#orderbutton :is(.form-control, .form-select):not(.form-floating *) {
    min-height: 44px;
}

#orderbutton :is(.form-control, .form-select):focus {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Floating fields keep Bootstrap's transparent placeholder (the label fills
   that role until focus), so only style placeholders of plain inputs. */
#orderbutton .form-control:not(.form-floating *)::placeholder {
    color: var(--text-tertiary);
}

#orderbutton :is(.form-label, .form-check-label, .form-floating > label) {
    font-family: var(--font-body);
    color: var(--text-secondary);
}

#orderbutton .input-group-text {
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-body);
}

#orderbutton .form-check-input {
    border: 1px solid var(--border-strong);
    transition: background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

#orderbutton .form-check-input:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

#orderbutton .form-check-input:focus {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   Product details panel (.well) inside configuration step
   -------------------------------------------------------------------------- */
#orderManager .well {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 20px;
}

#orderManager hr {
    border-color: var(--border-default);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Cart tables
   -------------------------------------------------------------------------- */
#orderManager .table {
    --bs-table-bg: var(--surface-card);
    --bs-table-striped-bg: var(--surface-card);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-default);
    font-size: 0.9375rem;
    border-color: var(--border-default);
}

#orderManager .table thead th {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    background: var(--surface-sunken);
}

#orderManager .table :is(th, td) {
    padding: 10px 14px;
    vertical-align: middle;
}

#orderManager .table del {
    color: var(--text-tertiary);
}

#orderManager .table .text-success {
    color: var(--green-500) !important;
}

/* --------------------------------------------------------------------------
   Payment gateway picker
   -------------------------------------------------------------------------- */
#orderManager .invoice-gateway {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md) !important;
    background: var(--surface-card);
    transition: border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

#orderManager .invoice-gateway:hover {
    border-color: var(--orange-300);
}

#orderManager .invoice-gateway:has(.btn-check:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
    box-shadow: inset 0 0 0 1px var(--color-brand);
}

#orderManager .invoice-gateway:has(.btn-check:focus-visible) {
    box-shadow: var(--shadow-focus);
}

#orderManager .invoice-gateway .btn {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
#orderbutton .text-muted {
    color: var(--text-secondary) !important;
}

/* Service order forms ship a default Tabler-blue accent bar; rebrand it.
   Products with an explicitly configured package_color keep their color. */
#orderManager [style*="#206bc4"] {
    border-left-color: var(--color-brand) !important;
}