/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .fade {
  transition: opacity 0.7s;
  opacity: 0;
}
/* Activity card sizing and spacing in the guest carousel. */
#activities {
  column-gap: 4px;
}

[data-carousel-draggable-value="true"] {
  touch-action: pan-y pinch-zoom;
}

[data-carousel-draggable-value="true"] :is([data-action="click->popup#open"], [data-carousel-copy]) {
  cursor: grab;
  user-select: none;
}

[data-carousel-draggable-value="true"].is-dragging :is([data-action="click->popup#open"], [data-carousel-copy]) {
  cursor: grabbing;
}

.guest-activity-name h3,
.guest-special-name,
.guest-special-location,
.guest-staff-caption {
  font-size: .9375rem;
  line-height: 1.2;
}

.guest-special-name,
.guest-staff-caption {
  overflow-wrap: anywhere;
}

.guest-staff-caption {
  position: absolute;
  inset: auto 0 0;
  padding: .85rem .7rem .55rem;
  background: linear-gradient(transparent, rgb(0 0 0 / .88) 38%);
  text-align: left;
}

.guest-staff-caption h3 {
  font-weight: 700;
}

.guest-staff-caption p {
  margin-top: .15rem;
  font-weight: 400;
}

#activities > .flex-none {
  width: 15.75rem;
  height: 26rem;
  margin-inline: 0;
}

@media (min-width: 48rem) {
  #activities > .flex-none {
    width: 15rem;
    height: 100%;
  }
}

.guest-directory {
  display: grid;
  align-items: start;
  gap: 12px;
  padding: 10px;
}

.guest-meals,
.guest-hospitality,
.guest-information,
.guest-module,
.guest-venue-list {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.guest-module-title,
.guest-specials #module_title :is(h1, h2) {
  margin: 0;
  padding: .45rem .35rem;
  border-radius: .5rem;
  background: var(--color-minor);
  color: var(--color-card_title);
  font-size: clamp(.85rem, 1.02vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.guest-venue-list {
  gap: 4px;
}

.guest-venue-list [data-rotator-target="card"] {
  margin-top: 0;
}

.guest-directory .guest-venue-row {
  display: grid;
  grid-template-columns: minmax(3.4rem, 26%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.guest-directory .guest-venue-logo {
  display: grid;
  place-items: center;
  background: #070709;
  border-right: 1px solid #413747;
}

.guest-directory .guest-venue-logo,
.guest-info-mark {
  position: relative;
  overflow: hidden;
}

.guest-directory .guest-venue-logo:has(img),
.guest-info-mark:has(img) {
  background: var(--guest-logo-background, #fff);
}

.guest-directory .guest-venue-logo img,
.guest-info-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

/* The supplied Arzal artwork has wide black margins around the mark. */
.guest-directory .guest-venue-logo img.guest-arzal-logo {
  inset: -23% auto auto -4%;
  width: 108%;
  height: 157%;
}

.guest-directory .guest-venue-copy {
  align-self: center;
  padding: .35rem .6rem;
}

.guest-directory .guest-venue-row .truncate {
  white-space: normal;
  overflow-wrap: anywhere;
}

.guest-photo-panel {
  height: clamp(14rem, 30vh, 22rem);
}

.guest-specials .guest-photo-panel {
  height: clamp(18rem, 44vh, 31rem);
}

.guest-qr-trigger {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: .65rem;
  padding: .4rem .65rem;
  border-radius: inherit;
  color: var(--color-card_text);
  cursor: pointer;
}

.guest-qr-trigger:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.guest-qr-preview {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: clamp(4.2rem, 8svh, 5.25rem);
  aspect-ratio: 1;
  object-fit: contain;
  background: white;
  border-radius: .15rem;
  padding: .2rem;
}

.guest-qr-title,
.guest-qr-hint {
  grid-column: 1;
  justify-self: center;
  line-height: 1.14;
}

.guest-qr-title {
  align-self: end;
  max-width: 22ch;
  padding-bottom: .24rem;
  border-bottom: 1px solid #aaa2b3;
  font-size: .93rem;
  font-weight: 700;
}

.guest-qr-hint {
  align-self: center;
  font-size: .78rem;
}

.guest-qr-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: .85rem;
  background: var(--color-dark_gray);
  color: var(--color-card_text);
  text-align: center;
}

.guest-qr-dialog::backdrop {
  background: rgb(0 0 0 / .72);
}

.guest-qr-dialog h2 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.1;
}

.guest-qr-expanded {
  width: min(100%, 22rem, 46dvh);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 1rem auto;
  padding: .6rem;
  background: white;
  border-radius: .3rem;
}

.guest-qr-dialog button {
  min-width: 8rem;
  min-height: 3rem;
  margin-top: 1rem;
  padding: .45rem 1rem;
  border-radius: .4rem;
  background: var(--color-minor);
  color: var(--color-card_title);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .guest-activities {
    height: max(14rem, calc(40svh - 2.4rem));
  }

  .guest-directory,
  .guest-meals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dinner_container {
    grid-column: 1 / -1;
  }

  #dinner_restaurants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .guest-directory {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.15fr);
  }
}

.guest-specials #module_title {
  display: block;
}

@media (min-width: 75rem) {
  .guest-module-title,
  .guest-specials #module_title :is(h1, h2) {
    padding-block: .35rem;
  }

  .guest-directory .guest-venue-row {
    line-height: 1.15;
  }

  .guest-directory .guest-venue-copy {
    padding-block: .25rem;
  }

  .guest-directory .guest-venue-row p,
  .guest-directory .guest-venue-row .text-xs {
    line-height: inherit;
  }

  .guest-directory .guest-venue-row .mt-1 {
    margin-top: .125rem;
    gap: .125rem;
  }

  .guest-specials .guest-photo-panel {
    height: clamp(18rem, 42vh, 29rem);
  }
}

