/* Container for the message and buttons */

/*.message-img.bot-message {*/
/*    background-color: #f8f9fa;*/
/*    border-radius: 10px;*/
/*    max-width: 600px;*/
/*    box-shadow: 0px 5px 10px 0px rgb(213 206 206 / 71%);*/
/*    padding: 15px 10px 2px 10px;*/
/*}*/






.message-img .bot-message {
    background: rgb(230, 239, 255);
    max-width: 100%;
    color: rgb(0, 0, 0);
    border-radius: 12px 12px 12px 0px;
    padding: 12px 24px;
    float: left;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    -webkit-box-pack: center;
    justify-content: center;
    letter-spacing: 0.05px;
    line-height: 1.4;
    word-break: break-word;
    text-align: left;
}




/* Message text */
/*.message-img.bot-message p {*/
/*  color: #333;*/
/*}*/

/* Buttons style */
/*.inner-services {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*}*/

.inner-services .btn {
    border-left: 10px solid #0a336a;
    padding: 6px 12px;
    margin: 3px !important;
    font-size: 0.8rem;
    width: 100% !important;
    font-weight: 500;
    border-radius: 5px;
    text-align: start;
    /* max-width: fit-content; */
    transition: all 0.3s ease-in-out;
}

.bot-size{
    width:300px !important;
}

.btn-service:hover{
    background-color: #e6f0fb;
}
.btn-service:active {
    background-color: #0a3770;
    color: #ffffff;
    /*transform: scale(0.95);*/
}

/* Button hover effect */
.message-img.bot-message .btn:hover {
    background-color: #e6f0fb;
    color: #0a3771;
    border: 1px solid #0a3972;
    /* transform: translateY(-2px); */
}

.message-img.bot-message .btn-service:active{
    background-color: #0a3770;
    color: #ffffff;
}

/* Responsive stacking for mobile */
@media (max-width: 480px) {
  .message-img.bot-message .btn {
    width: 100%;
    /*margin: 8px 0;*/
  }
}


/*.user-message {*/
/*    padding:5px 10px;*/
/*    background-color: #f8f9fa;*/
/*    border: 1px solid #0a3972;*/
/*    border-radius: 16px;*/
/*    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
/*}*/


/* Hide default radio */
.form-check-input {
  display: none;
}

/* Style the entire label as a card */
.form-check{
    padding-left:0px !important;
}

.form-check-label {
    background: rgb(73, 115, 191);
    color: rgb(255, 255, 255);
    border-radius: 11px;
    width: 100%;
    padding: 12px 24px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: start;
    gap: 0.5rem;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.form-check-input:checked{
    position: relative;
    top: 0px;
    left: 0px;
    height: 15px;
    background: rgb(96, 96, 98);
    border-radius: 50%;
    width: 1.6em;
}

/* Hover effect */
.form-check-label:hover {
  border-color: #0d6efd;
  background-color: #f4faff;
}

.form-check-label:active {
    border-color: #0d6efd;
    background-color: #f4faff;
}

/* When radio inside is checked, style the label */

.form-check-input:checked ~ .form-check-label, .form-check-input:checked + span {
  border-color: #0d6efd;
  background-color: #0d6efd;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

.btns {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #4A90E2, #007AFF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btns:hover {
    background: linear-gradient(135deg, #007AFF, #0051c7);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btns:active {
    transform: scale(0.98);
}

.main-btns {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0a2c61, #0a2c61);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.main-btns:hover {
    background: linear-gradient(135deg, #0a2c61, #0a2c61);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.main-btns:active {
    transform: scale(0.98);
}