:root {
        --primary-color: #2d5a27;
        --secondary-color: #4a8c43;
      }

      .palm-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 25c2-2.5 4-3.5 6-3.5s4 1 6 3.5m-12-2c0-2 1-3.5 2.5-4.5s3.5-1.5 5.5-1.5 4 0.5 5.5 1.5 2.5 2.5 2.5 4.5m-16-2c0-2 1-3.5 2.5-4.5s3.5-1.5 5.5-1.5 4 0.5 5.5 1.5 2.5 2.5 2.5 4.5' fill='none' stroke='rgba(45, 90, 39, 0.1)' stroke-width='2'/%3E%3C/svg%3E");
      }

      .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
          url("/api/placeholder/1920/1080");
        background-size: cover;
        background-position: center;
      }

      .step-form {
        display: none;
      }

      .step-form.active {
        display: block;
      }

      .selected {
        border-color: #38a169;
        background-color: #38a169;
        color: white;
      }

      .progress-bar {
        width: 100%;
        height: 4px;
        background: #38a169;
        margin-bottom: 2rem;
      }

      .progress {
        height: 100%;
        background: var(--primary-color);
        transition: width 0.3s ease;
      }

      .time-slot {
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .time-slot:hover {
        transform: scale(1.02);
      }

      .time-slot.selected {
        background-color: var(--primary-color);
        color: white;
      }

      .court-card {
        cursor: pointer;
        transition: transform 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .court-card:hover {
        transform: scale(1.03);
      }

      .court-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-color);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .court-card:hover::after {
        transform: scaleX(1);
      }

      .palm-icon {
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
      }

      .custom-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      .border {
        border: 2px solid #e0e0e0;
        transition: border-color 0.3s;
      }
      .border:hover {
        border-color: #4caf50;
      }
      #nextBtn {
        background-color: #4caf50; /* Verde */
        color: white;
      }
      #nextBtn:hover {
        filter: brightness(0.9);
      }
      .step-indicator {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
      }
      .step {
        flex: 1;
        text-align: center;
        position: relative;
        font-weight: normal;
        color: #4caf50; /* Verde */
      }
      .step.active {
        font-weight: bold;
      }
      .progress {
        height: 8px;
        background: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 1rem;
      }
      .progress-bar {
        height: 100%;
        background: #4caf50; /* Verde */
        width: 0%;
        transition: width 0.3s ease;
      }
      .receipt {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .qr-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
      }
      .copy-area {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
      .copy-input {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        margin-right: 10px;
        width: 200px;
      }
      .instructions {
        margin-top: 10px;
        font-size: 0.9em;
        color: #666;
      }

      footer {
        color: white; /* Texto em branco */
        padding: 20px;
        text-align: center;
        position: relative;
        font-size: 0.9em; /* Tamanho de fonte um pouco menor */
      }
      
      .footer-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      
      .footer-section {
        flex: 1;
        padding: 10px;
      }
      
      .footer-section h2 {
        margin-bottom: 10px;
        font-weight: normal; /* Reduzir a ênfase no título */
      }
      
      .footer-section a {
        color: white; /* Links em branco */
        text-decoration: none;
        margin: 0 5px; /* Espaçamento entre ícones */
      }
      
      .footer-section a:hover {
        text-decoration: underline; /* Somente underline no hover */
      }
      
      .footer-bottom {
        margin-top: 20px;
      }
      
      .footer-section.about p,
      .footer-section.contact p {
        margin: 10px 0;
      }