/* Up At Last client area: the look of upatlast.com on top of WHMCS Twenty-One.
   Warm paper, the logo's ink, red buttons, blue links, chalkboard green bar.
   Fraunces for headlines, DM Sans for text. Kept plain on purpose: this is the
   billing and support side for every client, so no sticky notes, tilted cards
   or handwriting. Loaded after Twenty-One's own CSS from header.tpl.

   Sections: fonts, tokens, base, top bar and header, buttons, forms, cards and
   lists, tables, status labels and alerts, home, client area, tickets,
   knowledgebase and announcements, order form, invoice, footer, small screens. */

/* ---- fonts: self-hosted variable files (SIL Open Font License) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/dm-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens (the same values as the main site's report-card.css) -------- */
:root {
	--ual-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ual-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ual-ink: #17323b;
	--ual-ink-2: #50646a;
	--ual-paper: #fbf7ee;
	--ual-card: #ffffff;
	--ual-line: #e3dbc8;
	--ual-field: #cfc5ae;
	--ual-red: #d5362b;
	--ual-red-deep: #b3271e;
	--ual-blue: #2450a6;
	--ual-yellow: #ffdd66;
	--ual-yellow-soft: #fff4c7;
	--ual-green: #22483e;
	--ual-green-2: #2f6354;
	--ual-tint: #f3ecdb;
	--ual-tint-2: #e5efe9;
	--ual-grey: #7b8a8e;
	--ual-radius: 8px;
	--ual-shadow: 0 1px 0 rgba(23, 50, 59, .05), 0 12px 26px -16px rgba(23, 50, 59, .4);
	--ual-shadow-lg: 0 2px 0 rgba(23, 50, 59, .05), 0 28px 50px -26px rgba(23, 50, 59, .55);
	--ual-focus: 0 0 0 3px rgba(36, 80, 166, .2);
}

