/*
 Theme Name:   Red Balloon Child
 Theme URI:    http://example.com/redballoon-child/
 Description:  Red Balloon Child Theme
 Author:       Filip
 Author URI:   http://example.com
 Template:     redballoon
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  redballoon-child
*/

:root {
    --footer-bg-color: #243B90;
    --footer-text-color: #ffffff;
    --color-background-main: #2a2f88;
    --color-white: #fff;
    --color-black: #000;
    --color-text-dark: #333;
    --color-text-medium: #555;
    --color-text-light: #888;
    --color-brand-proprietary: #243b90;
    --color-brand-franchise: #ee005a;
    --color-border: #d4d1e4;
    --color-bg-light: #f8fafc;
    --color-label: #60608b;
    --color-placeholder: #a7a7a7;
    --color-btn-primary: #da195d;
    --color-btn-hover: #b01248;
    --color-btn-text: #efefff;

    --color-overlay-dark: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-50: rgba(255, 255, 255, 0.5);

    --color-orange: #FD4400;

    /* Breakpoints (Note: literal values must still be used in @media queries) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1440px;
}

/* --- Global Overrides --- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
button,
input,
select,
textarea,
div {
    font-family: "Fira Sans", sans-serif !important;
}

.mark,
mark {
    font-size: unset !important;
}

/* --- Navigation --- */
.current-menu-item {
    border-bottom: 3px solid var(--color-btn-primary);
}

/* --- Hero Section & Slider --- */
.hero.hero--home {
    background-color: var(--color-background-main);
}

.hero__text__block {
    text-transform: uppercase;
}

.hero--full-width {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero__slider_container {
    width: 100%;
    height: 600px; /* Default height */
}

.hero__slider_container .lSSlideOuter,
.hero__slider_container .lSSlideWrapper,
.hero__slider_container .lightSlider,
.hero__slider_container .lslide {
    height: 600px !important;
}

.hero__slider_container .lSSlideOuter .lSSlideWrapper ul li img {
    width: 100% !important;
    height: 600px !important;
    object-fit: cover !important;
}

.hero-fallback-image {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero__content_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    background: var(--color-overlay-dark);
}

.hero__content_overlay .hero__content {
    text-align: center;
    color: var(--color-white);
    max-width: 800px;
    padding: 20px;
    pointer-events: auto;
}

.hero__content_overlay .pagetitle {
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--color-white) !important;
    text-shadow: 2px 2px 4px var(--color-shadow-dark);
}

@media (max-width: 768px) {
    .hero__slider_container,
    .hero__slider_container .lSSlideOuter,
    .hero__slider_container .lSSlideWrapper,
    .hero__slider_container .lightSlider,
    .hero__slider_container .lslide,
    .hero__slider_container .lSSlideOuter .lSSlideWrapper ul li img,
    .hero-fallback-image {
        height: 400px !important;
        min-height: 400px !important;
    }

    .hero__content_overlay .pagetitle {
        font-size: 2.5rem;
    }
}

.brand-portfolio-content {
    padding: 2rem 30%;
    text-align: center;
}

@media (max-width: 1440px) {
    .brand-portfolio-content {
        padding: 2rem 5rem 2rem 5rem;
    }
}

/* --- Brand Filter Section --- */
.brand-filter-section {
    grid-column: 1 / -1; /* Span full width of the grid */
    width: 100%;
    margin-bottom: 30px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.brand-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px !important;
    width: 100%;
    padding: 20px 56px; /* Matching the 'left: 56px' from the template */
    box-sizing: border-box;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group.search-group {
    flex: 1; /* Search takes remaining space */
    min-width: 250px;
}

.filter-group.location-group,
.filter-group.category-group,
.filter-group.type-group {
    width: 180px !important;
}

.filter-group.button-group {
    width: 160px !important;
}

.filter-label {
    color: var(--color-label);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

.filter-input,
.filter-select {
    width: 100%;
    height: 48px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    padding: 0 16px;
    font-size: 14px;
    color: var(--color-text-dark);
    border-radius: 0; /* Reset browser default */
    box-sizing: border-box;
}

.filter-input::placeholder {
    color: var(--color-placeholder);
}

.filter-select {
    appearance: none; /* Remove default arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2211%22%20height%3D%227%22%20viewBox%3D%220%200%2011%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.17969%206.5L0.849561%200.5L9.50982%200.5L5.17969%206.5Z%22%20fill%3D%22%230C1A4A%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.filter-btn {
    width: 100%;
    height: 48px;
    background: var(--color-btn-primary);
    color: var(--color-btn-text);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-btn:hover {
    background: var(--color-btn-hover);
}

@media (max-width: 1440px) {
    .brand-filter-form {
        padding: 20px 20px !important;
    }
}

@media (max-width: 768px) {
    .brand-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group.search-group,
    .filter-group.location-group,
    .filter-group.category-group,
    .filter-group.type-group,
    .filter-group.button-group {
        width: 100% !important;
    }
}

/* --- Brand Grid & Blocks --- */
.brand-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.brand-grid-item {
    width: 100%;
    border: 1px solid var(--color-border);
}

.brand_block {
    height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: var(--color-white);
    padding: 20px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.brand_block_inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.brand-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.brand-meta-item.type {
    width: fit-content;
    text-align: left;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
    padding: 0.7rem 1rem;
    border-radius: 2px;
}

.brand-meta-item.typetype-proprietary {
    background-color: var(--color-brand-proprietary);
    color: var(--color-white);
}

.brand-meta-item.type.type-franchise {
    background-color: var(--color-brand-franchise);
    color: var(--color-white);
}

.brand-meta-info .pagetitle {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 800;
    line-height: 2.5rem;
}

.brand_logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
    min-height: 0;
    margin: 10px 0; /* Add some spacing around logo */
}

.brand_logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
}

.brand_info_bottom {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.brand_name {
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 5px;
    line-height: 1.2;
    text-transform: capitalize;
}

.brand_location {
    margin-bottom: 0;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: var(--color-text-medium);
    margin-top: 0;
    line-height: 1.2;
}

.brand_overlay {
    z-index: 3 !important;
}

/* --- Menu links --- */

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
    text-decoration: underline;
}

.menu-links li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .menu-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.menu-links li::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='21' viewBox='0 0 17 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.25 0C9.44347 0 10.5877 0.474446 11.4316 1.31836C11.4906 1.37731 11.5472 1.4382 11.6025 1.5H15C15.3978 1.5 15.7792 1.65815 16.0605 1.93945C16.3419 2.22076 16.5 2.60218 16.5 3V18.75C16.5 19.1478 16.3419 19.5292 16.0605 19.8105C15.7792 20.0919 15.3978 20.25 15 20.25H1.5C1.10218 20.25 0.720759 20.0919 0.439453 19.8105C0.158149 19.5292 0 19.1478 0 18.75V3C0 2.60217 0.158149 2.22076 0.439453 1.93945C0.720757 1.65815 1.10217 1.5 1.5 1.5H4.89746C4.95277 1.4382 5.0094 1.37731 5.06836 1.31836C5.91227 0.474446 7.05653 0 8.25 0ZM1.5 3V18.75H15V3H12.4922C12.6611 3.4773 12.75 3.98401 12.75 4.5V5.25C12.75 5.66421 12.4142 6 12 6H4.5C4.08579 6 3.75 5.66421 3.75 5.25V4.5C3.75 3.98401 3.83893 3.4773 4.00781 3H1.5ZM11.25 12C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H5.25C4.83579 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.83579 12 5.25 12H11.25ZM11.25 9C11.6642 9 12 9.33579 12 9.75C12 10.1642 11.6642 10.5 11.25 10.5H5.25C4.83579 10.5 4.5 10.1642 4.5 9.75C4.5 9.33579 4.83579 9 5.25 9H11.25ZM8.25 1.5C7.45435 1.5 6.69152 1.8163 6.12891 2.37891C5.5663 2.94152 5.25 3.70435 5.25 4.5H11.25C11.25 3.70435 10.9337 2.94152 10.3711 2.37891C9.80849 1.8163 9.04565 1.5 8.25 1.5Z' fill='%23FD4400'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* --- Footer Section --- */
.site_footer {
    background-color: var(--footer-bg-color, #243B90) !important;
    color: var(--footer-text-color, #ffffff) !important;
    position: relative;
    z-index: 99;
    display: block !important;
    min-height: 100px;
    overflow: visible !important;
}

.site_footer p,
.site_footer li,
.site_footer h4,
.site_footer a {
    color: var(--footer-text-color, #ffffff) !important;
}

.footer-company-title {
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.footer-brand-title {
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-address {
    line-height: 1.5;
    opacity: 0.8;
}

.site_footer__grid_custom {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 40px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.site_footer__column h4 {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: bold;
}

.site_footer__column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site_footer__column ul li {
    margin-bottom: 10px;
}

.site_footer__column ul li a {
    text-decoration: none;
    opacity: 0.8;
}

.site_footer__column ul li a:hover {
    opacity: 1;
}

.site_footer__bottom {
    padding: 20px 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    opacity: 0.8;
    border-top: 1px solid var(--color-white-20);
}

.site_footer__social_custom a {
    margin-left: 20px;
    display: inline-block;
}

@media (max-width: 768px) {
    .site_footer__grid_custom {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }

    .site_footer__bottom {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .site_footer__social_custom {
        margin-top: 20px;
    }
}

/* --- Miscellaneous --- */
.top-banner {
    padding: 3rem 5rem;
}

@media (max-width: 768px) {
    .top-banner {
        padding: 3rem 2rem;
    }
}

.contact_page .article_flex {
    background: none !important;
}

.partner-with-us,
.our-awards {
    padding: 0 4rem 4rem 4rem;
}

.partner-with-us h2,
.our-awards h2,
.partnership-banner h2 {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2rem;
}

.partner-with-us h3,
.our-awards h3,
.partnership-banner h3 {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.8rem;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 2rem;
}

.partner-with-us {
    width: 60%;
    text-align: left;
    margin: 0 auto;
}


.partner-with-us .wp-block-group {
    gap: 1rem;
}

.partner-with-us .wp-block-button {
    width: 100%;
    height: 100%;
}

.wp-block-button a {
    text-align: unset;
    align-content: unset;
    padding: 0.5rem 1rem 0.5rem 0rem;
}

.wp-block-button a:hover {
    text-decoration: underline;
    color: var(--color-btn-text) !important;
}

.wp-block-button a::before,
.wp-block-button a::after,
.wp-block-button a::after {
    content: "";
    color: var(--color-white);
    display: inline-block;
    vertical-align: middle;
    height: 2rem;
    width: 1.1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.wp-block-button a::before {
    background-position: center;
}

.wp-block-button a::after,
.wp-block-button a::after {
    margin-left: 1rem;
    float: right;
    background-position: right center;
    background-image: url(./images/social/arrow-right-btn.png);
    background-image: url(./images/social/arrow-right-btn.svg);
}

.wp-block-button.btn-linkedin a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/linkedin-btn.png);
    background-image: url(./images/social/linkedin-btn.svg);
}

.wp-block-button.btn-brands a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/puzzle-btn.png);
    background-image: url(./images/social/puzzle-btn.svg);
}

.wp-block-button.btn-instagram a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/instagram-btn.png);
    background-image: url(./images/social/instagram-btn.svg);
}

.wp-block-button.btn-story a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/compas-btn.png);
    background-image: url(./images/social/compas-btn.svg);
}

.wp-block-button.btn-vine-glass a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/vine-glass-btn.png);
    background-image: url(./images/social/vine-glass-btn.svg);
}

.wp-block-button.btn-hamburger a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/hamburger-btn.png);
    background-image: url(./images/social/hamburger-btn.svg);
}

