.woocommerce span.onsale {
  background-color: #cf3232;
}

.woocommerce div.product .product_meta>span {
  color: #ffffff;
}

.kadence-breadcrumb-container {
  color: #ffffff;
}

.button {
  word-spacing: 1px;
}

.wc-block-grid__product-price {
  text-align: left;
}

.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {
  background-color: #cf3232;
}

.wc-block-grid__product .wc-block-grid__product-title {
  font-size: 15px;
  color: #CB9D1D;
}

.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price {
  font-size: 15px;
}

.wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart {
  font-size: 15px;
	text-transform: uppercase !important;
}

.wc-block-components-product-sale-badge.wc-block-components-product-sale-badge--align-left.wp-block-cart-cross-sells-product__product-onsale {
  background-color: #cf3232;
  color: #ffffff;
}

.up-sells.upsells.products {
  text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #121212;
    background-color: #6AC269;
}

.wpcc-powered {
  opacity: 0;
  visibility: hidden;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  background-color: #222222;
}

.post-navigation .nav-next a,
.post-navigation .nav-previous a {
  font-size: 11px;
}

.woocommerce div.product span.price,
.woocommerce div.product p.price {
  font-size: 16px;
}

.woocommerce table.shop_attributes th {
  padding-top: 10px;
}

/* ----------------------------------------------------------------------
   TYPOGRAPHY - BUTTON TEXT
   Applies Dela Gothic One consistently across standard, WooCommerce and
   Kadence buttons, with a strong readable weight and uppercase styling.
   ---------------------------------------------------------------------- */

button,
.button,
.btn,
.wp-block-button__link,
.kt-button,
button span,
.button span,
.btn span,
.wp-block-button__link span,
.kt-button span {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------
   WOOCOMMERCE - FORM LABEL COLOUR
   Keeps WooCommerce form labels white on the site's dark backgrounds.
   ---------------------------------------------------------------------- */

.woocommerce-page form .form-row label {
    color: #ffffff;
}

/* ----------------------------------------------------------------------
   WOOCOMMERCE - FORM FIELD TEXT
   Keeps entered WooCommerce form text black on light input backgrounds
   without overriding global form typography or validation styling.
   ---------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    color: #000000;
}

/* ==========================================================================
   WOOCOMMERCE - GLOBAL SUCCESS NOTICES
   ========================================================================== */

/* WooCommerce Success Notice Text
   Makes WooCommerce success-message text white so it remains
   readable against the Template's dark styling. */
.woocommerce .woocommerce-message {
    color: #ffffff !important;
}

/* WooCommerce Success Notice Spacing
   Standardises notice padding and spacing between the message
   text and action button across the Template breakpoints. */
.woocommerce .woocommerce-message {
    padding: 16px 20px !important;
		display: flex !important;
		align-items: center !important;
}

.woocommerce .woocommerce-message .button {
		float: none !important;
		order: 2;
    margin-left: 16px !important;
}

/* Desktop */
@media (min-width: 1025px) {
    .woocommerce .woocommerce-message {
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce .woocommerce-message {
        padding: 14px 18px !important;
    }

    .woocommerce .woocommerce-message .button {
        margin-left: 14px !important;
    }
}

/* Mobile
   Stacks the WooCommerce success notice cleanly from the
   framework mobile breakpoint instead of waiting for Woo's
   native 540px breakpoint. */
@media (max-width: 767px) {
    .woocommerce .woocommerce-message {
        padding: 12px 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .woocommerce .woocommerce-message .button {
        float: none !important;
        width: 100% !important;
        margin: 12px 0 0 0 !important;
        text-align: center;
    }
}

/* ==========================================================================
   BM Web Systems - WOOCOMMERCE CLASSIC CHECKOUT
   ========================================================================== */

/* ----------------------------------------------------------------------
   CHECKOUT - RENEWAL NOTICE
   Left-aligns and sizes WooCommerce checkout success messages.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.

   DEPLOYMENT NOTE:
   If the client requires this styling to target only one specific checkout
   page, replace body.woocommerce-checkout with that page's unique selector.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout
.woocommerce-notices-wrapper > .woocommerce-message {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    font-size: 16px !important;
}

/* GYMFLOW - TABLET */
@media screen and (max-width: 1024px) {
    body.woocommerce-checkout
    .woocommerce-notices-wrapper > .woocommerce-message {
        font-size: 15px !important;
    }
}

/* GYMFLOW - MOBILE */
@media screen and (max-width: 767px) {
    body.woocommerce-checkout
    .woocommerce-notices-wrapper > .woocommerce-message {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   1. ORDER SUMMARY
   ========================================================================== */

/* Remove default table backgrounds */
.woocommerce .woocommerce-checkout table.shop_table {
    background: transparent !important;
}

/* Make order table inherit theme colours */
.woocommerce-checkout #order_review table,
.woocommerce-checkout #order_review thead,
.woocommerce-checkout #order_review tbody,
.woocommerce-checkout #order_review tfoot,
.woocommerce-checkout #order_review tr,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
    background: transparent !important;
    color: inherit !important;
}

/* Order summary card */
.woocommerce-checkout #order_review {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 26px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Order summary row spacing */
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
    padding: 14px 10px;
}

/* Recurring totals heading */
.woocommerce-checkout .recurring-totals th,
.woocommerce-checkout .recurring-total th {
    padding-top: 18px !important;
    font-size: 16px;
    font-weight: 700;
}

/* Recurring total amount */
.woocommerce-checkout .recurring-total td {
    font-weight: 700;
}


/* ==========================================================================
   2. PAYMENT SECTION
   ========================================================================== */

/* Remove WooCommerce payment background */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 20px;
    padding-top: 20px;
}

/* Payment methods container */
.woocommerce-checkout #payment ul.payment_methods {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 14px 16px;
}

/* Remove WooCommerce selected payment highlight */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:first-child:checked + label {
    background: transparent !important;
    border-left: 0 !important;
}

/* Card details panel */
.woocommerce-checkout #payment fieldset.wc-payment-form {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 4px;
    margin: 16px 0 0 !important;
    padding: 16px !important;
}

/* Payment info notice */
.woocommerce-checkout #payment .woocommerce-info {
    background-color: transparent !important;
		color: #ffffff !important;
}

/* ----------------------------------------------------------------------
   CHECKOUT - WOOPAYMENTS PAYMENT OPTION LABELS
   Keeps saved-card, new-card and save-payment labels readable and
   consistently sized against the dark checkout background.
   Desktop: 14px / Tablet: 13px / Mobile: 12px.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout
#payment
label[for="wc-woocommerce_payments-new-payment-method"],
body.woocommerce-checkout
#payment
ul.payment_methods
li.woocommerce-SavedPaymentMethods-token
label,
body.woocommerce-checkout
#payment
ul.payment_methods
li.woocommerce-SavedPaymentMethods-new
label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    body.woocommerce-checkout
    #payment
    label[for="wc-woocommerce_payments-new-payment-method"],
    body.woocommerce-checkout
    #payment
    ul.payment_methods
    li.woocommerce-SavedPaymentMethods-token
    label,
    body.woocommerce-checkout
    #payment
    ul.payment_methods
    li.woocommerce-SavedPaymentMethods-new
    label {
        font-size: 13px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    body.woocommerce-checkout
    #payment
    label[for="wc-woocommerce_payments-new-payment-method"],
    body.woocommerce-checkout
    #payment
    ul.payment_methods
    li.woocommerce-SavedPaymentMethods-token
    label,
    body.woocommerce-checkout
    #payment
    ul.payment_methods
    li.woocommerce-SavedPaymentMethods-new
    label {
        font-size: 12px !important;
    }
}

/* Remove default gap above privacy / terms block */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin-top: 0 !important;
}

/* ==========================================================================
   3. CHECKOUT FIELDS
   ========================================================================== */

/* Standard checkout inputs */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 4px;
}

/* Hide address placeholders */
#billing_address_1::placeholder,
#billing_address_2::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Hide redundant account password placeholder */
#account_password::placeholder {
		color: transparent !important;
    opacity: 0 !important;
}

/* ==========================================================================
   4. MEMBERSHIP CUSTOM FIELDS
   ========================================================================== */

/* Match WooCommerce billing-label spacing */
#emergency_contact_name_field label,
#emergency_contact_phone_field label,
#primary_member_name_field label,
#secondary_member_name_field label,
#third_member_name_field label,
#fourth_member_name_field label {
    line-height: 2.4 !important;
}

/* ----------------------------------------------------------
   CHECKOUT - LOGIN / COUPON NOTICE BACKGROUNDS
   ---------------------------------------------------------- */

/* Remove WooCommerce notice backgrounds from checkout toggles */
body.woocommerce-checkout
.woocommerce-form-login-toggle
.woocommerce-info,
body.woocommerce-checkout
.woocommerce-form-coupon-toggle
.woocommerce-info {
    background: transparent !important;
}

/* ----------------------------------------------------------------------
   CHECKOUT - LOGIN / COUPON TOGGLE TEXT
   Keeps the login and coupon toggle notices white against the
   Template's dark checkout background.
   ---------------------------------------------------------------------- */

.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    color: #ffffff !important;
}

/* ==========================================================================
   5. COUPON - GLOBAL
   ========================================================================== */

/* Coupon placeholder text */
.woocommerce-checkout form.checkout_coupon input::placeholder {
    color: #8f8f8f !important;
    opacity: 1 !important;
}

.woocommerce-checkout form.checkout_coupon input::-webkit-input-placeholder {
    color: #8f8f8f !important;
}

.woocommerce-checkout form.checkout_coupon input::-moz-placeholder {
    color: #8f8f8f !important;
}

.woocommerce-checkout form.checkout_coupon input:-ms-input-placeholder {
    color: #8f8f8f !important;
}

/* Coupon form border */
.woocommerce-checkout form.checkout_coupon {
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 6px;
}

/* Coupon validation message */
.woocommerce-checkout form.checkout_coupon #coupon-error-notice {
    display: block !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   6. COUPON - DESKTOP / TABLET
   ========================================================================== */

@media screen and (min-width: 701px) {

    .woocommerce-checkout form.checkout_coupon .form-row {
        float: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box;
        vertical-align: middle !important;
    }

    /* Coupon input */
    .woocommerce-checkout form.checkout_coupon .form-row-first {
        display: inline-block !important;
        width: 80% !important;
        padding-right: 20px !important;
    }

    /* Apply Coupon button */
    .woocommerce-checkout form.checkout_coupon .form-row-last {
        display: inline-block !important;
        width: 19% !important;
        text-align: right !important;
    }

    .woocommerce-checkout form.checkout_coupon input.input-text {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .woocommerce-checkout form.checkout_coupon button.button {
        margin: 0 !important;
        vertical-align: middle !important;
    }
}


/* ==========================================================================
   7. RESPONSIVE CHECKOUT - COLUMN STACKING
   ========================================================================== */

/* Stack checkout columns when the mobile header activates */
@media screen and (max-width: 1275px) {

    .woocommerce-checkout .col2-set,
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2,
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .woocommerce-checkout #order_review_heading {
        margin-top: 40px;
    }
}


/* ==========================================================================
   8. MOBILE CHECKOUT - 700PX AND BELOW
   ========================================================================== */

@media screen and (max-width: 700px) {

    /* ----------------------------------------------------------------------
       General layout and section spacing
       ---------------------------------------------------------------------- */

    .woocommerce-checkout #order_review {
        padding: 16px !important;
        border-radius: 8px;
    }

    .woocommerce-checkout h3,
    .woocommerce-checkout #order_review_heading {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 22px !important;
    }

    /* Reduce gap between Membership Details and Your Order */
    .woocommerce-checkout #customer_details {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .woocommerce-checkout #order_review_heading {
        margin-top: 12px !important;
        padding-top: 0 !important;
    }


    /* ----------------------------------------------------------------------
       Membership fields
       ---------------------------------------------------------------------- */

    #emergency_contact_name_field,
    #emergency_contact_phone_field,
    #primary_member_name_field,
    #secondary_member_name_field,
    #third_member_name_field,
    #fourth_member_name_field {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 18px !important;
    }


    /* ----------------------------------------------------------------------
       Order summary
       ---------------------------------------------------------------------- */

    .woocommerce-checkout-review-order-table {
        width: 100% !important;
        table-layout: auto !important;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        padding: 12px 8px !important;
        vertical-align: top !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        box-sizing: border-box;
    }

    .woocommerce-checkout-review-order-table td.product-name,
    .woocommerce-checkout-review-order-table th.product-name {
        word-break: normal !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .woocommerce-checkout-review-order-table small {
        display: block;
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-top: 4px;
    }


    /* ----------------------------------------------------------------------
       Payment section
       ---------------------------------------------------------------------- */

    .woocommerce-checkout #payment {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods {
        padding: 14px !important;
        margin-bottom: 16px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods li {
        margin-bottom: 12px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
        margin-right: 10px !important;
        vertical-align: top;
    }

    .woocommerce-checkout #payment ul.payment_methods li label {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    /* Saved payment methods */
    .woocommerce-checkout .woocommerce-SavedPaymentMethods-token {
        display: block !important;
        margin-bottom: 14px !important;
    }

    .woocommerce-checkout .woocommerce-SavedPaymentMethods-token label {
        display: inline !important;
    }

    /* ----------------------------------------------------------------------
       Card form
       ---------------------------------------------------------------------- */

    .woocommerce-checkout #payment fieldset.wc-payment-form {
        padding: 16px !important;
    }

    /* Full-width fields */
    .woocommerce-checkout #payment fieldset.wc-payment-form .form-row-wide {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-bottom: 18px !important;
    }

    /* Expiry date */
    .woocommerce-checkout #payment fieldset.wc-payment-form .form-row-first {
        width: 48% !important;
        float: left !important;
        clear: none !important;
        margin-right: 0 !important;
        margin-bottom: 18px !important;
        box-sizing: border-box;
    }

    /* Security code */
    .woocommerce-checkout #payment fieldset.wc-payment-form .form-row-last {
        width: 48% !important;
        float: right !important;
        clear: none !important;
        margin-left: 0 !important;
        margin-bottom: 18px !important;
        box-sizing: border-box;
    }

    .woocommerce-checkout #payment fieldset.wc-payment-form:after {
        content: "";
        display: table;
        clear: both;
    }


    /* ----------------------------------------------------------------------
       Newsletter, privacy, terms and CTA
       ---------------------------------------------------------------------- */

.woocommerce-checkout #payment .woocommerce-form__label-for-checkbox {
    display: block;
    line-height: 1.55 !important;
    margin-bottom: 8px !important;
}

.woocommerce-checkout #payment input[type="checkbox"] {
    margin-right: 10px !important;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    line-height: 1.65 !important;
}

/* Remove default paragraph spacing inside privacy notice */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
		margin-top: 0 !important;
    margin-bottom: 26px !important;
}

.woocommerce-checkout #payment .form-row.validate-required {
    margin-bottom: 22px !important;
}

.woocommerce-checkout #place_order {
    width: 100% !important;
    min-height: 52px;
    margin-top: 12px !important;
}

/* ----------------------------------------------------------------------
   Login and coupon toggles
   ---------------------------------------------------------------------- */

.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    padding: 14px 14px 14px 22px !important;
}

.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
    font-size: inherit !important;
}

/* Login form introductory text */
.woocommerce-form-login > p:first-child {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

    /* ----------------------------------------------------------------------
       Expanded coupon form
       ---------------------------------------------------------------------- */

    .woocommerce-checkout form.checkout_coupon {
        padding: 18px !important;
        margin-top: 18px !important;
        margin-bottom: 28px !important;
    }

    .woocommerce-checkout form.checkout_coupon .form-row {
        width: 100% !important;
        float: none !important;
        margin: 0 0 12px !important;
    }

    .woocommerce-checkout form.checkout_coupon input.input-text {
        width: 100% !important;
        min-height: 50px !important;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    .woocommerce-checkout form.checkout_coupon button.button {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
}


/* ==========================================================================
   9. VERY SMALL PHONES - 420PX AND BELOW
   ========================================================================== */

@media screen and (max-width: 420px) {

    /* Stack expiry and security code on very small screens */
    .woocommerce-checkout #payment fieldset.wc-payment-form .form-row-first,
    .woocommerce-checkout #payment fieldset.wc-payment-form .form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        font-size: 14px !important;
    }
}

/* =========================================================
   WOOCOMMERCE CHECKOUT - ERROR NOTICE
   ========================================================= */

/* Removes WooCommerce's light error background so the
   notice fits the site's dark checkout styling. */
.woocommerce-checkout
.woocommerce-error {
    background-color: transparent !important;
}

/* =========================================================
   WOOCOMMERCE CHECKOUT - ERROR NOTICE TYPOGRAPHY
   ========================================================= */

.woocommerce-checkout
.woocommerce-error {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce-checkout
    .woocommerce-error {
        font-size: 13px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .woocommerce-checkout
    .woocommerce-error {
        font-size: 12px !important;
    }
}

/* ----------------------------------------------------------------------
   CHECKOUT - ERROR MESSAGE TEXT
   Keeps WooCommerce checkout error-message text white and matches
   the standard responsive WooCommerce text sizing.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout
.woocommerce-error > li {
    color: #ffffff !important;
    font-size: 16px !important;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    body.woocommerce-checkout
    .woocommerce-error > li {
        font-size: 15px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    body.woocommerce-checkout
    .woocommerce-error > li {
        font-size: 14px !important;
    }
}

/* =========================================================
   WOOCOMMERCE CHECKOUT - SECTION HEADINGS
   ========================================================= */

/* Standardises Billing Details, Membership Details
   and Your Order across the Checkout. */
.woocommerce-checkout
.woocommerce-billing-fields > h3,
.woocommerce-checkout
#order_review_heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce-checkout
    .woocommerce-billing-fields > h3,
    .woocommerce-checkout
    #order_review_heading {
        font-size: 20px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .woocommerce-checkout
    .woocommerce-billing-fields > h3,
    .woocommerce-checkout
    #order_review_heading {
        font-size: 18px !important;
    }
}

