after both forms, which the
browser recovers as an empty paragraph — one lands inside the form, another as a
sibling of the form within .u-column1/.u-column2. Kill both so their default margin
doesn't add invisible height at the bottom of the box. */
.woocommerce-account:not(.logged-in) .u-columns p:empty {
display: none !important;
margin: 0 !important;
}
.woocommerce-form-login p[class="form-row"],
.woocommerce-form-register p[class="woocommerce-form-row form-row"] {
margin-top: 20px !important;
}
.woocommerce-form-login .woocommerce-LostPassword {
margin-top: 12px !important;
margin-bottom: 0 !important;
}
.woocommerce-form-login__rememberme {
display: block !important;
margin-bottom: 16px !important;
}
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
background: #1a1a1a !important;
border: 1px solid #444 !important;
color: #cccccc !important;
border-radius: 4px !important;
padding: 10px 12px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus { border-color: #7B2FBE !important; outline: none !important; }
.woocommerce-form-login label,
.woocommerce-form-register label { color: #cccccc !important; }
.woocommerce-form-login .woocommerce-form__input-checkbox { accent-color: #7B2FBE !important; }
.woocommerce-form-login__rememberme br { display: none !important; }
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-register .woocommerce-button {
background: #7B2FBE !important;
color: #ffffff !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 4px !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.woocommerce-form-login .woocommerce-button:hover,
.woocommerce-form-register .woocommerce-button:hover { background: #6a28a8 !important; }
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
margin-bottom: 40px !important;
}
.ngd-inline-radio-row {
display: flex !important;
flex-direction: row !important;
gap: 20px !important;
}
.ngd-inline-radio-label {
display: inline-block !important;
}
.woocommerce-privacy-policy-text p {
color: #888888 !important;
font-size: 0.8rem !important;
line-height: 1.4 !important;
margin-bottom: 0 !important;
}
/* ================================
Dancer & Account Forms
================================ */
.woocommerce-MyAccount-content form p { display: flex; flex-direction: column; margin-bottom: 16px; }
.woocommerce-MyAccount-content form label { color: #cccccc; margin-bottom: 6px; font-size: 14px; }
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="date"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form textarea,
.woocommerce-MyAccount-content form select,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
background: #242424 !important;
border: 1px solid #444 !important;
color: #cccccc !important;
padding: 10px 12px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
width: 100% !important;
max-width: 500px !important;
box-sizing: border-box !important;
}
/* Native select styling varies a lot by browser/OS and doesn't inherit the
dark background the way text inputs do — appearance:none plus a manually
drawn arrow keeps it visually consistent with the rest of the form. */
.woocommerce-MyAccount-content form select {
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cccccc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 32px !important;
cursor: pointer !important;
}
.woocommerce-MyAccount-content form input[type="text"]:focus,
.woocommerce-MyAccount-content form input[type="date"]:focus,
.woocommerce-MyAccount-content form input[type="tel"]:focus,
.woocommerce-MyAccount-content form textarea:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-EditAccountForm input:focus { border-color: #7B2FBE !important; outline: none !important; }
.show-password-input {
filter: invert(1) !important;
}
.password-input {
width: 100% !important;
max-width: 500px !important;
}
/* WooCommerce's password strength meter uses light pastel backgrounds (strong/short/
bad/good) designed for light-themed sites — inherits this theme's light grey text
by default, which is nearly unreadable against them. Dark text works across all four. */
.woocommerce-password-strength {
color: #1a1a1a !important;
max-width: 500px !important;
box-sizing: border-box !important;
}
@media (min-width: 1025px) {
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="date"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form textarea,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
padding: 14px 16px !important;
font-size: 16px !important;
}
.woocommerce-MyAccount-content form label {
font-size: 16px !important;
}
}
.woocommerce-MyAccount-content form textarea { min-height: 120px; resize: vertical; }
.woocommerce-MyAccount-content form input[type="radio"] { accent-color: #7B2FBE; margin-right: 6px; }
.woocommerce-MyAccount-content form .button,
.woocommerce-EditAccountForm .woocommerce-Button {
background: #7B2FBE !important;
color: #ffffff !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: 700 !important;
margin-top: 8px !important;
}
.woocommerce-MyAccount-content form .button:hover,
.woocommerce-EditAccountForm .woocommerce-Button:hover { background: #6a28a8 !important; }
.woocommerce-EditAccountForm label { color: #cccccc !important; font-size: 14px !important; }
.woocommerce-EditAccountForm fieldset {
background: #1e1e1e !important;
border: none !important;
border-top: 1px solid #333 !important;
border-radius: 0 !important;
padding: 16px 0 16px 16px !important;
margin-top: 16px !important;
max-width: 550px !important;
box-sizing: border-box !important;
}
.woocommerce-EditAccountForm fieldset legend {
display: block !important;
float: none !important;
color: #888888 !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 0 !important;
margin: 0 0 16px !important;
width: 100% !important;
}
#account_display_name_description { font-size: 0.75rem !important; color: #888888 !important; margin-top: 6px !important; display: block !important; }
#account_display_name_description em { font-style: italic; font-size: 0.75rem !important; }
/* ================================
WooCommerce Notices
================================ */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: #242424 !important;
border-color: #7B2FBE !important;
color: #cccccc !important;
border-radius: 6px !important;
}
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner p { color: #cccccc !important; }
/* Message/info/error boxes float their action button by default (WooCommerce core),
which doesn't vertically align with the text and can grow the box taller than
it needs to be — flex + centered items fixes both at once. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
/* The tick/info icon is a position:absolute ::before (WooCommerce core CSS), so it's
outside normal flow and doesn't get centered by the flex rule above — it needs its
own vertical centering independent of box height. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
top: 50% !important;
transform: translateY(-50%) !important;
}
/* ================================
My Bookings page
================================ */
@media (max-width: 768px) {
/* The unpaid notice wraps to multiple lines + a button underneath on mobile,
so vertically centering the icon against the whole (now much taller) box
leaves it floating disconnected from the text. Pin it to the top instead. */
.ngd-unpaid-notice::before {
top: 22px !important;
transform: none !important;
}
/* Once the text wraps, the button ends up alone on its own flex line — force
it onto an explicit full-width line and right-align it deterministically
rather than relying on auto-margins, which don't reliably claim the
leftover space in this nested-flex context. */
.ngd-unpaid-notice-action {
flex-basis: 100%;
justify-content: flex-end;
}
}
.ngd-unpaid-notice {
justify-content: space-between !important;
align-items: center !important;
}
.ngd-unpaid-notice-text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 16px;
font-size: 0.9375rem;
color: #cccccc;
}
.ngd-unpaid-notice-text strong {
color: #ffffff;
font-weight: 700;
}
.ngd-unpaid-notice-action {
display: flex;
justify-content: flex-end;
margin-left: auto !important;
}
.ngd-bookings-card {
background: #1e1e1e;
border: 1px solid #333333;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
}
.ngd-bookings-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #333333;
flex-wrap: wrap;
}
.ngd-bookings-title {
color: #ffffff;
font-size: 1rem;
font-weight: 700;
margin: 0 0 4px;
}
.ngd-bookings-meta {
color: #999999;
font-size: 0.8125rem;
font-weight: 400;
}
.ngd-bookings-price {
color: #ffffff;
font-size: 1.125rem;
font-weight: 700;
}
.ngd-bookings-align-right {
text-align: right;
margin-left: auto;
}
.ngd-bookings-status {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.ngd-bookings-status.is-active { color: #22c55e; }
.ngd-bookings-status.is-cancelled { color: #ef4444; }
.ngd-bookings-status.is-partial,
.ngd-bookings-status.is-unpaid { color: #f59e0b; }
.ngd-bookings-class {
background: #242424;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 8px;
}
.ngd-bookings-class:last-child {
margin-bottom: 0;
}
.ngd-bookings-counts {
display: flex;
gap: 12px;
font-size: 0.8125rem;
}
.ngd-bookings-counts .is-active { color: #22c55e; }
.ngd-bookings-counts .is-cancelled { color: #ef4444; }
/* Each class within a booking card is collapsed to just its name + counts by
default — a card with several classes, each with many weeks of dates, would
otherwise be dominated by day/time/age meta and a wall of date pills. */
.ngd-bookings-class-summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.ngd-bookings-class-summary::-webkit-details-marker {
display: none;
}
.ngd-bookings-class-summary::before {
content: "\25BE";
display: inline-block;
color: #7B2FBE;
font-weight: 700;
margin-right: 6px;
transition: transform 0.15s ease;
}
.ngd-bookings-class[open] .ngd-bookings-class-summary::before {
transform: rotate(-180deg);
}
.ngd-bookings-class-details {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #333333;
}
.ngd-bookings-class-details .ngd-bookings-meta {
display: block;
margin-bottom: 8px;
}
.ngd-session-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ngd-session-pill {
border-radius: 4px;
padding: 3px 8px;
font-size: 0.75rem;
}
.ngd-session-pill.is-active { background: #16311c; color: #22c55e; }
.ngd-session-pill.is-cancelled { background: #331616; color: #ef4444; }
.ngd-unpaid-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #333333;
gap: 12px;
flex-wrap: wrap;
}
.ngd-unpaid-row:last-child {
border-bottom: none;
}
.ngd-unpaid-row-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
margin-left: auto;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
background: #7B2FBE !important;
color: #ffffff !important;
border: none !important;
padding: 8px 20px !important;
border-radius: 4px !important;
font-weight: 700 !important;
text-decoration: none !important;
float: none !important;
margin-left: auto !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
opacity: 0.95 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
background: #6a28a8 !important;
}
.ngd-bookings-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.ngd-bookings-pagination-status {
color: #999999;
font-size: 0.875rem;
}
/* ================================
Booking Bar
================================ */
.ngd-booking-bar { box-sizing: border-box !important; width: 100% !important; left: 0 !important; right: 0 !important; }
/* ================================
Carousel
================================ */
.wpcp-single-item figure,
.wpcp-single-item figure img { height: 200px !important; width: 100% !important; object-fit: cover !important; margin: 0 !important; }
@media (min-width: 768px) {
.wpcp-single-item figure,
.wpcp-single-item figure img { height: 280px !important; }
}
@media (min-width: 1200px) {
.wpcp-single-item figure,
.wpcp-single-item figure img { height: 320px !important; }
}
/* ================================
Contact Form
================================ */
:root {
--wpforms-label-color: #ffffff;
--wpforms-field-text-color: #ffffff;
--wpforms-field-background-color: #242424;
--wpforms-field-border-color: #444444;
--wpforms-button-background-color: #7B2FBE;
--wpforms-button-border-color: #7B2FBE;
--wpforms-label-sublabel-color: #888888;
}
div.wpforms-container-full,
div.wpforms-container-full * { background: transparent !important; }
div.wpforms-container-full input,
div.wpforms-container-full textarea,
div.wpforms-container-full select {
background: #242424 !important;
border: 1px solid #444444 !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 10px 14px !important;
}
div.wpforms-container-full input:focus,
div.wpforms-container-full textarea:focus { border-color: #7B2FBE !important; outline: none !important; }
div.wpforms-container-full .wpforms-field-label,
div.wpforms-container-full .wpforms-field .wpforms-field-label {
color: #ffffff !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
}
div.wpforms-container-full .wpforms-field-sublabel { color: #888888 !important; font-size: 0.75rem !important; }
div.wpforms-container-full .wpforms-submit {
background-color: #7B2FBE !important;
color: #ffffff !important;
border: none !important;
padding: 12px 32px !important;
border-radius: 4px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
font-size: 0.875rem !important;
}
div.wpforms-container-full .wpforms-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(123, 47, 190, 0.5) !important;
}
/* ================================
Google Map
================================ */
.elementor-element-4727160 { align-self: stretch !important; }
.elementor-element-4727160 .elementor-widget-container { height: 100% !important; }
.elementor-element-011c67d,
.elementor-element-011c67d .elementor-widget-container,
.elementor-element-011c67d .elementor-custom-embed,
.elementor-element-011c67d .elementor-custom-embed iframe {
height: 100% !important;
min-height: 450px !important;
width: 100% !important;
display: block !important;
border-radius: 8px !important;
}
/* ================================
Class Info Lightbox
================================ */
.ngd-info-btn {
position: absolute !important;
top: 8px !important; left: 8px !important;
background: transparent !important;
border: none !important;
color: #7B2FBE !important;
font-size: 1.2rem !important;
cursor: pointer !important;
padding: 0 !important;
line-height: 1 !important;
z-index: 2 !important;
transition: color 0.2s ease !important;
}
.ngd-info-btn:hover { color: #ffffff !important; }
.ngd-lightbox-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px;
}
.ngd-lightbox-overlay.active { display: flex; }
.ngd-lightbox {
background: #242424;
border: 1px solid #333;
border-radius: 12px;
padding: 32px;
max-width: 500px;
width: 100%;
position: relative;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.ngd-lightbox-close {
position: absolute;
top: 16px; right: 16px;
background: transparent;
border: none;
color: #cccccc;
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
padding: 0;
transition: color 0.2s ease;
}
.ngd-lightbox-close:hover { color: #ffffff; }
.ngd-lightbox-title { color: #ffffff !important; font-size: 1.3rem !important; margin: 0 0 12px 0 !important; padding-right: 32px !important; }
.ngd-lightbox-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ngd-lightbox-meta span { background: #7B2FBE; color: #ffffff; border-radius: 4px; padding: 4px 10px; font-size: 0.8rem; font-weight: 600; }
.ngd-lightbox-description { color: #cccccc !important; line-height: 1.7 !important; margin: 0 !important; }
/* Team card styling lives in dance-studio-dancers/assets/team.css, the plugin's own
stylesheet for that page — this theme file no longer duplicates it. */
/* ================================
Mobile Styles
================================ */
@media (max-width: 768px) {
/* display:block + margin:auto centers this button, but block elements
fill their container's width unless something else constrains them —
width:fit-content keeps it hugging its own text/padding regardless of
whatever Elementor's own width setting happens to be set to. */
.e-2828c03-73fe5e8 { display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }
/* Cart */
.wp-block-woocommerce-cart, .wc-block-cart { padding: 20px !important; }
.wc-block-cart-item__total, .wc-block-cart__prices { min-width: 0 !important; white-space: normal !important; }
.wc-block-cart-items .wc-block-cart-item__wrap { flex-wrap: wrap !important; }
/* Mobile only: flip which of the two duplicate cart-item prices is
shown. The Total column (kept on desktop, see the unscoped rule
below) sits awkwardly next to a wrapped multi-line product name at
this width, so the in-flow price under the name is shown instead.
Extra .wc-block-cart-items ancestor class on the "show" override —
needed to beat the unscoped hide rule's equal specificity regardless
of which one ends up later in the file. */
.wc-block-cart-item__total {
display: none !important;
}
.wc-block-cart-items .wc-block-cart-item__prices {
display: block !important;
}
/* Account page title */
.woocommerce-account .page-header .entry-title { display: block !important; margin: 0 0 14px 0 !important; }
.woocommerce-account .page-header { margin-bottom: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; }
.woocommerce-account .page-content { padding-top: 0 !important; }
.woocommerce-account .e-con-inner { padding-top: 0 !important; overflow: hidden !important; max-width: 100% !important; }
.woocommerce-account .e-con-boxed { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; max-width: 100% !important; }
.woocommerce-account .elementor-widget-container { padding-top: 0 !important; }
.woocommerce-account { overflow-x: hidden !important; }
#wpadminbar .display-name { max-width: 80px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.woocommerce-account .entry-title { max-width: 100% !important; overflow: hidden !important; word-break: break-word !important; box-sizing: border-box !important; }
/* Stack nav above content. gap:24px (set on desktop for horizontal
space between the side-by-side nav/content columns) carries over
unchanged into this column layout, verified to be adding that same
24px above the nav itself here — not just between nav and content
as you'd expect from a gap property — so it's zeroed here; nav's own
margin-bottom below already provides the spacing before content. */
.elementor-widget-text-editor .woocommerce { flex-direction: column !important; margin-top: 0 !important; gap: 0 !important; }
.elementor-widget-text-editor .woocommerce-MyAccount-navigation { position: relative !important; top: auto !important; width: 100% !important; margin: 0 0 20px 0 !important; }
.elementor-widget-text-editor .woocommerce-MyAccount-content { margin-top: 0 !important; }
/* Give account content breathing room from the screen edges */
.woocommerce-account .page-header .entry-title,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; }
/* Nav as tabs */
.woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; border-bottom: 2px solid #333 !important; padding-bottom: 8px !important; }
.woocommerce-MyAccount-navigation ul li { border-bottom: none !important; }
.woocommerce-MyAccount-navigation ul li a { background: #242424 !important; border-radius: 4px !important; border-left: none !important; padding: 8px 12px !important; font-size: 0.75rem !important; white-space: nowrap !important; }
.woocommerce-MyAccount-navigation ul li.is-active a { background: #7B2FBE !important; color: #ffffff !important; border-left: none !important; }
.woocommerce-MyAccount-navigation ul li a:hover { background: #3a1a5e !important; border-left: none !important; padding-left: 12px !important; }
/* Orders table — card layout rules live in their own dedicated block
below (after this one closes), not inlined here. */
/* Forms */
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="date"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form textarea,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] { max-width: 100% !important; }
.woocommerce-EditAccountForm { margin-top: 16px !important; }
.woocommerce-MyAccount-content form label { font-size: 15px !important; }
/* Login & Register */
.woocommerce-account:not(.logged-in) .u-columns { flex-direction: column !important; align-items: center !important; width: 100% !important; }
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 { width: 100% !important; min-width: 0 !important; max-width: 420px !important; box-sizing: border-box !important; }
.woocommerce-account:not(.logged-in) .woocommerce { padding: 20px !important; box-sizing: border-box !important; width: 100% !important; }
}
/* Orders table — card layout */
@media (max-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-orders-table thead { display: none !important; }
.woocommerce-MyAccount-content .woocommerce-orders-table tr { display: block !important; border-bottom: 1px solid #333 !important; padding: 8px !important; }
.woocommerce-MyAccount-content .woocommerce-orders-table td { display: flex !important; text-align: left !important; justify-content: space-between !important; align-items: center !important; padding: 2px 0 !important; font-size: 0.85rem !important; border: none !important; min-height: 0 !important; }
.woocommerce-MyAccount-content .woocommerce-orders-table td::before { content: attr(data-title) !important; font-weight: 600 !important; color: #888888 !important; font-size: 0.75rem !important; text-transform: uppercase !important; display: block !important; margin-right: 8px !important; }
}
/* Login/Register tabs — mobile and iPad portrait (same 1024px cutoff used
elsewhere for tablet-range treatments). The tab bar itself is injected by
JS (functions.php) since showing one form at a time needs a click handler,
but the styling and default show/hide state live here. Desktop never sees
the tab bar and always shows both forms side by side, unaffected. */
.ngd-auth-tabs {
display: none;
}
@media (max-width: 1024px) {
.ngd-auth-tabs {
display: flex;
gap: 8px;
max-width: 420px;
margin: 0 auto 20px;
}
.ngd-auth-tab {
flex: 1;
background: #242424;
color: #cccccc;
border: 2px solid transparent;
border-radius: 8px;
padding: 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
}
.ngd-auth-tab.active {
background: #7B2FBE;
color: #ffffff;
border-color: #7B2FBE;
}
.woocommerce-account:not(.logged-in) .u-columns {
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
width: 100% !important;
min-width: 0 !important;
max-width: 420px !important;
box-sizing: border-box !important;
}
/* Login shows by default; register hides until its tab is clicked, which
toggles .ngd-show-register on .u-columns (see functions.php). */
.woocommerce-account:not(.logged-in) .u-columns .u-column2 {
display: none !important;
}
.woocommerce-account:not(.logged-in) .u-columns.ngd-show-register .u-column1 {
display: none !important;
}
.woocommerce-account:not(.logged-in) .u-columns.ngd-show-register .u-column2 {
display: flex !important;
}
}
@media (max-width: 768px) {
/* First Name / Last Name on the Register form use WooCommerce's own
form-row-first/-last classes, which float them side by side at ~47%
width each by default — too cramped on mobile, so stack them. */
.woocommerce-form-row-first,
.woocommerce-form-row-last {
width: 100% !important;
float: none !important;
}
/* Map */
.elementor-element-011c67d .elementor-custom-embed,
.elementor-element-011c67d .elementor-custom-embed iframe { min-height: 300px !important; }
.elementor-widget-google_maps { width: 100% !important; max-width: 100% !important; }
.elementor-widget-google_maps iframe { width: 100% !important; }
}
@media (max-width: 768px) {
.e-ae2ca9c-e6658cb {
text-align: center !important;
}
}
tr[id^="edit-"],
.woocommerce-MyAccount-content .woocommerce-orders-table tr[id^="edit-"] { display: none !important; }
body.admin-bar {
padding-top: 32px !important;
}
body.admin-bar.home .site-header {
top: 32px !important;
}
body.admin-bar:not(.home) .site-header {
top: 0 !important;
}
@media (max-width: 782px) {
body.admin-bar {
padding-top: 46px !important;
}
body.admin-bar.home .site-header {
top: 46px !important;
}
}
@media (max-width: 768px) {
.site-header,
.site-footer {
width: 100vw !important;
max-width: 100vw !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box !important;
}
}
.entry-title {
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.woocommerce-checkout iframe,
.wc-block-checkout iframe {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Checkout order-summary sidebar shows the price twice per item — once
beside the name (total) and again right under it (WooCommerce's
unit-price line, only meant for "£X each" when quantity > 1). Every
dance-class-bundle booking is always qty 1, so it's the same number
repeated. Hides just that redundant line; the total-price column stays. */
.wc-block-components-order-summary-item__individual-prices {
display: none !important;
}
/* Main Cart page: same duplicate-price situation. On desktop, hide the
in-flow unit-price line and keep the Total column, same as checkout.
On mobile only (see the max-width:768px block above), that's flipped —
the Total column sits awkwardly next to a wrapped multi-line product
name there, so the in-flow price under the name is kept instead and the
Total column is hidden. */
.wc-block-cart-item__prices {
display: none !important;
}
/* Order received / checkout / cart pages, and any plain WP page using the default
template (e.g. Privacy Policy, Terms of Service) use the raw theme template (not
an Elementor container), so they have no built-in content width constraint. */
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .page-content,
body.woocommerce-cart .page-header,
body.woocommerce-cart .page-content,
body.page-template-default .page-header,
body.page-template-default .page-content {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .page-content,
body.woocommerce-cart .page-header,
body.woocommerce-cart .page-content,
body.page-template-default .page-header,
body.page-template-default .page-content {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Classes page (page-id-22): the general page-template-default rule above boxes
.page-content at 1200px, which is why setting a background on the Elementor
container inside it (max-width/width changes made in the Elementor editor)
never reaches past that width — Elementor can't override a wrapper outside
its own markup. This page wants its background to run edge-to-edge, so it
gets its own override, undoing the max-width/padding just for this page
while every other default-template page (Privacy Policy, Terms, etc.) keeps
the readable boxed width. */
body.page-id-22 .page-content {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* My Account's content (nav + panels) is already Elementor-boxed at 1140px,
but the raw theme page title above it isn't — match its width so both align. */
.woocommerce-account .page-header {
max-width: 1140px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.site-main {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
flex: 1 0 auto !important;
}
html {
background: #0d1f2d !important;
}
@media (max-width: 768px) {
.elementor-element-044b791 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 768px) {
.woocommerce-MyAccount-navigation ul {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 4px !important;
border-bottom: none !important;
padding-bottom: 8px !important;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 54px !important;
box-sizing: border-box !important;
text-align: center !important;
white-space: normal !important;
font-size: 0.8rem !important;
padding: 12px 6px !important;
}
/* WooCommerce's own nav template outputs a stray
before the link
text, which forces an empty leading line — that's what was pushing
the text down by one line-height instead of true vertical center. */
.woocommerce-MyAccount-navigation ul li a br {
display: none;
}
/* Log out is always the last item and lands alone in the final grid row's first
column by default — place it in the middle column instead so it's centered,
keeping the same size as every other nav button. */
.woocommerce-MyAccount-navigation ul li:last-child {
grid-column: 2 !important;
}
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads {
display: none !important;
}
.woocommerce-MyAccount-content {
padding-top: 16px !important;
}
.woocommerce-Button.wc-forward {
display: none !important;
}
/* ================================
Homepage Address (Find Us section)
================================ */
.elementor-element-044b791 {
align-items: flex-start !important;
}
.elementor-element-4e16f1e {
align-items: flex-start !important;
text-align: left !important;
max-width: 100% !important;
margin: 0 !important;
height: auto !important;
}
.elementor-element-4e16f1e .elementor-widget-google_maps,
.elementor-element-4e16f1e .elementor-element-ce8b0fa {
max-width: 100% !important;
width: 100% !important;
}
/* The real DOM chain from the 400px-tall container down to the iframe is:
.elementor-element-ce8b0fa (400px, has min-height:400px)
-> .e-con-inner (an Elementor-generated flex wrapper, correctly 400px)
-> .elementor-widget-google_maps (was stuck at 150px — a flex item that
wasn't stretching to match .e-con-inner despite height:100%, likely
because the map iframe inside it is a replaced element influencing
the flex item's own intrinsic sizing)
-> .elementor-custom-embed (matches whatever the widget above is)
-> iframe (matches .elementor-custom-embed)
height:100% didn't reliably cascade through that chain, so this sets an
explicit height matching the container's actual min-height instead. */
.elementor-widget-google_maps,
.elementor-widget-google_maps .elementor-custom-embed,
.elementor-widget-google_maps iframe {
height: 400px !important;
}
/* The container's own height setting switches to 50vh on mobile (vs a fixed
400px on desktop) — match that here too, or a gap reappears at the bottom
on small screens (measured: 422px container vs 400px map = 22px gap). */
@media (max-width: 768px) {
.elementor-widget-google_maps,
.elementor-widget-google_maps .elementor-custom-embed,
.elementor-widget-google_maps iframe {
height: 50vh !important;
}
}
@media (max-width: 768px) {
/* .woocommerce-MyAccount-content form p is display:flex (see line ~475), so
text-align has no effect on positioning the button inside it — align-items
is the property that actually matters here. Both need !important + this
selector's specificity to beat the existing "form p { text-align: left
!important }" rule, which otherwise wins regardless of source order. */
.woocommerce-MyAccount-content form p.ngd-same-as-last-wrap {
text-align: right !important;
align-items: flex-end !important;
}
/* This button gets auto-wrapped in its own
(no class to target — likely wpautop()), which is display:flex/flex-direction:column by the same rule above, defaulting to align-items:stretch — that's what's actually stretching it full-width, not any width rule. align-self on the item itself overrides the parent's stretch regardless of what wraps it. */ #ngd-add-dancer-form button[type="submit"] { align-self: flex-start !important; width: auto !important; } }