/* Schwarz Horse header/nav overrides on top of the base rts-* theme.
   Kept in a separate file so the huge vendor style.css stays untouched. */

/* ---- Site font: the theme ships "Sunsive", a narrow display-leaning
   typeface used for BOTH headings and body copy -- fine for short hero
   titles but noticeably harder to scan in paragraphs, forms and pricing.
   Plus Jakarta Sans is a humanist sans with a large x-height and open
   counters (numerals stay legible at small sizes -- important for prices),
   and it's already an established, widely-trusted choice for customer-
   facing booking/travel UIs. --font-primary/--font-secondary are consumed
   everywhere via var(), so overriding them here at :root (after style.css)
   swaps the typeface sitewide without touching a single selector. ---- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap");

:root {
  --font-primary: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-secondary: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.home-yacht-bg {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Black instead of navy blue: the "yacht" theme variant this site is
   built on hard-codes a navy accent (#003A59) via --color-primary/
   --color-heading-1 on body.home-yacht-bg, plus a pale blue --color-border,
   plus several hard-coded rgba(0,58,89,*) gradient overlays on the hero
   banner, package-wrapper cards and the homepage offer cards. Overriding
   the CSS vars here (same selector, later in the cascade, so it wins)
   handles every element that reads var(--color-primary)/var(--color-
   heading-1)/var(--color-border) -- native buttons, section titles, icons,
   card borders (including this file's own .rts-route-card/.tour-detail-
   panel, which also use var(--color-border)). The three gradient overlays
   below are hard-coded rgb(0,58,89,*) literals, not var()-based, so they
   need their own direct overrides. ---- */
body.home-yacht-bg {
  --color-primary: #1a1d20;
  --color-heading-1: #1a1d20;
  --color-border: #e2e2e2;
}
.rts-banner-area-three .rts-hero-banner::after {
  background: linear-gradient(270deg, rgba(10, 10, 10, 0.09) 44.35%, rgba(10, 10, 10, 0.85) 84.81%);
}
.package-wrapper::after {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.09) 50.12%, rgba(10, 10, 10, 0.85) 89.79%);
}
.offer-wrapper-2::after {
  background: linear-gradient(270deg, rgba(10, 10, 10, 0) 0%, #1a1d20 84.02%);
}

/* ---- package-wrapper card images (tours, vehicles, homepage "Top
   Destinations"): the theme itself never constrains this image's box, so
   photos with different native aspect ratios (a wide dealer stock photo vs.
   a tall cropped thumbnail, for example) rendered at different heights and
   made the grid look uneven. A fixed-height, object-fit:cover box makes
   every card the same size regardless of the source image's shape. Applies
   sitewide (was previously only duplicated inline on index.php, which is
   why other pages using the same card component were unaffected). ---- */
.package-wrapper .image-area {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  display: block;
}
.package-wrapper .image-area .hover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 991px) {
  .package-wrapper .image-area {
    height: 240px;
  }
}
@media (max-width: 575px) {
  .package-wrapper .image-area {
    height: 220px;
  }
}

/* ---- Homepage hero banner: the theme's default 800px height reads as
   oversized on this page; scaled down (padding scaled proportionally). The
   mobile "height: auto" override further down the theme's own CSS still
   wins under 991px since it's unaffected here. ---- */
@media (min-width: 992px) {
  .rts-banner-area-three .rts-hero-banner {
    height: 620px;
    padding: 140px 0;
  }
}

/* ---- Desktop header: stop the nav wrapping onto a second line ---- */
.header-style-two.home-yacht-bg .header-style-one-wrapper {
  flex-wrap: nowrap;
}
.header-style-two.home-yacht-bg .header-style-one-wrapper .left-area {
  flex: 1 1 auto;
  flex-basis: auto;
  min-width: 0;
  gap: 15px;
}
.header-style-two.home-yacht-bg .logo-area img {
  height: 46px !important;
  width: auto !important;
}
.header-style-two.home-yacht-bg .main-nav-area {
  margin-left: 20px;
  min-width: 0;
  flex: 1 1 auto;
}
.header-style-two.home-yacht-bg .main-nav-area ul.rts-desktop-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.header-style-two.home-yacht-bg .main-nav-area ul.rts-desktop-menu .menu-item {
  flex-shrink: 0;
}
.header-style-two.home-yacht-bg .main-nav-area ul.rts-desktop-menu .menu-item .rts-dropdown-main-element {
  padding: 35px 12px;
  font-size: 15px;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .header-style-two.home-yacht-bg .main-nav-area ul.rts-desktop-menu .menu-item .rts-dropdown-main-element {
    padding: 35px 7px;
    font-size: 13px;
  }
}

