[data-layout='scene'] {
   margin-block-end: var(--scene-gap);
}
header{
   border-bottom: 1px solid #E5E5E5;
}

.ques_ans .faq_answers{
   display: none;
   padding-right: 24px;
   margin-top: 16px;
}

.ques_ans[data-expand='open'] .faq_answers{
   display: block;
}


.faq_question {
   position: relative;
   cursor: pointer;
   padding-right: 24px; /* Space for the arrow */
   display: block;
   margin-block-end: 0 !important;
}

.faq_question::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0.25em; /* Aligns with first line of text */
   width: 8px;
   height: 8px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg); /* Points down */
   transition: transform 0.3s;
}

.ques_ans[data-expand='open'] .faq_question::after {
   transform: rotate(-135deg); /* Points up */
}

.faq-container{
   background: var(--bg-light-blue);
   border-radius: 12px;
   padding: 24px;
}


.faq_question:hover{cursor:pointer;}



body[data-site='mobile'] #general_questions{margin:0 15px;}

.still_have_qs{color:#FF6600 !important;margin-top:30px;text-align:center}
.phone_number{color:#0067ce !important;}




.ques_ans h3{font-size:1.4em;}




button#submitForm{
   width:50%;
}
.phone_number{color:#0067ce !important;}


#type-selector li:not(.active):hover{background:#F8F8F8;cursor:pointer;}

form.general-questions,
#order-status-container{
   border: 1px solid var(--color-primary);
   padding: 32px 20px;
} 


#order-status-container {
   border-radius: 12px 0 12px 12px;
}

form.general-questions{
   border-radius: 0 12px 12px 12px;
}


#type-selector{
   margin-block-end: 0;
}

#type-selector li{
   font-size:18px;
   text-align:center;
   line-height:48px;
   margin-block-start: 0;
   text-decoration: underline;
}

#type-selector li{
   border-radius: 12px 12px 0 0;
}

#type-selector li.active{
   font-weight: 500;
   background: white;
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
   border-top: 3px solid var(--color-primary);
   text-decoration: none;
   margin-bottom: -1px;
   border-bottom: none;   
}



#banner_div img{
   width: 100%;
   max-height: 400px;
   object-fit: cover;
   border-radius: 12px;   
}



#order-status-container li [data-is='icon']{
   height: 28px;
   width: 28px;
   margin-right: 8px;
}

.support-option{
   position: relative;
   /* --color-brand (#0067CE), not --color-primary. In lib/base/styles/defs.css
      --color-primary is navy #002448, which left the chat card outlined in a
      different blue than its own Recommended badge and the Sierra widget it
      opens. Note themes/assets/lib/styles/defs.css defines --color-primary as
      #0067CE, but this page loads lib/base, not that file. */
   border: 2px solid var(--color-brand);
   border-radius: 12px;
   padding: 16px 20px;
}

.support-option.is-secondary{
   border: 1px solid #e5e5e5;
}

.quick-resolve-note{
   display: flex;
   align-items: center;
   gap: 8px;
   margin-block-end: 16px;
}

.quick-resolve-note [data-is='icon']{
   flex-shrink: 0;
}

.order-status-lookup{
   border: 1px solid #e5e5e5;
   border-radius: 12px;
   padding: 16px 20px;
}

.order-status-lookup.is-prominent{
   /* Same brand blue as .support-option -- these two are the same "this is the
      prominent block" treatment, just in different views of the page. */
   border: 2px solid var(--color-brand);
}

.order-status-lookup h2 [data-is='icon']{
   margin-right: 8px;
   vertical-align: middle;
}

#order-lookup-input{
   max-width: 280px;
   width: 100%;
}

.support-option h2{
   margin-block-end: 8px;
}

.support-option p{
   margin-block-end: 8px;
}

.support-option p:last-child{
   margin-block-end: 0;
}

