@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.App img {
  max-width: 100%;
  height: 2800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.App h1 {
  color: white
}

.App h2 {
  color: white
}
/* ------------------------------- GLOBAL CSS VARIABLES           ------------------------------- */

/* NavigationToolbar */
:root {
    --z-index-navigation: 1000;
    --max-dropdown-height: 200px;
    --icon-colour: black;
    --icon-background-color: lightgrey;
    --primary-color: #4b7089;
    --toolbar-background-highlight-color: rgb(154, 154, 180);
    --highlight-color: #4b4955;
    --background-color: lightgrey;
    --background-color-dark: #d3d3d3;
    --secondary-color: #2c3e50;
    --hamburger-shadow-color: #2c3e50;
    --debug-color: #ff0000;
    --text-color: #0a1024;
    --transition-time-fast: 0.75s;
    --transition-time-medium: 1s;
    --transition-time-slow: 1.25s;
    --action-button-background-color: #143a47;
    --action-button-background-color-hover: #719cb9;
    --action-button-background-color-active: #113b48;
    --action-button-background-color-disabled: #93999b;    
}
/* LoadingSpinner */
:root {
    --z-index-loading-spinner: 950;
}
/* Modal */
:root {
    --z-index-modal: 100;
}
/* PlaceCardItem */
:root {
    --z-index-place-card-item: 10;
}
/* Backdrop */
:root {
    --z-index-backdrop: 10;
}
/* TourItem */
:root {
    --z-index-tour-item: 10;
}
/* MainHeader */
:root {
    --z-index-main-header: 5;
}
.side-drawer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100vh;
    width: 40%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}.main-header {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background: #999898;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
    padding: 0 1rem;
    z-index: var(--z-index-main-header);
    margin-bottom: 1rem;  /* Add margin to create space below the header */
}

main {
    margin-top: 5rem;
}

@media (min-width: 768px) {
    .main-header {
        justify-content: space-between;
    }
}.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-index-backdrop);
}.modal {
  z-index: var(--z-index-modal);
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  width: 35vw; /* 90% of the viewport width */
  height: 35vh; /* 90% of the viewport height */
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 8px;
  transform: translate(-50%, -50%); /* Adjust for centering */
  overflow: auto; /* Add scroll if content is too big */
}
.modal__header {
  width: 100%;
  padding: 1rem 0.5rem;
  background: VAR(--background-color-dark);
  color: white;
}

.modal__header h2 {
  margin: 0.5rem;
}

.modal__content {
  padding: 1rem 0.5rem;
}

.modal__footer {
  padding: 1rem 0.5rem;
}

@media (min-width: 768px) {
  .modal {
    /* Adjustments for larger screens can go here if needed */
    /*left: calc(50% - 30rem);
    width: 70rem;*/
    /*width:90%;*/
  }
}

.modal-enter {
  transform: translateY(-10rem);
  opacity: 0;
}

.modal-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: all var(--transition-time-slow);
}

.modal-exit {
  transform: translateY(0);
  opacity: 1;
}

.modal-exit-active {
  transform: translateY(-10rem);
  opacity: 0;
  transition: all var(--transition-time-slow);
}
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-links li {
    margin: 1rem;
}

.nav-links a {
    border: 1px solid transparent;
    color: #292929;
    text-decoration: none;
    padding: 0.5rem;
}

.nav-links a:hover,
.nav-links a:active,
.nav-links a.active {
    background: darkgray;
    border-color: #292929;
    color: #292929;
}

.nav-links button {
    cursor: pointer;
    border: 1px solid #292929;
    color: #292929;
    background: transparent;
    padding: 0.5rem;
    font: inherit;
}

.nav-links button:focus {
    outline: none;
}

.nav-links button:hover,
.nav-links button:active {
    background: #292929;
    color: white;
}

@media (min-width: 768px) {
    .nav-links {
        flex-direction: row;
    }

    .nav-links li {
        margin: 0 0.5rem;
    }

    .nav-links a {
        color: white;
        text-decoration: none;
    }

    .nav-links button {
        /*border: 1px solid white;*/
        border: none;
        color: white;
        background: transparent;
    }

    .nav-links button:hover,
    .nav-links button:active {
        background: darkgray;
        color: #292929;
    }
}

.nav-links img {
    height: 32px;
    /* or whatever height you want */
    width: auto;
    vertical-align: middle;
}/* ------------------------------- CSS FOR NAVIGATION TOOLBAR ------------------------------- */

/* ------------------------------- All  NAVIGATION ELEMENTS    ------------------------------- */
.nav-items-toolbar a,
.nav-items-drawer a {
    text-decoration: none;
    color: inherit;
    z-index: var(--z-index-navigation);
}

/* ------------------------------- All  MENU ITEMS             ------------------------------- */

li.menu {
    list-style-type: none;
}

ul.main-menu-dropdown {
    list-style-type: none;
    background-color: var(--background-color);
    opacity: 95%;
    border-radius: 10px;
    padding-bottom: 6px;
    z-index: calc(var(--z-index-navigation)+1);
}

ul.main-menu-dropdown li {
    white-space: nowrap;
    /* Prevents the text inside the li from wrapping */
    margin-bottom: 0px;
    /* Adjust this to space menu items */
    padding: 20px;
    background-color: var(--background-color);
    padding-top: 10px;
    z-index: var(--z-index-navigation+1);
}

ul.main-menu-dropdown li:first-child {
    /*applies padding to first submenu item only*/
    padding-top: 15px;
}

.submenu-item {
    font-weight: normal;
    text-emphasis-color: var(--highlight-color);
    transition: font-weight var(--transition-time-slow) ease;
}

.submenu-item:hover {
    font-weight: bold;
}

/* Main menu styles */
.main-menu-item {
    position: relative;
    /* Relative positioning for pseudo-element */
}

/* Pseudo-element for shadow */
.main-menu-item:hover::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-index-navigation);
    /* Behind the main content but above background */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* Submenu styles */
.sub-menu {
    position: absolute;
    z-index: calc(var(--z-index-navigation)+1);
    /* Above main menu but below hover shadow */
}

/* ------------------------------- TOOLBAR NAVIGATION        ------------------------------- */

.toolbar-navigation {
    background-color: var(--background-color);
    display: flex;
    flex-direction: row;
    width: 100%;
    position: fixed; /* Makes the toolbar stick to the top */
    top: 0; /* Aligns the toolbar at the top */
    z-index: var(--z-index-navigation); /* Ensures it is on top of other content */
    height: 52px;
    min-height: 52px;
    max-height: 52px;
}

.left-section {
    flex: 0;
    /*Do not grow or shrink*/
}

.center-section {
    display: flex;
    justify-content: center;
    /* Center the entire main-navigation horizontally */
    flex: 1;
    /*Take up all available space */
}

.right-section {
    flex: 0;
    /*take up remaining space */
}

.menu {
    /* Parent element */
    position: relative;
    /* Establishes the point of reference for absolutely positioned children */
}

.menu,
.main-menu-dropdown {
    margin: 0;
    /* remove margin and padding to align to parent */
    padding: 0;
    /* remove margin and padding to align to parent */
}

.nav-items-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-items-toolbar a {
    padding: 40px;
    /*Width between maim menu items*/
    color: var(--text-color);
}

.nav-items-toolbar li.menu {
    position: relative;
    display: inline-block;
    /* New: make them sit side by side */
}

.nav-items-toolbar .main-menu-dropdown {
    position: absolute;
    /*Stops dropdown adjusting toolbar height*/
    top: 100%;
    /* position right under the parent menu item */
    left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-time-fast) ease-in;
    /*background-color: var(--background-color);*/
    /* Adds background colour to dropdown menu */
}

.nav-items-toolbar ul.main-menu-dropdown {
    top: calc(100% + 10px);
    /* Slight margin between main and sub-menu */
    left: 0;
    /* Explicitly set to align with the parent */
}

.nav-items-toolbar .menu:hover .main-menu-dropdown {
    max-height: 200px;
}

/* Animation effects for menu items */

/* These styles animate the slow underline for the menu items */
.nav-items-toolbar .menu {
    position: relative;
    text-decoration: none;
}

.nav-items-toolbar .menu:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    /* Adjust the height to alter the thickness of the underline */
    bottom: -10px;
    /* Adjust the bottom position to alter the distance below the menu item */
    transform: scale(0);
    background-color: var(--highlight-color);
    transition: transform var(--transition-time-fast) ease-in-out;
}

.nav-items-toolbar .menu:hover:before {
    transform: scale(1);
    background-color: var(--highlight-color);
}

/* Styles for .menu when hovered */
.nav-items-toolbar .menu:hover {
    /* font-weight: bold; */
    /* Makes the text bolder when hovered */
    background-color: var(--toolbar-background-highlight-color);
    /* Sets a background color when hovered */
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 10px 16px;
}

/*BUTTON ON THE END OF THE TOOLBAR*/
.right-section {
    padding: 5px;
    border: 0px;
}

.right-section button {
    font-size: 10px;
    padding: 0px;
    border: 0px;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-block: 0;
    max-height: 26px;
    background-color: var(--icon-background-color);
    border-radius: 4px;
}

.right-section img {
    max-height: 30px;
    padding: 1px;
    border: 0px;
}

.right-section svg {
    width: 35px;
    background-color: var(--icon-background-color);
    fill: var(--icon-color);
    /*Change this to any color that suits the toolbar theme*/
    stroke: var(--icon-color);
    /*Change this to any color that suits the toolbar theme*/
}

.right-section button:hover {
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 10px 16px;
}

/* ------------------------------- TOGGLE SIDE DRAWER        ------------------------------- */

.sidedrawer-toggle-button {
    display: none;
}

.sidedrawer-toggle-button {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-index-navigation);
}

/* Hide toggle button when drawer is open */
.drawer~.sidedrawer-toggle-button {
    display: none;
}

.sidedrawer-toggle-button {
    /*display: none;*/
    transform: translateX(100%);
    /* initially move it out of view */
    transition: transform var(--transition-time-medium) ease;
    /* specify the transition */
}

.sidedrawer-toggle-button:hover {
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px;
}

.center-section,
.right-section {
    transition:
        transform var(--transition-time-medium) ease-in-out,
        opacity var(--transition-time-medium) ease-in-out;
    transform: translateY(0);
    opacity: 1;
}

/* Initial styles for mobile or smaller screens */
@media (max-width: 768px) {

    .center-section,
    .right-section {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        /* Prevents clicking invisible items */
    }

    .sidedrawer-toggle-button {
        display: block;
        padding: 6px;
        margin: 7px;
        font-size: large;
        transform: translateX(100%);
        /* initially move it out of view */
        transition: transform 0.8s ease;
        /* specify the transition */
    }

    .sidedrawer-toggle-button.show-button {
        transform: translateX(0);
    }
}