/* ---- Hamburger button: black icon lines (menu.php) on a light button
   background -- the button previously relied on var(--color-primary) for
   its background, which used to be blue and is now black (see the blue->
   black palette rework below), so a black icon would be invisible on it
   without this override. Opens into the white bottom-sheet drawer below,
   so a light button here is also the more consistent pairing. ---- */
.header-style-one-wrapper .button-area-start .menu-btn {
  background: #fff;
  border: 1px solid #e2e2e2;
}

/* ---- Mobile hamburger menu: white bottom sheet instead of a dark side panel ---- */
#side-bar.side-bar {
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 88vh;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0;
  padding: 14px 24px 30px;
  transform: translateY(100%);
  transition: transform 500ms ease;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}
#side-bar.side-bar.show {
  transform: translateY(0);
  overflow-y: auto;
}

#side-bar .drawer-handle {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: #d8d8d8;
  margin: 0 auto 18px;
}

#side-bar .close-icon-menu {
  position: absolute;
  top: 16px;
  left: 20px;
  right: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1a1d20;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#side-bar .close-icon-menu i {
  font-size: 16px;
}

#side-bar .mobile-menu-main .logo-area img {
  height: 42px;
  width: auto;
}

#side-bar .mobile-menu-main nav ul li a.main {
  color: #1f1f25;
}

/* ---- Mobile drawer follow-us row: only Instagram + Share now, centered
   to line up with the centered logo above it. ---- */
#side-bar .mobile-menu-main .follow-us {
  text-align: center;
}
#side-bar .mobile-menu-main .follow-us ul {
  justify-content: center;
}

#side-bar.side-bar.header-eight {
  background: #ffffff !important;
}
#side-bar.side-bar.header-eight .mobile-menu-main nav ul li.has-droupdown::after {
  color: #1f1f25;
}

/* ---- VIP Transfer routes (vip-transfer.php): styled with the theme's own
   CSS custom properties so it inherits this page's real palette/typography
   instead of hardcoded colors -- a native section, not a bolted-on widget. ---- */
.rts-route-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 30px 35px;
  height: 100%;
  transition: all 0.3s;
}
.rts-route-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}
.rts-route-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}
.rts-route-point {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-heading-1);
  font-weight: 600;
  font-family: var(--font-primary);
}
.rts-route-point i {
  color: var(--color-primary);
}
.rts-route-arrow {
  color: var(--color-primary);
  opacity: 0.6;
}
.rts-route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rts-route-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-primary);
}
.rts-route-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rn-route-reserve-btn {
  width: auto !important;
  border: none;
  cursor: pointer;
}

/* ---- Tour detail page (tour-detail.php): native panels instead of raw
   Bootstrap cards, brand black/gold palette (Schwarz Horse = "black horse"). ---- */
:root {
  --sh-gold: #b08d4b;
  --sh-gold-light: #c39b57;
  --sh-dark: #1a1d20;
}

.tour-detail-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.tour-detail-hero img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.tour-detail-hero .tour-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--sh-gold);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tour-detail-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--sh-dark);
  margin-bottom: 8px;
  font-family: var(--font-primary);
}
.tour-detail-meta {
  color: var(--color-body-1);
  font-weight: 600;
  margin-bottom: 0;
}

.tour-detail-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 34px;
  margin-bottom: 24px;
}
.tour-detail-panel h2, .tour-detail-panel h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--sh-dark);
  margin-bottom: 16px;
}
.tour-detail-panel p {
  color: var(--sh-dark);
}
.tour-detail-panel hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 28px 0;
}

