/* Nautubone RS - additions on top of Base 1's style.css (style.css itself stays byte-identical).
   Palette taken from Base 1: pink #de3875 / #dd3472, orange #f39167, text #4a5665, error #e00000. */

/* 0. Always a white page: Base 1 never sets a page background, so on phones in dark mode the empty
      areas (FAQ, left edge of "Način upotrebe") rendered black. */
html { background: #fff; color-scheme: light only; }

/* 1. Serbian Latin letters (č ć š ž đ): Base 1's Roboto files have no latin-ext, so add it (self-hosted) */
@font-face { font-family: 'Roboto'; src: url("../fonts/roboto-latinext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: fallback; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; src: url("../fonts/roboto-latinext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: fallback; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Order-form engine states (lander.js). The label keeps Base 1's look; errors sit under it. */
.gs-field { position: relative; }
.gs-field.is-invalid .form__label input { border-color: #e00000 !important; box-shadow: 0 0 0 2px rgba(224, 0, 0, .15); }
.gs-err { display: block; max-width: 265px; margin: -8px auto 14px; color: #e00000; font-size: 13px; line-height: 1.3; text-align: left; }
.gs-err:empty { display: none; }
.gs-status { margin: 10px 0 0; font-size: 14px; line-height: 1.35; text-align: center; color: #4a5665; }
.gs-status:empty { display: none; }
.gs-status.is-error { background: #fff0f4; border: 1px solid #f5b5cc; color: #b0124d; border-radius: 8px; padding: 10px 12px; text-align: left; }
.gs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
form.is-sending .btn { opacity: .75; cursor: wait; }

/* 3. "Is this your number?" confirm dialog (injected by lander.js) */
.gs-confirm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(29, 29, 27, .6); }
.gs-confirm[hidden] { display: none !important; }
.gs-confirm__box { width: 100%; max-width: 340px; background: #fff; border: 4px solid #f39167; border-radius: 14px; padding: 24px 20px 20px; text-align: center; font-family: 'Roboto', sans-serif; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.gs-confirm__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: #fff0f4; color: #de3875; }
.gs-confirm__box h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #1d1d1b; }
.gs-confirm__ph { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #de3875; letter-spacing: .5px; }
.gs-confirm__sub { margin: 0 0 18px; font-size: 14px; color: #4a5665; }
.gs-confirm__act { display: flex; gap: 10px; }
.gs-confirm__act button { flex: 1; padding: 12px 10px; border: 0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.gs-confirm__edit { background: #eef2f7; color: #4a5665; }
.gs-confirm__ok { background: linear-gradient(to right, #dd3472 0, #ff5594 50%, #dd3472 100%); color: #fff; box-shadow: 0 6px 18px rgba(198, 41, 99, .4); }

/* 4. Auto pop-up: Base 1's own order card inside an overlay */
.nb-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; background: rgba(29, 29, 27, .6); }
.nb-popup[hidden] { display: none !important; }
.nb-popup__box { position: relative; width: 100%; max-width: 330px; margin: auto; animation: nbPop .25s ease-out; }
.nb-popup__close { position: absolute; top: -14px; right: -10px; z-index: 10; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1d1d1b; font-size: 26px; line-height: 36px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.nb-popup .form { max-width: 330px; margin: 0 auto; background: #fff; }
.nb-popup .form::after { display: none !important; }   /* decorative arrow pointing at the hero image */
html.nb-popup-open { overflow: hidden; }
@keyframes nbPop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nb-popup__box { animation: none; } }

/* 5. Note under the example reviews */
.nb-reviews-note { max-width: 690px; margin: 12px auto 0; font-size: 12px; line-height: 1.5; color: #647084; text-align: center; }