/* Wood Ranger checkout: the delivered design's inline <style> blocks, in document order, followed by
   rules for SDK 0.4 state classes and the static banner/timer that replace the design's promo components.
   The design's cc-breathe submit pulse is not carried over (it kept the button from ever settling). */

/* SELL-774: FOMO pop na mobilnom gore desno (ne preko forme) + CTA pulse */
      @media (max-width: 768px) {
        /* body prefiks jer SDK runtime-inject-uje #next-fomo-styles posle page CSS-a */
        body .next-fomo-wrapper { top: 16px; right: 16px; bottom: auto; left: auto; transform: translateY(-150%); }
        body .next-fomo-wrapper.next-fomo-show { transform: translateY(0); }
      }

/* Align author name to bottom for desktop review items only */
    @media (min-width: 768px) {
      .cc-rev__wrapper.hide-tablet>.cc-rev__item>.cc-rev__content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .cc-rev__wrapper.hide-tablet .cc-rev__name-wrapper {
        margin-top: auto;
      }
    }

    /* Force equal height for desktop review items only */
    @media (min-width: 768px) {
      .cc-rev__wrapper.hide-tablet {
        display: flex;
        gap: 24px;
      }

      .cc-rev__wrapper.hide-tablet>.cc-rev__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
      }

      .cc-rev__wrapper.hide-tablet>.cc-rev__item>.cc-rev__content-wrapper {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
      }
    }

    .exit-intent-close {
      top: 16px !important;
      right: 16px !important;
      color: black !important;
      text-shadow: none !important;
      font-size: 40px !important;
    }

    iframe[width="1"][height="1"][frameborder="0"] {
      display: none !important;
    }

.fw-bold {
      font-weight: 700 !important;
    }

    .link-email {
      text-decoration: underline;
    }

    .display-xl {
      font-size: 32px;
    }

    .sub-head-text {
      font-size: 15px;
    }

    .checkout__header-top {
      padding: 0.313rem 0;
    }

    .cc-video__custom-wrapper {
      height: auto;
      width: 100%;
      margin: 0;
    }

    .cc-video__custom-wrapper img {
      width: 100%;
    }

    .olympus-checkout__left-wrapper,
    .demeter-checkout__left-wrapper {
      row-gap: 1.5rem;
    }

    .icons-grids:not(.show-tablet) {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.25rem;
    }

    .encrypted-banner {
      background: #000000 !important;
      color: white;
      padding: 0.313rem 0;
    }

    .cc-rev__text {
      padding-top: 0.5rem !important;
    }

    .text-xs {
      font-size: 0.75rem;
    }

    .icon-img {
      width: 35px;
      height: 35px;
    }

    .os-card__wrapper {
      padding: 25px 12px;
    }

    .os-card.next-selected {
      -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1882352941);
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1882352941);
      border: 3px solid #000000;
      background-color: #FFFCF1;
    }

    .input-flds {
      font-weight: 400;
    }

    .input-flds::placeholder {
      color: #212529;
    }

    .input-flds:not(:placeholder-shown) {
      font-weight: 600;
    }

    .radio-style-1 {
      width: 16px !important;
      height: 16px !important;
    }

    .cc-upsell-2-wrapper .upsell {
      background: white;
      border-radius: 5px;
      border: 2px dashed #d32b33;
    }

    .cc-upsell-2-wrapper .upsell__header {
      background-color: rgb(255 232 221);
      padding: 0.75rem 0.75rem 0.75rem 2rem;
    }

    .upsell__description {
      display: flex;
    }

    .footer_section {
      padding-top: 40px;
      padding-bottom: 20px;
    }

    .footer_section {
      color: #808080;
      background-color: rgb(255, 255, 255);
    }

    .footer_legal-link {
      font-size: 12px;
      line-height: 18px;
      font-weight: 400;
      color: #808080;
      position: relative;
      text-decoration: none;
    }

    .footer_copy-info hr {
      margin: 1rem 0;
      color: inherit;
      border: 0;
      border-top: 1px solid;
      opacity: 0.25;
    }

    .input-flds {
      padding-top: 0 !important;
    }

    iframe input {
      padding: 0 !important;
    }

    .shipping-note {
      max-width: none;
    }

    @media screen and (max-width: 991px) {
      .container {
        padding: 0 0.5rem;
      }
    }

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

      .questions-text,
      .progress-wrapper {
        font-size: 10px;
      }

      .mg-image {
        width: 45px;
        height: 45px;
      }

      .display-xl {
        font-size: 22px;
      }

      .section-checkout {
        padding-bottom: 0;
      }
    }

    @media screen and (max-width: 767px) {
      .checkout-header-logo {
        width: 144px !important;
        height: 18px !important;
      }
    }

