/*
 * Modus Customer Commerce UI — commercial components
 * Domain search, product-category cards, pricing cards, comparison table,
 * order/checkout accordion (Orderbutton module — this build has no separate
 * Cart module template; the accordion on /order IS the cart/checkout flow).
 */

/* ---- Product-category card / pricing card ---- */
.mc-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--mc-space-6);
}

.mc-product-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mc-space-2);
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-subtle);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-6);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--mc-shadow-xs);
    transition: box-shadow var(--mc-duration-normal) var(--mc-ease-standard),
        border-color var(--mc-duration-normal) var(--mc-ease-standard),
        transform var(--mc-duration-normal) var(--mc-ease-standard);
}

.mc-product-card:hover,
.mc-product-card:focus-visible {
    box-shadow: var(--mc-shadow-lg);
    border-color: var(--mc-color-primary-200);
    color: inherit;
    transform: translateY(-2px);
}

.mc-product-card .mc-product-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--mc-radius-md);
    background: var(--mc-color-primary-50);
    color: var(--mc-color-primary-700);
    font-family: var(--mc-font-display);
    font-weight: 800;
    font-size: var(--mc-text-lg);
    margin-bottom: var(--mc-space-2);
}

.mc-product-card .mc-product-card-icon img {
    width: 24px;
    height: 24px;
}

.mc-product-card .mc-product-card-title {
    font-family: var(--mc-font-display);
    font-weight: 700;
    font-size: var(--mc-text-lg);
}

.mc-product-card .mc-card-body {
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
}

.mc-product-card .mc-price {
    font-weight: 700;
    color: var(--mc-text-primary);
}

.mc-product-card .mc-product-card-action {
    margin-top: auto;
    padding-top: var(--mc-space-2);
    display: flex;
    align-items: center;
    gap: var(--mc-space-1);
    color: var(--mc-color-primary-600);
    font-weight: 600;
    font-size: var(--mc-text-sm);
}

/* ---- Order product folder ---- */
.mc-product-folder {
    --mc-folder-tab-border: rgba(218, 225, 238, 0.92);
    --mc-folder-page-bg: rgba(255, 255, 255, 0.98);
    padding: var(--mc-space-4);
    border: 1px solid rgba(225, 231, 242, 0.96);
    border-radius: var(--mc-radius-md);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(246, 248, 252, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.mc-product-folder-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
    gap: var(--mc-space-2);
    overflow: visible;
    padding: var(--mc-space-2);
    margin-bottom: var(--mc-space-4);
    border: 1px solid rgba(222, 229, 240, 0.96);
    border-radius: var(--mc-radius-md);
    background: rgba(246, 248, 252, 0.72);
    scrollbar-width: thin;
}

.mc-product-folder-tabs::after {
    content: "";
    position: absolute;
    right: var(--mc-space-4);
    bottom: -9px;
    left: var(--mc-space-4);
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(218, 225, 238, 0),
            rgba(218, 225, 238, 0.86) 18%,
            rgba(169, 184, 245, 0.62) 50%,
            rgba(218, 225, 238, 0.86) 82%,
            rgba(218, 225, 238, 0));
}

.mc-product-folder-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-2);
    min-height: 46px;
    max-width: none;
    padding: var(--mc-space-3) var(--mc-space-4);
    border: 1px solid rgba(218, 225, 238, 0.92);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text-secondary);
    background: rgba(255, 255, 255, 0.82);
    font-family: var(--mc-font-display);
    font-weight: 700;
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    transition: background-color var(--mc-duration-fast) var(--mc-ease-standard),
        border-color var(--mc-duration-fast) var(--mc-ease-standard),
        box-shadow var(--mc-duration-fast) var(--mc-ease-standard),
        color var(--mc-duration-fast) var(--mc-ease-standard),
        transform var(--mc-duration-fast) var(--mc-ease-standard);
}

.mc-product-folder-tab:first-child {
    border-top-left-radius: var(--mc-radius-sm);
}

