#package-config, #order-summary, #create-account, #pay_confirm {
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--light);
}

#create-account {
    border-top: 1px solid var(--light);
}

#summary-details .btn {
    margin: 10px 0px;
}

.pass-reset {
    padding-top: 5px;
    font-size: 12px;
    font-style: italic;
}

.card-order {
    background-color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 15px;
}

.card-order .row.card-fix {
    margin: 0px -20px;
}

.card-order .table {
    border: none;
}

.card-order .table > thead > tr > th {
    background: none;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.card-order .table > tbody > tr > td {
    border: none;
    padding: 8px 4px 4px 4px;
}

.card-order .total-due {
    text-align: right;
}

.card-order .total-due h4 {
    margin-top: 5px;
}

.currency {
    margin-top: 10px;
}

.currency form {
    float: right;
    margin: 10px 0px;
}

.currency form * {
    margin-right: 0px !important;
    margin-left: 5px;
    display: flex;
}

@media (max-width: 768px) {
    .currency {
        margin-top: 0px;
    }

    .currency form {
        float: none;
        width: 100%;
        margin: 0px 0px 15px 0px;
    }

    .currency form * {
        width: 100% !important;
        display: block;
        margin: 0px !important;
    }
}

.gateway-logo {
    object-fit: cover;
    max-height: 40px;
    max-width: 125px;
    padding-left: 5px;
    box-sizing: border-box;
}

#payment-method .card-body .px-2:last-child label {
    margin-bottom: 5px;
}

.payment_type, .gateway {
    margin-right: 5px;
}

.section-title {
    margin-top: 10px;
}

.section-title h3 {
    font-weight: bold;
}

/* Slider Styles */
.package-slider {
    margin-bottom: 20px;
}

.package-slider .slider.slider-horizontal {
    margin: 10px 15px;
    box-sizing: border-box;
}

.package-slider .slider.slider-horizontal {
    width: calc(100% - 30px);
}

.package-slider .slider.slider-horizontal .slider-track-high {
    background: var(--secondary) !important;
    opacity: 0.5;
}

.package-slider .slider.slider-horizontal .slider-selection {
    background: var(--info) !important;
}

.package-slider .slider .slider-handle {
    background: var(--info) !important;
}

.package-slider .package-block {
    display: none;
}

.package-slider .package-block.active {
    display: block;
}

.package-slider .package-selected {
    padding: 10px 20px;
}

.package-slider .package-selected h3 {
    margin-bottom: 0px;
}

.package-slider .instructions {
    padding: 0px 10px;
    font-style: italic;
    color: var(--secondary);
}

/* Boxes styles */
.package {
    margin: 10px 0 15px;
    background: #fff;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 1px #acacac;
    -moz-box-shadow: 0 3px 1px #acacac;
    box-shadow: 0 3px 1px #acacac;
    border: 2px solid #fff;
    opacity: 0.6;
}

.package.selected {
    opacity: 1;
}

.package > .selected-btn, .package.selected > .unselected-btn {
    display: none;
}

.package > .unselected-btn, .package.selected > .selected-btn {
    display: block;
}

.package .package-name {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.package-name.card-header {
    padding: 5px 10px;
}

.package ul {
    text-align: left;
}

.package p {
    border-bottom: 1px dashed #efefef;
    margin: 0;
    padding: 5px 10px;
}

.package h4 {
    font-size: 18px;
    padding: 5px 0;
    margin-top: 0;
    margin-bottom: 0;
}

.package .price-box {
    background-color: #efefef;
    padding: 1px 0;
}

.package .price-box p {
    padding: 0;
    margin-bottom: -10px;
    margin-top: 5px;
    font-style: italic;
    font-size: 12px;
    color: #999;
}

.package .order {
    padding: 5px;
    background-color: #efefef;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.package-groups {
    margin-top: 20px;
}

.package-groups .list-group-item {
	margin-bottom: 20px;
    border-top-width: 1px;
}

/* Whois styles */
.card {
    background-color: inherit;
}

.whois {
	margin-top: 15px;
	margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.05);
    background-repeat: no-repeat;
    background-position: 110% -70px;
    background-image: url(../images/globe.svg);
    padding: 25px;
    border-radius: 8px;
}