/* Optional: When screen size is adequate, smoothly reposition elements */
@media (min-width: 769px) {

    .center-section,
    .right-section {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
}

/* ------------------------------- DRAWER NAVIGATION         ------------------------------- */

.drawer {
    position: fixed;
    align-items: center;
    top: 53px;
    /* Adjust the gap between top of the page and the side drawer */
    right: -25px;
    width: 25%;
    min-width: 175px;
    max-width: 175px;
    height: calc(100%);
    background-color: var(--background-color);
    overflow-y: auto;
    /*box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.5);*/
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 10px 16px;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    transition: var(--transition-time-fast) ease-in-out;
    z-index: var(--z-index-navigation); /* Ensures it is on top of other content */
}

.drawer.closed {
    transform: translateX(100%);
}

.drawer.open {
    transform: translateX(-10%);
}

.nav-items-drawer .main-menu-dropdown {
    margin-top: 20px;
    /* Adjust this to space menu items */
    align-items: center;
}

.nav-items-drawer .main-menu-dropdown {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.75s ease-in;
}

.nav-items-drawer .menu:hover .main-menu-dropdown {
    max-height: 200px;
}

.nav-items-drawer ul {
    padding-inline-start: 0px;
}

/* Override the padding for submenu items in the side drawer */
.nav-items-drawer .main-menu-dropdown li:first-child {
    padding-top: 5px;
    /* Requires a small amount of padding otherwise submenu items appear over menu items */
}

/* Animation effects for menu items */

/* These styles animate the slow underline for the menu items */
.nav-items-drawer .menu .menu-item {
    position: relative;
    text-decoration: none;
    align-items: center;
}

.nav-items-drawer .menu .menu-item:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    /* Adjust the height to alter the thickness of the underline */
    bottom: -10px;
    /* Adjust the bottom position to alter the distance below the menu item */
    transform: scale(0);
    background-color: var(--highlight-color);
    transition: transform var(--transition-time-fast) ease-in-out;
}

.nav-items-drawer .menu .menu-item:hover:before {
    transform: scale(1);
    background-color: var(--highlight-color);
}

/* Styles for .menu when hovered */
.nav-items-drawer nav>ul>li.menu:hover a:not(.submenu-item) {
    /*font-weight: bold;*?
  /* Makes the text bolder when hovered */
    background-color: var(--toolbar-background-highlight-color);
    /* Sets a background color when hovered */
    /*box-shadow: -4px 1px 2px var(--toolbar-background-highlight-color);*/
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 10px 16px;
}

.right-section-in-drawer {
    padding: 10px;
    border: 0px;
}

.right-section-in-drawer button {
    font-size: 10px;
    padding: 0px;
    border: 0px;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-block: 0;
    max-height: 50px;
    background-color: var(--icon-background-color);
    border-radius: 4px;
    flex-direction: column;
}

.right-section-in-drawer img {
    max-height: 30px;
    padding: 0px;
    border: 0px;
}

.right-section-in-drawer svg {
    width: 40px;

    background-color: var(--icon-background-color);
    fill: var(--icon-color);
    /*Change this to any color that suits the toolbar theme*/
    stroke: var(--icon-color);
    /*Change this to any color that suits the toolbar theme*/
}

.right-section-in-drawer button:hover {
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 2px 1px,
        var(--toolbar-background-highlight-color) 0px 4px 2px,
        var(--toolbar-background-highlight-color) 0px 6px 4px,
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 10px 16px;
}

/* -----------------------logo component styles ------------------------ */
.logo-wrapper {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    text-decoration: none;
    background-color: transparent;
}

.logo-wrapper img {
    max-height: 25px;
}

.logo-wrapper svg {
    width: 50px;
    /*fill: var(--primary-color); /*Change this to any color that suits the toolbar theme*/
    fill: transparent;
    /*Change this to any color that suits the toolbar theme*/
    stroke: var(--secondary-color);
    /*Change this to any color that suits the toolbar theme*/
    padding: 10px;
}

/* ------------------------------- HAMBURGER                ------------------------------- */

.Hamb .line1,
.Hamb .line2,
.Hamb .line3 {
    width: 100px;
    cursor: pointer;
    transition: 0.3s;
    background: lightgrey;
    height: 10px;
    position: relative;
    border-radius: 5px;
    box-shadow:
        var(--hamburger-shadow-color) 0px 1px 1px,
        var(--hamburger-shadow-color) 0px 2px 2px,
        var(--hamburger-shadow-color) 0px 3px 3px,
        var(--hamburger-shadow-color) 0px 4px 4px,
        var(--hamburger-shadow-color) 0px 5px 5px;
}

.Hamb .line2 {
    transition: 1.5s;
}

.Hamb .line3 {
    transition: 0.75s;
    top: 10px;
}

.Hamb .line1 {
    transition: 0.75s;
    bottom: 10px;
}

.Hamb.active .line1 {
    bottom: -15px;
    right: -15px;
    transform: rotate(45deg);
}

.Hamb.active .line3 {
    top: -15px;
    right: 15x;
    transform: rotate(-45deg);
}

.Hamb.active .line2 {
    transform: scale(0);
    opacity: 0;
}

#hamburger {
    cursor: pointer;
    transform: scale(0);
    display: none;
}

@media screen and (max-width: 768px) {
    #hamburger {
        display: grid;
        transform: scale(0.3);
    }

    .Button {
        display: none;
    }
}

.Hamb .line1:hover,
.Hamb .line2:hover,
.Hamb .line3:hover {
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 16px 16px,
        var(--toolbar-background-highlight-color) 0px 32px 32px,
        var(--toolbar-background-highlight-color) 0px 64px 64px;
}

.Hamb.active .line1:hover,
.Hamb.active .line2:hover,
.Hamb.active .line3:hover {
    box-shadow:
        var(--toolbar-background-highlight-color) 0px 8px 8px,
        var(--toolbar-background-highlight-color) 0px 16px 16px,
        var(--toolbar-background-highlight-color) 0px 32px 32px,
        var(--toolbar-background-highlight-color) 0px 64px 64px;
}
.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}

.lds-dual-ring:after {
  content: ' ';
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #654e6f;
  border-color: #232224 transparent #463f4a transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

.loading-spinner__overlay {
  height: 100%;
  width: 100%;
  /*position: absolute;*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(37, 36, 36, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-index-loading-spinner); /* Ensures the spinner is on top of everything else */
}

.loading-spinner__container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* Adjust the height as needed */
}



@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.main-navigation__menu-btn {
    width: 3rem;
    height: 2rem;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 2rem;
    cursor: pointer;
}

.main-navigation__menu-btn span {
    display: block;
    width: 2rem;
    height: 2.5px;
    background: white;
}

.main-navigation__title {
    color: white;
}

.main-navigation__title a {
    text-decoration: none;
    color: white;    
}

.main-navigation__header-nav {
    display: none;
}

.main-navigation__drawer-nav {
    height: 100%;
}

@media (min-width: 768px) {
    .main-navigation__menu-btn {
        display: none;
    }

    .main-navigation__header-nav {
        display: block;
    }
}.appy-face-icon {
    fill: transparent;
    stroke: silver;
    /* Default, can be overridden */
    stroke-opacity: 1.0;
    width: 80px;
    /* Base size */
    /* transform is now handled by inline styles */
    animation: fadeIn 4s ease-in-out 0s forwards;
    margin-top: 10px;
    /* Reduced margin to avoid overflow */
    margin-bottom: 15px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Container for logo with text */
.logo-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-text {
    margin-top: 5px;
    font-size: 12px;
    color: silver;
    font-weight: bold;
    text-align: center;
}

.About {
    text-align: center;
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    min-height: 100vh;
    margin-top: 50px;
}

/* Fixed background image */
.About::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/CoventGarden.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Fixed overlay */
.About::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.7), rgba(32, 58, 67, 0.7), rgba(44, 83, 100, 0.7));
    z-index: -1;
}
/* .About {
    text-align: center;
    background-image: url('/CoventGarden.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0rem auto;
    min-height: 100vh; 
} */
/* .appy-face-icon{
    fill: transparent;
    stroke:silver;
    stroke-opacity: 1.0;
    width: 80px; 
    transform: scale(2.50); 
    animation: fadeIn 4s ease-in-out 0s forwards;
    margin-top: 100px;
} */
.About-logo {
    width: 80px; /* Base size */
    transform: scale(2.00);/* Scaling */
    margin-bottom: 20px;
    color: white;
    stroke: white;
    background-color: transparent;
    /*background-color: rgba(255, 255, 255, 0.5); /* 0.5 is the transparency level; you can adjust it as needed */
    animation: fadeIn 4s ease-in-out 0s forwards; /* Fade in for the @keyframes fadein above */
}
.About-content {
    max-width: 800px;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.About h3,
.About p {
    color: white;
    text-align: left;
    margin-bottom: 20px;
}

.About h1 {
    color: white;
    margin-bottom: 10px;
    margin-top: 15vh;
}

.inverted-logo {
    filter: invert(1);
    mix-blend-mode: screen;
    background-color: transparent;
    /*background-color: rgba(255, 255, 255, 0.5);
    /* 0.5 is the transparency level; you can adjust it as needed */
    animation: fadeIn 4s ease-in-out 0s forwards;
    /* Fade in for the @keyframes fadein above */
}

/* @keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} */.login-container {
    /* Set your desired margin or padding here */
    margin-top: 20px;
    /* Adjust this value as needed */
}
.Login {
    text-align: center;
    background-image: url('/CoventGarden.jpg');
    /* Path to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    /* Full viewport height */
    width: 100%;
    /* Full width */
    color: white;
    /* Text color */
    margin: 2rem auto;
}

.Login-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .Login-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.Login-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.Login-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.Login img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Login h1 {
    color: white
}

.Login h2 {
    color: white
}.product-page {
    text-align: center;
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Changed from center to allow normal content flow */
    padding-top: 80px;
    /* Add top padding for header */
    min-height: 100vh;
}
.product-page::before {
    content: '';
    position: fixed;
    /* Fixed instead of absolute */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/CoventGarden.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    /* Behind the overlay */
}
.product-page::after {
    content: '';
    position: fixed;
    /* Fixed instead of absolute */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.7), rgba(32, 58, 67, 0.7), rgba(44, 83, 100, 0.7));
    z-index: -1;
    /* Above the background, below the content */
}
.background-container {
    display: none;
    /* Hide this completely */
}


.product-content-container {
    position: relative;
    max-width: 1200px;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    margin-bottom: 40px;
    z-index: 2;
    width: 90%;
    /* Add width to ensure it doesn't stretch to full width */
}

.product-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.product-header h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #4eabe9, #a0e9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tagline {
    font-size: 1.5rem;
    font-weight: 300;
    color: #e0e0e0;
}

.product-sections {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

section {
    margin-bottom: 1rem;
}

section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #4eabe9;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, background-color 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #4eabe9;
}

.feature-item p {
    color: #d0d0d0;
}

.screenshot-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
}
/* Add scroll indicators */
.screenshot-carousel::after {
    content: '→';
    position: absolute;
    right: 20px;
    bottom: 50%;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    animation: pulse 2s infinite;
    pointer-events: none;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

/* Hide indicator when scrolled to the end */
.screenshot-carousel.at-end::after {
    display: none;
}

.screenshot {
    flex: 0 0 300px;
    height: 600px;
    scroll-snap-align: center;
}

/* Add these styles for actual images */
.screenshot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* This preserves aspect ratio */
    /* object-fit: cover;  Cover (fills container, might crop image edges) */
    /* object-fit: fill;  Fill (stretches to fill container, may distort) */
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    /* Optional dark background */
}