.phone_number-large{
   font-weight: bold;
   font-size: var(--font-size-xl);
}

.phone_number-large a{
   color: inherit;
   text-decoration: none;
}

.support-option h2 [data-is='icon']{
   margin-right: 8px;
   vertical-align: middle;
}

/* Availability reads as a state, not a sentence: a dot, then the hours.
   Chat is genuinely always on, so the dot is static rather than computed. */
.support-status{
   display: flex;
   align-items: center;
   gap: 8px;
}

.support-status::before{
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #2a7a4f;
   flex-shrink: 0;
}

.recommended-badge{
   position: absolute;
   top: 16px;
   right: 16px;
   background: var(--bg-light-blue);
   color: #0067ce;
   font-size: 0.75em;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 999px;
}

.email-support-list{
   list-style-type: disc !important;
   padding-left: 24px;
   margin-block-end: 16px;
}

.email-support-list li{
   list-style-type: disc !important;
   display: list-item;
   margin-bottom: 0;
}

.email-support-list li + li{
   margin-block-start: 0 !important;
}

#email-us-btn.email-us-trigger{
   margin-top: 8px;
   background: transparent;
   border: 0;
   padding: 0;
   font-weight: bold;
   font-size: inherit;
   color: var(--color-primary);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

#email-us-btn.email-us-trigger::after{
   content: "";
   display: inline-block;
   width: 7px;
   height: 7px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: translateY(-2px) rotate(45deg);
}

.email-support-panel{
   border: 1px solid #e5e5e5;
   border-radius: 12px;
   padding: 20px 24px;
   background: white;
}

#container-form-questions{
   position: relative;
}

.email-support-title{
   margin-block-start: 0;
   margin-block-end: 4px;
}

.email-support-subtitle{
   color: #666;
   font-size: 0.95em;
   margin-block-end: 16px;
}