.mc-product-folder-tab:last-child {
    border-top-right-radius: var(--mc-radius-sm);
    border-bottom-right-radius: var(--mc-radius-sm);
}

.mc-product-folder-tab::before {
    display: none;
}

.mc-product-folder-tab::after {
    content: "";
    position: absolute;
    right: var(--mc-space-3);
    bottom: -1px;
    left: var(--mc-space-3);
    height: 2px;
    border-radius: var(--mc-radius-pill);
    background: rgba(43, 79, 245, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mc-duration-fast) var(--mc-ease-standard);
}

.mc-product-folder-tab span {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}

.mc-product-folder-tab small {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 22px;
    padding-inline: var(--mc-space-2);
    border-radius: var(--mc-radius-pill);
    background: rgba(43, 79, 245, 0.08);
    color: var(--mc-color-primary-600);
    font-size: var(--mc-text-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mc-product-folder-tab:hover,
.mc-product-folder-tab:focus-visible {
    color: var(--mc-color-primary-700);
    background: #ffffff;
    border-color: rgba(169, 184, 245, 0.54);
    box-shadow: inset 0 -2px 0 rgba(43, 79, 245, 0.28);
    text-decoration: none;
}

.mc-product-folder:not(:has(.mc-product-folder-page:target)) .mc-product-folder-tab--default {
    color: var(--mc-color-primary-700);
    background: linear-gradient(180deg, #ffffff 0%, rgba(245, 248, 255, 0.98) 100%);
    border-color: rgba(157, 174, 238, 0.62);
    box-shadow: inset 0 -2px 0 rgba(43, 79, 245, 0.46);
}

.mc-product-folder:not(:has(.mc-product-folder-page:target)) .mc-product-folder-tab--default::after {
    opacity: 1;
}

.mc-product-folder:not(:has(.mc-product-folder-page:target)) .mc-product-folder-tab--default small {
    background: rgba(43, 79, 245, 0.14);
    color: var(--mc-color-primary-700);
}

.mc-product-folder:has(.mc-product-folder-page:target) .mc-product-folder-tab--default {
    color: var(--mc-text-secondary);
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(218, 225, 238, 0.92);
    box-shadow: none;
}

.mc-product-folder:has(.mc-product-folder-page:target) .mc-product-folder-tab--default::before {
    opacity: 0;
}

.mc-product-folder:has(.mc-product-folder-page:target) .mc-product-folder-tab--default::after {
    opacity: 0;
}

.mc-product-folder:has(.mc-product-folder-page:target) .mc-product-folder-tab--default small {
    background: rgba(43, 79, 245, 0.08);
    color: var(--mc-color-primary-600);
}

.mc-product-folder-pages {
    position: relative;
    border: 1px solid rgba(218, 225, 238, 0.96);
    border-radius: var(--mc-radius-md);
    background: var(--mc-folder-page-bg);
    box-shadow: 0 18px 42px rgba(17, 24, 43, 0.05);
    overflow: hidden;
}

.mc-product-folder-pages::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(218, 225, 238, 0),
            rgba(169, 184, 245, 0.58) 24%,
            rgba(43, 79, 245, 0.30) 50%,
            rgba(169, 184, 245, 0.50) 76%,
            rgba(218, 225, 238, 0));
    opacity: 0.72;
}

.mc-product-folder-pages::after {
    display: none;
}

.mc-product-folder-page {
    position: relative;
    z-index: 1;
    padding: var(--mc-space-8);
    scroll-margin-top: 96px;
}

.mc-product-folder-page:focus {
    outline: none;
}

.mc-product-folder-page + .mc-product-folder-page {
    border-top: 1px solid rgba(230, 235, 244, 0.9);
}

.mc-product-folder-page-head {
    max-width: 980px;
    margin-bottom: var(--mc-space-6);
}

.mc-product-folder-page-head h4 {
    margin: 0 0 var(--mc-space-3);
    color: var(--mc-text-primary);
    font-size: var(--mc-text-xl);
    letter-spacing: 0;
}

.mc-product-folder-description {
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-base);
    line-height: 1.55;
}

