@font-face {
    font-family:'Sora Regular';
    src: url('/themes/custom/rcbbase/fonts/Sora-Regular.ttf');
}
@font-face {
    font-family:'Sora Bold';
    src: url('/themes/custom/rcbbase/fonts/Sora-Bold.ttf');
}

header#navbar {
    margin-bottom: 0;
    margin-top: 0px;
}
#echoes_wrapper .title{
    font-family:'Sora Bold';
    color: #fff;
    font-size: 2.5rem;
}
#echoes_wrapper .subtitle{
    font-family:'Sora Regular';
    color: #fff;
    font-size: 1.1rem;
}



button {
    color: #fff !important;
    background-color: #db2517 ;
    border: none !important;
    outline: none !important;
    text-transform: uppercase;
    padding: 6px 24px !important;
    letter-spacing: 0.09em;
    font-weight: 900;
    font-size: 16px;
}





.layout.layout--twocol-section {
    margin: 5%;
}
/* 
#echoes_wrapper .title , #echoes_wrapper .subtitle {
    margin-left: 40px;
} */
.layout__region.layout__region--second {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width:991px) {
    #echoes_wrapper .title , #echoes_wrapper .subtitle {
        margin-left: 40px;
    }
    div#form-wrapper {
        background: #353535;
        border-radius: 16px;
        padding: 16px;
        /* position: relative; */
    }
    .js-form-item {
        background: #f3f3f3 !important;
        padding: 16px;
        border-radius: 8px;
    }
    input[type="email"],input[type="text"]  {
        outline: none !important;
        border: none !important;
        border-bottom: 2px dotted !important;
        background-color: #f3f3f3 !important;
        box-shadow: none !important;
    }
    input[type="email"],input[type="text"]  {
        outline: none !important;
        border: none !important;
        border-bottom: 2px dotted !important;
        background-color: #f3f3f3 !important;
        box-shadow: none !important;
    }
    label {
        font-weight: 900;
        font-family: 'Sora Bold';
        color: #000;
    }
    .form_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 16px 0;
        flex-wrap: wrap;
    }
      .form_header .left {
        text-transform: uppercase;
        font-size: 18px;
        font-family: 'Sora Bold';
        color: #fff;
    }
    
    .form_header .right {
        font-family: 'Sora Regular';
        color: #db2517;
        font-size: 16px;
    }
    form[method='post'] .messages__wrapper .alert-danger {
        display : block  ;    
            position :absolute ;
            bottom: -5em;
            width: 100%;
        }
        .region.region-content::before {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%; 
            height: 100%;
            background: linear-gradient(to top right, rgb(0 0 0 / 75%), rgb(74 28 28 / 0%) 70%); 
            z-index: -1; 
            pointer-events: none;
}


}
@media (max-width:991px) {

    .form_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 8px 0;
        flex-wrap: wrap;
        gap: 8px;

    }
      .form_header .left {
        text-transform: uppercase;
        font-size: 18px;
        font-family: 'Sora Bold';
        color: #fff;
    }
    
    .form_header .right {
        font-family: 'Sora Regular';
        color: #db2517;
        font-size: 14px;
    }
    
    section.ms-ajax-form-example {
        /* background: #353535; */
        /* border-radius: 16px; */
        margin-top: 3em;
    }
    section.rcb-echoes-form{
        /* background: #353535; */
        /* border-radius: 16px; */
        margin-bottom: 3em;
    }
    label {
        font-weight: 900;
        font-family: 'Sora Regular';
        color: #868686;
    }
    #echoes_wrapper .title , #echoes_wrapper .subtitle {
        margin-left: 4%;
    }
    div#form-wrapper {
        background: #353535;
        border-radius: 16px;
        padding: 8px;
    }

    .question_wrapper legend{
        margin-bottom: 0;
    }
    .js-form-item {
        /* background: #f3f3f3 !important; */
        padding: 8px;
        border-radius: 8px;
    }
    div#messages-wrapper {
    position: absolute;
    bottom: -1em;
    width: 100%;
    left: 0;
}
section.ms-ajax-form-example {
padding: 8px;
}
section.rcb-echoes-form{
    padding: 8px;
}
div#edit-actions:has(button.step-one-btn) {
    text-align: center;
    margin: auto;
}
form[method='post'] .messages__wrapper .alert-danger {
    display : block  ;    
        position :absolute ;
        bottom: -1em;
        width: 100%;
    }
    .region.region-content::before {
        content: ''; /* Ensures the pseudo-element is rendered */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* Make the pseudo-element span the full width */
        height: 100%; /* Make it span the full height */
        background: linear-gradient(to top right, rgb(0 0 0), rgb(0 0 0 / 0%) 80%); /* Creates the faded triangle effect */
        z-index: -1; /* Ensures the overlay is behind the content */
        pointer-events: none;
      }
      div#form-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .form-item.js-form-type-email {
        order: 2;
    }
    
    div#edit-actions:has(button.step-one-btn) {
        order: 4;
    }

}

  
  input[type="radio"]:checked + label,
  input[type="checkbox"]:checked + label,
  label input[type="radio"]:checked ,
  label input[type="checkbox"]:checked
  
  {
    color: #ff0000 !important;  /* Red text for label when radio is checked */
  }
  

  .question_wrapper label {
      line-height: 24px;
      font-family: 'Sora Regular';
      color: #808080;
  }
  
  label:has(input[type="radio"]:checked),
    label:has(input[type="checkbox"]:checked) {
      color: #ad1410;
  }


    .fieldset-legend{
        font-family:'Sora Regular';

    }
    input{
        cursor: pointer;
    }

    /* --------------- */

    div#echoes_loader_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        z-index: 999;
    }

    #echoes_loader {
        width: 48px;
        height: 48px;
        border: 5px solid #db2517;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        animation: pulse 1s linear infinite;
      }
      #echoes_loader:after {
        content: '';
        position: absolute;
        width: 48px;
        height: 48px;
        border: 5px solid #db2517;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: scaleUp 1s linear infinite;
      }
      
      @keyframes scaleUp {
        0% { transform: translate(-50%, -50%) scale(0) }
        60% , 100% { transform: translate(-50%, -50%)  scale(1)}
      }
      @keyframes pulse {
        0% , 60% , 100%{ transform:  scale(1) }
        80% { transform:  scale(1.2)}
      }

      /* -------------- */

   .step-one-btn{
        pointer-events: none;
        background:grey;
      }
      .step-two-btn {
background-color: #ad1410 !important;
cursor: pointer;
      }

      .step-three-btn {
        background-color: #ad1410 !important;
        cursor: pointer;
    }
    form#ms-ajax-form-example {
    position: relative;
}
form#rcb-echoes-form {
    position: relative;
}
.messages__wrapper {
    width: 100%;
    /* position: absolute; */
}
c
.messages__wrapper button.close {
    color: #fff;
    background: red;
}
section.ms-ajax-form-example {
    background: #353535;
    border-radius: 16px;
}
section.rcb-echoes-form{
    background: #353535;
    border-radius: 16px;
}

