:root {
    /* Global App-Like Behavior */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in inputs and textareas */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

:root,
[data-realm="dark"] {
    /* Border Images */
    --bg-image-border-bg: url('/images/borders/dark/bg-dark.png');
    --bg-image-border-chain: url('/images/borders/dark/chain.png');
    --bg-image-border-left: url('/images/borders/dark/left.png');
    --bg-image-border-right: url('/images/borders/dark/right.png');

    /* dark Theme Images */
    --bg-image-btn: url('/images/ui-themes/btn-dark.png');
    --bg-image-btn-wide: url('/images/ui-themes/btn-wide-dark.png');
    --bg-image-column: url('/images/ui-themes/column-dark.png');
    --bg-image-column-wide: url('/images/ui-themes/column-wide-dark.png');
    --bg-image-page: url('/images/ui-themes/page-dark.png');
    --bg-image-ribbon: url('/images/ui-themes/ribbon-dark.png');
    --bg-image-banner: url('/images/ui-themes/banner-dark.png');

    /* Background Images */
    --bg-image-distant: url('/images/background/dark/snow-distant-scene.png');
    --bg-image-roof: url('/images/background/dark/snow-roof.png');
    --bg-image-floor: url('/images/background/dark/snow-floor.png');
    --bg-image-pillar-left: url('/images/background/dark/snow-pillar-left.png');
    --bg-image-pillar-right: url('/images/background/dark/snow-pillar-right.png');

    /* Text Colors */
    --text-main: #ffffff;
    --link-color: #ffffff;
    --link-hover-color: #cccccc;
    --tooltip-bg: #424242;

    /* Fonts */
    --font-title: "Blaka", system-ui;
    --font-body: "Texturina", serif;
    --title-transform: uppercase;
    --title-spacing: 2px;
    --title-filter: url('#dark-stone');
    --title-bg-image: linear-gradient(180deg, #ffffff 0%, #cfcfcf 100%);
    --title-text-fill-color: transparent;
    --title-color: #a8a8a8;

    /* Diplomatic Assets (dark) */
    --diplomatic-seal-url: url('/images/ui-themes/chancery/dark/dark-seal.png');
    --diplomatic-emblem-url: url('/images/ui-themes/chancery/dark/dark-emblem.png');
    --diplomatic-corner-url: url('/images/ui-themes/chancery/dark/dark-corner.png');
    --diplomatic-marginalia-h-url: url('/images/ui-themes/chancery/dark/dark-horizontal.png');
    --diplomatic-marginalia-v-url: url('/images/ui-themes/chancery/dark/dark-vertical.png');
    --diplomatic-fastener-url: url('/images/ui-themes/chancery/dark/dark-rope.png');
}

[data-realm="light"] {
    /* Border Images */
    --bg-image-border-bg: url('/images/borders/light/bg-light.png');
    --bg-image-border-chain: url('/images/borders/light/chain.png');
    --bg-image-border-left: url('/images/borders/light/left.png');
    --bg-image-border-right: url('/images/borders/light/right.png');

    /* light Theme Images */
    --bg-image-btn: url('/images/ui-themes/btn-light.png');
    --bg-image-btn-wide: url('/images/ui-themes/btn-wide-light.png');
    --bg-image-column: url('/images/ui-themes/column-light.png');
    --bg-image-column-wide: url('/images/ui-themes/column-wide-light.png');
    --bg-image-page: url('/images/ui-themes/page-light.png');
    --bg-image-ribbon: url('/images/ui-themes/ribbon-light.png');
    --bg-image-banner: url('/images/ui-themes/banner-light.png');

    /* Background Images */
    --bg-image-distant: url('/images/background/light/plains-distant-scene.png');
    --bg-image-roof: url('/images/background/light/plains-roof.png');
    --bg-image-floor: url('/images/background/light/plains-floor.png');
    --bg-image-pillar-left: url('/images/background/light/plains-pillar-left.png');
    --bg-image-pillar-right: url('/images/background/light/plains-pillar-right.png');

    /* Text Colors */
    --text-main: #000000;
    --link-color: #000000;
    --link-hover-color: #333333;
    --tooltip-bg: #cacaca;

    /* Fonts */
    --font-title: "Bokor", system-ui;
    --font-body: "Texturina", serif;
    --title-transform: none;
    --title-spacing: normal;
    --title-filter: url('#light-royal');
    --title-bg-image: none;
    --title-text-fill-color: currentColor;
    --title-color: #1b1b1b;

    /* Diplomatic Assets (light) */
    --diplomatic-seal-url: url('/images/ui-themes/chancery/light/light-seal.png');
    --diplomatic-emblem-url: url('/images/ui-themes/chancery/light/light-emblem.png');
    --diplomatic-corner-url: url('/images/ui-themes/chancery/light/light-corner.png');
    --diplomatic-marginalia-h-url: url('/images/ui-themes/chancery/light/light-horizontal.png');
    --diplomatic-marginalia-v-url: url('/images/ui-themes/chancery/light/light-vertical.png');
    --diplomatic-fastener-url: url('/images/ui-themes/chancery/light/light-rope.png');
}

/* Global Elements */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

body,
header {
    font-family: var(--font-body);
    font-size: 18px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    color: var(--text-main);
}

/* Prevent Bootstrap from adding excessive right padding when modals open */
body.modal-open {
    padding-right: 0 !important;
    overflow: visible !important;
}

main {
    width: 100%;
    flex-grow: 1;
}

input,
select,
textarea {
    color: var(--text-main);
    font-family: inherit;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
}

.text-theme,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    text-transform: var(--title-transform);
    letter-spacing: var(--title-spacing);
    color: var(--title-color, inherit);
    background-image: var(--title-bg-image, none);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--title-text-fill-color, currentColor);
    filter: var(--title-filter, none);
}

