/* ==========================================================================
   Business-hub order modals — privacymanagementgroup.com

   The result modals for /en/cyprus/business-hub/. The reference page carries its
   own .modal-overlay rules inside its document; these standalone pages do not, and
   the site's components/modal.css is the Bootstrap-era one used by the footer's
   Terms pop-up. So this is a small self-contained set, prefixed .hub- so it cannot
   collide with either.
   ========================================================================== */
.hub-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 62, 39, .55);
}
.hub-modal-overlay.active { display: flex; }
body.hub-modal-open { overflow: hidden; }

.hub-modal {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 34px 32px 30px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(11, 62, 39, .28);
    text-align: center;
}
.hub-modal h3 {
    margin: 14px 0 10px;
    font-size: 22px;
    line-height: 1.25;
    color: #0b3e27;
}
.hub-modal p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #46514b;
}
.hub-modal-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: #127749;
    color: #fff;
    font-size: 26px;
    line-height: 1;
}
.hub-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #8a958f;
    cursor: pointer;
}
.hub-modal-close:hover { color: #0b3e27; }

/* The card-brand strip is the payment link itself. */
.hub-modal .method-stripe-link { display: block; max-width: 420px; margin: 4px auto 0; }
.hub-modal .method-stripe-link img { width: 100%; height: auto; display: block; }

/* Submit button while the request is in flight. */
#orderForm [type="submit"].is-busy { opacity: .6; cursor: progress; }

@media (max-width: 480px) {
    .hub-modal { padding: 28px 20px 24px; }
    .hub-modal h3 { font-size: 19px; }
}

/* --- consent -------------------------------------------------------------
   Required and unticked. The native `required` validation is what blocks the
   submit; these are only the looks. */
#orderForm .consent-row, .hub-pay .consent-row { margin-top: 26px; }
#orderForm label.consent, .hub-pay label.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: #46514b;
    cursor: pointer;
}
#orderForm label.consent input[type="checkbox"], .hub-pay label.consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #127749;
    cursor: pointer;
}
#orderForm label.consent a, .hub-pay label.consent a { color: #127749; text-decoration: underline; }
#orderForm label.consent a:hover, .hub-pay label.consent a:hover { color: #0b3e27; }
/* The checkbox sits above the submit row, so that row keeps its own top rule. */
#orderForm .consent-row + .submit-row { margin-top: 18px; padding-top: 18px; }

/* ==========================================================================
   STEP 2 — payment method
   Laid out like /stripe-test.html: a row of method cards over one panel.
   ========================================================================== */