#name_err,#email_err ,#phone_err {
    color: #db2517;
    font-family:'Sora Regular';

}


/* -----  */
input::placeholder {
    color: #6D7280 !important;
    font-family: 'Sora Regular';
}
/* -----  */

@media (min-width:600px) {
    .region.region-content {
        background: url(/themes/custom/rcbbase/images/echoes/echoes_bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        z-index: 10;
       }
       div#echoes_arr {
        display: none;
       }
       .question_wrapper {
        background: #f3f3f3;
        border-radius: 6px;
        margin-bottom: 16px;
        padding-top: 16px;
    }

/* Unchecked state - make radio look like a checkbox */
input[type="radio"] ,
input[type="checkbox"]
 {
    position: unset !important;
    appearance: none; /* Remove default styling */
    background-color: #fff; /* Background color for unchecked */
    border: 2px solid #ccc; /* Border color for unchecked */
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 4px; /* Square with slightly rounded corners */
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  input[type="radio"]:hover ,
  input[type="checkbox"]:hover
  {
    border-color: #999; /* Hover effect */
  }
  
  /* Checked state - show red background and checkmark */
  input[type="radio"]:checked ,
  input[type="checkbox"]:checked
  {
    background-color: #ff0000; /* Red background when checked */
    border-color: #ff0000; /* Match border to red */
    position: relative;
    text-align: center;
    margin-right: 8px;
    line-height: 24px;
  }
  
  input[type="radio"]:checked::before,
  input[type="checkbox"]:checked::before
 {
    content: '✓'; /* Checkmark character */
    color: #fff; /* White checkmark */
    font-size: 18px;
    /* padding: 10px; */
    /* position: absolute; */
    top: -2px;
    left: 4px;
  }

    }
@media (max-width:600px) {

    .question_wrapper {
        /* background: #f3f3f3; */
        border-radius: 6px;
        margin-bottom: 16px;
        padding-top: 16px;
    }
    .fieldset-legend{
        font-family:'Sora Regular';
        color: #fff;
    }
    label:has(input[type="radio"]:checked),
    label:has(input[type="checkbox"]:checked) {
      background: #db2518;
      color: #fff;
  }

    .region.region-content {
        background: url(/themes/custom/rcbbase/images/echoes/echoes_bg_mbl.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        z-index: 10;

       }

       div#echoes_arr {
        width: 100%;
        text-align: center;
        margin: auto;
        display: flex;
        justify-content: center;
      }
    
    div#echoes_arr .media-wrapper {
        width: 16px;
        min-width: 16px;
        max-width: 16px;
      }
      .radio,
      .checkbox
      {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .radio label ,
    .checkbox label {
        display: block;
        width: 90%;
        padding: 15px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid #fff;
        border-radius: 10px;
        background-color: transparent;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .radio input[type="radio"] ,
    .checkbox input[type="radio"]     
    {
        display: none;
    }
    
    .radio input[type="radio"]:checked + label ,
    .checkbox input[type="radio"]:checked + label {
        background-color: #f44336;
        color: #fff;
        border-color: #f44336;
    }
    
    .radio label:hover,
    .checkbox label:hover {
        background-color: #555;
    }
    .radio input[type="radio"]:checked ,
    .checkbox input[type="radio"]:checked {
    background-color : #db2518;
    }

/* Unchecked state - make radio look like a checkbox */
input[type="radio"] ,
input[type="checkbox"]
 {
    position: unset !important;
    appearance: none; /* Remove default styling */
    background-color: #fff; /* Background color for unchecked */
    /* border: 2px solid #ccc; 
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: inline-block; */
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 4px; /* Square with slightly rounded corners */
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  input[type="radio"]:hover ,
  input[type="checkbox"]:hover
  {
    border-color: #999; /* Hover effect */
  }
  
  /* Checked state - show red background and checkmark */
  input[type="radio"]:checked ,
  input[type="checkbox"]:checked
  {
    background-color: #ff0000; /* Red background when checked */
    border-color: #ff0000; /* Match border to red */
    position: relative;
    text-align: center;
    margin-right: 8px;
    line-height: 24px;
  }
  
  input[type="radio"]:checked::before,
  input[type="checkbox"]:checked::before
 {
    /* content: '✓';  */
    color: #fff; 
    font-size: 18px;
    /* padding: 10px; */
    /* position: absolute; */
    top: -2px;
    left: 4px;
  }
    }

    #echoes_wrapper .header {
        margin-bottom: 26px;
    }
    
    #echoes_wrapper .title {
        margin-bottom: 16px;
    }
    
    #echoes_wrapper p.sub_one {
        margin-bottom: 16px;
    }
    .sub_one span {
        font-family: 'Sora Bold';
    }
    div#messages-wrapper button.close {
        background: red !important;
    }
    div.form-item:has(label[for="edit-terms"]) {
        order: 3;
    }
     .checkbox label[for="edit-terms"] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 10px;
            background-color: transparent;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
     .checkbox label[for="edit-terms"] input[type="checkbox"]
     {
        cursor: pointer;
        position: unset !important;
        appearance: auto; /* Remove default styling */
        background-color: #fff; /* Background color for unchecked */
        vertical-align: middle;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 4px; /* Square with slightly rounded corners */
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease;
      }
    
      .checkbox label[for="edit-terms"]:has(input[type=checkbox]:checked) {
          background: #db251800;
          color: #fff;
      }   
      div.form-item:has(label[for="edit-terms"]) {
        order: 3;
    background: 0 0 !important;
    font-size: 8px;
    padding: 0 16px;
    flex-direction: column;
    }
    div.form-item:has(label[for="edit-terms"]) label {
        font-family: 'Sora Regular';
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: 10px;
        padding: 0 0 0 12px;

    }
    div#terms_err {
        font-size: 12px;
        color: #db2517;
        font-family: 'Sora Regular';
        display: inline;
        margin-top: 10px;
    }
    .checkbox label[for="edit-terms"] a {
        margin-left: 4px;
        font-weight: 900;
    }