.guest-info-card {
  display: grid;
  grid-template-columns: minmax(3.5rem, 26%) 1fr;
  align-items: stretch;
  border-radius: .45rem;
  background: var(--color-dark_gray);
  color: #c9c5cf;
  line-height: 1.15;
  text-align: center;
}

.guest-info-mark {
  display: grid;
  place-items: center;
  border-radius: .45rem 0 0 .45rem;
  background: #070709;
  border-right: 1px solid #413747;
  color: #e3c8fa;
  font-family: Georgia, serif;
  font-size: .85rem;
  letter-spacing: .1em;
}

.guest-info-card p {
  overflow-wrap: anywhere;
}

.guest-info-card > div:last-child {
  padding: .5rem .3rem;
}

.guest-info-card p {
  margin: .12rem 0;
  font-size: .75rem;
}

.guest-directory .guest-card-name {
  color: var(--color-card_title);
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
}

.guest-directory .guest-venue-details,
.guest-directory .guest-venue-details svg,
.guest-directory .guest-venue-hours {
  color: #c9c5cf;
}

#promotions-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #14100e;
}

.guest-promotion-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guest-promotion-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem .55rem .4rem;
  background: linear-gradient(transparent, rgb(0 0 0 / .85));
  color: white;
}

@media (min-width: 90rem) and (min-height: 58rem) and (min-aspect-ratio: 3/2) {
  #page-container:has(.guest-display) {
    height: 100svh;
  }

  .guest-display-header,
  .guest-display {
    font-family: Arial, Helvetica, sans-serif;
  }

  .guest-display-header nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    height: 11.7svh;
    padding-inline: 2.5vw;
    background: linear-gradient(155deg, #47382c, #70563f);
  }

  .guest-display-header h1 {
    font-size: clamp(2rem, 2.7vw, 3.35rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.04;
    white-space: normal;
  }

  .guest-display {
    flex: 1;
    min-height: 0;
    display: grid;
  }

  .guest-display-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    grid-template-rows: 39svh minmax(0, 1fr);
  }

  .guest-activities {
    height: auto;
    min-height: 0;
    background: #000;
  }

  #activities-wrapper {
    padding: 4px;
  }

  #activities {
    padding-inline: 0;
  }

  #activities > .flex-none {
    width: 22.5svh;
  }

  .guest-activity-labels {
    padding: 6px 8px 10px;
  }

  .guest-activity-name h3 {
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .guest-directory {
    min-height: 0;
    grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, .9fr);
    gap: clamp(5px, .65vw, 12px);
    padding: 5px 8px 8px;
  }

  .guest-meals,
  .guest-hospitality,
  .guest-information,
  .guest-module {
    gap: 4px;
  }

  .guest-information {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .guest-module-title,
  .guest-specials #module_title :is(h1, h2) {
    font-size: clamp(.8rem, .91vw, 1.1rem);
    padding: .26rem .25rem;
    border-radius: .3rem;
  }

  .guest-directory .guest-venue-copy {
    padding-block: .18rem;
  }

  .guest-directory .guest-venue-row .text-xs {
    font-size: .68rem;
    line-height: 1.05;
  }

  .guest-directory .guest-venue-details svg {
    width: .65rem;
    height: .65rem;
  }

  .guest-directory .guest-venue-row .guest-card-name {
    font-size: .82rem;
  }

  .guest-directory .guest-venue-row .guest-venue-details {
    margin-top: .08rem;
    gap: 0;
  }

  .guest-directory .guest-info-card > div:last-child {
    padding: .28rem .22rem;
  }

  .guest-directory .guest-info-card p {
    margin-block: .08rem;
    line-height: 1.15;
  }

  .guest-hospitality,
  .guest-staff {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .guest-hospitality {
    align-self: stretch;
  }

  .guest-directory #staff-wrapper {
    justify-self: center;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  :is(.guest-directory, .guest-directory .guest-module, .guest-directory .guest-information) > turbo-cable-stream-source {
    display: none;
  }

  .guest-specials {
    align-self: stretch;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(100%, 25svh);
    justify-self: center;
  }

  .guest-specials .guest-photo-panel {
    height: 100%;
    min-height: 0;
  }



}