.hub-pay { display: block; margin: 0; padding: 44px 0 56px; background: #f7f5ec; }
.hub-pay[hidden] { display: none; }
.hub-pay__inner { width: min(1000px, 100% - 40px); margin-inline: auto; }
.hub-pay__step {
    margin: 0 0 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: #8a6d2f;
}
.hub-pay h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; color: #0b3e27; }
.hub-pay__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #46514b; }
.hub-pay__ref {
    margin: 0 0 22px; padding: 14px 18px; border-radius: 10px;
    background: #fff; border: 1px solid #e6e1d4; font-size: 14.5px; color: #46514b;
}

.hub-pay__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hub-pay__method {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 16px 12px; border: 1px solid #e6e1d4; border-radius: 10px;
    background: #fff; font: 600 14px/1.2 inherit; color: #0b3e27; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.hub-pay__method:hover { border-color: #c9b586; }
.hub-pay__method.is-active { border-color: #b8975a; background: #f6efdd; }
.hub-pay__method[hidden] { display: none; }
.hub-pay__method:only-child { max-width: 340px; }
.hub-pay__none {
    margin: 0; padding: 16px 18px; border-radius: 10px; background: #fff;
    border: 1px solid #e6e1d4; font-size: 15px; line-height: 1.6; color: #46514b;
}
.hub-pay__icon { font-size: 19px; line-height: 1; }

.hub-pay__panel { display: none; margin-top: 18px; padding: 24px; background: #fff;
                  border: 1px solid #e6e1d4; border-radius: 12px; }
.hub-pay__panel.is-active { display: block; }
.hub-pay__submit { margin-top: 18px; display: inline-block; }
/* `display` on an element beats the [hidden] attribute's UA default, so the two
   submit controls both showed. Anything hidden here stays hidden. */
.hub-pay [hidden] { display: none !important; }
.hub-pay__error { margin: 12px 0 0; color: #8d2b22; font-size: 14px; min-height: 1em; }
.hub-pay__note { margin: 14px 0 0; font-size: 13.5px; color: #6c7a72; }

/* Bank transfer confirmation — no account details on the page; the invoice
   carries them. Shape follows the German wizard's finish step. */
.hub-done h3 { margin: 0 0 12px; font-size: 20px; color: #0b3e27; }
.hub-done h2 { margin: 0 0 12px; font-size: 26px; color: #0b3e27; }   /* #hubDone, the paid state */
.hub-done p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #46514b; max-width: 60ch; }
.hub-done a { color: #127749; }
.hub-done__call {
    display: inline-block; font-weight: 700; white-space: nowrap;
}
.hub-done__sign { margin-top: 18px; color: #0b3e27; }

@media (max-width: 560px) {
    .hub-pay { padding: 32px 0 40px; }
    .hub-pay h2 { font-size: 24px; }
    .hub-pay__panel { padding: 18px; }
    .hub-bank { grid-template-columns: 1fr; gap: 2px 0; }
    .hub-bank dd { margin-bottom: 10px; }
}

/* Invalid fields, the way the order wizard marks them: every empty required
   field outlined at once, not just the first one the browser points at. */
#orderForm .is-invalid,
#orderForm .is-invalid:focus {
    border-color: #c0392b;
    outline-color: #c0392b;
    background: #fdf6f5;
}
#orderForm label.consent input.is-invalid, .hub-pay label.consent input.is-invalid { outline: 2px solid #c0392b; outline-offset: 2px; }

/* The "we already have your order" notice, shown if the visitor navigates away
   from #payment — the order exists, so the form must not come back. */
.hub-pay--note { background: #fff; }
.hub-pay--note h2 { font-size: 24px; }

/* Completed step chip — the page's own .step/.active styling stays as authored. */
#orderSteps .step.done { color: #127749; border-color: #bcd9c9; background: #f1f8f4; }
#orderSteps .step.done .n { color: #127749; }
#orderSteps .step.done::after { content: " ✓"; font-weight: 700; }

/* --- step chips as tabs --------------------------------------------------- */
#orderSteps .step.is-clickable { cursor: pointer; }
#orderSteps .step.is-clickable:hover { border-color: #b8975a; }

/* --- step 2: method tiles ------------------------------------------------- */
.hub-pay__method small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: #6c7a72; }
.hub-pay__nav { display: flex; gap: 12px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.hub-pay__nav .btn-ghost { background: transparent; border: 1px solid #cfc7b4; color: #46514b; }

/* --- step 3: the summary -------------------------------------------------- */
.hub-review { padding: 22px 24px; background: #fff; border: 1px solid #e6e1d4; border-radius: 12px; }
.hub-review__list { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 10px 24px; margin: 0; }
.hub-review__list dt { font-size: 13px; color: #6c7a72; }
.hub-review__list dd { margin: 0; font-size: 15px; color: #0b3e27; font-weight: 600; word-break: break-word; }

@media (max-width: 560px) {
    .hub-review__list { grid-template-columns: 1fr; gap: 2px 0; }
    .hub-review__list dd { margin-bottom: 10px; }
    .hub-pay__nav .btn { width: 100%; }
}


/* The page declares `a.btn.btn-ghost, button.btn.btn-ghost` (0,3,1) for the dark
   hero/CTA band, so on these light panels the Back button was white on white.
   Match that specificity — (0,3,1) as well, and later in the cascade. */
.hub-pay button.btn.btn-ghost {
    background: #fff;
    border: 1px solid #cfc7b4;
    color: #46514b;
}
.hub-pay button.btn.btn-ghost:hover { border-color: #b8975a; color: #0b3e27; background: #fff; }

/* --- method tiles: logos, the way the order wizard shows them -------------- */
.hub-pay__logo { display: grid; place-items: center; width: 100%; height: 54px; }
.hub-pay__logo img { max-height: 46px; max-width: 130px; width: auto; height: auto; }
.hub-pay__cards { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.hub-pay__cards img { height: 20px; width: auto; }
.hub-pay__label { font-weight: 600; font-size: 14px; }

/* --- wallets -------------------------------------------------------------
   Apart from the three tiles: Stripe draws its own buttons and owns their look,
   so they stack full width under a divider instead of joining the grid. */
.hub-wallets { margin-top: 26px; }
.hub-wallets__or {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 16px; font-size: 13px; color: #6c7a72;
}
.hub-wallets__or::before,
.hub-wallets__or::after { content: ""; flex: 1 1 auto; height: 1px; background: #e6e1d4; }
.hub-wallets[hidden] { display: none !important; }
.hub-details[hidden] { display: none !important; }
.hub-details { margin-top: 26px; padding-top: 22px; border-top: 1px solid #e6e1d4; }
.hub-details__title { margin: 0 0 6px; font-size: 17px; color: #0b3e27; }
.hub-details__lead { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #46514b; }
#hubWalletExpress { min-height: 48px; }

/* Placeholder in Stripe's own default shape: wide, black, 48px, small radius. */
/* Once the real buttons mount, the stand-ins go. */

/* The step chips are the scroll target on every step change, and the site header
   is sticky at 74px — scroll-margin keeps them clear of it. This also applies to
   the browser's own jump when the URL hash changes, which a scripted offset
   cannot influence. */
#orderSteps { scroll-margin-top: 92px; }

/* Step 3 while payment is still outstanding: active, not ticked. Three ticks
   beside an unpaid order reads as finished when it is not. */
#orderSteps .step.is-paying { border-color: #b8975a; background: #f6efdd; }
#orderSteps .step.is-paying::after { content: " …"; font-weight: 700; color: #8a6d2f; }
#orderSteps .step.is-paying.done::after { content: " …"; }

/* The payment surface, revealed in place once the order is placed. */
#hubPayArea { margin-top: 24px; }
#hubRedirectNote { margin: 14px 0 0; font-size: 14.5px; color: #46514b; }
#hubRedirectNote a { color: #127749; }

/* After submitting, the consent line is a record rather than a control. */
.hub-pay .consent-row.is-locked { opacity: .65; }
.hub-pay .consent-row.is-locked label.consent { cursor: default; }
.hub-pay .consent-row.is-locked input[type="checkbox"] { cursor: default; }

/* ==========================================================================
   COMPANY REGISTRATION  —  /en/cyprus/register-{limited,holding}-company/
   The same three-step flow as the hub, but selling a basket instead of one
   package: formation + an accounting tier + the optional UBO service, with a
   running total the visitor watches change. Only the basket and the total are
   new; everything above is shared.
   ========================================================================== */

/* --- step chips ----------------------------------------------------------- */
#regSteps .step.done { color: #127749; }
#regSteps .step.done .n { color: #127749; }
#regSteps .step.done::after { content: " ✓"; font-weight: 700; }
#regSteps .step.is-clickable { cursor: pointer; }
#regSteps .step.is-clickable:hover { color: #0b3e27; }

#regForm .is-invalid,
#regForm .is-invalid:focus { border-color: #c0392b; outline-color: #c0392b; background: #fdf6f5; }

/* --- steps 2 and 3 -------------------------------------------------------- */
/* Identical to the hub's, deliberately: same band, same tiles, same wallets. The
   only change is the inner width — here the panels sit inside .wrap (760px), which
   already provides the gutter the hub's own min() was adding. */
#regMethod .hub-pay__inner, #regReview .hub-pay__inner { width: 100%; margin-inline: 0; }
#regMethod, #regReview { margin-top: 0; padding: 36px 40px; }

/* --- the basket ----------------------------------------------------------- */
.reg-basket .reg-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 14px 16px; margin-bottom: 18px;
    background: #fbf8f1; border: 1px solid #e6e1d4; border-radius: 8px;
}
.reg-line strong { color: #0b3e27; font-size: 15px; }
.reg-line__note {
    display: block; margin-top: 2px; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: #8a958f;
}
.reg-line__price { font-weight: 700; color: #0b3e27; white-space: nowrap; font-variant-numeric: tabular-nums; }

.reg-ubo { margin-top: 4px; }
.reg-ubo__cap {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #efe9db;
    font-size: 14px; font-weight: 700; color: #0b3e27;
}
.reg-ubo__amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-radio { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
/* The pages set `input { width: 100% }` for their text fields, which pushed the
   radio to full width and squeezed its text into a column a few words wide. */
.reg-radio input[type="radio"] { width: auto; min-width: 0; flex: none; margin: 4px 0 0; accent-color: #127749; }
.reg-radio span { color: #46514b; }

/* --- the running total ---------------------------------------------------- */
/* Three lines, VAT, and the sum. The same table is rendered again on step 3, so
   what the visitor agreed to is the last thing on screen before Submit. */
.reg-total { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 14.5px; }
/* Inside the basket the table follows the choices directly, so it needs a rule of
   its own to read as the summary rather than as a fourth row of options. */
.reg-basket .reg-total { margin-top: 30px; padding-top: 4px; border-top: 2px solid #0b3e27; }
.reg-total td { padding: 9px 0; border-bottom: 1px solid #efe9db; color: #46514b; vertical-align: top; }
.reg-total td:first-child { color: #0b3e27; }
.reg-total__when { white-space: nowrap; font-size: 12.5px; color: #8a958f; text-align: right; padding-right: 18px !important; }
.reg-total__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-total__vat td { color: #6c7a72; font-size: 13.5px; }
.reg-total__sum td { border-bottom: none; padding-top: 13px; font-weight: 700; font-size: 17px; color: #0b3e27; }
.reg-total .details-note { color: #8a958f; font-weight: 400; }
.reg-total__cap { margin: 26px 0 0; font-size: 18px; color: #0b3e27; }

@media (max-width: 560px) {
    #regMethod, #regReview { padding: 24px 20px; }
    .reg-basket .reg-line { flex-direction: column; gap: 4px; }
    .reg-total__when { display: none; }
}