/* Inline <style> blocks from the live page /giftcards (winndixie.com), extracted verbatim.
   The live site ships these inside the CMS-authored HTML; the Contentstack entries hold
   only structured content, so they are re-attached here per page. */
.App_Header_section .App_Header h2 {
  color: var(--wd-color-brand-red);
}
.container_faq .mystery-faqlink {
  display: block !important;
}
.container_faq .faq i {
  font-size: 14px;
}
.container_faq .faq .accordianTitle {
  text-align: center;
}
.card-header h3 {
  font-size: 1em;
  margin-top: 10px;
}
@media screen and (max-width: 991px) {
  .about__rewards .container-fluid {
    overflow: hidden;
  }
  .faqbg img,
  .faqbg svg {
    width: 100%;
  }
}
/* The shared PageSections.razor.css already defines this exact selector (compiled with a
   Blazor scope attribute), which always out-specifies a plain unscoped rule here regardless
   of source order — #body is required to actually win, same as the other overrides above. */
#body .container_faq .faq .accordianTitle {
  color: var(--wd-color-brand-red);
}
.container_faq .mystery-descr {
  display: none;
}
.container_faq .faq a {
  font-weight: bold;
  color: var(--wd-color-brand-red);
}
@media (min-width: 100px) and (max-width: 991px) {
  .container_faq .faq {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .container_faq .container {
    width: 100%;
    padding: 24px;
  }
  .container_faq .faq {
    width: 100%;
  }
}
.giftCard-HowWorksSec .boxBorder .txtArea .infoTxt {
  color: var(--wd-color-text);
}

.giftCard-HowWorksSec .boxBorder .txtArea .infoTxt .gift {
  font-weight: 500;
}

/* The shared PageSections.razor.css already defines this exact selector (compiled with a
   Blazor scope attribute), which always out-specifies a plain unscoped rule here regardless
   of source order — #body is required to actually win. Scoped to desktop so the shared
   component's mobile rules (italic, underline, smaller font-size) still apply below 992px. */
@media (min-width: 992px) {
  #body .giftCard-HowWorksSec .boxBorder .txtArea .infoTxt {
    font-style: normal;
    font-size: 0.875em;
  }
  #body .giftCard-HowWorksSec .boxBorder .txtArea .infoTxt a {
    color: var(--wd-color-brand-red) !important;
    font-weight: normal;
    text-decoration: none;
  }
}

/* CMS rich text for the "Bulk is better!" body wraps its text in an inline-styled <span>,
   which the shared .bulkBetterTextSec p{color:#fff!important} rule doesn't reach since it
   only targets the <p> itself, not its descendants. Scoped to desktop so mobile keeps the
   shared component's 1em body copy size. */
@media (min-width: 992px) {
  #body .giftCard-BulkBetterSec .bulkBetterTextSec p,
  #body .giftCard-BulkBetterSec .bulkBetterTextSec p * {
    color: #fff !important;
    font-size: 18px;
  }
}

#body .bulkBetterTextSec {
  padding-bottom: 30px !important;
}

.z-banner {
  z-index: 55555 !important;
}

.ps-fixed {
  position: fixed !important;
}

.bg-yellow-700 {
  background-color: #f8ec74;
  opacity: 0.92;
}

.fc-black {
  color: #000;
}

.wmx8 {
  max-width: 64.8205128rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.grid {
  display: flex;
}

.jc-center {
  justify-content: center;
}

.mr12 {
  margin-right: 10%;
  font-size: 1em;
}

#cookieBar a {
  cursor: pointer;
  text-decoration: underline;
}
#cookieBar p {
  margin-bottom: 0px;
}
.svgClose {
  float: right;
  margin-top: -21px;
  margin-right: 33px;
}

.paddingBar {
  padding: 20px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}

.s-link {
  color: #000 !important;
}

@media screen and (min-width: 100px) and (max-width: 992px) {
  .paddingBar {
    right: -27px;
  }
}
@media screen and (min-width: 320px) and (max-width: 568px) {
  .svgClose {
    float: right;
    margin-top: -43px;
    margin-right: 20px;
  }
  .mx-auto {
    margin-left: -7px;
  }
}
@media screen and (min-width: 375px) and (max-width: 667px) {
  .mr12 {
    margin-right: 31px;
  }
  .svgClose {
    margin-top: -30px;
  }
}
.async-hide {
  opacity: 0 !important;
}

