/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.faq-container .fqhero .srch input[type="text"]{
    box-shadow: 0 10px 40px -20px rgba(26, 54, 93, 0.25);    
    padding-right: 40%;
  }
  .back-link {
      display: inline-flex; 
      align-items: center;
      gap: 6px;
      font-size: 16px;
      color:#8a9ab5!important;
      text-decoration: none;
      margin-top: 25px;
      margin-bottom: 29px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .back-link:hover { color:#0b1f3a!important; }
    .back-link svg { transition: transform 0.2s; }
    .back-link:hover svg { transform: translateX(-3px); }
   /* ── CATEGORY TABS ── */
    .tabs-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tabs-wrap::-webkit-scrollbar { display: none; }
    .tabs {
      display: flex;
      gap: 8px;
      min-width: max-content;
    }
    .fqhero .tab {
       font-family: "Outfit", Sans-serif;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid #e2e8f0;
      background:#fff;
      color:#1A365D;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .fqhero .tab.active {
      background: #DAA520;
      border-color:#DAA520;
      color:#fff;
    }
    .fqhero .tab:hover:not(.active) { border-color: var(--gold-muted); color: var(--gold); }
   .faq-container .tab svg{
      width: 14px;
      height: 14px;
   }
   .faq-container .tab.active svg * {
      stroke: #ffffff;
  }

  /* ── FAQ ITEMS ── */

    .faq-container{
       max-width: 1110px;
      margin: 0 auto;
      padding: 0px 24px 60px;
    }
    .faq-list { display: flex; flex-direction: column; gap: 0; }

    .faq-item {
      background:#ffffff;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      transition: box-shadow 0.25s;
      margin-bottom: 12px;
      border-radius: 16px;
    }
   
    
    .faq-item.open { box-shadow: var(--shadow-md); z-index: 1; position: relative; }

    .faq-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 24px 28px 18px 30px;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s;
    }
    .faq-header:hover { background: #fafbfd; }

    .faq-num {
       font-family: "Outfit", Sans-serif;
      font-size: 11px;
      font-weight: 700;
      color:#193356;
      width: 28px;
      height: 24px;
      padding: 5.75px 7.547px 7.25px 7.883px;
      flex-shrink: 0;
      letter-spacing: 0.5px;
      border-radius: 14px;
     background: #F6F8FA;
    }
    .faq-question {
      flex: 1;
      font-size: 18px;
      font-family: "Outfit", Sans-serif;
      font-weight: 400;
      color: #193356;
      line-height: 1.4;
    }
    .faq-item.open .faq-question { color:#0b1f3a; }
    .faq-tag {
      font-size: 13px;
      font-weight: 500;
      padding: 3px 17px;
      border-radius: 40px;
      letter-spacing: 0.3px;
      flex-shrink: 0;
      margin-right: 5px;
    }
    .faq-tag.clinicians {
       font-family: "Outfit", Sans-serif;
       font-size: 13px;
      background:#FFF5DB;
      color:#DAA520;
      font-weight: 500;
      border: 0px solid rgba(201,134,10,0.25);
      border-radius: 40px;
    }
    .faq-tag.patients {
      background: rgba(16,90,172,0.08);
      color: #105aac;
      border: 1px solid rgba(16,90,172,0.2);
    }
    .faq-icon {
      width: 28px; height: 28px;      
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color:#6A727D;
      transition: all 0.25s;
     
    }
    .faq-item.open .faq-icon {
      
      transform: rotate(180deg);
    }

    .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
    }
    .faq-body.open { max-height: 400px; }

    .faq-content {
      padding: 0 55px 20px 72px;
      font-size: 18px;
      font-family: "Outfit", Sans-serif;
      color:#6A727D;
      line-height: 1.45;
      border-top: 0px solid #f0f4f8;
      padding-top: 0px;
    }
    .faq-container .filter-pills {
      display: flex;
      gap: 6px;
      position: absolute;
      top: 12px;
      right: 12px;

    }
    .pill { 
      padding: 7px 22px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid #e2e8f0;
      background: #fff;
      color:#193356;
      transition: all 0.2s;
    }
    .pill.active {
      background: #DAA520;
      border-color: #E2E5E8;
      color:#fff;
    }
    .pill:hover:not(.active) { border-color: #0b1f3a; color: #0b1f3a; }
   .faq-container .fqhero .srch{
      position: relative;
        max-width: 858px;
    }
    .faq_wrp.stq-sec{
    	 padding-top: 0px!important;
      padding-bottom: 80px!important;
    }


/* Responsive Start */

@media screen and (max-width:1400px){

	.faq-container {
	    max-width: 1060px;
	    margin: 0 auto;
	    padding: 0px 24px 50px;
	}
	.faq_wrp.stq-sec {	    
	    padding-bottom: 70px !important;
	}

}

@media screen and (max-width:1200px){

	.faq-container {
	    max-width: 980px;
	    margin: 0 auto;
	    padding: 0px 20px 40px;
	}
	.faq-question,.faq-content{
		font-size: 17px;
	}
	.faq-tag{
    	margin-right: 0px;
    	padding: 3px 12px;
	}
	.faq-container .fqhero .srch {   
	    max-width: 750px;
	}
	.faq_wrp.stq-sec {	    
	    padding-bottom: 60px !important;
	}
	.faq-container .filter-pills{
		 gap:8px;
	}

}

@media screen and (max-width:991px){
	.faq-container {
        max-width: 720px;      
        padding: 0px 20px 30px;
    }
	.faq-header{
		gap: 10px;
		padding: 22px 23px 17px 25px;
	}
	.faq-content{
		padding: 0 30px 20px 65px;
	}
	.faq_wrp.stq-sec {	    
	    padding-bottom: 50px !important;
	}
	.back-link{
		margin-top: 15px;
    	margin-bottom: 20px;
	}
	.faq-container .filter-pills,.fqhero .tabs{
		    gap: 5px;
	}
	.faq-question, .faq-content {
        font-size: 16px;
    }
}
@media screen and (max-width:767px){
.faq-header {
        gap: 6px;
        padding: 20px 20px 16px 20px;
    }
     .faq-content {
         padding: 0 25px 20px 57px;
    }
    .faq-container .filter-pills {
        gap: 8px;
        position: inherit;
        justify-content: right;
    } 
    .tabs-wrap{
       padding: 40px 10px 0;
    }
    .faq-container .fqhero .srch input[type="text"]{
    		padding-right: 20px;
    }
    .faq-tag{    	
    	padding: 3px 10px;    	  
	}
	.faq-tag.clinicians{
		  font-size: 12px;
	}
  .pill {
    padding: 5px 17px;
    font-size: 12px;
  }
  .fqhero .tab{
    font-size: 12px;
    padding: 6px 14px;
  }
}

@media screen and (max-width:500px){
  .faq-container .fqhero .container{
      padding-left:0px;
      padding-right:0px;
  }
  .tabs-wrap {
        padding: 40px 5px 0;
    }
    .faq-container .filter-pills{
      gap: 5px;
    }

   
}

@media screen and (max-width:400px){

      .faq-header {
        gap: 6px;
        padding: 15px 10px 15px 15px;
    }
    .faq-content {
        padding: 0 20px 20px 50px;
    }
    .faq-tag.clinicians {
        font-size: 11px;
    }
}