@media (min-width: 90rem) and (min-height: 58rem) and (max-height: 62rem) and (min-aspect-ratio: 3/2) {
  .guest-display-content {
    grid-template-rows: 37svh minmax(0, 1fr);
  }

  .guest-module-title,
  .guest-specials #module_title :is(h1, h2) {
    padding-block: .18rem;
    font-size: 1rem;
  }

  .guest-directory .guest-info-card p {
    margin-block: 0;
    line-height: 1.1;
  }

  .guest-qr-trigger {
    padding-block: .3rem;
  }

}

.image-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.image-upload-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1px solid var(--color-minor);
  border-radius: .45rem;
  background: #652799;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

summary.image-upload-button,
.image-cloud-button {
  background: white;
  color: #652799;
}

.image-upload-input:focus-visible + .image-upload-button,
.image-upload-button:focus-visible {
  outline: 2px solid #652799;
  outline-offset: 3px;
}

.image-upload-filename {
  margin-inline-start: .5rem;
  overflow-wrap: anywhere;
}

.image-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .5rem;
  max-height: 22rem;
  overflow: auto;
  margin-top: .65rem;
  padding: .25rem;
}

.image-picker-option {
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: .35rem;
  border: 1px solid #a6a2a8;
  border-radius: .35rem;
  cursor: pointer;
}

.image-picker-option:has(input:checked) {
  background: #f2e6fc;
  border-color: #652799;
}

.image-picker-option img {
  width: 100%;
  height: 4rem;
  object-fit: contain;
}

.image-picker-option span {
  font-size: .75rem;
  overflow-wrap: anywhere;
}

.guest-activity-dialog {
  width: min(44rem, calc(100vw - 2rem));
}

.guest-activity-dialog-image {
  display: block;
  width: 100%;
  height: min(58svh, 40rem);
  object-fit: contain;
  background: #17131c;
}

.image-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}

.image-library-preview {
  display: grid;
  place-items: center;
  height: 8rem;
  overflow: hidden;
  border-radius: .4rem;
  background: #eeeaf2;
}

.image-library-preview img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: contain;
}

.library-category {
  padding: .4rem .65rem;
  border: 1px solid #795594;
  border-radius: .4rem;
}

.library-category[aria-current="page"] {
  background: #652799;
  color: white;
}

.guest-info-button {
  width: 100%;
  min-height: 4rem;
  cursor: pointer;
}

.guest-info-button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.guest-info-copy {
  display: grid;
  align-content: center;
  padding: .28rem .22rem;
  overflow-wrap: anywhere;
}

.guest-info-copy > span {
  display: block;
  margin-block: .08rem;
  font-size: .75rem;
  line-height: 1.15;
}

.guest-information-expanded,
.guest-map-expanded {
  display: block;
  width: 100%;
  max-height: 56svh;
  object-fit: contain;
  margin: .65rem auto;
}

@media (min-width: 90rem) and (min-height: 58rem) and (min-aspect-ratio: 3/2) {
  .guest-information > .guest-module:not(.guest-information-qr) {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .guest-information-qr {
    flex: none;
  }

  .guest-information .guest-info-button {
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
  }

  .guest-information .guest-info-copy {
    min-height: 0;
    overflow: auto;
    align-content: safe center;
    gap: 1px;
    padding: .15rem .22rem;
  }

  .guest-information .guest-info-copy > span {
    margin: 0;
    font-size: .72rem;
    line-height: 1.08;
  }

  .guest-information .guest-info-copy > .guest-card-name {
    font-size: .9rem;
  }
}

.guest-map-copy {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .2rem;
  min-width: 0;
  padding: .2rem .35rem;
  overflow-wrap: anywhere;
}

.guest-map-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border: 1px solid currentColor;
  border-radius: .35rem;
  color: var(--color-card_title);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.15;
}

.guest-map-label svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.guest-map-hint {
  max-width: 22ch;
  font-size: .68rem;
  line-height: 1.15;
}

.dashboard-disclosure::-webkit-details-marker {
  display: none;
}