.mc-product-folder-description :last-child {
    margin-bottom: 0;
}

.mc-product-grid--folder {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--mc-space-5);
}

.mc-product-card--folder {
    min-height: 136px;
    padding: var(--mc-space-6);
    border-color: rgba(222, 229, 240, 0.96);
    border-radius: var(--mc-radius-sm);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 1px 2px rgba(17, 24, 43, 0.04);
}

.mc-product-card--folder:hover,
.mc-product-card--folder:focus-visible {
    border-color: rgba(117, 141, 245, 0.42);
    box-shadow: 0 14px 32px rgba(17, 24, 43, 0.08);
    transform: translateY(-1px);
}

.mc-product-card--folder .mc-product-card-title {
    font-size: var(--mc-text-base);
    line-height: 1.28;
}

.mc-product-card--folder .mc-product-card-action {
    color: var(--mc-color-primary-600);
}

@supports selector(:has(*)) {
    .mc-product-folder-pages .mc-product-folder-page {
        display: none;
    }

    .mc-product-folder-pages .mc-product-folder-page--default {
        display: block;
    }

    .mc-product-folder-pages:has(.mc-product-folder-page:target) .mc-product-folder-page {
        display: none;
    }

    .mc-product-folder-pages:has(.mc-product-folder-page:target) .mc-product-folder-page:target {
        display: block;
    }
}

/* ---- Pricing card ---- */
.mc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--mc-space-6);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .mc-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mc-pricing-card {
    display: flex;
    flex-direction: column;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-subtle);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-8) var(--mc-space-6);
    box-shadow: var(--mc-shadow-xs);
}

.mc-pricing-card--recommended {
    border-color: var(--mc-color-primary-500);
    box-shadow: var(--mc-shadow-lg);
    position: relative;
}

.mc-pricing-card .mc-pricing-badge {
    align-self: flex-start;
    margin-bottom: var(--mc-space-3);
}

.mc-pricing-card .mc-pricing-name {
    font-family: var(--mc-font-display);
    font-weight: 700;
    font-size: var(--mc-text-xl);
}

.mc-pricing-card .mc-pricing-description {
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    margin-bottom: var(--mc-space-4);
}

.mc-pricing-card .mc-pricing-amount {
    font-family: var(--mc-font-display);
    font-weight: 800;
    font-size: var(--mc-text-4xl);
    line-height: 1;
}

.mc-pricing-card .mc-pricing-period {
    color: var(--mc-text-muted);
    font-size: var(--mc-text-sm);
    margin-bottom: var(--mc-space-1);
}

.mc-pricing-card .mc-pricing-renewal {
    color: var(--mc-text-muted);
    font-size: var(--mc-text-xs);
    margin-bottom: var(--mc-space-5);
}

.mc-pricing-card .mc-pricing-action {
    margin-bottom: var(--mc-space-5);
}

.mc-pricing-card .mc-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-2);
    font-size: var(--mc-text-sm);
}

.mc-pricing-card .mc-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-2);
}

/* ---- Comparison table ---- */
.mc-comparison-table-wrap {
    overflow-x: auto;
}

.mc-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-comparison-table th,
.mc-comparison-table td {
    padding: var(--mc-space-3) var(--mc-space-4);
    border-bottom: 1px solid var(--mc-border-subtle);
    text-align: center;
}

.mc-comparison-table th:first-child,
.mc-comparison-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--mc-surface-raised);
}

.mc-comparison-table thead th {
    position: sticky;
    top: 0;
    background: var(--mc-surface-raised);
    font-family: var(--mc-font-display);
}

/* ---- Hero (homepage) ---- */
.mc-hero {
    margin-top: var(--mc-space-6);
    margin-bottom: 0;
    border-radius: 0;
    padding: var(--mc-space-12) var(--mc-page-gutter) var(--mc-space-16);
    text-align: center;
}

