.hh-checkout {
    max-width: 1080px;
    margin: 0 auto 40px;
}

.hh-checkout-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.hh-checkout-heading h2 {
    margin-top: 0;
    margin-bottom: 5px;
}

.hh-checkout-heading p {
    margin-bottom: 0;
}

.hh-currency {
    margin-top: 6px;
}

.hh-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.hh-progress span {
    flex: 1 1 0;
    min-width: 120px;
    padding: 8px 10px;
    border-bottom: 2px solid #e5e5e5;
    color: #777;
    font-size: 12px;
}

.hh-progress span.is-active {
    border-bottom-color: currentColor;
    color: inherit;
    font-weight: 700;
}

.hh-step-panel {
    margin-bottom: 18px;
}

.hh-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.hh-panel-heading .panel-title {
    margin: 0;
}

.hh-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.hh-category.is-active {
    box-shadow: inset 0 0 0 1px currentColor;
}

.hh-product {
    height: calc(100% - 20px);
    margin-bottom: 20px;
}

.hh-product .panel-body {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.hh-product h4 {
    margin-top: 0;
}

.hh-product-price {
    margin: 14px 0;
}

.hh-product-price strong {
    display: block;
    font-size: 24px;
    line-height: 1.15;
}

.hh-product-price span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.hh-mini-features {
    margin: 0 0 16px;
    padding-left: 18px;
    font-size: 12px;
    flex: 1 1 auto;
}

.hh-mini-features li {
    margin-bottom: 4px;
}

.hh-domain-inline {
    max-width: 800px;
}

.hh-domain-search-result {
    margin-top: 12px;
}

.hh-domain-search-result .alert {
    margin-bottom: 10px;
}

.hh-tld-shortlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    font-size: 12px;
}

.hh-config-options {
    margin-top: 5px;
}

.hh-config-option {
    margin-bottom: 15px;
}

.hh-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 16px;
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.hh-step-actions strong {
    display: block;
    font-size: 18px;
}

.hh-account-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.hh-logged-in {
    margin-bottom: 0;
}

.hh-review {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px;
}

.hh-review-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f1f1;
}

.hh-review-row:last-child {
    border-bottom: 0;
}

.hh-review-price {
    font-weight: 700;
}

.hh-order-loading {
    opacity: .65;
    pointer-events: none;
}

@media (max-width: 767px) {
    .hh-checkout-heading {
        display: block;
    }

    .hh-step-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hh-step-actions .btn {
        width: 100%;
    }
}


.hh-hosting-domain {
    margin-top: 14px;
}

.hh-domain-mode-buttons {
    margin-bottom: 16px;
}

.hh-hosting-domain-name {
    max-width: 720px;
}

.hh-total-note {
    margin-top: 10px;
    font-size: 11px;
}

.hh-config-option .form-control {
    max-width: 100%;
}

@media (max-width: 767px) {
    .hh-domain-mode-buttons {
        display: flex;
        width: 100%;
    }

    .hh-domain-mode-buttons .btn {
        flex: 1 1 0;
        white-space: normal;
    }
}


.hh-deeplink-note {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 11px;
}


/* v0.8 card hierarchy: plan -> price -> specs -> action */
.hh-product .panel-body {
    min-height: 285px;
}

.hh-product h4 {
    margin: 0 0 8px;
    min-height: 24px;
    font-size: 17px;
    font-weight: 700;
}

.hh-product-price {
    margin: 4px 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #eeeeee;
}

.hh-product-price strong {
    display: inline-block;
    margin-right: 5px;
    font-size: 25px;
    line-height: 1.1;
}

.hh-product-price span {
    display: inline-block;
    margin-top: 0;
    font-size: 12px;
}

.hh-product-specs {
    flex: 1 1 auto;
    margin-bottom: 15px;
}

.hh-product-spec-row {
    position: relative;
    padding: 5px 0 5px 18px;
    color: inherit;
    font-size: 12px;
    line-height: 1.45;
}

.hh-product-spec-row:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 5px;
    font-weight: 700;
}

.hh-mini-features {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.hh-mini-features li {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 18px;
    line-height: 1.45;
}

.hh-mini-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 5px;
    font-weight: 700;
}