/* .gift-imgSec (logo) and .gift-alreadySec (heading + body text) are columns inside .row, but
   this bundle's .row (app-wd.css) is the Bootstrap 3-style floated grid, not flex — it has no
   display:flex, so align-items has no effect on floated columns. Making the row an explicit
   flex container here centers .gift-alreadySec against the taller/shorter logo column without
   touching the shared floated-grid .row rule used everywhere else on the site. */
.alreadyhave-GiftCard .row.giftcard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Live /giftcards ships these as an inline <style> inside the "Already have a gift card?"
   rich text (extracted from the live DOM) — the bundle's .alreadyHaveTextSec{margin-left:-65px}
   is corrected back to 60px on desktop by this block. PageSections.razor.css also defines
   .alreadyhave-GiftCard .alreadyHaveTextSec (compiled with a Blazor scope attribute, which
   always out-specifies this plain unscoped rule regardless of source order) — #body is
   required to actually win, same as the .giftCard-HowWorksSec fix above. */
@media (min-width: 992px) {
  #body .alreadyhave-GiftCard .alreadyHaveTextSec {
    margin-left: 60px;
  }
}
.alreadyhave-GiftCard .alreadyHaveTextSec p {
  margin-top: 22px;
}
.alreadyhave-GiftCard .alreadyHaveTextSec a {
  display: inline-block;
  margin-left: 5px !important;
  font-size: 1em !important;
}
.alreadyhave-GiftCard .alreadyHaveTextSec h2 {
  margin-top: 0 !important;
}
/* The phone number is CMS rich text rendered as an href-less <a>, unlike the "Check
   balance"/"Reload balance" CTAs which carry a real href — :not([href]) targets only the
   phone number so those two CTAs keep their own link styling. #body + !important beats both
   PageSections.razor.css's scoped .alreadyHaveTextSec a rule and any inline style the CMS
   rich text node carries. */
#body .alreadyhave-GiftCard .alreadyHaveTextSec a:not([href]) {
  color: var(--wd-color-brand-red) !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

/* Hero (.App_Header_section) height + text-centering fix for /giftcards only.
   #body-prefixed to out-specificity PageSections.razor.css's scoped rules without editing that shared file.
   PageSections.razor.css sets align-items:center but the .App_Header margin-top !important overrides at
   992-1199px/1200px+ push the text down instead; and .Desk-app/.Tab-app/.Device-app (applied to this hero's
   image) have no CSS anywhere, so the image falls back to height:auto sized by its own intrinsic ratio,
   making the row shorter than live. Stretching the row and giving the image an explicit min-height with
   object-fit:cover reproduces live's taller hero without distorting the image. */
#body .App_Header_section {
  align-items: stretch;
}
@media (min-width: 768px) {
  #body .App_Header_section {
    flex-wrap: nowrap;
  }
  #body .App_Header_section .App-image {
    flex: 0 1 735px;
    /* Matches the source image's natural ratio (752x470) so shrinking the box below 735px
       never needs to crop more than the ~2% difference between the two ratios. */
    aspect-ratio: 752 / 470;
  }
  #body .App_Header_section .App_Header {
    flex: 1 1 auto;
  }
}
#body .App_Header_section .App-image {
  position: relative;
  overflow: hidden;
}
#body .App_Header_section .App-image img.Desk-app,
#body .App_Header_section .App-image img.Tab-app,
#body .App_Header_section .App-image img.Device-app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#body .App_Header_section .App_Header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0 !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
  #body .App_Header_section .App_Header {
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media (min-width: 1200px) {
  #body .App_Header_section .App_Header {
    margin-left: 30px;
    padding-left: 50px;
    padding-right: 100px;
  }
}

#body .App_Header_section .App_Header h1 {
  margin-bottom: 40px;
  margin-top: -50px;
}

#body .App_Header_section .App_Header p {
  font-size: 18px;
}