. Globally, our .form-control and
.input-group-text both carry border-radius:12px (see 08/form
styles), so they paint as two separate pills with a visible seam.
Scope a rule under #cPanelQuickEmailPanel to fuse them into one
continuous rounded input with an internal divider only. The
domain suffix stays non-editable (just a visual chip).
============================================================ */
#cPanelQuickEmailPanel .input-group {
/* Treat the whole group as a single field: one outer border, one radius */
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-card-bg);
overflow: hidden; /* clip children's corners to the outer radius */
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
/* Raise focus state on the whole group when the prefix input focuses */
#cPanelQuickEmailPanel .input-group:focus-within {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
}
/* Input: kill its own border and radius; inherit from the group */
#cPanelQuickEmailPanel .input-group > .form-control {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
height: 40px; /* slightly inside the 42px group so borders don't double */
}
#cPanelQuickEmailPanel .input-group > .form-control:focus {
/* the group handles the focus ring via :focus-within */
border: 0 !important;
box-shadow: none !important;
}
/* Domain suffix chip: internal divider only, no outer rounding */
#cPanelQuickEmailPanel .input-group .input-group-append,
#cPanelQuickEmailPanel .input-group .input-group-addon {
margin: 0 !important;
display: flex;
align-items: stretch;
}
#cPanelQuickEmailPanel .input-group .input-group-text {
border: 0 !important;
border-left: 1px solid var(--color-border) !important; /* the internal divider */
border-radius: 0 !important;
background: var(--color-page-bg) !important;
color: var(--color-text-muted) !important;
padding: 0 var(--space-md) !important;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
#cPanelQuickEmailPanel .input-group .input-group-text small {
font-size: 13px;
line-height: 1;
}
/* Mobile: at <=375px, keep username + domain on the same row (looks unified)
but if the container is too tight, let the group wrap cleanly — the outer
border still scopes both children as one visual unit. */
@media (max-width: 575.98px) {
#cPanelQuickEmailPanel .input-group {
flex-wrap: nowrap; /* keep prefix + domain side-by-side; the form's other
columns (password, Create) already stack via .col-md-3 */
}
#cPanelQuickEmailPanel .input-group > .form-control {
min-width: 0; /* allow the input to shrink inside the group */
}
#cPanelQuickEmailPanel .input-group .input-group-text {
padding: 0 var(--space-sm) !important;
}
}
/* --- Service detail: WordPress "Create New" widget row spacing ---
#cPanelWordPress uses .row > .col-md-3 * 4 (Blog Title | Path | Admin
Password | + Install). At <768px those cols stack to full-width with
zero vertical gap between them — each rounded field visually glues
to the next. Add a standard breathing-room margin under each col so
the stacked rows read as separate fields; zero the last one so the
panel-body padding handles the edge. At md+ the columns sit on a
single line so the margin-bottom adds only trivial breathing space
beneath the widget. */
#cPanelWordPress .row > .col-md-3 {
margin-bottom: var(--space-sm);
}
#cPanelWordPress .row > .col-md-3:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------
ROUND 2: Account Details + User Management + Add Contact
------------------------------------------------------------
1 & 3. Email preferences checkboxes render as inline labels
wrapping mid-label. WHMCS core markup on /clientarea.php?action=details
and /clientarea.php?action=contacts is:
div.card-body > label.control-label
> div.controls.form-check > label > input[type=checkbox]
Force every .form-check inside a card-body to a full-width block
so each checkbox + label sits on its own line. Scoped to the
client area only so order form / login aren't affected.
------------------------------------------------------------ */
body.grn-portal .grn-content .card-body .form-check,
body.grn-portal .grn-content .card-body .controls.form-check,
body.grn-portal .grn-content .card-body .checkbox {
display: block;
width: 100%;
margin: 0 0 0.5rem 0;
padding-left: 0;
}
body.grn-portal .grn-content .card-body .form-check > label,
body.grn-portal .grn-content .card-body .controls.form-check > label,
body.grn-portal .grn-content .card-body .checkbox > label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
margin: 0;
font-weight: 400;
line-height: 1.4;
cursor: pointer;
}
body.grn-portal .grn-content .card-body .form-check > label > input[type="checkbox"],
body.grn-portal .grn-content .card-body .controls.form-check > label > input[type="checkbox"],
body.grn-portal .grn-content .card-body .checkbox > label > input[type="checkbox"] {
flex: 0 0 auto;
margin: 3px 0 0 0;
position: static;
}
/* Last row: drop bottom margin so card-body padding carries cleanly. */
body.grn-portal .grn-content .card-body .form-check:last-child,
body.grn-portal .grn-content .card-body .controls.form-check:last-child,
body.grn-portal .grn-content .card-body .checkbox:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------
2. User Management action buttons glued together
------------------------------------------------------------
WHMCS /index.php?rp=/account/users renders two sibling anchors
inside a
: a.btn-manage-permissions + a.btn-remove-user.
They have zero margin and no wrapper .btn-group. The td is
the same width as one button, so they wrap to two rows.
Give them a small top gap so the wrap looks intentional and
keep both buttons flush-left (no horizontal offset). Other
adjacent btn pairs in client-area table cells get the standard
horizontal 0.5rem gap. */
body.grn-portal .grn-content td > a.btn + a.btn,
body.grn-portal .grn-content td > button.btn + button.btn,
body.grn-portal .grn-content td > a.btn + button.btn,
body.grn-portal .grn-content td > button.btn + a.btn {
margin-left: 0.5rem;
}
/* Specific to User Management rows: stack cleanly inside the narrow td.
Use equal-or-higher specificity than the generic td > a.btn + a.btn rule
above; tag + two classes beats tag + class + class. */
body.grn-portal .grn-content td > a.btn-manage-permissions + a.btn-remove-user,
body.grn-portal .grn-content td a.btn-manage-permissions + a.btn-remove-user {
margin-left: 0;
margin-top: 0.35rem;
}
/* On narrow viewports let other adjacent btns wrap with a bottom gap too. */
@media (max-width: 575px) {
body.grn-portal .grn-content td > a.btn,
body.grn-portal .grn-content td > button.btn {
margin-bottom: 0.35rem;
}
}
/* ------------------------------------------------------------
4. Card-title breathing room inside card-body
------------------------------------------------------------
Some WHMCS cards render the section title as
INSIDE the .card-body (instead of a .card-header). Examples:
Email Preferences + Join our mailing list on clientarea?action=details.
Without a bottom margin the title sits flush against the first
form control / checkbox. Give every in-body card-title a
consistent bottom gap. Scoped to the client area so order-form /
login aren't touched.
------------------------------------------------------------ */
body.grn-portal .grn-content .card-body > .card-title,
body.grn-portal .grn-content .card-body > h1.card-title,
body.grn-portal .grn-content .card-body > h2.card-title,
body.grn-portal .grn-content .card-body > h3.card-title,
body.grn-portal .grn-content .card-body > h4.card-title,
body.grn-portal .grn-content .card-body > h5.card-title,
body.grn-portal .grn-content .card-body > h6.card-title {
/* !important is required to beat the earlier .card-title { margin: 0 !important } */
margin-top: 0 !important;
margin-bottom: var(--space-md) !important;
}
/* ============================================================
14c. NAMESERVERS CARD
Service Details page — dedicated "Nameservers" block rendered
at the top of the Overview tab. Sits inside our existing
.grn-panel container so it inherits our card chrome; these
rules only style the content *inside*. See
clientareaproductdetails.tpl (GRN override).
============================================================ */
.grn-ns-card {
/* Give the card noticeable top air inside the tab content so it
reads as the primary element of the page. */
margin-top: var(--space-sm);
margin-bottom: var(--space-xl);
}
.grn-ns-card .grn-panel-title i {
/* The server icon should pick up our primary accent to signal
this is a GRN-branded card (vs WHMCS default panels). */
color: var(--color-primary-dark);
}
.grn-ns-card__lead {
margin: 0 0 var(--space-md);
font-size: 14px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.grn-ns-list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.grn-ns-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-page-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.grn-ns-row:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-xs);
}
.grn-ns-row__label {
flex: 0 0 auto;
min-width: 36px;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.grn-ns-row__host {
flex: 1 1 auto;
min-width: 0;
/* Monospace + subtle surface so the hostname reads as a literal
value to paste into the registrar, not decorative text. */
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
background: var(--color-card-bg);
padding: 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: all; /* one-click double-click selects the whole hostname */
}
.grn-ns-copy {
/* Scoped button reset so Bootstrap .btn defaults don't mangle
our pill. Mirrors the pill-button pattern used elsewhere. */
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-width: 92px;
justify-content: center;
padding: 6px 14px;
background: var(--color-card-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default),
transform var(--duration-fast) var(--ease-default);
}
.grn-ns-copy:hover {
background: var(--color-primary-subtle);
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.grn-ns-copy:active {
transform: translateY(1px);
}
.grn-ns-copy:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-color: var(--color-primary);
}
.grn-ns-copy i {
font-size: 12px;
}
/* Two-state label: default "Copy" swaps to "Copied!" via
`.is-copied` class toggled by the inline script in the tpl. */
.grn-ns-copy__idle,
.grn-ns-copy__done {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
.grn-ns-copy__done {
display: none;
color: var(--color-success);
font-weight: 600;
}
.grn-ns-copy.is-copied {
background: var(--color-success-light);
border-color: var(--color-success);
color: var(--color-success);
}
.grn-ns-copy.is-copied .grn-ns-copy__idle {
display: none;
}
.grn-ns-copy.is-copied .grn-ns-copy__done {
display: inline-flex;
}
.grn-ns-card__help {
margin: 0;
font-size: 13px;
}
.grn-ns-card__help-link {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
color: var(--color-text-secondary);
text-decoration: none !important;
transition: color var(--duration-fast) var(--ease-default);
}
.grn-ns-card__help-link:hover,
.grn-ns-card__help-link:focus {
color: var(--color-primary-dark);
}
/* --- NS card mobile layout ---
On narrow viewports the NS1/NS2 row would overflow the card
(long hostname + copy button). Stack label+host on a top row
and put the Copy button full-width underneath. */
@media (max-width: 575px) {
.grn-ns-row {
flex-wrap: wrap;
gap: var(--space-xs);
}
.grn-ns-row__host {
/* Hostname takes remaining width next to the label */
flex: 1 1 0;
}
.grn-ns-copy {
/* Copy drops to its own full-width line */
flex: 1 1 100%;
min-width: 0;
}
}
/* ============================================================
15. RESPONSIVE - Tablet (768px - 1023px)
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
/* Sidebar hidden by default on tablet too */
.grn-sidebar {
transform: translateX(-100%);
}
.grn-sidebar.open {
transform: translateX(0);
}
.grn-main-wrapper {
margin-left: 0;
padding-top: var(--layout-mobile-topbar-height);
}
.grn-mobile-topbar {
display: flex !important;
}
.grn-topbar {
display: none;
}
.grn-content {
padding: var(--space-lg);
}
.grn-page-with-sidebar {
grid-template-columns: 1fr;
}
.grn-page-sidebar {
display: none !important;
}
.grn-panels-grid {
grid-template-columns: 1fr 1fr;
}
.grn-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.grn-welcome-heading {
font-size: 24px;
}
/* Login page */
.grn-login-brand-side {
display: none;
}
.grn-login-form-side {
flex: 1;
}
body.grn-login-page .grn-main-wrapper {
margin-left: 0;
}
body.grn-login-page .grn-mobile-topbar {
display: none !important;
}
/* Register page */
.grn-register-wrapper .grn-login-brand-side {
display: none;
}
.grn-register-form-side {
flex: 1;
}
body.grn-register-page .grn-main-wrapper {
margin-left: 0;
}
body.grn-register-page .grn-mobile-topbar {
display: none !important;
}
.grn-register-row--address {
flex-wrap: wrap;
}
.grn-register-row--address .grn-register-col-third {
flex: 0 0 calc(50% - 8px);
}
.grn-register-row--address .grn-register-col-third:last-child {
flex: 0 0 100%;
}
}
/* ============================================================
16. RESPONSIVE - Mobile (< 768px)
============================================================ */
@media (max-width: 767px) {
.grn-sidebar {
transform: translateX(-100%);
width: 280px;
}
.grn-sidebar.open {
transform: translateX(0);
}
.grn-main-wrapper {
margin-left: 0;
padding-top: var(--layout-mobile-topbar-height);
}
.grn-topbar {
display: none;
}
.grn-content {
padding: var(--space-md);
}
/* Dashboard */
.grn-welcome {
flex-direction: column;
gap: var(--space-sm);
}
.grn-welcome-heading {
font-size: 22px;
}
.grn-welcome-date {
align-self: flex-start;
}
.grn-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.grn-stat-card {
padding: var(--space-md);
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.grn-stat-number {
font-size: 28px;
}
.grn-stat-arrow {
display: none;
}
/* Panels */
.grn-panels-grid {
grid-template-columns: 1fr;
}
.grn-page-with-sidebar {
grid-template-columns: 1fr;
}
.grn-page-sidebar {
display: none !important;
}
/* Login */
.grn-login-brand-side {
display: none;
}
.grn-login-form-side {
padding: var(--space-xl) var(--space-md);
}
.grn-login-title {
font-size: 24px;
}
body.grn-login-page .grn-main-wrapper {
margin-left: 0;
}
body.grn-login-page .grn-mobile-topbar {
display: none !important;
}
/* Register */
.grn-register-wrapper .grn-login-brand-side {
display: none;
}
.grn-register-form-side {
padding: var(--space-lg) var(--space-md);
}
.grn-register-form-container {
max-width: 100%;
}
.grn-register-section-title {
font-size: 16px;
}
body.grn-register-page .grn-main-wrapper {
margin-left: 0;
padding-top: 0;
}
body.grn-register-page .grn-mobile-topbar {
display: none !important;
}
/* Stack two-column rows on mobile */
.grn-register-row {
flex-direction: column;
gap: 0;
}
.grn-register-row--password-tools {
flex-direction: column;
gap: var(--space-sm);
align-items: flex-start;
}
/* Footer */
.grn-footer-inner {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.grn-footer-links {
flex-wrap: wrap;
justify-content: center;
}
/* Tables responsive */
.table-responsive {
border: none !important;
}
}
/* ============================================================
17. RESPONSIVE - Desktop (1024px+)
============================================================ */
@media (min-width: 1024px) {
.grn-sidebar {
transform: none;
}
.grn-mobile-topbar {
display: none !important;
}
.grn-sidebar-close {
display: none;
}
.grn-sidebar-overlay {
display: none !important;
}
.grn-main-wrapper {
margin-left: var(--layout-sidebar-width);
padding-top: 0;
}
}
/* Large Desktop */
@media (min-width: 1440px) {
:root {
--layout-sidebar-width: 280px;
}
.grn-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================================
18. PRINT STYLES
============================================================ */
@media print {
.grn-sidebar,
.grn-mobile-topbar,
.grn-topbar,
.grn-sidebar-overlay,
.grn-footer {
display: none !important;
}
.grn-main-wrapper {
margin-left: 0 !important;
padding-top: 0 !important;
}
.grn-content {
padding: 0 !important;
max-width: none !important;
}
body.grn-portal {
background: white !important;
}
}
/* ============================================================
19. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
20. WHMCS PAGE-SPECIFIC OVERRIDES
============================================================ */
/* Support ticket view */
.ticket-reply {
border-radius: var(--radius-md) !important;
border: 1px solid var(--color-border) !important;
margin-bottom: var(--space-md) !important;
}
.ticket-reply .card-header {
background: var(--color-page-bg) !important;
}
/* Invoice view */
.invoice-container {
background: var(--color-card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-xl);
}
/* Domain search */
.domain-search-form .form-control {
height: 48px !important;
font-size: 16px !important;
border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.domain-search-form .btn {
height: 48px;
border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
/* Product/service details */
.product-details-tab-container .nav-link {
font-size: 14px;
}
/* Cart overrides */
.order-summary {
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-sm) !important;
}
/* Register page form */
.register-form .form-group label {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 6px;
}
/* Password strength */
.pw-strength-bar {
border-radius: var(--radius-pill);
height: 4px;
overflow: hidden;
}
/* Notifications popover */
.client-alerts {
list-style: none;
padding: 0;
margin: 0;
}
.client-alerts li {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.client-alerts li:last-child {
border-bottom: none;
}
.client-alerts li a {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
color: var(--color-text-primary);
text-decoration: none;
font-size: 13px;
}
.client-alerts li a:hover {
color: var(--color-primary-dark);
}
.client-alerts .message {
flex: 1;
}
/* WHMCS "tiles" on homepage -- we hide them and use our own stat cards */
.client-home-cards {
/* Keep visibility for the panels */
}
/* Announcement styling */
.announcement-single .card {
border-radius: var(--radius-lg) !important;
}
/* Knowledgebase */
.kb-article {
font-size: 15px;
line-height: 1.7;
}
.kb-article h2 {
font-size: 22px;
margin-top: var(--space-2xl);
}
.kb-article h3 {
font-size: 18px;
margin-top: var(--space-xl);
}
/* ============================================================
21. WHMCS POPOVER OVERRIDES
============================================================ */
.popover {
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-lg) !important;
font-family: var(--font-body) !important;
}
.popover-header {
background: var(--color-page-bg) !important;
border-bottom: 1px solid var(--color-border) !important;
font-family: var(--font-heading) !important;
font-weight: 600 !important;
}
.popover-body {
padding: 0 !important;
}
/* ============================================================
22. WHMCS STORE / CART OVERRIDES
============================================================ */
.store-product-group .product {
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-sm) !important;
border: none !important;
transition: transform var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.store-product-group .product:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md) !important;
}
.store-product-group .product .product-price {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-text-primary);
}
.store-product-group .product .product-price .period {
font-size: 14px;
font-weight: 400;
color: var(--color-text-secondary);
}
/* Shopping cart */
.view-cart-items-header {
font-family: var(--font-heading) !important;
}
.order-summary .order-summary-header {
background: var(--color-sidebar-bg) !important;
color: var(--color-text-inverse) !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
/* Checkout */
.btn-checkout {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: var(--color-sidebar-active-text) !important;
font-size: 16px !important;
padding: var(--space-sm) var(--space-xl) !important;
border-radius: var(--radius-md) !important;
font-weight: 600 !important;
}
.btn-checkout:hover {
background: var(--color-primary-dark) !important;
border-color: var(--color-primary-dark) !important;
}
/* ============================================================
23. ADDON SECTION
============================================================ */
.grn-addon-section {
margin-bottom: var(--space-md);
}
.grn-addon-section .card {
border-radius: var(--radius-lg) !important;
}
/* ============================================================
24. CAPTCHA WRAPPER
============================================================ */
.grn-captcha-wrap {
margin-top: var(--space-md);
}
.grn-captcha-wrap .g-recaptcha,
.grn-captcha-wrap .h-captcha {
margin: 0;
}
/* ============================================================
25. CUSTOM SCROLLBAR (WebKit)
============================================================ */
.grn-sidebar::-webkit-scrollbar {
width: 4px;
}
.grn-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.grn-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
.grn-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Firefox */
.grn-sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
/* ============================================================
CART MODE - Clean checkout layout
When body has .grn-cart-mode, hide the dashboard sidebar
and show a minimal, focused checkout experience
============================================================ */
/* Hide the main dashboard sidebar */
body.grn-cart-mode .grn-sidebar {
display: none !important;
pointer-events: none !important;
}
/* Completely neutralize the sidebar overlay in cart mode.
This overlay has position:fixed; inset:0; z-index:1035 which can
intercept touch events on iOS even when visually hidden.
Move it off-screen and collapse it to prevent any interference. */
body.grn-cart-mode .grn-sidebar-overlay {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
z-index: -1 !important;
}
/* Remove sidebar offset from main wrapper */
body.grn-cart-mode .grn-main-wrapper {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Hide mobile top bar hamburger (no sidebar to open) */
body.grn-cart-mode .grn-hamburger {
display: none !important;
}
/* Hide the WHMCS topbar in cart mode — the order form has its own
branded .grn-header with step indicator, so the dashboard topbar
(page title / search / login) is redundant and boxes the content. */
body.grn-cart-mode .grn-topbar {
display: none !important;
}
/* Hide collapsed sidebar (Categories/Actions dropdowns) in cart mode */
body.grn-cart-mode .sidebar-collapsed,
body.grn-cart-mode .grn-page-sidebar-inner,
body.grn-cart-mode .panel-sidebar {
display: none !important;
}
/* Let the order form control its own layout — remove container constraints */
body.grn-cart-mode .grn-content {
max-width: none;
margin: 0;
padding: 0;
background: var(--color-page-bg, #F5F5F0);
}
body.grn-cart-mode .grn-main-wrapper {
background: var(--color-page-bg, #F5F5F0);
}
body.grn-cart-mode .grn-content-inner {
max-width: none;
padding: 0;
}
/* Hide the WHMCS page sidebar in cart */
body.grn-cart-mode .grn-page-with-sidebar,
body.grn-cart-mode .grn-page-sidebar {
display: block !important;
}
body.grn-cart-mode .grn-page-sidebar {
display: none !important;
}
body.grn-cart-mode .grn-page-main {
width: 100% !important;
max-width: 100% !important;
}
/* Hide breadcrumb in cart mode */
body.grn-cart-mode .grn-breadcrumb {
display: none !important;
}
/* Hide the WHMCS footer in cart mode — the order form has its own footer */
body.grn-cart-mode .grn-footer {
display: none !important;
}
/* Hide WHMCS's built-in cart sidebar (Categories/Actions panels) */
body.grn-cart-mode #order-grncommerce > .row > .col-md-3,
body.grn-cart-mode #order-grncommerce > .row > .col-lg-3,
body.grn-cart-mode .cart-sidebar,
body.grn-cart-mode .panel-sidebar {
display: none !important;
}
/* Make cart content full width */
body.grn-cart-mode #order-grncommerce > .row > .col-md-9,
body.grn-cart-mode #order-grncommerce > .row > .col-lg-9 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* Clean up cart page headings */
body.grn-cart-mode #order-grncommerce h2 {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 700;
color: var(--grn-text-primary, #1A1A2E);
margin-bottom: 1.5rem;
}
/* Style domain selection inputs in cart */
body.grn-cart-mode .domain-checker-container input[type="text"],
body.grn-cart-mode #frmConfigureDomain input[type="text"] {
border-radius: 12px;
border: 2px solid var(--grn-border, #E5E7EB);
padding: 0.75rem 1rem;
font-size: 1rem;
transition: border-color 0.2s;
}
body.grn-cart-mode .domain-checker-container input[type="text"]:focus,
body.grn-cart-mode #frmConfigureDomain input[type="text"]:focus {
border-color: var(--grn-primary, #C8E64A);
outline: none;
box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.2);
}
/* Style buttons in cart */
body.grn-cart-mode .btn-primary,
body.grn-cart-mode .btn-success {
background: var(--grn-primary, #C8E64A) !important;
color: var(--grn-text-primary, #1A1A2E) !important;
border: none !important;
border-radius: 9999px !important;
font-weight: 600 !important;
padding: 0.6rem 2rem !important;
transition: transform 0.2s, box-shadow 0.2s !important;
}
body.grn-cart-mode .btn-primary:hover,
body.grn-cart-mode .btn-success:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(200, 230, 74, 0.3);
}
/* Card styling in cart */
body.grn-cart-mode .card,
body.grn-cart-mode .panel {
border: none !important;
border-radius: 16px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
/* Hide mobile top bar in cart mode — order form has its own header */
body.grn-cart-mode .grn-mobile-topbar {
display: none !important;
}
/* ============================================================
CART MODE - Mobile Responsive (< 768px)
Fixes: double header, overflow, pill-to-bar, content padding
============================================================ */
@media (max-width: 767px) {
/* Fix 1: Hide the GRNCOMMERCE mobile top bar in cart mode.
The order form already has its own branded header with steps,
so showing both creates a stacked double header. */
body.grn-cart-mode .grn-mobile-topbar {
display: none !important;
}
/* Fix 5: Prevent horizontal overflow on mobile + breathing room from edges */
body.grn-cart-mode .grn-content {
padding: 0 16px !important;
overflow-x: hidden !important;
}
#order-grncommerce {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Fix 7: Topbar is now hidden in cart mode (display:none above),
so no mobile pill-to-bar override is needed. */
/* Fix 8: Prevent "Choose a Domain..." heading from being clipped at left edge */
body.grn-cart-mode #order-grncommerce h2 {
padding-left: 4px !important;
box-sizing: border-box !important;
}
/* Fix 9: Ensure all content within .grn-content respects box model */
body.grn-cart-mode .grn-content * {
box-sizing: border-box;
}
/* Fix 10: CRITICAL — Input fields not activating on tap ---
The .grn-sidebar-overlay has position:fixed; inset:0; z-index:1035.
Even with visibility:hidden/display:none, some mobile WebKit engines
still intercept touch events from fixed-position elements.
Belt-and-suspenders: hide it, disable pointer events, AND move it
off-screen so it cannot possibly intercept taps. */
.grn-sidebar-overlay,
body.grn-cart-mode .grn-sidebar-overlay,
#grnSidebarOverlay {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
z-index: -1 !important;
}
/* Ensure all form inputs in the order form receive touch events properly.
Explicit pointer-events, touch-action, and user-select for iOS Safari. */
#order-grncommerce .domain-selection-options .option,
#order-grncommerce .domain-selection-options .option .domain-input-group,
#order-grncommerce .domain-selection-options .option .form-control,
#order-grncommerce .domain-selection-options .option textarea,
#order-grncommerce .domain-selection-options .option input {
pointer-events: auto !important;
}
#order-grncommerce .domain-selection-options .option input[type="text"],
#order-grncommerce .domain-selection-options .option textarea,
#order-grncommerce .domain-selection-options .option select {
-webkit-user-select: text !important;
user-select: text !important;
touch-action: manipulation !important;
}
/* iOS focus zoom prevention — all focusable form elements must be >= 16px.
The viewport meta does not include maximum-scale=1, so font-size is the
only reliable way to prevent iOS Safari from zooming on focus. */
#order-grncommerce input,
#order-grncommerce textarea,
#order-grncommerce select,
#order-grncommerce .form-control,
.grn-cart-mode input,
.grn-cart-mode textarea,
.grn-cart-mode select,
.grn-cart-mode .form-control {
font-size: 16px !important;
}
}