.mc-hero--dark {
    background: var(--mc-gradient-hero);
    color: var(--mc-text-primary);
    border-bottom: 1px solid rgba(189, 206, 255, 0.55);
}

.mc-storefront-band--essentials {
    background: var(--mc-color-white);
}

.mc-storefront-band--utility {
    background: var(--mc-surface-page);
    border-block: 1px solid rgba(225, 229, 236, 0.72);
}

.mc-storefront-band--trust {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.mc-storefront-band--closing {
    background: var(--mc-gradient-closing);
    border-top: 1px solid rgba(189, 206, 255, 0.46);
}

.mc-hero-inner {
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-4);
}

.mc-eyebrow--inverse {
    color: var(--mc-color-primary-700);
}

.mc-hero-heading {
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-hero-supporting {
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-lg);
    margin: 0;
}

.mc-hero-actions {
    margin-top: var(--mc-space-2);
}

.mc-button--inverse.mc-button--outline {
    border-color: var(--mc-color-primary-200);
    color: var(--mc-color-primary-700);
    background: rgba(255, 255, 255, 0.7);
}

.mc-button--inverse.mc-button--outline:hover,
.mc-button--inverse.mc-button--outline:focus-visible {
    border-color: var(--mc-color-primary-400);
    color: var(--mc-color-primary-800);
    background: var(--mc-color-white);
}

/* ---- Domain search: hero variant ----
   The reference sites (domains.co.za, Hostinger, GoDaddy, Namecheap) all
   treat the domain search bar as THE dominant element directly under the
   header — long, tall, high-contrast, not a modest input next to a button.
   This is deliberately the largest interactive element on the homepage. */
.mc-search--hero {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--mc-surface-raised);
    border: 1px solid rgba(189, 206, 255, 0.65);
    border-radius: var(--mc-radius-lg);
    padding: var(--mc-space-2);
    box-shadow: 0 18px 48px rgba(17, 24, 43, 0.10);
    margin-top: var(--mc-space-4);
}

.mc-search--hero .mc-search-field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    border: 0;
    border-radius: var(--mc-radius-md);
    padding-inline: var(--mc-space-6);
    font-size: var(--mc-text-lg);
    background: transparent;
    box-shadow: none;
}

.mc-search--hero .mc-search-field:focus {
    box-shadow: none;
    outline: none;
}

.mc-search--hero .mc-search-tld {
    flex: 0 0 auto;
    width: auto;
    min-height: 56px;
    border: 0;
    border-left: 1px solid var(--mc-border-subtle);
    background: transparent;
    padding-inline: var(--mc-space-4);
    font-weight: 600;
    box-shadow: none;
    border-radius: 0;
}

.mc-search--hero .mc-search-submit {
    flex: 0 0 auto;
    min-height: 56px;
    min-width: 140px;
    border-radius: var(--mc-radius-md);
    font-size: var(--mc-text-base);
}

/* Customer pasted an email address into the domain search. This is a
   mismatched-intent moment, not a broken form — nothing here is actually
   invalid input, the customer just wants the client portal. So the field
   itself only gets a quiet cue (no alarming red ring stealing focus from
   the primary hero action), and the real message lives in the calm
   .mc-intent-banner above the search bar — see markup + JS. */
.mc-search--hero .mc-search-field--needs-attention {
    background: var(--mc-color-warning-bg);
}

/* Intent-redirect banner: reuses the .mc-showcase-banner announcement
   language (pill, primary-tinted, centered) so it reads as "here's a
   shortcut," matching this site's existing tone, not as a validation
   error. Sits between the hero copy and the search bar — see brief:
   "shows above the search field and does not interfere with it." */