.whois div.checkbox label {
    padding-right: 5px;
}

.whois div.tlds, div.search {
    margin: 0 auto;
    text-align: center;
    display: block;
}

.whois div.tlds {
    margin-bottom: 0;
}

.whois .show_more {
	margin-left: 5px;
}

.domains {
    font-size: 14px;
}

#queue_nonempty_btns, #queue_continue_btns {
    display: none;
}

#empty_cart {
    margin-bottom: 20px;
}

/* List Styles */
.package-list {
    margin-top: 10px;
    background-color: #fff;
}

.package-list .package-item {
    margin-top: 0;
    padding: 0px 20px;
}

.package-list h3 {
    margin-top: 5px;
}

.package-list .instructions {
    margin-bottom: 2px;
    font-style: italic;
    color: #999;
}

.package-list .selected-btn, .package-list.selected .unselected-btn {
    display: none;
}

.package-list .unselected-btn, .package-list.selected .selected-btn {
    display: block;
}
/* ---------------------------------------------------------------------------
   Melonslab deployment form

   The pack renders inside the client template, so where the Melonslab theme is
   active these pick up its tokens; the fallbacks keep the form presentable
   under any other template.
   --------------------------------------------------------------------------- */
.ml-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ml-order-head h3 {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
    color: var(--ml-ink, #212529);
}
.ml-order-head p {
    margin: 0;
    max-width: 70ch;
    color: var(--ml-muted, #6c757d);
}
.ml-order-currency { margin-left: auto; }

/* A group's [notice:...] banner, such as the port 25 policy */
.ml-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
    padding: 0.7rem 0.9rem;
    max-width: 70ch;
    border: 1px solid var(--ml-warn-line, #f0d58c);
    border-radius: var(--ml-r, 0.5rem);
    background: var(--ml-warn-bg, #fff8e1);
    color: var(--ml-warn-text, #6b4e00);
    font-size: 0.925rem;
}
.ml-notice i { margin-top: 0.2rem; }

/* Shown under the currency dropdown while the cart holds items, because
   Blesta only lets the currency change on an empty cart. */
.ml-currency-locked {
    display: block;
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--ml-muted, #6b7280);
}

/* The stock pack fades every unselected box to 60% opacity, which makes the
   plans you have not picked yet hard to read - exactly the ones being compared.
   Selection is carried by the border and the button instead. */
.package-boxes .package,
.package-boxes .package.selected {
    opacity: 1;
    margin: 0;
    width: 100%;
    text-align: left;
    background: var(--ml-surface, #fff);
    border: 1px solid var(--ml-border, #dee2e6);
    border-radius: var(--ml-r-xl, 0.5rem);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
/* The whole card selects the plan, not just the button, so every part of a
   selectable card says so. Stated outright rather than only on :hover, and
   withheld from the card already selected and from sold out ones, which have
   nothing to click. */
.package-boxes .package:not(.selected):not(.ml-plan-unavailable),
.package-boxes .package:not(.selected):not(.ml-plan-unavailable) * {
    cursor: pointer;
}
.package-boxes .package:hover {
    border-color: var(--ml-border-strong, #adb5bd);
}
.package-boxes .package.selected {
    border-color: var(--ml-go, #0f9d58);
    box-shadow: 0 0 0 1px var(--ml-go, #0f9d58);
}
.package-boxes .ml-plan-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
/* Plans do not all list the same number of specs, so the shorter ones leave a
   gap. Auto margins on a flex item split that gap evenly, centring the list
   between the price and the footer instead of hanging it off the top. */
.ml-plan-specs { margin-top: auto; margin-bottom: auto; }
.package-boxes .card-footer {
    background: transparent;
    border-top: 1px solid var(--ml-hairline, #e9ecef);
    padding: 1rem 1.25rem;
}

.ml-plan-name {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1.0625rem;
    margin: 0 0 0.75rem;
    color: var(--ml-ink, #212529);
}
/* Stock `.package p` sets a dashed divider, zero margin and its own padding,
   and at (0,1,1) it beats a single class - which is why the price sat flush
   against the spec list. Matched with two classes and retuned: the divider is
   the line the list is centred against, so the space under it matches the card
   body's bottom padding. */
.package-boxes .ml-plan-price {
    margin: 0;
    padding: 0 0 0.85rem;
    line-height: 1.2;
    border-bottom: 1px solid var(--ml-hairline, #e9ecef);
}
.package-boxes .ml-plan-specs { padding-top: 1.25rem; }
.ml-plan-amount {
    font-family: var(--ml-display, inherit);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ml-ink, #212529);
    font-variant-numeric: tabular-nums;
}
.ml-plan-term { color: var(--ml-muted, #6c757d); font-size: 0.9375rem; }
.ml-plan-setup {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ml-muted, #6c757d);
}
.ml-plan-specs { font-size: 0.875rem; color: var(--ml-body, #495057); width: 100%; }
.ml-plan-specs ul { list-style: none; padding: 0; margin: 0; }
.ml-plan-specs li { padding: 0.2rem 0; }
.ml-plan-specs p:last-child { margin-bottom: 0; }
.ml-plan-unavailable { opacity: 0.55; }

/* Recommended / featured badge for plans and groups */
.ml-plan-badge-wrap {
    margin-bottom: 0.625rem;
}
.ml-badge-recommended {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    border-radius: var(--ml-r, 0.375rem);
    background: var(--ml-ok-bg, rgba(4, 140, 60, 0.12));
    color: var(--ml-ok-text, #048c3c);
    border: 1px solid rgba(4, 140, 60, 0.25);
    letter-spacing: 0.01em;
}
.ml-badge-recommended .fas {
    font-size: 0.7rem;
}

/* Card highlight for recommended plans */
.package-boxes .package.ml-plan-recommended:not(.selected) {
    border-color: rgba(15, 157, 88, 0.45);
}
.package-boxes .package.ml-plan-recommended:not(.selected):hover {
    border-color: var(--ml-go, #0f9d58);
}


/* This column is not just the total: summary.pdt puts the cart, the Empty Cart
   button and the whole Payment Method section in it. Sticking that stack was a
   bad trade - taller than the viewport it pins with its bottom off screen, and
   it ran into the section below. It scrolls with the page. */
.ml-order-summary { margin-bottom: 1.5rem; }

/* Only the totals follow the page down. The payment section shares this column
   and is far too tall to pin: sticking the pair put its buttons off screen. */
@media (min-width: 992px) {
    .ml-summary-sticky {
        position: sticky;
        top: 1.5rem;
    }
}

/* The account step follows both columns, so it needs its own air */
#create-account { padding-top: 1.5rem; }

.ml-order-cart {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

/* Steps ------------------------------------------------------------------- */
.ml-order .section-title h3,
.ml-step-title {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
    color: var(--ml-ink, #212529);
}
.ml-step-head { margin-bottom: 1rem; }
.ml-step-note { color: var(--ml-muted, #6c757d); margin-bottom: 1rem; }
.ml-step {
    background: var(--ml-surface, #fff);
    border: 1px solid var(--ml-border, #dee2e6);
    border-radius: var(--ml-r-xl, 0.5rem);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.ml-field-title {
    font-family: var(--ml-display, inherit);
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--ml-ink, #212529);
}
.ml-step > .ml-step-title + form .ml-field-title:first-of-type,
.ml-step .ml-field-title:first-child { margin-top: 1rem; }
.ml-step-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Term choice ------------------------------------------------------------- */
.ml-terms { display: grid; gap: 0.5rem; margin-bottom: 0; }
.ml-term {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ml-border, #dee2e6);
    border-radius: var(--ml-r, 0.375rem);
    cursor: pointer;
    font-weight: 400;
    transition: border-color 0.15s ease;
}
.ml-term:hover { border-color: var(--ml-border-strong, #adb5bd); }
.ml-term input { margin: 0; flex: 0 0 auto; }
.ml-term-text { display: flex; flex-direction: column; gap: 0.1rem; }
.ml-term-label { color: var(--ml-ink, #212529); }
.ml-term-note { font-size: 0.8125rem; color: var(--ml-muted, #6c757d); }
.ml-term:has(input:checked) {
    border-color: var(--ml-go, #0f9d58);
    box-shadow: inset 0 0 0 1px var(--ml-go, #0f9d58);
}

/* Addons and payment options --------------------------------------------- */
.ml-choice label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-weight: 400;
}
.ml-addon-group {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 1rem 0 0.5rem;
    color: var(--ml-ink, #212529);
}
.ml-pay-option + .ml-pay-option {
    border-top: 1px solid var(--ml-hairline, #e9ecef);
    padding-top: 1.25rem;
}
.ml-pay-option h4 {
    font-family: var(--ml-display, inherit);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Domain lookup ----------------------------------------------------------- */
/* Scoped to `.whois div.form-group.tlds` (0,3,1) because core's
   `.whois div.tlds` is (0,2,1) and a two-class selector silently loses to it:
   the previous `.ml-lookup-search .tlds` margin never applied at all. This
   selector also matches the stock markup as well as our own, so it works
   whether or not the customised lookup template is deployed.

   The checkbox labels align on the baseline while the "Show all" button aligns
   middle, which left the button sitting 3.7px low. A flex row puts both on one
   axis; justify-content restores the centring core got from text-align, which
   flex ignores. */
.whois div.form-group.tlds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem 0.5rem;
    margin: 0.85rem 0 0;
}
.whois div.form-group.tlds label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.28rem 0.65rem;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--ml-border, #dee2e6);
    background: var(--ml-surface, #fff);
    color: var(--ml-ink, #212529);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.whois div.form-group.tlds label:hover {
    border-color: var(--ml-border-strong, #adb5bd);
}
.whois div.form-group.tlds label:has(input:checked) {
    border-color: var(--ml-go, #0f9d58);
    background: var(--ml-ok-bg, rgba(4, 140, 60, 0.1));
    color: var(--ml-ok-text, #048c3c);
}
/* core: .whois .show_more { margin-left: 5px } — the flex gap spaces it now */
.whois div.form-group.tlds .show_more { margin-left: 0; }

.ml-tld-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    font-size: 0.8125rem;
}
.ml-tld-quick-actions .ml-tld-preset {
    padding: 0.15rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--ml-muted, #6c757d);
    text-decoration: none;
}
.ml-tld-quick-actions .ml-tld-preset:hover {
    color: var(--ml-ink, #212529);
    text-decoration: underline;
}
.ml-tld-sep {
    color: var(--ml-muted, #6c757d);
    opacity: 0.6;
}

.ml-lookup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
}
.ml-lookup-actions .btn-link { padding-left: 0; padding-right: 0; }
.ml-lookup .domains .table > tbody > tr > td { vertical-align: middle; }

/* Spotlight availability card */
.ml-domain-spot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1rem;
    border-radius: var(--ml-r-xl, 0.5rem);
    border: 1px solid var(--ml-border, #dee2e6);
    background: var(--ml-surface, #fff);
}
.ml-domain-spot-available {
    border-color: var(--ml-go, #0f9d58);
    box-shadow: 0 0 0 1px rgba(15, 157, 88, 0.25);
}
.ml-domain-spot-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.ml-domain-spot-name {
    font-family: var(--ml-display, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ml-ink, #212529);
    word-break: break-all;
}
.ml-domain-spot-note {
    font-size: 0.875rem;
    color: var(--ml-muted, #6c757d);
}
.ml-domain-spot-cta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}
.ml-domain-spot-price {
    font-family: var(--ml-display, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ml-ink, #212529);
    font-variant-numeric: tabular-nums;
}

/* Smart domain name suggestion chips */
.ml-domain-suggestions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
}
.ml-domain-suggestions-label {
    color: var(--ml-muted, #6c757d);
    font-weight: 500;
    margin-right: 0.15rem;
}
.ml-domain-suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px dashed var(--ml-border-strong, #adb5bd);
    background: transparent;
    color: var(--ml-ink, #212529);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ml-domain-suggestion-chip:hover {
    border-style: solid;
    border-color: var(--ml-go, #0f9d58);
    color: var(--ml-ok-text, #048c3c);
    background: var(--ml-ok-bg, rgba(4, 140, 60, 0.08));
}

.ml-domain-row-selected {
    background-color: var(--ml-ok-bg, rgba(4, 140, 60, 0.06));
}

/* TLD pricing directory section */
.ml-tld-pricing-section {
    margin-top: 1rem;
}
.ml-tld-pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}
.ml-tld-pricing-head h4 {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 0.2rem;
    color: var(--ml-ink, #212529);
}
.ml-tld-pricing-head p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ml-muted, #6c757d);
}
.ml-tld-filter-wrap {
    min-width: 240px;
}
.ml-tld-pick {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.ml-tld-pick:hover .ml-tld-name {
    color: var(--ml-ok-text, #048c3c);
    text-decoration: underline;
}
.ml-tld-name {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ml-ink, #212529);
}
.ml-tld-cat {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    vertical-align: middle;
}
.ml-tld-cat-nordic {
    background: rgba(14, 116, 144, 0.12);
    color: #0e7490;
    border: 1px solid rgba(14, 116, 144, 0.25);
}
.ml-tld-cat-popular {
    background: var(--ml-ok-bg, rgba(4, 140, 60, 0.12));
    color: var(--ml-ok-text, #048c3c);
    border: 1px solid rgba(4, 140, 60, 0.25);
}
.ml-tld-cat-creative {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.22);
}
.ml-free-transfer-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.55em;
}


/* Spec list --------------------------------------------------------------- */
.ml-specs { list-style: none; padding: 0; margin: 0; }
.ml-specs li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    line-height: 1.4;
}
.ml-specs .fas {
    color: var(--ml-muted, #6c757d);
    font-size: 0.8125rem;
    flex: 0 0 auto;
}
.package.selected .ml-specs .fas { color: var(--ml-go, #0f9d58); }

/* A note under the primary action is reassurance, not a warning */
.ml-cta-note {
    display: block;
    clear: both;
    margin-top: 0.5rem;
    color: var(--ml-muted, #6c757d);
    text-align: right;
}

/* Personal or business ---------------------------------------------------- */
.ml-account-type { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ml-account-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--ml-border, #dee2e6);
    border-radius: var(--ml-r, 0.375rem);
    cursor: pointer;
    font-weight: 400;
}
.ml-account-type-option:has(input:checked) {
    border-color: var(--ml-go, #0f9d58);
    box-shadow: inset 0 0 0 1px var(--ml-go, #0f9d58);
}
/* The theme draws the control itself; only the alignment differs here, since
   this row is centre aligned rather than top aligned like the checkbox rows. */
.ml-account-type-option input[type="radio"] {
    margin: 0;
}

/* Log in or sign up ------------------------------------------------------- */
.ml-auth-radios { display: none; }
.ml-auth-switch {
    margin: -0.25rem 0 1.25rem;
    color: var(--ml-muted, #6c757d);
}
.ml-auth-switch a { font-weight: 600; }

/* ---------------------------------------------------------- group cards --
   The package group chooser. Stock Blesta lists group names in a
   `.list-group`, which on a form with two groups is two thin bars in a lot
   of dark space. These are the plan cards' vocabulary at a larger size,
   because choosing a group is the same kind of decision as choosing a plan
   and should not look like a menu. */
.ml-group-boxes { align-items: stretch; }

.ml-group-card {
    width: 100%;
    /* .card supplies this in Bootstrap, but display is overridden below and
       stretched-link needs a positioned ancestor to cover */
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ml-surface, #fff);
    border: 1px solid var(--ml-border, #dee2e6);
    border-radius: var(--ml-r-xl, 0.5rem);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* The whole card is the hit area via .stretched-link, so it has to look
   like one: hover state on the card rather than only on the button. */
.ml-group-card:hover,
.ml-group-card:focus-within {
    border-color: var(--ml-go, #0f9d58);
    box-shadow: 0 0 0 1px var(--ml-go, #0f9d58);
    transform: translateY(-1px);
}

.ml-group-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.25rem;
}

/* Icon + name on one baseline. The icon is a soft-tinted square in the brand
   green, matching the round marks the marketing service cards use. */
.ml-group-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ml-group-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ml-r-md, 0.5rem);
    background: var(--ml-ok-bg, rgba(4, 140, 60, 0.1));
    color: var(--ml-ok-text, #048c3c);
    font-size: 1.1rem;
}

.ml-group-name {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    color: var(--ml-ink, #212529);
}

.ml-group-badge { align-self: flex-start; margin-top: 0.75rem; }
.ml-group-badge-head { align-self: center; }
.ml-group-badge-inline { margin-left: 0.5rem; font-size: 0.8125rem; vertical-align: middle; }

.ml-group-card.ml-group-recommended {
    border-color: rgba(15, 157, 88, 0.45);
}


/* Pushed to the bottom so footers line up across cards of unequal length */
.ml-group-specs { margin-top: 1rem; margin-bottom: auto; }
.ml-group-specs p:last-child { margin-bottom: 0; }

.ml-group-card .card-footer {
    background: transparent;
    border-top: 1px solid var(--ml-hairline, #e9ecef);
    padding: 1rem 1.5rem;
}

/* Bootstrap 4 has no .stretched-link; the client theme is still BS4, so it
   is defined here rather than assumed. */
.ml-group-card .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* A description may open with a sentence before its spec list. Muted and
   tight against the list, so it reads as an introduction rather than as a
   paragraph that happens to sit above some icons. */
/* Matched with the card so it beats stock `.card p { margin-bottom: 0 }` in
   application.min.css, which at (0,1,1) outranks a lone class - the same
   trap as `.package p` further up. A single .ml-specs-lead rule looked
   correct in the file and did nothing on the page.

   Rows sit 0.5rem apart (0.25rem padding either side), so the gap under the
   lead has to clear that by enough to read as a break rather than as one
   more row. */
.card .ml-specs-lead {
    color: var(--ml-muted, #6c757d);
    margin: 0 0 1.125rem;
}
.card .ml-specs-lead:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- next steps ----
   The panel under a paid order. The customer has just handed over money for
   something they cannot see yet, so this answers the three questions they
   are about to have - is it coming, how will I know, and what if it isn't -
   before they go looking for a support form. */
.ml-next-steps { margin-top: 1.5rem; }

.ml-next-title {
    font-family: var(--ml-display, inherit);
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0 0 1rem;
    color: var(--ml-ink, #212529);
}
.ml-next-title .fas { color: var(--ml-go, #0f9d58); margin-right: 0.5rem; }

/* Beats stock `.card p { margin-bottom: 0 }` in application.min.css, which
   at (0,1,1) outranks a lone class */
.card .ml-next-lead { margin: 0 0 0.75rem; }
.card .ml-next-lead:last-of-type { margin-bottom: 1rem; }

.card .ml-next-help {
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ml-hairline, #e9ecef);
    color: var(--ml-muted, #6c757d);
    font-size: 0.9375rem;
}

.ml-next-actions {
    background: transparent;
    border-top: 1px solid var(--ml-hairline, #e9ecef);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ml-next-secondary { color: var(--ml-muted, #6c757d); }

.ml-group-icon-inline { color: var(--ml-ok-text, #048c3c); margin-right: 0.4rem; }

/* Order complete ----------------------------------------------------------
   The items table sits in .table-responsive, which the theme frames. The
   .card-order td padding above (4px sides) beats the theme's gutter, so the
   text ran into the frame. Subtotal and taxes are the table's footer. */
.ml-complete-items .table > thead > tr > th,
.ml-complete-items .table > tbody > tr > td,
.ml-complete-items .table > tfoot > tr > td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}
.ml-complete-items .table > thead > tr > th:first-child,
.ml-complete-items .table > tbody > tr > td:first-child,
.ml-complete-items .table > tfoot > tr > td:first-child { padding-left: 1.25rem; }
.ml-complete-items .table > thead > tr > th:last-child,
.ml-complete-items .table > tbody > tr > td:last-child,
.ml-complete-items .table > tfoot > tr > td:last-child { padding-right: 1.25rem; }
.ml-complete-items .table > tfoot > tr:first-child > td {
    border-top: 1px solid var(--ml-border, #dee2e6);
    padding-top: 0.85rem;
}
.ml-complete-items .table > tfoot > tr > td { border-bottom: 0; }