@import url("/assets/theme/reset-0674a525.css");

@import url("/assets/theme/tables-50abf910.css");

@import url("/assets/components/modals-c034d1e8.css");
@import url("/assets/components/headings-dafe2527.css");

@import url("/assets/theme/icons-f971bb95.css");

:root {
  --icon-size: 1.5rem;
}

/* Light colors */
/* :root {
  --primary: #1a1f36;
  --secondary: #6366f1;
  --accent: #f59e0b;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --surface: #ffffff;
  --background: #f8fafc;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} */

/* Dark colors */
:root {
  --primary: #f8fafc;
  --secondary: #cbd5e1;
  --accent: #f59e0b;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --surface: #1e293b;
  --background: #0f172a;
  --muted: #94a3b8;
  --border: #334155;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;
  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.4);
  --shadow: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.5), 0 0.125rem 0.25rem -0.125rem rgb(0 0 0 / 0.5);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.5), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.5);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Gradient definitions for dark mode */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, #94a3b8 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, #fbbf24 100%);
  --gradient-hero: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --gradient-card: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Modals */
:root {
  --modal--min-width: 30dvw;
  --modal--min-height: auto;
  --modal--max-width: 90dvw;
  --modal--max-height: 90dvh;
  --modal--background: var(--surface);
  --modal--text-color: var(--primary);
  --modal--border: 1px solid var(--border);
  --modal--border-radius: var(--radius-lg);
  --modal--shadow: var(--shadow-lg);
}

a {
  text-decoration: none;
}

.hidden {
  display: none;
}

