/* Стили сайта «Речные прогулки в Нижнем Новгороде». */
/* 1. Общие стили (base) */
    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    /* --- Hero: «река и закат», без изображений --- */
    .hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(1100px 560px at 86% -12%, rgba(255, 193, 7, .38), transparent 64%),
        radial-gradient(900px 560px at -12% 115%, rgba(13, 202, 240, .30), transparent 58%),
        linear-gradient(158deg, #052461 0%, #0a3d8f 46%, #0d6efd 100%);
    }

    /* Контент поверх декоративных слоёв */
    .hero > * {
      position: relative;
      z-index: 1;
    }

    /* Круги на воде — дрейфующая текстура из концентрических колец */
    .hero::before {
      content: "";
      position: absolute;
      inset: -80px;
      background-image:
        repeating-radial-gradient(circle at 18% 24%, transparent 0 42px, rgba(255, 255, 255, .05) 42px 44px),
        repeating-radial-gradient(circle at 78% 78%, transparent 0 56px, rgba(255, 255, 255, .04) 56px 58px),
        repeating-radial-gradient(circle at 52% 8%, transparent 0 70px, rgba(255, 255, 255, .03) 70px 72px);
      pointer-events: none;
    }

    /* Мягкая виньетка для контраста текста */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 24, 62, .35) 100%);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .hero::before {
        animation: hero-ripples 32s linear infinite alternate;
      }
    }

    @keyframes hero-ripples {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-46px, -28px, 0); }
    }

    .fleet-img {
      height: 140px;
      object-fit: cover;
    }

    .card .badge {
      letter-spacing: .2px;
    }

    /* --- Карточки прогулок и маршрутов --- */
    .trip-card {
      border: 0;
      border-radius: 1.1rem;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .trip-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 1rem 2.2rem rgba(13, 110, 253, .16);
    }

    .card-media {
      position: relative;
      overflow: hidden;
    }

    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .trip-card:hover .card-media img {
      transform: scale(1.08);
    }

    .media-img {
      aspect-ratio: 4 / 3;
    }

    .media-wide {
      aspect-ratio: 16 / 10;
    }

    .media-ph {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #e9f0fd, #d5e3fa);
      color: #8fabdd;
      font-size: 2.6rem;
    }

    .price-pill {
      position: absolute;
      right: .75rem;
      bottom: .75rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      border-radius: 2rem;
      padding: .38rem .9rem;
      font-size: .88rem;
      font-weight: 800;
      background: #ffc107;
      color: #241c00;
      box-shadow: 0 .4rem 1rem rgba(255, 193, 7, .45);
    }

    .chip-type {
      position: absolute;
      left: .75rem;
      top: .75rem;
      z-index: 2;
      font-weight: 600;
      box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .15);
    }

    .meta-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .8rem;
      color: #6c757d;
    }

    /* --- Меню --- */
    .navbar-main {
      background: linear-gradient(180deg, #0a58ca 0%, #0d6efd 100%);
      border-bottom: 1px solid rgba(255, 255, 255, .16);
      box-shadow: 0 .5rem 1.5rem rgba(8, 50, 130, .22);
    }

    .brand-logo {
      display: inline-block;
      width: 2.15rem;
      height: 2.15rem;
      margin-right: .6rem;
      border-radius: .7rem;
      object-fit: cover;
      box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .3);
    }

    .brand-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.15rem;
      height: 2.15rem;
      margin-right: .6rem;
      border-radius: .7rem;
      font-size: 1.2rem;
      background: linear-gradient(145deg, #ffd21f, #ffb300);
      color: #241c00;
      box-shadow: 0 .3rem .8rem rgba(255, 193, 7, .45);
    }

    .navbar-main .nav-link {
      position: relative;
      color: #fff;
      font-weight: 600;
      padding: .5rem .9rem !important;
      border-radius: .7rem;
      transition: background-color .15s ease, color .15s ease;
    }

    .navbar-main .nav-link:hover,
    .navbar-main .nav-link:focus {
      color: #ffe69c;
      background: rgba(255, 255, 255, .1);
    }

    .navbar-main .nav-link.active {
      color: #ffe69c;
    }

    .navbar-main .nav-item {
      padding-bottom: .9rem;
    }

    .navbar-main .dropdown-toggle::after {
      margin-left: .45em;
      transition: transform .2s ease;
    }

    .nav-caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      color: #fff;
      padding: .5rem .45rem .5rem .05rem;
      font-size: .65rem;
      border-radius: .5rem;
      transition: color .15s ease, background-color .15s ease;
    }

    .nav-caret i {
      transition: transform .2s ease;
    }

    .nav-caret:hover,
    .nav-caret:focus {
      color: #ffe69c;
      background: rgba(255, 255, 255, .1);
    }

    /* --- Выпадающие панели меню --- */
    .navbar-main .dropdown {
      position: relative;
    }

    .navbar-main .dropdown-menu {
      top: 100%;
      left: 0;
      right: auto;
      border: 0;
      border-radius: 1.1rem;
      padding: .65rem;
      box-shadow: 0 1.4rem 3rem rgba(8, 45, 110, .25);
    }

    .mega-link {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      padding: .65rem .75rem;
      border-radius: .8rem;
      text-decoration: none;
      transition: background-color .15s ease;
    }

    .mega-link:hover {
      background: #eef4ff;
    }

    .mega-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.4rem;
      height: 2.4rem;
      border-radius: .7rem;
      font-size: 1.15rem;
      background: #e7f0ff;
      color: #0d6efd;
      transition: background-color .15s ease, color .15s ease;
    }

    .mega-link:hover .mega-icon {
      background: #0d6efd;
      color: #fff;
    }

    .mega-body {
      min-width: 0;
    }

    .mega-title {
      display: block;
      font-weight: 700;
      font-size: .95rem;
      line-height: 1.3;
      color: #1a2b45;
    }

    .mega-desc {
      display: block;
      font-size: .8rem;
      color: #6c757d;
    }

    .mega-label {
      margin: 0;
      padding: .45rem .75rem .3rem;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: #93a0b4;
    }

    .operator-link {
      display: block;
      padding: .4rem .75rem;
      border-radius: .6rem;
      font-size: .85rem;
      font-weight: 600;
      color: #0d6efd;
      text-decoration: none;
      transition: background-color .15s ease;
    }

    .operator-link:hover {
      background: #eef4ff;
      color: #0a58ca;
    }

    @media (min-width: 992px) {
      .navbar-main .nav-link.active::after {
        content: "";
        position: absolute;
        left: .9rem;
        right: .9rem;
        bottom: .2rem;
        height: 2px;
        border-radius: 2px;
        background: #ffe69c;
      }

      .navbar-main .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(.5rem);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        margin-top: .55rem !important;
      }

      .navbar-main .dropdown:hover>.dropdown-menu,
      .navbar-main .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .navbar-main .dropdown:hover .nav-caret i {
        transform: rotate(180deg);
      }

      .nav-mega {
        width: min(640px, calc(100vw - 2rem));
      }

      .nav-mega-sm {
        width: min(380px, calc(100vw - 2rem));
      }

      .mega-col-divider {
        border-left: 1px solid #edf1f7;
      }
    }

    @media (max-width: 991.98px) {
      .nav-caret {
        font-size: .8rem;
        padding: .55rem .8rem;
      }

      .navbar-main .dropdown-menu {
        position: static;
        margin: .35rem 0 .6rem;
        background: rgba(255, 255, 255, .08);
        box-shadow: none;
      }

      .navbar-main .mega-link:hover {
        background: rgba(255, 255, 255, .1);
      }

      .mega-title {
        color: #fff;
      }

      .mega-desc {
        color: rgba(255, 255, 255, .65);
      }

      .mega-label {
        color: rgba(255, 255, 255, .55);
      }

      .mega-icon {
        background: rgba(255, 255, 255, .14);
        color: #fff;
      }

      .operator-link {
        color: #ffe69c;
      }
    }

    /* --- Кнопки: ярче при наведении --- */
    .btn-primary {
      box-shadow: 0 .3rem .8rem rgba(13, 110, 253, .22);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      background-color: #4d94ff;
      border-color: #4d94ff;
      box-shadow: 0 .45rem 1.2rem rgba(13, 110, 253, .5);
    }

    .btn-warning {
      box-shadow: 0 .3rem .8rem rgba(255, 193, 7, .25);
    }

    .btn-warning:hover,
    .btn-warning:focus-visible {
      background-color: #ffd21f;
      border-color: #ffd21f;
      box-shadow: 0 .45rem 1.2rem rgba(255, 193, 7, .55);
    }

    .btn-light:hover,
    .btn-light:focus-visible {
      background-color: #fff;
      box-shadow: 0 .45rem 1.2rem rgba(255, 255, 255, .4);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus-visible {
      background-color: #4d94ff;
      border-color: #4d94ff;
      box-shadow: 0 .45rem 1.2rem rgba(13, 110, 253, .5);
    }

    /* --- Футер: ссылки --- */
    .footer-link {
      color: rgba(255, 255, 255, .5);
      transition: color .15s ease;
    }

    .footer-link:hover,
    .footer-link:focus {
      color: #ffe69c;
    }

/* 2. Страница деталей оффера */
    /* ===== Offer detail: акценты в общей стилистике сайта ===== */
    .od { --od-blue: #0d6efd; --od-blue-dark: #0a58ca; --od-yellow: #ffc107; }

    /* --- HERO: светлый, без фона --- */
    .od-kicker {
        display: inline-flex; align-items: center; gap: .6rem;
        font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
        color: var(--od-blue);
    }
    .od-kicker::before { content: ""; width: 30px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--od-blue)); }

    .od-hero h1 { color: var(--bs-body-color); }
    .od-hero .od-lead { color: #6c757d; max-width: 34em; }

    .od-chip {
        display: inline-flex; align-items: center; gap: .45rem;
        padding: .45rem .95rem; border-radius: 2rem;
        border: 1px solid rgba(13, 110, 253, .25);
        background: #e9f0fd;
        font-size: .84rem; font-weight: 600; color: var(--od-blue-dark);
    }
    .od-chip i { color: var(--od-blue); }
    .od-chip.od-chip-amber { background: #fff8e1; border-color: rgba(255, 193, 7, .6); }
    .od-chip.od-chip-amber i { color: #e8930c; }

    .od-cta {
        display: inline-flex; align-items: center; gap: .6rem;
        font-weight: 700; font-size: 1.05rem;
        border-radius: .8rem; padding: .9rem 1.6rem;
        text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
    }
    .od-cta:hover { transform: translateY(-2px); }
    .od-cta i { transition: transform .2s ease; }
    .od-cta:hover i { transform: translateX(4px); }
    .od-instant { color: #6c757d; font-size: .88rem; }
    .od-instant i { color: #e8930c; }

    @media (prefers-reduced-motion: no-preference) {
        .od-up { opacity: 0; transform: translateY(16px); animation: od-rise .65s cubic-bezier(.22,.8,.32,1) forwards; }
        .od-d1 { animation-delay: .05s } .od-d2 { animation-delay: .14s }
        .od-d3 { animation-delay: .23s } .od-d4 { animation-delay: .32s }
        .od-d5 { animation-delay: .41s } .od-d6 { animation-delay: .5s }
        @keyframes od-rise { to { opacity: 1; transform: none } }
    }

    /* --- карточка деталей --- */
    .od-ticket {
        border: 1px solid rgba(13, 110, 253, .15);
        border-radius: 1.1rem; overflow: hidden;
        color: var(--bs-body-color);
        box-shadow: 0 .9rem 2.2rem rgba(13, 110, 253, .15);
    }
    .od-ticket::before { content: ""; display: block; height: 4px;
        background: linear-gradient(90deg, var(--od-blue), var(--od-yellow)); }
    .od-ticket-media { position: relative; }
    .od-ticket-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
    .od-ticket-media::after { content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(2, 30, 70, .5)); }
    .od-ticket-price {
        position: absolute; left: 1rem; bottom: .75rem; z-index: 2;
        color: #fff; font-size: 1.05rem; text-shadow: 0 2px 10px rgba(0,0,0,.55);
    }
    .od-ticket-price b { font-size: 1.4rem; }
    .od-ticket-type {
        position: absolute; right: .9rem; top: .9rem; z-index: 2;
        font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
        padding: .32rem .7rem; border-radius: 2rem;
        background: var(--od-yellow); color: #241c00;
        box-shadow: 0 .25rem .7rem rgba(0,0,0,.3);
    }
    .od-ticket-perf { position: relative; border-top: 2px dashed rgba(13, 110, 253, .25);
        margin: 1.2rem 1.25rem 0; }
    .od-ticket-body { padding: 1.1rem 1.5rem 1.5rem; }
    .od-row { display: flex; gap: .9rem; padding: .55rem 0; border-bottom: 1px solid rgba(13,110,253,.1); font-size: .92rem; }
    .od-row:last-of-type { border-bottom: 0; }
    .od-row dt { flex: 0 0 7.5rem; color: #6c757d; font-weight: 500; }
    .od-row dd { margin: 0; font-weight: 700; }
    .od-row i { color: var(--od-blue); width: 1.1rem; }
    .od-ticket .od-cta { width: 100%; justify-content: center; font-size: 1rem; padding: .8rem 1rem; }
    @media (min-width: 992px) {
        /* карточка сопровождает скролл длинного описания */
        .od-ticket-col { position: sticky; top: 84px; }
    }
    /* --- описание рядом с карточкой --- */
    .od-desc-in-header { margin-top: 2.2rem; }

    /* --- заголовки секций --- */
    .od-eyebrow {
        display: inline-flex; align-items: center; gap: .55rem;
        font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
        color: var(--od-blue);
    }
    .od-eyebrow i { font-size: .95rem; }
    .od-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.2; margin: .4rem 0 0; }
    .od-subtitle { color: #6c757d; max-width: 44em; margin-top: .6rem; }

    /* --- описание --- */
    .od-desc-block { position: relative; padding-left: clamp(1.3rem, 4vw, 2.4rem); }
    .od-desc-block + .od-desc-block { margin-top: clamp(2rem, 5vw, 3.2rem); }
    .od-desc-block::before {
        content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--od-blue), var(--od-yellow));
    }
    .od-desc-block .od-sub { font-size: 1.4rem; font-weight: 800; margin-bottom: .9rem; }
    .od-desc-block .od-body { color: #3d4b59; line-height: 1.75; font-size: 1.02rem; }
    .od-desc-block .od-body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .6rem; }
    .od-desc-block .od-body ul { list-style: none; padding-left: 0; }
    .od-desc-block .od-body ul li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
    .od-desc-block .od-body ul li::before {
        content: "—"; position: absolute; left: 0; top: 0; color: var(--od-blue); font-weight: 800;
    }

    /* --- галерея --- */
    .od-gallery {
        display: grid; gap: .8rem;
        grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(130px, 17vw, 210px);
        grid-auto-flow: dense;
    }
    .od-gitem { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 .4rem 1.2rem rgba(13,110,253,.12); }
    .od-gitem:first-child { grid-column: span 2; grid-row: span 2; }
    .od-gitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
    .od-gitem:hover img { transform: scale(1.06); }
    @media (max-width: 767.98px) {
        .od-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 38vw, 180px); }
    }

    /* --- лайтбокс --- */
    .od-gitem { cursor: zoom-in; }
    .od-lightbox {
        position: fixed; inset: 0; z-index: 1090;
        display: flex; align-items: center; justify-content: center;
        background: rgba(6, 22, 38, .93); backdrop-filter: blur(4px);
        animation: od-lb-in .25s ease;
    }
    .od-lightbox[hidden] { display: none; }
    @keyframes od-lb-in { from { opacity: 0 } to { opacity: 1 } }
    .od-lb-figure { margin: 0; max-width: min(1100px, 92vw); }
    .od-lb-figure img {
        display: block; max-width: 100%; max-height: 84vh;
        border-radius: .6rem;
        box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5);
        cursor: zoom-in;
        transform-origin: var(--zx, 50%) var(--zy, 50%);
        transition: transform .25s ease;
    }
    .od-lightbox.od-zoom .od-lb-figure img { transform: scale(1.8); cursor: zoom-out; }
    .od-lb-btn {
        position: absolute; z-index: 2;
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; border: 0; border-radius: 50%;
        background: rgba(255,255,255,.12); color: #fff; font-size: 1.25rem;
        transition: background .2s;
    }
    .od-lb-btn:hover, .od-lb-btn:focus-visible { background: rgba(255,255,255,.28); color: #fff; }
    .od-lb-close { top: 1rem; right: 1rem; }
    .od-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
    .od-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
    .od-lb-counter {
        position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
        color: rgba(255,255,255,.85); font-size: .88rem; font-weight: 600;
        background: rgba(255,255,255,.1); padding: .3rem .9rem; border-radius: 2rem;
    }
    @media (max-width: 575.98px) {
        .od-lb-btn { width: 38px; height: 38px; font-size: 1.05rem; }
        .od-lb-prev { left: .5rem } .od-lb-next { right: .5rem }
    }

    /* --- гид --- */
    .od-guide { position: relative; overflow: hidden; }
    .od-guide::before {
        content: "“"; position: absolute; right: 1rem; top: -2.6rem;
        font-size: 11rem; line-height: 1; font-weight: 800;
        color: rgba(13, 110, 253, .08); pointer-events: none;
    }
    .od-guide img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
        border: 3px solid #e9f0fd; box-shadow: 0 .5rem 1.4rem rgba(13,110,253,.18); }
    .od-guide-name { font-size: 1.3rem; font-weight: 800; margin: 0; }
    .od-guide-rating { color: #6c757d; font-size: .9rem; }
    .od-guide-rating i { color: var(--od-yellow); }
    .od-guide p:last-child { color: #3d4b59; line-height: 1.7; margin: 0; }

    /* --- полезно знать: иконка в круге --- */
    .od-tip-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 1rem; flex: 0 0 auto;
        background: #e9f0fd; color: var(--od-blue); font-size: 1.4rem;
    }
    .od-tip h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .35rem; }
    .od-tip p { color: #6c757d; font-size: .93rem; line-height: 1.65; margin: 0; }
    .od-tip a { font-weight: 600; }

    /* --- финальный CTA --- */
    .od-final {
        background: linear-gradient(115deg, rgba(13, 110, 253, .97), rgba(13, 110, 253, .75));
        color: #fff;
    }
    .od-final h2 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); }
    .od-final p { color: rgba(255,255,255,.8); }

    /* --- мобильная плашка --- */
    .od-mobile-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
        background: rgba(10, 88, 202, .97); backdrop-filter: blur(8px);
        box-shadow: 0 -.4rem 1.4rem rgba(2, 30, 70, .25);
    }
    .od-mobile-bar .od-mb-price { color: #fff; font-weight: 800; line-height: 1.1; }
    .od-mobile-bar .od-mb-price small { display: block; font-weight: 500; color: rgba(255,255,255,.7); font-size: .72rem; }
    .od-mobile-bar .od-cta { font-size: .92rem; padding: .6rem 1.2rem; border-radius: .6rem; }
    @media (min-width: 992px) { .od-mobile-bar { display: none; } }
    @media (max-width: 991.98px) { main { padding-bottom: 72px; } }