/* Optional: Add a fade-in effect for images */
.screenshot img {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.placeholder-screenshot {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    border: 1px dashed rgba(255, 255, 255, 0.3);
}

.cta-section {
    text-align: center;
    padding: 3rem 0;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.app-store-button,
.web-access-button {
    display: inline-block;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.app-store-button {
    background: #4eabe9;
    color: white;
}

.app-store-button:hover {
    background: #3a8abf;
    transform: scale(1.05);
}

.web-access-button {
    background: transparent;
    color: white;
    border: 2px solid #4eabe9;
}

.web-access-button:hover {
    background: rgba(78, 171, 233, 0.2);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .product-content-container {
        margin-top: 60px;
        padding: 1.5rem;
    }

    .product-header h1 {
        font-size: 2.5rem;
    }

    .tagline {
        font-size: 1.2rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .screenshot {
        flex: 0 0 250px;
        /* Slightly smaller on mobile */
        height: 500px;
    }

    /* Better scrolling on touch devices */
    .screenshot-carousel {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 20px;
        /* Space for scroll indicator */
    }
}

/* Make sure all content sections have proper z-index */
.product-header,
.product-sections,
.feature-section,
.screenshots-section,
.cta-section {
    position: relative;
    z-index: 2;
    /* Place above the overlay */
}.Welcome {
    text-align: center;
    background-image: url('/CoventGarden.jpg');
    /* Path to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    /* Full viewport height */
    width: 100%;
    /* Full width */
    color: white;
    /* Text color */
    display: flex;
    /* Add this */
    flex-direction: column;
    /* Add this */
    justify-content: center;
    /* Add this */
    align-items: center;
    /* Add this */
    padding: 20px;
    /* Optional, adds some spacing around the edges */
    margin: 0rem auto;
}
.Welcome-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .Welcome-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.Welcome-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.Welcome-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        /* Start completely invisible */
    }

    100% {
        opacity: 1;
        /* Fade in to full opacity */
    }
}

.Welcome img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Welcome h1 {
    color: white;
    opacity: 0;
    animation: fadeIn 4s ease-in-out 0s forwards; /* Fade in for the @keyframes fadein above */
}

.Welcome h2 {
    margin: 10px; /* Optional, adds some spacing between lines */
    color: white;
    opacity: 0;
    animation: fadeIn 4s ease-in-out 0s forwards; /* Fade in for the @keyframes fadein above */
    max-width: 90%; /* Optional, restricts the line length */
}.card {
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.26);
    border-radius: 6px;
    padding: 0rem;
    overflow: hidden;
    background: white;
    border: 1px solid #ccc;
        /* Explicit border */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;    
}
.button {
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid lightgrey;
  border-radius: 4px;
  background: var(--action-button-background-color);
  color: white;
  cursor: pointer;
  margin-right: 1rem;
  text-decoration: none;
  display: inline-block;
}

.button:focus {
  outline: none;
}

.button:hover,
.button:active {
  background: var(--action-button-background-color-active);
  border-color: darkgray;
}

.button--inverse {
  background: transparent;
  color: lightgray;
}

.button--inverse:hover,
.button--inverse:active {
  color: white;
  background: var(--action-button-background-color-hover);
}

.button--danger {
  background: darkgray;
  border-color: darkgray;
}

.button--danger:hover,
.button--danger:active {
  background: darkred;
  border-color: darkred;
}

.button:disabled,
.button:hover:disabled,
.button:active:disabled {
  background: var(--action-button-background-color-disabled);
  color: #979797;
  border-color: #ccc;
  cursor: not-allowed;
}

.button--small {
  font-size: 0.8rem;
}

.button--big {
  font-size: 1.5rem;
}.map {
    width: 100%;
    height: 100%;
}.center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tour-item {
    margin: 1rem 0;
}

.tour-item__content {
    padding: 0;
}

.tour-item__info {
    padding: 1rem;
    text-align: center;
}


.tour-item__info h2,
.tour-item__info h3,
.tour-item__info p {
    margin: 0 0 0.5rem 0;
    color: black;
}

.tour-item__actions {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #ccc;
}

.tour-item__modal-content {
    padding: 0;
}

.tour-item__modal-actions {
    text-align: right;
}

.tour-item__actions button,
.tour-item__actions a {
    margin: 0.5rem;
}

.map-container {
    height: 15rem;
    width: 100%;
}


.tour-item__image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-item__image {
    background-image: url('/assets/NoImage-B80kKlwq.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(184, 156, 156, 0.2); /* The fourth value controls the opacity*/
    width: 100%;
    height: 12.5rem;
    margin-right: 1.5rem;
    position: relative;
}

.tour-item__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Set the opacity here */
    z-index: var(--z-index-tour-item);
    /* Overlay should be above the background image */
}

.tour-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: calc(var(--z-index-tour-item) + 1); /* Image should be above the overlay */
}

.image-loading-spinner {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
}

@media (min-width: 768px) {
    .tour-item__image {
        height: 20rem;
    }
}.loading-text {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: #666;
}

.loading-dots {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 1em;
}

.loading-dots::after {
    content: '.';
    position: absolute;
    left: 0;
    top: 0;
    animation: loadingDots 1.5s infinite steps(1);
}

@keyframes loadingDots {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66% {
        content: '...';
    }
}

/* Optional: Add pulse effect */
.loading-text {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}
/* Different colors */
.loading-text.loading-text--primary {
    color: #0066cc;
}

.loading-text.loading-text--light {
    color: #ffffff;
}

/* Different sizes */
.loading-text.loading-text--small {
    font-size: 0.8em;
}

.loading-text.loading-text--large {
    font-size: 1.5em;
}
.tour-list {
    list-style: none;
    margin: 5rem auto;
    padding: 0;
    width: 95%;
    max-width: 160rem;
    /* Adjust as needed */

    /* Flexbox properties for multi-column layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Adjust as needed */
}

.tour-item {
    /* Adjust flex-basis and margins to control column width and spacing */
    flex-basis: calc(33.33% - 2rem);
    /* Adjust based on the number of columns you want */
    margin: 1rem 0;
    /* Vertical and horizontal margin */

    /* Rest of your tour-item styles */
}

@media (max-width: 1500px) {
    .tour-item {
        flex-basis: calc(50% - 1rem);
        /* Adjust for two columns on smaller screens */
    }
}

@media (max-width: 767px) {
    .tour-item {
        /*flex-basis: calc(50% - 1rem); /* Adjust for two columns on smaller screens */
        flex-basis: calc(100%); /* Adjust for one column on smaller screens */
    }
}

/* You can add more media queries for different screen sizes if needed */.trash-bin {
    transform: rotate(0deg); /* Explicit initial state */
}

.trash-bin:hover {
    opacity: 0.2;
    background-color: darktgrey;
}

.trash-bin:hover:not(.animating) {
    transform: rotate(5deg);
}

@keyframes shake {
    0% {
        transform: rotate(-5deg);
    }

    10% {
        transform: rotate(5deg);
    }

    20% {
        transform: rotate(-4deg);
    }

    30% {
        transform: rotate(4deg);
    }

    40% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }

    60% {
        transform: rotate(-2deg);
    }

    70% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-1deg);
    }

    90% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.shake {
    animation: shake 0.5s;
}
.add-items {
    background-color: var(--background-color-dark);
    color:var(--text-color);
    transform: rotate(0deg);/* Explicit initial state */
}

.add-items:hover {
    opacity: 0.9;
    background-color: var(--background-color-dark);
    color: var(--text-color);
}

.add-items:hover:not(.animating) {
    transform: rotate(5deg);
}.select-circle {
    width: 20px;
    /* Adjust size */
    height: 20px;
    border-radius: 50%;
    border: 1px solid #686a6b;/* Adjust color */
    cursor: pointer;
    margin-left: auto; /* Push the circle to the right */
    margin-right: 10px; /* Add 10px padding on the right */
    
}
.selected {
    background-color: #3977f4;
    /* Adjust selected color */
}
.placecards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /*grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));*/
    gap: 2px; /* Adjust the space between cards */
}

.placecard {
    /* Remove flex property, it's not needed with grid */
    /* Add more styling as needed */
    font-size: 9px;
}
.selection_card {
    max-width: 100px;
    max-height: 150px;
    min-height: 150px;
    margin-left: 2px;
    margin-right: 2px;;
    margin-bottom: 2px;
}
.modal-filter-bar {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    /* Example styling */
    margin-bottom: 10px;
}

.modal-filter-bar select {
    padding: 5px;
    margin-right: 10px;
    /* Add more styling as needed */
}

.icons-container {
    display: flex;
    justify-content: space-between;
    /* This will place one icon at each end */
    align-items: center;
    /* Aligns icons vertically */
}
/* monoton font */
.MonotonNUmbers {
    font-family: "Monoton", serif;
}

p.MonotonNumbers {
    font-family: "Monoton", serif;
    font-size: 80px;
    color: gray;
    opacity: 70%;
    text-align: center;
}

/*
    ** All elements border-box
*/

*,
*:before,
*::after {
    box-sizing: border-box;
}

.placecard-thumb__image{
    width: 100%;
    object-fit: cover;
}
.contents p{
    font-size: smaller;
}
.contents image {
    max-width: 100px;
    max-height: 150px;
    min-height: 150px;
}
/*
    ** Root element font size
    ** No default margins and paddings
*/
/*
html
 {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
*/
/*
    **root elements display block
*/
/*
html
 {
    display: block;
}
*/
/*
    ** Body main style

body {
    line-height: 1.317101995;
    scroll-behavior: smooth;
}
*/

/*
button:focus {
    outline: 0;
}
*/

/*
img,
embed,
svg,
audio,
canvas,
iframe,
video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
*/
/*
h1,
h1,
h3,
h4,
p {
    margin-top: 0;
    margin-bottom: 1rem;
}
*/

/*
body {
    background-color: #f4f4f5;
    padding: 10px;
    padding-top: 5%;
    display: grid;
    place-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    color: #3b3b53;
    text-align: center;
}
*/

/*
.icon-react {
    width: 50px;
}
*/