[id^=guest-portal] {
  background: var(--background);
  color: var(--primary);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.6;

  padding-block-end: 60dvh;

  .container {
    max-inline-size: 75rem;
    margin: 0 auto;
    padding-inline: 1.5rem;
  }

  >.header {
    background: var(--surface);
    backdrop-filter: blur(0.75rem);
    border-block-end: 0.0625rem solid var(--border);
    position: sticky;
    inset-block-start: 0;
    z-index: 100;

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: 1rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 700;
      font-size: 1.5rem;
      background: var(--gradient-primary);
      background-clip: text;
      user-select: none;

      .logo-image {
        inline-size: 50px;
        max-block-size: 50px;
        object-fit: contain;
      }
    }

    .nav-tabs {
      display: flex;
      gap: 0.5rem;
      background: var(--background);
      padding: 0.25rem;
      border-radius: var(--radius-md);

      .tab {
        padding-block: 0.5rem;
        padding-inline: 1.25rem;
        font-weight: 500;
        color: var(--muted);
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: var(--transition);
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          inset-block-start: 0;
          inset-inline-start: -100%;
          inline-size: 100%;
          block-size: 100%;
          background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
          transition: inset-inline-start 0.5s;
        }

        &:hover::before {
          inset-inline-start: 100%;
        }

        &.active {
          background: var(--gradient-card);
          color: var(--primary);
          box-shadow: var(--shadow-sm);
        }

        &:hover:not(.active) {
          color: var(--primary);
          background: rgba(99, 102, 241, 0.05);
        }
      }

      .locale-switcher {
        display: contents;

        select {
          appearance: none;
          outline: none;
          border: none;
          background: transparent;

          padding-block: 0.5rem;
          padding-inline: 1.25rem;
          font-weight: 500;
          color: var(--muted);
          cursor: pointer;
          border-radius: var(--radius-sm);

          &.active {
            color: var(--primary);
          }
        }
      }
    }
  }

  >.hero {
    background: var(--gradient-hero);
    color: white;
    padding-block: 5rem;
    margin-block-end: 3rem;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .hero-content {
      max-inline-size: 37.5rem;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;

      h1 {
        font-size: 3rem;
        font-weight: 800;
        margin-block-end: 1rem;
        background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
        background-clip: text;
      }

      p {
        font-size: 1.25rem;
        opacity: 0.9;
        font-weight: 400;
      }
    }
  }

  >.main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-block-end: 4rem;

    >.left-column {
      >section {
        >.heading {
          margin-block-end: 1.5rem;
        }

        &+* {
          margin-block-start: 2.5rem;
        }
      }
    }
  }

  .anchor {
    height: 0;
    width: 0;
    scroll-margin-top: 6rem;
  }

  #system_notifications {
    inline-size: 100%;
    margin-block-end: 1.5rem;

    .notification {
      inline-size: 100%;
      background: var(--gradient-card);
      backdrop-filter: blur(0.625rem);
      border: 0.0625rem solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      margin-block-end: 0.75rem;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      position: relative;
      overflow: hidden;
      transition: var(--transition), opacity 0.5s ease;
      animation: notification-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);

      &::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 0.375rem;
        background: var(--primary);
        opacity: 0.8;
      }

      .header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: none;
        padding: 0;
        margin: 0;
        background: transparent;

        .icon {
          font-size: 1.25rem;
          color: inherit;
          display: flex;
          align-items: center;
        }

        .title {
          font-weight: 700;
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.0625rem;
          color: var(--muted);
        }

        .timestamp {
          margin-inline-start: auto;
          font-size: 0.75rem;
          color: var(--muted);
          opacity: 0.7;
        }
      }

      .body {
        font-size: 1rem;
        color: var(--primary);
        font-weight: 500;
        line-height: 1.5;
      }

      &.success {
        border-color: rgba(16, 185, 129, 0.2);

        &::before {
          background: var(--success);
        }

        .header .title {
          color: var(--success);
        }
      }

      &.warning {
        border-color: rgba(245, 158, 11, 0.2);

        &::before {
          background: var(--warning);
        }

        .header .title {
          color: var(--warning);
        }
      }

      &.error,
      &.danger,
      &.alert {
        border-color: rgba(239, 68, 68, 0.2);

        &::before {
          background: var(--error);
        }

        .header .title {
          color: var(--error);
        }
      }

      &.info {
        border-color: rgba(99, 102, 241, 0.2);

        &::before {
          background: #6366f1;
        }

        .header .title {
          color: #6366f1;
        }
      }

      &:hover {
        transform: translateX(0.25rem);
        border-color: rgba(99, 102, 241, 0.4);
        box-shadow: var(--shadow-lg);
      }
    }
  }

  @keyframes notification-slide-in {
    from {
      opacity: 0;
      transform: translateX(-1rem);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .card {
    background: var(--gradient-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 0.0625rem solid var(--border);
    transition: var(--transition);

    padding: 2rem;
    margin-block: 1.5rem;

    h2 {
      margin-block-end: 1rem;
    }

    h3 {
      margin-block-end: .75rem;
    }

    &:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-0.125rem);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: none;
      margin-block-end: 1.5rem;

      .title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-block-end: 0;
      }

      .right {
        font-weight: 600;
        cursor: pointer;
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
    }
  }

  /* Stripe Elements */
  .stripe-elements {
    margin-block-end: 1.5rem;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.3);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);

    &:focus-within {
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }
  }

  .stripe-errors {
    color: var(--error);
    font-size: 0.875rem;
    margin-block-end: 1rem;
    min-height: 1.25rem;
    font-weight: 500;
  }

  /* Booking Cards */
  .booking {
    .booking-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
      gap: 1.25rem;

      .booking-card {
        border: 0.0625rem solid var(--border);
        border-radius: var(--radius-md);
        padding: 1.5rem;
        transition: var(--transition);
        background: var(--gradient-card);
        position: relative;

        &::before {
          content: '';
          position: absolute;
          inset-block-start: 0;
          inset-inline-start: 0;
          inline-size: 0.55rem;
          block-size: 100%;
          background: var(--gradient-hero);
          border-radius: var(--radius-md) 0 0 var(--radius-md);
          opacity: 0;
          transition: var(--transition);
        }

        &:hover {
          border-color: #6366f1;
          transform: translateY(-0.125rem);

          &::before {
            opacity: 1;
          }
        }

        .booking-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-block-end: 1rem;

          .booking-title {
            font-weight: 600;
            color: var(--primary);
            font-size: 1.1rem;
          }

          .booking-status {
            padding-block: 0.375rem;
            padding-inline: 0.75rem;
            border-radius: 1.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03125rem;

            &.confirmed {
              background: rgba(16, 185, 129, 0.1);
              color: var(--success);
              border: 0.0625rem solid rgba(16, 185, 129, 0.2);
            }

            &.upcoming {
              background: rgba(99, 102, 241, 0.1);
              color: #6366f1;
              border: 0.0625rem solid rgba(99, 102, 241, 0.2);
            }

            &.past {
              background: rgba(100, 116, 139, 0.1);
              color: var(--muted);
              border: 0.0625rem solid rgba(100, 116, 139, 0.2);
            }
          }
        }

        .booking-details {
          .detail-item {
            display: flex;
            justify-content: space-between;
            margin-block-end: 0.5rem;
            font-size: 0.9rem;

            .label {
              color: var(--muted);
              font-weight: 500;
            }

            .value {
              font-weight: 600;
              color: var(--primary);
            }
          }
        }
      }
    }

    .folio {
      .card-icon {
        display: none;
      }

      .totals {
        display: contents;
      }

      .balance {
        &.positive {
          --heading--title--color: var(--error);
        }
      }

      .details {
        .entries-grid {
          inline-size: 100%;
          grid-template-columns: auto auto 1fr auto;
          column-gap: .5rem;

          .headings {
            padding-block-end: .5rem;

            .heading {
              display: revert;
              font-weight: 500;
            }
          }

          .entries {
            .entry {

              &.charge,
              &.payment,
              &.tax.exclusive {
                padding: .25rem;
              }

              .kind {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: .1rem;

                .icon {
                  block-size: 1.25rem;
                  inline-size: 1.25rem;
                }
              }

              .description {
                display: flex;
                flex-direction: column;

                .text-danger {
                  font-size: .8em;
                  color: var(--warning);
                }
              }

              .total {
                text-align: right;
              }
            }

            .comment {
              font-size: .8em;
              color: var(--muted);

              &+.entry {
                margin-block-start: .75rem;
              }
            }

            .separator {
              padding-block-start: 2rem;
            }
          }

          .totals {
            padding-block-start: 1rem;

            .label {
              grid-column: 2 / span 2;
              font-weight: 500;
            }

            .amount {
              text-align: right;
            }
          }
        }
      }

      /* Wide screens: Multi-row layout */
      @media (min-width: 1024px) {

        .totals {
          display: flex;
          flex-direction: row;
          column-gap: 1.5rem;
          margin-block: 1.5rem;

          .total-charges,
          .total-payments,
          .balance {
            flex: 1;
            margin-block: 0;
          }
        }
      }
    }
  }

  /* Check-in Steps */
  .check-in {
    .check-in-steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .step {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        border: 0.0625rem solid var(--border);
        border-radius: var(--radius-md);
        transition: var(--transition);
        background: var(--gradient-card);

        a {
          display: contents;
        }

        &:hover {
          border-color: #6366f1;
          transform: translateX(0.25rem);
        }

        .step-icon {
          inline-size: 3rem;
          block-size: 3rem;
          border-radius: 50%;
          background: var(--gradient-hero);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 1.1rem;
          flex-shrink: 0;
        }

        .step-content {
          flex: 1;

          .step-status {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            margin-block-end: 0.25rem;
            display: block;

            &.complete {
              color: var(--success);
            }

            &.incomplete {
              color: var(--warning);
            }
          }

          h3 {
            font-size: 1.1rem;
            margin-block-end: 0.25rem;
            color: var(--primary);
            font-weight: 600;
          }

          p {
            font-size: 0.9rem;
            color: var(--muted);
          }
        }

        .step-action {
          color: #6366f1;
          font-weight: 600;
          cursor: pointer;
          padding-block: 0.5rem;
          padding-inline: 1rem;
          border-radius: var(--radius-sm);
          transition: var(--transition);

          &:hover {
            background: rgba(99, 102, 241, 0.1);
          }
        }
      }
    }
  }

  /* Location Info Grid */
  .location-info {
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
      gap: 1.25rem;

      .info-card {
        text-align: center;
        block-size: 100%;
        padding-block: 1.5rem;
        padding-inline: 1rem;
        border-radius: var(--radius-md);
        background: var(--background);
        transition: var(--transition);
        border: 0.0625rem solid transparent;

        &:hover {
          background: var(--gradient-card);
          border-color: var(--border);
          transform: translateY(-0.125rem);
        }

        .info-icon {
          font-size: 2.5rem;
          background: var(--gradient-hero);
          background-clip: text;
          margin-block-end: 1rem;
        }

        h3 {
          font-size: 1.1rem;
          margin-block-end: 0.75rem;
          color: var(--primary);
          font-weight: 600;
        }

        p {
          font-size: 0.9rem;
          color: var(--muted);
          line-height: 1.5;
        }
      }
    }
  }

  /* Extras */
  .upsells {
    .upsells-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
      gap: 1.5rem;

      .upsell-card {
        border: 0.0625rem solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: var(--transition);
        background: var(--gradient-card);
        display: flex;
        flex-direction: column;

        &:hover {
          transform: translateY(-0.25rem);
          box-shadow: var(--shadow-lg);
          border-color: #6366f1;
        }

        .upsell-image {
          inline-size: 100%;
          aspect-ratio: 1;
          background: var(--gradient-hero);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 0.9rem;
          font-weight: 500;
          position: relative;
          overflow: hidden;

          img {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
          }

          &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.1);
          }
        }

        .upsell-content {
          padding: 1.5rem;
          flex: 1;
          display: flex;
          flex-direction: column;

          h3 {
            font-size: 1.2rem;
            margin-block-end: 0.75rem;
            color: var(--primary);
            font-weight: 600;
          }

          p {
            font-size: 0.9rem;
            color: var(--muted);
            margin-block-end: 1rem;
            line-height: 1.5;
          }

          .upsell-price {
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--gradient-accent);
            background-clip: text;
            margin-block-end: 1rem;
            margin-top: auto;
            text-align: center;
          }

          .upsell-actions {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 1rem;

            .upsell-disclaimer {
              font-size: 0.75rem;
              color: var(--muted);
              text-align: center;
              margin-block-end: -0.25rem;
              opacity: 0.8;
            }

            .upsell-form {
              display: flex;
              gap: 0.5rem;
              inline-size: 100%;

              .quantity-select {
                flex: 2;
                text-align: center;
                min-inline-size: 3.5rem;
                font-weight: 600;
              }

              .add-btn {
                flex: 1;
              }
            }

            .upsell-orders {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;
              margin-block-start: 1rem;
              padding-block-start: 1rem;
              border-block-start: 0.0625rem solid var(--border);

              .upsell-order-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.85rem;
                color: var(--primary);
                background: rgba(15, 23, 42, 0.2);
                padding: 0.5rem 0.75rem;
                border-radius: var(--radius-sm);

                .order-info {
                  display: flex;
                  flex-direction: column;
                  gap: 0.125rem;

                  .order-qty {
                    font-weight: 600;
                  }

                  .order-total {
                    font-size: 0.8rem;
                    font-weight: 700;
                    color: var(--accent);
                    opacity: 0.9;
                  }
                }

                .cancel-link {
                  background: transparent;
                  border: none;
                  color: var(--error);
                  font-size: 0.75rem;
                  font-weight: 600;
                  cursor: pointer;
                  padding: 0.25rem 0.5rem;
                  border-radius: var(--radius-sm);
                  transition: var(--transition);

                  &:hover {
                    background: rgba(239, 68, 68, 0.1);
                  }

                  &.status-only {
                    color: var(--muted);
                    cursor: default;
                    text-transform: uppercase;
                    letter-spacing: 0.025rem;
                    background: rgba(148, 163, 184, 0.1);

                    &:hover {
                      background: rgba(148, 163, 184, 0.1);
                    }

                    &.rejected,
                    &.cancelled {
                      color: var(--error);
                      background: rgba(239, 68, 68, 0.1);
                    }

                    &.confirmed,
                    &.served {
                      color: var(--success);
                      background: rgba(16, 185, 129, 0.1);
                    }
                  }
                }
              }
            }
          }

          .add-btn {
            inline-size: 100%;
            padding: 0.75rem;
            background: var(--gradient-hero);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            text-align: center;

            &::before {
              content: '';
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: -100%;
              inline-size: 100%;
              block-size: 100%;
              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
              transition: inset-inline-start 0.5s;
            }

            &:hover::before {
              inset-inline-start: 100%;
            }

            &:hover {
              transform: translateY(-0.0625rem);
              box-shadow: 0 0.25rem 0.75rem rgba(99, 102, 241, 0.3);
            }

            &.remove-btn {
              background: transparent;
              color: var(--error);
              border: 0.0625rem solid var(--error);

              &::before {
                display: none;
              }

              &:hover {
                background: rgba(239, 68, 68, 0.1);
                box-shadow: 0 0.25rem 0.75rem rgba(239, 68, 68, 0.2);
              }

              &.confirmed,
              &.served {
                color: var(--success);
                border-color: var(--success);

                &:hover {
                  background: rgba(16, 185, 129, 0.1);
                  box-shadow: 0 0.25rem 0.75rem rgba(16, 185, 129, 0.2);
                }
              }

              &.requires-confirmation {
                color: var(--muted);
                border-color: var(--muted);

                &:hover {
                  background: rgba(148, 163, 184, 0.1);
                  box-shadow: 0 0.25rem 0.75rem rgba(148, 163, 184, 0.2);
                }
              }
            }
          }
        }
      }
    }
  }

  /* Sidebar */
  .sidebar {
    max-width: 100%;
    overflow: hidden;

    .sidebar-card {
      margin-block-end: 1.5rem;

      h2 {
        margin-block-end: .5rem;
      }

      .map-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        block-size: 12.5rem;
        background: var(--gradient-hero);
        border-radius: var(--radius-md);
        color: white;
        font-weight: 500;
        padding: 1rem;

        text-align: center;
        overflow: hidden;
        transition: var(--transition);

        .map-address {
          position: relative;
          z-index: 1;
          font-size: 0.9rem;
          opacity: 0.9;
          margin: 0;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
        }
      }

      .contact-info {
        a {
          text-decoration: none;
        }

        .contact-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          width: 100%;
          margin-block-end: 1rem;
          padding: 0.75rem;
          border-radius: var(--radius-md);
          transition: var(--transition);

          &:hover {
            background: var(--background);
          }

          .contact-icon {
            inline-size: 2.75rem;
            block-size: 2.75rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-hero);
            background-clip: text;
            flex-shrink: 0;

            color: var(--primary);
          }

          .contact-details {
            flex: 1;
            min-width: 0;
            /* Important for truncation in flex children */

            .contact-label {
              font-size: 0.8rem;
              color: var(--muted);
              font-weight: 500;
            }

            .contact-value {
              font-weight: 600;
              color: var(--primary);

              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .crew-members {
        .crew-member {
          padding-block: 0.75rem;
          border-block-end: 0.0625rem solid var(--border);

          &:last-child {
            border-block-end: none;
          }

          h3 {
            font-size: 1rem;
            margin-block-end: 0.25rem;
            color: var(--primary);
            font-weight: 600;
          }

          p {
            font-size: 0.85rem;
            color: var(--muted);
          }
        }
      }
    }
  }

  /* Payment Methods Card */
  .payment-methods--card {
    margin-block: 1.5rem;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: var(--transition);
    background: var(--gradient-card);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: 0.55rem;
      block-size: 100%;
      background: var(--gradient-hero);
      border-radius: var(--radius-md) 0 0 var(--radius-md);
      opacity: 0;
      transition: var(--transition);
    }

    &:hover {
      border-color: #6366f1;
      transform: translateY(-0.125rem);

      &::before {
        opacity: 1;
      }
    }

    &.empty {
      border-style: dashed;
      background: rgba(30, 41, 59, 0.5);
      text-align: center;
      padding-block: 3rem;

      .icon {
        --icon-size: 3rem;
        margin-block-end: 1rem;
        color: var(--muted);
        opacity: 0.5;
      }

      .payment-methods--header {
        justify-content: center;
        margin-block-end: 0.5rem;
      }

      .empty-description {
        color: var(--muted);
        font-size: 1rem;
        max-inline-size: 30rem;
        margin: 0 auto;
      }
    }

    .payment-methods--header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-block-end: 1rem;

      .payment-methods--title {
        font-weight: 600;
        color: var(--primary);
        font-size: 1.1rem;
      }

      .payment-methods--status {
        padding-block: 0.375rem;
        padding-inline: 0.75rem;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03125rem;

        &.confirmed {
          background: rgba(16, 185, 129, 0.1);
          color: var(--success);
          border: 0.0625rem solid rgba(16, 185, 129, 0.2);
        }

        &.upcoming {
          background: rgba(99, 102, 241, 0.1);
          color: #6366f1;
          border: 0.0625rem solid rgba(99, 102, 241, 0.2);
        }

        &.past {
          background: rgba(100, 116, 139, 0.1);
          color: var(--muted);
          border: 0.0625rem solid rgba(100, 116, 139, 0.2);
        }
      }
    }

    .payment-methods--details {
      .detail-item {
        display: flex;
        justify-content: space-between;
        margin-block-end: 0.5rem;
        font-size: 0.9rem;

        .label {
          color: var(--muted);
          font-weight: 500;
        }

        .value {
          font-weight: 600;
          color: var(--primary);
        }
      }
    }
  }

  /* Signature Page */
  .house-rules {
    margin-block-end: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .disclaimer {
    color: var(--muted);
    margin-block-end: 2rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .signature-pad {
    field {
      inline-size: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    canvas {
      background: var(--surface);
      border-radius: var(--radius-md);

      /* display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem; */

      inline-size: 100%;
      max-inline-size: 100%;
      border: 0.0625rem solid var(--border);
      box-shadow: var(--shadow);
      margin-block: 1.5rem;
      cursor: crosshair;

      /* background: var(--surface);
      border-radius: var(--radius-sm);
      border: 0.0625rem solid var(--border); */
    }

    img {
      max-inline-size: 100%;
      block-size: auto;
      border-radius: var(--radius-sm);
      filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
    }

    actions {
      display: flex;
      justify-content: center;
      inline-size: 100%;

      .btn {
        inline-size: auto;
        min-inline-size: 8rem;
      }
    }
  }

  /* Responsive */
  @media (max-width: 64rem) {
    .main-content {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .hero .hero-content h1 {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 48rem) {
    .header .nav-container {
      flex-direction: column;
      gap: 1rem;
    }

    .header .nav-tabs {
      inline-size: 100%;
      justify-content: center;
    }

    .hero {
      padding-block: 3.75rem;

      .hero-content h1 {
        font-size: 2rem;
      }

      .hero-content p {
        font-size: 1.1rem;
      }
    }

    .card {
      padding: 1.5rem;
    }

    .booking .booking-cards {
      grid-template-columns: 1fr;
    }

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

  @media (max-width: 30rem) {
    .container {
      padding-inline: 1rem;
    }

    .hero {
      padding-block: 2.5rem;

      .hero-content h1 {
        font-size: 1.75rem;
      }
    }

    .card {
      padding: 1.25rem;
    }

    .check-in .check-in-steps .step {
      flex-direction: column;
      text-align: center;
      gap: 0.75rem;
    }
  }
}

/* Forms */

:root {
  /* Form variables aligned with dark theme */
  --form-control--border-color: var(--border);
  --form-control--border-width: 0.0625rem;
  --form-control--padding-block: 0.75rem;
  --form-control--padding-inline: 1rem;

  --form-control-active--border-color: #6366f1;
  --form-control-active--border-width: 0.125rem;
  --form-control-valid--border-color: var(--success);
  --form-control-valid--border-width: 0.125rem;
  --form-control-invalid--border-color: var(--error);
  --form-control-invalid--border-width: 0.125rem;

  /* Additional variables for form theming */
  --heading-color: var(--primary);
  --text-color: var(--primary);
  --secondary-color: var(--muted);
  --border-radius: var(--radius-md);
  --icon-size: 1.5rem;
}

form:not(.button_to) {
  .field {
    margin-block-end: 1.25rem;

    label,
    .label {
      font-size: 0.875rem;
      color: var(--heading-color);
      margin-block-end: 0.5rem;
      font-weight: 600;
      display: block;
    }

    .help {
      margin-block-start: 0.5rem;
      font-size: 0.75rem;
      color: var(--muted);
    }

    &:has(input[type=checkbox]) {
      display: flex;
      align-items: start;
      gap: .5rem;

      input[type=checkbox] {
        flex: 0 1;

        position: relative;
        min-height: calc(1rem + var(--form-control--padding-inline) - var(--form-control--border-width));
        min-width: calc(1rem + var(--form-control--padding-inline) - var(--form-control--border-width));

        &:checked::before {
          content: "";
          position: absolute;
          inset: 0;
          background: currentColor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E") center/70% no-repeat;
        }
      }

      label,
      .label {
        flex: 1;
        margin: 0;
        padding-block-start: .24rem;
        cursor: pointer;
      }

      .help {
        min-inline-size: 100%;
      }
    }
  }

  .control {
    display: block;
    inline-size: 100%;
    font-weight: 400;
    color: var(--primary);
    background: var(--surface);
    border: var(--form-control--border-width) solid var(--border);
    border-radius: var(--border-radius);
    padding-block: calc(var(--form-control--padding-block) - var(--form-control--border-width));
    padding-inline: calc(var(--form-control--padding-inline) - var(--form-control--border-width));
    transition: var(--transition);
    font-size: 1rem;

    appearance: none;
    outline: 0;
    background-clip: padding-box;

    &::placeholder {
      color: var(--muted);
      opacity: 1;
    }

    &:focus {
      border-color: var(--form-control-active--border-color);
      border-width: var(--form-control-active--border-width);
      padding-block: calc(var(--form-control--padding-block) - var(--form-control-active--border-width));
      padding-inline: calc(var(--form-control--padding-inline) - var(--form-control-active--border-width));
      background: var(--background);
      box-shadow: 0 0 0 0.125rem rgba(99, 102, 241, 0.1);
    }

    &.valid {
      border-color: var(--form-control-valid--border-color);
      border-width: var(--form-control-valid--border-width);
      padding-block: calc(var(--form-control--padding-block) - var(--form-control-valid--border-width));
      padding-inline: calc(var(--form-control--padding-inline) - var(--form-control-valid--border-width));
      background: rgba(16, 185, 129, 0.05);
    }

    &.invalid {
      border-color: var(--form-control-invalid--border-color);
      border-width: var(--form-control-invalid--border-width);
      padding-block: calc(var(--form-control--padding-block) - var(--form-control-invalid--border-width));
      padding-inline: calc(var(--form-control--padding-inline) - var(--form-control-invalid--border-width));
      background: rgba(239, 68, 68, 0.05);
    }

    &.with-icon-start {
      margin-inline-start: calc(var(--icon-size) * -1.25);
      padding-inline-start: calc(var(--icon-size) * 1.5);
    }

    &.with-icon-end {
      margin-inline-end: calc(var(--icon-size) * -1.25);
      padding-inline-end: calc(var(--icon-size) * 1.5);
    }
  }

  textarea.control {
    min-block-size: 6rem;
    resize: vertical;
  }

  .name-fields {
    @media (min-width: 640px) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1rem;
    }
  }

  .contact-fields {
    @media (min-width: 640px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1rem;
    }
  }

  .address-fields {
    @media (min-width: 640px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1rem;

      .field {
        &:has([name*=address_lines]) {
          grid-column: 1 / -1;
        }

        &:has([name*=city]) {
          grid-column: 1;
        }

        &:has([name*=state]) {
          grid-column: 2;
        }

        &:has([name*=country]) {
          grid-column: 1;
        }

        &:has([name*=postcode]) {
          grid-column: 2;
        }
      }
    }
  }

  .main-contact-actions {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;

    [type=submit] {
      flex: 1 calc((100% / 3) - 2rem);
    }
  }
}

.actions {
  flex-basis: 100%;
  margin-block-start: 1rem;

  display: flex;
  justify-content: space-between;
  gap: .5rem;
}

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

  inline-size: 100%;
  padding-block: 0.75rem;
  padding-inline: 1.5rem;

  border: none;
  border-radius: var(--radius-md);

  color: white;
  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;
  transition: var(--transition);

  &.primary {
    background: var(--gradient-hero);

    &:hover {
      box-shadow: 0 0.25rem 0.75rem rgba(99, 102, 241, 0.3);
    }
  }

  &.secondary {
    background: var(--surface);
    color: var(--primary);
    border: 0.0625rem solid var(--border);

    &:hover {
      background: var(--background);
      box-shadow: 0 0.25rem 0.75rem rgba(30, 41, 59, 0.3);
    }
  }

  &.success {
    background: var(--success);
    color: white;

    &:hover {
      background: #0da271;
      box-shadow: 0 0.25rem 0.75rem rgba(16, 185, 129, 0.3);
    }
  }

  &.danger {
    background: var(--error);
    color: white;

    &:hover {
      background: #dc2626;
      box-shadow: 0 0.25rem 0.75rem rgba(239, 68, 68, 0.3);
    }
  }

  &.warning {
    background: var(--warning);
    color: var(--background);

    &:hover {
      background: #d97706;
      box-shadow: 0 0.25rem 0.75rem rgba(245, 158, 11, 0.3);
    }
  }

  &.info {
    background: var(--gradient-secondary);
    color: var(--background);

    &:hover {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
      box-shadow: 0 0.25rem 0.75rem rgba(100, 116, 139, 0.3);
    }
  }

  &.outline {
    background: transparent;

    &.primary {
      color: #6366f1;
      border: 0.125rem solid #6366f1;

      &:hover {
        background: rgba(99, 102, 241, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(99, 102, 241, 0.2);
      }
    }

    &.secondary {
      color: var(--secondary);
      border: 0.125rem solid var(--border);

      &:hover {
        background: rgba(203, 213, 225, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(203, 213, 225, 0.2);
      }
    }

    &.success {
      color: var(--success);
      border: 0.125rem solid var(--success);

      &:hover {
        background: rgba(16, 185, 129, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(16, 185, 129, 0.2);
      }
    }

    &.danger {
      color: var(--error);
      border: 0.125rem solid var(--error);

      &:hover {
        background: rgba(239, 68, 68, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(239, 68, 68, 0.2);
      }
    }

    &.warning {
      color: var(--warning);
      border: 0.125rem solid var(--warning);

      &:hover {
        background: rgba(245, 158, 11, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(245, 158, 11, 0.2);
      }
    }

    &.info {
      color: var(--muted);
      border: 0.125rem solid var(--muted);

      &:hover {
        background: rgba(148, 163, 184, 0.1);
        box-shadow: 0 0.25rem 0.75rem rgba(148, 163, 184, 0.2);
      }
    }
  }

  &.ghost {
    background: transparent;

    &.primary {
      color: #6366f1;

      &:hover {
        background: rgba(99, 102, 241, 0.1);
      }
    }

    &.secondary {
      color: var(--secondary);

      &:hover {
        background: rgba(203, 213, 225, 0.1);
      }
    }

    &.success {
      color: var(--success);

      &:hover {
        background: rgba(16, 185, 129, 0.1);
      }
    }

    &.danger {
      color: var(--error);

      &:hover {
        background: rgba(239, 68, 68, 0.1);
      }
    }

    &.warning {
      color: var(--warning);

      &:hover {
        background: rgba(245, 158, 11, 0.1);
      }
    }

    &.info {
      color: var(--muted);

      &:hover {
        background: rgba(148, 163, 184, 0.1);
      }
    }
  }

  &:hover {
    transform: translateY(-0.0625rem);
  }

  &:active {
    transform: translateY(0);
  }
}

.search-bar {
  position: relative;
  margin-block-end: 1.5rem;

  .search-icon {
    position: absolute;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    inset-inline-start: 0.75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    transition: var(--transition);
  }

  .control {
    padding-inline-start: 2.75rem !important;

    &:empty+.search-icon {
      color: var(--muted);
    }

    &:focus+.search-icon {
      color: var(--form-control-active--border-color);
    }

    &.valid+.search-icon {
      color: var(--form-control-valid--border-color);
    }

    &.invalid+.search-icon {
      color: var(--form-control-invalid--border-color);
    }
  }
}

.form-alert {
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--error);
  background: rgba(239, 68, 68, 0.1);
  padding: 1rem;
  margin-block-end: 1.5rem;

  >div {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    .icon {
      margin-block-start: -0.125rem;
      color: var(--error);
      flex-shrink: 0;
    }

    .message {
      flex: 1;

      .header {
        margin-block-end: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 600;
        color: var(--primary);
      }

      .errors {
        font-size: 0.875rem;
        line-height: 1.25rem;

        .error {
          display: flex;
          align-items: flex-start;
          gap: 0.5rem;
          margin-block-end: 0.25rem;

          .bullet {
            color: var(--error);
            font-weight: bold;
            flex-shrink: 0;
          }

          .full-message {
            color: var(--primary);
          }
        }
      }
    }
  }
}

/* Form group styling for better layout */
.form-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;

  @media (max-width: 48rem) {
    grid-template-columns: 1fr;
  }
}

/* Checkbox and radio styling */
.field {

  input[type="checkbox"],
  input[type="radio"] {
    margin-inline-end: 0.5rem;

    &:focus {
      outline: 0.125rem solid var(--form-control-active--border-color);
      outline-offset: 0.125rem;
    }
  }

  &.checkbox,
  &.radio {
    display: flex;
    align-items: center;

    label {
      margin-block-end: 0;
      cursor: pointer;
    }
  }
}

/* File input styling */
input[type="file"].control {
  padding: 0.5rem;

  &::file-selector-button {
    background: var(--gradient-hero);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    margin-inline-end: 1rem;
    cursor: pointer;
    transition: var(--transition);

    &:hover {
      transform: translateY(-0.0625rem);
    }
  }
}

/* Info Item Modal */
.modal {
  &.info-item {
    .body {
      inline-size: 100%;
    }
  }
}