/* Nautubone RS - V2 theme. Palette taken from the product itself: white tube with an aqua/teal band
   (#78b4b4 / #b4d8d8) + a clinical navy for headings. The order button is the only warm colour on the page
   (orange-red), so it is always the most visible element. style.css here = Base 1's file with its
   pink/orange swapped for these colours by the build script. */
:root {
  --nb-navy: #16365c;      /* headings, deep text */
  --nb-teal: #177d89;      /* accents that must stay readable on white (product teal, darkened) */
  --nb-aqua: #78b4b4;      /* product aqua: borders, decoration */
  --nb-aqua-l: #e4f2f3;    /* light aqua tint: icon tiles, chips */
  --nb-sky: #f2f8fa;       /* alternate section background */
  --nb-line: #d4e6ea;      /* hairlines */
  --nb-text: #45535f;      /* body text */
  --nb-cta1: #ff6a00; --nb-cta2: #e33500;
}
html { background: #fff; color-scheme: light only; }

/* ---------- global typography ---------- */
.title, .header__title, .solution__foot-title, .questions__q, .order__title { color: var(--nb-navy); }
.subtitle { color: #6b7b88; }
.main-color { color: var(--nb-teal); }

/* ---------- order card (hero, bands, pop-up) ---------- */
.form { border-color: var(--nb-aqua); box-shadow: 0 16px 36px rgba(22, 54, 92, .14); }
.form__date { color: var(--nb-teal); }
.price__new .price__num { color: var(--nb-navy); }

/* ---------- confirm dialog + pop-up overlay ---------- */
.gs-confirm, .nb-popup { background: rgba(12, 32, 52, .62); }
.gs-confirm__box { border-color: var(--nb-aqua); }
.gs-confirm__ico { background: var(--nb-aqua-l); color: var(--nb-teal); }
.gs-confirm__ph { color: var(--nb-navy); }
.gs-confirm__ok { background: linear-gradient(181deg, var(--nb-cta1) 0, var(--nb-cta2) 100%); box-shadow: 0 6px 18px rgba(226, 56, 0, .35); }

/* ================= HERO ================= */
/* .nb-hero-media wraps the couple + the tube. On desktop it is display:contents, so Base 1's layout is untouched. */
.nb-hero-media { display: contents; }

@media screen and (max-width: 1023px) {
  header.header { background: linear-gradient(180deg, #ffffff 0%, #f3f9fa 50%, #e6f2f4 100%) !important; padding-bottom: 36px; }
  header.header .header__top { margin-bottom: 12px; }
  header.header .nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  header.header .nav__item { margin: 0; padding: 0; }
  header.header .nav__link { display: inline-block; padding: 6px 12px; border: 1px solid var(--nb-line); border-radius: 999px; background: #fff; font-size: 13px; color: var(--nb-text); box-shadow: 0 2px 6px rgba(22, 54, 92, .06); }

  header.header .header__content { flex-direction: column; align-items: center; }
  header.header .header__about { display: contents; }
  header.header .header__title { order: 1; width: 100%; margin-bottom: 16px; text-align: center; }

  header.header .nb-hero-media { order: 2; display: block; position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
  header.header .header__woman { display: block !important; position: relative !important; left: auto !important; bottom: auto !important;
    -webkit-transform: none !important; transform: none !important; width: 100% !important; max-width: none !important; opacity: 1 !important; margin: 0; pointer-events: none; }
  header.header .header__woman img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 14px 30px rgba(22, 54, 92, .16); }
  header.header .header__prod { position: absolute !important; top: auto !important; left: auto !important; right: 2% !important; bottom: -34px !important;
    width: 26% !important; max-width: 118px !important; margin: 0 !important; z-index: 3; }

  header.header .header__features { order: 3; width: 100%; max-width: 440px; margin: 52px auto 0; padding: 18px 16px 6px; border: 1px solid var(--nb-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(22, 54, 92, .07); }
  header.header .header__features-item { max-width: none; margin: 0 0 14px; padding-left: 34px; font-size: 15px; line-height: 1.35; text-align: left; }
  header.header .header__features-item b { display: block; margin-bottom: 1px; color: var(--nb-navy); }
  header.header .header__features-item::before { top: 1px; left: 0; width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: var(--nb-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
  header.header .header__features-item br { display: none; }
  header.header .form { order: 4; margin: 24px auto 0; }
}
@media screen and (max-width: 479px) {
  header.header .header__title { font-size: 29px; }
  header.header .header__prod { width: 28% !important; bottom: -30px !important; }
  header.header .header__features { margin-top: 46px; }
}

/* ================= "Da li vam je ovo poznato?" ================= */
.nb-pain { position: relative; z-index: 2; padding: 60px 0; background: #fff; }   /* above the hero couple, which overhangs the hero on desktop */
.nb-pain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-top: 34px; }
.nb-pain__card { overflow: hidden; border: 1px solid var(--nb-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(22, 54, 92, .08); text-align: left; }
.nb-pain__img { position: relative; }
.nb-pain__img img { display: block; width: 100%; height: auto; aspect-ratio: 305 / 220; object-fit: cover; }
.nb-pain__ico { position: absolute; left: 14px; bottom: -22px; width: 46px; height: 46px; border: 3px solid #fff; border-radius: 12px; background: var(--nb-aqua-l) no-repeat center / 24px auto; box-shadow: 0 4px 12px rgba(22, 54, 92, .15); }
.nb-pain__card h3 { margin: 32px 16px 6px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--nb-navy); }
.nb-pain__card p { margin: 0 16px 18px; font-size: 15px; line-height: 1.45; color: var(--nb-text); }
.nb-pain__note { max-width: 760px; margin: 34px auto 26px; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--nb-navy); }
@media screen and (max-width: 1023px) { .nb-pain__grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 599px) {
  .nb-pain { padding: 44px 0; }
  .nb-pain__grid { gap: 14px 12px; margin-top: 24px; }
  .nb-pain__ico { left: 10px; bottom: -19px; width: 40px; height: 40px; background-size: 21px auto; }
  .nb-pain__card h3 { margin: 28px 10px 4px; font-size: 15px; }
  .nb-pain__card p { margin: 0 10px 12px; font-size: 13px; }
  .nb-pain__note { margin: 26px auto 20px; font-size: 17px; }
}

/* ================= solution: cards with a check on mobile ================= */
.solution .solution__row .item::before { background: var(--nb-teal); }
@media screen and (max-width: 767px) {
  .solution { background: var(--nb-sky) !important; }
  .solution .solution__items { max-width: 440px; margin: 0 auto; }
  .solution .solution__row { display: block; margin-bottom: 0; }
  .solution .solution__row .item { width: 100%; margin: 0 0 10px; padding: 14px 16px 14px 52px; border: 1px solid var(--nb-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(22, 54, 92, .06); text-align: left; }
  .solution .solution__row .item::before { display: block !important; top: 50%; left: 14px; width: 24px; height: 24px; border: 0; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
    background: var(--nb-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
  .solution .solution__row .item:nth-child(1)::after { display: none; }
  .solution .solution__row .item .item__descr, .solution .solution__row .item:nth-child(2) .item__descr { padding: 0 !important; text-align: left !important; font-size: 14px !important; line-height: 1.4; }
  .solution .solution__row .item .item__descr span { margin-bottom: 2px; font-size: 16px !important; color: var(--nb-navy); }
  .solution .item__descr br { display: none; }
  .solution .item__descr .text-bold { display: block; }
}

/* ================= blue order band (Base 2 "callback" block) ================= */
.nb-band { padding: 50px 0; color: #fff; background: linear-gradient(140deg, #12345a 0%, #1a5a82 55%, #1f7f8c 100%); }
.nb-band .form { color: #1d1d1b; }      /* the card must not inherit the band's white text */
.nb-band + .use { margin-top: 0; }      /* Base 1 pulls .use up 42px, which painted over the band */
.nb-band__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.nb-band__info { flex: 1 1 320px; max-width: 430px; }
.nb-band__title { margin: 0 0 18px; font-size: 34px; font-weight: 700; line-height: 1.15; color: #fff; }
.nb-band__title span { color: #a6e6ea; }
.nb-band__trust { margin: 0 0 20px; padding: 0; list-style: none; }
.nb-band__trust li { position: relative; margin-bottom: 9px; padding-left: 31px; font-size: 17px; line-height: 1.35; color: #e9f4f7; }
.nb-band__trust li::before { content: ''; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  background: #a6e6ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2316365c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.nb-band__until { display: inline-block; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: rgba(8, 28, 48, .35); font-size: 16px; color: #d6eef1; }
.nb-band__until b { color: #fff; font-size: 18px; }
.nb-band__prod { flex: 0 0 auto; }
.nb-band__prod img { display: block; max-width: 170px; height: auto; -webkit-filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.nb-band .form { flex: 0 0 auto; margin: 0; background: #fff; }
.nb-band .form::after { display: none !important; }
@media screen and (max-width: 1023px) {
  .nb-band__in { flex-wrap: wrap; justify-content: center; text-align: center; }
  .nb-band__info { flex-basis: 100%; max-width: 520px; }
  .nb-band__trust { display: inline-block; text-align: left; }
  .nb-band__until { display: table; margin: 0 auto; }
  .nb-band__prod img { max-width: 120px; }
}
@media screen and (max-width: 599px) {
  .nb-band { padding: 38px 0; }
  .nb-band__title { font-size: 26px; }
  .nb-band__trust li { font-size: 15px; }
  .nb-band__prod { display: none; }
  .nb-band .form { margin: 0 auto; }
}

/* ================= how to use ================= */
.use .use__desc { color: var(--nb-text); }

/* ================= tips ================= */
.nb-tips { padding: 60px 0; background: var(--nb-sky); }
.nb-tips__intro { display: flex; align-items: center; gap: 34px; margin-top: 30px; padding: 28px 32px; border: 1px solid var(--nb-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(22, 54, 92, .08); }
.nb-tips__doc { flex: 0 0 240px; width: 240px; height: auto; border-radius: 14px; background: var(--nb-aqua-l); }
.nb-tips__text p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--nb-text); }
.nb-tips__h { margin: 44px 0 22px; text-align: center; font-size: 26px; font-weight: 700; color: var(--nb-navy); }
.nb-tips__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nb-tips__card { overflow: hidden; border: 1px solid var(--nb-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(22, 54, 92, .07); text-align: left; }
.nb-tips__img { position: relative; }
.nb-tips__img img { display: block; width: 100%; height: auto; aspect-ratio: 227 / 211; object-fit: cover; }
.nb-tips__ico { position: absolute; right: 12px; bottom: -20px; width: 44px; height: 44px; border: 3px solid #fff; border-radius: 50%; background: var(--nb-aqua-l) no-repeat center / 22px auto; box-shadow: 0 4px 12px rgba(22, 54, 92, .15); }
.nb-tips__card h4 { margin: 26px 14px 6px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--nb-navy); }
.nb-tips__card p { margin: 0 14px 16px; font-size: 14px; line-height: 1.45; color: var(--nb-text); }
@media screen and (max-width: 1023px) { .nb-tips__grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 767px) {
  .nb-tips { padding: 44px 0; }
  .nb-tips__intro { flex-direction: column; gap: 18px; padding: 22px 18px; }
  .nb-tips__doc { flex-basis: auto; width: 190px; }
  .nb-tips__text p { font-size: 15px; }
}
@media screen and (max-width: 479px) {
  .nb-tips__grid { gap: 12px; }
  .nb-tips__h { margin-top: 32px; font-size: 22px; }
  .nb-tips__card h4 { margin: 24px 10px 4px; font-size: 15px; }
  .nb-tips__card p { margin: 0 10px 12px; font-size: 13px; }
}

/* ================= reviews ================= */
.reviews__item { border-color: var(--nb-line); background: linear-gradient(180deg, #d9edef 70px, #fff 70px, #fff); }
.reviews__plus { background: var(--nb-teal); }

/* ================= FAQ: light section (Base 1 relied on the browser background) ================= */
.questions { background: var(--nb-sky); }
.questions__more { background-color: var(--nb-teal); }
.questions__item.show .questions__more { background-color: var(--nb-navy); }

/* ================= how to order ================= */
.nb-steps { padding: 60px 0 50px; background: #fff; }
.nb-steps__list { display: flex; justify-content: center; gap: 28px; max-width: 980px; margin: 34px auto 0; padding: 0; list-style: none; }
.nb-steps__list li { position: relative; flex: 1 1 0; padding: 0 10px; text-align: center; }
.nb-steps__list li + li::before { content: ''; position: absolute; left: -20px; top: 34px; width: 12px; height: 12px; border-top: 3px solid var(--nb-aqua); border-right: 3px solid var(--nb-aqua);
  -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.nb-steps__ico { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: 14px; border: 1px solid #c9e3e6; border-radius: 20px; background: var(--nb-aqua-l); box-shadow: 0 6px 16px rgba(22, 54, 92, .08); }
.nb-steps__ico img { max-width: 46px; max-height: 42px; }
.nb-steps__list h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--nb-navy); }
.nb-steps__list p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--nb-text); }
@media screen and (max-width: 767px) {
  .nb-steps { padding: 44px 0; }
  .nb-steps__list { flex-direction: column; gap: 34px; }
  .nb-steps__list li + li::before { left: 50%; top: -24px; -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); }
}

/* ================= footer ================= */
.site-footer { background: #12345a; color: #c4d4e2; }
.site-footer a { color: #fff; }

/* ================= floating order button (opens the pop-up form) ================= */
.nb-fab { position: fixed; right: 16px; bottom: 18px; z-index: 1500; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: linear-gradient(181deg, var(--nb-cta1) 0, var(--nb-cta2) 100%); box-shadow: 0 6px 18px rgba(226, 56, 0, .45); transition: opacity .2s, transform .2s; animation: nbPulse 2s infinite; }
.nb-fab svg { width: 28px; height: 28px; }
.nb-fab.is-hidden { opacity: 0; -webkit-transform: scale(.6); transform: scale(.6); pointer-events: none; }
html.nb-popup-open .nb-fab { display: none; }
@keyframes nbPulse { 0% { box-shadow: 0 0 0 0 rgba(226, 56, 0, .45); } 70% { box-shadow: 0 0 0 16px rgba(226, 56, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 56, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .nb-fab { animation: none; } }