/* css/wizard-shell.css
 * Generic guest-checkout-wizard shell styles (Fase 28a), extracted from the former
 * css/pages/order_vps_wizard.css with zero intended visual change. Covers everything that is
 * NOT specific to what's being ordered: layout/topbar/stepper chrome, the shared Account step
 * (register/login/2FA card) and Payment step (method list/confirming/success states), the
 * floating toast, the terms modal, and the brand color tokens (incl. the "brand-upstream"
 * override applied via body class, see Database::getBrandNumberByHostname()). Each concrete
 * wizard (wizard/order_vps.php, wizard/order_hosting.php, ...) loads this file plus its own
 * small CSS file for just its configuration-step tiles/fields.
 */

:root {
    --wz-accent: #c17262;
    --wz-accent-dark: #ab6053;
    --wz-accent-rgb: 193, 114, 98;
    --wz-ink: #2b2e37;
    --wz-bg: #f6f3ee;
}
body.brand-upstream {
    --wz-accent: #1E3C56;
    --wz-accent-dark: #14293d;
    --wz-accent-rgb: 30, 60, 86;
    --wz-ink: #1E3C56;
    --wz-bg: #f4f5f7;
}

body.wizard-body {
    background: var(--wz-bg);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wizard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    max-width: 1080px;
    margin: 0 auto;
}
/* Real brand mark, 1-to-1 with the live marketing site header for each brand -- ID-Euro
   renders an inline SVG (same path data as id-euro.eu's own header), Upstream renders its
   real logo PNG instead (no hand-recreated SVG mark available for it), sized to the same
   line-height via .wizard-wordmark img below. currentColor on the ID-Euro mark's bar is set
   dark here since this page's topbar is light, unlike the marketing site's dark nav where
   the same mark renders in cream. */
.wizard-wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--wz-ink);
}
.wizard-logo-mark { flex: none; }
.wizard-wordmark img { height: 30px; width: auto; display: block; }
.wizard-logo-word {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -.02em;
    color: var(--wz-accent);
}