.hh-availability { min-height:18px; margin:4px 0 9px; font-size:11px; font-weight:600; }
.hh-config-os { grid-column:1 / -1; }
.hh-os-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; }
.hh-os-card { position:relative; display:block; margin:0; cursor:pointer; }
.hh-os-card input { position:absolute; opacity:0; }
.hh-os-card span { display:block; padding:12px 13px; border:1px solid #ddd; border-radius:4px; background:#fff; }
.hh-os-card input:checked + span { border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; background:#f8f9fa; }
.hh-ip-stepper { display:grid; grid-template-columns:42px minmax(80px,130px) 42px; gap:6px; }
.hh-ip-stepper .form-control { text-align:center; }
.hh-inline-error { margin-bottom:0; }
.hh-terms { margin:14px 0; }
.hh-created-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.hh-created-summary > div { padding:12px; border:1px solid #e5e5e5; border-radius:4px; }
.hh-created-summary span,.hh-created-summary strong { display:block; }
.hh-created-summary strong { margin-top:4px; font-size:18px; }
.hh-created-actions { display:flex; flex-wrap:wrap; gap:8px; }
.hh-deployment-timeline { margin-bottom:18px; }
.hh-deploy-item { display:grid; grid-template-columns:34px 1fr; gap:12px; position:relative; padding:7px 0 16px; opacity:.45; }
.hh-deploy-item > span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #bbb; border-radius:50%; background:#fff; font-weight:700; z-index:1; }
.hh-deploy-item:not(:last-child):after { content:""; position:absolute; left:14px; top:37px; width:1px; height:calc(100% - 28px); background:#ddd; }
.hh-deploy-item strong,.hh-deploy-item small { display:block; }
.hh-deploy-item small { margin-top:3px; color:#777; }
.hh-deploy-item.is-done { opacity:1; }
.hh-deploy-item.is-done > span { border-color:#3c763d; }
.hh-deploy-item.is-failed { opacity:1; color:#a94442; }

@media (max-width:767px) {
  .hh-created-summary { grid-template-columns:1fr; }
  .hh-created-actions { display:grid; }
  .hh-created-actions .btn { width:100%; }
}


/* v0.16.1 price breakdown */
.hh-price-breakdown {
    margin-top: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    background: #fafafa;
}

.hh-breakdown-row,
.hh-breakdown-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #ececec;
}

.hh-breakdown-row:last-of-type {
    border-bottom: 0;
}

.hh-breakdown-copy strong,
.hh-breakdown-copy small,
.hh-breakdown-price span,
.hh-breakdown-price small {
    display: block;
}

.hh-breakdown-copy strong {
    font-size: 12px;
}

.hh-breakdown-copy small {
    margin-top: 2px;
    color: #777;
}

.hh-breakdown-price {
    text-align: right;
    font-size: 12px;
}

.hh-breakdown-price small {
    margin-top: 2px;
    color: #777;
}

.hh-breakdown-total {
    border-bottom: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
}

.hh-review-title {
    margin-top: 0;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .hh-breakdown-row,
    .hh-breakdown-total {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .hh-breakdown-price {
        text-align: left;
    }
}


/* v0.16.2 true one-page progressive checkout */
.hh-step-panel {
    scroll-margin-top: 18px;
}

.hh-step-locked {
    opacity: .52;
}

.hh-step-locked > .panel-heading,
.hh-step-locked > .panel-body {
    pointer-events: none;
}

.hh-step-locked .panel-heading:after {
    content: "Complete the previous step first";
    float: right;
    font-size: 11px;
    font-weight: 400;
    color: #888;
}

.hh-step-active {
    opacity: 1;
}

.hh-breakdown-promo {
    background: #f7fbf7;
}

#hh-promo-result.text-success {
    color: #3c763d;
}

#hh-promo-result.text-danger {
    color: #a94442;
}


/* v0.16.3 compact selected-service state */
.hh-selected-service-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fafafa;
}

.hh-selected-service-summary span,
.hh-selected-service-summary strong,
.hh-selected-service-summary small {
    display: block;
}

.hh-selected-service-summary strong {
    margin-top: 2px;
    font-size: 16px;
}

.hh-selected-service-summary small {
    margin-top: 2px;
    color: #777;
}

@media (max-width: 600px) {
    .hh-selected-service-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .hh-selected-service-summary .btn {
        width: 100%;
    }
}


/* v0.16.4 final discounted total */
.hh-breakdown-final {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 13px 12px;
    border-top: 2px solid #ddd;
    background: #fff;
    font-size: 15px;
}

.hh-breakdown-final strong:last-child {
    font-size: 18px;
}

@media (max-width: 600px) {
    .hh-breakdown-final {
        grid-template-columns: 1fr auto;
    }
}


/* v1.0 capacity/status polish */
.hh-capacity-note,
.hh-capacity-option-note {
    font-size: 11px;
}

.hh-status-pay {
    margin-bottom: 12px;
}


/* v1.1.3 configuration UX */
.hh-config-top-row {
    align-items: flex-start;
}

#hh-location-slot .form-group {
    margin-bottom: 15px;
}

#hh-location-slot .hh-location-top-option {
    margin-bottom: 0;
}

.hh-ip-toggle-option {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
}

.hh-ip-toggle-option > .hh-ip-toggle-label {
    display: block;
    margin-bottom: 8px;
}

.hh-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hh-toggle-copy {
    color: #6b7280;
}

.hh-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    margin: 0;
    flex: 0 0 auto;
}

.hh-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.hh-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 999px;
    transition: .18s ease;
}