/* ----------------------------------------------------------------------
   CHECKOUT - BOOKING APPOINTMENT DETAILS
   Places the Appointment label above the Bookly booking details while
   keeping Date, Time and Service on their existing separate lines.
   ---------------------------------------------------------------------- */

.woocommerce-checkout
.woocommerce-checkout-review-order-table
dl.variation
dt.variation-Appointment,
.woocommerce-checkout
.woocommerce-checkout-review-order-table
dl.variation
dd.variation-Appointment {
	display: block !important;
	float: none !important;
	clear: both !important;
}

.woocommerce-checkout
.woocommerce-checkout-review-order-table
dl.variation
dd.variation-Appointment {
	margin-left: 0 !important;
}

/* =========================================================
   WOOCOMMERCE CHECKOUT - PASSWORD VALIDATION
   ========================================================= */

.woocommerce-checkout
.woocommerce-password-strength,
.woocommerce-checkout
.woocommerce-password-hint {
    font-size: 15px !important;
    line-height: 1.3 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce-checkout
    .woocommerce-password-strength,
    .woocommerce-checkout
    .woocommerce-password-hint {
        font-size: 14px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .woocommerce-checkout
    .woocommerce-password-strength,
    .woocommerce-checkout
    .woocommerce-password-hint {
        font-size: 13px !important;
    }
}

/* CHECKOUT - WOOPAYMENTS: REMOVE INNER CARD DETAILS BORDER
   Removes only the nested fieldset border around the WooPayments
   card fields. Keeps the outer payment container and input borders. */
#payment .payment_box.payment_method_woocommerce_payments fieldset.wc-payment-form {
    border: 0 !important;
}

/* ----------------------------------------------------------------------
   CHECKOUT - WOOPAYMENTS TEST-MODE HELPER
   Styles the WooPayments test-card notice and creates a clean
   three-line layout at 405px and below.
   ---------------------------------------------------------------------- */

.woocommerce-checkout
.payment_method_woocommerce_payments
.testmode-info {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	background: transparent;
	color: #bdbdbd !important;
	-webkit-text-fill-color: #bdbdbd !important;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.woocommerce-checkout
.payment_method_woocommerce_payments
.testmode-info button,
.woocommerce-checkout
.payment_method_woocommerce_payments
.testmode-info a {
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font: inherit;
	font-weight: 600;
	text-transform: none;
	text-decoration: underline;
	vertical-align: baseline;
}

.woocommerce-checkout
.payment_method_woocommerce_payments
.testmode-info button {
	cursor: pointer;
}

.woocommerce-checkout
.payment_method_woocommerce_payments
.testmode-info i {
	display: none !important;
}

@media (max-width: 405px) {

	.woocommerce-checkout
	.payment_method_woocommerce_payments
	.testmode-info {
		display: flex;
		width: 100% !important;
		min-width: 0 !important;
		flex-wrap: wrap;
		align-items: baseline;
	}

	.woocommerce-checkout
	.payment_method_woocommerce_payments
	.testmode-info
	button.js-wcpayments-copy-test-number {
		display: block !important;
		flex: 0 0 100%;
		width: 100% !important;
		min-width: 0 !important;
		margin: 2px 0 !important;
		padding: 0 !important;
		text-align: left !important;
		white-space: nowrap !important;
	}

	.woocommerce-checkout
	.payment_method_woocommerce_payments
	.testmode-info a {
		margin-left: 3px;
		white-space: nowrap !important;
	}
}

/* CHECKOUT - PAYMENT TO PLACE ORDER BLOCK SPACING
   Adds balanced spacing above the full consent/place-order section.
   Matches the 34px combined spacing below the Terms row before the button. */
#payment .form-row.place-order {
    padding-top: 34px !important;
}

/* CHECKOUT - PLACE ORDER BUTTON UPPERCASE
   Displays the Place Order button text in block capitals
   without changing its font size or other button styling. */
#place_order {
    text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------
   CHECKOUT - CONSENT TEXT RESPONSIVE FONT SIZE
   Newsletter, privacy and terms only.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.
   ---------------------------------------------------------------------- */

.woocommerce-checkout #payment .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    font-size: 16px !important;
}

/* TEMPLATE - TABLET */
@media screen and (max-width: 1024px) {
    .woocommerce-checkout #payment .woocommerce-form__label-for-checkbox,
    .woocommerce-checkout #payment .woocommerce-privacy-policy-text {
        font-size: 15px !important;
    }
}

/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {
    .woocommerce-checkout #payment .woocommerce-form__label-for-checkbox,
    .woocommerce-checkout #payment .woocommerce-privacy-policy-text {
        font-size: 14px !important;
    }
}

/* ======================================================================
   ORDER CONFIRMATION / THANK YOU PAGE
   ====================================================================== */

/* ----------------------------------------------------------------------
   ORDER CONFIRMATION - ORDER OVERVIEW VERTICAL LAYOUT
   Stacks all order summary items vertically at every screen size.
   ---------------------------------------------------------------------- */

.woocommerce-order-received .woocommerce-order-overview {
    display: block !important;
}

.woocommerce-order-received .woocommerce-order-overview li {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
}

/* Remove extra space after the final item */
.woocommerce-order-received .woocommerce-order-overview li:last-child {
    margin-bottom: 0 !important;
}

/* ----------------------------------------------------------------------
   ORDER CONFIRMATION - SECTION HEADINGS
   Matches the established My Account heading framework.
   Desktop: 28px / Tablet: 24px / Mobile: 22px.
   ---------------------------------------------------------------------- */

.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* TEMPLATE - TABLET */
@media screen and (max-width: 1024px) {

    .woocommerce-order-received .woocommerce-order-details h2,
    .woocommerce-order-received .woocommerce-customer-details h2 {
        font-size: 24px !important;
    }
}

/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {

    .woocommerce-order-received .woocommerce-order-details h2,
    .woocommerce-order-received .woocommerce-customer-details h2 {
        font-size: 22px !important;
    }
}

/* ----------------------------------------------------------------------
   ORDER CONFIRMATION - RELATED SUBSCRIPTIONS VIEW BUTTON
   Matches the established My Account table-action button framework.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.
   ---------------------------------------------------------------------- */

.woocommerce-order-received
.woocommerce-orders-table--subscriptions
.subscription-actions
.button.view {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

/* Give the View action breathing room */
.woocommerce-order-received
.woocommerce-orders-table--subscriptions
.subscription-actions {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* TEMPLATE - TABLET */
@media screen and (max-width: 1024px) {

    .woocommerce-order-received
    .woocommerce-orders-table--subscriptions
    .subscription-actions
    .button.view {
        font-size: 15px !important;
    }
}

/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {

    .woocommerce-order-received
    .woocommerce-orders-table--subscriptions
    .subscription-actions
    .button.view {
        font-size: 14px !important;
    }
}

/* ----------------------------------------------------------------------
   ORDER CONFIRMATION - BILLING ADDRESS TEXT
   Matches the established responsive customer-details framework.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.
   ---------------------------------------------------------------------- */

.woocommerce-order-received
.woocommerce-customer-details address,
.woocommerce-order-received
.woocommerce-customer-details address p {
    font-size: 16px !important;
}

/* TEMPLATE - TABLET */
@media screen and (max-width: 1024px) {

    .woocommerce-order-received
    .woocommerce-customer-details address,
    .woocommerce-order-received
    .woocommerce-customer-details address p {
        font-size: 15px !important;
    }
}

/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {

    .woocommerce-order-received
    .woocommerce-customer-details address,
    .woocommerce-order-received
    .woocommerce-customer-details address p {
        font-size: 14px !important;
    }
}

/* ----------------------------------------------------------
   WOOCOMMERCE MEMBERSHIPS - RESTRICTION MESSAGES
   ---------------------------------------------------------- */

/* Allow protected-content notices to inherit the page background */
.woocommerce .wc-memberships-restriction-message {
    background: transparent !important;
}

/* ==========================================================
   WOOCOMMERCE - MY ACCOUNT
   TEMPLATE BREAKPOINTS:
   Tablet: 1024px and below
   Mobile: 767px and below
   ========================================================== */


/* ----------------------------------------------------------
   1. SHARED MY ACCOUNT STYLES
   ---------------------------------------------------------- */

/* Notice text colour */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    color: inherit;
}

/* Remove default WooCommerce notice backgrounds */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    background: transparent !important;
}

/* Notice action button styling */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
    width: auto !important;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

/* Responsive notice layout - tablet */
@media (max-width: 1024px) {

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
        float: none !important;
        order: 2;
        margin: 16px 0 0 !important;
        font-size: 15px !important;
    }
}

/* Notice action button - mobile */
@media (max-width: 767px) {

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
        font-size: 14px !important;
    }
}

/* Allow long notice actions to fit very small phones */
@media (max-width: 340px) {

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
        white-space: normal;
        text-align: center;
    }
}

/* Notice text sizing */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    font-size: 16px;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
        font-size: 14px;
    }
}


/* Main My Account content section headings */
.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 28px;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content h2 {
        font-size: 22px;
    }
}


/* ----------------------------------------------------------
   2. LOGGED OUT / AUTHENTICATION
   ---------------------------------------------------------- */

/* Logged-out account error notice styling */
.woocommerce-account:not(.logged-in) .woocommerce-error {
    background: transparent !important;
    font-size: 16px;
}