.btn,
button {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    align-items: center;
    width: fit-content;
    color: var(--text-main);
    font-family: inherit;
}

.btn-icon-only {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 50px;
    width: 50px;
    background-color: transparent;
    padding: 0;
}

.btn-icon-only i {
    padding: 10px;
    font-size: 1.2rem;
}

.btn-icon-only>img {
    width: 150%;
    height: 150%;
}

.btn-realm-icon {
    border-style: solid;
    border-image-source: var(--bg-image-btn);
    border-image-slice: 24 fill;
    border-width: 15px;
    border-image-repeat: stretch;
}

.btn-realm-wide {
    border-style: solid;
    border-image-source: var(--bg-image-btn-wide);
    border-image-slice: 48 fill;
    border-width: 12px;
    border-image-repeat: stretch;
}

/*
.page-realm {
    border-style: solid;
    border-image-source: var(--bg-image-page);
    border-image-slice: 48 fill;
    border-width: 24px;
    border-image-repeat: stretch;
}
*/
.card {
    border-radius: 10px;
    padding: 0 10px;
}

.column-realm {
    border-style: solid;
    border-image-source: var(--bg-image-column);
    border-image-slice: 48 fill;
    border-width: 20px;
    border-image-repeat: stretch;
}

.column-wide-realm {
    border-style: solid;
    border-image-source: var(--bg-image-column-wide);
    border-image-slice: 48 fill;
    border-width: 10px;
    border-image-repeat: stretch;
}

.form-control,
.form-label,
.form-check-label,
.input-group-text,
.input-group-text i {
    color: var(--text-main) !important;
}

.form-control .text-theme,
.form-label .text-theme,
.form-check-label .text-theme,
.input-group-text .text-theme,
.input-group-text i .text-theme {
    color: var(--text-main) !important;
}

.form-control::placeholder {
    color: var(--text-main);
    opacity: 0.5;
}

.gsap-tooltip {
    background-color: var(--tooltip-bg);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0;
    padding: 2px 6px;
    position: absolute;
    z-index: 99;
    max-width: min(300px, 90vw);
    word-wrap: break-word;
    white-space: normal;
}

.initially-hidden {
    display: none !important;
}

.modal-backdrop {
    opacity: 1 !important;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.text-blue {
    color: #007bff !important;
}

.text-green {
    color: #28a745 !important;
}

#guest-sections {
    padding-top: 80px;
    padding-left: 450px;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#guest-sections>div {
    margin-bottom: 300px;
    /* Provides the spacing between sections */
}

#guest-sections>div:last-child {
    margin-bottom: 0;
}

/* IDs */
#products-data-store {
    display: none !important;
}

/* Circular Progress Loader Structure (Maintains size for Home/About etc) */
.circular-progress-container {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    vertical-align: middle;
}

.circular-progress-svg {
    width: 100%;
    height: 100%;
    /* No rotation on SVG itself, relying on .circular-progress-bar rotation */
}

/* Spinner Styles */
.circular-progress-bg {
    fill: none;
    stroke: var(--text-main);
    stroke-width: 2.5;
    opacity: 0.3;
}

.circular-progress-bar {
    fill: none;
    stroke: var(--title-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 100, 100;
    /* Will be overridden by JS for specific sizing */
}

/* Media Queries */
@media (max-width: 576px) {
    body {
        padding-bottom: 40px;
        overflow-x: hidden;
    }

    html {
        overflow-x: hidden;
    }
}

@media (max-width: 1300px) {
    #guest-sections {
        padding-left: 0;
    }
}

/* Background Utility Classes */

.svg-hidden-filter {
    position: absolute;
    pointer-events: none;
}

/* --- Fonts (Moved from fonts.css) --- */
@font-face {
    font-family: 'Blaka';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Blaka-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Bokor';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Bokor-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Creepster';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Creepster-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Uncial Antiqua';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/UncialAntiqua-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Texturina';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/Texturina-Variable.woff2') format('woff2');
}