/* Marina Bay Sands - Tour-specific styles */
/* This file is NOT synced across tours */

/* S Livernois - Marcellus font (from original Panotour MBS tour) */
@font-face {
    font-family: 'Marcellus';
    font-weight: 400;
    font-display: swap;
    src: url('media/fonts/Marcellus-Regular.woff2') format('woff2');
}

/* S Livernois - MBS color and font variable overrides */
body {
    --font-primary: 'Marcellus', Arial, sans-serif;
    --primary-color: #B5985A;
    --primary-color-rgb: 181, 152, 90;
    --secondary-color: #CFCFCF;
    --secondary-color-rgb: 207, 207, 207;
    --btn-icon-color: #ffffff;
}

/* S Livernois - Language button: SVG has no .icon class, force white fill */
section[btns][common] my-btn.lang svg path {
    fill: #ffffff;
}

/* =====================================================
   S Livernois - MBS Top Menu Bar
   Replicates original Panotour desktop navbar:
   transparent bar, Marcellus font, border + diamond
   decorations on hover, white dropdowns with dark text.
   All selectors use body.menu-top prefix for specificity.
   ===================================================== */

/* S Livernois - Menu bar: transparent background, no rounded corners */
body.menu-top top-menu {
    background-color: transparent;
    border-radius: 0;
    height: auto;
    gap: 5px; /* J. Louis - Keep adjacent top-menu items visually separated. */
}

/* J. Louis - Improve menu contrast with a non-interactive top shadow when the pointer approaches the desktop navigation. */
@media screen and (min-width: 1101px) and (pointer: fine) {
    body.menu-top section[ui]::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 11rem;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.24) 52%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }

    body.menu-top.menu-proximity-active section[ui]::before {
        opacity: 1;
    }
}

/* S Livernois - Menu item titles: Marcellus font, transparent bg, border on hover */
body.menu-top top-menu top-menu-item top-menu-item-title {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: normal;
    background-color: transparent;
    border-left: none;
    padding: 1.3rem 1.5rem 1rem 1.5rem;
    border: 0.5px solid transparent;
    transition: border-color 0.5s ease;
}

/* S Livernois - No rounded corners on first/last items */
body.menu-top top-menu top-menu-item:first-child top-menu-item-title,
body.menu-top top-menu top-menu-item:last-child top-menu-item-title {
    border-radius: 0;
}