/* ===== WOODRANGER overrides (appended last to win) ===== */
/* CTA colours (no pulse: see file header) */
.submit-button:not([disabled]),
button[data-action="submit"]:not([data-next-express-checkout]) {
  background-color: #FFC107 !important;
  background-image: none !important;
  color: #141414 !important;
  border: none !important;
  font-weight: 800 !important;
}
/* Shared subtle "selected" shade for tier cards + warranty header */
.os-card.next-selected { background:#FDF7E4 !important; }
.os-card.next-selector-card:hover:not(.next-selected) { background:#fff !important; }
/* Order bump: off-white body, visible dotted border, header matches the tier shade */
.cc-upsell-2-wrapper .upsell { background:#FBFAF7 !important; border:2px dotted #C4BEAE !important; border-radius:12px !important; }
.cc-upsell-2-wrapper .upsell__header, .cc-upsell-2-wrapper [class*="header"] { background:#FDF7E4 !important; color:#141414 !important; }
/* Guarantee block: bigger + crisper */
.guarantee-section { gap:16px !important; align-items:center !important; padding:6px 0 !important; }
.guarantee-section .image-10 { width:88px !important; height:auto !important; }
.guarantee-section .text-xs { font-size:15px !important; line-height:1.5 !important; }
/* Feature icons: bold filled dark circle */
.icon-imagggee .icon-img { background:#141414 !important; border-radius:50% !important; width:44px !important; height:44px !important; display:flex !important; align-items:center; justify-content:center; margin:0 auto 8px !important; }
.icon-imagggee .icon-image { width:22px !important; height:22px !important; filter:brightness(0) invert(1) !important; }
.icon-imagggee .icon-img svg { width:26px; height:26px; }
/* Feature icon images (generated badges): the PNG is the full badge, so drop the dark container bg */
.icon-imagggee .icon-img { background:transparent !important; width:48px !important; height:48px !important; }
.icon-imagggee .icon-img img.feat-ic { width:48px !important; height:48px !important; filter:none !important; display:block; }
.icon-imagggee .text-xs { font-weight:600 !important; }
/* Mobile feature icons: more breathing room */
.icons-grids.show-tablet { row-gap: 20px !important; column-gap: 12px !important; margin: 10px 0 4px !important; }
.icons-grids.show-tablet .icon-imagggee { flex-direction: column; text-align: center; gap: 6px; }
/* Desktop feature-icon row: 4 even columns, vertical stack (icon on top, 2-line label centered) */
.icons-grids:not(.show-tablet) { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; align-items: start !important; }
.icons-grids:not(.show-tablet) .icon-imagggee { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.icons-grids:not(.show-tablet) .icon-imagggee .icon-img { margin: 0 !important; flex: 0 0 auto; }
.icons-grids:not(.show-tablet) .icon-imagggee .text-xs { text-align: center; line-height: 1.25; }
/* Photo review cards (grounded evolve match) */
.reviews{grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;align-items:stretch}
.reviews.hide-tablet{display:grid}
@media (max-width:991px){ .reviews.hide-tablet{display:none} .reviews.show-tablet{display:grid} }
.review-card{display:flex;flex-direction:column;background:#F5F8FE;border:1px solid #E6ECF7;border-radius:10px;overflow:hidden}
.review-card__media{width:100%;aspect-ratio:4/3;flex-shrink:0;min-height:0;overflow:hidden;background:#e8edf6}
.review-card__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.review-card__body{padding:13px 15px 14px;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 auto}
.review-card__stars{display:flex;gap:3px}
.review-card__title{margin:0;font-size:16px;font-weight:700;color:#111;line-height:1.25}
.review-card__text{margin:0;font-size:13px;line-height:1.55;color:#2b2b2b}
.review-card__meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px}
.review-card__name{font-size:13px;font-weight:700;color:#111}
.review-card__verified{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#56B37E}
@media (max-width:600px){.review-card__body{padding:12px 13px;gap:6px}.review-card__title{font-size:15px}.review-card__text{font-size:12.5px}.review-card__media{aspect-ratio:3/2}}
/* Spacing: the .checkout__form-container already spaces subtitle / promo bar /
   package section with a 24px flex gap. Don't stack extra margins on top (that was
   the wasted space). Tighten the container gap a touch for a cleaner rhythm. */
.checkout__form-container { gap: 16px !important; }
.sub-head-text { margin: 0 !important; }
promo-timer { display:block; margin: 0 !important; }

/* (bundle card visibility is controlled by the NEXT SDK once wired) */

/* Arrows */
                .arrow-active::after,
                .arrow-inactive::after {
                  content: "";
                  position: absolute;
                  right: 0;
                  top: 50%;
                  width: 7px;
                  height: 7px;
                  border-top: 1px solid;
                  border-right: 1px solid;
                  transform: translateY(-50%) rotate(45deg);
                }

                .arrow-active::after {
                  border-color: #000;
                }

                .arrow-inactive::after {
                  border-color: #dadada;
                }

/* Define the animations */
                                    @keyframes moveRightLeft {

                                      0%,
                                      100% {
                                        transform: translateX(0);
                                      }

                                      50% {
                                        transform: translateX(10px);
                                      }
                                    }

                                    @keyframes moveLeftRight {

                                      0%,
                                      100% {
                                        transform: translateX(0);
                                      }

                                      50% {
                                        transform: translateX(-10px);
                                      }
                                    }

                                    /* Apply animations to the elements based on their data-animate attributes */
                                    [data-animate="right"] {
                                      animation: moveRightLeft 1.5s infinite ease-in-out;
                                    }

                                    [data-animate="left"] {
                                      animation: moveLeftRight 1.5s infinite ease-in-out;
                                    }

                                    @media (max-width: 767px) {

                                      [data-animate="right"],
                                      [data-animate="left"] {
                                        animation: none;
                                      }
                                    }

/* Hide checkmark by default */
                                  [data-next-bump] [os-component="check"] {
                                    display: none;
                                  }

                                  /* Show checkmark if parent has 'os--selected' in its class attribute */
                                  [data-next-bump][class*="next-active"] [os-component="check"] {
                                    display: flex;
                                  }

/* Fix for select arrow overlapping long option text in shipping_province */
    .select-form-wrapper {
      position: relative;
    }

    .select-form-wrapper .select-field {
      padding-right: 3em !important;
      box-sizing: border-box;
    }

    .select-form-wrapper .caret-down {
      position: absolute;
      right: 0.75em;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 2;
    }

    .cc-tooltip {
      position: absolute;
      max-width: 260px;
      background: #111;
      color: #fff;
      padding: 8px 10px;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.4;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
      z-index: 9999;
      display: none;
    }

    .cc-tooltip--visible {
      display: block;
    }

/* ---- promo banner (mirrors the design's promo-banner component, no code) ---- */
/* Desktop values mirror the landing page .promo banner (QA: banners should match). */
.wr-banner { background-color: rgb(173, 244, 156); padding: 10px 18px; display: flex; justify-content: center; align-items: center; min-height: 56px; box-sizing: border-box; font-family: "Inter", Arial, sans-serif; line-height: normal; }
.wr-banner__text { color: #101713; font-size: 16px; font-weight: 700; margin: 0; white-space: nowrap; display: flex; align-items: center; }
.wr-banner__normal { font-weight: 500; margin-left: 4px; }
.wr-banner__break { display: none; }
.wr-banner__code { display: inline-block; background: #111b15; color: #fff; font-size: 17px; padding: 6px 12px; font-weight: 700; letter-spacing: .04em; border: 1px solid #101713; border-radius: 6px; margin: 0 6px; white-space: nowrap; line-height: 100%; }
/* Same breakpoint as the landing .promo banner, so tablets get the one-line banner on both pages. */
@media (max-width: 760px) {
  .wr-banner { flex-direction: column; padding: 5px 10px; min-height: 70px; }
  .wr-banner__text { white-space: normal; text-align: center; flex-wrap: wrap; justify-content: center; font-size: 14px; row-gap: 3px; line-height: 1.4; }
  .wr-banner__code { font-size: 14px; margin: 0 5px; }
  .wr-banner__break { display: block; width: 100%; height: 0; }
}

/* ---- design layout rules that must win over the family core's show-tablet utility ---- */
/* QA: the three express buttons sit on one line at every width. */
.express-checkout__buttons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.express-checkout__buttons .payment-btn { width: 100%; min-width: 0; margin: 0; }
@media (max-width: 991px) {
  .icons-grids.show-tablet { display: grid !important; grid-template-columns: 1fr 1fr; justify-items: center; align-items: start; margin-bottom: 10px; }
  .reviews.show-tablet { display: grid !important; grid-template-columns: 1fr 1fr; }
}

/* ---- offer timer (mirrors the design's promo-timer component) ---- */
.wr-timer { display: flex; font-family: "Poppins", sans-serif; padding: 0 0 10px; font-weight: 700; font-size: 14px; }
.wr-timer p { margin: 0; }
.wr-timer__black { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; color: #fff; box-sizing: border-box; width: 160px; padding: 3px 0; }
.wr-timer__title { color: #ACF4A1; display: flex; align-items: center; gap: 4px; }
.wr-timer__title svg { flex-shrink: 0; }
.wr-timer__green { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #acf4a1; color: #000; box-sizing: border-box; flex-grow: 1; padding: 0 10px; }
.wr-timer__text { font-size: 13px; }
.wr-timer__count { display: inline-block; color: #e44613; font-size: 14px; font-variant-numeric: tabular-nums; }
/* One line on tablet and desktop where the column allows ("08:59. Stay on this page."), forced
   onto two lines on phones. No nowrap: a narrow column wraps naturally instead of overflowing. */
.wr-timer__break { display: none; }
@media screen and (max-width: 768px) { .wr-timer__break { display: inline; } }
@media screen and (max-width: 768px) { .wr-timer__green { width: calc(100% - 100px); padding-left: 15px; } }

/* ---- bundle cards: selected look follows the SDK .next-selected class ---- */
.os-card .radio-style-1 { background-color: #f9f9f9 !important; border: 1px solid #999 !important; }
.os-card .radio-style-1 .radio-inner { display: none !important; }
.os-card.next-selected .radio-style-1 { background-color: #000 !important; border-color: #000 !important; }
.os-card.next-selected .radio-style-1 .radio-inner { display: block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: #fff !important; }
.wr-ea { font-size: 0.62em; font-weight: 600; opacity: .85; }

/* ---- warranty toggle: check and active shade follow the SDK toggle state ---- */
[data-next-toggle-card] [os-component="check"] { display: none; }
[data-next-toggle-card].next-active [os-component="check"],
[data-next-toggle-card].next-selected [os-component="check"],
[data-next-toggle-card].next-in-cart [os-component="check"] { display: flex; }
.cc-upsell-2-wrapper [data-next-toggle-card] { cursor: pointer; }

/* ===== Compact checkout header on phones (logo + 90-day badge + contact) ===== */
@media screen and (max-width: 767px) {
  .checkout__header-brand { padding: 3px 0 !important; gap: 12px !important; }
  .mg-section.tablet-spacer { gap: 8px !important; }
  .mg-image { width: 38px !important; height: 38px !important; }
  .questions-text { font-size: 11px !important; line-height: 1.35 !important; padding-left: 12px !important; }
}

/* Brand lockup CSS moved to brand-theme.css (shared by checkout / receipt / upsell). */

/* Compare price: ONE clean strike. next-core adds text-decoration:line-through AND
   design-core draws a red diagonal ::before = two strikes. Keep the red diagonal, drop the line. */
.os-card__price.os--compare { text-decoration: none !important; }

/* Order summary (QA reference layout): rule above and below the savings row, discount in red. */
.cart-box .order-totals__section.cc-olympus { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; padding: 8px 0; margin: 0; }
.cart-box .wr-discount-value { color: #e44613; font-size: 16px; font-weight: 700; }
.cart-box .checkout__line-item__final-price { white-space: nowrap; }

/* "+10% OFF" on the bundle cards once the exit voucher is applied. */
.wr-badges { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.wr-voucher-badge { color: #1b8a3a; font-weight: 700; font-size: 16px; line-height: 1.1; text-transform: uppercase; }
.wr-voucher-badge .next-discounts-empty { display: none; }

/* SAVE % badge: drop the grey pill, keep plain red text */
.os-card__title-badge { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }

/* Complete Purchase CTA: gentle pulse as an expanding ring on a pseudo-element, so the button TEXT
   stays crisp. A transform:scale pulse rasterised and blurred the text, and pushed the full-width
   button past the viewport edge on mobile; box-shadow doesn't affect layout, so no overflow. */
@keyframes wr-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 205, 45, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(255, 205, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 205, 45, 0); } }
.submit-button:not([disabled]),
button[data-action="submit"]:not([data-next-express-checkout]) { position: relative; }
.submit-button:not([disabled])::after,
button[data-action="submit"]:not([data-next-express-checkout])::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: wr-cta-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .submit-button:not([disabled])::after,
  button[data-action="submit"]:not([data-next-express-checkout])::after { animation: none; }
}

/* Progress bar: exactly one bar at every width. Phones (<=768px) get the styled 4-step mobile
   bar; tablets (769-991px) keep the desktop 3-step bar, which .hide-tablet would otherwise hide
   (the mobile bar's styling only exists at <=768px, so showing it on tablets looked broken). */
@media (max-width: 768px) { .progress-banner .progress_bar { display: flex !important; } }
@media (min-width: 769px) and (max-width: 991px) { .progress-banner .progress-wrapper.hide-tablet { display: flex !important; } }

/* QA (iPad Pro): the 4 product-feature icons should sit on one line on tablets.
   Phones (<600px) keep the 2x2 grid so the labels don't overflow. */
@media (min-width: 600px) and (max-width: 991px) {
  .icons-grids.show-tablet { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ===== QA round 3 ===== */
/* Order summary display names: plural for Buy 2 / Buy 3, "Extended Warranty" for the add-on.
   Package names in the campaign are unchanged (receipt and emails keep them). */
.wr-item-name--plural, .wr-item-name--warranty { display: none; }
.cart-item[data-package-id="1"]:not([data-qty="1"]) .wr-item-name { display: none; }
.cart-item[data-package-id="1"]:not([data-qty="1"]) .wr-item-name--plural { display: inline; }
.cart-item[data-package-id="2"] .wr-item-name { display: none; }
.cart-item[data-package-id="2"] .wr-item-name--warranty { display: inline; }


/* Reviews stack on phones. */
@media (max-width: 767px) { .reviews.show-tablet { grid-template-columns: 1fr !important; } }

/* Phone header: the support email must not be cropped (360-390px wide screens). */
@media screen and (max-width: 479px) {
  .checkout__header-brand { gap: 8px !important; }
  .checkout__header-brand .wr-brand { width: 132px; flex: 0 1 132px; }
  /* Keep the red dashes: the nowrap tagline can't shrink, so at 132px the dashes collapsed to 0. */
  .checkout__header-brand .wr-brand__line { font-size: 8px; letter-spacing: .1em; gap: 4px; }
  .checkout__header-brand .wr-brand__line:before, .checkout__header-brand .wr-brand__line:after { min-width: 8px; flex-shrink: 0; }
  .mg-section.tablet-spacer { min-width: 0; gap: 6px !important; }
  .mg-image { width: 34px !important; height: 34px !important; }
  .questions-text { min-width: 0; font-size: 10px !important; padding-left: 8px !important; }
  /* Email on its own line; anywhere-wrap is only a last resort on very narrow screens. */
  .questions-text .link-email { display: block; overflow-wrap: anywhere; }
}

/* Exit pop-up: the whole dialog applies the coupon. */
.exit-intent-popup__dialog { cursor: pointer; }

/* QA round 4: card number / CVV. The hosted field gets the whole 48px box; the field inside the
   iframe is sized to match through cardInputConfig.styles in config.js (the two go together:
   without the styles the placeholder sits at the top of the taller iframe). */
.input-flds.spreedly-field { padding-top: 0 !important; padding-bottom: 0 !important; }