/* unlimited-neo — brand layer.
 *
 * The neo-brutalist equivalent of unlimited-next's custom.css. Tokens and
 * component primitives live in css/neobrutalism.css; this file carries only
 * the parts of the design that are specific to THIS surface set (non-cart
 * pages) and the domain-search form. Everything else is inherited.
 *
 * Keep in step with css/cart-page.css: the two files are the same design
 * applied to different surfaces.
 */

/* ---- fonts --------------------------------------------------------------- */

/* neobrutalism pairs a grotesk body with a mono for labels and numbers. The
 * system stack in neobrutalism.css covers both without a webfont download,
 * which keeps the theme self-contained. Weight is the loaded signal here. */

:root {
    --neo-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    --neo-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
                     Consolas, monospace;
}

/* ---- page furniture ------------------------------------------------------ */

#main-body { padding: 1.5rem 0 3rem; }

/* The registration page is taller than the viewport. Keep every wrapper in
   normal flow so the footer cannot cover the lower registration cards. */
body:has(#registration),
body:has(#registration) #main-body,
body:has(#registration) #registration,
body:has(#registration) #registration form,
body:has(#registration) #containerNewUserSignup,
body:has(#registration) #containerNewUserSecurity {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body:has(#registration) .primary-content .card-body {
    overflow: visible !important;
}

body:has(#registration) .neo-footer {
    position: relative !important;
    margin-top: 0 !important;
    height: auto !important;
}

/* Login also has content rendered after the main card (linked accounts and
   provider feedback). Clear the login card's floats and keep those blocks in
   the main section instead of allowing the footer to overlap them. */
body:has(.login-form) #main-body,
body:has(.login-form) #main-body .primary-content,
body:has(.login-form) .login-form,
body:has(.login-form) .login-form + *,
body:has(.login-form) .providerLinkingFeedback,
body:has(.login-form) .providerPreLinking {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body:has(.login-form) #main-body::after,
body:has(.login-form) .login-form::after {
    content: "";
    display: table;
    clear: both;
}

body:has(.login-form) .neo-footer {
    position: relative !important;
    margin-top: 0 !important;
    height: auto !important;
}

.primary-content > h1,
.primary-content > h2 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.primary-content > h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; }

/* ---- section headings ----------------------------------------------------- */

/* Headings that open a section get a marker bar — the neo equivalent of a
 * rule or an eyebrow icon. */
.neo-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 2rem 0 1rem;
}
.neo-section-title::before {
    content: "";
    flex: 0 0 14px;
    height: 14px;
    background-color: var(--neo-primary);
    border: 2px solid var(--neo-border);
}

/* ---- domain search -------------------------------------------------------- */

.domain-search-container { margin-bottom: 1.5rem; }

.domain-search .input-group { gap: 0; }

.domain-search .form-control-lg {
    border-right-width: 0 !important;
}

/* the TLD select is a button-shaped neighbour, not a native dropdown look */
.domain-search select.btn {
    font-weight: 800;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .05em;
    box-shadow: var(--neo-shadow-none) !important;
    border-radius: 0 !important;
}

/* ---- announcement + kb cards ---------------------------------------------- */

/* These are destinations, so they get the lift. Their .card already carries
 * border + shadow from neobrutalism.css; add the interaction. */
.announcements .card,
.knowledgebase .card,
.viewannouncement .card,
.announcement-content,
.kb-article .card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.announcements .card:hover,
.knowledgebase .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow-lg);
}

/* the date stamp reads as a mono chip */
.announcements .small.text-muted,
.kb-article .small.text-muted {
    font-family: var(--neo-font-mono);
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neo-muted) !important;
}

/* ---- client home stat strip ---------------------------------------------- */

/* Stock renders the four tiles edge-to-edge with .no-gutters; neo version
 * wants a hairline gap so each tile keeps its own border. */
.client-home .tiles .row.no-gutters {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
.client-home .tiles .row.no-gutters > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
    margin-bottom: 1rem;
}

/* ---- contact page -------------------------------------------------------- */

.contact form .btn { width: 100%; }
@media (min-width: 576px) {
    .contact form .btn { width: auto; }
}

/* Keep long WHMCS forms fully usable; some stock panels inherit constrained heights. */
#main-body,
#main-body .primary-content,
#main-body .card,
#main-body .card-body,
#main-body form,
#main-body .form-horizontal {
    height: auto;
    min-height: 0;
    overflow: visible;
}

#main-body input.form-control,
#main-body select.form-control,
#main-body textarea.form-control {
    min-height: 42px;
    height: auto;
    line-height: 1.35;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

/* Native select controls need an explicit box height: Bootstrap's compact
   height plus the neo padding can clip the selected option text and arrow. */
#main-body select.form-control,
#main-body select.custom-select,
#main-body .custom-select {
    display: block;
    width: 100%;
    min-height: 48px !important;
    height: auto !important;
    padding: .55rem 2.75rem .55rem 1rem !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* Apply the same safe native-select sizing to forms outside #main-body and
   prevent inherited fixed-height/overflow rules from clipping option text. */
select,
select.form-control,
select.custom-select,
.custom-select {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    vertical-align: middle;
}

form,
form .form-group,
form .form-control,
form .input-group,
form .select-container {
    max-height: none;
}

#main-body .form-group,
#main-body .field-container,
#main-body .input-group,
#main-body .select-container {
    height: auto;
    min-height: 0;
    overflow: visible;
}

#main-body textarea.form-control { min-height: 120px; }

/* Visible fallback for icon glyphs when a Font Awesome webfont is unavailable. */
.uwh-site-header .fa-shopping-cart::before { content: "🛒"; }
.card-sidebar .fa-chevron-right::before,
.card-sidebar .fa-arrow-right::before { content: "→"; font-family: inherit; }
.card-sidebar .fa-chevron-up::before { content: "⌃"; font-family: inherit; }

/* ---- recaptcha zindex fix ------------------------------------------------- */

.grecaptcha-badge { z-index: 2000; }

/* ---- responsive table fix ------------------------------------------------- */

.table-container {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ---- datatables ----------------------------------------------------------- */

.dataTables_wrapper table.table-list thead th { font-weight: 800; }

/* ---- main-content reset --------------------------------------------------- */

.main-content { margin: 0; min-height: auto; }