/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

    .form-container {
      max-width: 400px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
      font-family: Arial, sans-serif;
    }

    /* Algemene styling voor labels */
    label {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 4px;
      display: block;
      color:black;
    }

    /* Radio buttons in twee kolommen */
    .radio-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .radio-grid label {
      display: flex;
      align-items: center;
      font-weight: normal;
      cursor: pointer;
    }
    .radio-grid input[type="radio"] {
      margin-right: 5px;
      accent-color: #A50026;
    }

    /* Tekstvelden */
    input[type="text"],
    input[type="email"],
    input[type="tel"] {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 25px;
      padding: 0px 15px;
      font-size: 14px;
      box-sizing: border-box;
      background-color: #fff;
      color: #333;
    }

    /* Aantal personen: min-knop, input, plus-knop in één 'pill' */
    .number-input {
      display: inline-grid;
      grid-template-columns: 40px auto 40px;
      align-items: center;
      justify-items: center;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 25px;
      overflow: hidden;
      background-color: #fff;
    }

    .number-input input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
      border: none;
      text-align: center;
      font-size: 16px;
      color: #333;
      width: 50px;
      background-color: #fff;
      margin: 0;
    }

    .number-input button {
      background-color: #f2f2f2;
      border: none;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      color: #333;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .number-input button:hover {
      background-color: #e0e0e0;
    }

    /* De verzendknop */
    .submit-btn {
      display: block;
      width: 100%;
      background-color: #A50026;
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 15px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
    }
    .submit-btn:hover {
      background-color: #c7002e;
    }
    
    /* Feedback message styling */
    .feedback-message {
      padding: 15px;
      margin-top: 15px;
      border-radius: 5px;
      display: none;
    }
    
    .feedback-success {
      background-color: #e7f6e7;
      color: #1e7e1e;
      border: 1px solid #b8e0b8;
    }
    
    .feedback-error {
      background-color: #fce9e9;
      color: #b82e2e;
      border: 1px solid #f5c8c8;
    }
    
    .loading-spinner {
      display: none;
      text-align: center;
      margin-top: 15px;
    }
    
    .loading-spinner::after {
      content: "";
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(0,0,0,0.2);
      border-radius: 50%;
      border-top-color: #A50026;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }