/* ====== GLOBAL / YOUR UI ====== */
  body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: Arial, sans-serif;
    background-image: url('backgar.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* allow page to scroll; only lock X */
    overflow-x: hidden;
    overflow-y: auto;
  }

  @font-face {
    font-family: 'Satoshi';
    src: url('./fontz/Satoshi-Regular.woff2') format('woff2'),
         url('./fonts/Satoshi-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Satoshi';
    src: url('./fontz/Satoshi-Bold.woff2') format('woff2'),
         url('./fonts/Satoshi-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }

  a, a:visited { text-decoration: none; color: black; }

  .parent {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 0;
  }

  /* Wrap everything in a scaler (your responsive trick) */
  .scaler { transform-origin: top center; transition: transform 0.2s ease; }

  /* Button look (label-box energy) */
  .label-btn{
    display:flex; align-items:center; justify-content:center;
    padding: 8px 10px;
    height: 50px;
    font-weight: 700; font-size: 25px; text-transform: capitalize;
    border: 4px outset rgb(179,177,177);
    background: linear-gradient(to bottom, #8f8d8d, #e6e6e6);
    box-shadow: inset 0 1px 0 #a3a3a3, inset 0 -1px 0 #cccccc;
    cursor: pointer;
  }
  .label-btn:hover{ transform: scale(.98); background: linear-gradient(to bottom, #767ca3, #8cb0da); }
  .label-btn.active{ border: 4px inset rgb(133,133,133); box-shadow: 2px 2px 10px rgba(0,0,0,.45); transform: none; }

  /* Top row */
  .bottom-bar {
    margin-top: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  /* ====== BOOKING CARD (matches your containers) ====== */
  .book-card{
    width: min(800px, calc(100vw - 10px)); /* desktop 800; phones full minus ~5px each side */
    margin: 14px auto 0;
    background: linear-gradient(to bottom, #a3a3a3, #e6e6e6);
    border: 4px outset rgb(179, 177, 177);
    box-shadow: inset 0 1px 0 #a3a3a3, inset 0 -1px 0 #cccccc;
  }
  .book-body{
    /* let the iframe expand while Tally sets dynamicHeight */
    overflow: visible;
    min-height: 80vh;
  }
  .book-body iframe{
    width:100%;
    display:block;
    border:0;
    /* fallback height in case script is delayed + a reasonable min */
min-height: 80vh;
    max-height:80vh;
  }
  .book-footer{
    height: 35px;
    display:flex; align-items:center; justify-content:center;
    border-top: 7px ridge #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: linear-gradient(to bottom, #8f8d8d, #e6e6e6);
  }

  /* Top row: left title + right NEXT */
  .top-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
    width: min(800px, calc(100vw - 10px));
    margin: 0 auto;
  }
  .title-btn { text-transform: uppercase; letter-spacing:.5px;
  min-width: 200px;; }
  .next-btn  { text-transform: uppercase; letter-spacing:.5px; min-width: 150px; }

  /* Booking card */
  .book-card{
    width: min(800px, calc(100vw - 10px));
    margin: 14px auto 0;
    background: linear-gradient(to bottom, #a3a3a3, #e6e6e6);
    border: 4px outset rgb(179, 177, 177);
    box-shadow: inset 0 1px 0 #a3a3a3, inset 0 -1px 0 #cccccc;
  }
  .book-body{ overflow:visible; }
  .book-body iframe{ width:100%; max-height:80vh; border:0; display:block; }
  .book-footer{
    height: 35px;
    display:flex; align-items:center; justify-content:center;
    border-top: 7px ridge #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: linear-gradient(to bottom, #8f8d8d, #e6e6e6);
  }
  .yy{border: 2px outset rgb(87, 87, 87);
border-radius: 3px;
width: fit-content;
text-transform: uppercase;
font-weight: 700;
box-shadow: 2px 2px 2px black;
background-color: rgba(240, 255, 255, 0.61);
z-index: 3;
margin-bottom: 50px;
margin-top: 20px;
padding: 4px;}

.yy:hover{cursor: pointer;
transform: scale(1.5);}

  /* Scaler steps */
  @media screen and (max-width: 390px){ .scaler{ transform: scale(0.80); } }

  /* ====== Scaler steps ====== */
  @media screen and (max-width: 1100px){ .scaler{ transform: scale(0.95); } }
  @media screen and (max-width: 900px) { .scaler{ transform: scale(0.90); } }
  @media screen and (max-width: 750px) { .scaler{ transform: scale(0.80); } }
  @media screen and (max-width: 600px) { .scaler{ transform: scale(0.80); } }
  @media screen and (max-width: 480px) {
    .scaler{ transform: scale(0.80); }
    body{ background-position: left; }
  }
  @media screen and (max-width: 390px){ .scaler{ transform: scale(0.80); } }