/* ==========================================================================
   BOOKBTN — “Book a Table” diamond + rotating border
   ========================================================================== */

/* === Variables === */
:root {
    --bookbtn-primary:   #D9B282;
    --bookbtn-contrast:  #050608;
    --bookbtn-size:      100px;    /* outer box dimensions */
    --bookbtn-border:    2px;      /* rotating square border thickness */
    --bookbtn-speed:     18s;      /* spin duration */
    --bookbtn-offset:    50px;     /* distance from bottom/right edges */
  }
  
  /* === Container: bottom-right fixed === */
  .bookbtn-container {
    position: absolute; /* fixed to float during scroll */
    bottom: var(--bookbtn-offset);
    right:  var(--bookbtn-offset);
    width:  var(--bookbtn-size);
    height: var(--bookbtn-size);
    pointer-events: none; /* only the link inside is clickable */
    z-index: 1000;
    transform: translateZ(0); /* GPU accel */
  }
  
  /* === Rotating square behind === */
  .bookbtn-rotater {
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  100%;
    height: 100%;
    border: var(--bookbtn-border) solid var(--bookbtn-primary);
    transform-origin: center center;
    animation: bookbtn-spin var(--bookbtn-speed) linear infinite;
    pointer-events: none;
  }
  
  /* Center the rotater around the container’s middle */
  @keyframes bookbtn-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }
  
  /* === Clickable link wrapper === */
  .bookbtn-link {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    text-decoration: none;
    pointer-events: auto;
  }
  
  /* === Static diamond (“box”) === */
  .bookbtn-box {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bookbtn-primary);
    /* transform: rotate(45deg); */
    transform-origin: center center;
    pointer-events: none;
  }
  
  /* === Inner content, counter-rotated so it reads upright === */
  .bookbtn-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* transform: rotate(-45deg); */
    transform-origin: center center;
  }
  
  /* === SVG icon styling === */
  .bookbtn-content svg {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    fill: var(--bookbtn-contrast);
  }
  
  /* === Two-line text === */
  .bookbtn-text {
    text-align: center;
    font-size: 0.75rem;     /* approx. 12px */
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bookbtn-contrast);
  }
  .bookbtn-text span {
    display: block;
  }

.book-text {
  font-size: 0.6rem;
}


@media screen and (max-width: 480px) {
  :root {
    --bookbtn-size: 64px;
    --bookbtn-offset: 20px;
  }

  .bookbtn-content svg {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
  }

  .bookbtn-text {
    font-size: 0.6rem;
  }

  .book-text {
    font-size: 0.4rem;
  }
}