.column {
    display: flex;
    flex-direction: column;
    background-color: #f6f8fc;
    width: 150px;
    padding: 10px 10px;
    border-radius: 3px;
    border-top: 7px solid;
    box-shadow: 0 8px 16px rgba(#333, 0.1);
}

.column--1 {
    border-color: lightgrey;
}

.column--1 .title {
    color: lightgrey;
}

.column--2 {
    border-color: lightgrey;
}

.column--2 .title {
    color: lightgrey;
}

.column--3 {
    border-color: lightgrey;
}

.column--3 .title {
    color: lightgrey;
}

.column--4 {
    border-color: lightgrey;
}

.column--4 .title {
    color: lightgrey;
}

.column--5 {
    border-color: lightgrey;
}

.column--5 .title {
    color: lightgrey;
}

/* DRAG AND DROP */
.drag-and-drop {
    display: flex;
    grid-gap: 0px;
}

.dd-zone {
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
    height: 100%;
}

.dd-element {
    font-size: 18px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px 10px;
    cursor: pointer;
    color: #5b5b73;
}

.dd-element .body {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 0;
}

.dd-element:hover {
    background-color: lightgrey;
    transition: 0.2s;
}

.content_card {
    max-width: 200px;
    max-height: 200px;
    min-height: 200px;
}

.content_card p{
    font-size: 12px;
}
.button {
    height: 25px;
    shadow: true;
    border-radius: 5px;
    color: darkgrey;
    background-color: white;
}

.button:hover {
    background-color: lightgrey;
    color: black;
    transition: 0.2s;
}

/* Default style: 5 columns for larger screens */
.drag-and-drop .column {
    flex: 1;
    /* Example for flexbox based grid */
}

/* Add a class for labels */
.label-font {
    font-family: "San Francisco", Helvetica, Arial, sans-serif;
    /* Apple's San Francisco font */
    font-size: 10px;
    color: white;
    text-align: left;
}


/* For screens smaller than 768px */
/*
@media (max-width: 768px) {
    .drag-and-drop .column {
        flex: 0 0 100%;
    }
}
*/
/* 2 columns for viewports greater than 768px but less than 1000px */
/*@media (min-width: 768px) and (max-width: 899px) {*/
@media (max-width: 768px) {
    .column {
        flex: 0 0 50%;
    }
}

/* 3 columns for viewports greater than 1000px but less than 1200px */
@media (min-width: 899px) and (max-width: 1099px) {
    .column {
        flex: 0 0 33.33%;
    }
}

/* 4 columns for viewports greater than 1200px but less than 1400px */
@media (min-width: 1099px) and (max-width: 1199px) {
    .column {
        flex: 0 0 25%;
    }
}

/* 5 columns for viewports greater than 1400px */
@media (min-width: 1200px) {
    .column {
        flex: 0 0 20%;
    }
}.map {
    width: 100%;
    height: 100%;
}

/* Export mode specific styling */
.export-map.export-mode {
    border: none;
    /* Add any export-specific map styling here */
}

/* Hide MapKit attribution in export mode (optional) */
.export-mode .mk-attribution {
    display: none !important;
}

/* Hide other MapKit UI elements that might still show */
.export-mode .mk-button {
    display: none !important;
}.time-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    height: 44px;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.time-header.dark-mode {
    background-color: #000000;
    color: #FFFFFF;
}

.time {
    font-size: 14px;
    font-weight: 600;
    margin-left: 30px;
    flex: 1;
}

.status-indicators {
    display: flex;
    align-items: center;
    gap: 5px;
}

.signal-icon,
.wifi-icon {
    margin-right: 4px;
}
.battery-icon {
    margin-right: 30px;
}

/* Animation for low battery */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.battery-icon.low {
    animation: pulse 2s infinite;
} .markdown-modal {
     z-index: 200;
     position: fixed;
     top: 5vh;
     left: 10%;
     width: 80%;
     background: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
     border-radius: 8px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
 }

 .markdown-modal__header {
     width: 100%;
     padding: 1rem 0.5rem;
     background: #2a006e;
     color: white;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }

 .markdown-modal__header h2 {
     margin: 0.5rem;
 }

 .markdown-modal__content {
     flex-grow: 1;
     padding: 1rem 0.5rem;
     overflow-y: auto;
 }

 .markdown-modal__footer {
     padding: 1rem 0.5rem;
     border-top: 1px solid #ccc;
     display: flex;
     justify-content: flex-end;
 }

 .markdown-content {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     line-height: 1.6;
 }

 .markdown-content h1 {
     font-size: 2em;
     border-bottom: 1px solid #ddd;
     padding-bottom: 0.3em;
     margin-top: 1.5em;
     margin-bottom: 0.5em;
 }

 .markdown-content h2 {
     font-size: 1.5em;
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;
     margin-top: 1.5em;
     margin-bottom: 0.5em;
 }

 .markdown-content img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 1.5em auto;
 }

 .markdown-content .page-break {
     page-break-after: always;
     height: 0;
     margin: 0;
     border-top: 1px dashed #ccc;
     margin: 2em 0;
 }

 @media print {

     .markdown-modal__header,
     .markdown-modal__footer {
         display: none;
     }

     .markdown-modal {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: auto;
         box-shadow: none;
         border-radius: 0;
     }

     .markdown-content .page-break {
         page-break-after: always;
         border: none;
     }
 }

 @media (min-width: 768px) {
     .markdown-modal {
         left: calc(50% - 20rem);
         width: 40rem;
     }
 }/* Set DragAndDrop width, height etc through props when calling */
.drag-and-drop-svg{
    fill: white;
    vertical-align: middle;
    align-items: center;
    padding: 5px;
    margin: 0px;
    overflow: visible;
}
.drag-and-drop-text{
    color: gray;
    text-align: bottom;
    margin: 20px;
    padding: 10px;
}
/* classes for dissabled state */
.drag-and-drop-container.disabled {
    background-color: rgba(240, 240, 240, 0.7);
    border-color: #ccc !important;
    opacity: 0.7;
    pointer-events: auto;
    /* Allow clicks for showing message */
}

.disabled-svg {
    filter: grayscale(100%);
    opacity: 0.5;
}

.text-disabled {
    color: #888;
    font-style: italic;
}/* *********************** EDITOR/VIEWER CONTAINER *********************** */
/*
.editor-viewer-container {
    display: grid;
    grid-template-columns: minmax(250px, 2fr) minmax(250px, 2fr) minmax(450px, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    margin-top: 60px;
    margin-left: 2px;
}
*/
.editor-viewer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 60px;
    margin-left: 2px;
}
/* ******************************* EDITOR ********************************* */
/*
.editor-card {
    grid-column: 1 / span 2;
    grid-row: 1; 
    background-color: #dedede;
    border-radius: 1rem;
    width: 100%;
}
*/
.editor-card {
    flex: 0 0 calc(66.67% - 10px);
    /* Take up 2/3 of the container width */
    background-color: #dedede;
    border-radius: 1rem;
    overflow: hidden;
}

.editor-fields>div {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px;
}

.editor-fields {
    margin: 10px;
    margin-bottom: 1px;
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(200px, 2fr) minmax(200px,
            1fr);
    /* Three equal-width columns */
    grid-gap: 20px;
    /* Gap between columns */
}

/* These classes are for the three columns */
.editor-fields-col-left {
    grid-column: 1 / 2;
}

.editor-fields-col-middle {
    grid-column: 2 / 3;
}

/* Editor Form Control, fields column right */
.editor-fields-col-right {
    grid-column: 3 / 4;
    background-color: rgb(200, 200, 200);
    border-radius: 0.5rem;
}

/* These are for divs you want to span the first two columns */
.editor-fields-col-full {
    grid-column: 1 / 3;
}

/* These are for divs you want to span all three columns */
.editor-fields-col-span-all {
    grid-column: 1 / 4;
}

.editor-fields div {
    margin-bottom: 2px;
}

.editor-fields label {
    display: inline-block;
    width: 100%;
}
.editor-fields-below-title-3cols-container {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    /* Three equal-width columns */
    gap: 2px;
    /* Space between columns */
    margin-top: 30px;
    margin-left: 2px;
}

.route-info-column {
    grid-column: 1 / 2;
    /* First column */
    border-radius: 1rem;
    overflow: visible;
}
.drag-and-drop-column {
    grid-column: 2 / 3;
    /* Second column */
    border-radius: 1rem;
    overflow: visible;
    margin-left: 30px;
    margin-right: 30px;
}
.cover-image-viewer {
    grid-column: 3 / 4;
    /* Second column */
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
}
.cover-image-viewer img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #ccc;
    object-fit: contain;    /* Maintain aspect ratio without cropping */
    display: block;         /* Remove any inline spacing */
}

.editor-fields input,
.editor-fields textarea {
    width: 100%;
    background-color: rgb(245, 245, 245);
    border-radius: 0.5rem;
    border: none;
}

.editor-controls {
    grid-column: 3 / 3;
}

.editor-controls p {
    font-size: 12px;
    /* Adjust according to your needs */
    color: white;
    /* To make the text white */
}

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    /* Add some space between the buttons */
}
.button-container button{
    background-color: var(--action-button-background-color);
    text-align: center;
    width: 100%;        /* Make all buttons fill the container width */
    min-width: 120px;   /* Set a minimum width */
    height: 40px;       /* Set consistent button height */
    margin: 0;          /* Remove any default margins */
    margin-bottom: 5px;
}
.button-spacer {
    height: 20px;       /* Adjust as needed */
}
/* ******************************* VIEWER ********************************* */
/* Container for the third column */
.third-column-container {
    flex: 0 0 calc(33.33% - 10px);
    /* Take up 1/3 of the container width */
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    gap: 10px;
    /* Space between cards */
}

.viewer-card,
.viewer-card-map {
    position: relative;
    width: 100%;
    /* Full width of their container */
    background-color: black;
    border-radius: 3rem;
    border: 1px solid white;
    aspect-ratio: 1 / 2.1;
}

.viewer-card h1, h2 {
    color: white;
}

.viewer-card .placecard-container {
    margin-top: 0px;
}

.iphone-header {
    width: 100%;
    /* Add additional styles if needed */
}

/* Full-width image */
.tour__image {
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
    height: 300px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 2px;
    margin-right: 2px;
}

.tour__image img {
    background-image: url('/assets/NoImage-B80kKlwq.png');
    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tourcard-container {
    margin: 7px;
}
.tourcard-container p {
    color: white;
}

.add-and-remove-placecards-to-tour {
    text-align: left;
}

.drag-and-drop-container {
    width: 95%;
    /* height: 100%; */
    background-color: var(--background-color-dark);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    text-align: left;
}

/* Map */
.tour-route__map {
    position:absolute;
    top: 30;
    left: 0;
    width: 100%;
    height: 100%;
    grid-column: 1 / 4;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 2px;
    margin-right: 2px;
    /* This makes it span all 3 columns */
}

/* Add a class for labels */
.label-font {
    font-family: "San Francisco", Helvetica, Arial, sans-serif;
    /* Apple's San Francisco font */
    font-size: 12px;
    color: white;
    text-align: left;
}

/* Single column layout for smaller screens */
/*
@media (max-width: 768px) {
    .editor-viewer-container {
        grid-template-columns: 1fr;
    }

    .viewer-card,
    .editor-card {
        width: 100%;
        grid-column: 1/2;
    }
}
*/

/*
.tour-description .description-content{
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    margin-top: 10px;
    color: white;
}
*/

/* Remove or replace the existing rule around line 282-293 */
.viewer-card .tour-description .description-content,
.viewer-card-map .tour-description .description-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    margin-top: 10px;
    color: white;
    background: transparent;
    /* Ensure transparent background */
    border-radius: inherit;
    /* Inherit border radius from parent */
}

/* Make sure the tour description container inherits the card styles */
.viewer-card .tour-description,
.viewer-card-map .tour-description {
    background: transparent;
    border-radius: inherit;
    box-shadow: none;
    /* Remove any box shadow */
    margin: 7px;
    /* Match your existing tourcard-container margin */
}

/* Ensure the tourcard-container (which contains tour description) has proper styling */
.viewer-card .tourcard-container,
.viewer-card-map .tourcard-container {
    background: transparent;
    border-radius: inherit;
}


/* Two columns layout for medium screens */
@media (min-width: 769px) and (max-width: 1200px) {
    .editor-viewer-container {
        flex-wrap: wrap;
        /* Allow items to wrap */
    }

    .editor-card {
        flex: 0 0 100%;
        /* Full width */
        overflow: hidden;
    }

    .viewer-card,
    .viewer-card-map {
        flex: 0 0 50%;
        /* Each takes up half of the container width */
        margin-bottom: 10px;
        /* Add some space between the items */
    }

    /* Adjust the map height for medium screens if needed */
    .tour-route__map {
        height: 100%;
        /* Example height, adjust as necessary */
    }
}

/* Single column layout for smaller screens */
@media (max-width: 768px) {
    .editor-viewer-container {
        flex-direction: column;
        /* Stack items vertically */
    }

    .editor-card,
    .viewer-card,
    .viewer-card-map,
    .third-column-container {
        flex: 0 0 100%;
        /* Make each item take the full width */
        margin-bottom: 10px;
        /* Add some space between the items */
        overflow: hidden;
    }
    

}
._toggleSwitchContainer_8voga_1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align items to the start */
}