.tour-itinerary-step {
  display: flex;
  gap: 16px;
}
.tour-itinerary-step .step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sh-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.tour-itinerary-step .step-time {
  color: var(--sh-gold);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.tour-itinerary-step .step-title {
  color: var(--sh-dark);
  font-weight: 600;
  margin-bottom: 2px;
}
.tour-itinerary-step .step-desc {
  color: var(--color-body-1);
  font-size: 14px;
}

.tour-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tour-service-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--sh-dark);
}
.tour-service-list li i {
  color: var(--sh-gold);
  margin-top: 3px;
}
.tour-service-list.excluded li i {
  color: #c0392b;
}
.tour-service-list.excluded li {
  color: var(--color-body-1);
}

.tour-price-card {
  background: var(--sh-dark);
  color: #fff;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  position: sticky;
  top: 20px;
}
.tour-price-card .price-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sh-gold);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 10px;
}
.tour-price-card .price-value {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tour-price-card .price-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin-bottom: 26px;
}
.tour-price-card .rn-btn {
  display: block;
  width: 100%;
  padding: 17px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.tour-price-card .rn-btn-primary {
  background: linear-gradient(135deg, #cba468, var(--sh-gold) 55%, #93712f);
  color: #fff;
  box-shadow: 0 12px 26px rgba(176, 141, 75, 0.4);
}
.tour-price-card .rn-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(176, 141, 75, 0.5);
  color: #fff;
}
.tour-price-card .rn-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 12px;
}
.tour-price-card .rn-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-2px);
}
.tour-price-card .price-footnote {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---- Left-edge dock: premium circular "Reserve" + "Live Chat" icon
   buttons, pinned to the left edge, vertically centered, with a hover
   tooltip carrying the label instead of cramped in-button text. Explicit
   width/height on every dimension below is intentional -- the theme's own
   global button reset elsewhere forces width:100%, which without this
   override stretched these into full-viewport-wide bars. ---- */
.rn-left-dock {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rn-reserve-tab,
.rn-chat-btn {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rn-reserve-tab:hover,
.rn-chat-btn:hover {
  transform: translateY(-2px) scale(1.06);
}

/* Shared hover tooltip: the label lives in data-label, not inner text --
   keeps the button a clean icon-only circle until the visitor reaches for
   it, which reads as more premium than permanent cramped vertical text. */
.rn-reserve-tab::after,
.rn-chat-btn::after {
  content: attr(data-label);
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--sh-dark);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.rn-reserve-tab:hover::after,
.rn-chat-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rn-reserve-tab {
  background: linear-gradient(145deg, #cba468, var(--sh-gold) 55%, #93712f);
  color: #fff;
  box-shadow: 0 10px 26px rgba(176, 141, 75, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.rn-reserve-tab:hover {
  box-shadow: 0 14px 32px rgba(176, 141, 75, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rn-reserve-tab i {
  font-size: 20px;
}
.rn-reserve-tab span {
  display: none;
}

.rn-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
  z-index: 2000;
}
.rn-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.rn-drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  z-index: 2001;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
}
.rn-drawer-panel.is-open {
  transform: translateX(0);
}

.rn-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--sh-dark);
  color: #fff;
  flex-shrink: 0;
}
.rn-drawer-top h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.rn-drawer-close {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
}
.rn-drawer-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.rn-drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.rn-drawer-body label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-body-1);
  margin: 16px 0 6px;
}
.rn-drawer-body label:first-child {
  margin-top: 0;
}
.rn-drawer-body input,
.rn-drawer-body select,
.rn-drawer-body textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font-size: 14px;
  color: var(--sh-dark);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rn-drawer-body input:focus,
.rn-drawer-body select:focus,
.rn-drawer-body textarea:focus {
  outline: none;
  border-color: var(--sh-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 75, 0.15);
}
.rn-drawer-row {
  display: flex;
  gap: 12px;
}
.rn-drawer-row > div {
  flex: 1;
}
.rn-vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rn-vehicle-card {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rn-vehicle-card b {
  display: block;
  color: var(--sh-dark);
  font-size: 14px;
}
.rn-vehicle-card span {
  font-size: 12px;
  color: var(--color-body-1);
}
.rn-vehicle-card.is-selected {
  border-color: var(--sh-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 75, 0.15);
}
.rn-empty {
  font-size: 13px;
  color: var(--color-body-1);
  margin: 0;
}
.rn-price-box {
  margin-top: 16px;
  padding: 14px;
  background: #f7f4ee;
  border-radius: 10px;
  font-size: 14px;
  color: var(--sh-dark);
}
.rn-price-box strong {
  color: var(--sh-gold);
}
.rn-msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}
.rn-msg.ok {
  background: #e6f6ec;
  color: #1e6b3a;
}
.rn-msg.err {
  background: #fdecea;
  color: #a02622;
}
.rn-drawer-submit {
  margin-top: 22px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #cba468, var(--sh-gold) 55%, #93712f);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(176, 141, 75, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rn-drawer-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(176, 141, 75, 0.45);
}
.rn-drawer-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.rn-drawer-success {
  text-align: center;
  padding: 40px 10px;
}
.rn-drawer-success i {
  font-size: 48px;
  color: #2ecc71;
  margin-bottom: 16px;
  display: block;
}
.rn-drawer-success h4 {
  color: var(--sh-dark);
  margin-bottom: 10px;
}
.rn-drawer-success p {
  color: var(--color-body-1);
  font-size: 14px;
}
.rn-website-field {
  position: absolute;
  left: -9999px;
}

/* ---- Live chat icon: bottom-left, fixed independently of .rn-left-dock,
   mirroring the theme's own scroll-to-top button (.progress-wrap, bottom:
   30px/right:30px) on the opposite side of the screen -- connected to the
   rentacar.epix.tr guest chat engine (same backend the company's widget
   uses, but rendered here with this site's own markup/CSS, no injected
   widget). ---- */
.rn-chat-btn {
  position: fixed !important;
  right: 30px;
  bottom: 92px;
  background: linear-gradient(145deg, #34383d, var(--sh-dark) 60%, #050505);
  color: #fff;
  font-size: 20px;
  z-index: 1500;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.rn-chat-btn::after {
  left: auto !important;
  right: 68px !important;
  transform: translateY(-50%) translateX(6px) !important;
}
.rn-chat-btn:hover::after {
  transform: translateY(-50%) translateX(0) !important;
}
.rn-chat-btn:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.rn-chat-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(176, 141, 75, 0.55);
  opacity: 0;
  animation: rn-pulse-ring 2.6s ease-out infinite;
}
@keyframes rn-pulse-ring {
  0% { opacity: 0.55; transform: scale(0.92); }
  70% { opacity: 0; transform: scale(1.28); }
  100% { opacity: 0; transform: scale(1.28); }
}
.rn-chat-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--sh-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.rn-chat-panel {
  position: fixed;
  right: 30px;
  bottom: 158px;
  width: min(360px, calc(100vw - 60px));
  height: min(480px, calc(100vh - 140px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  z-index: 1999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rn-chat-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
.rn-chat-header {
  background: var(--sh-dark);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.rn-chat-close {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
}
.rn-chat-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.rn-chat-start {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.rn-chat-start p {
  margin: 0 0 4px;
  font-size: 13px;
  color: #666;
}
.rn-chat-start input,
.rn-chat-start textarea {
  padding: 10px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rn-chat-start input:focus,
.rn-chat-start textarea:focus {
  outline: none;
  border-color: var(--sh-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 75, 0.15);
}
.rn-chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rn-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rn-chat-row {
  display: flex;
}
.rn-chat-row.customer {
  justify-content: flex-end;
}
.rn-chat-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
}
.rn-chat-row.customer .rn-chat-bubble {
  background: var(--sh-gold);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.rn-chat-row.company .rn-chat-bubble {
  background: #f0f1f3;
  color: #222;
  border-bottom-left-radius: 4px;
}
.rn-chat-bubble time {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.7;
}
.rn-chat-send {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}
.rn-chat-send input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rn-chat-send input:focus {
  outline: none;
  border-color: var(--sh-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 75, 0.15);
}
.rn-chat-send button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #cba468, var(--sh-gold) 55%, #93712f);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.rn-chat-send button:hover {
  transform: scale(1.08);
}

@media (max-width: 767px) {
  .rn-left-dock { left: 12px; gap: 12px; }
  .rn-reserve-tab,
  .rn-chat-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
  }
  .rn-reserve-tab i, .rn-chat-btn i { font-size: 18px; }
  .rn-reserve-tab::after, .rn-chat-btn::after { display: none; }
  .rn-chat-panel { left: auto; right: 12px; bottom: 152px; width: min(320px, calc(100vw - 24px)); }
}