.hh-switch-slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: .18s ease;
}

.hh-switch input:checked + .hh-switch-slider {
    background: #337ab7;
}

.hh-switch input:checked + .hh-switch-slider:before {
    transform: translateX(20px);
}

@media (max-width: 767px) {
    #hh-location-slot {
        margin-top: 0;
    }

    #hh-hostname-row .col-sm-offset-6 {
        margin-left: 0;
    }
}


/* ==========================================================
   HillHost Order v4 — literal single-page checkout
   ========================================================== */

.hh-checkout .hh-step-panel {
    opacity: 1 !important;
    filter: none !important;
}

.hh-checkout .hh-step-locked {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#hh-account-step,
#hh-payment-step {
    display: block !important;
}

.hh-v4-payment-box {
    padding: 18px;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #fff;
}

.hh-v4-stripe-note {
    margin-bottom: 14px;
    color: #667085;
    font-size: 13px;
}

#hh-stripe-payment-element {
    min-height: 120px;
}

#hh-stripe-error {
    margin-top: 10px;
    min-height: 18px;
}

#hh-place-order {
    min-height: 52px;
    font-weight: 700;
}

.hh-checkout.hh-order-loading {
    cursor: progress;
}

.hh-checkout.hh-order-loading #hh-place-order {
    opacity: .75;
}

.hh-checkout .hh-progress {
    position: sticky;
    top: 8px;
    z-index: 8;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
}


/* ==========================================================
   HillHost v4.1 — Stripe + PayPal payment choice
   ========================================================== */

.hh-payment-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 18px;
}

.hh-payment-choice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #dce2e8;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.hh-payment-choice-card.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
    background: #f8fbff;
}

.hh-payment-choice-card input {
    margin: 0;
}

.hh-payment-choice-card span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hh-payment-choice-card small {
    color: #667085;
    font-weight: 400;
}

#hh-paypal-button-container {
    min-height: 45px;
}

#hh-paypal-error {
    margin-top: 10px;
    min-height: 18px;
}

@media (max-width: 580px) {
    .hh-payment-choice {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   HillHost v4.3 — checkout validation, summary and success UX
   ========================================================== */

.hh-validation-summary {
    margin-top: 18px;
    margin-bottom: 12px;
}

.hh-validation-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

.hh-validation-list li + li {
    margin-top: 4px;
}

.hh-review-empty {
    padding: 18px;
    border: 1px dashed #d5dbe3;
    border-radius: 8px;
    color: #667085;
    background: #fafbfc;
}

.hh-success-welcome {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6e9ee;
}

.hh-success-welcome h4 {
    margin-top: 0;
    font-weight: 700;
}

.hh-success-welcome p {
    max-width: 820px;
}

.hh-success-safe-close {
    margin-bottom: 0;
    font-weight: 600;
}

#hh-created-step + #hh-deployment-step {
    margin-top: 18px;
}

#hh-deployment-message {
    margin-top: 18px;
}