.wp-block-button.btn-handbag a::before {
    margin: 0rem 1rem;
    background-image: url(./images/social/handbag-btn.png);
    background-image: url(./images/social/handbag-btn.svg);
}

@media (max-width: 1440px) {
    .partner-with-us {
        width: 100%;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .partner-with-us .wp-block-group:has(.wp-block-button) {
        display: block;
    }

    .partner-with-us .wp-block-button {
        padding: 0.7rem 0;
    }
}

.our-awards .wp-block-group {
    padding-bottom: 1rem;
}

.our-awards .has-medium-font-size {
    padding-bottom: 0;
}

.partnership-banner {
    padding: 2rem 4rem 4rem 4rem;
    background-image: url("./images/new-business/partnership-back.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Brand Single Page Layout --- */
.brand-container {
    max-width: 1440px;
    margin: 60px auto;
    padding: 0 56px;
    display: block; /* Default stack */
}

.brand-logo-single {
    max-width: 10rem;
    margin-bottom: 20px;
}

@media (min-width: 1440px) {
    .brand-container {
        max-width: 100% !important;
        margin: 5rem 3rem !important;
        padding: 0 !important;
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: stretch;
    }

    .brand-logo-single img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .brand-details {
        padding-right: 3rem;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }


    .brand-meta-info div {
        padding-bottom: 1rem;
    }

    .brand-gallery-bottom {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 600px;
        overflow: hidden;
    }

    .brand-gallery-with-thumbnails .item .clearfix {
        max-width: none !important;
    }

    .brand-gallery-with-thumbnails .lSSlideOuter {
        max-width: none !important;
    }

    .brand-details {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

@media (max-width: 1439px) {
    .brand-container {
        padding: 0 20px;
    }

    .brand-details,
    .brand-gallery-bottom {
        width: 100%;
        display: block;
        margin-bottom: 40px;
    }
}

/* --- GWTS Gallery Thumbnail Slider Styling --- */
.lSSlideOuter .lSPager.lSGallery {
    flex-wrap: wrap !important;
}

.brand-gallery-bottom {
    padding: 0 3rem;
    margin: 3rem auto;
    min-height: 400px;
}

.brand-gallery-with-thumbnails .lSSlideOuter {
    width: 100% !important;
    overflow: hidden !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper {
    margin: 0 !important; /* Reset margin to fill container */
    height: auto !important;
    min-height: 400px;
    overflow: hidden !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper ul li {
    height: auto !important;
    min-height: 400px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper ul li img {
    width: 100% !important;
    height: 600px !important;
    object-fit: cover !important; /* Fill container like header slider */
    background-color: #f4f4f4;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.brand-gallery-with-thumbnails .gwts-gwl-slidergal {
    opacity: 1 !important;
    visibility: visible !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSPager.lSGallery {
    width: 100% !important;
    margin-top: 20px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSPager.lSGallery li {
    opacity: 1 !important;
    margin-right: 10px !important;
    transition: transform 0.3s ease;
    width: 130px !important;
    padding: 0 !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSPager.lSGallery li img {
    padding: 0.5rem 0;
    border: 3px solid transparent;
    transition: border-color 0.3s ease;
    object-fit: cover !important;
    display: block !important;
}

.brand-gallery-with-thumbnails .lSSlideOuter .lSPager.lSGallery li.active img {
    border-color: var(--color-orange) !important;
}

@media (max-width: 1440px) {
    .brand-gallery-bottom {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .brand-gallery-bottom,
    .brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper,
    .brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper ul li {
        min-height: 300px !important;
    }

    .brand-gallery-with-thumbnails .lSSlideOuter .lSSlideWrapper ul li img {
        max-height: 400px !important;
    }
}

/* --- GWTS Gallery Arrow Customization --- */
.lSAction > a {
    transform: scale(2) !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    z-index: 999 !important;
    filter: brightness(0) invert(1) !important; /* Forces image arrows to white */
    position: absolute !important;
    top: 50% !important;
    margin-top: -16px !important;
}

.lSAction > a:hover {
    opacity: 1 !important;
    transform: scale(2.2) !important;
}

.lSAction > .lSPrev {
    left: 40px !important;
}

.lSAction > .lSNext {
    right: 40px !important;
}

@media (max-width: 768px) {
    .lSAction > a {
        transform: scale(1.5) !important;
    }

    .lSAction > a:hover {
        transform: scale(1.7) !important;
    }

    .lSAction > .lSPrev {
        left: 20px !important;
    }

    .lSAction > .lSNext {
        right: 20px !important;
    }
}

/* --- Lightbox Arrow Customization --- */
.lg-actions .lg-next,
.lg-actions .lg-prev {
    transform: scale(2) !important;
    transition: transform 0.3s ease, color 0.2s linear !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important; /* Sets font icon arrows to white */
}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
    transform: scale(2.2) !important;
}

.lg-actions .lg-next {
    right: 40px !important;
}

.lg-actions .lg-prev {
    left: 40px !important;
}

@media (max-width: 768px) {
    .lg-actions .lg-next,
    .lg-actions .lg-prev {
        transform: scale(1.5) !important;
    }

    .lg-actions .lg-next {
        right: 20px !important;
    }

    .lg-actions .lg-prev {
        left: 20px !important;
    }
}

/* --- Hero Slider Pager (Dots) Customization --- */
.hero__slider_container .lSSlideOuter .lSPager.lSpg {
    position: absolute !important;
    bottom: 20px !important;
    width: 100% !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.hero__slider_container .lSSlideOuter .lSPager.lSpg > li a {
    background-color: rgba(255, 255, 255, 0.5) !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.hero__slider_container .lSSlideOuter .lSPager.lSpg > li.active a,
.hero__slider_container .lSSlideOuter .lSPager.lSpg > li:hover a {
    background-color: #fff !important;
    transform: scale(1.2) !important;
}


.our-impact-top {
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.our-impact-cards,
.about-us-cards {
    gap: 2rem;
    margin: 4rem;
}

.our-impact-top .wp-block-button__link::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23da195d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%23da195d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.our-impact-cards .wp-block-media-text__content,
.about-us-cards .wp-block-media-text__content {
    padding: 1.5rem 2rem;
    min-width: 500px;
}

@media (max-width: 1439px) {
    .our-impact-cards,
    .about-us-cards {
        margin: 3rem 0 3rem 0;
        padding: 0;
        grid-template-columns: 100% !important;
        gap: 0;
    }

    .our-impact-cards .wp-block-media-text,
    .about-us-cards .wp-block-media-text {
        grid-template-columns: 100% !important;
    }
    
    .our-impact-cards .wp-block-media-text__content
    .about-us-cards .wp-block-media-text__content {
        min-width: unset;
        padding: 2rem;
    }

    .our-impact-cards .wp-block-media-text__content,
    .about-us-cards .wp-block-media-text__content {
        padding: 1rem;
        min-width: unset;
    }

    .our-impact-cards .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
    .about-us-cards .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .our-impact-cards .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content,
    .about-us-cards .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .our-impact-cards .wp-block-media-text.is-stacked-on-mobile img
    .about-us-cards .wp-block-media-text.is-stacked-on-mobile img {
        position: unset;
    }

    .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media  {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }
}

.our-impact-cards .wp-block-media-text__content .wp-block-group h2,
.our-impact-cards .wp-block-media-text__content .wp-block-group h3,
.our-impact-cards .wp-block-media-text__content .wp-block-group p,
.about-us-cards .wp-block-media-text__content .wp-block-group h2,
.about-us-cards .wp-block-media-text__content .wp-block-group h3,
.about-us-cards .wp-block-media-text__content .wp-block-group p{
    margin-bottom: 0.5rem !important;
}

.timeline {
    display: flex;
    margin: 4rem;
    gap: 0;
    align-items: flex-start;
}

.timeline .wp-block-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #FD4400;
    flex-grow: 1;
    position: relative;
}

.timeline .wp-block-group::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 7px;
    height: 100%;
    aspect-ratio: 30 / 129;
    background-image: url('/wp-content/uploads/2026/02/Pointer-Vertical.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left center;
}

.timeline .wp-block-group .wp-block-group__inner-container {
    padding: 0 20px 40px 40px;
    height: 200px;
    max-width: 300px;
}

@media (max-width: 1439px) {
    .timeline {
        margin: 2rem;
        flex-direction: column !important;
    }

    .timeline .wp-block-group {
        align-items: flex-start;
        border-bottom: none;
        border-left: 1px solid #FD4400;
    }

    .timeline .wp-block-group::before {
        width: 129px;
        height: auto;
        top: 5px;
        left: 70px;
        transform: rotate(90deg);
        transform-origin: top;
        scale: 0.25;
    }

    @media (max-width: 768px) {
        .timeline .wp-block-group::before {
            left: 17px;
            scale: 0.15;
        }
        .timeline .wp-block-group .wp-block-group__inner-container {
            padding: 0 0 0 100px !important;
        }
    }

    .timeline .wp-block-group .wp-block-group__inner-container {
        padding: 0 20px 20px 150px;
        height: auto;
        max-width: none;
        width: 100%;
        top: -20px;
        position: relative;
    }
}

/* TRG Interactive Map - Final Responsive Layout */
.trg-map-container {
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #efeef7;
}

.trg-map-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.trg-map-wrapper img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.trg-map-sidebar{
    background-color: var(--color-white) !important;
    padding: 2rem !important;
    border: 1px solid var(--color-border);
}

.trg-map-brands {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trg-map-details h3 {
    text-align: center;
    color: #EE005A;
    border-bottom: none !important;
    margin-bottom: 3rem;
}

.trg-map-brand {
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-color: #fff;
}

.trg-map-brand a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.trg-map-brand img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block !important;
}

@media (min-width: 1024px) {
    .trg-map-container {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .trg-map-main {
        flex: 0 0 40%; /* Map takes exactly 40% */
        max-width: 40%;
    }
    
    .trg-map-sidebar {
        flex: 0 0 60%; /* Sidebar takes exactly 60% */
        max-width: 60%;
        position: sticky;
        top: 20px;
        padding-left: 40px;
    }
    
    .trg-map-wrapper {
        width: 100% !important; /* Allow map to fill its 50% container */
    }
    
    .trg-map-wrapper img {
        width: 100% !important;
        height: auto !important;
        max-height: 85vh;
        object-fit: contain;
    }

    .trg-map-brands {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.brand-pillars {
    gap: 0px;
    margin: 2rem;
}

.brand-pillars .wp-block-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    width: 23%;
}

@media (max-width: 1439px) {
    .brand-pillars .wp-block-group {
        width: 46%;
    }
}

@media (max-width: 768px) {
    .brand-pillars .wp-block-group {
        width: 100%;
    }
}

.brand-pillars .wp-block-group p {
    margin-bottom: 0;
}

.trg-card-feed {
    margin: 0;
}

.latest-news {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0rem 4rem 4rem 4rem;
    background-color: #F7FBFF;
}

@media (max-width: 768px) {
    .latest-news {
        padding: 0rem 1rem 2rem 1rem;
    }
}

.latest-news-title h2{
    margin: 0;
}

.latest-news .trg-card-image {
    padding: 1rem;
}

.latest-news .trg-card-button {
    width: fit-content;
    padding: 0.7rem 1rem;
}

.homepage-text-content {
    padding: 2rem 25%;
    text-align: center;
}

.homepage-brand-links {
    margin-bottom: 4rem;
}

.new-openings {
    padding: 0rem 4rem 4rem 4rem;
}

.new-openings .wp-block-media-text {
    align-items: stretch !important;
}

.new-openings .wp-block-media-text__content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.new-openings .wp-block-media-text__content > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.new-openings .wp-block-media-text__content p:first-child {
    padding: 0.5rem 1rem;
    width: fit-content;
}

.new-openings .wp-block-media-text__content p:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

.new-openings .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.new-openings .wp-block-group-is-layout-grid .wp-block-media-text {
    background-color: #F2F4F5;
}

@media (max-width: 1439px) {
    .homepage-text-content {
        padding: 2rem 10%;
    }

    .new-openings {
        padding: 0rem 1rem 2rem 1rem;
        margin: 0 auto;
        max-width: 600px !important;
    }

    .new-openings .wp-block-media-text__content p:last-child {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .new-openings .wp-block-group-is-layout-grid {
        grid-template-columns: 100%;
    }

    .new-openings .wp-block-media-text.has-media-on-the-right {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* --- Brand Location Tooltip --- */
.brand_location_multiple {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--color-btn-primary);
    font-weight: 600;
}

.brand_location_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23da195d' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.532 0 200 89.431 200 200 0 110.495-89.472 200-200 200zm107.244-255.2c0 67.052-72.43 68.08-72.43 105.204 0 10.471-8.488 18.959-18.958 18.959h-31.712c-10.47 0-18.959-8.488-18.959-18.959 0-63.151 72.43-66.122 72.43-105.204 0-26.213-20.474-38.336-40.454-38.336-31.138 0-40.71 20.43-56.955 37.146-5.46 5.621-14.56 6.102-20.621.579l-22.61-20.61c-6.197-5.652-6.478-15.188-.597-21.177 30.147-30.676 59.715-58.999 116.33-58.999 52.974 0 96.149 35.703 96.149 81.4zM256 352c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.brand_location_tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 100;
    width: max-content;
    max-width: 250px;
    pointer-events: auto;
}

.brand_location_multiple.is-active .brand_location_tooltip {
    display: block;
}

.tooltip_location_item {
    font-size: 13px;
    color: var(--color-text-dark);
    padding: 4px 0;
    border-bottom: 1px solid var(--color-bg-light);
    white-space: normal;
    text-transform: uppercase;
}

.tooltip_location_item:last-child {
    border-bottom: none;
}

/* Adjust brand_block to allow tooltip visibility */
.brand-grid-item.has-active-tooltip {
    z-index: 100;
}

.brand_block.has-active-tooltip {
    overflow: visible !important;
}

mark {
    background: transparent;
    padding: 0;
    color: inherit;
}