._toggleLabel_8voga_8 {
    margin: 0 0px;
    display: block;
    /* Ensure labels are block-level elements */
    position: relative;
    /* Position relative for vertical adjustment */
}

._toggleLabel_8voga_8:last-child {
    top: 50%;
    /* Lower the right label by half the height of the toggle */
    transform: translateY(60%);
    /* Center the label vertically */
    margin-left: 70px;
    /* Add some space between the toggle and the right label */
}

._switchWrapper_8voga_25 {
    position: relative;
}

._toggleSwitchContainer_8voga_1 ._switchCheckbox_8voga_29 {
    opacity: 0;
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 30px;
    margin: 0;
}

._toggleSwitchContainer_8voga_1 ._switchLabel_8voga_38 {
    position: absolute;
    cursor: pointer;
    width: 60px;
    height: 30px;
    background: #e3342f;
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}

._switchRail_8voga_50 {
    position: absolute;
    width: 100%;
    height: 100%;
}

._switchSlider_8voga_56 {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease-in-out;
}

._switchCheckbox_8voga_29:checked+._switchLabel_8voga_38 ._switchRail_8voga_50 ._switchSlider_8voga_56 {
    transform: translateX(30px);
}

._switchCheckbox_8voga_29:checked+._switchLabel_8voga_38 {
    background: #38c172;
}.epub-builder-container {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 50px !important;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.epub-builder-header {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.epub-builder-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.epub-builder-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.epub-progress-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.epub-progress-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.epub-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    transition: all 0.2s ease;
}

.epub-progress-row:last-child {
    border-bottom: none;
}

.epub-progress-row.active {
    background: rgba(59, 130, 246, 0.05);
    margin: 0 -1rem;
    padding: 12px 1rem;
    border-radius: 6px;
}

.epub-progress-row.done {
    background: rgba(34, 197, 94, 0.05);
    margin: 0 -1rem;
    padding: 12px 1rem;
    border-radius: 6px;
}

.epub-progress-icon {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
}

.epub-progress-label {
    font-weight: 500;
    font-size: 0.95rem;
    color: #374151;
}

.epub-status-message {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f3f4f6;
    border-radius: 6px;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
}

.epub-loading-overlay {
    position: absolute;
    inset: auto auto 8px 8px;
    /* small badge in a corner */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: none;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
    /* never block interactions */
}

.epub-loading-text {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.epub-progress-bar-container {
    margin: 1.5rem 0;
}

.epub-actions {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.epub-actions button {
    flex: 1;
    min-width: 180px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.epub-actions button:not(.inverse) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.epub-actions button:not(.inverse):hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.epub-actions button.inverse {
    background: #f8fafc;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.epub-actions button.inverse:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.epub-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.epub-tip {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.epub-tip::before {
    content: "💡";
    flex-shrink: 0;
    margin-top: 1px;
}

/* Responsive design */
@media (max-width: 640px) {
    .epub-builder-container {
        padding: 1rem;
    }

    .epub-builder-title {
        font-size: 1.5rem;
    }

    .epub-progress-card {
        padding: 1rem;
    }

    .epub-actions {
        flex-direction: column;
    }

    .epub-actions button {
        min-width: auto;
        flex: none;
    }
}

/* Animation for progress indicators */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.epub-progress-row.active .epub-progress-icon {
    animation: pulse 1.5s ease-in-out infinite;
}

/* --- Two-column layout for the EPUB/Markdown builder --- */
.epub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.epub-left,
.epub-right {
    min-width: 0;
}

.epub-subhead {
    margin: 1.25rem 0 .75rem;
    font-weight: 600;
    color: #1f2937;
}

/* Cover viewer (same “feel” as your editor card) */
.cover-image-viewer {
    width: 100%;
    background: #000;
    border-radius: 1.5rem;
    border: 1px solid #e5e7eb;
    aspect-ratio: 1 / 1.6;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.cover-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #111;
}

.cover-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ddd;
    font-weight: 600;
    letter-spacing: .3px;
    background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, .06), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(255, 255, 255, .03), transparent 60%),
        #0b0b0b;
}

/* Drag-and-drop column in the left side */
.drag-and-drop-column {
    margin-top: 16px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

/* HTML Cover Builder */
.cover-builder {
    margin-top: 8px;
}

.cover-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.cover-form label {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
    color: #374151;
}

.cover-form input {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font: 500 0.95rem system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: #fff;
}

.cover-bg-drop {
    margin-top: 6px;
}

/* Live preview "canvas" */
.cover-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 16px;
    background: #0f172a;
    /* fallback if no image */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.cover-canvas__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}

.cover-canvas__inner {
    position: absolute;
    inset: 0;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.cover-canvas__title {
    font-weight: 800;
    font-size: clamp(1.4rem, 3.8vw, 2.4rem);
    margin: 0 0 6px 0;
    line-height: 1.1;
}

.cover-canvas__subtitle {
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    margin: 0 0 12px 0;
    opacity: .95;
}

.cover-canvas__author {
    font-weight: 600;
    font-size: 0.95rem;
    opacity: .9;
}

/* Responsive collapse */
@media (max-width: 900px) {
    .epub-grid {
        grid-template-columns: 1fr;
    }
}

/* Limit cover elements to half the column width */
.cover-canvas__overlay,
.cover-preview-image {
    max-width: 50%;
    margin: 0 auto;
    /* Center them horizontally */
}
/* Right pane breathing room */
.epub-right .drag-and-drop-column,
.epub-right .cover-builder {
    margin-top: 8px;
}

/* Make drop-zones visually clear on this page */
.epub-right .drag-and-drop-column .dropzone,
.cover-bg-drop .dropzone {
    border: 2px dashed #94a3b8 !important;
    background: #f8fafc !important;
}

/* =========================
   A4 Cover Builder layout
   - 5 equal "fifths" rows
   - Title in 1st fifth
   - Image spans 2nd + 3rd fifths
   - Meta text spans 4th + 5th fifths
   ========================= */
.cover-builder-surface {
    --cover-max-w: min(90vw, 900px);
    width: var(--cover-max-w);
    aspect-ratio: 1 / 1.4142;
    /* A4 portrait (W:H) */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Safari fallback if aspect-ratio isn’t supported */
@supports not (aspect-ratio: 1 / 1) {
    .cover-builder-surface {
        height: calc(var(--cover-max-w) * 1.4142);
    }
}

.cover-builder-surface .cover-grid {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    /* 5 equal fifths */
    height: 100%;
    width: 100%;
}

/* Top (first fifth): Title block */
.cover-title-block {
    grid-row: 1 / span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 32px 8px;
    text-align: center;
}

.cover-title {
    margin: 0;
    font: 800 clamp(1.5rem, 4.5vh, 2.4rem)/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0.2px;
    color: #111827;
}

.cover-subtitle {
    margin: 8px 0 0;
    font: 600 clamp(1rem, 2.8vh, 1.4rem)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #374151;
}

/* Middle (second + third fifths): Image area */
.cover-image__overlay {
    grid-row: 2 / span 2;
    /* 2/5ths high */
    position: relative;
    width: 100%;
    height: 100%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-image__overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Use 'cover' if you prefer crop-to-fill */
    display: block;
}

.cover-image__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #6b7280;
    font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Bottom (fourth + fifth fifths): meta / author / location */
.cover-meta-block {
    grid-row: 4 / span 2;
    padding: 18px 28px 24px;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 8px;
}

.cover-author {
    font: 700 clamp(0.95rem, 2.2vh, 1.25rem)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
    text-align: center;
}

.cover-location {
    font: 500 clamp(0.9rem, 1.9vh, 1.1rem)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #4b5563;
    text-align: center;
}
/* Shrink the big design-size surface just for on-screen preview */
.cover-canvas-wrap {
    width: 100%;
    max-width: 420px;
    /* keeps it inside the right column */
    margin: 0 auto 16px;
    position: relative;
}

/* The element is *actually* 1600x2560, but we scale it down for preview */
.cover-canvas.design {
    transform: scale(var(--scale, 0.25));
    transform-origin: top left;
    position: relative;
    background: #0f172a;
    /* your fallback if no bg image */
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

/* During export we remove transform so html2canvas sees full design size */
.cover-canvas.design.exporting {
    transform: none !important;
    position: absolute;
    /* render offscreen while exporting */
    left: -99999px;
    top: -99999px;
}
.test-container {
    /* Set your desired margin or padding here */
    margin-top: 100px;
    /* Adjust this value as needed */
}

.route-list-container {
    /* Add any necessary styling for the container */
}

.route-list {
    list-style: none;
    padding-left: 0;
}

.route-list li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.route-list li:before {
    content: '\2022';
    /* Bullet point symbol */
    position: absolute;
    left: 0;
    top: 0;
}

/* Hide empty list items */
.route-list li:empty {
    display: none;
}

/* Add some additional styling for visual appeal */
.route-list {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 16px;
}

.route-list li {
    font-size: 14px;
    color: #333;
}.placecard-container {
    /* Set your desired margin or padding here */
    margin-top: 0px;
    padding: 1rem;
    /* Adjust this value as needed */
}
@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}
.place-card {
    max-width: 100%;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0rem;
    width: 100%;
}

.place-card__image {
    grid-column: 1 / 4;
    height: 300px;
    overflow: hidden;
}

.place-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-card__text,
.place-card__buttons {
    padding: 1rem;
    text-align: center;
}

.place-card__map {
    width: 100%;
    height: 300px;
    grid-column: 1 / 4;
    overflow: visible;
}

.card .placecard-detail__content {
    background-color: black;
    border: 1px solid black;
}

.title {
    padding-left: 1rem;
    padding-top: 2rem;
    text-align: left;
    border-color: black;
}

.flag-city {
    margin: 0px;
    padding-left: 1rem;
    text-align: left;
    border-color: black;
    color: white;
}

.place-card-details .description {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 100%;
    text-align: justify;
    background-color: black;
    max-height: 450px; /*!important;*/
    overflow-y: auto; /* !important;*/
    /* Enable vertical scrolling */
    margin-top: 20px;
    /* Optional: add margin for spacing */
    color: white;
    border: none;
}

.description-content {
    border-color: black;
    padding: 10px;
    /* Ensure there's some padding for better readability */
    box-sizing: border-box;
    /* Ensure padding is included in the width and height */
}

@media (max-width: 768px) {
    .place-card {
        grid-template-columns: 1fr;
    }
}.placecard-container {
    /* Set your desired margin or padding here */
    margin-top: 65px;
    padding: 1rem;
    /* Adjust this value as needed */
}
.button {
    font: inherit;
    padding: 0.5rem 1.5rem;
    border: 1px solid lightgrey;
    border-radius: 4px;
    background: lightgrey;
    color: white;
    cursor: pointer;
    margin-right: 1rem;
    text-decoration: none;
    display: inline-block;
}

.button:focus {
    outline: none;
}

.button:hover,
.button:active {
    background: darkgray;
    border-color: darkgray;
}

.button--inverse {
    background: transparent;
    color: lightgray;
}

.button--inverse:hover,
.button--inverse:active {
    color: white;
    background: lightgray;
}

.button--danger {
    background: darkgray;
    border-color: darkgray;
}

.button--danger:hover,
.button--danger:active {
    background: darkred;
    border-color: darkred;
}

.button:disabled,
.button:hover:disabled,
.button:active:disabled {
    background: #ccc;
    color: #979797;
    border-color: #ccc;
    cursor: not-allowed;
}

.button--small {
    font-size: 0.8rem;
}

.button--big {
    font-size: 1.5rem;
}/* Container for each place card */
.place-card {
    max-width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

/* Full-width image */
.place-card__image {
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
    height: 300px;
    overflow: hidden;
}

.place-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text content and buttons */
.place-card__text,
.place-card__buttons {
    padding: 1rem;
    text-align: center;
}

/* Map */
.place-card__map {
    width: 100%;
    height: 450px;
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
    overflow:visible;
}

.flex-item.description {
    padding: 1rem;
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
}

.flex-item.title {
    padding: 1rem;
    text-align: left;
}

.flex-item.flag-city {
    padding: 1rem;
    text-align: right;
}

@media (max-width: 768px) {
    .place-card {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }
}

.editor-viewer-container {
    display: grid;
    /*grid-template-columns: 2fr 2fr 1fr;   /* 2 parts for editor, 2 parts for editor, 1 part for viewer */
    grid-template-columns: minmax(250px, 2fr) minmax(250px, 2fr) minmax(450px, 1fr);
    gap: 10px;
}
.viewer-card {
    /*width: calc(33.33% - 10px);*/
    background-color: black;
    border-radius: 3rem;
    grid-column: 3 / 4;
    width: 100%;
    aspect-ratio: 1 / 2.1;
        /*width / height */
}

.viewer-card .placecard-container {
    margin-top: 0px;
}

.iphone-header {
    width: 100%;
    /* Add additional styles if needed */
}
.editor-card {
    /*width: calc(66.67% - 10px);*/
    grid-column: 1 / 3;
    background-color: #dedede; /* #F5F5F5;  */
    border-radius: 1rem;
    /* Adjust the width as per your requirements */
    overflow: visible;
}

/* Single column layout for smaller screens */
@media (max-width: 768px) {
    .editor-viewer-container {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
        /*flex-direction: column;*/
    }

    .viewer-card,
    .editor-card {
        width: 100%;
        grid-column: 1/2;
        overflow: visible;
    }
}

.label-container {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.editor-fields>div {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px;
}

.editor-fields {
    margin: 10px;
    margin-bottom: 1px;
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(200px, 2fr) minmax(200px, 1fr);
    /* Three equal-width columns */
    grid-gap: 20px;
    /* Gap between columns */
}

/* These classes are for the three columns */
.editor-fields-col-left {
    grid-column: 1 / 2;
}

.editor-fields-col-middle {
    grid-column: 2 / 3;
}

/* Editor Form Control, fields column right */
.editor-fields-col-right {
    grid-column: 3 / 4;
    background-color: rgb(200, 200, 200);
    border-radius: 0.5rem;

}

/* These are for divs you want to span the first two columns */
.editor-fields-col-full {
    grid-column: 1 / 3;
}

/* These are for divs you want to span all three columns */
.editor-fields-col-span-all {
    grid-column: 1 / 4;
}

.audio-player {
    align-items: center;
}
@media (max-width: 768px) {
    .editor-fields {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }

    .editor-fields-col-left,
    .editor-fields-col-middle,
    .editor-fields-col-right,
    .editor-fields-col-full,
    .editor-fields-col-span-all {
        grid-column: 1 / 2;
        /* All divs take the full width */
    }
}
.editor-fields div {
    margin-bottom: 2px;
}

.editor-fields label {
    display: inline-block;
    width: 100%;
}

.editor-fields input,
.editor-fields textarea {
    width: 100%;
    background-color: rgb(245, 245, 245);
    border-radius: 0.5rem;
    border: none;
    
}

#title {
    margin-top:  2px;
    margin-left: 1px;
}
#description {
    width: 100% -1rem;
    height: 300px;
}

/* Add a class for labels */
.label-font {
    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
    /* Apple's San Francisco font */
    font-size: 12px;
    color: white;
}

/* Add a class for input fields */
.input-font {
    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: rgb(45, 45, 45);
}

.single-line-label {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    /*text-overflow: ellipsis;*/
}
/*
.editor-fields-col-full {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
*/
.coordinates-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /*grid-template-columns: 1fr 3fr;*/
        /* 1/4 for coordinates, 3/4 for media-manager-container */
    gap: 20px;
    align-items: start; /* This ensures that the grid items are aligned to the start */
}
.coordinates {
    padding-left: 1px;
    margin-left: 20px;
}
.coordinates-col {
    grid-column: 1 / 2;
    /*width: 85%;*/
}
.media-manager-container {
    grid-column: 2 / 4;
    /* Right-most 3/4 */
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Drag-n-drop (1/3), FileManager (2/3) of this area */
    gap: 20px;
    align-items: start;
}
.drag-n-drop{
        grid-column: 1 / 2;
        max-height: 200px;
        overflow-y: auto;
        align-items: center;
}
.filemanager 
{   grid-column: 2 / 4;
    max-height: 200px;
    overflow-y: auto;
    align-items: center;
}
.filemanager img {
    width: 50%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #ddd;
}


.editor-controls {
    grid-column: 3 / 3;
    
}
.editor-controls p {
    font-size: 12px;
    /* Adjust according to your needs */
    color: white;
    /* To make the text white */
}

.button-container {
    align-items: center;
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    /*justify-content: space-between; /* This will place a space between buttons */
    align-items: center; /* Centers the button vertically */
    width: 200px; /* Adjust according to your needs */
}

.flex-item.audio-player {
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    align-items: center; /* Centers the button vertically */
}

/*Toggle switch and lable*/
.audio-only-toggle .toggle-with-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.label-font.coordinates {
    margin-left: 1px; /* Adjust spacing between toggle and label */
    margin-top: 25px;
}


.image-container {
    width: 300px;
    /* Set a fixed width for the image container */
    overflow: hidden;
    /* Hide any overflow */
}

.image-container img {
    width: 100%;
    /* Make the image fill the container width */
    height: auto;
    /* Adjust the height to maintain the aspect ratio */
    object-fit: contain;
    /* Ensure the image maintains its aspect ratio */
}

.crop-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Ensure the popup is above other content */
}
.crop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    /* Just below the popup */
}

.description-dropzone {
    position: relative;
    border: 2px dashed #aaa;
    padding: 10px;
    border-radius: 8px;
    transition: border-color 0.3s;
}

.description-dropzone:hover,
.description-dropzone:focus-within {
    border-color: #4eabe9;
}


/* Assets.json Inspector Popup */
.assets-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    background-color: #1e2a3a;
    border: 2px solid #4eabe9;
    border-radius: 8px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.assets-popup h2 {
    margin-top: 0;
    color: #4eabe9;
    border-bottom: 1px solid #4eabe9;
    padding-bottom: 10px;
}

.assets-content {
    flex: 1;
    overflow-y: auto;
    background-color: #0f161e;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    font-family: monospace;
    font-size: 14px;
    color: #e0e0e0;
}

.assets-popup-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.assets-popup-controls button {
    padding: 8px 16px;
    background-color: #4eabe9;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.assets-popup-controls button:hover {
    background-color: #3a8dc0;
}.filemanager {
    overflow-y: auto;
    max-height: 300px;
    padding-right: 5px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.filemanager h4.file-header {
    margin-top: 0;
    position: sticky;
    top: 0;
    background-color: white;
    padding: 10px 5px;
    z-index: 10;
    border-bottom: 1px solid #ddd;
}

.filemanager .file-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    overflow-y: auto;
    padding: 10px 0;
}

.filemanager .file-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.filemanager .file-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.filemanager .file-name {
    word-wrap: break-word;
    font-family: 'San Francisco', Arial, sans-serif;
    font-size: 14px;
    color: #333;
}
.file-url {
    grid-column: 1 / -1;
    /* Span full width */
    overflow-x: auto;
    /* Allow horizontal scrolling */
    white-space: nowrap;
    /* Keep text in one line */
    background-color: #fff;
    border-radius: 4px;
    padding: 5px;
    font-size: 8px;
    color: #555;
    border: 1px solid #ddd;
}
/* Scrollbar styling (optional) */
.filemanager {
    max-height: 250px;
    overflow-y: auto;
}

.filemanager::-webkit-scrollbar {
    width: 6px;
}

.filemanager::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.filemanager::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.delete-button {
    padding: 4px 8px;
    border-radius: 5px;
    border: none;
    background-color: #e74c3c;
    color: white;
    cursor: pointer;
}

.delete-button:hover {
    background-color: #c0392b;
}
.asset-counter {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-size: 12px;
}

.asset-counter-text {
    background-color: #f5f5f5;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #ddd;
}.placecard-container {
    /* Set your desired margin or padding here */
    margin-top: 10px;
    padding: 1rem;
    /* Adjust this value as needed */
}.center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.placecard-item {
    margin: 1rem 0;
}

.placecard-item__content {
    padding: 0;
}

.placecard-item__info {
    padding: 1rem;
    text-align: center;
}


.placecard-item__info h2,
.placecard-item__info h3,
.placecard-item__info p {
    margin: 0 0 0.5rem 0;
    color: black;
}

.placecard-item__actions {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #ccc;
}

.placecard-item__modal-content {
    padding: 0;
}

.placecard-item__modal-actions {
    text-align: right;
}
t
.placecard-item__actions button,
.placecard-item__actions a {
    margin: 0.5rem;
}

.map-container {
    height: 15rem;
    width: 100%;
}


.placecard-item__image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placecard-item__image {
    background-image: url('/assets/NoImage-B80kKlwq.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(184, 156, 156, 0.2);
    /* The fourth value controls the opacity*/
    width: 100%;
    height: 12.5rem;
    margin-right: 1.5rem;
    position: relative;
}

.placecard-item__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Set the opacity here */
    z-index: calc(var(--z-index-place-card-item) + 1);
    /* Overlay should be above the background image */
}

.placecard-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: calc(var(--z-index-place-card-item) + 2);
    /* Image should be above the overlay */
}

.image-loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .tour-item__image {
        height: 20rem;
    }
}
.placecard-list {
    list-style: none;
    margin: 5rem auto;
    padding: 0;
    width: 95%;
    max-width: 160rem;
    /* Adjust as needed */

    /* Flexbox properties for multi-column layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Adjust as needed */
}

.placecard-item {
    /* Adjust flex-basis and margins to control column width and spacing */
    flex-basis: calc(25% - 2rem);
    /* Adjust based on the number of columns you want */
    margin: 1rem 0;
    /* Vertical and horizontal margin */

    /* Rest of your tour-item styles */
}

@media (max-width: 1500px) {
    .placecard-item {
        flex-basis: calc(33.33% - 1rem);
        /* Adjust for three columns on smaller screens */
    }
}
@media (max-width: 1000px) {
    .placecard-item {
        flex-basis: calc(50% - 1rem);
        /* Adjust for three columns on smaller screens */
    }
}
@media (max-width: 767px) {
    .placecard-item {
        /*flex-basis: calc(50% - 1rem); /* Adjust for two columns on smaller screens */
        flex-basis: calc(100%);
        /* Adjust for one column on smaller screens */
    }
}.filter-bar {
    position: sticky;
    top: 50px;
    background-color: white;
    padding: 10px;
    z-index: 100;
}.help-page {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.7), rgba(32, 58, 67, 0.7), rgba(44, 83, 100, 0.7));
    color: white;
}

