/**
 * GD Region Selector
 * Styles for the region switcher dropdown.
 *
 * @package gd-regional-pricing
 */

/* ── CSS Variables ── */
.gd-region-selector-wrap {
    --cl-w:       #fff;
    --cl-ch-200:  #e3e3e8;
    --cl-ch-400:  #787887;
    --cl-ch-600:  #232329;
    --cl-ch-700:  #0c0c0e;
    --cl-hb-100:  #e5e5ff;
    --cl-hb-200:  #b2b2ff;
    --cl-hb-300:  #7e7eff;
    --cl-hb-400:  #0584c7;
}

/* ── Wrapper ── */
.gd-region-selector-wrap {
    display: flex;
    position: static;
    list-style: none;
    padding: 0 16px;
    margin: 0;
    align-items: center;
    justify-content: center;
}

/* ── Globe icon trigger ── */
.gd-region-selector-wrap .region-switcher {
    display: block;
    position: relative;
    padding-right: 1rem;
    text-decoration: none;
    height: 1.5rem;
    color: var(--cl-ch-700);
    cursor: pointer;
}

.gd-region-selector-wrap .region-switcher svg {
    max-width: 24px;
    position: relative;
}

.gd-region-selector-wrap .region-switcher svg path {
    fill: transparent;
}

/* Chevron via ::before */
.gd-region-selector-wrap .region-switcher::before {
    content: "";
    border-width: 0 1.5px 1.5px 0;
    border-style: solid;
    border-color: var(--cl-ch-700);
    padding: 3px;
    position: absolute;
    top: 0.5rem;
    right: 0;
    transform: rotate(45deg);
    transform-origin: 0.2rem 50%;
    transition: transform 0.25s;
}

.gd-region-selector-wrap:hover > .region-switcher::before,
.gd-region-selector-wrap.show-dd > .region-switcher::before {
    transform: rotate(-135deg);
    top: 0.6rem;
}

/* ── Dropdown panel — mobile ── */
.gd-region-selector-wrap .dd {
    position: absolute;
    right: 110%;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: var(--cl-w);
    color: var(--cl-ch-700);
    padding: 1rem;
    z-index: 9;
    transition: right 0.2s;
    visibility: hidden;
    opacity: 0;
}

/* Slide in when active */
.gd-region-selector-wrap.show-dd .dd {
    visibility: visible;
    opacity: 1;
    right: 0;
    height: 100vh;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--cl-ch-600) transparent;
    transition: right 0.2s;
}

/* ── .dd--new modifiers ── */
.gd-region-selector-wrap .dd--new {
    --left: -132px;
    --right: auto;
}

.gd-region-selector-wrap .dd--new.dd--regions {
    --left: auto;
    --right: auto;
    padding-top: 2rem;
}

/* ── dd-inner grid ── */
.gd-region-selector-wrap .dd .dd-inner {
    display: grid;
    gap: 2rem;
    margin: 0 auto;
    max-width: 1200px;
    grid-template-areas:
        "back"
        "one"
        "two"
        "three";
    padding-top: 1rem;
}

/* Pseudo-element spacer at top */
.gd-region-selector-wrap.show-dd .dd .dd-inner::before {
    content: "";
    display: block;
    height: 4rem;
    position: fixed;
    background: var(--cl-w);
    width: 100%;
    top: 0;
    z-index: 1;
}

/* ── dd-inner--sections ── */
.gd-region-selector-wrap .dd--new .dd-inner--sections {
    display: grid;
    gap: 1rem;
}

/* ── section ── */
.gd-region-selector-wrap .dd--new .dd-inner--sections section {
    display: grid;
    gap: 1rem;
    height: 100%;
    background: var(--cl-w);
    border-radius: 8px;
    padding: 24px 0 24px 24px;
}

/* ── Back button (mobile only) ── */
.gd-region-selector-wrap .dd .dd__back {
    display: inline-block;
    font-weight: 600;
    grid-area: back;
    padding: 0.375rem 6px 1px;
    margin: 0 0 16px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    text-align: left;
    width: 90%;
    font-size: 1rem;
    position: fixed;
    top: 1rem;
    z-index: 2;
}

/* ── Region list — remove left border ── */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list {
    display: grid;
    grid-template-columns: 1fr;
    border-left: none;
    padding: 0;
    list-style: none;
    margin: 0;
}