.dashboard-disclosure {
  list-style: none;
}

details[open] > .dashboard-disclosure > svg:last-child {
  transform: rotate(180deg);
}

.image-library-card {
  display: block;
  cursor: pointer;
  border: 2px solid transparent;
}

.image-library-card:has(input:checked) {
  border-color: #652799;
  background: #f5ecfc;
}

.library-category:disabled {
  cursor: default;
  opacity: .45;
}

.image-library-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: 90dvh;
  margin: auto;
  padding: 1rem;
  border-radius: .65rem;
  background: white;
  color: #211a29;
}

.image-library-dialog::backdrop {
  background: rgb(0 0 0 / .65);
}

.image-library-dialog img {
  width: 100%;
  max-height: 65dvh;
  margin-block: .7rem;
  object-fit: contain;
}

.guest-display-header #setting_logo img {
  transform: scale(1.1);
}

@media (min-width: 48rem) {
  .guest-display-header #setting_logo img {
    transform-origin: left center;
  }
}

.guest-mobile-nav {
  display: none;
}

@media (width < 48rem) and (orientation: portrait) {
  .guest-mobile-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    padding: .375rem .25rem;
    border-block: 1px solid rgb(235 213 255 / .22);
    background: #392c22;
  }

  .guest-mobile-nav a {
    display: grid;
    min-height: 44px;
    place-items: center;
    color: #f3e9ff;
    font-size: .8125rem;
    font-weight: 700;
    text-align: center;
  }

  .guest-display:not(:has(#promotions > .flex-none)) .guest-mobile-nav a[href="#guest-promotions-section"] {
    display: none;
  }

  .guest-mobile-nav a + a {
    border-inline-start: 1px solid rgb(235 213 255 / .22);
  }

  .guest-mobile-nav a:active {
    background: rgb(235 213 255 / .14);
  }

  .guest-mobile-nav a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
  }

  .guest-display :is(#guest-activity-section, #main_grid, #guest-bar-section, #guest-promotions-section) {
    scroll-margin-top: 4rem;
  }

  .guest-display-header nav {
    gap: .5rem;
    padding: .75rem 1rem;
  }

  .guest-display-header h1 {
    white-space: normal;
    line-height: 1.15;
  }

  .guest-display-header nav > div:last-child {
    flex-direction: row;
    gap: .75rem;
  }

  .guest-display-header [data-dropdown-toggle="language-dropdown"] {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  #activities {
    padding-inline: .25rem;
    column-gap: .5rem;
  }

  #activities > .flex-none {
    width: clamp(11.5rem, 60vw, 17rem);
    height: clamp(21.25rem, 48svh, 27rem);
  }

  .guest-activity-name h3 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .guest-directory {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: .75rem;
  }

  .guest-module-title,
  .guest-specials #module_title :is(h1, h2) {
    font-size: 1rem;
  }

  .guest-directory .guest-venue-row {
    min-height: 4rem;
  }

  .guest-promotions:not(:has(#promotions > .flex-none)),
  .guest-specials:not(:has(#specials > .flex-none)) {
    display: none;
  }

  .guest-directory .guest-photo-panel {
    width: 100%;
    max-width: 26rem;
    height: auto;
    aspect-ratio: 2 / 3;
    justify-self: center;
  }

  .guest-directory #promotions-wrapper {
    aspect-ratio: 16 / 9;
    max-width: none;
  }

  .guest-photo-panel .flex-none > [data-controller~="popup"] {
    height: 100%;
  }

  .guest-staff-caption {
    padding: 2.25rem 1rem 1rem;
    background: linear-gradient(transparent, rgb(0 0 0 / .9) 44%);
  }

  .guest-staff-caption h3 {
    font-size: 1.125rem;
    line-height: 1.2;
  }

  .guest-staff-caption p {
    font-size: .9375rem;
    line-height: 1.35;
  }
}


@media (min-width: 90rem) and (min-height: 58rem) and (min-aspect-ratio: 3/2) {
  .guest-display-content {
    grid-template-rows: 34svh minmax(0, 1fr);
  }

  .guest-directory {
    grid-template-columns: minmax(0, .82fr) minmax(0, 2.25fr) minmax(0, 1.28fr)
                           minmax(0, 1fr) minmax(0, .82fr);
  }

  .guest-meals,
  .guest-hospitality {
    min-height: 0;
    align-self: stretch;
  }

  .guest-meals {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .guest-hospitality {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .guest-hospitality > .guest-promotions {
    box-sizing: border-box;
    max-width: min(100%, 38svh);
    width: 100%;
    justify-self: center;
  }

  .guest-meals > .guest-module,
  .guest-hospitality > .guest-module:first-of-type {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .guest-venue-list {
    align-items: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}