/*--Custom CSS--*/

/*--Heading hierarchy fix — non-heading title elements (Aug 2026)--*/
/*  Replicates the element-selector styling lost when h3 became div.h3  */

/* Service card hover-overlay title */
.homeSerivce-itemBox .grid-ov-info .pageTitle .h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.08px;
    text-transform: none;
    position: static;
}
@media screen and (max-width: 1599.98px) {
    .homeSerivce-itemBox .grid-ov-info .pageTitle .h3 { font-size: 25px; }
}
@media screen and (max-width: 575.98px) {
    .homeSerivce-itemBox .grid-ov-info .pageTitle .h3 { font-size: 20px; }
}

/* Testimonial company name */
.testimonial-box .userName-box .h3 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.08px;
    text-transform: none;
    padding-bottom: 5px;
    position: static;
}
@media screen and (max-width: 1599.98px) {
    .testimonial-box .userName-box .h3 { font-size: 30px; }
}
@media screen and (max-width: 575.98px) {
    .testimonial-box .userName-box .h3 { font-size: 24px; }
}

/* Inline spans/strong inside converted titles */
.pageTitle .h3 span { color: #FFC80C; }
.pageTitle .h3 strong { font-weight: 700; }

/*--Anchor navigation fix (Locations sub-menu)--*/

/*  plugins.css:189 (Bootstrap reboot) ships:
        @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

    On this layout the body owns the scroll (body { height:100%; overflow-y:auto }
    propagates to the viewport) and the native smooth scroll to a #fragment is
    cancelled the instant it starts - so /locations/#l2 never moved at all.

    Turn the native behaviour off; main-script.js animates the jump instead and
    offsets it by the fixed header so the heading is not hidden underneath.

    custom.css loads after plugins.css, so this wins on source order.          */
:root {
    scroll-behavior: auto;
}

.single_variation_wrap .woocommerce-variation-add-to-cart {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper button.quantity-minus,
.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper button.quantity-plus {
    padding: 0px 15px;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper button.quantity-minus:hover,
.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper button.quantity-plus:hover {
    color: #ffffff;
    background: #000000;
    border: 1px solid #000000;
}
.single_variation_wrap .woocommerce-variation-add-to-cart .custom-quantity-wrapper .quantity {
    margin: 0px 5px !important;
    }

/*--Testimonial logos: show wide wordmarks at their true aspect ratio (Aug 2026)--*/

/*  main.css:7714 .img-holder is the padding-bottom aspect-ratio hack
        (height: 0; padding-bottom: 100%)
    and main.css:21415 re-declares it for .testimonial-logo as
        width: 84px; padding-bottom: 84px; border-radius: 100px;
    so every client logo was object-fit: scale-down'd into an 84px (70px under
    1600px) CIRCLE. A wide wordmark fits width-first and collapses to a sliver:
    MessageSpring (1254x239) painted at 70x13px, Gurin Energy (640x103) at
    70x11px, Gradion (548x130) at 70x17px - all illegible.

    Replace the square with a real height band plus a max-width cap, so each
    logo keeps its own ratio: tall/square marks fill the height, wide marks
    fill the width. object-fit: contain overrides the scale-down inherited
    from main.css:7739 so small source files still fill the band.             */

.testimonial-box .testimonial-logo {
    width: auto;
    height: 64px;
    max-width: 200px;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0px auto 20px;
}

.testimonial-box .testimonial-logo figure img {
    object-fit: contain;
}

.nice-select .list {
  max-height: 255px;
}

@media screen and (max-width: 1599.98px) {
    .testimonial-box .testimonial-logo { height: 54px; max-width: 170px; }
}

@media screen and (max-width: 575.98px) {
    .testimonial-box .testimonial-logo { height: 48px; max-width: 150px; }
}


/*--Quantity unit label (Aug 2026)--*/

/*  The quantity box on the five monthly memberships counts MONTHS, not items.
    uo_quantity_unit_label() in functions.php prints a label above it; match the
    Select Date label (.custom-booking-date label) so the three fields read as
    one set.                                                                  */

.uo-qty-label label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}


/*--Term saving hint (Aug 2026)--*/

/*  Printed under the variation form by main-script.js on the five monthly
    memberships. The tiers come from Verz Theme Setting > Membership Term
    Discounts, so this styling has to survive tiers being added or removed. */

.uo-term-hint {
    margin: 15px 0px 0px;
    font-size: 15px;
    line-height: 1.5;
    color: #585858;
}

.uo-term-hint__saving {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: 3px;
    background: #FFC80C;
    color: #211F1F;
    font-weight: 700;
}

.uo-term-hint__sum strong {
    font-weight: 700;
    color: #211F1F;
}

.uo-term-hint__next {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-style: italic;
    color: #8A8A8A;
}

@media screen and (max-width: 575.98px) {
    .uo-term-hint { font-size: 14px; }
    .uo-term-hint__next { font-size: 13px; }
}

/*--Checkout disclaimer (Aug 2026)--*/

/*  The booking date field accepts any date - no blocking plugin - so the
    client asked for opening hours and public holidays to be stated up front
    at checkout. Markup lives in the Checkout page content, above the
    [woocommerce_checkout] shortcode. Brand yellow so it reads as a notice
    rather than body copy.                                                  */

.uo-checkout-notice {
    margin: 0px 0px 35px;
    padding: 18px 22px;
    background: #FFF6D9;
    border: 1px solid #FFC80C;
    border-left: 5px solid #FFC80C;
    border-radius: 4px;
}

.uo-checkout-notice p {
    margin: 0px;
    font-size: 16px;
    line-height: 1.55;
    color: #211F1F;
    text-align: left;
}

@media screen and (max-width: 575.98px) {
    .uo-checkout-notice { padding: 15px 16px; margin-bottom: 25px; }
    .uo-checkout-notice p { font-size: 15px; }
}

/*--Checkbox alignment on Contact Form 7 rows (Aug 2026)--*/

/*  main.css:10043 gives .checkbox-holder a -10px -15px margin, cancelled by
    the 10px 15px padding on a .checkbox child. CF7 acceptance fields have no
    such child, so the meeting-room consent row hung 15px left and 10px high
    of the rest of the form.

    Adding the .checkbox class is NOT the fix - tried and reverted. The theme
    draws its custom box on label::before and shows the tick via
    "input:checked + label" (main.css:10228), which needs input and label to be
    siblings. CF7 nests the input INSIDE its own label, so that box renders but
    can never show a checked state - and a second box appears, because both the
    wrapper label and CF7 label match. Keep the native checkbox, which shows
    its own checked state, and simply cancel the holder offset.            */

.checkbox-holder:has(.wpcf7-acceptance) {
    margin: 0px;
}

.checkbox-holder .wpcf7-acceptance input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}


/*--Book a Visit: full-bleed image column (Aug 2026)--*/

/*  On /serviced-offices/ the section is printed by the page template, outside
    the theme container, so the image reaches the viewport edge. page.php wraps
    the_content() in .container.container-lg (30px margin + 30px padding), so a
    section written into the page content starts 60px in and the image can never
    sit flush.

    page.php names that wrapper after the page title, so .bookVisitSection1 is a
    stable hook: drop the container insets on this page only. Done this way
    rather than a 100vw break-out, which overshoots by the scrollbar width and
    leaves the page scrolling sideways.                                     */

/*  Scoped with :has() - template-book-visit.php (the Meeting Rooms page)
    prints the SAME .bookVisitSection1 wrapper, and an unscoped rule stripped
    that page’s container too, throwing its form full width.            */

.bookVisitSection1:has(.bookVisitSection) > .container.container-lg {
    max-width: none;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/*  The container used to provide the right-hand inset; give it back to the
    form column now that the section spans the full width.                  */

.bookVisitSection .right .caption-box {
    padding-right: 60px;
}

@media screen and (max-width: 991.98px) {
    .bookVisitSection .right .caption-box {
        padding-right: 30px;
        padding-left: 30px;
    }
}


/*--Product card buttons: align to the card bottom (Aug 2026)--*/

/*  The cards are already equal height - the flex row stretches every
    .col-md-6 - but the Buy Now button sits at the end of the content flow, so
    a card with one extra line of copy pushes its button lower than its
    neighbour. On /virtual-office/ The Mailman carries an extra contract note
    and its button sat 68px below The Virtual Communicator’s.

    Make the card link a full-height column and let auto margin push the button
    down, so buttons line up regardless of how much copy each card holds.   */

.row > [class*="col-"]:has(> .coworking-itemBox) {
    display: flex;
    flex-direction: column;
}

.row > [class*="col-"]:has(> .coworking-itemBox) > .coworking-itemBox {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.coworking-itemBox > a:has(> .custom-button) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.coworking-itemBox > a > .custom-button {
    margin-top: auto;
    align-self: flex-start;
}

/*  Serviced Offices template: the .servicedSection3 wrapper is printed OUTSIDE
    its own hide_section_three guard, so any page using the template that hides
    Our Locations is still left with an empty ~172px band of section padding.
    Collapse the wrapper whenever the section has no content inside it.  */

.servicedSection3:not(:has(.container > *)) {
    display: none;
}


/*  "Edit cart" link on the checkout page. Buy Now skips the cart entirely, so
    this is the only route back to change a quantity or remove a line. Sits on
    the same baseline as the "Your order" heading it is printed before.  */

.uo-edit-cart {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #FFC80C;
    padding-bottom: 2px;
}

.uo-edit-cart:hover,
.uo-edit-cart:focus {
    color: #FFC80C;
    border-bottom-color: currentColor;
}

.uo-edit-cart__icon {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 575px) {
    .uo-edit-cart {
        float: none;
        display: flex;
        margin: 0 0 12px;
    }
}


/*  Meeting Room booking: the message shown when someone picks a weekend or a
    Thai public holiday. The date is cleared at the same time, so this has to
    explain what just happened.  */

.uo-blackout-note {
    margin: 8px 0 0;
    padding: 10px 14px;
    border-left: 4px solid #FFC80C;
    background: #FFF6D9;
    font-size: 14px;
    line-height: 1.45;
    color: #4a4a4a;
}


/*  Locations (Tabbed) template - template-locations-tabs.php
    The three buildings stacked vertically ran to ~6,300px, so they are now one
    tab each, with Overview / Amenities inside, the way the old site did it.
    Everything inside a panel reuses the existing location markup, so only the
    tab furniture is styled here.  */

.uo-loc-nav-wrap {
    border-bottom: 1px solid #e6e3dc;
    margin-bottom: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.uo-loc-nav {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: max-content;
}

.uo-loc-tab {
    position: relative;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 14px 22px 16px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #6d6a63;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.uo-loc-tab:hover,
.uo-loc-tab:focus-visible {
    color: #1a1a1a;
}

.uo-loc-tab.is-active {
    color: #1a1a1a;
    border-bottom-color: #FFC80C;
}

/*  Second level: Overview / Amenities. Pills rather than underlines, so the
    two rows never read as the same control.  */

.uo-loc-subnav {
    display: flex;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.uo-loc-subtab {
    background: #f4f2ec;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #4a4a4a;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.uo-loc-subtab:hover,
.uo-loc-subtab:focus-visible {
    background: #ece8dd;
}

.uo-loc-subtab.is-active {
    background: #FFC80C;
    color: #1a1a1a;
}

.uo-loc-panel[hidden],
.uo-loc-sub[hidden] {
    display: none !important;
}

.locationTabsSection .location-items + .location-items {
    margin-top: 70px;
}

/*  Gallery shots are a plain grid here rather than the stacked full-width
    blocks, so give them a consistent height instead of whatever each file is.  */

.uo-loc-shot figure {
    margin: 0;
}

.uo-loc-shot img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .uo-loc-tab {
        font-size: 16px;
        padding: 12px 16px 14px;
    }
    .locationTabsSection .location-items + .location-items {
        margin-top: 45px;
    }
    .uo-loc-shot img {
        height: 210px;
    }
}


/*--Mobile hero buttons: hide Contact Us under the banner (Sep 2026)--*/

/* banner_buttons (ACF repeater on the Home smartblock) renders two buttons
identically - Book to Visit, then Contact Us - via .bannerOv-btnGroup .row
.col-sm-auto. On mobile the client wants only Book to Visit visible there;
Contact Us stays reachable from the menu and the footer. Desktop keeps both -
this is a mobile-only override, not a data change. */

@media screen and (max-width: 575.98px) {
.bannerOv-btnGroup .row .col-sm-auto:nth-child(2) {
display: none;
}
}


/*--Promotion banner (Sep 2026)--*/

/* Editable ACF field `promotion_banner` (WYSIWYG) on the Home smartblock.
Empty field = banner not rendered (index.php gates on it), so hiding it is
just clearing the text - no separate enable toggle needed. */

.uo-promo-banner {
background: #211F1F;
padding: 14px 0;
text-align: center;
}

.uo-promo-banner p {
margin: 0;
color: #ffffff;
font-size: 16px;
font-weight: 500;
}

.uo-promo-banner strong,
.uo-promo-banner b {
color: #FFC80C;
}

@media screen and (max-width: 575.98px) {
.uo-promo-banner p {
font-size: 14px;
}
}


/*--Promotion banner: fix header overlap (Sep 2026)--*/

/* header is position:fixed;top:0 (overlays the hero by design) and doesn't
account for document flow, so inserting the banner in normal flow before it
just sits underneath/behind the header's own 183px height instead of
pushing it down - the utility row (search/account/cart/phone/language)
ended up visually overlapping the banner text. Promote the banner to fixed
too, pin it above the header, and shift the header + page content down by
its real height (measured in JS - see main-script.js - since the message
length can vary and change how many lines it wraps to). */

:root {
--uo-banner-height: 54px;
}

.uo-promo-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101;
}

body:has(.uo-promo-banner) header {
top: var(--uo-banner-height) !important;
}

body:has(.uo-promo-banner) .main-content-wrapper {
padding-top: var(--uo-banner-height);
}


/*--Promotion banner: header is only fixed at xl+ (Sep 2026)--*/

/* header switches from fixed (overlaying the hero) to position:static below
1200px - confirmed live: static at 1100px, fixed at 1200px. Below that
breakpoint the fixed-banner + header-offset rules above are not just
unneeded, they actively break the mobile/tablet layout (double gap, since
the static header already pushes .main-content-wrapper down on its own).
Reset back to plain document flow there - the banner just needs to sit
above the header like a normal block, no positioning tricks required. */

@media screen and (max-width: 1199.98px) {
.uo-promo-banner {
position: static;
}
body:has(.uo-promo-banner) header {
top: 0 !important;
}
body:has(.uo-promo-banner) .main-content-wrapper {
padding-top: 0;
}
}


/*--Promotion banner: bold text in orange, not brand yellow (Sep 2026)--*/

.uo-promo-banner strong,
.uo-promo-banner b {
color: #FF7A00;
}