/* v4.4 domain storefront */
.hh-domain-store-modes {
    margin-bottom: 14px;
}

.hh-domain-search-box {
    margin-bottom: 14px;
}

.hh-domain-order-options {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e3e7ed;
    border-radius: 10px;
    background: #fff;
}

.hh-domain-order-options h5 {
    margin-top: 18px;
    font-weight: 700;
}

.hh-domain-addon-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #e2e7ed;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
}

.hh-domain-addon-choice span {
    display: flex;
    flex-direction: column;
}

.hh-domain-addon-choice small {
    margin-top: 3px;
    color: #667085;
}

.hh-domain-custom-ns {
    margin-top: 12px;
}

.hh-domain-additional-fields {
    margin-top: 18px;
    padding-top: 4px;
    border-top: 1px solid #edf0f3;
}

.hh-domain-field-radios .radio-inline {
    margin-right: 14px;
    margin-left: 0;
}


/* v4.4.4 — domain nameserver choice UX */
.hh-domain-nameservers {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf0f3;
}

.hh-domain-section-heading {
    margin-bottom: 12px;
}

.hh-domain-section-heading h5 {
    margin: 0 0 4px;
}

.hh-domain-section-heading p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.hh-domain-ns-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hh-domain-ns-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    background: #fff;
    color: #202735;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.hh-domain-ns-choice:hover,
.hh-domain-ns-choice:focus {
    border-color: #9ca9bb;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(45, 92, 164, .08);
}

.hh-domain-ns-choice.is-active {
    border-color: #2d5ca4;
    background: #f7faff;
    box-shadow: 0 0 0 1px #2d5ca4;
}

.hh-domain-ns-choice-mark {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid #a7b0bd;
    border-radius: 50%;
    background: #fff;
}

.hh-domain-ns-choice.is-active .hh-domain-ns-choice-mark {
    border: 5px solid #2d5ca4;
}

.hh-domain-ns-choice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.hh-domain-ns-choice-copy strong {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.3;
}

.hh-domain-ns-choice-copy small {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.hh-domain-custom-ns {
    margin-top: 16px;
    padding: 16px 16px 2px;
    border: 1px solid #e1e6ed;
    border-radius: 10px;
    background: #fafbfc;
}

.hh-domain-custom-ns-intro {
    margin-bottom: 12px;
    color: #596273;
    font-size: 13px;
}

.hh-domain-continue-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}

.hh-domain-continue-row .btn {
    min-width: 150px;
}

@media (max-width: 767px) {
    .hh-domain-ns-choices {
        grid-template-columns: 1fr;
    }

    .hh-domain-continue-row {
        justify-content: stretch;
    }

    .hh-domain-continue-row .btn {
        width: 100%;
    }
}


/* ==========================================================
   HillHost v4.4.6 — returning customer saved-card UX
   ========================================================== */

.hh-saved-card-box {
    margin-bottom: 16px;
}

.hh-saved-card-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.hh-saved-card-list {
    display: grid;
    gap: 8px;
}

.hh-saved-card-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #d9dee7;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.hh-saved-card-option:hover {
    border-color: #aab4c4;
}

.hh-saved-card-option.is-active {
    border-color: #5574a6;
    box-shadow: 0 0 0 2px rgba(85, 116, 166, .12);
    background: #fbfcff;
}

.hh-saved-card-option input {
    margin: 0;
    flex: 0 0 auto;
}

.hh-saved-card-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.hh-saved-card-main strong {
    font-weight: 700;
}

.hh-saved-card-main small {
    margin-top: 2px;
    color: #6b7280;
}

.hh-saved-card-check {
    visibility: hidden;
    font-weight: 700;
}

.hh-saved-card-option.is-active .hh-saved-card-check {
    visibility: visible;
}

#hh-stripe-new-card-wrap {
    margin-top: 12px;
}

#hh-stripe-new-card-wrap[hidden] {
    display: none !important;
}