.help-nav {
    width: 250px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.help-nav ul {
    list-style: none;
    padding: 0;
}

.help-nav button {
    background: none;
    border: none;
    color: white;
    text-align: left;
    padding: 0.5rem 0;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    transition: color 0.3s;
}

.help-nav button:hover {
    color: #4eabe9;
}

.help-content {
    flex: 1;
    padding: 2rem;
    margin-left: 250px;
    max-width: 1000px;
}

.help-header {
    margin-bottom: 2rem;
}

.help-section {
    margin-bottom: 4rem;
    padding-top: 2rem;
    /* Space for scrolling to anchors */
}

.help-subsection {
    margin-bottom: 2rem;
}

.help-image {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.help-image img {
    width: 100%;
    display: block;
}
.help-image-iOS img {
    width: 40%;
    display: block;
}
.help-steps {
    margin: 1.5rem 0;
    padding-left: 1.2rem;
}

.help-steps li {
    margin-bottom: 1rem;
}

/* Add responsive adjustments */
@media (max-width: 768px) {
    .help-page {
        flex-direction: column;
    }

    .help-nav {
        width: 100%;
        height: auto;
        position: relative;
        padding: 1rem;
    }

    .help-content {
        margin-left: 0;
        padding: 1rem;
    }
}.center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-item {
    margin: 1rem 0;
}

.news-item__content {
    padding: 0;
}

.news-item__info {
    padding: 1rem;
    text-align: center;
}


.news-item__info h2,
.news-item__info h3,
.news-item__info p {
    margin: 0 0 0.5rem 0;
    
}
.news-item .h2_title {
    color: #12002e;
}
.news-item__actions {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #ccc;
}

.news-item__modal-content {
    padding: 0;
}

.news-item__modal-actions {
    text-align: right;
}

t .news-item__actions button,
.news-item__actions a {
    margin: 0.5rem;
}

.map-container {
    height: 15rem;
    width: 100%;
}


.news-item__image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-item__image {
    background-image: url('/assets/NoImage-B80kKlwq.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(184, 156, 156, 0.2);
    /* The fourth value controls the opacity*/
    width: 100%;
    height: 12.5rem;
    margin-right: 1.5rem;
    position: relative;
}

.news-item__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Set the opacity here */
    z-index: calc(var(--z-index-place-card-item) + 1);
    /* Overlay should be above the background image */
}

.news-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: calc(var(--z-index-place-card-item) + 2);
    /* Image should be above the overlay */
}

.image-loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .tour-item__image {
        height: 20rem;
    }
}.newsItem-list {
    list-style: none;
    margin: 5rem auto;
    padding: 0;
    width: 95%;
    max-width: 160rem;
    /* Adjust as needed */

    /* Flexbox properties for multi-column layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Adjust as needed */
}

.newsItem-item {
    /* Adjust flex-basis and margins to control column width and spacing */
    flex-basis: calc(25% - 2rem);
    /* Adjust based on the number of columns you want */
    margin: 1rem 0;
    /* Vertical and horizontal margin */

    /* Rest of your tour-item styles */
}

@media (max-width: 1500px) {
    .newsItem-item {
        flex-basis: calc(33.33% - 1rem);
        /* Adjust for three columns on smaller screens */
    }
}

@media (max-width: 1000px) {
    .newsItem-item {
        flex-basis: calc(50% - 1rem);
        /* Adjust for three columns on smaller screens */
    }
}

@media (max-width: 767px) {
    .newsItem-item {
        /*flex-basis: calc(50% - 1rem); /* Adjust for two columns on smaller screens */
        flex-basis: calc(100%);
        /* Adjust for one column on smaller screens */
    }
}.filter-bar {
    position: sticky;
    top: 50px;
    background-color: white;
    padding: 10px;
    z-index: 100;
}

.newsCard-list .card {
    max-width: 350px;  
    background-color: white;
}.filter-bar {
    position: sticky;
    top: 50px; 
    background-color: white; 
    padding: 10px;
    z-index: 100; 
}/* Container for each place card */
.newsDetails {
    max-width: 100%;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0rem;
    width: 100%;
}

/* Full-width image */
.newsDetails__image {
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
    height: 300px;
    overflow: hidden;
}

.newsDetails__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text content and buttons */
.newsDetails__text,
.newsDetails__buttons {
    padding: 1rem;
    text-align: center;
}

/* Map */
.newsDetails__map {
    height: 300px;
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
}
.newsDetails-detail__content {
    padding: 20px;
    background-color: black;
    border: none;
}

.title h2 {
    margin: 0;
}
.title {
    padding-left: 1rem;
    text-align: left;
}
.description {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 0rem;
    width: 100%;
    text-align: justify;
    background-color: black;
}
.news-details .description {
    max-height: 800px;
    /* Set the maximum height for the scrollable area */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding: 10px;
    /* Optional: add padding */
    margin-top: 10px;
    /* Optional: add margin for spacing */
    color: white;
}
.description-content {
    border-color: black;
    /* Add any additional styling for the content inside the scrollable area */
}

@media (max-width: 768px) {
    .newsDetails {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }
}/* Container for each place card */
.news-card {
    max-width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

/* Full-width image */
.news-card__image {
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
    height: 300px;
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text content and buttons */
.news-card__text,
.news-card__buttons {
    padding: 1rem;
    text-align: center;
}

/* Map */
.news-card__map {
    height: 450px;
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
}

.flex-item.description {
    padding: 1rem;
    grid-column: 1 / 4;
    /* This makes it span all 3 columns */
}

.flex-item.title {
    padding: 1rem;
    text-align: left;
}
.flex-item.orderIndex {
    padding: 1rem;
    text-align: left;
}

.flex-item.flag-city {
    padding: 1rem;
    text-align: right;
}

@media (max-width: 768px) {
    .news-card {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }
}

.editor-viewer-container {
    display: grid;
    /*grid-template-columns: 2fr 2fr 1fr;   /* 2 parts for editor, 2 parts for editor, 1 part for viewer */
    grid-template-columns: minmax(250px, 2fr) minmax(250px, 2fr) minmax(450px, 1fr);
    gap: 10px;
}

.viewer-card {
    /*width: calc(33.33% - 10px);*/
    background-color: black;
    border-radius: 3rem;
    grid-column: 3 / 4;
    width: 100%;
    aspect-ratio: 1 / 2.1;
    /*width / height */
}

.viewer-card .news-container {
    margin-top: 0px;
}

.iphone-header {
    width: 100%;
    /* Add additional styles if needed */
}

.editor-card {
    /*width: calc(66.67% - 10px);*/
    grid-column: 1 / 3;
    background-color: #dedede;
    /* #F5F5F5;  */
    border-radius: 1rem;
    /* Adjust the width as per your requirements */
}

/* Single column layout for smaller screens */
@media (max-width: 768px) {
    .editor-viewer-container {
        grid-template-columns: 1fr;
        /* Single column layout for smaller screens */
        /*flex-direction: column;*/
    }

    .viewer-card,
    .editor-card {
        width: 100%;
        grid-column: 1/2;
    }
}

.label-container {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.editor-fields>div {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px;
}

.editor-fields {
    margin: 10px;
    margin-bottom: 1px;
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(200px, 2fr) minmax(200px, 1fr);
    /* Three equal-width columns */
    grid-gap: 20px;
    /* Gap between columns */
}

/* These classes are for the three columns */
.editor-fields-col-left {
    grid-column: 1 / 2;
}

.editor-fields-col-middle {
    grid-column: 2 / 3;
}

/* Editor Form Control, fields column right */
.editor-fields-col-right {
    grid-column: 3 / 4;
    background-color: rgb(200, 200, 200);
    border-radius: 0.5rem;

}

/* These are for divs you want to span the first two columns */
.editor-fields-col-full {
    grid-column: 1 / 3;
}

/* These are for divs you want to span all three columns */
.editor-fields-col-span-all {
    grid-column: 1 / 4;
}

.audio-player {
    align-items: center;
}

@media (max-width: 768px) {
    .editor-fields {
        grid-template-columns: 1fr;
        /* Single column on small screens */
    }

    .editor-fields-col-left,
    .editor-fields-col-middle,
    .editor-fields-col-right,
    .editor-fields-col-full,
    .editor-fields-col-span-all {
        grid-column: 1 / 2;
        /* All divs take the full width */
    }
}

.editor-fields div {
    margin-bottom: 2px;
}

.editor-fields label {
    display: inline-block;
    width: 100%;
}

.editor-fields input,
.editor-fields textarea {
    width: 100%;
    background-color: rgb(245, 245, 245);
    border-radius: 0.5rem;
    border: none;

}

#title {
    margin-top: 2px;
    margin-left: 1px;
}
#orderIndex {
    margin-top: 2px;
    margin-left: 1px;
}
#description {
    width: 100% -1rem;
    height: 300px;
}

/* Add a class for labels */
.label-font {
    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
    /* Apple's San Francisco font */
    font-size: 12px;
    color: white;
}

/* Add a class for input fields */
.input-font {
    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: rgb(45, 45, 45);
}

.single-line-label {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    /*text-overflow: ellipsis;*/
}

/*
.editor-fields-col-full {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
*/
.coordinates-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    /* This ensures that the grid items are aligned to the start */
}

.coordinates {
    padding-left: 1px;
    margin-left: 20px;
}

.coordinates-col {
    grid-column: 1 / 2;
    width: 85%;
}

.editor-controls {
    grid-column: 3 / 3;

}

.editor-controls p {
    font-size: 12px;
    /* Adjust according to your needs */
    color: white;
    /* To make the text white */
}

.button-container {
    align-items: center;
    display: flex;
    justify-content: center;
    /* Centers the button horizontally */
    /*justify-content: space-between; /* This will place a space between buttons */
    align-items: center;
    /* Centers the button vertically */
    width: 200px;
    /* Adjust according to your needs */
}

.flex-item.audio-player {
    display: flex;
    justify-content: center;
    /* Centers the button horizontally */
    align-items: center;
    /* Centers the button vertically */
}

/*Toggle switch and lable*/
.audio-only-toggle .toggle-with-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.label-font.coordinates {
    margin-left: 1px;
    /* Adjust spacing between toggle and label */
    margin-top: 25px;
}


.image-container {
    width: 300px;
    /* Set a fixed width for the image container */
    overflow: hidden;
    /* Hide any overflow */
}

.image-container img {
    width: 100%;
    /* Make the image fill the container width */
    height: auto;
    /* Adjust the height to maintain the aspect ratio */
    object-fit: contain;
    /* Ensure the image maintains its aspect ratio */
}

.crop-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Ensure the popup is above other content */
}

.crop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    /* Just below the popup */
}
/* Only target elements within the tour-map-export-page */
.tour-map-export-page {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    page-break-inside: avoid;
    margin-top: 50px;
}

.tour-map-export-page .map-page {
    flex: 1;
    width: 50vw;
    height: 100vh;
    position: relative;
}

.tour-map-export-page .lookup-page {
    flex: 1;
    width: 50vw;
    height: 100vh;
    padding: 20px;
    background: white;
    overflow-y: auto;
}

.tour-map-export-page .map-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    min-height: 500px !important;
    min-width: 400px !important;
}

/* Force map canvases to be visible for capture - only in export view */
.tour-map-export-page .map-container canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Ensure MapKit container is properly sized - only in export view */
.tour-map-export-page .map-container .mapkit-map {
    width: 100% !important;
    height: 100% !important;
}