/* J. Louis - Separate the Sands room categories from the Paiza categories as in the original tour. */
body.menu-top top-menu > top-menu-item:nth-child(5) {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

/* S Livernois - Border appears on hover, open, and active */
body.menu-top top-menu top-menu-item:hover > top-menu-item-title,
body.menu-top top-menu top-menu-item.open > top-menu-item-title,
body.menu-top top-menu top-menu-item:has(acc-menu-item.active) > top-menu-item-title {
    border-color: #fafafa;
}


/* =====================================================
   S Livernois - Diamond Decorations
   Three diamonds appear on hover: one large centered
   above the button (::before), two small flanking ones
   on span-lang (::before/::after) that slide inward.
   Replaces core ::after diamond indicator.
   ===================================================== */

/* S Livernois - Hide core diamond indicator */
body.menu-top top-menu top-menu-item > top-menu-item-title::after {
    display: none;
}

/* S Livernois - Big diamond above center of menu item */
body.menu-top top-menu top-menu-item > top-menu-item-title::before {
    content: '';
    position: absolute;
    left: 0; right: 0; margin: auto;
    top: -0.6rem;
    width: 1.4rem; height: 1.4rem;
    border: 1px solid #ffffff;
    background: transparent;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease;
    box-sizing: border-box;
    pointer-events: none;
}

/* S Livernois - Big diamond visible on hover, open, and active */
body.menu-top top-menu top-menu-item:hover > top-menu-item-title::before,
body.menu-top top-menu top-menu-item.open > top-menu-item-title::before,
body.menu-top top-menu top-menu-item:has(acc-menu-item.active) > top-menu-item-title::before {
    opacity: 1;
}

/* J. Louis - Keep span-lang static so the flanking diamonds anchor to the menu title border. */
body.menu-top top-menu top-menu-item top-menu-item-title span-lang {
    position: static;
    display: inline-block;
}

/* S Livernois - Small flanking diamonds on span-lang */
body.menu-top top-menu top-menu-item top-menu-item-title span-lang::before,
body.menu-top top-menu top-menu-item top-menu-item-title span-lang::after {
    content: '';
    position: absolute;
    top: -0.4rem;
    width: 0.8rem; height: 0.8rem;
    border: 1px solid #ffffff;
    background: transparent;
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.5s ease;
    box-sizing: border-box;
    pointer-events: none;
}

/* S Livernois - Left small diamond starts at left edge */
body.menu-top top-menu top-menu-item top-menu-item-title span-lang::before {
    left: 0;
}

/* S Livernois - Right small diamond starts at right edge */
body.menu-top top-menu top-menu-item top-menu-item-title span-lang::after {
    right: 0;
}

/* S Livernois - Small diamonds slide inward on hover, open, and active */
body.menu-top top-menu top-menu-item:hover top-menu-item-title span-lang::before,
body.menu-top top-menu top-menu-item.open top-menu-item-title span-lang::before,
body.menu-top top-menu top-menu-item:has(acc-menu-item.active) top-menu-item-title span-lang::before {
    left: calc(50% - 1.5rem);
    opacity: 1;
}

body.menu-top top-menu top-menu-item:hover top-menu-item-title span-lang::after,
body.menu-top top-menu top-menu-item.open top-menu-item-title span-lang::after,
body.menu-top top-menu top-menu-item:has(acc-menu-item.active) top-menu-item-title span-lang::after {
    right: calc(50% - 1.5rem);
    opacity: 1;
}


/* =====================================================
   S Livernois - Dropdown Styling
   White background with dark text, matching Panotour
   desktop dropdown look. Gold accents on groups.
   ===================================================== */

/* S Livernois - Dropdown container: white background, no rounded corners */
body.menu-top top-menu acc-menu > acc-menu-item-children {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0;
    border: none;
}

/* S Livernois - Dropdown arrow: white triangle to match white dropdown */
body.menu-top top-menu top-menu-item top-menu-item-menu acc-menu::before {
    border-color: transparent transparent rgba(255, 255, 255, 0.85) transparent;
}

/* S Livernois - Dropdown group titles: dark text on white bg, Marcellus font */
body.menu-top top-menu acc-menu acc-menu-group > acc-menu-item-title {
    font-family: var(--font-primary);
    color: #333333;
    background-color: transparent;
    border-left: none;
    border-bottom-color: #d0d0d0;
}

/* S Livernois - Dropdown group title hover: light gray */
body.menu-top top-menu acc-menu acc-menu-group > acc-menu-item-title:hover,
body.menu-top top-menu acc-menu acc-menu-group > acc-menu-item-title:focus {
    background-color: #f2f2f2;
}

/* S Livernois - Dropdown chevron: dark for white bg */
body.menu-top top-menu acc-menu acc-menu-group > acc-menu-item-title::after {
    border-bottom-color: #333333;
    border-right-color: #333333;
}

/* S Livernois - Dropdown items: dark text, Marcellus font */
body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title {
    font-family: var(--font-primary);
    color: #333333;
}

/* S Livernois - Dropdown item dividers: gray */
body.menu-top top-menu acc-menu acc-menu-item:not(:last-child) > acc-menu-item-title {
    border-bottom-color: #d0d0d0;
}

/* S Livernois - Dropdown item hover: light gray */
body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title:hover,
body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title:focus {
    background-color: #f2f2f2;
}

/* S Livernois - Active item: secondary color background */
body.menu-top top-menu acc-menu acc-menu-item.active > acc-menu-item-title {
    background-color: var(--secondary-color);
    color: #000000;
}

/* S Livernois - Visited checkmark: dark for white bg */
body.menu-top top-menu acc-menu acc-menu-item.visited > acc-menu-item-title::before,
body.menu-top top-menu acc-menu acc-menu-group.visited > acc-menu-item-title::before {
    border-color: #333333;
}

/* S Livernois - Dropdown group dividers: gray */
body.menu-top top-menu acc-menu acc-menu-group:not(:last-child) > acc-menu-item-title {
    border-bottom-color: #d0d0d0;
}


/* =====================================================
   S Livernois - Diamond Dots Menu
   Converts round SVG dots to diamond shapes matching
   original Panotour design. CSS rotation on the container
   makes the square a diamond. SVG ring paths hidden,
   checkmark counter-rotated to stay upright. Dots spin
   from square to diamond on animate-in.
   ===================================================== */

/* S Livernois - Diamond shape: rotate container 45deg, gold border, inner white glow */
dots-menu dots-menu-item {
    width: 1.8rem; height: 1.8rem;
    transform: translate(0,0) scale(1) rotate(45deg);
    border: 1px solid var(--primary-color);
    box-shadow: inset 1px 1px 0px #ffffff, inset -1px -1px 0px #ffffff, 0px 0px 9px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    box-sizing: content-box;
    justify-content: center;
    align-items: center;
}

/* J. Louis - Counter the rotated diamond's larger bounding box so its tooltip caret stays centered. */
dots-menu my-tooltip {
    transform: translate(calc(50% - 0.4142rem), 0.8rem);
}

/* J. Louis - Give the rotated desktop diamonds breathing room before the Prev button. */
@media screen and (min-width: 501px) {
    section[nav_dots] {
        right: 15rem;
    }
}

/* S Livernois - Animate in: starts as square (0deg), spins to diamond (45deg) */
dots-menu dots-menu-item.hidden {
    transform: translate(0, +4rem) scale(0) rotate(0deg);
    opacity: 0;
}

/* S Livernois - Animate out: spins back to square while dropping */
dots-menu dots-menu-item.remove {
    transform: translate(0, +10rem) rotate(0deg);
}

/* S Livernois - Hide SVG ring and stroke paths (diamond border replaces them) */
dots-menu dots-menu-item .dot_ring,
dots-menu dots-menu-item .dot_stroke {
    display: none;
}

/* S Livernois - Hide dot_hover circle (white bg fill replaces it) */
dots-menu dots-menu-item .dot_hover {
    display: none;
}

/* S Livernois - SVG sized inside diamond with margin, carries the fill color */
dots-menu dots-menu-item svg {
    width: calc(100% - 0.6rem);
    height: calc(100% - 0.6rem);
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.3s;
}

/* S Livernois - Active and hover: white background fills the inner diamond */
dots-menu dots-menu-item.active svg {
    background-color: #ffffff;
}

@media (pointer: fine) {
    dots-menu dots-menu-item:hover svg {
        background-color: #ffffff;
    }
}

/* S Livernois - Checkmark: counter-rotate -45deg to stay upright inside rotated parent */
dots-menu dots-menu-item .dot_check {
    transform: scale(0) rotate(-45deg);
    transform-origin: center;
    fill: var(--primary-color);
    stroke: unset;
    opacity: 0;
}

/* S Livernois - Visited checkmark: scaled up, white fill */
dots-menu dots-menu-item.visited .dot_check {
    transform: scale(1.7) rotate(-45deg);
    opacity: 1;
    fill: #ffffff;
    stroke: unset;
}

/* S Livernois - Active checkmark: gold fill on white background */
dots-menu dots-menu-item.active .dot_check {
    transform: scale(1.7) rotate(-45deg);
    opacity: 1;
    fill: var(--primary-color);
    stroke: #ffffff;
}

/* S Livernois - Hover checkmark colors (mouse devices only) */
@media (pointer: fine) {
    dots-menu dots-menu-item:hover .dot_check {
        transform: scale(1.7) rotate(-45deg);
        fill: var(--primary-color);
        stroke: #ffffff;
    }
}

/* S Livernois - Group title: Marcellus font */
dots-menu dots-menu-group-title {
    font-family: var(--font-primary);
}

/* S Livernois - Mobile: horizontal animate direction with spin */
@media screen and (max-width: 500px) {
    dots-menu dots-menu-item.hidden {
        transform: translate(4rem, 0) scale(0) rotate(0deg);
        opacity: 0;
    }

    dots-menu dots-menu-item.remove {
        transform: translate(+10rem, 0) rotate(0deg);
    }
}

/* J. Louis - Present the core change-state tooltip as the original transparent MBS pointer cue. */
my-tooltip.change-state-tooltip {
    position: fixed;
    bottom: auto;
    z-index: 1000;
    transform: translate(-50%, calc(-100% - 0.8rem));
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

my-tooltip.change-state-tooltip::before {
    display: none;
}

my-tooltip.change-state-tooltip.visible {
    opacity: 1;
}

/* J. Louis - Anchor the standard top-menu fallback so its existing left state opens from the viewport edge. */
@media screen and (max-width: 500px) {
    body.menu-top aside {
        position: absolute;
    }
}