.email-support-explainer{
   background: var(--bg-light-grey, #F5F5F5);
   border-radius: 8px;
   padding: 16px 20px;
   margin-block-end: 16px;
}

.email-support-explainer p{
   margin-block-end: 12px;
}

.email-support-explainer p:last-child{
   margin-block-end: 0;
}

.email-support-explainer .email-support-list{
   margin-block-start: 0;
   margin-block-end: 12px;
}

.email-support-list-intro{
   margin-block-end: 0 !important;
}

.email-support-close{
   position: absolute;
   top: 12px;
   right: 12px;
   background: transparent;
   border: 0;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   color: #666;
   padding: 4px 10px;
   border-radius: 6px;
}

.email-support-close:hover{
   color: #000;
   background: #f0f0f0;
}


/* -------- Mobile -------- */

@media (max-width: 600px) {
   .email-support-panel{
      padding: 16px;
   }

   .email-support-explainer{
      padding: 12px 14px;
   }

   .support-option,
   .order-status-lookup{
      padding: 14px 16px;
   }

   /* Title row: heading left, badge right, sharing one line.
      The original approach absolutely positioned the badge and had the h2
      reserve 110px on the right -- but that padding hit every
      .support-option h2, including Phone Support, which has no badge. Flex
      wraps the badge under the title on very narrow screens instead of
      letting it sit on top of the text, so the reservation isn't needed. */
   .support-option-head{
      display: flex;
      /* Top-aligned, not centred. The heading is a much taller box than the
         pill, so centring parked the pill halfway down the row while the
         heading sat against the top edge -- they read as two levels. Aligning
         tops ties the pill to the heading's cap line whatever the heading's
         box works out to, which also survives the heading wrapping to two
         lines on a narrow screen. */
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-block-end: 8px;
   }

   /* Flex (not inline icon + line-height leading) so the h2 box hugs its text.
      Centring the badge against the default box put it a few px low: that box
      includes half-leading and the descender, plus the 20px icon, which
      vertical-align:middle hangs below the baseline. The visible text sits
      above the centre of all that. As a flex row the icon is its own item
      instead of stretching the line box, and the tighter line-height drops
      most of the leading, so heading and badge centre on the same optical line. */
   .support-option-head h2{
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.1;
      /* Full reset, not just margin-block-end: two base rules set a bottom
         margin on this h2 -- .support-option h2 (8px) and the longform flow
         rule in lib/base/styles/src/zero.css (18px, via --flow-space). The
         longform one matches at the same specificity as a single-class rule,
         so it is only losing on source order. */
      margin: 0;
   }

   /* gap handles the icon spacing now -- the base 8px margin would double it */
   .support-option-head h2 [data-is='icon']{
      margin-right: 0;
   }

   .recommended-badge{
      position: static;
      display: inline-block;
      flex-shrink: 0;
   }

   /* Primary actions get a 44px tap target and the full column width.
      Scoped to this page on purpose: the global rule in
      lib/base/styles/src/buttons.css is 40px + inline-block, which is correct
      everywhere else and shouldn't move for one page's layout. */
   .support-option [data-is='btn'],
   .order-status-lookup [data-is='btn'],
   #submitForm{
      width: 100%;
      height: 44px;
      line-height: 44px;
   }

   /* tel: is the highest-intent action on a phone, so make the whole row
      tappable rather than just the text glyphs. */
   .phone_number-large a{
      display: block;
      padding: 8px 0;
   }

   /* Scale reCAPTCHA so its fixed 304px iframe doesn't blow out the form.
      transform leaves the original layout box behind, so pull the leftover
      height back: 78px iframe * 0.15 = ~12px. */
   .g-recaptcha{
      transform: scale(0.85);
      transform-origin: 0 0;
      margin-block-end: -12px;
   }

   /* The Sierra launcher is fixed bottom-right; keep it off the buyer
      guarantee banner and the footer links. */
   main{
      padding-bottom: 72px;
   }

   /* Larger tap target (min ~44px) */
   .email-support-close{
      padding: 8px 14px;
      font-size: 28px;
   }

   #email-us-btn.email-us-trigger{
      min-height: 44px;
   }

   /* Order lookup input gets full width on mobile rather than capped */
   #order-lookup-input{
      max-width: none;
   }
}

@media (max-width: 360px) {
   /* Compress reCAPTCHA further for the smallest screens (78px * 0.23 = ~18px) */
   .g-recaptcha{
      transform: scale(0.77);
      margin-block-end: -18px;
   }

   .email-support-panel{
      padding: 12px;
   }

   .email-support-explainer{
      padding: 10px 12px;
   }
}

[data-is="icon"][data-icon="lightning"]{
   --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m331.464 192l77-176H147.879l-81 288H187.9l-39.53 192h58.851l268.235-304ZM192.779 464h-5.149l39.529-192H109.121l63-224h187.415l-77 176h122.009Z'/%3E%3C/svg%3E");
}

[data-is="icon"][data-icon="chat-bubbles-outline"]{
   --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33 33 0 0 1 2.1-3.1A162 162 0 0 0 464 215c.3-92.2-77.5-167-173.7-167C206.4 48 136.4 105.1 120.9 180.9a160 160 0 0 0-3.5 33.1c0 92.4 74.8 169.1 171 169.1c15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.4 26.4 0 0 1 9.3-1.7a26 26 0 0 1 10.1 2l56.7 20.1a13.5 13.5 0 0 0 3.9 1a8 8 0 0 0 8-8a12.6 12.6 0 0 0-.5-2.7Z'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M66.46 232a146.23 146.23 0 0 0 6.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 0 0 2.71 7.68A8.17 8.17 0 0 0 72 464a7.26 7.26 0 0 0 2.91-.6l56.21-22a16 16 0 0 1 11.89-.3c14.33 5.49 30 8.9 45 8.9A159.55 159.55 0 0 0 218 438'/%3E%3C/svg%3E");
}