body {
  margin: 0;
  padding: 10px;
  font-family: Arial, sans-serif;
  color: #fefefe;
  background: #2e7aeb url(../bliss-4k.jpg) fixed center;
  text-align: center;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;   /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;
  
  /* 1px semi-opaque line + 1px gap, repeating every 2px */
  background-image: linear-gradient(
    rgba(39,43,46,0.6) 1px,
    transparent 1px
  );
  background-size: 100% 2px;
  
  /* smoothly shift the lines down to simulate a CRT scan */
  animation: scanMove 10s linear infinite;
}

.container {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto 1fr;
  gap: 10px 20px;
  width: 100%;
  max-width: 100%;
}

.desktop-icons {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.desktop-icon {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  color: #fafafa;
}

.desktop-icon img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.25rem;
}

.desktop-icon.selected {
  background: rgba(255,255,255,0.2);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

.desktop-icon.selected span {
  background: linear-gradient(180deg, #6a11cb, #2575fc);
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  display: inline-block;
}

.container > .window {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.window {
  width: 100%;
  max-width: 1080px;
  margin: 10px 0;
  background: #2904a8 url(../install_c.png);
  background-size: auto;
  background-blend-mode: luminosity;
  box-sizing: border-box;
  position: relative;  
  z-index: 2;
}

.window-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 1rem;
}

.controls-wrap {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto auto;
  gap: 1rem;
  justify-content: center;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 761px;
}

.controls-wrap fieldset {
  /*flex: 1 1 calc(50% - 0.5rem);*/
  min-width: 0;
  margin: 0;
  padding: 0.5rem;
  border: none;
  border-radius: 6px;
  background-color: #171717;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 1.4em;
  color: #fafafa;   
} .controls-wrap fieldset label, .controls-wrap fieldset legend { font-size: inherit; color: #a4aaff;  }
  
.controls-wrap fieldset:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.controls-wrap fieldset:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

/*.controls-wrap fieldset:nth-child(3) {*/
/*  grid-column: 1;*/
/*  grid-row: 3;*/
/*}*/

.controls-wrap fieldset:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.controls-wrap fieldset:nth-child(4) {
  grid-column: 2;
  background: none;
}

.controls-wrap fieldset:nth-child(5) {
  grid-column: 1;
  grid-row: 3 / span 2;
  background: none;
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .desktop-icons {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: left;
    /*margin-bottom: 1rem;*/
  }
  .container > .window {
    grid-column: 1;
    grid-row: 2;
  }
  .window {
    width: 100%;
    max-width: 100%;
  }
  .controls-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    width: 100%;
    max-width: 100%;
  }
  .controls-wrap fieldset {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .guests_q_tabs button,
  .guests_h_tabs button,
  .guests_d_tabs button {
    flex: 1 1 45%;
  }
  
  .window-body .clippy-tip { display: block !important; }
  .window-body .clippy-content {
    background-image: none !important;
    min-height: inherit !important;
    padding-left: 0 !important;
  }
}

.controls-wrap fieldset legend {
  margin-bottom: 0;
  padding-bottom: 0.25rem;
}

.guests_q_tabs,
.guests_h_tabs,
.guests_d_tabs {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  flex-wrap: wrap;
}

.guests_q_tabs button,
.guests_h_tabs button,
.guests_d_tabs button {
  flex: 0 1 auto;
  border: 2px solid #808080;
  background: #2e2e2e;
  color: #fafafa;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  transition: background 0.3s, transform 0.2s;
}

.guests_q_tabs button:hover,
.guests_h_tabs button:hover,
.guests_d_tabs button:hover {
  transform: translateY(-2px);
}

/*.guests_q_tabs button:hover,*/
/*.guests_q_tabs button.selected {*/
/*  animation: shakeBg 1.5s 2;*/
/*}*/

.guests_q_tabs button.selected {
  background-image: var(--selected-icon), linear-gradient(180deg, #6a11cb, #2575fc);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 1px 1px 1px #000, 1px 1px 2px #000, 1px 1px 3px #000, 1px 1px 4px #000;
}

.guests_q_tabs button[data-q="1"] { --selected-icon: url('/reserva-1c.png'); }
.guests_q_tabs button[data-q="2"] { --selected-icon: url('/reserva-2.png'); }
.guests_q_tabs button[data-q="3"] { --selected-icon: url('/reserva-3.png'); }
.guests_q_tabs button[data-q="4"] { --selected-icon: url('/reserva-4.png'); }

.guests_h_tabs button.selected, .guests_d_tabs button.selected {
  background: linear-gradient(180deg, #6a11cb, #2575fc);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* 1) Keyframes with farther start positions */
@keyframes swipeRightBg {
  from { background-position: -50% 50%; }
  to   { background-position: 50% 50%; }
}
@keyframes swipeBottomBg {
  from { background-position: 50% -200%; }
  to   { background-position: 50% 25%; }
}
@keyframes swipeLeftBg {
  from { background-position: 200% -25%; }
  to   { background-position: 25% 75%; }
}
@keyframes swipeTopBg {
  from { background-position: 50% 250%; }
  to   { background-position: 50% 25%; }
}

/* 2) Apply on hover or when .selected, matching data-q directions */
.guests_q_tabs button[data-q="1"]:hover,
.guests_q_tabs button[data-q="1"].selected {
  animation: swipeRightBg 1.2s ease-out forwards;
}
.guests_q_tabs button[data-q="2"]:hover,
.guests_q_tabs button[data-q="2"].selected {
  animation: swipeBottomBg 1.2s ease-out forwards;
}
.guests_q_tabs button[data-q="3"]:hover,
.guests_q_tabs button[data-q="3"].selected {
  animation: swipeLeftBg 1.2s ease-out forwards;
}
.guests_q_tabs button[data-q="4"]:hover,
.guests_q_tabs button[data-q="4"].selected {
  animation: swipeTopBg 1.2s ease-out forwards;
}

/* 3) Ensure default position is centered */
.guests_q_tabs button {
  background-position: 50% 50%;
}



#price-fieldset {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: 0.25rem;
  column-gap: 1rem;
  align-items: center;
}

#price-fieldset label {
  grid-column: 1;
  text-align: left;
  white-space: nowrap;
}

#price-fieldset span {
  grid-column: 2;
  text-align: right;
}

#price-fieldset label:last-of-type, #price-fieldset span:last-of-type { font-weight: bold; margin-top: 10px; }

#my-cal-inline {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

#my-cal-inline.loading {
  opacity: 0.5;
  pointer-events: none;
}

#my-cal-inline .loading-busy {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
}

#my-cal-inline .loading-progress {
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  background: #6a11cb;
  width: 0;
  z-index: 1000;
  animation: progress 1s linear forwards;
}