.mc-intent-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3) var(--mc-space-4);
    width: 100%;
    max-width: 860px;
    margin-top: var(--mc-space-2);
    padding: var(--mc-space-3) var(--mc-space-5);
    border-radius: var(--mc-radius-lg);
    background: var(--mc-color-primary-50);
    border: 1px solid var(--mc-color-primary-100);
    text-align: left;
    animation: mc-intent-banner-in 0.2s ease-out;
}

.mc-intent-banner[hidden] {
    display: none;
}

.mc-intent-banner-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--mc-color-primary-600);
    color: var(--mc-color-white);
}

.mc-intent-banner-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.mc-intent-banner-text strong {
    color: var(--mc-color-primary-900);
    font-size: var(--mc-text-base);
}

.mc-intent-banner-text span {
    color: var(--mc-color-primary-800);
    font-size: var(--mc-text-sm);
}

.mc-intent-banner-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

@keyframes mc-intent-banner-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mc-search-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-6);
}

/* Quiet, tactile TLD chips. They should read like lightweight selectors on
   the pale hero, not badges fighting the search field for attention. */
.mc-search--domain .mc-search-tld-chip,
.mc-search-tld-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    border: 1px solid rgba(189, 206, 255, 0.75);
    padding: var(--mc-space-2) var(--mc-space-4);
    border-radius: var(--mc-radius-pill);
    background: rgba(255, 255, 255, 0.72);
    color: var(--mc-color-primary-800);
    box-shadow: 0 8px 20px rgba(17, 24, 43, 0.06);
    font-size: var(--mc-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--mc-duration-fast) var(--mc-ease-standard),
        transform var(--mc-duration-fast) var(--mc-ease-standard);
}

.mc-search-tld-chip:hover,
.mc-search-tld-chip:focus-visible {
    background: var(--mc-color-white);
    border-color: var(--mc-color-primary-300);
    transform: translateY(-1px);
}

.mc-domain-results-panel {
    width: min(100%, 980px);
    margin-top: var(--mc-space-7);
    overflow: hidden;
    border: 1px solid rgba(189, 206, 255, 0.72);
    border-radius: var(--mc-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 54px rgba(17, 24, 43, 0.10);
}

.mc-domain-results-panel[hidden],
.mc-domain-result-primary[hidden] {
    display: none !important;
}

.mc-domain-result-primary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-5);
    background: linear-gradient(180deg, rgba(246, 255, 249, 0.96), rgba(255, 255, 255, 0.98));
    border-bottom: 1px solid rgba(218, 226, 241, 0.88);
}

.mc-domain-result-primary--unavailable {
    grid-template-columns: minmax(0, 1fr) auto;
    background: linear-gradient(180deg, rgba(255, 248, 246, 0.96), rgba(255, 255, 255, 0.98));
}

.mc-domain-result-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #2ebf4f;
    color: var(--mc-color-white);
}

.mc-domain-result-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--mc-space-1);
    text-align: left;
}

.mc-domain-result-label {
    color: #116329;
    font-size: var(--mc-text-sm);
    font-weight: 700;
}

.mc-domain-result-primary--unavailable .mc-domain-result-label {
    color: #b3452c;
}

.mc-domain-result-main strong {
    color: var(--mc-text-primary);
    font-size: var(--mc-text-2xl);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.mc-domain-result-price {
    color: var(--mc-text-primary);
    font-size: var(--mc-text-lg);
    font-weight: 750;
    white-space: nowrap;
}

.mc-domain-result-note {
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    text-align: right;
}

.mc-domain-result-action {
    white-space: nowrap;
}

.mc-domain-suggestion-block {
    background: rgba(255, 255, 255, 0.94);
}

.mc-domain-suggestion-heading {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    padding: var(--mc-space-5);
    text-align: center;
    border-bottom: 1px solid rgba(218, 226, 241, 0.88);
    background: rgba(241, 246, 255, 0.64);
}

.mc-domain-suggestion-heading strong {
    color: var(--mc-color-primary-700);
    font-size: var(--mc-text-xl);
}

.mc-domain-suggestion-heading span {
    color: var(--mc-text-secondary);
}

.mc-domain-suggestion-list {
    display: flex;
    flex-direction: column;
}

.mc-domain-suggestion-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(90px, 0.65fr) minmax(90px, 0.6fr) auto;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-5);
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(218, 226, 241, 0.82);
}