/* Force hardware acceleration for better canvas rendering - only in export view */
.tour-map-export-page .map-page {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Ensure all child elements are visible during capture */
.tour-map-export-page .map-container * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tour header styles for the table page */
.tour-map-export-page .tour-header {
    margin-bottom: 20px;
    text-align: center;
}

.tour-map-export-page .tour-title {
    font-size: 2em;
    margin-bottom: 10px;
    color: #333;
}

.tour-map-export-page .tour-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 10px;
}

.tour-map-export-page .tour-location {
    font-size: 1em;
    color: #888;
    margin-bottom: 20px;
}

/* Table styles */
.lookup-table-container {
    width: 100%;
    overflow-x: auto;
}

.lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lookup-table th,
.lookup-table td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: top;
}

.lookup-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

.number-col {
    width: 10%;
    text-align: center;
}

.name-col {
    width: 40%;
}

.number-cell {
    text-align: center;
    font-weight: bold;
}

.name-cell {
    padding-left: 12px;
}

.location-name {
    font-weight: bold;
    margin-bottom: 4px;
}

.location-subtitle {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.location-number {
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Print styles */
@media print {
    .tour-map-export-page {
        width: 100%;
        height: 100vh;
    }

    .tour-map-export-page .map-page,
    .tour-map-export-page .lookup-page {
        width: 50%;
        min-height: 100vh;
    }
}

/* Ensure map annotations are visible during capture */
.export-map .mapkit-annotation,
.export-map .mapkit-annotation-marker,
.export-map [class*="mapkit"],
.export-map [class*="annotation"],
.export-map [class*="marker"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

/* Force WebGL canvas to be capturable if possible */
.export-map canvas {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}

/* Ensure the map container has proper styling for capture */
.map-container.export-mode {
    position: relative;
    overflow: visible;
}

.map-container.export-mode canvas {
    position: relative;
    z-index: 1;
}

/* Make sure map elements are visible during clone */
.map-container * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.export-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 1rem system-ui, Arial;
    color: #666;
    background: repeating-linear-gradient(45deg, #f8f8f8, #f8f8f8 12px, #f1f1f1 12px, #f1f1f1 24px);
    z-index: 5;
}

/* Keep MapKit's annotation layer on top during export */
.export-map .mapkit-annotations-container {
    z-index: 999 !important;
    pointer-events: auto !important;
    transform: translateZ(0);
}

/* Subtle zebra striping for the table rows */
.export-places-table.two-col tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.export-places-table.two-col tbody tr:hover {
    background-color: #f3f3f3;
}

/* TourMapExportView.css */
.export-map .mapkit-annotation-container,
.export-map .mapkit-annotation,
.export-map .mapkit-annotation-marker {
    position: relative !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* Server-rendered image containers */
.export-map-wrapper .map-image-box,
.export-table-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ffffff;
}

.export-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Red dot number chips for fallback table */
.table-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d60000;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    user-select: none;
}

/* Narrow number columns (~10% → ~3.33%) */
.export-places-table.two-col th.num-col,
.export-places-table.two-col td.num-col {
    width: 3.33%;
    min-width: 28px;
    text-align: center;
    white-space: nowrap;
}

.export-places-table.two-col td.name-col {
    width: auto;
}/* A4 sized boxes (portrait) */
.tour-map-export-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 8px;
}

.a4-box {
    position: relative;
    width: 840px;
    /* adjust if needed */
    height: 1188px;
    /* 840 * 1.414 ≈ A4 */
    background: #fafafa;
    box-sizing: border-box;
}

.export-map-wrapper {
    border: 1px solid #ddd;
    overflow: hidden;
}

.export-map-base {
    width: 100%;
    height: 100%;
}

.export-table-wrapper {
    border: 1px solid #ddd;
    background: #fff;
    padding: 12px 14px 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.export-places-table.two-col {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
}

.export-places-table.two-col th,
.export-places-table.two-col td {
    border-bottom: 1px solid #eee;
    padding: 4px 6px;
    vertical-align: top;
    word-break: break-word;
}

.export-places-table.two-col td:nth-child(1),
.export-places-table.two-col td:nth-child(3) {
    width: 46px;
    text-align: center;
}

.table-marker {
    display: inline-flex;
    width: 22px;
    height: 22px;
    background: #d60000;
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font: 600 11px/1 system-ui, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.export-table-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
}

/* Ensure the MapRouteComponent wrapper fills parent */
.tour-map-export-layout .export-map-wrapper .map-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Inner map div from MapRouteComponent */
.tour-map-export-layout .export-map-wrapper .map-container>.map.export-map-base {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background: #f2f2f2;
    /* fallback if tiles fail */
}

/* Force MapKit internal layers to stretch */
.tour-map-export-layout .export-map-wrapper .map-container>.map.export-map-base>div {
    width: 100% !important;
    height: 100% !important;
}

/* Remove accidental stacking / list layout on markers (MapKit uses abs pos) */
.tour-map-export-layout .export-map-wrapper .map-container .map.export-map-base .mapkit-annotations-container,
.tour-map-export-layout .export-map-wrapper .map-container .map.export-map-base [class*="annotation"] {
    position: absolute;
}

/* (Optional) if MapKit annotation elements appear as blocks stacked vertically */
.tour-map-export-layout .export-map-wrapper .map-container .map.export-map-base [class*="annotation"] {
    display: block;
}

/* Table already styled; keep it same size as map (A4) */

.tour-map-export-layout .export-map-wrapper .map-container .route-info {
    display: none !important;
}

/* Ensure toolbar visible */
.tour-map-export-page .toolbar {
    position: relative;
    z-index: 10;
    margin-top: 50px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Subtle zebra striping for the export table */
.export-places-table.two-col tbody tr:nth-child(even) {
    background: #f7f7f7;
}

.export-places-table.two-col tbody tr:nth-child(odd) {
    background: #ffffff;
}.file-manager {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.file-manager-header {
    text-align: center;
    margin-bottom: 2rem;
}

.file-manager-header h1 {
    font-size: 2.5rem;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.file-manager-header p {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-tab {
    flex: 1;
    min-width: 200px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.category-tab:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.category-tab.active {
    border-color: #3b82f6;
    background: #dbeafe;
}

.tab-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.tab-label {
    font-weight: 600;
    color: #374151;
}

.tab-count {
    color: #6b7280;
    font-size: 0.9rem;
}

.tab-description {
    color: #6b7280;
    font-size: 0.85rem;
}

/* Upload Card */
.upload-card {
    margin-bottom: 2rem;
}

.upload-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    transition: all 0.3s ease;
    background: #fafafa;
}

.upload-dropzone:hover,
.upload-dropzone.drag-active {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.upload-content h3 {
    color: #374151;
    margin: 0;
}

.upload-content p {
    color: #6b7280;
    margin: 0;
}

/* Progress Card */
.progress-card {
    margin-bottom: 2rem;
}

.upload-item {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.upload-item:last-child {
    border-bottom: none;
}

.upload-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.file-name {
    font-weight: 500;
    color: #374151;
}

.upload-status {
    font-size: 0.9rem;
    font-weight: 500;
}

.upload-status.uploading {
    color: #f59e0b;
}

.upload-status.complete {
    color: #10b981;
}

.upload-status.error {
    color: #ef4444;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.error-message {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

/* Files Card */
.files-card {
    margin-bottom: 2rem;
}

.files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.no-files {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

/* File Grid */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.file-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: #fff;
}

.file-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-preview {
    height: 120px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.file-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.file-icon {
    font-size: 2.5rem;
    color: #9ca3af;
}

.file-details {
    padding: 1rem;
}

.file-details h4 {
    margin: 0 0 0.5rem;
    color: #374151;
    font-size: 0.9rem;
    word-break: break-word;
}

.file-details p {
    margin: 0.25rem 0;
    color: #6b7280;
    font-size: 0.8rem;
}

.file-actions {
    display: flex;
    padding: 0.5rem 1rem 1rem;
    gap: 0.5rem;
}

.action-button {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-button.view {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}

.action-button.view:hover {
    background: #e0f2fe;
}

.action-button.delete {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.action-button.delete:hover {
    background: #fee2e2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .file-manager {
        padding: 1rem;
    }

    .category-tabs {
        flex-direction: column;
    }

    .category-tab {
        min-width: auto;
    }

    .file-grid {
        grid-template-columns: 1fr;
    }

    .upload-dropzone {
        padding: 2rem 1rem;
    }

    .files-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}.user-logs-viewer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.logs-header {
    text-align: center;
    margin-bottom: 2rem;
}

.logs-header h1 {
    font-size: 2.5rem;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.logs-header p {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Filters */
.filters-card {
    margin-bottom: 2rem;
}

.filters-row {
    display: flex;
    gap: 2rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group input[type="number"],
.filter-group select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 120px;
}

.search-group {
    flex: 1;
    min-width: 200px;
}

.search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}

/* Directories Grid */
.directories-card {
    margin-bottom: 2rem;
}

.directories-header {
    margin-bottom: 1.5rem;
}

.directories-header h3 {
    color: #374151;
    margin: 0;
}

.directories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.directory-item {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.directory-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.directory-item.selected {
    border-color: #3b82f6;
    background: #dbeafe;
}

.directory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.user-id {
    color: #1f2937;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.file-count-badge {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.directory-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat {
    display: flex;
    justify-content: space-between;
}

.stat-label {
    color: #6b7280;
    font-size: 0.9rem;
}

.stat-value {
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}

.directory-actions {
    display: flex;
    gap: 0.5rem;
}

/* User Files */
.user-files-card {
    margin-bottom: 2rem;
}

.user-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.user-files-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.log-files-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.file-info h4 {
    margin: 0 0 0.5rem;
    color: #1f2937;
    font-size: 1rem;
}

.file-details {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.file-actions {
    display: flex;
    gap: 0.5rem;
}

/* Log Viewer Modal */
.log-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.log-viewer-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.log-viewer-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.log-viewer-header h3 {
    margin: 0;
    color: #1f2937;
    font-size: 1.2rem;
}

.log-viewer-controls {
    display: flex;
    gap: 0.5rem;
}

.log-content {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background: #1f2937;
    color: #f3f4f6;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
}

.log-content pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* No Data State */
.no-data {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

.no-data p {
    margin: 0;
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .user-logs-viewer {
        padding: 1rem;
    }

    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .directories-grid {
        grid-template-columns: 1fr;
    }

    .user-files-header {
        flex-direction: column;
        align-items: stretch;
    }

    .log-viewer-overlay {
        padding: 1rem;
    }

    .log-viewer-header {
        flex-direction: column;
        align-items: stretch;
    }

    .log-viewer-controls {
        justify-content: space-between;
    }

    .log-file-item {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .file-actions {
        justify-content: space-between;
    }
}

/* Custom scrollbar for log content */
.log-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.log-content::-webkit-scrollbar-track {
    background: #374151;
}

.log-content::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}


/* Delete Button Styling */
.delete-button {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.delete-button:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}

.delete-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Spacing adjustments for new buttons */
.directory-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-files-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.file-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 640px) {

    .directory-actions,
    .user-files-actions,
    .file-actions {
        justify-content: space-between;
    }

    .directory-actions button,
    .user-files-actions button,
    .file-actions button {
        flex: 1;
        min-width: 0;
        font-size: 0.8rem;
    }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-family: 'Open Sans', sans-serif;
}

body {
  margin: 0;
  background: #4d4d4d;
}

.slide-in-left-enter {
  transform: translateX(-100%);
}

.slide-in-left-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 500ms;
}

.slide-in-left-exit {
  transform: translateX(0%);
  opacity: 1;
}

.slide-in-left-exit-active {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 500ms;
}

.center {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}