#price-fieldset {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 0.25rem;
  column-gap: 1rem;
  align-items: center;
}

/* 1) Make the fieldset act as one full-width row */
#promo-container {
  display: grid;
  grid-template-columns: 1fr;   /* single column */
  align-items: center;
  padding: 0.5rem 0;
  grid-column: 1 / -1;          /* span both columns of your parent grid */
  border: none;
  margin: 0;
}

/* 2) Initial prompt: small & gray */
.promo-prompt {
  font-size: 0.85rem;
  color: #777;
  cursor: pointer;
}

/* 3) Entry view: fix overflow & reorder items */
.promo-entry {
  display: none;           /* stays hidden until needed */
  align-items: center;
  flex-wrap: wrap;         /* wrap instead of overflow */
  gap: 0.5rem;
}

/* input grows/shrinks, never forces container wider */
.promo-entry input {
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}

/* button stays its intrinsic size */
.promo-entry button {
  flex-shrink: 0;
  order: 2;
}

/* cancel-× pinned to the right */
.promo-entry .cancel-btn {
  order: 3;
  margin-left: auto;
}

.promo-link:hover { text-decoration: underline; }

/* 4) Message view: full-width flex with clear-× on far right */
.promo-message {
  display: none;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  font-size: 1rem;
}

/* clear-× pushed right */
.promo-message .clear-btn {
  margin-left: auto;
}