/* ---- base --------------------------------------------------------------- */
html { font-size: 16px; }
body, body.primary-bg-color, .primary-bg-color {
	background-color: var(--ual-paper);
	color: var(--ual-ink);
	font-family: var(--ual-body);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-family: var(--ual-display);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	letter-spacing: -.018em;
	line-height: 1.15;
	color: var(--ual-ink);
}
h1, .h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.55rem, 2.4vw, 1.95rem); }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }
h5, h6, .h5, .h6 { font-family: var(--ual-body); font-weight: 700; color: var(--ual-ink); letter-spacing: 0; }
p, li, td, th, dd, dt, label { color: inherit; }
a { color: var(--ual-blue); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--ual-red); }
b, strong { font-weight: 700; }
hr { border-top-color: var(--ual-line); }
small, .small { font-size: .875em; }
.text-muted, .text-black-50, .text-secondary { color: var(--ual-ink-2) !important; }
.text-primary { color: var(--ual-red) !important; }
.text-success { color: var(--ual-green-2) !important; }
.text-info { color: var(--ual-blue) !important; }
.text-danger { color: var(--ual-red-deep) !important; }
.text-warning { color: #8a6500 !important; }
.bg-light, .bg-white { background-color: var(--ual-card) !important; }
.bg-primary { background-color: var(--ual-red) !important; }
.bg-success { background-color: var(--ual-green-2) !important; }
.bg-info { background-color: var(--ual-blue) !important; }
.bg-warning { background-color: var(--ual-yellow) !important; color: var(--ual-ink) !important; }
.bg-danger { background-color: var(--ual-red-deep) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--ual-line) !important; }
::selection { background: var(--ual-yellow); color: var(--ual-ink); }
:focus-visible { outline: 3px solid var(--ual-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* WHMCS prints its own credit line at the foot of the page. It stays (the
   licence requires it); it is only set smaller and quieter. */
p:has(> a[href="https://www.whmcs.com/"]) { margin: 34px 0 0; font-size: .8125rem; color: var(--ual-ink-2); }
p:has(> a[href="https://www.whmcs.com/"]) a { color: var(--ual-ink-2); text-decoration: underline; }

/* ---- top bar and header ------------------------------------------------- */
.ual-bar { background: var(--ual-green); color: #f7f4ea; font-size: .9rem; line-height: 1.35; padding: 8px 0; }
.ual-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; }
.ual-bar a { color: #f7f4ea; text-decoration: none; font-weight: 600; }
.ual-bar a:hover, .ual-bar a:focus { color: #fff; text-decoration: underline; }
.ual-bar__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ual-bar__links a { font-weight: 500; }

header.header { background-color: var(--ual-paper); border-bottom: 1px solid var(--ual-line); }
header.header .topbar { background-color: var(--ual-tint); color: var(--ual-ink-2); padding: 3px 0; border-bottom: 1px solid var(--ual-line); }
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text { color: var(--ual-ink); box-shadow: none; border: 0; background: transparent; font-weight: 500; font-size: .875rem; padding: .3rem .55rem; }
header.header .topbar .btn:hover { color: var(--ual-red); background: transparent; transform: none; }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom: 1px dashed var(--ual-ink-2); }
header.header .navbar { padding-top: 14px; padding-bottom: 12px; }
header.header .navbar-brand { padding: 0; }
header.header .navbar-brand img.logo-img, img.logo-img { width: 214px; max-width: 214px; height: auto; max-height: none; }
header.header .navbar a { color: var(--ual-ink); }
header.header .search { width: 325px; border: 1.5px solid var(--ual-field); border-radius: var(--ual-radius); background: #fff; overflow: hidden; }
header.header .search:focus-within { border-color: var(--ual-blue); box-shadow: var(--ual-focus); }
header.header .search .btn, header.header .search .form-control { border: 0; background: transparent; box-shadow: none; }
header.header .search .btn { color: var(--ual-ink-2); padding: .4rem .7rem; }
header.header .search .btn:hover { background: transparent; color: var(--ual-ink); transform: none; }
header.header .search .form-control { font-weight: 400 !important; color: var(--ual-ink); }
header.header .toolbar .nav-link { border: 1.5px solid var(--ual-field); border-radius: var(--ual-radius); background: #fff; color: var(--ual-ink); box-shadow: none; padding: .45rem .9rem; }
header.header .toolbar .nav-link:hover { color: var(--ual-ink); border-color: var(--ual-ink); background: #fff; transform: none; }
header.header .toolbar .nav-link .badge { background: var(--ual-red); color: #fff; opacity: 1; }
/* Twenty-One's script folds menu items into "More" as soon as the list of
   links is 30px tall, so the links carry no padding of their own: the space
   above and below them is on the wrapper. */
header.header .main-navbar-wrapper { padding-top: 10px; padding-bottom: 9px; border-top: 1px solid var(--ual-line); }
header.header .main-navbar-wrapper .navbar-nav > li > a { display: inline-block; padding: 0 0 1px; line-height: 1.5; margin-right: 26px; padding-right: 0 !important; color: var(--ual-ink); font-weight: 600; font-size: .97rem; text-decoration: none; border-bottom: 2px solid transparent; }
header.header .main-navbar-wrapper .navbar-nav.ml-auto > li > a { margin-right: 0; margin-left: 26px; }
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li.show > a,
header.header .main-navbar-wrapper .navbar-nav > li.active > a { border-bottom-color: var(--ual-red); color: var(--ual-ink); }
.dropdown-menu { border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow-lg); padding: 6px; font-size: .95rem; color: var(--ual-ink); }
.dropdown-item, header.header .navbar .dropdown-item { color: var(--ual-ink); border-radius: 5px; }
.dropdown-menu li.dropdown-item { padding: 0; }
.dropdown-menu a.dropdown-item { padding: 7px 12px !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ual-tint); color: var(--ual-ink); }
header.header .dropdown-item.active, header.header .dropdown-item:active, .dropdown-item.active, .dropdown-item:active { background-color: var(--ual-yellow-soft); color: var(--ual-ink); }
.dropdown-divider { border-top-color: var(--ual-line); }

.master-breadcrumb { background-color: transparent; border-bottom: 0; }
.master-breadcrumb .breadcrumb { background: transparent; margin: 0; padding: 14px 0 0; font-size: .875rem; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--ual-ink-2); }
.breadcrumb-item a { color: var(--ual-ink-2); text-decoration: underline; }
.breadcrumb-item a:hover { color: var(--ual-red); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ual-field); }
section#main-body { padding-top: 26px; padding-bottom: 56px; }
.network-issue-alert { border-radius: 0; }
.verification-banner { background-color: var(--ual-yellow-soft); border-bottom: 1px solid #ecd98b; color: var(--ual-ink); font-weight: 400; }
.verification-banner .fal, .verification-banner .far, .verification-banner .fas { color: var(--ual-ink); }
.verification-banner.email-verification .btn.btn-action, .verification-banner.email-verification .btn.btn-action:active { background: var(--ual-ink); border-color: var(--ual-ink); color: #fff; box-shadow: none; }

/* ---- buttons: red for the main action, ink outline for the rest --------- */
.btn { border-radius: var(--ual-radius); font-family: var(--ual-body); font-weight: 700; letter-spacing: 0; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-sm, .btn-group-sm > .btn { border-radius: 6px; font-size: .875rem; }
.btn-xs, .btn-group-xs > .btn { border-radius: 5px; }
.btn-lg, .btn-group-lg > .btn { border-radius: var(--ual-radius); font-size: 1.1rem; }
.btn:focus, .btn.focus { box-shadow: var(--ual-focus); }

.btn-primary, .btn-success, .btn-order-now,
.btn-primary:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active,
.btn-primary:focus, .btn-success:focus, .show > .btn-primary.dropdown-toggle, .show > .btn-success.dropdown-toggle {
	background-color: var(--ual-red); border-color: var(--ual-red); color: #fff; box-shadow: 0 3px 0 var(--ual-red-deep);
}
.btn-primary:hover, .btn-success:hover, .btn-order-now:hover { background-color: var(--ual-red-deep); border-color: var(--ual-red-deep); color: #fff; box-shadow: 0 4px 0 #8f1d16; transform: translateY(-1px); }
.btn-primary:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ual-red-deep); }
.btn-primary.disabled, .btn-primary:disabled, .btn-success.disabled, .btn-success:disabled { background-color: #dfa49f; border-color: #dfa49f; color: #fff; box-shadow: none; opacity: 1; }

.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success,
.btn-default:focus, .btn-secondary:focus, .btn-light:focus {
	background-color: #fff; border: 1.5px solid var(--ual-ink); color: var(--ual-ink); box-shadow: none;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-info:hover, .btn-outline-success:hover,
.btn-default:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled):active, .btn-default.active, .btn-secondary.active,
.show > .btn-default.dropdown-toggle, .show > .btn-secondary.dropdown-toggle, .open > .dropdown-toggle.btn-default {
	background-color: var(--ual-ink); border-color: var(--ual-ink); color: var(--ual-paper);
}
.btn-default.disabled, .btn-default:disabled, .btn-secondary.disabled, .btn-secondary:disabled { background-color: #fff !important; border-color: var(--ual-field) !important; color: var(--ual-grey); }

.btn-info, .btn-info:focus { background-color: var(--ual-blue); border-color: var(--ual-blue); color: #fff; box-shadow: none; }
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active { background-color: #1b3d80; border-color: #1b3d80; color: #fff; }
.btn-warning, .btn-warning:focus { background-color: var(--ual-yellow); border-color: #e3c95a; color: var(--ual-ink); box-shadow: none; }
.btn-warning:hover { background-color: #f5cf4a; border-color: #d9bb3f; color: var(--ual-ink); }
.btn-danger, .btn-outline-danger, .btn-danger:focus { background-color: #fff; border: 1.5px solid var(--ual-red-deep); color: var(--ual-red-deep); box-shadow: none; }
.btn-danger:hover, .btn-outline-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background-color: var(--ual-red-deep); border-color: var(--ual-red-deep); color: #fff; }
.btn-danger.disabled, .btn-danger:disabled { background-color: #fff; border-color: var(--ual-field); color: var(--ual-grey); }
.btn-link { color: var(--ual-blue); font-weight: 600; }
.btn-link:hover { color: var(--ual-red); }
.btn-return-to-admin, .btn-return-to-admin:hover { border-radius: 0 0 6px 6px !important; }

/* ---- forms -------------------------------------------------------------- */
label, .form-control-label, .col-form-label { font-weight: 700; font-size: .94rem; color: var(--ual-ink); }
.form-check-label, .custom-control-label, label.radio-inline, label.checkbox-inline, label.form-check { font-weight: 400; }
.form-control, .custom-select, .field, select.form-control {
	border: 1.5px solid var(--ual-field); border-radius: 6px; background-color: #fff; color: var(--ual-ink); box-shadow: none;
}
.form-control:focus, .custom-select:focus, .field:focus { border-color: var(--ual-blue); box-shadow: var(--ual-focus); color: var(--ual-ink); background-color: #fff; }
.form-control::placeholder { color: #93a2a6; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ual-tint); color: var(--ual-ink-2); }
.input-group-text { background-color: var(--ual-tint); border: 1.5px solid var(--ual-field); color: var(--ual-ink-2); }
.input-group > .input-group-prepend > .input-group-text { border-right: 0; }
.input-group > .input-group-append > .input-group-text { border-left: 0; }
.input-group .btn-reveal-pw, .input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { border: 1.5px solid var(--ual-field); border-left: 0; background: #fff; color: var(--ual-ink-2); box-shadow: none; transform: none; }
.custom-file-label { border: 1.5px solid var(--ual-field); border-radius: 6px; color: var(--ual-ink-2); }
.custom-file-label::after { background-color: var(--ual-tint); color: var(--ual-ink); border-left: 1.5px solid var(--ual-field); font-weight: 700; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ual-red); border-color: var(--ual-red); }
input[type=checkbox], input[type=radio] { accent-color: var(--ual-red); }
.field-help-text, .form-text, .help-block { color: var(--ual-ink-2); }
.has-error .form-control, .form-control.is-invalid { border-color: var(--ual-red-deep); }
.pw-strength-bar, .progress { background-color: var(--ual-tint); border-radius: 99px; }
.progress-bar { background-color: var(--ual-green-2); }
.progress-bar.bg-danger, .progress-bar-danger { background-color: var(--ual-red) !important; }
.progress-bar.bg-warning, .progress-bar-warning { background-color: #e0b530 !important; }
.md-editor, div.md-editor.active { border: 1.5px solid var(--ual-field); border-radius: 6px; overflow: hidden; }
.md-editor > .btn-toolbar { background-color: var(--ual-tint) !important; }
.md-editor > .btn-toolbar .btn { border-width: 1px; border-color: var(--ual-field); font-weight: 500; }
.md-editor > textarea.markdown-editor, .md-editor > .md-preview { border-top: 1px solid var(--ual-line) !important; border-bottom: 1px solid var(--ual-line) !important; color: var(--ual-ink); }
.md-editor > .btn-toolbar .btn-primary, .md-editor > .btn-toolbar .btn-primary:hover { background: #fff; color: var(--ual-ink); border: 1px solid var(--ual-field); box-shadow: none; transform: none; }
.md-editor .md-footer, .md-editor > .md-footer { background-color: var(--ual-paper); }
.markdown-editor-status { color: var(--ual-ink-2); }
.bootstrap-switch { border: 1.5px solid var(--ual-field); border-radius: 6px; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { background: var(--ual-green-2); color: #fff; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: var(--ual-tint); color: var(--ual-ink); }

/* ---- cards, panels, lists, tabs, modals --------------------------------- */
.card, .panel, .promo-container, .twofa-module {
	background-color: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow); color: var(--ual-ink);
}
.card-header, .panel-heading { background-color: var(--ual-card); border-bottom: 1px solid var(--ual-line); color: var(--ual-ink); }
.card-header:first-child { border-radius: calc(var(--ual-radius) - 1px) calc(var(--ual-radius) - 1px) 0 0; }
.card-footer, .panel-footer { background-color: var(--ual-paper); border-top: 1px solid var(--ual-line); }
.card-footer:last-child { border-radius: 0 0 calc(var(--ual-radius) - 1px) calc(var(--ual-radius) - 1px); }
.card-title { color: var(--ual-ink); }
.card .card { box-shadow: none; }
.card-header.bg-success, .card-header.bg-primary, .card-header.bg-info, .card-header.bg-danger { color: #fff; }
.card-header.bg-success h3, .card-header.bg-primary h3, .card-header.bg-info h3 { color: #fff; }
[class*="card-accent-"] { border-top: 3px solid var(--ual-green); }
.card-accent-red, .card-accent-pomegranate { border-top-color: var(--ual-red); }
.card-accent-gold, .card-accent-sun-flower, .card-accent-orange { border-top-color: var(--ual-yellow); }
.card-accent-blue, .card-accent-midnight-blue, .card-accent-wet-asphalt { border-top-color: var(--ual-blue); }
.list-group-item { border-color: var(--ual-line); color: var(--ual-ink); background-color: var(--ual-card); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ual-yellow-soft); color: var(--ual-ink); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: var(--ual-ink); border-color: var(--ual-ink); color: #fff; }
.sidebar .card { margin-bottom: 18px; }
.sidebar .card-header { padding: 14px 16px 10px; border-bottom: 0; }
.sidebar .card-title { font-family: var(--ual-display); font-size: 1.1rem; font-weight: 600; }
.sidebar .card-title .btn, .sidebar .card-minimise { color: var(--ual-ink-2); }
.sidebar .list-group-item { padding: 9px 16px; border-color: var(--ual-line); font-size: .95rem; }
.sidebar .list-group-item .badge { background-color: var(--ual-tint); color: var(--ual-ink); border-radius: 99px; }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover { background-color: var(--ual-ink); border-color: var(--ual-ink); color: #fff; }
.sidebar .list-group-item.active .badge { background-color: var(--ual-yellow); color: var(--ual-ink); }
.sidebar .list-group-item > i.far.fa-circle { color: var(--ual-field); }
.nav-tabs { border-bottom: 1px solid var(--ual-line); }
.nav-tabs .nav-link { color: var(--ual-ink-2); font-weight: 600; border-radius: 6px 6px 0 0; }
.nav-tabs .nav-link:hover { border-color: transparent transparent var(--ual-line); color: var(--ual-ink); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ual-ink); background-color: var(--ual-card); border-color: var(--ual-line) var(--ual-line) var(--ual-card); box-shadow: inset 0 3px 0 var(--ual-red); }
.nav-pills .nav-link.active { background-color: var(--ual-ink); }
.responsive-tabs-sm, .responsive-tabs-sm .nav-item, .responsive-tabs-sm-connector .channel, .responsive-tabs-sm-connector .bottom-border { border-color: var(--ual-line) !important; }
.modal-content { border: 1px solid var(--ual-line); border-radius: 10px; box-shadow: var(--ual-shadow-lg); color: var(--ual-ink); }
.modal .modal-header { background-color: var(--ual-tint); border-bottom: 1px solid var(--ual-line); border-radius: 9px 9px 0 0; }
.modal-title { font-family: var(--ual-display); font-weight: 600; }
.modal-footer { border-top: 1px solid var(--ual-line); }
.modal-localisation .modal-content { background-color: var(--ual-green); }
.modal-localisation .modal-body { background-image: none; }
.modal-localisation .item-selector .item { border-color: rgba(247, 244, 234, .4); color: #f7f4ea; border-radius: 6px; }
.modal-localisation .item-selector .item:hover, .modal-localisation .item-selector .item.active { background-color: var(--ual-yellow); border-color: var(--ual-yellow); color: var(--ual-ink); }
.popover { border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow-lg); font-family: var(--ual-body); }
.popover-user-notifications { border-radius: var(--ual-radius); border-color: var(--ual-line); font-family: var(--ual-body); }
.popover-user-notifications ul li { border-bottom-color: var(--ual-line); }
.popover-user-notifications ul li a { color: var(--ual-ink); }
.popover-user-notifications ul li a:hover { background-color: var(--ual-yellow-soft); }
.tooltip-inner { background-color: var(--ual-ink); border-radius: 6px; font-family: var(--ual-body); }
.page-link { color: var(--ual-ink); border-color: var(--ual-line); }
.page-link:hover { background-color: var(--ual-yellow-soft); color: var(--ual-ink); border-color: var(--ual-line); }
.page-item.active .page-link, .pagination > .active > a, .pagination > .active > span { background-color: var(--ual-ink); border-color: var(--ual-ink); color: #fff; }
.page-item.disabled .page-link { color: var(--ual-grey); border-color: var(--ual-line); }

/* ---- tables ------------------------------------------------------------- */
.table { color: var(--ual-ink); }
.table th, .table td { border-top: 1px solid var(--ual-line); vertical-align: middle; }
.table thead th { background-color: var(--ual-tint); border-bottom: 1px solid var(--ual-line); border-top: 0; font-weight: 700; font-size: .9rem; color: var(--ual-ink); white-space: nowrap; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(243, 236, 219, .38); }
.table-hover tbody tr:hover, table.table-list tbody tr:hover { background-color: var(--ual-yellow-soft); color: var(--ual-ink); }
.table-container { background: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow); padding: 0; overflow: hidden; }
.table-container .table { margin-bottom: 0 !important; }
.dataTables_wrapper .dataTables_info { background-color: var(--ual-card); color: var(--ual-ink-2); border-bottom: 1px solid var(--ual-line); border-radius: 0; padding: 14px 16px; font-size: .9rem; }
.dataTables_wrapper .dataTables_filter { padding: 8px 12px 0; }
.dataTables_wrapper .dataTables_filter label .form-control { border: 1.5px solid var(--ual-field); border-radius: 6px; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { padding: 12px 16px; font-size: .9rem; color: var(--ual-ink-2); }
.dataTables_wrapper .dataTables_length label { font-weight: 400; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { color: var(--ual-ink-2); }
table.table-list tbody td { cursor: pointer; }
table.table-list tbody td a { color: var(--ual-ink); font-weight: 600; }

/* ---- status labels, badges, alerts -------------------------------------- */
.label, .badge { border-radius: 99px; font-weight: 700; letter-spacing: 0; }
.label { display: inline-block; padding: .28em .8em; font-size: .78rem; line-height: 1.3; color: #fff; }
.badge-info, .label-info { background-color: var(--ual-blue); color: #fff; }
.badge-success, .label-success { background-color: var(--ual-green-2); color: #fff; }
.badge-warning, .label-warning { background-color: var(--ual-yellow); color: var(--ual-ink); }
.badge-danger, .label-danger { background-color: var(--ual-red); color: #fff; }
.badge-primary { background-color: var(--ual-ink); color: #fff; }
.badge-secondary, .label-default { background-color: var(--ual-grey); color: #fff; }
.status-active, .status-completed, .status-open, .status-paid, .status-accepted { background-color: var(--ual-green-2); color: #fff; }
.status-pending, .status-pending-transfer, .status-pending-registration, .status-suspended, .status-customer-reply, .status-grace, .status-redemption, .status-refunded { background-color: var(--ual-yellow); color: var(--ual-ink) !important; }
.status-unpaid, .status-overdue, .status-fraud, .status-collections, .status-dead, .status-lost { background-color: var(--ual-red); color: #fff; }
.status-answered, .status-onhold, .status-inprogress, .status-payment-pending, .status-delivered { background-color: var(--ual-blue); color: #fff; }
.status-closed, .status-cancelled, .status-terminated, .status-expired, .status-transferred-away, .status-draft { background-color: var(--ual-grey); color: #fff; }
.div-service-status .label.status-pending, .div-service-status .label.status-suspended { color: var(--ual-ink); }
.requestor-type-operator { background-color: var(--ual-blue); }
.requestor-type-owner { background-color: var(--ual-green-2); }
.requestor-type-registereduser { background-color: var(--ual-yellow); color: var(--ual-ink); }
.requestor-type-authorizeduser, .requestor-type-subaccount, .requestor-type-guest { background-color: var(--ual-grey); }
.alert { border-radius: var(--ual-radius); border: 1px solid transparent; color: var(--ual-ink); }
.alert a { color: var(--ual-ink); text-decoration: underline; font-weight: 600; }
.alert-info { background-color: #e8eef9; border-color: #c3d2ee; }
.alert-success { background-color: var(--ual-tint-2); border-color: #bfd6cb; }
.alert-warning { background-color: var(--ual-yellow-soft); border-color: #ecd98b; }
.alert-danger, .alert-error { background-color: #fbe9e7; border-color: #f0bdb8; }
.alert-secondary, .alert-light { background-color: var(--ual-tint); border-color: var(--ual-line); }

/* ---- portal home -------------------------------------------------------- */
.primary-content > h2.text-center { margin: 34px 0 18px !important; }
.primary-content > h2.text-center:first-child { margin-top: 8px !important; }
.card-columns.home { column-count: 1; max-width: 760px; margin-inline: auto; }
.card-columns.home .card { box-shadow: var(--ual-shadow-lg); }
.card-columns.home .card-body { padding: 30px 28px !important; }
.card-columns.home .card-title { font-size: 1.6rem; margin-bottom: 12px; }
.card-columns.home .card p { color: var(--ual-ink-2); font-size: 1.02rem; margin-bottom: 20px; }
.card-columns.home .card .btn { display: inline-block; width: auto; padding: .7em 1.5em; background-color: var(--ual-red); border-color: var(--ual-red); color: #fff; box-shadow: 0 3px 0 var(--ual-red-deep); }
.card-columns.home .card .btn:hover { background-color: var(--ual-red-deep); border-color: var(--ual-red-deep); transform: translateY(-1px); }
.action-icon-btns { margin-top: 18px !important; margin-bottom: 18px !important; }
.action-icon-btns a, .action-icon-btns a[class*="card-accent-"] {
	margin: 0 0 14px; padding: 20px 10px 18px; background-color: var(--ual-card); border: 1px solid var(--ual-line); border-top: 1px solid var(--ual-line);
	border-radius: var(--ual-radius); box-shadow: var(--ual-shadow); color: var(--ual-ink); font-weight: 600; font-size: .97rem;
}
.action-icon-btns a:hover { color: var(--ual-ink); border-color: var(--ual-ink); transform: translateY(-3px); text-decoration: none; }
.action-icon-btns a .ico-container { margin: 0 0 8px; }
.action-icon-btns a .ico-container i { color: var(--ual-green-2); font-size: 2.1rem; }
.action-icon-btns a:hover .ico-container i { color: var(--ual-red); }
.home-domain-search { background: var(--ual-tint) !important; }
.home-domain-search .input-group-wrapper { border: 1.5px solid var(--ual-field); border-radius: var(--ual-radius); }

/* The portal home proper (homepage.tpl). Bands run edge to edge from inside
   the page container: the ground is painted with a huge box-shadow and the
   sides are left unclipped. */
body:has(.ual-home) .master-breadcrumb { display: none; }
body:has(.ual-home) #main-body { padding-top: 0; padding-bottom: 0; overflow-x: clip; }
.ual-home { font-size: 1.0625rem; }
.ual-home p { margin: 0; }
.ual-h-band { --band: var(--ual-paper); position: relative; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.ual-h-sec { padding: clamp(48px, 6.5vw, 84px) 0; }
.ual-h-sec--tint { --band: var(--ual-tint); }
.ual-h-sec--tint2 { --band: var(--ual-tint-2); }
.ual-h-sec--last { padding-bottom: clamp(28px, 4vw, 44px); }
.ual-h-head { max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 42px); }
.ual-h-head h2, .ual-h-host h2, .ual-h-domains h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); margin: 0; }
.ual-h-head p { margin-top: 12px; font-size: clamp(1.06rem, 1.5vw, 1.25rem); color: var(--ual-ink-2); }
.ual-hl { background: linear-gradient(100deg, transparent 0, var(--ual-yellow) 3%, var(--ual-yellow) 96%, transparent 100%); padding: 0 .16em; margin: 0 -.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ual-h-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ual-h-btns--c { justify-content: center; }
.ual-home .btn-lg { padding: .72em 1.4em; font-size: 1.08rem; }
.ual-home .btn-default { background: #fff; }
.ual-h-more { font-weight: 600; margin-left: 6px; }

/* hero: ruled paper with the red margin line, as on the main site */
.ual-h-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(44px, 6vw, 80px); }
.ual-h-hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; background-image: linear-gradient(to bottom, transparent 43px, rgba(120, 160, 190, .22) 43px, rgba(120, 160, 190, .22) 44px); background-size: 100% 44px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%); mask-image: linear-gradient(to bottom, #000, transparent 88%); pointer-events: none; }
.ual-h-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: -22px; width: 2px; background: rgba(213, 54, 43, .28); pointer-events: none; }
.ual-h-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ual-h-hero h1 { font-size: clamp(2.2rem, 4.7vw, 3.7rem); line-height: 1.08; letter-spacing: -.025em; margin: 0; }
.ual-h-lede { margin: 20px 0 26px !important; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ual-ink-2); max-width: 34em; }
.ual-h-fine { margin-top: 16px !important; font-size: .94rem; color: var(--ual-ink-2); max-width: 34em; }

/* a framed print: a real screenshot with a caption under it, never over it */
.ual-h-print { position: relative; margin: 0; padding: 12px 12px 12px; background: var(--ual-card); border: 1px solid var(--ual-line); border-radius: 3px; box-shadow: var(--ual-shadow-lg); }
.ual-h-print img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border: 1px solid var(--ual-line); }
.ual-h-print figcaption { padding: 10px 4px 0; text-align: center; font-family: var(--ual-display); font-weight: 600; font-size: 1.05rem; color: var(--ual-ink); }
.ual-h-hero .ual-h-print { justify-self: end; width: min(100%, 520px); transform: rotate(1.4deg); }
.ual-h-hero .ual-h-print::before { content: ""; position: absolute; z-index: 1; top: -15px; left: 50%; width: 128px; height: 30px; margin-left: -64px; background: rgba(240, 228, 188, .9); border-left: 1px dashed rgba(0, 0, 0, .14); border-right: 1px dashed rgba(0, 0, 0, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transform: rotate(-2.5deg); }

/* the strip of facts under the hero */
.ual-h-rail { --band: var(--ual-tint-2); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 18px 0; list-style: none; font-size: .97rem; }
.ual-h-rail li, .ual-h-chips li { padding: 6px 14px; border-radius: 5px; background: var(--ual-card); border: 1px solid var(--ual-line); }
.ual-h-rail b, .ual-h-chips b { font-weight: 800; }

/* what is in the $25: the price card and what happens after the order */
.ual-h-offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(22px, 3.4vw, 44px); align-items: start; }
.ual-h-price { background: var(--ual-card); border: 1px solid var(--ual-line); border-top: 14px solid var(--ual-red); border-radius: 4px; padding: clamp(24px, 3.2vw, 40px); box-shadow: var(--ual-shadow-lg); }
.ual-h-price h3 { font-size: 1.5rem; margin: 0; }
.ual-h-price__amt { margin: 10px 0 10px; font-family: var(--ual-display); font-weight: 600; font-size: clamp(4rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.03em; color: var(--ual-ink); }
.ual-h-price__amt small { font: 600 1.25rem/1 var(--ual-body); letter-spacing: 0; margin-left: 8px; color: var(--ual-ink-2); }
.ual-h-price ul { display: grid; gap: 11px; margin: 22px 0 28px; padding: 0; list-style: none; }
.ual-h-price li { position: relative; padding-left: 34px; line-height: 1.4; }
.ual-h-price li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--ual-green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ual-h-steps { display: grid; gap: 0; }
.ual-h-step { padding: 22px 0; border-bottom: 1px dashed var(--ual-field); }
.ual-h-step:first-child { padding-top: 6px; }
.ual-h-step:last-child { border-bottom: 0; }
.ual-h-step h3 { font-size: 1.4rem; margin: 0 0 8px; }
.ual-h-step p { color: var(--ual-ink-2); }
.ual-h-box { margin-top: 14px !important; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--ual-radius); background: var(--ual-yellow-soft); }

/* six looks */
.ual-h-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 28px); }
.ual-h-looks .ual-h-print { padding: 10px 10px 12px; box-shadow: var(--ual-shadow); }
.ual-h-note { margin: 26px auto 26px !important; max-width: 40em; text-align: center; font-size: .97rem; color: var(--ual-ink-2); }

/* hosting */
.ual-h-host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 64px); align-items: center; }
.ual-h-host p { margin: 16px 0 20px; color: var(--ual-ink-2); font-size: 1.12rem; }
.ual-h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .97rem; font-weight: 600; }
.ual-h-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ual-h-plan { display: block; padding: 20px 14px; border-radius: 6px; background: var(--ual-card); border: 1px solid var(--ual-line); box-shadow: var(--ual-shadow); color: var(--ual-ink); text-align: center; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ual-h-plan:hover, .ual-h-plan:focus { color: var(--ual-ink); text-decoration: none; transform: translateY(-4px); border-color: var(--ual-ink); }
.ual-h-plan b { display: block; font-size: 1rem; }
.ual-h-plan strong { display: block; font-family: var(--ual-display); font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; margin: 6px 0 4px; }
.ual-h-plan span { display: block; font-size: .875rem; line-height: 1.35; color: var(--ual-ink-2); }
.ual-h-plan--best { background: var(--ual-yellow-soft); border-color: #e3c95a; }
.ual-h-plan--best span { color: var(--ual-ink); }
.ual-h-host .ual-h-btns { margin: 20px 0 0; }

/* domains */
.ual-h-domains { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(34px, 4.6vw, 54px) 0; }
.ual-h-domains p { color: var(--ual-ink-2); }
.ual-h-domains h2 + p { margin-top: 10px; max-width: 34em; color: var(--ual-ink); }

/* account and help links */
.ual-h-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ual-h-links a { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; background: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow); color: var(--ual-ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ual-h-links a:hover, .ual-h-links a:focus { color: var(--ual-ink); text-decoration: none; border-color: var(--ual-ink); transform: translateY(-3px); }
.ual-h-links i { grid-row: 1 / 3; font-size: 1.8rem; color: var(--ual-green-2); text-align: center; }
.ual-h-links a:hover i { color: var(--ual-red); }
.ual-h-links b { font-weight: 700; line-height: 1.25; }
.ual-h-links span { font-size: .9rem; color: var(--ual-ink-2); line-height: 1.3; }

@media (max-width: 991.98px) {
	.ual-h-hero__in, .ual-h-offer, .ual-h-host, .ual-h-domains { grid-template-columns: 1fr; }
	.ual-h-hero .ual-h-print { justify-self: center; width: min(100%, 440px); }
	.ual-h-hero::after { left: -8px; }
	.ual-h-looks, .ual-h-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
	.ual-h-looks, .ual-h-links, .ual-h-plans { grid-template-columns: 1fr; }
	.ual-h-btns .btn { flex: 1 1 100%; }
	.ual-h-more { margin: 4px 0 0; }
	.ual-h-hero .ual-h-print { transform: rotate(.8deg); }
	.ual-h-rail { justify-content: flex-start; }
}

/* ---- client area home --------------------------------------------------- */
.tiles { border: 1px solid var(--ual-line); border-radius: var(--ual-radius); overflow: hidden; box-shadow: var(--ual-shadow); background: var(--ual-card); }
.tiles .tile { background-color: var(--ual-card); border-right: 1px solid var(--ual-line); padding: 16px 20px; }
.tiles div:nth-child(1) > .tile, .tiles div:nth-child(2) > .tile { border-bottom-color: var(--ual-line); }
.tiles .tile:hover { background-color: var(--ual-yellow-soft); }
.tiles .tile .stat { font-family: var(--ual-display); font-weight: 600; font-size: 2.5rem; color: var(--ual-ink); line-height: 1.1; }
.tiles .tile .title { color: var(--ual-ink-2); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.tiles .tile i { color: var(--ual-line); }
.tiles .tile:hover i { color: var(--ual-field); }
.tiles .tile .highlight { height: 3px; border-radius: 2px; }
.bg-color-blue { background-color: var(--ual-blue); }
.bg-color-green { background-color: var(--ual-green-2); }
.bg-color-red { background-color: var(--ual-red); }
.bg-color-gold { background-color: #e0b530; }
.client-home-cards .card-header { background-color: var(--ual-card); border-bottom: 0; padding: 16px 18px 10px; }
.client-home-cards .card-title { font-family: var(--ual-display); font-size: 1.12rem; font-weight: 600; }
.client-home-cards .card-header .btn { background: #fff; color: var(--ual-ink); border: 1.5px solid var(--ual-ink); font-size: .78rem; padding: 3px 10px; box-shadow: none; }
.client-home-cards .card-header .btn:hover { background: var(--ual-ink); color: #fff; }
.client-home-cards .card-header .btn.bg-color-red, .client-home-cards .card-header .btn.bg-color-green { background: var(--ual-red); border-color: var(--ual-red); color: #fff; }
.client-home-cards .card-footer { background: var(--ual-card); border-top: 0; }
.client-home-cards .list-group { border-top-color: var(--ual-line) !important; border-bottom-color: var(--ual-line) !important; }
.client-home-cards .list-group .list-group-item { border-bottom-color: var(--ual-line); padding: 8px 14px; }
.client-home-cards small { color: var(--ual-ink-2); }
div[menuitemname="Active Products/Services"] .div-service-item { border-color: var(--ual-line); }
.div-service-name .font-weight-bold { font-size: 1.02rem; }
.text-domain { color: var(--ual-ink-2); }
.product-status { border-radius: var(--ual-radius); overflow: hidden; }
.product-status .product-icon { background-color: var(--ual-green); color: #fff; }
.product-status-active { background-color: var(--ual-green-2); }
.product-status-pending, .product-status-suspended { background-color: #e0b530; }
.product-status-terminated, .product-status-cancelled { background-color: var(--ual-grey); }
.product-status .product-status-text { color: #fff; font-weight: 700; }
.product-details-tab-container, .tab-content.product-details-tab-container { background: var(--ual-card); border: 1px solid var(--ual-line); border-top: 0; border-radius: 0 0 var(--ual-radius) var(--ual-radius); }
.twofa-setup .backup-code, .twofa-setup .activation-msg { background: var(--ual-tint); border-color: var(--ual-line); color: var(--ual-ink); }

/* ---- error pages (404, rate limit) ------------------------------------- */
.primary-content i.display-1.text-primary, .container > .text-center > i.display-1 { font-size: 3.2rem; color: var(--ual-red) !important; }
.primary-content h1.display-1.text-primary, .container > .text-center > h1.display-1 { font-size: clamp(2.6rem, 6vw, 4rem); color: var(--ual-ink) !important; margin: 14px 0 22px !important; }
.container > .text-center > .buttons { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- sign in, register, password reset ---------------------------------- */
.login-form .card, form.login-form .card, .mw-540 > .card, .card.mw-540 { box-shadow: var(--ual-shadow-lg); }
.login-form .h3, .login-form h1 { font-family: var(--ual-display); font-weight: 600; font-size: 1.8rem; }
.login-form .card-footer { background: var(--ual-tint); text-align: center; }
.login-form .input-group-merge .form-control { border-left: 0; }
.login-form .input-group-merge .input-group-text { background: #fff; }
#registration .card-title, .card-body > h3.card-title { font-size: 1.3rem; }
#default-captcha-domainchecker #inputCaptcha, .default-captcha { border-radius: 6px; }

/* ---- support tickets ---------------------------------------------------- */
.view-ticket .card-title { font-size: 1.4rem; }
.ticket-reply { border: 1px solid var(--ual-line); border-radius: var(--ual-radius); overflow: hidden; background: var(--ual-card); }
.ticket-reply .posted-by { background-color: var(--ual-tint); border-bottom: 1px solid var(--ual-line); padding: 10px 16px; font-size: .9rem; color: var(--ual-ink-2); }
.ticket-reply .posted-by .posted-by-name { color: var(--ual-ink); font-weight: 700; }
.ticket-reply.staff { border-color: #bfd6cb; }
.ticket-reply.staff .posted-by { background-color: var(--ual-tint-2); border-bottom-color: #bfd6cb; }
.ticket-reply .message { color: var(--ual-ink); }
.ticket-reply .attachments { background: var(--ual-paper); border-top: 1px solid var(--ual-line); }
.ticket-number { color: var(--ual-ink-2); font-size: .85rem; }
.ticket-subject { font-weight: 700; color: var(--ual-ink); }
.ticket-subject.unread { color: var(--ual-red-deep); }
.markdown-content h1, .md-preview h1, .markdown-content h2, .md-preview h2, .markdown-content h3, .md-preview h3, .markdown-content h4, .md-preview h4 { color: var(--ual-ink); }
.markdown-content pre, .md-preview pre { background-color: var(--ual-ink); color: #f7f4ea; border-radius: 6px; }
.markdown-content blockquote, .md-preview blockquote { border-left: 4px solid var(--ual-yellow); }
.markdown-content table > thead > tr > th, .md-preview table > thead > tr > th { background-color: var(--ual-tint); border-color: var(--ual-line); }
.markdown-content table, .markdown-content table > tbody > tr > td, .md-preview table, .md-preview table > tbody > tr > td { border-color: var(--ual-line); }
.rating .star, .rating-done .star { color: #e0b530; }

/* ---- knowledgebase and announcements ------------------------------------ */
.kb-search .form-control { border-right: 0; height: auto; padding: .75rem 1rem; font-size: 1.05rem; }
.kb-search .btn { border-radius: 0 var(--ual-radius) var(--ual-radius) 0; }
.kb-category, a.kb-category { color: var(--ual-ink); }
.kb-category .fa-folder, .kb-category i { color: var(--ual-green-2); }
.card .kb-article-item, a.kb-article-item { color: var(--ual-ink); font-weight: 600; }
a.kb-article-item:hover { background-color: var(--ual-yellow-soft); color: var(--ual-ink); }
.kb-article-item small, .kb-article-item .text-muted { font-weight: 400; }
.kb-article-item i, .kb-article-item .fal { color: var(--ual-green-2); }
.card.kb-category { transition: transform .15s ease, border-color .15s ease; }
.card.kb-category:hover { transform: translateY(-2px); border-color: var(--ual-ink); }
.card.kb-category a.card-body { display: block; padding: 20px 22px; color: var(--ual-ink); text-decoration: none; }
.card.kb-category .h5 { display: block; font-family: var(--ual-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: 4px !important; }
.card.kb-category .badge { font-family: var(--ual-body); font-size: .74rem; background: var(--ual-tint); color: var(--ual-ink); margin-top: 3px; }
.card.kb-category p small { font-size: .93rem; line-height: 1.5; }
a.kb-article-item small { display: block; margin: 2px 0 0 1.7em; color: var(--ual-ink-2); }
.card-body > h1 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.card-body > article { font-size: 1.06rem; line-height: 1.7; max-width: 44em; }
.card-body > article h2, .card-body > article h3 { margin: 1.5em 0 .5em; font-size: 1.25rem; }
.card-body > article ol, .card-body > article ul { padding-left: 1.4em; margin-bottom: 1rem; }
.card-body > article li { margin: .35em 0; }
.card-body > article li::marker { color: var(--ual-blue); font-weight: 700; }
.card-body > article p:last-child { margin-bottom: 0; }
.announcements .announcement, .announcement { border-bottom: 1px solid var(--ual-line); }
.announcements .announcement h1, .announcements .announcement h2, .announcements .announcement h3 { font-size: 1.45rem; }
.announcements blockquote, .announcement blockquote, .primary-content blockquote { margin: 16px 0; padding: 14px 18px; background: var(--ual-paper); border-left: 4px solid var(--ual-yellow); border-radius: 0 6px 6px 0; color: var(--ual-ink); font-size: 1rem; }
.announcements .announcement h1 a, .announcements .announcement h2 a, .announcements .announcement h3 a { color: var(--ual-ink); text-decoration: none; }
.announcements .announcement h1 a:hover, .announcements .announcement h3 a:hover { color: var(--ual-red); }

/* ---- order form (standard_cart). Its CSS loads after this file, so every
        rule here carries "body" to win. ----------------------------------- */
body #order-standard_cart { font-size: 1rem; }
body #order-standard_cart .header-lined h1, body #order-standard_cart h1 { font-family: var(--ual-display); font-weight: 600; font-size: clamp(1.7rem, 2.8vw, 2.2rem); border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
body #order-standard_cart .header-lined p, body #order-standard_cart .header-lined + p { color: var(--ual-ink-2); font-size: 1.05rem; max-width: 46em; }
body #order-standard_cart label, body #order-standard_cart p.domain-renewal-desc { font-weight: 700; font-size: .94rem; color: var(--ual-ink); }
body #order-standard_cart label.radio-inline, body #order-standard_cart label.checkbox-inline, body #order-standard_cart .checkbox-inline, body #order-standard_cart .form-check label { font-weight: 400; }
body #order-standard_cart .field, body #order-standard_cart .form-control { border: 1.5px solid var(--ual-field); border-radius: 6px; color: var(--ual-ink); background-color: #fff; }
body #order-standard_cart .form-control:focus, body #order-standard_cart .field:focus { border-color: var(--ual-blue); box-shadow: var(--ual-focus); }
body #order-standard_cart .field-icon i { color: var(--ual-ink-2); }
body #order-standard_cart .field-help-text { color: var(--ual-ink-2); }
body #order-standard_cart .cart-sidebar h3, body #order-standard_cart .sidebar-collapsed h3 { font-family: var(--ual-display); font-size: 1.1rem; font-weight: 600; }
body #order-standard_cart .cart-sidebar .card, body #order-standard_cart .cart-sidebar .panel { margin-bottom: 18px; }
body #order-standard_cart .sidebar-collapsed { border: 0; border-radius: 0; background: transparent; padding: 0; }
body #order-standard_cart .sidebar-collapsed .card { margin-bottom: 14px; }
body #order-standard_cart .sub-heading { border-top: 1px solid var(--ual-line); margin: 40px 0 30px; }
body #order-standard_cart .sub-heading span, body #order-standard_cart .sub-heading-borderless span { font-family: var(--ual-display); font-weight: 600; font-size: 1.15rem; color: var(--ual-ink); background-color: var(--ual-paper); padding: 0 14px; top: -15px; line-height: 1.5; }

/* plan cards */
body #order-standard_cart .products .product { display: flex; flex-direction: column; height: calc(100% - 26px); margin: 0 0 26px; padding: 0; background: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow); overflow: hidden; }
body #order-standard_cart .products .product header { margin: 0; padding: 20px 22px 0; background: transparent; border-radius: 0; }
body #order-standard_cart .products .product header span { font-family: var(--ual-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -.018em; color: var(--ual-ink); }
body #order-standard_cart .products .product header .qty { font-family: var(--ual-body); font-size: .8rem; color: var(--ual-ink-2); }
body #order-standard_cart .products .product div.product-desc { float: none; width: auto; padding: 10px 22px 18px; font-size: .97rem; line-height: 1.55; color: var(--ual-ink-2); }
body #order-standard_cart .products .product div.product-desc p { margin: 0 0 12px; }
body #order-standard_cart .products .product div.product-desc b, body #order-standard_cart .products .product div.product-desc strong { color: var(--ual-ink); }
body #order-standard_cart .products .product div.product-desc > br, body .ual-spec > br { display: none; }
body #order-standard_cart .products .product footer { float: none; width: auto; margin: auto 0 0; padding: 16px 22px 20px; border-top: 1px solid var(--ual-line); background: var(--ual-paper); display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .9rem; text-align: left; }
body #order-standard_cart .products .product div.product-pricing { margin: 0; color: var(--ual-ink-2); line-height: 1.3; }
body #order-standard_cart .products .product div.product-pricing span.price { display: block; font-family: var(--ual-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; color: var(--ual-ink); }
body #order-standard_cart .products .product footer .btn { flex: none; margin: 0; padding: .6em 1.15em; font-size: .97rem; }
body #order-standard_cart .products .product div.product-pricing br { display: none; }
/* The plans sit in one grid whatever rows the template wrapped them in: three
   across on a desktop, two on a tablet, one on a phone. */
body #order-standard_cart .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 22px; }
body #order-standard_cart .products > .row { display: contents; }
body #order-standard_cart .products > .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }
body #order-standard_cart .products .product { height: 100%; margin: 0; }
/* On the plans page the side column becomes a row of category buttons above
   the plans (hidden while there is only one category), so the plans get the
   full width. Browsers without :has() keep the stock two-column layout. */
@media (min-width: 1200px) {
	body #order-standard_cart:has(#products) .cart-sidebar { float: none; width: 100%; padding: 0 15px; }
	body #order-standard_cart:has(#products) .cart-body { float: none; width: 100%; }
	body #order-standard_cart:has(#products) .cart-sidebar .card { margin: 0; border: 0; background: transparent; box-shadow: none; }
	body #order-standard_cart:has(#products) .cart-sidebar .card-header,
	body #order-standard_cart:has(#products) .cart-sidebar .card[menuitemname="Actions"],
	body #order-standard_cart:has(#products) .cart-sidebar .list-group:has(> a:only-child) { display: none !important; }
	body #order-standard_cart:has(#products) .cart-sidebar .list-group { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
	body #order-standard_cart:has(#products) .cart-sidebar .list-group-item { width: auto; padding: 7px 18px; border: 1.5px solid var(--ual-ink); border-radius: 99px; font-weight: 700; font-size: .95rem; background: transparent; }
	body #order-standard_cart:has(#products) .cart-sidebar .list-group-item.active { background: var(--ual-ink); color: #fff; }
}
/* Checkout is the one page with nothing beside it: no category or cart links. */
body #order-standard_cart:has(#frmCheckout) .cart-sidebar, body #order-standard_cart:has(#frmCheckout) .sidebar-collapsed { display: none; }
/* Once someone is inside an order (domain, configure, cart) the Categories
   and Actions menus only lead back out of it, so they are hidden at every
   width and the form takes the full row. They stay on the plan lists, where
   they switch between Shared Hosting and Teacher stores. */
body #order-standard_cart:not(:has(#products)) .sidebar-collapsed,
body #order-standard_cart:not(:has(#products)) .cart-sidebar { display: none; }
body #order-standard_cart:not(:has(#products)) .cart-body { float: none; width: 100%; }
body #order-standard_cart:has(#frmCheckout) .cart-body { float: none; width: 100%; max-width: 860px; margin-inline: auto; }
body #order-standard_cart:has(#products) .sidebar-collapsed .card:has(select > option:only-child),
body #order-standard_cart:has(#products) .sidebar-collapsed .card:has(option[menuitemname="View Cart"]) { display: none; }
body .ual-spec { list-style: none; margin: 14px 0 0; padding: 0; }
body .ual-spec li { margin: 0; padding: 8px 0; border-top: 1px solid var(--ual-line); font-size: .93rem; line-height: 1.45; color: var(--ual-ink-2); }
body .ual-spec li:first-child { border-top: 0; padding-top: 0; }
body .ual-spec b { color: var(--ual-ink); font-weight: 700; }

/* configure, domain choice, add-ons */
body #order-standard_cart .product-info { background-color: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); padding: 18px 20px; font-size: .97rem; color: var(--ual-ink-2); }
body #order-standard_cart .product-info .product-title { font-family: var(--ual-display); font-weight: 600; font-size: 1.45rem; color: var(--ual-ink); }
body #order-standard_cart .domain-selection-options .option { background-color: var(--ual-card); border: 1.5px solid var(--ual-line); border-radius: var(--ual-radius); padding: 14px 18px; margin-bottom: 10px; }
body #order-standard_cart .domain-selection-options .option-selected { background-color: var(--ual-yellow-soft); border-color: var(--ual-ink); }
body #order-standard_cart .domain-selection-options .option label { font-size: 1rem; }
body #order-standard_cart .domain-checker-available { color: var(--ual-green-2); }
body #order-standard_cart .domain-checker-invalid, body #order-standard_cart .domain-checker-unavailable { color: var(--ual-red-deep); }
body #order-standard_cart .panel-addon { border-color: var(--ual-line); font-size: .93rem; }
body #order-standard_cart .panel-addon .panel-body label { color: var(--ual-ink); }
body #order-standard_cart .panel-addon .panel-price { background-color: var(--ual-tint); }
body #order-standard_cart .panel-addon .panel-add, body #order-standard_cart .panel-addon-selected .panel-add { background-color: var(--ual-red); color: #fff; border-radius: 0 0 7px 7px; font-weight: 700; }
body #order-standard_cart .panel-addon-selected { border-color: var(--ual-ink); }

/* summary box, cart, checkout */
body #order-standard_cart .order-summary { background-color: var(--ual-green); border-bottom: 0; border-radius: var(--ual-radius); padding: 0 4px 4px; box-shadow: var(--ual-shadow); }
body #order-standard_cart .order-summary h2 { font-family: var(--ual-display); font-weight: 600; font-size: 1.2rem; color: #f7f4ea; padding: 12px 10px 10px; }
body #order-standard_cart .summary-container { background-color: var(--ual-card); border-radius: 5px; font-size: .93rem; color: var(--ual-ink); }
body #order-standard_cart .order-summary .product-name { font-size: 1.05rem; }
body #order-standard_cart .order-summary .product-group { color: var(--ual-ink-2); }
body #order-standard_cart .order-summary .summary-totals, body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals { border-color: var(--ual-line); }
body #order-standard_cart .order-summary .recurring-charges { color: var(--ual-ink-2); }
body #order-standard_cart .order-summary .total-due-today .amt { font-family: var(--ual-display); font-weight: 600; font-size: 2.2rem; color: var(--ual-ink); }
body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--ual-blue); font-size: .93rem; }
body #order-standard_cart .order-summary .loader { color: #f7f4ea; }
body #order-standard_cart .view-cart-items-header { background-color: var(--ual-ink); color: #fff; font-size: .9rem; font-weight: 700; border-radius: var(--ual-radius) var(--ual-radius) 0 0; }
body #order-standard_cart .view-cart-items { border: 1px solid var(--ual-line); border-top: 0; border-bottom: 2px solid var(--ual-ink); border-radius: 0 0 var(--ual-radius) var(--ual-radius); overflow: hidden; }
body #order-standard_cart .view-cart-items .item { background-color: var(--ual-card); font-size: .93rem; }
body #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--ual-paper); }
body #order-standard_cart .view-cart-items .item-title { font-family: var(--ual-display); font-weight: 600; font-size: 1.2rem; color: var(--ual-ink); }
body #order-standard_cart .view-cart-items .item-group { font-size: .9rem; color: var(--ual-ink-2); }
body #order-standard_cart .view-cart-items .item-domain { color: var(--ual-ink-2); }
body #order-standard_cart .view-cart-items .item-price span { font-family: var(--ual-display); font-weight: 600; font-size: 1.3rem; }
body #order-standard_cart .view-cart-items .item-price .cycle { font-family: var(--ual-body); font-weight: 400; font-size: .85rem; color: var(--ual-ink-2); }
body #order-standard_cart .btn-remove-from-cart { color: var(--ual-ink-2); box-shadow: none; }
body #order-standard_cart .btn-remove-from-cart:hover { color: var(--ual-red-deep); }
body #order-standard_cart .empty-cart .btn { background-color: #fff; border: 1.5px solid var(--ual-ink); color: var(--ual-ink); border-radius: 6px; box-shadow: none; }
body #order-standard_cart .view-cart-tabs .nav-tabs { font-size: .9rem; }
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true], body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] { background-color: var(--ual-card); border-color: var(--ual-line) var(--ual-line) var(--ual-card); }
body #order-standard_cart .view-cart-tabs .tab-content { background-color: var(--ual-card); border: 1px solid var(--ual-line); border-top: 0; border-radius: 0 0 var(--ual-radius) var(--ual-radius); }
body #order-standard_cart .view-cart-promotion-code { background-color: var(--ual-yellow-soft); border: 1px dashed #d9bb3f; border-radius: 6px; }
body #order-standard_cart .view-cart-gateway-checkout { background-color: var(--ual-tint); border-radius: var(--ual-radius); }
body #order-standard_cart .apply-credit-container { background-color: var(--ual-tint); border-radius: var(--ual-radius); }
body #order-standard_cart .cc-input-container { background-color: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); }
body #order-standard_cart .cc-input-container .existing-cc-grid { color: var(--ual-ink); font-weight: 400; font-size: .93rem; }
body #order-standard_cart .checkout-security-msg { font-size: .9rem; }
body #order-standard_cart .account-select-container { border-right-color: var(--ual-line); }
body #order-standard_cart .account-select-container div.account { background: var(--ual-paper); border-color: var(--ual-line); }
body #order-standard_cart .account-select-container div.account.active { background: var(--ual-card); }
body #order-standard_cart .default-captcha { background-color: var(--ual-card); border: 1px solid var(--ual-line); box-shadow: none; color: var(--ual-ink-2); border-radius: 6px; }
body #order-standard_cart .order-confirmation span { font-family: var(--ual-display); font-weight: 600; }
body #order-standard_cart .mc-promo { border-color: var(--ual-line); border-bottom-color: var(--ual-green-2); border-radius: var(--ual-radius); }
body #order-standard_cart .mc-promo .body { background-color: var(--ual-paper); border-top-color: var(--ual-tint); }
body #order-standard_cart #btnCompleteOrder, body #order-standard_cart #checkout, body #order-standard_cart .btn-checkout { font-size: 1.1rem; padding: .75em 1.6em; }
body #order-standard_cart .alert { font-size: .97rem; }

/* store pages that use the theme rather than the cart */
.store-order-container .store-domain-tabs li a { background-color: var(--ual-paper); border-bottom-color: var(--ual-line); }
.store-order-container .store-domain-tab-content { border-color: var(--ual-line); }
.upgrade .product-to-be-upgraded { background-color: var(--ual-tint); border-radius: var(--ual-radius); }
.upgrade .products .product .current { background-color: var(--ual-yellow); color: var(--ual-ink); }
.upgrade .products .product .recommended { background-color: var(--ual-green-2); color: #fff; }

/* ---- invoice (viewinvoice.tpl is a page of its own) --------------------- */
.invoice-container { margin: 28px auto; padding: clamp(22px, 5vw, 56px); max-width: 880px; background-color: var(--ual-card); border: 1px solid var(--ual-line); border-radius: var(--ual-radius); box-shadow: var(--ual-shadow-lg); color: var(--ual-ink); }
.invoice-container .invoice-header h3 { font-size: 1.5rem; margin-top: 14px; }
.invoice-container img.ual-invoice-logo { width: 214px; height: auto; }
.invoice-container .invoice-status { font-family: var(--ual-display); font-weight: 600; font-size: 1.7rem; letter-spacing: 0; text-transform: none; }
.invoice-container .invoice-status .unpaid, .invoice-container .invoice-status .collections { color: var(--ual-red); }
.invoice-container .invoice-status .paid { color: var(--ual-green-2); }
.invoice-container .invoice-status .refunded { color: #8a6500; }
.invoice-container .invoice-status .cancelled, .invoice-container .invoice-status .draft { color: var(--ual-grey); }
.invoice-container .small-text { font-size: .95rem; color: var(--ual-ink); }
.invoice-container address { color: var(--ual-ink-2); }
.invoice-container .card { box-shadow: none; }
.invoice-container .card-header { background-color: var(--ual-tint); }
.invoice-container .card-header .card-title { font-size: 1.15rem !important; }
.invoice-container .table td.total-row, .invoice-container .table .total-row td { background-color: var(--ual-paper); font-weight: 700; }
.invoice-container .transactions-container { border: 1px solid var(--ual-line); border-radius: var(--ual-radius); overflow: hidden; }
.invoice-container .payment-btn-container { margin-top: 14px; }
@media print {
	body { background: #fff !important; }
	.invoice-container { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
}

/* ---- footer ------------------------------------------------------------- */
footer.footer { margin: 0; padding: 54px 0 26px; background-color: var(--ual-ink); color: #a7bbc1; font-size: .97rem; }
footer.footer a, footer.footer .nav-link { color: #dbe6e9; text-decoration: none; }
footer.footer a:hover { color: #fff; text-decoration: underline; }
.ual-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px clamp(24px, 4vw, 56px); }
.ual-foot__brand img { width: 186px; height: auto; margin-bottom: 14px; }
.ual-foot__brand p { margin: 0; max-width: 22em; }
.ual-foot__brand b { color: #fff; font-family: var(--ual-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; font-variation-settings: "SOFT" 100, "WONK" 0; }
.ual-foot h2 { margin: 0 0 12px; font-family: var(--ual-body); font-size: .94rem; font-weight: 800; letter-spacing: 0; color: #fff; }
.ual-foot ul { margin: 0; padding: 0; list-style: none; }
.ual-foot li { padding: 4px 0; }
.ual-foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; }
.ual-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ual-foot__legal .list-inline-item { list-style: none; }
footer.footer .btn { background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #dbe6e9; font-size: .875rem; font-weight: 500; line-height: 1.75rem; padding: 0 12px; box-shadow: none; }
footer.footer .btn:hover { background-color: rgba(255, 255, 255, .16); color: #fff; transform: none; }

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 1199.98px) {
	header.header .main-navbar-wrapper { border-top: 0; }
	header.header .main-navbar-wrapper .navbar-collapse { padding: 6px 0 14px; }
	header.header .main-navbar-wrapper .navbar-nav > li > a, header.header .main-navbar-wrapper .navbar-nav.ml-auto > li > a { display: block; margin: 0; padding: 11px 2px; border-bottom: 1px solid var(--ual-line); }
	header.header .main-navbar-wrapper .dropdown-menu { box-shadow: none; border: 0; background: var(--ual-tint); margin: 0 0 6px; }
}
@media (max-width: 860px) {
	.ual-foot { grid-template-columns: 1fr 1fr; }
	.ual-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
	.ual-bar { font-size: .84rem; }
	.ual-bar__links a:first-child { display: none; }
	header.header .navbar-brand img.logo-img, img.logo-img { width: 168px; max-width: 168px; }
	header.header .navbar { padding-top: 10px; padding-bottom: 10px; }
	section#main-body { padding-top: 18px; padding-bottom: 40px; }
	body #order-standard_cart .products .product footer { flex-wrap: wrap; }
	.invoice-container { margin: 12px; }
	.ual-foot__bar { flex-direction: column; align-items: flex-start; }
}
/* Narrow phones: keep the logo and the cart and menu buttons on one row
   (they wrapped under about 380px); the logo gives way instead. */
@media (max-width: 420px) {
	header.header .navbar > .container { flex-wrap: nowrap; }
	header.header .navbar-brand { flex: 0 1 auto; min-width: 0; margin-right: 8px !important; }
	header.header .navbar-brand img.logo-img { width: 100%; max-width: 168px; }
	header.header .navbar .toolbar { flex: none; }
	header.header .toolbar .nav-item { margin-left: 10px !important; }
}
/* The smallest phones: the green bar's three links stay on one line. */
@media (max-width: 374.98px) {
	.ual-bar { font-size: .78rem; }
	.ual-bar .container, .ual-bar__links { flex-wrap: nowrap; gap: 4px 12px; }
	.ual-bar a { white-space: nowrap; }
}