@media (max-width: 1024px) {
    .woocommerce-account:not(.logged-in) .woocommerce-error {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account:not(.logged-in) .woocommerce-error {
        font-size: 14px;
    }
}

/* Register button spacing */
.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit {
    margin-top: 18px;
}

/* Centre password eye on mobile */
@media (max-width: 767px) {
    .woocommerce-account .password-input .show-password-input {
        top: 70%;
        transform: translateY(-50%);
    }
}

/* ----------------------------------------------------------------------
   MY ACCOUNT - LOST PASSWORD MESSAGE TEXT
   Responsive sizing for the confirmation message and explanatory text.
   Desktop: 18px / Tablet: 17px / Mobile: 16px.
   ---------------------------------------------------------------------- */

.bm-lost-password-page .woocommerce > .woocommerce-message,
.bm-lost-password-page .woocommerce > .woocommerce-message + p {
    font-size: 18px !important;
}

@media screen and (max-width: 1024px) {
    .bm-lost-password-page .woocommerce > .woocommerce-message,
    .bm-lost-password-page .woocommerce > .woocommerce-message + p {
        font-size: 17px !important;
    }
}

@media screen and (max-width: 719px) {
    .bm-lost-password-page .woocommerce > .woocommerce-message,
    .bm-lost-password-page .woocommerce > .woocommerce-message + p {
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------------------------
   MY ACCOUNT - LOST PASSWORD RESET BUTTON
   Displays the Reset Password button text in uppercase.
   ---------------------------------------------------------------------- */

.bm-lost-password-page
.woocommerce-ResetPassword.lost_reset_password
.woocommerce-Button {
    text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------
   MY ACCOUNT - LOST PASSWORD INPUT
   Adds a rounded radius to the username/email field.
   ---------------------------------------------------------------------- */

.bm-lost-password-page
.woocommerce-ResetPassword.lost_reset_password
input.input-text {
    border-radius: 10px !important;
}

/* ----------------------------------------------------------
   3. NAVIGATION
   ---------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul li a {
    font-family: 'Roboto Flex', sans-serif !important;
    font-weight: 300 !important;
}

/* Mobile-style navigation on tablet */
@media (min-width: 768px) and (max-width: 1024px) {

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Keep every item aligned so hover/active states do not shift */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border-left: 4px solid transparent;
        border-bottom: 0 !important;
        padding-left: 0;
    }

    /* Match mobile link spacing and indentation exactly */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li > a {
        display: block;
        padding: .5em 1.5em .5em 1em !important;
        border-bottom: 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* Match mobile hover state */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li:hover {
        border-left-color: #ffffff !important;
        border-bottom: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li:hover > a {
        border-bottom: 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* Match mobile active state */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
        border-left-color: #ffffff !important;
        border-bottom: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a {
        border-bottom: 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a::after {
        display: none !important;
    }
}


/* ----------------------------------------------------------
   4. DASHBOARD
   ---------------------------------------------------------- */

/* Dashboard responsive text */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
    font-size: 16px;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
    .woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    /* Greeting */
    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
        font-size: 14px;
    }

    /* Force clean line break after username */
    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type strong:first-of-type::after {
        content: "";
        display: block;
    }

    /* Dashboard description - slightly smaller to avoid orphaned final word */
    .woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
        font-size: 13px;
    }
}


/* ----------------------------------------------------------
   5. ORDERS
   ---------------------------------------------------------- */


/* Order View button */
.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions
.woocommerce-button.button.view {
    width: auto !important;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}


/* Order View button - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions
    .woocommerce-button.button.view {
        font-size: 15px !important;
    }
}


/* Order View button - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions
    .woocommerce-button.button.view {
        font-size: 14px !important;
    }
}


/* Order Details Pay + Orders Overview Pay */
.woocommerce-account
.woocommerce-order-details
.order-actions-button,
.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions
.button.pay {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}


/* Order Pay buttons - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-order-details
    .order-actions-button,
    .woocommerce-account
    .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions
    .button.pay {
        font-size: 15px !important;
    }
}


/* Order Pay buttons - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-order-details
    .order-actions-button,
    .woocommerce-account
    .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions
    .button.pay {
        font-size: 14px !important;
    }
}


/* Give stacked Order View actions breathing room */
@media (max-width: 1349px) {

    .woocommerce-account
    .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-actions {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* Orders Previous / Next pagination buttons */
.woocommerce-account
.woocommerce-pagination
.woocommerce-button--previous,
.woocommerce-account
.woocommerce-pagination
.woocommerce-button--next {
    width: auto !important;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}


/* Orders pagination buttons - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-pagination
    .woocommerce-button--previous,
    .woocommerce-account
    .woocommerce-pagination
    .woocommerce-button--next {
        font-size: 15px !important;
    }
}


/* Orders pagination buttons - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-pagination
    .woocommerce-button--previous,
    .woocommerce-account
    .woocommerce-pagination
    .woocommerce-button--next {
        font-size: 14px !important;
    }
}


/* Individual order details text */
.woocommerce-account
.woocommerce-order-details
.woocommerce-table--order-details th,
.woocommerce-account
.woocommerce-order-details
.woocommerce-table--order-details td {
    font-size: 16px;
}


/* Individual order customer details text */
.woocommerce-account
.woocommerce-customer-details address,
.woocommerce-account
.woocommerce-customer-details address p {
    font-size: 16px;
}


/* Individual order text - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-order-details
    .woocommerce-table--order-details th,
    .woocommerce-account
    .woocommerce-order-details
    .woocommerce-table--order-details td,
    .woocommerce-account
    .woocommerce-customer-details address,
    .woocommerce-account
    .woocommerce-customer-details address p {
        font-size: 15px;
    }
}


/* Individual order text - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-order-details
    .woocommerce-table--order-details th,
    .woocommerce-account
    .woocommerce-order-details
    .woocommerce-table--order-details td,
    .woocommerce-account
    .woocommerce-customer-details address,
    .woocommerce-account
    .woocommerce-customer-details address p {
        font-size: 14px;
    }
}


/* Order Again button */
.woocommerce-account
.woocommerce-order-details
.order-again .button {
    width: auto !important;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}


/* Order Again button - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-order-details
    .order-again .button {
        font-size: 15px !important;
    }
}


/* Order Again button - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-order-details
    .order-again .button {
        font-size: 14px !important;
    }
}


/* ==========================================================
   STACKED ORDERS OVERVIEW - 720PX TO 1349PX
   ========================================================== */

@media (min-width: 720px) and (max-width: 1349px) {

    /* Hide desktop headings */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    thead {
        display: none;
    }

    /* Each order becomes its own stacked block */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    tr {
        display: block;
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    /* Stack order cells */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    /* Restore responsive labels */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    th::before,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    /* Actions have no useful responsive label */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    .woocommerce-orders-table__cell-order-actions {
        text-align: left !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.woocommerce-orders-table:not(.my_account_subscriptions):not(#woocommerce-subscriptions-related-orders-table)
    tbody
    .woocommerce-orders-table__cell-order-actions::before {
        content: "" !important;
        display: none !important;
    }
}


/* WooCommerce native responsive Orders layout */
@media (max-width: 719px) {

    /* Add breathing room between individual orders */
    .woocommerce-account
    .woocommerce-orders-table
    tbody
    tr {
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-orders-table
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    /* Keep Order number visible */
    .woocommerce-account
    .woocommerce-orders-table
    tbody
    th.woocommerce-orders-table__cell-order-number {
        display: block !important;
        text-align: right !important;
    }

    .woocommerce-account
    .woocommerce-orders-table
    tbody
    th.woocommerce-orders-table__cell-order-number::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }
}


/* ----------------------------------------------------------
   6. MEMBERSHIPS
   ---------------------------------------------------------- */


/* ==========================================================
   MEMBERSHIPS OVERVIEW
   ========================================================== */

/* Empty state - responsive text */
.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-account-my-memberships > p {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-account-my-memberships > p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-account-my-memberships > p {
        font-size: 14px;
    }
}


/* Populated overview table text */
.woocommerce-account
.woocommerce-account-my-memberships
.my_account_memberships th,
.woocommerce-account
.woocommerce-account-my-memberships
.my_account_memberships td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships th,
    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships th,
    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships td {
        font-size: 14px;
    }
}


/* Membership overview action buttons */
.woocommerce-account
.woocommerce-account-my-memberships
.my_account_memberships
.membership-actions
.button {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    margin: 4px 8px 4px 0 !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    .membership-actions
    .button {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    .membership-actions
    .button {
        font-size: 14px !important;
    }
}


/* Desktop Memberships overview */
@media (min-width: 1350px) {

    /* Breathing room inside desktop rows */
    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships th,
    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships td {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Keep action buttons side by side */
    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    .membership-actions {
        white-space: nowrap;
    }
}


/* Stacked Memberships overview */
@media (min-width: 720px) and (max-width: 1349px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    thead {
        display: none;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    tr {
        display: block;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    td.membership-actions {
        text-align: left !important;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    td.membership-actions::before {
        content: "";
        display: none;
    }
}


/* Spacing between stacked memberships */
@media (max-width: 1349px) {

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    tr {
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-account-my-memberships
    .my_account_memberships
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================
   MEMBERS AREA - CONTENT
   ========================================================== */

/* Remove unused Excerpt column */
.woocommerce-account
.my-membership-content
.my_membership_content
th.membership-content-excerpt,
.woocommerce-account
.my-membership-content
.my_membership_content
td.membership-content-excerpt {
    display: none !important;
}


/* Members Area content table text */
.woocommerce-account
.my-membership-content
.my_membership_content th,
.woocommerce-account
.my-membership-content
.my_membership_content td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content th,
    .woocommerce-account
    .my-membership-content
    .my_membership_content td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content th,
    .woocommerce-account
    .my-membership-content
    .my_membership_content td {
        font-size: 14px;
    }
}


/* Members Area View buttons */
.woocommerce-account
.my-membership-content
.my_membership_content
.membership-content-actions
.button.view {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    .membership-content-actions
    .button.view {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    .membership-content-actions
    .button.view {
        font-size: 14px !important;
    }
}


/* Give stacked content actions breathing room */
@media (max-width: 1349px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    td.membership-content-actions {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* Desktop Members Area Content table */
@media (min-width: 1350px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content th,
    .woocommerce-account
    .my-membership-content
    .my_membership_content td {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}


/* Stacked Members Area Content table */
@media (min-width: 720px) and (max-width: 1349px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    thead {
        display: none;
    }

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    tbody
    tr {
        display: block;
    }

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    /* Actions have no useful responsive label */
    .woocommerce-account
    .my-membership-content
    .my_membership_content
    td.membership-content-actions {
        text-align: left !important;
    }

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    td.membership-content-actions::before {
        content: "" !important;
        display: none !important;
    }
}


/* Remove empty Actions colon from native mobile layout */
@media (max-width: 719px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    td.membership-content-actions::before {
        content: "" !important;
        display: none !important;
    }
}


/* Spacing between content items */
@media (max-width: 1349px) {

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    tbody
    tr {
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .my-membership-content
    .my_membership_content
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================
   MEMBERS AREA - NOTES
   ========================================================== */

/* Notes empty-state text */
.woocommerce-account
.my-membership-notes > p {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .my-membership-notes > p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .my-membership-notes > p {
        font-size: 14px;
    }
}


/* ==========================================================
   MEMBERS AREA - MANAGE
   ========================================================== */

/* Manage table text */
.woocommerce-account
.my-membership-details
.my_membership_settings th,
.woocommerce-account
.my-membership-details
.my_membership_settings td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .my-membership-details
    .my_membership_settings th,
    .woocommerce-account
    .my-membership-details
    .my_membership_settings td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .my-membership-details
    .my_membership_settings th,
    .woocommerce-account
    .my-membership-details
    .my_membership_settings td {
        font-size: 14px;
    }
}


/* Manage View Billing button */
.woocommerce-account
.my-membership-details
.my_membership_settings
.button.view-subscription {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    .button.view-subscription {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    .button.view-subscription {
        font-size: 14px !important;
    }
}


/* Give Actions row breathing room at all sizes */
.woocommerce-account
.my-membership-details
.my_membership_settings
tr.my-membership-detail-user-membership-actions td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}


/* Clean Manage layout below desktop table breakpoint */
@media (max-width: 1349px) {

    /* Keep Membership Details heading visible */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    thead {
        display: block !important;
    }

    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    thead tr,
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    thead th {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
    }

    /* Keep each label/value pair on one row */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tbody
    tr {
        display: flex !important;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
    }

    /* Remove split borders from individual cells */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tbody
    td {
        display: block !important;
        width: auto !important;
        box-sizing: border-box;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
    }

    /* Remove WooCommerce empty responsive labels */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tbody
    td::before {
        content: "" !important;
        display: none !important;
    }

    /* Label */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tbody
    td:first-child {
        text-align: left !important;
    }

    /* Value */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tbody
    td:last-child {
        text-align: right !important;
        margin-left: auto;
    }

    /* No unnecessary divider after final Actions row */
    .woocommerce-account
    .my-membership-details
    .my_membership_settings
    tr.my-membership-detail-user-membership-actions {
        border-bottom: 0 !important;
    }
}


/* ----------------------------------------------------------
   7. SUBSCRIPTIONS
   ---------------------------------------------------------- */

/* ==========================================================
   SUBSCRIPTIONS OVERVIEW
   ========================================================== */

/* ----------------------------------------------------------------------
   SUBSCRIPTIONS - EMPTY STATE NOTICE
   Prevents the global WooCommerce success-notice layout from affecting
   the empty Subscriptions notice inside My Account.
   ---------------------------------------------------------------------- */

.woocommerce-account
.woocommerce_account_subscriptions
.woocommerce-message {
    display: block !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.woocommerce-account
.woocommerce_account_subscriptions
.woocommerce-message .button {
    float: right !important;
    width: auto !important;
    margin-left: 0 !important;
}


/* TEMPLATE - TABLET */
@media screen and (max-width: 1024px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .woocommerce-message {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .woocommerce-message .button {
        float: none !important;
        margin: 16px 0 0 !important;
    }
}


/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .woocommerce-message .button {
        width: auto !important;
        margin: 12px 0 0 !important;
    }
}

/* Subscriptions overview table text */
.woocommerce-account
.woocommerce_account_subscriptions
.my_account_subscriptions th,
.woocommerce-account
.woocommerce_account_subscriptions
.my_account_subscriptions td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions th,
    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions th,
    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions td {
        font-size: 14px;
    }
}


/* Give stacked Subscription View actions breathing room */
@media (max-width: 1349px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    td.subscription-actions {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* Stacked Subscriptions overview */
@media (min-width: 720px) and (max-width: 1349px) {

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    thead {
        display: none;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    tbody
    tr {
        display: block;
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    /* Actions have no useful responsive label */
    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    td.subscription-actions {
        text-align: left !important;
    }

    .woocommerce-account
    .woocommerce_account_subscriptions
    .my_account_subscriptions
    td.subscription-actions::before {
        content: "" !important;
        display: none !important;
    }
}


/* ==========================================================
   VIEW SUBSCRIPTION - DETAILS
   ========================================================== */

/* Subscription details table text */
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details th,
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details td {
        font-size: 14px;
    }
}


/* Subscription action buttons */
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details
.button.cancel,
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details
.button.change_payment_method {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    margin: 4px 8px 4px 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    .button.cancel,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    .button.change_payment_method {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    .button.cancel,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    .button.change_payment_method {
        font-size: 14px !important;
    }
}


/* ==========================================================
   VIEW SUBSCRIPTION - MOBILE LAYOUT POLISH
   ========================================================== */

@media (max-width: 719px) {

    /* Keep the details table inside the available content width */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    /* Keep Last order date and Next payment date on one line */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    tbody
    tr:nth-child(3)
    td:first-child,

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    tbody
    tr:nth-child(4)
    td:first-child {
        white-space: nowrap !important;
    }

    /* Allow action buttons to use the available space to the left */
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details
    tbody
    tr:last-child
    td:last-child
    .button {
        max-width: none !important;
        margin-right: 0 !important;
        transform: translateX(-24px);
    }
}


/* ==========================================================
   VIEW SUBSCRIPTION - SECTION HEADINGS
   ========================================================== */

/* Give Subscription Totals, Related Orders and Billing Address breathing room */
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details + h2,
.woocommerce-account
.woocommerce-MyAccount-content
table.order_details + header h2,
.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-customer-details > h2 {
    margin-bottom: 16px !important;
}


/* ==========================================================
   VIEW SUBSCRIPTION - TOTALS
   ========================================================== */

/* Subscription Totals table text */
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details + h2 + table.order_details th,
.woocommerce-account
.woocommerce-MyAccount-content
table.subscription_details + h2 + table.order_details td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details + h2 + table.order_details th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details + h2 + table.order_details td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details + h2 + table.order_details th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    table.subscription_details + h2 + table.order_details td {
        font-size: 14px;
    }
}


/* ==========================================================
   VIEW SUBSCRIPTION - RELATED ORDERS
   ========================================================== */

/* Related Orders table text */
.woocommerce-account
.woocommerce-MyAccount-content
#woocommerce-subscriptions-related-orders-table th,
.woocommerce-account
.woocommerce-MyAccount-content
#woocommerce-subscriptions-related-orders-table td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table th,
    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table td {
        font-size: 14px;
    }
}


/* Stacked Related Orders */
@media (min-width: 720px) and (max-width: 1349px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    thead {
        display: none;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    tr {
        display: block;
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    /* View action sits on its own line */
    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    td.order-actions {
        text-align: left !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-content
    #woocommerce-subscriptions-related-orders-table
    tbody
    td.order-actions::before {
        content: "" !important;
        display: none !important;
    }
}


/* Related Orders pagination buttons */
.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-subscriptions-related-orders-pagination-links
.button {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-subscriptions-related-orders-pagination-links
    .button {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-subscriptions-related-orders-pagination-links
    .button {
        font-size: 14px !important;
    }
}


/* ----------------------------------------------------------
   8. DOWNLOADS
   ---------------------------------------------------------- */


/* ==========================================================
   DOWNLOADS TABLE
   ========================================================== */

/* Downloads table text */
.woocommerce-account
.woocommerce-table--order-downloads th,
.woocommerce-account
.woocommerce-table--order-downloads td {
    font-size: 16px;
}


/* Downloads table text - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-table--order-downloads th,
    .woocommerce-account
    .woocommerce-table--order-downloads td {
        font-size: 15px;
    }
}


/* Downloads table text - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-table--order-downloads th,
    .woocommerce-account
    .woocommerce-table--order-downloads td {
        font-size: 14px;
    }
}


/* ==========================================================
   DOWNLOAD BUTTON
   ========================================================== */

.woocommerce-account
.woocommerce-table--order-downloads
.woocommerce-MyAccount-downloads-file {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}


/* Download button - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-table--order-downloads
    .woocommerce-MyAccount-downloads-file {
        font-size: 15px !important;
    }
}


/* Download button - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-table--order-downloads
    .woocommerce-MyAccount-downloads-file {
        font-size: 14px !important;
    }
}


/* ==========================================================
   STACKED DOWNLOADS - 720PX TO 1349PX
   ========================================================== */

@media (min-width: 720px) and (max-width: 1349px) {

    /* Hide desktop headings */
    .woocommerce-account
    .woocommerce-table--order-downloads
    thead {
        display: none;
    }

    /* Each download becomes its own stacked block */
    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    tr {
        display: block;
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    /* Stack cells */
    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    /* Responsive labels */
    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    /* Download action gets its own clean line */
    .woocommerce-account
    .woocommerce-table--order-downloads
    td.download-file {
        text-align: left !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .woocommerce-account
    .woocommerce-table--order-downloads
    td.download-file::before {
        content: "" !important;
        display: none !important;
    }
}


/* ==========================================================
   NATIVE MOBILE DOWNLOADS - 719PX AND BELOW
   ========================================================== */

@media (max-width: 719px) {

    /* Spacing between multiple downloads */
    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    tr {
        margin-bottom: 16px !important;
    }

    .woocommerce-account
    .woocommerce-table--order-downloads
    tbody
    tr:last-child {
        margin-bottom: 0 !important;
    }

    /* Standard action spacing */
    .woocommerce-account
    .woocommerce-table--order-downloads
    td.download-file {
        text-align: left !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Remove redundant Download label */
    .woocommerce-account
    .woocommerce-table--order-downloads
    td.download-file::before {
        content: "" !important;
        display: none !important;
    }
}


/* ----------------------------------------------------------
   9. ADDRESSES
   ---------------------------------------------------------- */

/* Address overview - responsive text */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    font-size: 16px;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
        font-size: 14px;
    }
}

/* Full-width Save Address button */
.woocommerce-account .woocommerce-address-fields button[name="save_address"] {
    display: block;
    width: 100%;
    text-transform: capitalize;
    margin-top: 24px;
}


/* ----------------------------------------------------------
   10. PAYMENT METHODS
   ---------------------------------------------------------- */


/* ==========================================================
   EMPTY STATE
   ========================================================== */

/* Empty state - align Add Payment Method action on desktop */
.woocommerce-account .woocommerce-MyAccount-content {
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info + a.button[href*="add-payment-method"] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}


/* Empty state - stack action on tablet */
@media (max-width: 1024px) {

    .woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info + a.button[href*="add-payment-method"] {
        position: static;
        transform: none;
        display: inline-block;
        margin-top: 16px !important;
        font-size: 15px !important;
        white-space: nowrap;
    }
}


/* Empty state - mobile button sizing */
@media (max-width: 767px) {

    .woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info + a.button[href*="add-payment-method"] {
        font-size: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: nowrap;
    }
}


/* ==========================================================
   POPULATED PAYMENT METHODS
   ========================================================== */

/* Payment Methods table text */
.woocommerce-account
.woocommerce-MyAccount-paymentMethods th,
.woocommerce-account
.woocommerce-MyAccount-paymentMethods td {
    font-size: 16px;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods th,
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods td {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods th,
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods td {
        font-size: 14px;
    }
}


/* Delete payment method button */
.woocommerce-account
.woocommerce-MyAccount-paymentMethods
.payment-method-actions
.button {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    .payment-method-actions
    .button {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    .payment-method-actions
    .button {
        font-size: 14px !important;
    }
}


/* Add Payment Method button below populated table */
.woocommerce-account
.woocommerce-MyAccount-content
> table.woocommerce-MyAccount-paymentMethods
+ a.button[href*="add-payment-method"] {
    display: inline-block;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}

@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    > table.woocommerce-MyAccount-paymentMethods
    + a.button[href*="add-payment-method"] {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    > table.woocommerce-MyAccount-paymentMethods
    + a.button[href*="add-payment-method"] {
        font-size: 14px !important;
    }
}


/* ==========================================================
   POPULATED PAYMENT METHODS - MOBILE
   ========================================================== */

@media (max-width: 719px) {

    /* Hide desktop headings */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    thead {
        display: none !important;
    }

    /* Each saved payment method becomes a clean stacked block */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    tbody
    tr {
        display: block !important;
    }

    /* Stack Method / Expires / Actions */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    tbody
    td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    /* Method label */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    td.payment-method-method::before {
        content: "Method: ";
        float: left;
        font-weight: 700;
    }

    /* Expires label */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    td.payment-method-expires::before {
        content: "Expires: ";
        float: left;
        font-weight: 700;
    }

    /* Actions row - no blank WooCommerce label / rogue colon */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    td.payment-method-actions {
        text-align: left !important;
        padding: 8px 0 !important;
    }

    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    td.payment-method-actions::before {
        content: "" !important;
        display: none !important;
    }

    /* Align Delete with Add Payment Method */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods
    td.payment-method-actions
    .button {
        margin-left: 0 !important;
    }

    /* Tighten spacing before Add Payment Method */
    .woocommerce-account
    .woocommerce-MyAccount-paymentMethods {
        margin-bottom: 8px !important;
    }

    /* Keep Add Payment Method compact and on one line */
    .woocommerce-account
    .woocommerce-MyAccount-content
    > table.woocommerce-MyAccount-paymentMethods
    + a.button[href*="add-payment-method"] {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }
}


/* ==========================================================
   ADD PAYMENT METHOD FORM
   ========================================================== */

/* Add Payment Method submit button - desktop */
.woocommerce-account
.woocommerce-Payment
#place_order {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
    margin-top: 24px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}


/* Add Payment Method submit button - tablet */
@media (max-width: 1024px) {

    .woocommerce-account
    .woocommerce-Payment
    #place_order {
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
}


/* Add Payment Method submit button - mobile */
@media (max-width: 767px) {

    .woocommerce-account
    .woocommerce-Payment
    #place_order {
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================
   SUBSCRIPTION - CHANGE PAYMENT METHOD
   ========================================================== */


/* Change Payment Method - text framework */
.woocommerce
form#order_review
table.shop_table th,
.woocommerce
form#order_review
table.shop_table td,
.woocommerce
form#order_review
#payment label,
.woocommerce
form#order_review
#update_all_subscriptions_payment_method_field label,
.woocommerce-checkout
.woocommerce-info[role="status"] {
    font-size: 16px !important;
}


/* Change Payment Method - tablet text */
@media (max-width: 1024px) {

    .woocommerce
    form#order_review
    table.shop_table th,
    .woocommerce
    form#order_review
    table.shop_table td,
    .woocommerce
    form#order_review
    #payment label,
    .woocommerce
    form#order_review
    #update_all_subscriptions_payment_method_field label,
    .woocommerce-checkout
    .woocommerce-info[role="status"] {
        font-size: 15px !important;
    }
}


/* Change Payment Method - mobile text */
@media (max-width: 767px) {

    .woocommerce
    form#order_review
    table.shop_table th,
    .woocommerce
    form#order_review
    table.shop_table td,
    .woocommerce
    form#order_review
    #payment label,
    .woocommerce
    form#order_review
    #update_all_subscriptions_payment_method_field label,
    .woocommerce-checkout
    .woocommerce-info[role="status"] {
        font-size: 14px !important;
    }
}


/* Remove Change Payment Method notice background */
.woocommerce-checkout
.woocommerce-info[role="status"] {
    background: transparent !important;
}


/* Change Payment Method submit button */
.woocommerce
form#order_review
#place_order {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}


/* Change Payment Method button - tablet */
@media (max-width: 1024px) {

    .woocommerce
    form#order_review
    #place_order {
        font-size: 15px !important;
    }
}


/* Change Payment Method button - mobile */
@media (max-width: 767px) {

    .woocommerce
    form#order_review
    #place_order {
        font-size: 14px !important;
    }
}


/* ----------------------------------------------------------
   CHANGE PAYMENT METHOD - RESPONSIVE LAYOUT
   Desktop: 1350px+
   Stacked: 1349px and below
   ---------------------------------------------------------- */

@media (max-width: 1349px) {

    /* Product table */
    .woocommerce
    form#order_review
    table.shop_table {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Hide desktop Product / Quantity / Totals headings */
    .woocommerce
    form#order_review
    table.shop_table
    thead {
        display: none !important;
    }

    /* Product row */
    .woocommerce
    form#order_review
    table.shop_table
    tbody,
    .woocommerce
    form#order_review
    table.shop_table
    tbody
    tr {
        display: block !important;
        width: 100% !important;
    }

    /* Product cells */
    .woocommerce
    form#order_review
    table.shop_table
    tbody
    td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: right !important;
    }

    /* Product label */
    .woocommerce
    form#order_review
    table.shop_table
    tbody
    td.product-name::before {
        content: "Product: ";
        float: left;
        font-weight: 700;
        padding-right: 16px;
    }

    /* Quantity label */
    .woocommerce
    form#order_review
    table.shop_table
    tbody
    td.product-quantity::before {
        content: "Quantity: ";
        float: left;
        font-weight: 700;
        padding-right: 16px;
    }

    /* Total label */
    .woocommerce
    form#order_review
    table.shop_table
    tbody
    td.product-total::before {
        content: "Total: ";
        float: left;
        font-weight: 700;
        padding-right: 16px;
    }


    /* Totals / payment summary */
    .woocommerce
    form#order_review
    table.shop_table
    tfoot {
        display: block !important;
        width: 100% !important;
    }

    .woocommerce
    form#order_review
    table.shop_table
    tfoot
    tr {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .woocommerce
    form#order_review
    table.shop_table
    tfoot
    th {
        display: block !important;
        flex: 0 0 42%;
        box-sizing: border-box;
        text-align: left !important;
    }

    .woocommerce
    form#order_review
    table.shop_table
    tfoot
    td {
        display: block !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        box-sizing: border-box;
        text-align: right !important;
    }


    /* Saved payment methods */
    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods {
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-token,
    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-new {
        display: flex !important;
        align-items: flex-start;
        width: 100% !important;
        box-sizing: border-box;
    }

    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-token
    input,
    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-new
    input {
        flex: 0 0 auto;
        margin-top: 3px !important;
        margin-right: 10px !important;
    }

    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-token
    label,
    .woocommerce
    form#order_review
    #payment
    .woocommerce-SavedPaymentMethods-new
    label {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
    }


    /* Update all subscriptions checkbox */
    .woocommerce
    form#order_review
    #update_all_subscriptions_payment_method_field {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    .woocommerce
    form#order_review
    #update_all_subscriptions_payment_method_field
    label {
        line-height: 1.5 !important;
    }


    /* Change Payment Method button */
    .woocommerce
    form#order_review
    #place_order {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }
}


/* ----------------------------------------------------------
   11. ACCOUNT DETAILS
   ---------------------------------------------------------- */

/* Account Details section heading */
.woocommerce-account .woocommerce-EditAccountForm h3 {
    font-size: 28px;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-EditAccountForm h3 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-EditAccountForm h3 {
        font-size: 22px;
    }
}

/* Save Changes button */
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
    clear: both;
    padding-top: 24px;
}

.woocommerce-account button[name="save_account_details"] {
    display: block;
    width: 100%;
    text-transform: capitalize;
}

/* Password label sizing */
.woocommerce-account .woocommerce-EditAccountForm fieldset label {
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-EditAccountForm fieldset label {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-EditAccountForm fieldset label {
        font-size: 10px;
    }
}

/* Subscription billing contact checkbox text */
.woocommerce-account #update_all_subscriptions_billing_contact_field label.checkbox {
    font-size: 16px;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .woocommerce-account #update_all_subscriptions_billing_contact_field label.checkbox {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .woocommerce-account #update_all_subscriptions_billing_contact_field label.checkbox {
        font-size: 14px;
    }
}

/* Hide Display Name helper text */
.woocommerce-account .woocommerce-EditAccountForm #account_display_name + span {
    display: none;
}

/* ----------------------------------------------------------------------
   MAILPOET - POPUP STYLING
   Removes the unwanted glow/shadow around MailPoet popups.
   ---------------------------------------------------------------------- */

.mailpoet_form_popup,
.mailpoet_form_popup::before,
.mailpoet_form_popup::after {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* ----------------------------------------------------------------------
   MAILPOET - FORM INPUT ALIGNMENT
   Centres MailPoet text fields and their placeholder text.
   ---------------------------------------------------------------------- */

.mailpoet_text {
    text-align: center !important;
}

.mailpoet_text::placeholder {
    text-align: center !important;
}

/* ----------------------------------------------------------------------
   MAILPOET - FORM VALIDATION SPACING
   Adds breathing room around inline validation and CAPTCHA error messages.
   ---------------------------------------------------------------------- */

/* Required / invalid email errors beneath the email field */
.mailpoet_form .parsley-errors-list.filled {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    padding-left: 0 !important;
}

/* MailPoet validation error shown before the CAPTCHA */
.mailpoet_form .mailpoet_validate_error:not(:empty) {
    margin-bottom: 12px !important;
}

/* ----------------------------------------------------------------------
   MAILPOET - CAPTCHA LAYOUT
   Refines MailPoet's native CAPTCHA layout without replacing its built-in
   structure. Keeps the native 300px container, CAPTCHA controls, field
   sizing and submit-button design while improving spacing and alignment.
   ---------------------------------------------------------------------- */

/* Keep the CAPTCHA content centred and give the section breathing room. */
.mailpoet_form_captcha_active .mailpoet_captcha_container {
    text-align: center;
    margin-bottom: 20px;
}

/* Keep the CAPTCHA image centred with clear separation below it. */
.mailpoet_form_captcha_active .mailpoet_captcha_image_wrapper {
    margin-bottom: 12px;
    text-align: center;
}

/* Centre the CAPTCHA instruction and separate it from the input field. */
.mailpoet_form_captcha_active .mailpoet_captcha_label {
    display: block;
    margin-top: 12px;
    text-align: center;
}

.mailpoet_form_captcha_active .mailpoet_captcha_label .mailpoet_text_label {
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: center;
}

/* Preserve MailPoet's 220px field width while centring the field itself. */
.mailpoet_form_captcha_active .mailpoet_captcha_label .mailpoet_text {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
}

/* Preserve MailPoet's native submit-button styling and only control spacing. */
.mailpoet_form_captcha_active .mailpoet_captcha_submit {
    margin-top: 15px;
}

/* ----------------------------------------------------------------------
   MAILPOET - SUBSCRIPTION CONFIRMATION MESSAGE
   Centres the confirmation message and improves its mobile wrapping.
   ---------------------------------------------------------------------- */

#post-1366 .entry-content > p {
    text-align: center;
}

@media screen and (max-width: 515px) {
    #post-1366 .entry-content > p {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
        font-size: 14px;
        line-height: 1.5;
    }
}

/* ----------------------------------------------------------------------
   MAILPOET - SUBSCRIPTION CONFIRMATION TITLE - DEPLOYMENT PLACEHOLDER

   PLACEHOLDER RULE - MUST BE UPDATED ON CLIENT DEPLOYMENT.

   The normal MailPoet confirmation title uses the site's name, but the
   responsive mobile title below replaces that heading with fixed CSS text.

   ON DEPLOYMENT:
   1. Replace "[GYM NAME]" with the client's actual gym/site name.
   2. Confirm that postid-1366 matches the client's MailPoet confirmation page.
   3. Test the confirmation title on desktop, tablet and a real mobile device.
   ---------------------------------------------------------------------- */

/* Desktop */
body.postid-1366 .mailpoet_page-title h1 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    text-align: center;
}

/* Tablet and mobile - controlled two-line title */
@media (max-width: 767px) {

    body.postid-1366 .mailpoet_page-title h1 {
        font-size: 0 !important;
        line-height: 1 !important;
        text-align: center;
    }

    body.postid-1366 .mailpoet_page-title h1::before {
        content: "YOU HAVE SUBSCRIBED TO";
        display: block;
        white-space: nowrap;
        font-size: 18px;
        line-height: 1.15;
    }

    body.postid-1366 .mailpoet_page-title h1::after {
        content: "[GYM NAME]";
        display: block;
        white-space: nowrap;
        font-size: 18px;
        line-height: 1.15;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {

    body.postid-1366 .mailpoet_page-title h1::before,
    body.postid-1366 .mailpoet_page-title h1::after {
        font-size: 16px;
    }
}

/* ----------------------------------------------------------------------
   MAILPOET - UNSUBSCRIBE PAGE
   Centres the unsubscribe confirmation text and link.
   ---------------------------------------------------------------------- */

.mailpoet_confirm_unsubscribe {
    text-align: center !important;
}

.mailpoet_confirm_unsubscribe a {
    display: inline-block;
    margin-top: 8px;
}

/* ----------------------------------------------------------------------
   MAILPOET - MANAGE SUBSCRIPTION PAGE
   Centres and refines the MailPoet subscription-management form,
   standardises field layout and keeps saved values visible.
   ---------------------------------------------------------------------- */

/* Centre and constrain the complete management form. */
.mailpoet-manage-subscription {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Give each form row consistent vertical spacing. */
.mailpoet-manage-subscription > .mailpoet_paragraph {
    margin-top: 0;
    margin-bottom: 18px;
}

/* Give the email information block extra separation from the fields. */
.mailpoet-manage-subscription > p.mailpoet_paragraph {
    margin-bottom: 28px;
}

/* Keep the email-change explanation compact and readable. */
.mailpoet-manage-subscription .mailpoet-change-email-info {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}

/* Keep labels close to their corresponding fields. */
.mailpoet-manage-subscription .mailpoet_text_label,
.mailpoet-manage-subscription .mailpoet_select_label {
    display: block;
    margin-bottom: 6px;
    padding-right: 0;
}

/* Standardise text fields and Status dropdown. */
.mailpoet-manage-subscription .mailpoet_text,
.mailpoet-manage-subscription .mailpoet_select {
    width: 100%;
    max-width: none;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    background-color: #ffffff;
    color: #212121 !important;
    -webkit-text-fill-color: #212121 !important;
    text-align: left !important;
    opacity: 1;
}

/* Keep saved values visible when fields receive focus. */
.mailpoet-manage-subscription .mailpoet_text:focus,
.mailpoet-manage-subscription .mailpoet_select:focus {
    color: #212121 !important;
    -webkit-text-fill-color: #212121 !important;
    text-align: left !important;
}

/* Keep dropdown options readable. */
.mailpoet-manage-subscription .mailpoet_select option {
    color: #212121;
    background-color: #ffffff;
}

/* Tidy the mailing-list section. */
.mailpoet-manage-subscription .mailpoet-manage-subscription-list-fields {
    margin-top: 4px;
    margin-bottom: 0;
}

.mailpoet-manage-subscription .mailpoet-manage-subscription-list-fields fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.mailpoet-manage-subscription .mailpoet_segment_label {
    display: block;
    margin-bottom: 8px;
}

.mailpoet-manage-subscription .mailpoet_checkbox_label {
    display: flex;
    align-items: center;
    padding-right: 0;
}

.mailpoet-manage-subscription .mailpoet_checkbox {
    margin: 0 8px 0 0;
    flex: 0 0 auto;
}

/* Separate the Save button from the mailing-list options. */
.mailpoet-manage-subscription > .mailpoet_paragraph:last-child {
    margin-top: 18px;
    margin-bottom: 0;
}

/* Match Save button typography to the site heading font. */
.mailpoet-manage-subscription .mailpoet_submit {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 1024px) {
    .mailpoet-manage-subscription {
        width: calc(100% - 40px);
    }

    .mailpoet-manage-subscription .mailpoet-change-email-info {
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mailpoet-manage-subscription {
        width: 100%;
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
    }

    .mailpoet-manage-subscription > .mailpoet_paragraph {
        margin-bottom: 16px;
    }

    .mailpoet-manage-subscription > p.mailpoet_paragraph {
        margin-bottom: 24px;
    }

    .mailpoet-manage-subscription .mailpoet_submit {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------
   WOOCOMMERCE - PRODUCT REVIEW SUBMIT BUTTON
   Matches the product review submit button to the site's standard
   Dela Gothic One, uppercase button typography.
   ---------------------------------------------------------------------- */

.woocommerce #review_form #respond .form-submit input#submit {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: #ffffff;
}

/* ----------------------------------------------------------------------
   WOOCOMMERCE - PRODUCT REVIEW MESSAGE TEXT
   Keeps review status / eligibility messages at 15px on all devices.
   ---------------------------------------------------------------------- */

.woocommerce #reviews .woocommerce-noreviews,
.woocommerce #reviews .woocommerce-verification-required {
    font-size: 15px !important;
}

/* =========================================================
   WOOCOMMERCE SINGLE PRODUCT - VARIATIONS
   ========================================================= */

/* WooCommerce Single Product - Variation Layout
   Keeps variation labels above their dropdowns at all widths
   so the layout does not break at intermediate screen sizes. */
.woocommerce div.product form.cart .variations tr {
    display: block !important;
}

.woocommerce div.product form.cart .variations td.label,
.woocommerce div.product form.cart .variations td.value {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.woocommerce div.product form.cart .variations td.label {
    margin-bottom: 8px !important;
}

.woocommerce div.product form.cart .variations select {
    width: 100% !important;
    max-width: 100% !important;
}


/* Variation label typography - desktop */
.woocommerce div.product form.cart .variations label {
    font-size: 16px !important;
    line-height: 1.3 !important;
}


/* Variation label typography - tablet */
@media (max-width: 1024px) {
    .woocommerce div.product form.cart .variations label {
        font-size: 15px !important;
    }
}


/* Variation label typography - mobile */
@media (max-width: 767px) {
    .woocommerce div.product form.cart .variations label {
        font-size: 14px !important;
    }
}

/* ----------------------------------------------------------------------
   WOOCOMMERCE - VARIABLE PRODUCT DROPDOWN TEXT
   Keeps the variation dropdown placeholder / option text readable
   against the light select-field background.
   ---------------------------------------------------------------------- */

.woocommerce div.product form.cart .variations select {
    color: #000000;
}

/* =========================================================
   WOOCOMMERCE SINGLE PRODUCT - UPSELLS
   ========================================================= */

/* WooCommerce Single Product - Upsell Heading
   Keeps the recommendation heading aligned with the main
   content flow across desktop and tablet. */
.single-product
.up-sells
> h2 {
    text-align: left;
    font-size: 24px !important;
    line-height: 1.2 !important;
}


/* Upsell heading - tablet */
@media (max-width: 1024px) {
    .single-product
    .up-sells
    > h2 {
        font-size: 22px !important;
    }
}


/* Upsell heading - stacked mobile product layout
   Centres the recommendation heading only while WooCommerce
   is using its single-column mobile product layout. */
@media (max-width: 719px) {
    .single-product
    .up-sells
    > h2 {
        text-align: center;
        font-size: 20px !important;
        margin-bottom: 24px !important;
    }
}


/* WooCommerce Single Product - Upsell Buttons
   Keeps recommendation buttons compact instead of stretching
   to the full width of narrow product cards. */
.single-product
.up-sells
.product-action-wrap
.button {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}


/* WooCommerce Single Product - Stacked Upsell Images
   Keeps recommendation images compact while WooCommerce is
   using its single-column mobile product layout. */
@media (max-width: 719px) {

    .single-product
    .up-sells
    ul.products
    li.product
    img {
        width: calc(100% - 48px) !important;
        max-width: 250px !important;
        height: auto !important;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* WooCommerce Single Product - Stacked Upsell Product Spacing
   Removes the Kadence grid gap below 720px and keeps a compact
   separation between recommendation cards. */
@media (max-width: 719px) {

    .single-product
    .up-sells
    ul.products {
        display: block !important;
    }

    .single-product
    .up-sells
    ul.products
    li.product {
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .single-product
    .up-sells
    ul.products
    li.product:last-child {
        margin-bottom: 0 !important;
    }
}

/* ----------------------------------------------------------------------
   SINGLE PRODUCT - DESKTOP UPSELL BUTTON FIT
   Slightly tightens Add to Basket buttons in the desktop upsell grid
   so uppercase text fits cleanly without affecting archives or mobile.
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {
    .single-product .up-sells ul.products li.product .add_to_cart_button {
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ----------------------------------------------------------------------
   SINGLE PRODUCT - PURCHASE ACTIONS
   Keeps Quantity + Add to Basket on the first row
   and aligns Buy Now directly beneath Add to Basket
   at all screen sizes.
   ---------------------------------------------------------------------- */

.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Remove WooCommerce's first clearfix item from the flex layout */
.single-product form.cart::before {
    display: none !important;
    content: none !important;
}

/* Quantity */
.single-product form.cart .quantity {
    flex: 0 0 auto;
    order: 1;
    margin: 0 8px 0 0 !important;
}

/* Quantity input text */
.single-product form.cart .quantity .qty {
    color: #000000 !important;
}

/* Both purchase buttons */
.single-product form.cart .single_add_to_cart_button {
    float: none !important;
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

/* Add to Basket */
.single-product form.cart
.single_add_to_cart_button:not(.bm-buy-now) {
    order: 2;
}

/* Force a new row before Buy Now */
.single-product form.cart::after {
    display: block !important;
    content: "" !important;
    flex: 0 0 100%;
    height: 0;
    order: 3;
}

/* Buy Now */
.single-product form.cart .bm-buy-now {
    order: 4;
    margin: 8px 0 0 66px !important;
}

/* ----------------------------------------------------------------------
   PRODUCT LOOPS - ADD TO BASKET BUTTON TEXT
   Displays Add to Basket buttons in uppercase across
   product archives, upsells and related-product grids.
   ---------------------------------------------------------------------- */

.woocommerce ul.products li.product .add_to_cart_button {
    text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------
   PRODUCT LOOPS - READ MORE BUTTON TEXT
   Displays WooCommerce Read More product buttons in uppercase.
   ---------------------------------------------------------------------- */

.woocommerce ul.products li.product a.button[aria-label^="Read more about"] {
    text-transform: uppercase !important;
}

/* ----------------------------------------------------------------------
   PRODUCT ARCHIVE - PRODUCT TITLE TEXT
   Responsive product title sizing.
   Desktop: 16px / Tablet: 15px / Mobile: 14px.
   ---------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    font-size: 16px !important;
}

@media screen and (max-width: 1024px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title a {
        font-size: 15px !important;
    }
}

@media screen and (max-width: 719px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title a {
        font-size: 14px !important;
    }
}

/* =========================================================
   WOOCOMMERCE EMPTY BASKET - HEADINGS & SPACING
   ========================================================= */

/* Standardises the centred headings used for the empty-basket
   message and the New In Store recommendations section, sized
   to match the Basket cross-sell heading framework.
   Desktop: 22px / Tablet: 20px / Mobile: 18px. */
.wp-block-woocommerce-empty-cart-block
.wp-block-heading.has-text-align-center {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-top: 0;
    margin-bottom: 24px;
}


/* Gives the dotted separator even breathing room between the
   empty-basket message and the New In Store recommendations. */
.wp-block-woocommerce-empty-cart-block
.wp-block-separator {
    margin-top: 32px;
    margin-bottom: 32px;
}


/* Tablet */
@media (max-width: 1024px) {
    .wp-block-woocommerce-empty-cart-block
    .wp-block-heading.has-text-align-center {
        font-size: 20px !important;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .wp-block-woocommerce-empty-cart-block
    .wp-block-heading.has-text-align-center {
        font-size: 18px !important;
        margin-bottom: 20px;
    }

    /* Tightens the separator spacing for smaller screens. */
    .wp-block-woocommerce-empty-cart-block
    .wp-block-separator {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* Gives the empty-basket message a more balanced
       two-line wrap at the larger heading size. */
    .wp-block-woocommerce-empty-cart-block
    .wp-block-heading.has-text-align-center:first-of-type {
        max-width: 220px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   WOOCOMMERCE EMPTY BASKET - PRODUCT TITLES
   ========================================================= */


/* Recommended Product Title Typography
   Uses the framework heading font and keeps recommendation
   titles compact beneath the Empty Basket recommendations. */
.wp-block-woocommerce-empty-cart-block
.wc-block-grid__product-title {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
}


/* Tablet */
@media (max-width: 1024px) {
    .wp-block-woocommerce-empty-cart-block
    .wc-block-grid__product-title {
        font-size: 17px !important;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .wp-block-woocommerce-empty-cart-block
    .wc-block-grid__product-title {
        font-size: 16px !important;
    }
}

/* =========================================================
   WOOCOMMERCE EMPTY BASKET - PRODUCT CARD ALIGNMENT
   ========================================================= */

/* Keeps recommendation cards equal-height so CTA buttons
   align across each product row regardless of title length. */
.wp-block-woocommerce-empty-cart-block
.wc-block-grid__product {
    display: flex !important;
    flex-direction: column !important;
}

.wp-block-woocommerce-empty-cart-block
.wc-block-grid__product
.product-details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.wp-block-woocommerce-empty-cart-block
.wc-block-grid__product-add-to-cart {
    margin-top: auto !important;
}

/* =========================================================
   WOOCOMMERCE EMPTY BASKET - PRODUCT BUTTONS
   ========================================================= */

/* Matches Empty Basket recommendation CTAs to the
   product catalogue button typography and sizing. */
.wp-block-woocommerce-empty-cart-block
.wc-block-grid__product-add-to-cart
.wp-block-button__link {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    padding: 6.4px 16px !important;
}

/* ----------------------------------------------------------------------
   EMPTY BASKET - RECOMMENDED PRODUCT BUTTONS
   Displays Add to Basket buttons in uppercase in the
   recommended-products grid shown on the Basket page.
   ---------------------------------------------------------------------- */

.woocommerce-cart
.wc-block-grid__product-add-to-cart
.add_to_cart_button {
    text-transform: uppercase !important;
}

/* =========================================================
   WOOCOMMERCE BASKET - LAYOUT & CHECKOUT BUTTON
   ========================================================= */


/* ---------------------------------------------------------
   Basket Responsive Layout

   Moves the Basket into its stacked layout slightly earlier
   so the two-column layout does not become cramped immediately
   before WooCommerce's native mobile breakpoint.
   --------------------------------------------------------- */

@media (max-width: 830px) {

    .woocommerce-cart
    .wc-block-cart {
        display: block !important;
    }

    .woocommerce-cart
    .wc-block-cart
    .wc-block-cart__main {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .woocommerce-cart
    .wc-block-cart
    .wc-block-cart__sidebar {
        width: 100% !important;
    }
}


/* ---------------------------------------------------------
   Checkout Button

   Matches the Basket CTA to the framework pill shape and
   heading typography.
   --------------------------------------------------------- */

.woocommerce-cart
.wc-block-cart__submit-button {
    border-radius: 120px !important;
}

.woocommerce-cart
.wc-block-cart__submit-button
.wc-block-components-button__text {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}


/* Wider Two-Column Basket */
@media (min-width: 929px) and (max-width: 1126px) {

    .woocommerce-cart
    .wc-block-cart__submit-button
    .wc-block-components-button__text {
        font-size: 14px !important;
    }
}


/* Narrow Two-Column Basket
   This is the final range before the Basket stacks. */
@media (min-width: 831px) and (max-width: 928px) {

    .woocommerce-cart
    .wc-block-cart__submit-button
    .wc-block-components-button__text {
        font-size: 12px !important;
    }
}


/* Stacked Basket
   Once stacked, the CTA regains horizontal space. */
@media (max-width: 830px) {

    .woocommerce-cart
    .wc-block-cart__submit-button
    .wc-block-components-button__text {
        font-size: 14px !important;
    }
}

/* =========================================================
   WOOCOMMERCE BASKET - COUPON BUTTON
   ========================================================= */

/* Matches the Basket coupon CTA to the framework pill shape
   and heading typography without changing its existing colour,
   gradient, padding or layout. */
.wp-block-woocommerce-cart
.wc-block-components-totals-coupon__button {
    border-radius: 120px !important;
}

.wp-block-woocommerce-cart
.wc-block-components-totals-coupon__button
.wc-block-components-button__text {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
}

/* =========================================================
   WOOCOMMERCE BASKET - HEADERS, ITEM DETAILS & TOTAL DUE
   ========================================================= */


/* ---------------------------------------------------------
   Basket Section Headers

   Standardises PRODUCT, TOTAL and BASKET TOTALS to the same
   typography while retaining their natural alignment.
   --------------------------------------------------------- */

.wc-block-cart-items__header-image > span,
.wc-block-cart-items__header-total > span,
.wc-block-cart__totals-title {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   Total Due Today

   Keeps the primary Basket total prominent without allowing
   it to dominate the order summary.
   --------------------------------------------------------- */

.wp-block-woocommerce-cart
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label,
.wp-block-woocommerce-cart
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value
.wc-block-formatted-money-amount {
    font-size: 18px !important;
    line-height: 1.25 !important;
}


/* Tablet */
@media (max-width: 1024px) {

    .wp-block-woocommerce-cart
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__label,
    .wp-block-woocommerce-cart
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__value
    .wc-block-formatted-money-amount {
        font-size: 17px !important;
    }
}

/* ---------------------------------------------------------
   Booking Appointment Details

   Places the Appointment label above the Bookly booking
   details without changing the Date, Time or Service layout.
   --------------------------------------------------------- */

.wc-block-cart
.wc-block-components-product-details__appointment
.wc-block-components-product-details__name,
.wc-block-cart
.wc-block-components-product-details__appointment
.wc-block-components-product-details__value {
	display: block;
}

/* ---------------------------------------------------------
   Stacked Basket Item Details

   Removes promotional copy that becomes cluttered in the
   stacked Basket and keeps renewal details compact on one line.
   --------------------------------------------------------- */

@media (max-width: 830px) {

    .wp-block-woocommerce-cart
    .wc-block-components-product-metadata__description {
        display: none !important;
    }

    .wp-block-woocommerce-cart
    .wc-block-components-product-details__renews {
        font-size: 12px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    .wp-block-woocommerce-cart
    .wc-block-components-product-details__renews
    .wc-block-components-product-details__name,
    .wp-block-woocommerce-cart
    .wc-block-components-product-details__renews
    .wc-block-components-product-details__value {
        display: inline !important;
    }
}


/* Mobile */
@media (max-width: 767px) {

    .wp-block-woocommerce-cart
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__label,
    .wp-block-woocommerce-cart
    .wc-block-components-totals-footer-item
    .wc-block-components-totals-item__value
    .wc-block-formatted-money-amount {
        font-size: 16px !important;
    }
}

/* =========================================================
   WOOCOMMERCE BASKET - CROSS-SELLS
   ========================================================= */


/* Cross-Sell Heading */
.wp-block-woocommerce-cart-cross-sells-block
> .wp-block-heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}


/* Centres the cross-sell product card(s). */
.wp-block-woocommerce-cart-cross-sells-block
> div {
    text-align: center !important;
}


/* Cross-Sell Product Title */
.wp-block-woocommerce-cart-cross-sells-block
.wc-block-components-product-name {
    font-size: 18px !important;
    line-height: 1.25 !important;
}


/* Keeps the cross-sell Add to basket CTA on one line. */
.wp-block-woocommerce-cart-cross-sells-block
.wc-block-components-product-button__button {
    white-space: nowrap !important;
}


/* Tablet */
@media (max-width: 1024px) {
    .wp-block-woocommerce-cart-cross-sells-block
    > .wp-block-heading {
        font-size: 20px !important;
    }

    .wp-block-woocommerce-cart-cross-sells-block
    .wc-block-components-product-name {
        font-size: 17px !important;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .wp-block-woocommerce-cart-cross-sells-block
    > .wp-block-heading {
        font-size: 18px !important;
    }

    .wp-block-woocommerce-cart-cross-sells-block
    .wc-block-components-product-name {
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------------------------
 TESTING - NOT YET FINALISED OR MIGRATED TO TEMPLATE
------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   CHECKOUT - SAVED PAYMENT METHOD LABELS
   Keeps saved-card and "Use a new payment method" labels readable
   against the dark checkout background.
   Desktop: 14px / Tablet: 13px / Mobile: 12px.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout
#payment
.woocommerce-SavedPaymentMethods
label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    body.woocommerce-checkout
    #payment
    .woocommerce-SavedPaymentMethods
    label {
        font-size: 13px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    body.woocommerce-checkout
    #payment
    .woocommerce-SavedPaymentMethods
    label {
        font-size: 12px !important;
    }
}

/* ----------------------------------------------------------------------
   CHECKOUT - SHIPPING METHOD LABELS
   Styles the selectable shipping-method labels in the checkout order
   summary, including Royal Mail and Local Pickup.
   Desktop: 15px / Tablet: 14px / Mobile: 13px.
   ---------------------------------------------------------------------- */

.woocommerce-checkout
.woocommerce-checkout-review-order-table
ul#shipping_method
li
label {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    .woocommerce-checkout
    .woocommerce-checkout-review-order-table
    ul#shipping_method
    li
    label {
        font-size: 14px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .woocommerce-checkout
    .woocommerce-checkout-review-order-table
    ul#shipping_method
    li
    label {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   BOOKLY
   Temporary holding section for Bookly-specific and Bookly/WooCommerce
   integration styling while the booking system is being developed.
   Reorganise into final component sections once Bookly is frozen.
   ========================================================================== */

/* ----------------------------------------------------------------------
   BOOKLY / WOOCOMMERCE - BOOKING ERROR NOTICE
   Removes the default WooCommerce Blocks error-notice background and
   keeps the notice text and dismiss icon white on the dark basket.
   ---------------------------------------------------------------------- */

body.woocommerce-cart
.wc-block-components-notice-banner.is-error {
    background: transparent !important;
    color: #ffffff !important;
}

body.woocommerce-cart
.wc-block-components-notice-banner.is-error
.wc-block-components-notice-banner__content {
    color: #ffffff !important;
}

body.woocommerce-cart
.wc-block-components-notice-banner.is-error
.wc-block-components-notice-banner__dismiss {
    color: #ffffff !important;
}

body.woocommerce-cart
.wc-block-components-notice-banner.is-error
.wc-block-components-notice-banner__dismiss svg,
body.woocommerce-cart
.wc-block-components-notice-banner.is-error
.wc-block-components-notice-banner__dismiss svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================================
   BOOKLY - SERVICE STEP FIELD STYLING
   ========================================================== */

/* ----------------------------------------------------------
   1. AVAILABLE FROM - CALENDAR DATE TEXT

   Keeps the displayed date text black on its white
   background, including normal, hover and focused states.
   Does not change the calendar popup appearance.
   ---------------------------------------------------------- */

.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from,
.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from:hover,
.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ----------------------------------------------------------
   2. START / FINISH - TIME DROPDOWN ARROWS

   Increases the dropdown width and right-hand padding
   to prevent the arrow icons from covering time values.
   Preserves the existing dark styling and white text.
   ---------------------------------------------------------- */

.bookly-form
.bookly-service-step
.bookly-time-range
select.bookly-js-select-time-from,
.bookly-form
.bookly-service-step
.bookly-time-range
select.bookly-js-select-time-to {
    min-width: 85px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   3. BOOKLY - MOBILE SERVICE STEP DATE AND TIME LAYOUT

   Mobile: 650px and below.

   Available from: full width.
   Weekdays: evenly distributed.
   Start / Finish: two equal-width columns.
   Navigation: preserve separate BACK and NEXT buttons.

   Does not affect layouts above 650px.
   ---------------------------------------------------------- */

@media screen and (max-width: 650px) {

    /* Mobile step container */

    .bookly-form
    .bookly-service-step
    .bookly-js-mobile-step-2 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Main field container - exclude navigation */

    .bookly-form
    .bookly-service-step
    .bookly-js-mobile-step-2
    > .bookly-box:not(.bookly-nav-steps) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove floating layout from field wrapper only */

    .bookly-form
    .bookly-service-step
    .bookly-js-mobile-step-2
    > .bookly-box:not(.bookly-nav-steps)
    > .bookly-left {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Full-width date, weekdays and time sections */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-available-date,
    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-week-days,
    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        box-sizing: border-box !important;
    }

    /* Available from - full-width date input */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-available-date
    .bookly-form-group,
    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-available-date
    input.bookly-js-date-from {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Weekdays - evenly distributed */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-week-days {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-week-days > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /* Start and Finish - equal-width columns */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range
    > .bookly-form-group {
        flex: 0 0 calc(50% - 6px) !important;
        float: none !important;
        clear: none !important;
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Allow inner time-field wrappers to expand */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range
    > .bookly-form-group > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Start and Finish dropdowns - full column width */

    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range
    select.bookly-js-select-time-from,
    .bookly-form
    .bookly-js-mobile-step-2
    .bookly-js-time-range
    select.bookly-js-select-time-to {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 28px !important;
        box-sizing: border-box !important;
    }

    /* Navigation - restore normal BACK button width */

    .bookly-form
    .bookly-service-step
    .bookly-js-mobile-step-2
    .bookly-nav-steps
    > button.bookly-js-mobile-prev-step {
        display: block !important;
        float: left !important;
        clear: none !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   SECTION 4 — "Available from" calendar popup: dark theme
   Scope: .bookly-js-available-date only, so no other
   datepickers are affected.
   Bookly's utilities are ".bookly-css-root .bookly\:… !important"
   (specificity 0,2,0), so every rule here is !important at
   0,3,0 or higher.
   The green hover and selected backgrounds are left to Bookly,
   so they keep following Bookly's own accent colour setting.
   ========================================================== */

/* 4.1 Popup surfaces */
.bookly-js-available-date .bookly-js-datepicker-container > .bookly-js-datepicker-calendar,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-panel-mark {
    background-color: #121212 !important;
}

/* 4.2 Panel border and divider lines: all use the same silver as
   the text boxes (Bookly's own silver). The dividers are the line
   under the month heading and the line under the weekday row. */
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-panel-mark,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-controls-mark,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-dates-mark > div:first-child {
    border-color: silver !important;
}

/* 4.3 Enabled navigation arrows: accent green (Bookly hover still applies) */
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:not(:hover),
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:not(:hover) {
    color: #6AC269 !important;
}

/* 4.4 Month/year heading (Bookly hover still applies) */
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:not(:hover) {
    color: #f2f2f2 !important;
}

/* 4.5 Weekday labels: white, including on hover (Bookly's hover would
   otherwise darken them) */
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-dates-mark > div:first-child > div {
    color: #ffffff !important;
}

/* 4.6 Disabled dates and disabled arrow: clearly inactive, still readable.
   Bookly's pointer-events: none is untouched, so they stay unclickable. */
.bookly-js-available-date .bookly-js-datepicker-calendar [disabled="true"] {
    background-color: transparent !important;
    color: #7a7a7a !important;
    opacity: 1 !important;
}

/* 4.7 Keyboard focus ring (visible on dark and on green cells) */
.bookly-js-available-date .bookly-js-datepicker-calendar [role="button"]:focus-visible {
    outline: 2px solid #f2f2f2 !important;
    outline-offset: -2px;
}

/* 4.8 Everything clickable in the popup is white at rest: dates
   (this month and the neighbouring months') and the month and year
   choices, which Bookly colours green. The arrows and the month/year
   heading are left out (their classes contain "button-mark") and keep
   their own colours from 4.3 and 4.4. Unavailable items stay grey from
   4.6. Hovered and selected items are left out, since 4.10 gives those
   dark text on the green. */
.bookly-js-available-date .bookly-js-datepicker-calendar [role="button"]:not([disabled="true"]):not(:hover):not([class~="bg-bookly"]):not([class*="button-mark"]) {
    color: #ffffff !important;
}

/* 4.9 Dates from the neighbouring months (Bookly's text-slate-400
   class): a step down from white, a step up from the grey of the
   unavailable dates in 4.6 (about 48% white). To make them closer
   to white, raise the 0.65; to make them closer to grey, lower it. */
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-dates-mark [role="button"][class~="bookly:text-slate-400"]:not([disabled="true"]):not(:hover):not([class~="bg-bookly"]) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 4.10 Text on the green: dark, matching the dark text on the buttons
   in Section 12 (CLIENT COLOUR, the site background). Covers anything
   hovered (dates, month and year choices, the arrows and the month/year
   heading) and the selected date or month (Bookly gives the selected
   cell its green fill with the bg-bookly class). */
.bookly-js-available-date .bookly-js-datepicker-calendar [role="button"][disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar [role="button"][class~="bg-bookly"],
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:hover {
    color: #121212 !important;
}

/* 4.11 Hovered items: the same solid green as the selected date.
   The accent green is painted as a solid layer (a one-colour
   gradient, so it keeps following Bookly's accent setting) and the
   opacity is set back to full, so a see-through or dimmed hover
   can't show through. */
.bookly-js-available-date .bookly-js-datepicker-calendar [role="button"][disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:hover,
.bookly-js-available-date .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:hover {
    background-image: linear-gradient(var(--bookly-main-color), var(--bookly-main-color)) !important;
    opacity: 1 !important;
}

/* ==========================================================
   SECTION 5 — Bookly Repeat Step Styling & Responsive Fixes
   Scope: .bookly-repeat-step only, so the Service, Time and
   Details steps are untouched.
   Mobile rules use Bookly's own breakpoint (max-width: 650px).
   ========================================================== */

/* 5.1 Labels (Repeat / Every / Until): white, spaced from inputs.
   Bookly sets the green with its own !important rule, so this one is
   !important too, at a higher specificity (0,4,0).
   Bookly already makes these labels bold.
   padding-right separates each label from its input where they
   sit side by side (desktop); width is unchanged (border-box). */
.bookly-form .bookly-repeat-step .bookly-js-repeat-variants-container .bookly-col-label {
    color: #ffffff !important;
    padding-right: 8px;
}

/* 5.2 Every and Until boxes: same pattern as the first page.
   At rest and on hover: transparent with white text, and Bookly's own
   silver outline (the border is not set here). When clicked into (the
   Until calendar opens): white with black text and a white border. */
.bookly-repeat-step input.bookly-js-repeat-daily-every,
.bookly-repeat-step input.bookly-js-repeat-daily-every:hover,
.bookly-repeat-step .bookly-js-repeat-until-wrap input,
.bookly-repeat-step .bookly-js-repeat-until-wrap input:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.bookly-repeat-step input.bookly-js-repeat-daily-every:focus,
.bookly-repeat-step .bookly-js-repeat-until-wrap input:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

@media screen and (max-width: 650px) {

    /* 5.3 Labels stack above their inputs on mobile: vertical spacing */
    .bookly-form .bookly-repeat-step .bookly-js-repeat-variants-container .bookly-col-label {
        margin-bottom: 6px;
    }

    /* 5.4 Keep "day(s)" visible, beside the Every input.
       Bookly hides .bookly-visible-md with display:none !important
       at this width. The :not() check means that when Bookly's script
       hides the daily fields (Weekly / Monthly selected), they stay hidden.
       Input column + unit column = exactly 100%, so no overflow. */
    .bookly-repeat-step .bookly-js-variant-daily.bookly-col-2 {
        width: calc(100% - 64px);
    }

    .bookly-repeat-step .bookly-js-variant-daily.bookly-visible-md:not([style*="display: none"]) {
        display: block !important;
        width: 64px;
        padding-left: 8px;
    }

    /* 5.5 View Schedule: separate it from the Until field.
       Only margin is added; Bookly's colour, size and type are untouched. */
    .bookly-form .bookly-repeat-step .bookly-get-schedule {
        margin-top: 12px;
    }
}

/* 5.6 Until calendar popup: same dark styling as Section 4.
   Section 4 is scoped to .bookly-js-available-date, so it doesn't
   reach this popup; these rules mirror it, scoped to the Repeat step.
   !important is required to beat Bookly's !important utilities.
   Keep this in step with Section 4. */

/* 5.6.1 Popup surfaces */
.bookly-repeat-step .bookly-js-datepicker-container > .bookly-js-datepicker-calendar,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-panel-mark {
    background-color: #121212 !important;
}

/* 5.6.2 Panel border and divider lines: Bookly's own silver, like
   the text boxes. */
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-panel-mark,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-controls-mark,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-dates-mark > div:first-child {
    border-color: silver !important;
}

/* 5.6.3 Enabled navigation arrows: accent green (hover is 5.6.10) */
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:not(:hover),
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:not(:hover) {
    color: #6AC269 !important;
}

/* 5.6.4 Month/year heading */
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:not(:hover) {
    color: #f2f2f2 !important;
}

/* 5.6.5 Weekday labels: white, including on hover */
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-dates-mark > div:first-child > div {
    color: #ffffff !important;
}

/* 5.6.6 Disabled dates and arrow: clearly inactive, still readable */
.bookly-repeat-step .bookly-js-datepicker-calendar [disabled="true"] {
    background-color: transparent !important;
    color: #7a7a7a !important;
    opacity: 1 !important;
}

/* 5.6.7 Keyboard focus ring */
.bookly-repeat-step .bookly-js-datepicker-calendar [role="button"]:focus-visible {
    outline: 2px solid #f2f2f2 !important;
    outline-offset: -2px;
}

/* 5.6.8 Everything clickable is white at rest: dates, and the month
   and year choices. The arrows and heading are left out (their classes
   contain "button-mark"). Unavailable, hovered and selected items are
   left out too. */
.bookly-repeat-step .bookly-js-datepicker-calendar [role="button"]:not([disabled="true"]):not(:hover):not([class~="bg-bookly"]):not([class*="button-mark"]) {
    color: #ffffff !important;
}

/* 5.6.9 Neighbouring-month dates: a step down from white */
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-dates-mark [role="button"][class~="bookly:text-slate-400"]:not([disabled="true"]):not(:hover):not([class~="bg-bookly"]) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 5.6.10 Dark text on the green: anything hovered (dates, month and
   year choices, arrows, heading) and the selected date (CLIENT COLOUR) */
.bookly-repeat-step .bookly-js-datepicker-calendar [role="button"][disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar [role="button"][class~="bg-bookly"],
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:hover {
    color: #121212 !important;
}

/* 5.6.11 Hovered items: the same solid green as the selected date */
.bookly-repeat-step .bookly-js-datepicker-calendar [role="button"][disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-left-button-mark[disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-right-button-mark[disabled="false"]:hover,
.bookly-repeat-step .bookly-js-datepicker-calendar .bookly-calendar-middle-button-mark:hover {
    background-image: linear-gradient(var(--bookly-main-color), var(--bookly-main-color)) !important;
    opacity: 1 !important;
}

/* 5.7 "Repeat this appointment" tick box: transparent inside, with the
   accent-coloured outline kept. Bookly draws the box as the icon inside
   the label and, when ticked, fills it with the accent colour plus a tick
   image. That fill and image are removed, and a tick is drawn in their
   place. The tick is painted in the accent colour (a one-colour layer cut
   to a tick shape), so it follows Bookly's accent setting. To make the tick
   bigger or smaller, change the 70% (both places). */
.bookly-form .bookly-repeat-step .bookly-checkbox-group > input[type="checkbox"] + label > i {
    position: relative;
    background-color: transparent !important;
    background-image: none !important;
}

.bookly-form .bookly-repeat-step .bookly-checkbox-group > input[type="checkbox"]:checked + label > i::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(var(--bookly-main-color), var(--bookly-main-color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 70% 70%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 70% 70%;
}

/* 5.8 View Schedule button: smaller. It fits its text with a modest
   padding. To go smaller still, lower the 14px and the 8px 24px. */
.bookly-form .bookly-repeat-step .bookly-get-schedule {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.bookly-form .bookly-repeat-step .bookly-get-schedule > span {
    font-size: inherit !important;
}

/* 5.9 Repeat dropdown (Daily / Weekly / Monthly): same as Section 16.
   Focused but closed goes back to its resting look; the white while the
   list is open is left as it is. The dropdowns in the schedule list
   below are left out. */
.bookly-repeat-step .bookly-js-repeat-variants-container select:focus:not(:open) {
    background-color: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* 5.10 Weekday tick boxes (Repeat: Weekly): evenly spread across the
   full width on mobile (650px and below), like the first page. Bookly
   floats the group left so it shrinks to fit; this makes it full width
   and shares the width equally between the five days. Above 650px
   nothing changes. */
@media screen and (max-width: 650px) {

    .bookly-form .bookly-repeat-step .bookly-js-week-days {
        display: flex !important;
        float: none !important;
        clear: both !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .bookly-form .bookly-repeat-step .bookly-js-week-days > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   SECTION 6 — Bookly Details Step Input Text Styling
   Changes text colour only on the five identified fields,
   plus layout and text-colour fixes for the phone dropdown.
   Sections 1–5 remain untouched.
   ========================================================== */

/* 6.1 Details fields at rest and on hover: transparent with white text,
   so the dark page shows through. The border is not set here, so it
   stays Bookly's own silver, like the dropdowns and text boxes on the
   first page. */
.bookly-form .bookly-details-step input.bookly-js-first-name,
.bookly-form .bookly-details-step input.bookly-js-first-name:hover,
.bookly-form .bookly-details-step input.bookly-js-last-name,
.bookly-form .bookly-details-step input.bookly-js-last-name:hover,
.bookly-form .bookly-details-step input.bookly-js-user-phone-input,
.bookly-form .bookly-details-step input.bookly-js-user-phone-input:hover,
.bookly-form .bookly-details-step input.bookly-js-user-email,
.bookly-form .bookly-details-step input.bookly-js-user-email:hover,
.bookly-form .bookly-details-step textarea.bookly-js-user-notes,
.bookly-form .bookly-details-step textarea.bookly-js-user-notes:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 6.2 Details fields, clicked into: white with black text and a white
   border. */
.bookly-form .bookly-details-step input.bookly-js-first-name:focus,
.bookly-form .bookly-details-step input.bookly-js-last-name:focus,
.bookly-form .bookly-details-step input.bookly-js-user-phone-input:focus,
.bookly-form .bookly-details-step input.bookly-js-user-email:focus,
.bookly-form .bookly-details-step textarea.bookly-js-user-notes:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 6.3 Phone country dropdown: dark, matching the text boxes and the
   booking calendars. Dark panel with Bookly's own silver outline,
   white country names, dimmer dial codes, and the accent green with
   dark text on the highlighted country, like a hovered calendar date.
   The panel's #121212 and the dark highlighted text are the site's
   background colour (CLIENT COLOUR). */

/* Dropdown panel. z-index keeps it above the Back/Next
   button labels, which Bookly's button library lifts to 3. */
.bookly-form .bookly-details-step .iti__dropdown-content {
    background-color: #121212 !important;
    border-color: silver !important;
    z-index: 10;
}

/* Country list: remove the theme's default list indent so
   rows and the highlight run flush to the panel edges. */
.bookly-form .bookly-details-step .iti__country-list {
    margin: 0;
    padding: 0;
}

/* Search box: dark field, white text, silver outline (Bookly's own,
   so no border colour is set here). */
.bookly-form .bookly-details-step .iti__search-input {
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.bookly-form .bookly-details-step .iti__search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Country names and dial codes */
.bookly-form .bookly-details-step .iti__country-name {
    color: #ffffff !important;
}

.bookly-form .bookly-details-step .iti__dial-code {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Highlighted country (mouse or keyboard): the accent green, as a
   solid layer so it follows Bookly's accent setting, with dark text. */
.bookly-form .bookly-details-step .iti__country.iti__highlight {
    background-color: transparent !important;
    background-image: linear-gradient(var(--bookly-main-color), var(--bookly-main-color)) !important;
}

.bookly-form .bookly-details-step .iti__country.iti__highlight .iti__country-name,
.bookly-form .bookly-details-step .iti__country.iti__highlight .iti__dial-code {
    color: #121212 !important;
}

/* 6.4 Details labels (First name, Last name, Phone, Email, Notes):
   white. Bookly paints these in its accent colour with its shared
   field-label rule, so this one is !important too. Error messages
   are left as they are. */
.bookly-form .bookly-details-step .bookly-form-group > label {
    color: #ffffff !important;
}

/* 6.5 Details step validation: message and field border.
   Bookly paints the message in its accent colour, and gives an
   invalid field a 2px accent border (the bookly-error class on the
   input). Messages go white and fields keep their normal silver
   1px border, like every other field. The message under each field
   says what's wrong. */
.bookly-form .bookly-details-step .bookly-label-error {
    color: #ffffff !important;
}

.bookly-form .bookly-details-step .bookly-form-group input.bookly-error,
.bookly-form .bookly-details-step .bookly-form-group textarea.bookly-error {
    border: 1px solid silver !important;
}

/* ==========================================================
   SECTION 7 — Bookly Login Modal Styling & Responsive Fixes
   Anchor: .bookly-modal.bookly-js-login (Bookly's own login
   modal hook) plus the Login opener in Bookly's guest box.
   The booking form, the duplicate-customer modal, WooCommerce
   logins and the Customer/Staff Cabinets are unaffected.
   Mobile rules use Bookly's 650px breakpoint.
   ========================================================== */

/* 7.1 Dialog: fluid and centred, never wider than the screen.
   Replaces Bookly's fixed 400px width and -200px margin. */
.bookly-modal.bookly-js-login .bookly-modal-dialog {
    width: auto;
    max-width: 400px;
    left: 16px;
    right: 16px;
    margin: 0 auto;
}

/* 7.2 Modal surface: dark panel matching the booking calendars */
.bookly-modal.bookly-js-login .bookly-modal-content {
    background-color: #121212;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    color: #ffffff;
}

/* 7.3 Header: white title, visible close button, dark divider */
.bookly-modal.bookly-js-login .bookly-modal-header {
    border-bottom-color: #3b3b3b;
}

.bookly-modal.bookly-js-login .bookly-modal-header > div {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.bookly-modal.bookly-js-login .bookly-close {
    color: #c8c8c8;
    opacity: 1;
    text-shadow: none;
}

/* 7.4 Username / Password labels: white, own line, consistent spacing */
.bookly-modal.bookly-js-login .bookly-modal-body .bookly-form-group > label {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
}

/* 7.5 Inputs: black text in every state.
   Same cause as Section 6: Kadence's palette colours. */
.bookly-modal.bookly-js-login .bookly-modal-body input[type="text"],
.bookly-modal.bookly-js-login .bookly-modal-body input[type="password"] {
    color: #000000 !important;
}

/* 7.6 Remember Me: the label exists but was white on a light panel.
   Aligned with the checkbox. */
.bookly-modal.bookly-js-login .bookly-modal-body input[type="checkbox"] {
    vertical-align: middle;
}

.bookly-modal.bookly-js-login .bookly-modal-body input[type="checkbox"] + span {
    margin-left: 8px;
    color: #ffffff;
    vertical-align: middle;
}

/* 7.7 Footer: Lost password left; Log In + Cancel right;
   all vertically centred. Flex replaces the float alignment. */
.bookly-modal.bookly-js-login .bookly-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    border-top-color: #3b3b3b;
}

.bookly-modal.bookly-js-login .bookly-modal-footer .bookly-left {
    margin-right: auto;
}

.bookly-modal.bookly-js-login .bookly-modal-footer a.bookly-btn-cancel {
    color: #c8c8c8;
}

.bookly-modal.bookly-js-login .bookly-modal-footer a.bookly-btn-cancel:hover,
.bookly-modal.bookly-js-login .bookly-modal-footer a.bookly-btn-cancel:focus {
    color: #6AC269;
}

.bookly-modal.bookly-js-login .bookly-modal-footer a.bookly-js-close {
    margin-left: 16px;
}

/* 7.8 Log In button: same metrics as Bookly's Back/Next buttons.
   Must outrank Bookly's own footer button rule (0,4,0, padding !important). */
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit {
    padding: 9px 18px !important;
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    font-size: 18px;
    line-height: 17px;
    text-align: center;
}

/* Hover / focus / pressed: replace Kadence's whole hover background
   (including any gradient layer) with a solid, slightly deeper green,
   so the white text stays readable. Uses the background shorthand,
   with !important because Bookly locks the background with !important. */
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit:hover,
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit:focus,
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit:active {
    background: #58a957 !important;
}

/* No hover or pressed drop shadow (Kadence's global button shadow) */
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit:hover,
.bookly-modal.bookly-js-login .bookly-modal-content .bookly-modal-footer button.bookly-btn-submit:active {
    box-shadow: none;
}

/* 7.9 Mobile (650px and below) */
@media screen and (max-width: 650px) {

    /* Let the modal scroll when the keyboard shrinks the screen */
    .bookly-modal.bookly-js-login {
        overflow-y: auto;
    }

    /* Start nearer the top so fields stay above the keyboard */
    .bookly-modal.bookly-js-login .bookly-modal-dialog {
        top: 24px;
    }

    /* Lost password on its own row; Log In + Cancel below it */
    .bookly-modal.bookly-js-login .bookly-modal-footer .bookly-left {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    /* 16px stops iOS Safari zooming the page on focus
       (Bookly forces 14px !important) */
    .bookly-modal.bookly-js-login .bookly-modal-body input[type="text"],
    .bookly-modal.bookly-js-login .bookly-modal-body input[type="password"] {
        font-size: 16px !important;
    }
}

/* 7.10 Login opener button (button.bookly-js-login-show in the
   guest box): same calm hover as the modal's Log In button.
   Outranks Bookly's .bookly-form .bookly-btn:hover (0,3,0, !important). */
.bookly-form .bookly-js-guest button.bookly-js-login-show:hover,
.bookly-form .bookly-js-guest button.bookly-js-login-show:focus,
.bookly-form .bookly-js-guest button.bookly-js-login-show:active {
    background: #58a957 !important;
}

.bookly-form .bookly-js-guest button.bookly-js-login-show:hover,
.bookly-form .bookly-js-guest button.bookly-js-login-show:active {
    box-shadow: none;
}

/* ==========================================================
   SECTION 8 - WooCommerce Basket: Bookly Session Details
   Scope: only the "Sessions" detail row that Bookly adds,
   so regular product descriptions are unaffected.

   TEMPLATE NOTE - check on every new gym build:
   The class "product-details__sessions" used below is created
   by WooCommerce from the label set in:
   Bookly - Settings - WooCommerce - Cart item data (label field)
     Label "Sessions"       gives class  __sessions
     Label "Your sessions"  gives class  __your-sessions
     Label "Classes"        gives class  __classes
   If the label changes, update "__sessions" in ALL FOUR
   selectors below, or this formatting silently stops working.
   Check: inspect the basket item; the row's class must match.

   Also required in that same Bookly setting (template field):
   one line only, nothing underneath, using the service_name,
   appointment_date and appointment_time codes, e.g.
   service_name: appointment_date at appointment_time
   (each code wrapped in curly brackets in Bookly itself)

   Requires this PHP snippet, which removes Bookly's blank
   lines between sessions:
   Bookly - Basket - Session List - Line Breaks
   ========================================================== */

/* 8.1 "Sessions:" label on its own line, sessions below it.
   TEMPLATE: label-dependent class (__sessions) */
.wc-block-cart .wc-block-components-product-details__sessions .wc-block-components-product-details__name,
.wc-block-cart .wc-block-components-product-details__sessions .wc-block-components-product-details__value {
    display: block;
}

/* 8.2 Space between the "Sessions:" label and the first session.
   TEMPLATE: label-dependent class (__sessions) */
.wc-block-cart .wc-block-components-product-details__sessions .wc-block-components-product-details__name {
    margin-bottom: 6px;
}

/* 8.3 One line per session, spaced to match the checkout
   session list, with a small space after the last session.
   Raise line-height for more space, lower it for less.
   TEMPLATE: label-dependent class (__sessions) */
.wc-block-cart .wc-block-components-product-details__sessions .wc-block-components-product-details__value {
    white-space: pre-line;
    line-height: 1.85;
    margin-bottom: 10px;
}

/* ==========================================================
   SECTION 9 - WooCommerce Checkout: Bookly Session Details
   Scope: the checkout order review table, and only the
   "Sessions" detail that Bookly adds to booking items.

   TEMPLATE NOTE - check on every new gym build:
   The class "variation-Sessions" is created by WooCommerce
   from the Bookly label (Bookly - Settings - WooCommerce -
   Cart item data). It keeps the label's capital letters and
   removes spaces, e.g.
     Label "Sessions"       gives class  variation-Sessions
     Label "Your sessions"  gives class  variation-Yoursessions
   If the label changes, update "variation-Sessions" in all
   selectors below, and "__sessions" in Section 8.
   ========================================================== */

/* 9.1 "Sessions:" label and the session list each on their
   own line, instead of floated side by side */
.woocommerce-checkout-review-order-table td.product-name dl.variation dt.variation-Sessions,
.woocommerce-checkout-review-order-table td.product-name dl.variation dd.variation-Sessions {
    display: block;
    float: none;
    margin: 0;
}

/* 9.2 Small gap between the label and the first session */
.woocommerce-checkout-review-order-table td.product-name dl.variation dt.variation-Sessions {
    margin-bottom: 6px;
}

/* 9.3 Small gap between each session line */
.woocommerce-checkout-review-order-table td.product-name dl.variation dd.variation-Sessions p + p {
    margin-top: 4px;
}

/* ----------------------------------------------------------------------
   ORDER CONFIRMATION - PRODUCT LINE SPACING
   Adds breathing room between the lines of each product's details,
   including Bookly's Sessions label and session lines, which Bookly
   outputs as plain text separated by line breaks. Spacing roughly
   matches the Basket and Checkout session lists.
   ---------------------------------------------------------------------- */

.woocommerce-order-received
.woocommerce-table--order-details
td.product-name {
    line-height: 1.85;
}

/* ==========================================================
   SECTION 10 — Bookly Customer Cabinet
   Scope: #bookly-tbs.bookly-customer-cabinet only, so the
   Staff Cabinet and the booking form are untouched.
   Bookly builds the Cabinet from utility classes written as
   !important rules; the #bookly-tbs prefix outranks them all.
   Dark mode: Bookly's white parts are made transparent, so
   the site's own background shows through on any client.
   Text, borders and hover use inheritance or white tints.
   Bookly's class names are matched with [class~="..."]
   because the colon in them is awkward in CSS.
   ========================================================== */

/* 10.1 Cancel buttons (in the rows, and in the selection bar
   that appears when rows are ticked): transparent with an
   outline in the icon's colour at rest, filled with that same
   colour on hover. Kadence paints a green gradient
   (background-image) over Bookly's background, and a drop
   shadow on hover, so both are removed. Bookly colours the
   icon (red for Cancel) through the text colour, so
   currentColor follows it. Limited to the Cancel buttons, so
   the expand chevrons (10.9) don't get the fill. */
#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"][aria-label="Cancel"],
#bookly-tbs.bookly-customer-cabinet .bookly-dt-checked-toolbar button[data-slot="button"] {
    background-color: transparent !important;
    background-image: none !important;
    border-color: currentColor !important;
    box-shadow: none !important;
}

/* Hover and keyboard focus: the button fills with its own
   colour and the icon inside turns white. If the Reschedule
   button is turned on later, give it its own rule. */
#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"][aria-label="Cancel"]:hover,
#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"][aria-label="Cancel"]:focus-visible,
#bookly-tbs.bookly-customer-cabinet .bookly-dt-checked-toolbar button[data-slot="button"]:hover,
#bookly-tbs.bookly-customer-cabinet .bookly-dt-checked-toolbar button[data-slot="button"]:focus-visible {
    background-image: none !important;
    background-color: currentColor !important;
    border-color: currentColor !important;
    box-shadow: none !important;
}

#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"][aria-label="Cancel"]:hover *,
#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"][aria-label="Cancel"]:focus-visible *,
#bookly-tbs.bookly-customer-cabinet .bookly-dt-checked-toolbar button[data-slot="button"]:hover *,
#bookly-tbs.bookly-customer-cabinet .bookly-dt-checked-toolbar button[data-slot="button"]:focus-visible * {
    color: #ffffff !important;
}

/* 10.2 Text: Bootstrap sets dark text on #bookly-tbs, which
   overrides the site's white. Inherit the site's colour
   instead, including the header and the secondary lines
   (time, duration), which are slightly faded. */
#bookly-tbs.bookly-customer-cabinet {
    color: inherit;
}

#bookly-tbs.bookly-customer-cabinet [data-slot="table-head"] {
    color: inherit !important;
}

#bookly-tbs.bookly-customer-cabinet [data-dt-secondary],
#bookly-tbs.bookly-customer-cabinet [data-dt-child] {
    color: inherit !important;
    opacity: 0.7;
}

/* 10.3 Backgrounds: the card, rows, header cells and cells are
   made transparent in every state, which also blocks Bookly's
   own grey row hover. The fade behind the action button was a
   light gradient, so it is removed. */
#bookly-tbs.bookly-customer-cabinet [class~="bookly:bg-card"],
#bookly-tbs.bookly-customer-cabinet [data-slot="table-row"],
#bookly-tbs.bookly-customer-cabinet [data-slot="table-head"],
#bookly-tbs.bookly-customer-cabinet [data-slot="table-cell"] {
    background-color: transparent !important;
}

#bookly-tbs.bookly-customer-cabinet [class~="bookly:from-gray-50"] {
    background-image: none !important;
}

/* 10.4 Row hover: none. Rows keep the dark background when
   hovered (10.3 above already blocks Bookly's grey), and the
   Cancel button still appears on hover. */

/* 10.5 Borders: the card outline and row dividers as faint
   white lines (they were dark, or the text colour) */
#bookly-tbs.bookly-customer-cabinet [class~="bookly:border-slate-200"],
#bookly-tbs.bookly-customer-cabinet [data-slot="table-row"] {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 10.6 Status pills (Approved, Cancelled and so on): no fill and
   text in the site's colour. Only the pill's own outline colour
   is kept (it comes from Bookly), so the status shows without a
   bright block. Matched by the pill's box classes, so it covers
   every status colour. */
#bookly-tbs.bookly-customer-cabinet span[class~="bookly:inline-flex"][class~="bookly:rounded-md"][class~="bookly:border"] {
    background-color: transparent !important;
    color: inherit !important;
}

/* 10.7 Selection bar: the small floating panel that appears when
   rows are ticked (tick box, count, Cancel). It floats over the
   page, so it needs a solid background rather than transparent,
   and white text (the count was white on white).
   CLIENT COLOUR: the background, the same dark as Section 11.1. */
#bookly-tbs.bookly-customer-cabinet [class~="bookly:fixed"][class~="bookly:z-10"] {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* The panel outline and the divider beside the count */
#bookly-tbs.bookly-customer-cabinet [class~="bookly:border-border"] {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 10.8 Tick boxes (header, rows and selection bar): Kadence treats
   them as buttons, painting a green gradient and a dark look on
   hover and click. The gradient and shadow are removed in every
   state, and an unticked box is left empty so it shows only its
   outline. A ticked box keeps Bookly's own accent fill. */
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"],
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:hover,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:focus,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:active {
    background-image: none !important;
    box-shadow: none !important;
}

#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"][data-state="unchecked"],
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"][data-state="unchecked"]:hover,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"][data-state="unchecked"]:focus,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"][data-state="unchecked"]:active {
    background-color: transparent !important;
}

/* The tick takes its colour from the box's text colour, which
   Kadence changes on hover and click (the tick went black or
   vanished into the fill). Keep it white in every state. */
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"],
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:hover,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:focus,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"]:active,
#bookly-tbs.bookly-customer-cabinet button[data-slot="checkbox"] [data-slot="checkbox-indicator"] {
    color: #ffffff !important;
}

/* 10.9 Expand chevrons (the narrow-screen layout): the button in
   each row and the "Expand all rows" button in the header. Same
   outline at rest in both, so the header matches the rows. The
   same rules apply on hover, so there is no fill or shadow. */
#bookly-tbs.bookly-customer-cabinet td[data-slot="table-cell"] button[data-slot="button"]:not([aria-label="Cancel"]),
#bookly-tbs.bookly-customer-cabinet th[data-slot="table-head"] button[data-slot="button"][aria-label="Expand all rows"] {
    background-color: transparent !important;
    background-image: none !important;
    border-color: currentColor !important;
    box-shadow: none !important;
}

#bookly-tbs.bookly-customer-cabinet th[data-slot="table-head"] button[data-slot="button"][aria-label="Expand all rows"] {
    border-style: solid !important;
    border-width: 1px !important;
}

/* ==========================================================
   SECTION 11 — Bookly Customer Cabinet Dialogs
   The Cancel Appointment form; the other Cabinet dialogs
   share the same structure.
   Scope: dialogs inside #bookly-tbs.bookly-customer-cabinet,
   so the login modal (Section 7) and the booking form are
   untouched.
   ========================================================== */

/* 11.1 Panel: dark, matching the login modal (Section 7.2).
   CLIENT COLOUR: set the background to the client's dark shade,
   the same value as Section 7.2. */
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-content {
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
}

/* 11.2 Header and footer divider lines */
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* 11.3 Close button: Kadence put a green gradient square behind
   the X. Plain white X instead. */
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-header .close,
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-header .close:hover,
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-header .close:focus {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-shadow: none;
    opacity: 1;
}

/* 11.4 Title and sentence: pure white. The title is a bare
   heading, which the theme can colour on its own. */
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-header h5,
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-body {
    color: #ffffff !important;
}

/* 11.5 Reason field: black typed text on its light background,
   like the other inputs (Section 6.1), with a gap above it so
   it doesn't sit tight against the sentence. */
#bookly-tbs.bookly-customer-cabinet .bookly-modal input.form-control {
    color: #000000;
    margin-top: 12px;
}

/* 11.6 Yes / No buttons: no gradient or shadow on hover (same
   Kadence hover behaviour as Section 7.8). If Kadence adds
   none here, this does nothing. */
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-footer .btn:hover,
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-footer .btn:focus,
#bookly-tbs.bookly-customer-cabinet .bookly-modal .modal-footer .btn:active {
    background-image: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   SECTION 12 — Bookly Booking Form Buttons
   Back, Next, View schedule and the other Bookly buttons
   inside the booking form. The fill stays Bookly's own (the
   colour set in Bookly's Appearance settings). Only the text
   and arrows change: they take the site's background colour,
   so they look cut out of the green. The buttons also get
   fully rounded ends.
   Scope: .bookly-form. The login modal (Section 7) and the
   Cabinets are untouched.
   CLIENT COLOUR: the dark colour appears in 12.1, 12.2 and
   12.4; set all three to the site's background colour (the
   same dark as Sections 10.7 and 11.1).
   ========================================================== */

/* 12.1 Button text, in every state. Bookly sets white text on
   the button and on the span inside it, both !important. The
   time-slot arrow buttons have no text and are handled in 12.2. */
.bookly-form button.bookly-btn:not(.bookly-time-prev):not(.bookly-time-next),
.bookly-form button.bookly-btn:not(.bookly-time-prev):not(.bookly-time-next) > span {
    color: #121212 !important;
}

/* 12.2 Time-slot arrow buttons: Bookly's white arrow is hidden
   (the image, the label span inside the button, and any
   ::before), and a chevron is drawn in the dark colour instead,
   centred on the button. The label span sits on a higher layer
   than anything added to the button, so it has to be switched
   off rather than covered. */
.bookly-form button.bookly-time-prev,
.bookly-form button.bookly-time-next {
    position: relative;
    background-image: none !important;
}

.bookly-form button.bookly-time-prev > span,
.bookly-form button.bookly-time-next > span {
    display: none !important;
}

.bookly-form button.bookly-time-prev::before,
.bookly-form button.bookly-time-next::before {
    content: none !important;
}

.bookly-form button.bookly-time-prev::after,
.bookly-form button.bookly-time-next::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 3px solid #121212;
    border-right: 3px solid #121212;
}

.bookly-form button.bookly-time-next::after {
    transform: translate(-65%, -50%) rotate(45deg);
}

.bookly-form button.bookly-time-prev::after {
    transform: translate(-35%, -50%) rotate(-135deg);
}

/* 12.3 Rounded ends: Bookly sets 4px corners with !important */
.bookly-form button.bookly-btn {
    border-radius: 100px !important;
}

/* 12.4 Day headers in the Time step (Mon, Oct 26 and so on):
   Bookly sets white text on them with !important, so they get
   the same cut-out text as the buttons. */
.bookly-form .bookly-columnizer button.bookly-day {
    color: #121212 !important;
}

/* ==========================================================
   SECTION 13 — Bookly Repeat Step: Schedule Rows and Pagination
   The time dropdown and the date field on a schedule row that is
   being edited, the green date chips on the rows, and the page
   numbers under them.
   The boxes around the dropdown and the field centre their text,
   but a select and an input ignore that, so the chosen time and
   date sat to the left instead of matching the other rows.
   Scope: .bookly-repeat-step, so Section 5 is untouched.
   CLIENT COLOUR: the dark colour appears in 13.3 and 13.4; set
   both to the site's background colour (the same dark as
   Section 12).
   ========================================================== */

/* 13.1 Time dropdown: it inherits the site's white text, which is
   invisible on its white box, and the browser only shows it dark
   while the dropdown is focused. Black text in every state, so the
   chosen time stays visible after clicking away, and centred. */
.bookly-form .bookly-repeat-step .bookly-schedule-time select,
.bookly-form .bookly-repeat-step .bookly-schedule-time select:hover,
.bookly-form .bookly-repeat-step .bookly-schedule-time select:focus,
.bookly-form .bookly-repeat-step .bookly-schedule-time select:active {
    color: #000000 !important;
    text-align: center;
    text-align-last: center;
}

/* 13.2 Date field: the chosen date centred, to match the other
   rows. */
.bookly-form .bookly-repeat-step .bookly-schedule-date input {
    text-align: center;
}

/* 13.3 Date chips on the schedule rows (Mon, Oct 26 and so on):
   Bookly sets white text on the green chip with !important, so
   they get the same cut-out text as the buttons. */
.bookly-form .bookly-repeat-step div.bookly-schedule-date {
    color: #121212 !important;
}

/* 13.4 Page numbers under the schedule: the current page's number
   is dark on its green background. */
.bookly-form .bookly-repeat-step .bookly-pagination > li.active > a {
    color: #121212 !important;
}

/* ==========================================================
   SECTION 14 — Bookly Time Step: Time Slots and Day Headers
   The list of available times in each day column, dark mode:
   transparent over the site background, a faint outline and
   white text instead of white blocks. The corners are Bookly's own
   4px (the same as the text boxes and dropdowns); the day headers'
   text colour is Section 12.4.
   Scope: .bookly-columnizer inside .bookly-form.
   ========================================================== */

/* 14.1 Slots at rest. Bookly sets a white background and a grey
   border; both are !important. The text sits in a span inside the
   button, so that follows the button's colour. */
.bookly-form .bookly-columnizer button.bookly-hour {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

.bookly-form .bookly-columnizer button.bookly-hour > span {
    color: inherit !important;
}

/* 14.2 Hover, focus and click: the outline brightens, with no
   fill, and the time stays white. Bookly turns the time green
   with a more specific rule, so its span is set here too. The
   green dot inside the circle is left as Bookly draws it. */
.bookly-form .bookly-columnizer button.bookly-hour:hover,
.bookly-form .bookly-columnizer button.bookly-hour:focus,
.bookly-form .bookly-columnizer button.bookly-hour:active,
.bookly-form .bookly-columnizer button.bookly-hour:focus-visible {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
}

.bookly-form .bookly-columnizer button.bookly-hour:hover .bookly-time-main,
.bookly-form .bookly-columnizer button.bookly-hour:focus .bookly-time-main,
.bookly-form .bookly-columnizer button.bookly-hour:active .bookly-time-main,
.bookly-form .bookly-columnizer button.bookly-hour:focus-visible .bookly-time-main {
    color: #ffffff !important;
}

/* 14.3 Day headers (Mon, Oct 26 and so on): slightly spaced letters
   and a gap before the first slot. The green fill is still Bookly's
   own. It sits inside a faint grey ring like the slots' outline, with
   a thin dark gap between the two: the padding is the gap, and the
   fill is clipped to the content box so it stops inside it. Bookly
   sets the green with a !important background shorthand, which also
   resets the clip, so the clip needs !important too. Bookly's
   1.5px margin is !important. For a thicker gap, raise the 2px
   padding. For a plain green header with no ring, delete the padding,
   border-color and background-clip lines. */
.bookly-form .bookly-columnizer button.bookly-day {
    height: 40px;
    padding: 2px !important;
    margin-bottom: 8px !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-clip: content-box !important;
    letter-spacing: 0.06em;
}

/* 14.4 Places counter ("(0/4)" after each time): white like the time.
   Bookly paints every span inside a slot #333 with !important, and
   this span sits inside the time span, so 14.1 doesn't reach it. The
   hover and focus lines keep it white if Bookly turns the slot's
   text green. */
.bookly-form .bookly-columnizer button.bookly-hour .bookly-time-additional,
.bookly-form .bookly-columnizer button.bookly-hour:hover .bookly-time-additional,
.bookly-form .bookly-columnizer button.bookly-hour:focus .bookly-time-additional,
.bookly-form .bookly-columnizer button.bookly-hour:active .bookly-time-additional,
.bookly-form .bookly-columnizer button.bookly-hour:focus-visible .bookly-time-additional {
    color: #ffffff !important;
}

/* ==========================================================
   SECTION 15 — Bookly Weekday Tick Boxes: Dark Tick
   The Mon to Fri circles on the Service step and the weekly options
   on the Repeat step. Bookly fills the circle with its accent colour
   and draws a white tick image on it. This replaces the tick with a
   dark one, matching the dark text on the buttons in Section 12
   (CLIENT COLOUR, the site background; it is the %23121212 in the
   image below).
   Scope: .bookly-service-step and .bookly-repeat-step weekday boxes.
   ========================================================== */

.bookly-form .bookly-service-step .bookly-week-days input[type="checkbox"]:checked,
.bookly-form .bookly-repeat-step .bookly-week-days input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 62% 62% !important;
}

/* ==========================================================
   SECTION 16 — Bookly Service Step: Dropdowns Return to Dark
   Category, Service, Trainer, Start and Finish.
   Kadence turns a dropdown white while it has focus, and after
   you choose an option it stays focused (so stays white) until
   you click elsewhere. This puts the resting look back whenever
   a dropdown is focused but its list is closed. The white while
   the list is open is left as it is. :open is true only while
   the list is showing.
   Only the fill and the text colour are set. The border, arrow
   and sizing are Bookly's and Kadence's own, so they stay
   exactly as they are at rest.
   Scope: every select inside .bookly-service-step.
   ========================================================== */

.bookly-form .bookly-service-step select:focus:not(:open) {
    background-color: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ==========================================================
   SECTION 17 — Bookly Service Step: Field Labels and Error
   Messages in White
   Category, Service, Trainer, Available from, the weekday names,
   Start and Finish, and the validation messages that appear under
   them ("Please select a service to continue" and so on). Bookly
   paints both in its accent colour with one shared rule; this makes
   them white.
   Scope: .bookly-service-step only, so the other steps are untouched.
   ========================================================== */

.bookly-form .bookly-service-step .bookly-form-group > label,
.bookly-form .bookly-service-step .bookly-label-error {
    color: #ffffff !important;
}

/* ==========================================================
   SECTION 18 — Bookly Buttons: Loading Spinner
   The spinner that shows on a button after you click it (Next, Back,
   View Schedule and so on, the round pencil button in the schedule
   list, and the time slots). Bookly's script draws it, and the size
   and the line colour are set inline. This makes it smaller so it
   sits inside the button with room around it. On the green buttons it
   is dark, matching the dark text on the buttons in Section 12
   (CLIENT COLOUR, the site background). On the time slots, which are
   dark, it is white so it can be seen.
   ========================================================== */

/* 18.1 Buttons: smaller. To change the size, change the 0.65: higher is
   bigger, lower is smaller. */
.bookly-btn.ladda-button .ladda-spinner {
    zoom: 0.65;
}

/* 18.2 Buttons: dark lines. The inline colour is overridden with
   !important. */
.bookly-btn.ladda-button .ladda-spinner div {
    background: #121212 !important;
}

/* 18.3 Time slots: smaller (the slots are shorter than the buttons).
   To change the size, change the 0.5. */
.bookly-form .bookly-columnizer button.bookly-hour .ladda-spinner {
    zoom: 0.5;
}

/* 18.4 Time slots: white lines, so they show on the dark slot. */
.bookly-form .bookly-columnizer button.bookly-hour .ladda-spinner div {
    background: #ffffff !important;
}

/* 18.5 Round pencil button in the schedule list: smaller, so it sits
   well inside the 28px circle. To change the size, change the 0.7. */
.bookly-round.ladda-button .ladda-spinner {
    zoom: 0.7;
}

/* 18.6 Round pencil button: dark lines, like the other green buttons. */
.bookly-round.ladda-button .ladda-spinner div {
    background: #121212 !important;
}

/* ==========================================================
   SECTION 19 — Bookly Repeat Step: Schedule Row Icons
   The pencil (edit), bin (remove) and restore icons on the round green
   buttons in the schedule list. Bookly draws them as white images; the
   filter turns them into the site's dark background colour, so they
   look cut out of the green, like the text on the buttons in
   Section 12 (CLIENT COLOUR). brightness(0) makes the icon black and
   invert(0.07) lifts it to #121212.
   Scope: .bookly-repeat-step only.
   ========================================================== */

.bookly-form .bookly-repeat-step button.bookly-round i.bookly-icon-sm {
    filter: brightness(0) invert(0.07);
}

/* ==========================================================
   SECTION 20 — WooCommerce Checkout: Processing Overlay
   The layer that covers the checkout while an order is being placed or
   the totals are updating. WooCommerce draws it inside the checkout
   form as a white layer at 60% opacity (inline styles, hence
   !important) with a small dark spinner image in the middle of the
   whole form, which can be off-screen. This makes the layer the dark
   site background (CLIENT COLOUR: #121212) with a white spinner fixed
   to the middle of the screen.
   Scope: the checkout form only.
   ========================================================== */

/* 20.1 The layer: dark and mostly solid, so the form is clearly locked. */
form.woocommerce-checkout .blockUI.blockOverlay {
    background: #121212 !important;
    opacity: 0.85 !important;
    cursor: wait !important;
}

/* 20.2 The spinner: WooCommerce's dark image is replaced with a thin
   white ring that spins, fixed to the middle of the visible screen.
   To change the size, change the 40px and the -20px (half of it). */
form.woocommerce-checkout .blockUI.blockOverlay::before {
    content: "" !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    margin-left: -20px !important;
    background: none !important;
    border: 3px solid rgba(255, 255, 255, 0.25) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    animation: bm-checkout-spin 0.8s linear infinite !important;
}

@keyframes bm-checkout-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   SECTION 21 — WooCommerce Checkout: Inline Error Messages
   The red messages WooCommerce shows under a field or the terms tick
   box ("Please read and accept the terms and conditions to proceed
   with your order"). Smaller than the body text: 16px on desktop,
   15px on tablet (1024px and below) and 14px on mobile (650px and
   below, Bookly's breakpoint too).
   Scope: the checkout form only.
   ========================================================== */

form.woocommerce-checkout .checkout-inline-error-message {
    font-size: 15px !important;
}

@media screen and (max-width: 1024px) {
    form.woocommerce-checkout .checkout-inline-error-message {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 650px) {
    form.woocommerce-checkout .checkout-inline-error-message {
        font-size: 13px !important;
    }
}

/* ==========================================================
   SECTION 22 — WooCommerce Checkout: Privacy Policy Text
   "Your personal data will be used to process your order…" above
   the Place Order button. An earlier rule sets it (and the checkbox
   labels) to 16px with !important; this beats it for the privacy
   text only, with a more specific selector. 14px on desktop, 13px
   on tablet (1024px and below) and 12px on mobile (650px and below).
   Scope: the checkout form only.
   ========================================================== */

form.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
form.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
    font-size: 14px !important;
}

@media screen and (max-width: 1024px) {
    form.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
    form.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 650px) {
    form.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
    form.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
        font-size: 12px !important;
    }
}

/* ----------------------------------------------------------------------
   23. CHECKOUT - SPACE BELOW THE ERROR MESSAGE BOX
   Adds breathing room between the red validation box (e.g. "Please read
   and accept the terms…") and the Billing & Shipping heading below it.
   Desktop: 32px / Mobile: 24px.
   ---------------------------------------------------------------------- */

form.woocommerce-checkout .woocommerce-error {
    margin-bottom: 32px !important;
}

/* TEMPLATE - MOBILE */
@media screen and (max-width: 767px) {
    form.woocommerce-checkout .woocommerce-error {
        margin-bottom: 24px !important;
    }
}

/* ----------------------------------------------------------------------
   24. SHOP - ADD TO BASKET LOADING STATE
   While an item is being added (button has the "loading" class), hide the
   "Add to basket" text and show the spinner centred in the button.
   The button keeps its size, so nothing jumps. The spinner uses the
   button's own text colour.
   ---------------------------------------------------------------------- */

ul.products li.product a.add_to_cart_button.loading {
    position: relative !important;
    opacity: 1 !important;
    -webkit-text-fill-color: transparent !important;
}

ul.products li.product a.add_to_cart_button.loading .kadence-spinner-svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
}

/* ----------------------------------------------------------------------
   25. EMPTY BASKET PAGE - ADD TO BASKET LOADING STATE
   Same behaviour as Section 24, for the WooCommerce block product grid
   ("New in store" on the empty basket page). While loading, hide the
   "Add to basket" text and show the spinner centred in the button.
   ---------------------------------------------------------------------- */

.wc-block-grid__product .wp-block-button__link.add_to_cart_button.loading {
    position: relative !important;
    opacity: 1 !important;
    -webkit-text-fill-color: transparent !important;
}

.wc-block-grid__product .wp-block-button__link.add_to_cart_button.loading .kadence-spinner-svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
}

/* ----------------------------------------------------------------------
   26. BOOKLY FORM LOADING SPINNER
   While the form loads, Bookly shows a grey GIF (loader.gif from
   WordPress's editor files) in a plain div inside .bookly-form. A GIF
   can't be recoloured, so the image is turned into a white ring: it is
   given a circular border and spun, and the GIF's own pixels are
   pushed out of the box, where they are clipped. Same 31px size,
   same centred spot.
   ---------------------------------------------------------------------- */

.bookly-form > div > img[src*="loader.gif"] {
    display: inline-block;
    width: 31px;
    height: 31px;
    box-sizing: border-box;
    padding: 0;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    object-fit: none;
    object-position: -9999px 0;
    vertical-align: middle;
    animation: bm-form-spin 0.8s linear infinite;
}

@keyframes bm-form-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------
   27. BOOKLY TOAST NOTICES ("Failed to load data" and similar)
   Bookly shows these in #bookly-alert as div.bookly:toast. The class
   names contain a colon, so attribute selectors are used. Dark panel
   with a faint outline and white text, Bookly's 4px corners. The close
   button is a dark box with a white outline and a white X; the theme's
   green gradient (a background-image) is removed. On hover it flips to
   a white box with a dark X, like the other buttons. The coloured icon
   on the left is left as Bookly draws it.
   ---------------------------------------------------------------------- */

/* CLIENT COLOUR: #121212 */
.bookly-css-root.bookly-toast-container [class~="bookly:toast"] {
    background-color: #121212 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
}

.bookly-css-root.bookly-toast-container [class~="bookly:toast-message"] {
    color: #ffffff !important;
}

/* Close button at rest: dark box, white outline, white X. */
.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"] {
    background-color: #121212 !important;
    background-image: none !important;
    border: 1px solid #ffffff !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Close button on hover and focus: white box, dark X. */
.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"]:hover,
.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"]:focus {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #121212 !important;
}

.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"]:hover svg,
.bookly-css-root.bookly-toast-container [class~="bookly:toast-close"]:focus svg {
    color: #121212 !important;
    stroke: #121212 !important;
}

/* ----------------------------------------------------------------------
   28. BOOKLY GENERAL ERROR MESSAGE (top of the form)
   Messages such as "That time is no longer available. Please choose
   another time slot." sit in div.bookly-box.bookly-label-error, a direct
   child of .bookly-form above the current step. Bookly paints them in
   its accent colour with !important; this makes them white, like the
   other error messages. The extra element name and class make it more
   specific than Bookly's own rule.
   ---------------------------------------------------------------------- */

.bookly-form > div.bookly-box.bookly-label-error {
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------
   29. BOOKLY REPEAT STEP NOTICE BOXES
   The two boxes above and below the schedule ("Some of your selected
   times are unavailable…" and "Some appointments have been offered
   alternative times…") are div.bookly-row.bookly-well. Bookly paints
   them pale pink (#F2DEDE) with a #ccc border (!important) and gives
   them side padding only. They become transparent over the site
   background with a faint outline and white text, with padding all
   round, and the double line break in the top box is cut to one. The
   white glyph inside each green icon (the "i" and the "!") is turned
   dark, so it reads as a cut-out; the green circle and triangle are
   left as Bookly draws them, with a gap between each icon and its text.
   ---------------------------------------------------------------------- */

.bookly-form .bookly-repeat-step .bookly-well {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 8px 12px;
}

/* Top box: one line break between the two sentences, not two. */
.bookly-form .bookly-repeat-step .bookly-js-schedule-help br + br {
    display: none;
}

/* Icon glyphs: white to dark. */
.bookly-form .bookly-repeat-step .bookly-well i.bookly-icon-i,
.bookly-form .bookly-repeat-step .bookly-well i.bookly-icon-exclamation {
    filter: brightness(0);
}

/* Gap between each icon (circle, triangle) and its text. */
.bookly-form .bookly-repeat-step .bookly-well > .bookly-round,
.bookly-form .bookly-repeat-step .bookly-well > .bookly-triangle {
    margin-right: 12px !important;
}

/* ----------------------------------------------------------------------
   30. BOOKLY REPEAT STEP SCHEDULE ROW NOTES
   Notes inside the schedule rows: "Nearest available time" (a green
   circle with a white "!") and "Removed from schedule".
   ---------------------------------------------------------------------- */

/* 30.1 "Nearest available time" row (div.bookly-schedule-intersect):
   the white "!" glyph is turned dark so it reads as a cut-out, like
   the icons in Section 29. The green circle is left as Bookly draws it. */
.bookly-form .bookly-repeat-step .bookly-schedule-intersect i.bookly-icon-exclamation {
    filter: brightness(0);
}

/* 30.2 Gap between that circle and its text: 10px. Bookly sets 6px
   inline, so !important is needed. Delete this rule to keep the 6px. */
.bookly-form .bookly-repeat-step .bookly-schedule-intersect > .bookly-round {
    margin-right: 10px !important;
}

/* 30.3 "Removed from schedule" row (div.bookly-hidden-info > span): the
   text sat almost against the divider after the row number. A little
   left padding lines it up with where the date button starts on the
   other rows. */
.bookly-form .bookly-repeat-step .bookly-schedule-row .bookly-hidden-info > span {
    padding-left: 8px;
}

/* ----------------------------------------------------------
   1. AVAILABLE FROM - CALENDAR DATE TEXT BOX

   At rest and on hover: transparent with white text, matching
   the dark dropdowns. The border is not set here, so it stays
   Bookly's own silver, the same as the dropdowns beside it.
   When clicked into (the calendar opens): white with black
   text and a white border.
   Does not change the calendar popup appearance.
   ---------------------------------------------------------- */

.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from,
.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.bookly-form
.bookly-service-step
.bookly-available-date
input.bookly-js-date-from:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}