.promo-entry .cancel-btn,
.promo-message .clear-btn {
  cursor: pointer;
  font-size: 1.2rem;    /* bump up size */
  color: #333;          /* fixed “default” shade */
  line-height: 1;       /* ensure vertical centering */
}

/* color for success / error */
.promo-message.success { color: #080; }
.promo-message.error   { color: #c00; }

#discount-value {
  color: #080;   /* always green when shown */
  font-weight: bold;
}

/* hide calendar until “Ver agenda ahora” is clicked */
#my-cal-inline {
  display: none;
}

.controls-wrap > #action-button-container {
  grid-column: 2;
  justify-self: center;
  margin-top: 0;
}

/* action button always shown unless JS hides it */
#action-button-container {
  text-align: center;
  margin-top: 1rem;
}

/* style the link like your retro buttons */
#action-button {
  display: inline-block;
  position: relative;
  padding: 0.5rem 1.2rem;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 1rem;
  line-height: 2rem;
  color: #fafafa;
  background-image: linear-gradient(180deg, #6a11cb, #2575fc);
  border: 2px solid #808080;
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s;
}

#action-button::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: url('/mp.svg') no-repeat center/contain;
  pointer-events: none;
}

#action-button:hover {
  transform: translateY(-2px);
}

#action-button {
  position: relative;
}

#action-button::after {
  content: "»";
  display: inline-block;
  margin-left: 0.3rem;
}

@keyframes arrow-step {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(4px); }
  66%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

#action-button:hover::after {
  animation: arrow-step 0.9s steps(3) infinite;
}

/* full-screen shade behind modals */
.window-overlay {
  position: fixed;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* container wrapper for every window you create */
.window-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

/* area under the content for modal buttons */
.window-buttons {
  margin: 0.5em;
  text-align: right;
}

/* small tweak to space out any buttons you add */
.window-buttons .button {
  margin-left: 0.5em;
}

.window-container.modal .window-buttons {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5em;
}

.window-container.modal .window-buttons .accept-btn {
  margin: 0;
}

.window-container.modal { max-width: 400px; }
.window-container.modal .window-body, .window-container.modal .window-body p { padding-top: 0; font-size: 1rem; }

.purchase-options label {
  margin-bottom: 0.5em;
  text-align: left;
  cursor: pointer;
}

.clippy {
  position: absolute !important;
  pointer-events: none !important;
}

.clippy, .clippy-balloon {
  position: relative;
  cursor: default !important;
}

.clippy-balloon { opacity: .8 } 

@keyframes clippy-glow {
  0%   { box-shadow: 0 0 0 transparent; }
  50%  { box-shadow: 0 0 12px rgba(255,255,0,0.7); }
  100% { box-shadow: 0 0 0 transparent; }
}

#context-help .clippy-balloon.glow {
  animation: clippy-glow 2s ease-in-out forwards;
}

.window-body .clippy-top-left .clippy-tip { margin-left: -30%; }
.window-body .clippy-balloon { max-width: inherit !important; }
.window-body .clippy-tip { display: none; }
.window-body .clippy-content {
  display: flex;
  align-items: center;
  max-width: none !important;
  background-image: url("https://raw.githubusercontent.com/React95/React95/refs/heads/master/packages/icons/src/icons/bulb.ico");
  background-repeat: no-repeat;
  background-position: left;
  min-height: 50px;
  padding-left: 35px;
}

/*.clippy-top-left .clippy-tip, .clippy-top-right .clippy-tip, .clippy-bottom-right .clippy-tip, .clippy-bottom-left .clippy-tip {*/
/*    top: 100%;*/
/*    margin-top: 0px;*/
/*    left: 100%;*/
/*    margin-left: -50px;*/
/*}*/

@keyframes levitate {
  0%,100%   { transform: translateY(0);   }
  50%       { transform: translateY(-4px); }
}

img.floating-logo {
  animation: levitate 3s steps(4,end) infinite;
}

/* res: https://github.com/React95/React95/tree/master/packages/icons */