.wizard-lang-switch { display: flex; gap: 4px; }
.wizard-lang-switch a {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #8b8a86;
    text-decoration: none;
}
.wizard-lang-switch a:hover { color: var(--wz-ink); }
.wizard-lang-switch a.active { color: var(--wz-ink); background: #fff; border: 1px solid #e7e2da; }

.wizard-shell { max-width: 1080px; margin: 0 auto; padding: 8px 28px 60px; }

.stepper { display: flex; justify-content: space-between; gap: 4px; margin: 22px 0 28px; }
.stepper .step-dot { flex: 1; text-align: center; position: relative; font-size: 12.5px; color: #8b8a86; }
/* Only steps already reached (done/active) are actually navigable -- see the JS click
   handler, which ignores clicks on a step ahead of the current one. cursor:default there
   signals "not yet" instead of falsely inviting a click that will do nothing. */
.stepper .step-dot.done,
.stepper .step-dot.active { cursor: pointer; }
.stepper .step-dot.done:hover .circle,
.stepper .step-dot.active:hover .circle { box-shadow: 0 0 0 .15rem rgba(var(--wz-accent-rgb), .25); }
.stepper .circle {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e7e2da;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
    font-weight: 700; font-size: 13px; background: #fff; color: #8b8a86;
}
.stepper .step-dot::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
    background: #e7e2da; z-index: -1;
}
.stepper .step-dot:first-child::before { display: none; }
.stepper .step-dot.done .circle { background: #28a745; border-color: #28a745; color: #fff; }
.stepper .step-dot.done::before { background: #28a745; }
/* .active never restyles the circle/line -- the current step is also .done (see JS), so it
   already gets the green treatment. .active only bolds the label, marking "you are here". */
.stepper .step-dot.active .label { color: var(--wz-ink); font-weight: 700; }

.wizard-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .wizard-grid { grid-template-columns: 1fr; } }

.wizard-panel { background: #fff; border: 1px solid #e7e2da; border-radius: 12px; padding: 28px; }
.wizard-panel h2 { margin: 0 0 4px; font-size: 19px; }
.wizard-panel .sub { margin: 0 0 20px; color: #8b8a86; font-size: 13.5px; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.wizard-actions { display: flex; justify-content: space-between; margin-top: 24px; }

label.field { display: block; margin-bottom: 14px; }
label.field .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
label.field .opt { font-weight: 400; color: #8b8a86; }
label.field .hint { display: block; font-size: 12px; color: #8b8a86; margin-top: 4px; }

/* A missed/invalid required field gets the wizard's own accent color instead of the
   generic browser/Bootstrap error red (Tom, 2026-08-14) -- same visual language as the
   warning toast this pairs with, not a separate danger palette. border-color/box-shadow
   already pick up the right brand automatically via the var(--wz-accent) custom property,
   but Bootstrap's own invalid-field icon is a hardcoded-red inline SVG (can't reference a
   CSS variable inside a background-image url()), so that needs one literal copy per brand
   below -- same red-exclamation shape, just recolored to match. */
.wizard-shell .form-control.is-invalid {
    border-color: var(--wz-accent);
    box-shadow: 0 0 0 .15rem rgba(var(--wz-accent-rgb), .15);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23c17262' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c17262' stroke='none'/%3e%3c/svg%3e");
}
.wizard-shell .form-control.is-invalid:focus {
    border-color: var(--wz-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--wz-accent-rgb), .25);
}
body.brand-upstream .wizard-shell .form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231E3C56' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%231E3C56' stroke='none'/%3e%3c/svg%3e");
}

.link-row { font-size: 12.5px; color: #8b8a86; margin-bottom: 16px; }
.link-row a { color: var(--wz-accent); text-decoration: none; font-weight: 600; }

#wzTermsLink { color: var(--wz-accent); text-decoration: none; font-weight: 600; }

.account-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.account-tabs button {
    flex: 1; padding: 9px; border: 1px solid #e7e2da; background: #fff; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer; color: #5b5e68;
}
.account-tabs button.active { border-color: var(--wz-ink); color: var(--wz-ink); background: var(--wz-bg); }

/* Account identity card -- shown both for a visitor already logged in on page load and,
   with the same markup, for one who just registered/logged in via the form (filled in by
   JS from ajax/wizard/account_summary.php). Mirrors .wizard-summary's own .fact-row
   treatment instead of the mismatched, ad-hoc stacked-label look this used to have. */
.wz-account-card {
    background: var(--wz-bg); border: 1px solid #e7e2da; border-radius: 10px;
    padding: 14px 16px; margin: 14px 0 18px;
}
.wz-account-card-name { font-size: 15px; font-weight: 700; color: var(--wz-ink); }
.wz-account-card .fact { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-top: 1px solid #e7e2da; color: #5b5e68; }
.wz-account-card .fact:first-child { border-top: none; }
.wz-account-card .fact strong { color: var(--wz-ink); font-weight: 600; }
.wz-account-card-block { padding: 8px 0; border-top: 1px solid #e7e2da; font-size: 12.5px; }
.wz-account-card-block-label { display: block; margin-bottom: 2px; color: #5b5e68; }
.wz-account-card-block-value { color: var(--wz-ink); font-weight: 600; line-height: 1.5; }

.wizard-summary {
    background: #fff; border: 1px solid #e7e2da; border-radius: 12px; padding: 22px;
    position: sticky; top: 20px;
}
.wizard-summary h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #8b8a86; }
.wizard-summary .plan-name { font-size: 18px; font-weight: 800; margin: 6px 0 2px; color: var(--wz-ink); }
.wizard-summary .plan-specs { font-size: 12.5px; color: #8b8a86; margin-bottom: 14px; }
.wizard-summary .fact { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-top: 1px solid #e7e2da; color: #5b5e68; }
.wizard-summary .fact strong { color: var(--wz-ink); font-weight: 600; }
.wizard-summary .price-big { font-size: 24px; font-weight: 800; margin-top: 14px; color: var(--wz-ink); font-variant-numeric: tabular-nums; }
.wizard-summary .price-big span { font-size: 12.5px; color: #8b8a86; font-weight: 500; }

/* Floating toast, not a block-level banner -- taken out of normal flow so it never pushes
   the rest of the wizard down when it appears/disappears (Tom, 2026-08-13). Recolored to
   the wizard's own terracotta/ink palette instead of Bootstrap's default yellow, which
   clashed with the house style. */
#wizardAlert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: calc(100% - 40px);
    max-width: 480px;
    margin: 0;
    box-shadow: 0 12px 32px rgba(43, 46, 55, .16);
    border-radius: 10px;
    font-size: 13.5px;
}
#wizardAlert.alert-warning {
    background: rgba(var(--wz-accent-rgb), .14);
    border-color: rgba(var(--wz-accent-rgb), .4);
    color: var(--wz-ink);
}
#wizardAlert.alert-danger {
    background: #fbeae7;
    border-color: #e3ada3;
    color: #8a3a2e;
}
#wizardAlert.alert-success {
    background: #e6f4ea;
    border-color: #a8d5b5;
    color: #1e7e34;
}

/* Terms & conditions modal -- house-styled (no Bootstrap JS is loaded on this page), matching
   the wizard's own terracotta/navy tokens rather than a generic dialog. */
.wz-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 46, 55, .55);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wz-modal-card {
    background: #fff;
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(43, 46, 55, .3);
}
.wz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #e7e2da;
}
.wz-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--wz-ink);
}
.wz-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #8b8a86;
    cursor: pointer;
    padding: 0 2px;
}
.wz-modal-close:hover { color: var(--wz-ink); }
.wz-modal-body {
    padding: 20px 22px 24px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.6;
    color: #3a3c44;
}
.wz-modal-body h2 {
    font-size: 14px;
    font-weight: 800;
    color: var(--wz-ink);
    margin: 22px 0 8px;
}
.wz-modal-body h2:first-child { margin-top: 0; }
.wz-modal-body p { margin: 0 0 12px; }
.wz-modal-body ul { margin: 0 0 12px; padding-left: 20px; }
.wz-modal-body li { margin-bottom: 6px; }
.wz-modal-body a { color: var(--wz-accent); }
.wz-modal-body .foreign { font-style: italic; color: #8b8a86; }

/* --- House-style overrides for shared, teal-by-default AdminLTE button components --- */

.wizard-shell .btn-primary {
    background-color: var(--wz-accent);
    border-color: var(--wz-accent);
}
.wizard-shell .btn-primary:hover,
.wizard-shell .btn-primary:focus {
    background-color: var(--wz-accent-dark);
    border-color: var(--wz-accent-dark);
}
.wizard-shell .btn-outline-info {
    color: var(--wz-accent);
    border-color: var(--wz-accent);
}
.wizard-shell .btn-outline-info:hover {
    color: #fff;
    background-color: var(--wz-accent);
    border-color: var(--wz-accent);
}
/* AdminLTE's own selector for this state is
   ".btn-outline-info:not(:disabled):not(.disabled).active, ...:active" -- both the
   persistent ".active" class AND the momentary ":active" (mouse-down) pseudo-class share
   the same teal declaration there. Matching only ".active" left a one-frame teal flash on
   every click, right as the mouse button goes down and before our own JS-added ".active"
   class exists -- :active must be overridden too, with the identical :not() chain, since a
   plain ":active" has lower specificity and would lose to AdminLTE's rule. */
.wizard-shell .btn-group-toggle .btn-outline-info:not(:disabled):not(.disabled).active,
.wizard-shell .btn-group-toggle .btn-outline-info:not(:disabled):not(.disabled):active,
.wizard-shell .btn-group-toggle label.btn-outline-info:not(:disabled):not(.disabled).active,
.wizard-shell .btn-group-toggle label.btn-outline-info:not(:disabled):not(.disabled):active {
    background-color: var(--wz-accent);
    border-color: var(--wz-accent);
    color: #fff;
}
/* Focus ring: AdminLTE's box-shadow here is spread-0 (invisible either way), but fix the
   tint too for correctness rather than leaving a latent teal reference. */
.wizard-shell .btn-outline-info.focus,
.wizard-shell .btn-outline-info:focus {
    box-shadow: 0 0 0 0 rgba(var(--wz-accent-rgb), .5);
}

/* --- Payment step -- kept entirely inside the wizard (Tom, 2026-08-12), never bounces a
   fresh guest through the normal order_checkout.php/order_payment_method.php pages. --- */
.wz-payment-methods { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 4px; }
.wz-payment-option {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border: 1px solid #e7e2da; border-radius: 8px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #2b2e37;
}
.wz-payment-option input { margin: 0; accent-color: var(--wz-accent); }
.wz-payment-option:hover { border-color: var(--wz-accent); }
.wz-payment-option.selected { border-color: var(--wz-accent); box-shadow: 0 0 0 .15rem rgba(var(--wz-accent-rgb), .15); }
.wz-payment-icon { width: 18px; text-align: center; color: var(--wz-accent); font-size: 15px; }
.wz-payment-balance { margin-left: auto; font-size: 12.5px; font-weight: 500; color: #8a8478; }

/* --- Account step: name/company/client-number summary for an already-logged-in visitor. --- */
.wz-account-summary { margin: 14px 0 18px; }
.wz-account-summary-row {
    display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
    font-size: 13.5px; color: #6b6558;
}
.wz-account-summary-label { color: #8a8478; }
.wz-account-summary-value { color: #2b2e37; font-weight: 600; }
.wz-account-summary-name { font-size: 15px; }

.wz-payment-status { text-align: center; padding: 32px 8px; }
.wz-payment-status h2 { margin: 0 0 6px; }
.wz-payment-status .sub { color: #8b8a86; margin: 0 0 18px; }
.wz-spinner {
    width: 34px; height: 34px; margin: 0 auto 18px;
    border: 3px solid #e7e2da; border-top-color: var(--wz-accent); border-radius: 50%;
    animation: wz-spin .8s linear infinite;
}
@keyframes wz-spin { to { transform: rotate(360deg); } }

.wz-status-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 50%; background: rgba(40, 167, 69, .12); color: #28a745;
    display: flex; align-items: center; justify-content: center;
}
.wz-status-pill {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    padding: 7px 14px; border-radius: 999px; background: var(--wz-bg); border: 1px solid #e7e2da;
    font-size: 12.5px; font-weight: 600; color: #5b5e68;
}
.wz-status-pill-spinner {
    width: 12px; height: 12px; flex: none;
    border: 2px solid #e7e2da; border-top-color: var(--wz-accent); border-radius: 50%;
    animation: wz-spin .8s linear infinite;
}