.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li {
    padding: 0;
    position: relative;
}

.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li + li {
    margin-top: 0;
}

/* ── Region links ── */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li a {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    display: block;
    position: relative;
    color: var(--cl-ch-700);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Active region highlight */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li a.is-active {
    color: var(--cl-hb-400);
}

/* Remove animated left border */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li a::before {
    display: none;
}

/* Remove arrow on hover */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li a div {
    position: relative;
    padding-right: 0;
}

.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li a div::after {
    display: none;
}

/* Gap spacer items */
.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li.gap {
    height: 1.5rem;
}

.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li.gap--sm {
    height: 1rem;
}

.gd-region-selector-wrap .dd--new .dd-inner--sections section .subnav--list li.gap::before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    position: absolute;
    left: -2px;
    border-left: 2px solid var(--cl-w);
}

/* Hide desktop globe trigger on mobile */
#gdNavRegion {
    display: none;
}

@media (min-width: 1024px) {
    #gdNavRegion {
        display: block;
    }
}

/* Hide on desktop — shown in hamburger only */
li.gd-region-trigger {
    display: list-item;
}

/* Globe icon button */
.gd-region-mobile-globe {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 0.5rem 0;
}

.gd-region-mobile-globe svg {
    max-width: 24px;
}

/* Sub-menu — hidden by default */
.gd-region-sub-menu {
    display: none;
    list-style: none;
    padding: 0 0 0 1rem;
    margin: 0;
    border-left: 2px solid var(--cl-ch-200, #e3e3e8);
}

/* Show sub-menu when parent has .open */
li.gd-region-trigger.open .gd-region-sub-menu {
    display: block;
}

/* Sub-menu items */
.gd-region-sub-item {
    position: relative;
}

.gd-region-sub-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #0c0c0e;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.gd-region-sub-link:hover,
.gd-region-sub-link.is-active {
    color: #0584c7;
}

/* ── Desktop overrides (min-width: 1024px) ── */
@media (min-width: 1024px) {

    /* Hide mobile region trigger on desktop */
    li.gd-region-trigger {
        display: none !important;
    }

    .gd-region-selector-wrap .dd--new {
        transition: opacity 0.15s, visibility 40ms 40ms;
        right: var(--right);
        width: auto;
        top: 81px;
        left: var(--left);
        border-radius: 1rem;
        background: var(--cl-w);
        padding: 0;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 0;
        visibility: hidden;
        opacity: 0;
        min-height: unset;
        height: auto;
    }

    /* Show on hover or JS toggle */
    .gd-region-selector-wrap:hover .dd--new,
    .gd-region-selector-wrap.show-dd .dd--new {
        visibility: visible;
        opacity: 1;
    }

    .gd-region-selector-wrap .dd--new.dd--regions {
        --left: auto;
        --right: auto;
        padding-top: 0;
    }

    .gd-region-selector-wrap .dd--new .dd-inner {
        gap: 0;
    }

    .gd-region-selector-wrap .dd--new .dd-inner--sections {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: space-between;
        height: 100%;
    }

    .gd-region-selector-wrap .dd--new .dd-inner--sections section {
        /* Reduced top padding so Ireland sits closer to top of box */
        padding: 0.75rem 0 1.5rem 1.5rem;
        border-radius: 0.5rem;
        width: 100%;
        gap: 0;
        grid-auto-rows: min-content;
    }

    .gd-region-selector-wrap .dd--new .dd-inner--sections:last-child section {
        padding: 0.75rem 1.5rem 1.5rem;
    }

    .gd-region-selector-wrap .dd--new .dd-inner__regions a {
        font-size: 0.875rem;
    }

    /* Hide back button on desktop */
    .gd-region-selector-wrap .dd .dd__back {
        display: none;
    }

    /* Hide top spacer on desktop */
    .gd-region-selector-wrap.show-dd .dd .dd-inner::before {
        display: none;
    }

    .gd-region-selector-wrap .region-switcher {
        display: block;
        padding-right: 1rem;
        text-decoration: none;
        position: relative;
        height: 1.5rem;
    }

    .gd-region-selector-wrap .region-switcher svg {
        max-width: 24px;
        position: relative;
    }
}

@media (max-width: 1025px) {
    .gd-region-selector-wrap .region-switcher {
        display: none;
    }
}