.mc-domain-suggestion-row:last-child {
    border-bottom: 0;
}

.mc-domain-suggestion-row:hover,
.mc-domain-suggestion-row:focus-visible {
    background: rgba(241, 246, 255, 0.7);
}

.mc-domain-suggestion-name {
    color: var(--mc-text-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mc-domain-suggestion-status {
    color: #117a2f;
    font-size: var(--mc-text-sm);
    font-weight: 750;
}

.mc-domain-suggestion-price {
    color: var(--mc-text-secondary);
    font-weight: 650;
    white-space: nowrap;
}

.mc-domain-suggestion-action {
    color: var(--mc-color-primary-700);
    font-size: var(--mc-text-sm);
    font-weight: 750;
    white-space: nowrap;
}

/* Stack the search bar through both mobile tiers (320-767px per brief section
   14) — a 3-way inline pill (text field + TLD select + button) gets cramped
   well before tablet width, so keep it stacked and full-width for the whole
   mobile range and only go horizontal at tablet (768px) and up. */
@media (max-width: 767.98px) {
    .mc-hero {
        padding: var(--mc-space-10) var(--mc-page-gutter) var(--mc-space-12);
        margin-top: var(--mc-space-4);
        margin-bottom: 0;
    }

    .mc-search--hero {
        flex-wrap: wrap;
        border-radius: var(--mc-radius-md);
        max-width: 480px;
    }

    .mc-intent-banner {
        flex-direction: column;
        align-items: center;
        max-width: 480px;
        text-align: center;
    }

    .mc-intent-banner-text {
        align-items: center;
        text-align: center;
    }

    .mc-intent-banner-action {
        width: 100%;
    }

    .mc-search--hero .mc-search-field {
        flex-basis: 100%;
        text-align: left;
        min-height: 52px;
    }

    .mc-search--hero .mc-search-tld {
        flex: 1 1 auto;
        border-left: 0;
        border-top: 1px solid var(--mc-border-subtle);
        min-height: 48px;
    }

    .mc-search--hero .mc-search-submit {
        flex: 1 1 auto;
        min-height: 48px;
    }

    .mc-domain-result-primary,
    .mc-domain-result-primary--unavailable,
    .mc-domain-suggestion-row {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .mc-domain-result-price,
    .mc-domain-result-note {
        text-align: left;
    }

    /* TLD pricing pills: a wrapped, centered row of chips eats vertical
       space fast on a phone. Collapse them into a single horizontally
       scrollable strip instead — same chips, no wasted height. */
    .mc-search-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-block: var(--mc-space-1);
        margin-inline: calc(var(--mc-page-gutter) * -1);
        padding-inline: var(--mc-page-gutter);
    }

    .mc-search-chips::-webkit-scrollbar {
        display: none;
    }

    .mc-search-tld-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ---- Closing panel ---- */
.mc-closing-panel {
    color: var(--mc-text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--mc-space-12) var(--mc-page-gutter);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-4);
}

.mc-closing-panel h2 {
    color: var(--mc-text-primary);
    margin: 0;
}

.mc-closing-panel p {
    color: var(--mc-text-secondary);
    margin: 0;
}

/*
 * Bridge for the existing, BK-approved domain order-form UI in
 * modules/Servicedomain/templates/client/mod_servicedomain_order_form.html.twig
 * ("modus-" prefixed classes, POPIA copy already signed off). Left untouched;
 * only visually aligned to the mc- token system here.
 */
.modus-domain-order-form .nav-pills .nav-link {
    border-radius: var(--mc-radius-sm);
    font-weight: 600;
    color: var(--mc-text-secondary);
}

.modus-domain-order-form .nav-pills .nav-link.active {
    background: var(--mc-color-primary-50);
    color: var(--mc-color-primary-700);
}

.modus-domain-search-row .modus-domain-check-button {
    border-radius: var(--mc-radius-sm);
    min-height: 100%;
}

.modus-domain-result-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mc-space-4);
    width: min(100%, 760px);
    margin-top: var(--mc-space-5);
    padding: var(--mc-space-5);
    border: 1px solid rgba(99, 190, 123, 0.35);
    border-radius: var(--mc-radius-md);
    background: linear-gradient(180deg, rgba(245, 255, 248, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 16px 36px rgba(17, 24, 43, 0.07);
}

.modus-domain-result-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #2ebf4f;
    color: var(--mc-color-white);
}

.modus-domain-result-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--mc-space-1);
}

.modus-domain-result-copy strong {
    color: #116329;
    font-size: var(--mc-text-sm);
}

.modus-domain-result-copy span {
    color: var(--mc-text-primary);
    font-size: var(--mc-text-xl);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.modus-domain-result-price {
    color: var(--mc-text-primary);
    font-size: var(--mc-text-lg);
    font-weight: 700;
    white-space: nowrap;
}

.modus-domain-suggestions {
    width: min(100%, 900px);
    margin-top: var(--mc-space-5);
    border: 1px solid rgba(189, 206, 255, 0.72);
    border-radius: var(--mc-radius-md);
    background: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(17, 24, 43, 0.06);
}

.modus-domain-suggestions-heading {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-1);
    padding: var(--mc-space-5);
    border-bottom: 1px solid var(--mc-border-subtle);
    background: rgba(241, 246, 255, 0.72);
}

.modus-domain-suggestions-heading strong {
    color: var(--mc-text-primary);
    font-size: var(--mc-text-lg);
}

.modus-domain-suggestions-heading span {
    color: var(--mc-text-secondary);
}

.modus-domain-suggestion-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(90px, 0.7fr) minmax(90px, 0.6fr) auto;
    align-items: center;
    gap: var(--mc-space-4);
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid rgba(218, 226, 241, 0.85);
}

.modus-domain-suggestion-row:last-child {
    border-bottom: 0;
}

.modus-domain-suggestion-name {
    color: var(--mc-text-primary);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.modus-domain-suggestion-status {
    color: #117a2f;
    font-size: var(--mc-text-sm);
    font-weight: 700;
}

.modus-domain-suggestion-price {
    color: var(--mc-text-secondary);
    font-weight: 650;
    white-space: nowrap;
}

.modus-domain-suggestion-action {
    border-radius: var(--mc-radius-sm);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .modus-domain-result-card,
    .modus-domain-suggestion-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .modus-domain-result-mark {
        width: 38px;
        height: 38px;
    }

    .modus-domain-result-price,
    .modus-domain-suggestion-action {
        justify-self: start;
    }
}

#domain-contact-config.card {
    border-radius: var(--mc-radius-lg);
}

/* ---- Order/checkout accordion (Orderbutton module) ---- */
#orderManager .accordion-item {
    border: 1px solid var(--mc-border-subtle);
    border-radius: var(--mc-radius-md) !important;
    margin-bottom: var(--mc-space-3);
    overflow: hidden;
}

#orderManager .accordion-button {
    border-radius: 0;
}

#orderManager .list-group-item {
    border-radius: var(--mc-radius-sm);
    margin-bottom: var(--mc-space-2);
    border: 1px solid var(--mc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

#orderManager .list-group-item:hover,
#orderManager .list-group-item:focus-visible {
    border-color: var(--mc-color-primary-300);
    background: var(--mc-color-primary-50);
}

/* ---- Cart / checkout summary ---- */
.mc-order-summary {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-subtle);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-6);
    position: sticky;
    top: calc(80px + var(--mc-space-4));
}

.mc-order-summary .mc-order-total {
    font-family: var(--mc-font-display);
    font-weight: 800;
    font-size: var(--mc-text-2xl);
}