/* ==========================================================================
   Oceanic Manor — additions on top of the theme stylesheet.
   Everything here is namespaced .om-* so the theme keeps working untouched.
   Palette is the theme's own: #57bcca / #219eaf / #4a4a4a.
   ========================================================================== */

:root {
  --om-teal:      #57bcca;
  --om-teal-dark: #219eaf;
  --om-ink:       #4a4a4a;
  --om-ink-soft:  #585858;
  --om-wash:      #eaf5f7;
  --om-line:      #e3e3e3;
  --om-sand:      #f5f5f5;
}

/* --------------------------------------------------------------------------
   1. Top bar — sits inside the fixed navbar, above the logo row
   -------------------------------------------------------------------------- */

.om-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 38px;
  padding: 0 5px;
  border-bottom: 1px solid var(--om-line);
  font-size: 13px;
  color: var(--om-ink-soft);
  background-color: #fff;
}

.om-topbar__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  min-width: 0;
}

.om-topbar__contact a {
  color: var(--om-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.om-topbar__contact a:hover,
.om-topbar__contact a:focus {
  color: var(--om-teal-dark);
  text-decoration: none;
}

.om-topbar__contact .fa {
  color: var(--om-teal);
  margin-right: 4px;
}

.om-badge {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--om-teal);
  border-radius: 3px;
  color: var(--om-teal-dark);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.om-topbar__book {
  flex: none;
  padding: 5px 16px;
  border-radius: 3px;
  background-color: var(--om-teal);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.om-topbar__book:hover,
.om-topbar__book:focus {
  background-color: var(--om-teal-dark);
  color: #fff;
  text-decoration: none;
}

/* The navbar is 38px taller now, so the theme's collapsed menu needs room. */
.top-navbar .navbar-collapse {
  max-height: calc(100vh - 160px);
}

/* --------------------------------------------------------------------------
   2. Keyvisual — inner pages, in place of the home slider
   -------------------------------------------------------------------------- */

.om-kv {
  position: relative;
  margin-top: 138px;          /* clears the fixed top bar + navbar */
  height: 340px;
  overflow: hidden;
  background-color: #dfe9ec;
}

.om-kv picture,
.om-kv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.om-kv__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 46, 52, 0.18) 0%, rgba(23, 46, 52, 0.72) 100%);
}

.om-kv__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
}

.om-kv__text h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 42px;
  font-weight: 300;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.om-kv__text p {
  margin: 0;
  color: #e7f4f6;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Sections, headings, prose
   -------------------------------------------------------------------------- */

.om-section {
  padding: 68px 0 62px;
}

.om-section--wash  { background-color: var(--om-wash); }
.om-section--sand  { background-color: var(--om-sand); }
.om-section--tight { padding: 46px 0 44px; }

.om-section h2 {
  margin: 0 0 26px;
  color: var(--om-ink);
  font-size: 36px;
  font-weight: 300;
}

.om-section h3 {
  margin: 0 0 14px;
  color: var(--om-ink);
  font-size: 21px;
  font-weight: 400;
}

.om-num {
  display: block;
  margin-bottom: 8px;
  color: var(--om-teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
}

.om-lead {
  font-size: 17px;
  line-height: 1.72;
  color: var(--om-ink-soft);
}

.om-prose p       { line-height: 1.78; }
.om-prose ul      { padding-left: 20px; line-height: 1.78; }
.om-prose li      { margin-bottom: 7px; }
.om-prose h3      { margin-top: 30px; }
.om-prose h2      { margin-top: 38px; font-size: 27px; font-weight: 300; color: var(--om-ink); }
.om-prose h2:first-child { margin-top: 0; }

.om-rule {
  height: 4px;
  width: 62px;
  margin: 0 0 26px;
  background-color: var(--om-teal);
  border: 0;
}

.om-figure {
  margin: 0 0 22px;
}

.om-figure img {
  width: 100%;
  border-radius: 3px;
}

.om-figure figcaption {
  padding-top: 9px;
  color: #8b8b8b;
  font-size: 13px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. Cards — feature grid, rooms, packages, gaming
   -------------------------------------------------------------------------- */

.om-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 30px;
  background-color: #fff;
  border: 1px solid var(--om-line);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.om-card:hover {
  box-shadow: 0 10px 26px rgba(33, 158, 175, 0.16);
  transform: translateY(-3px);
}

.om-card__media {
  display: block;
  height: 196px;
  overflow: hidden;
  background-color: var(--om-wash);
}

.om-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.om-card:hover .om-card__media img { transform: scale(1.04); }

/* om_pic() emits a <figure>; inside a card it must simply fill the box. */
.om-media-fig,
.om-media-fig picture {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}

.om-media-fig img { border-radius: 0; }

.om-card__body {
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.om-card__body h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 400;
  color: var(--om-ink);
}

.om-card__body p {
  margin: 0 0 12px;
  color: var(--om-ink-soft);
  line-height: 1.7;
}

.om-card__kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--om-teal-dark);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.om-card__foot {
  padding: 0 22px 20px;
}

.om-card__price {
  color: var(--om-ink);
  font-size: 15px;
}

.om-card__price strong {
  color: var(--om-teal-dark);
  font-size: 19px;
}

.om-card__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 50%;
  background-color: var(--om-wash);
  color: var(--om-teal-dark);
  font-size: 23px;
  line-height: 54px;
  text-align: center;
}

/* Specs list inside a room card */
.om-specs {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--om-line);
}

.om-specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--om-line);
  font-size: 14px;
  color: var(--om-ink-soft);
}

.om-specs li span:first-child {
  color: #8b8b8b;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 1px;
  padding-top: 2px;
}

.om-specs li span:last-child {
  text-align: right;
  color: var(--om-ink);
}

.om-ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.om-ticks li {
  position: relative;
  padding: 0 0 7px 24px;
  color: var(--om-ink-soft);
  line-height: 1.6;
}

.om-ticks li:before {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--om-teal);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   5. Split blocks — image beside text
   -------------------------------------------------------------------------- */

.om-split {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 42px;
  margin-bottom: 54px;
}

.om-split:last-child { margin-bottom: 0; }

.om-split__media,
.om-split__text {
  flex: 1 1 320px;
  min-width: 0;
}

.om-split__media img {
  width: 100%;
  border-radius: 3px;
}

.om-split--flip .om-split__media { order: 2; }

/* --------------------------------------------------------------------------
   6. Statistics — reuses the theme's .counter animation hooks
   -------------------------------------------------------------------------- */

.om-stats {
  padding: 56px 0 46px;
  background-color: var(--om-teal-dark);
  color: #fff;
}

.om-stats .om-stat {
  margin-bottom: 14px;
  text-align: center;
}

.om-stats .counter-number,
.om-stats .om-stat__num {
  display: block;
  font-size: 42px;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
}

.om-stats .om-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #d3eef2;
}

/* --------------------------------------------------------------------------
   7. Host responsibility notice
   -------------------------------------------------------------------------- */

.om-care {
  padding: 26px 28px;
  border-left: 4px solid var(--om-teal);
  background-color: var(--om-wash);
  border-radius: 3px;
}

.om-care h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--om-ink);
}

.om-care p { line-height: 1.75; }
.om-care p:last-child { margin-bottom: 0; }

.om-help {
  margin: 0;
  padding: 0;
  list-style: none;
}

.om-help li {
  padding: 6px 0;
  border-bottom: 1px dotted #bcd9de;
}

.om-help li:last-child { border-bottom: 0; }

.om-help strong { color: var(--om-ink); }

.om-help a {
  color: var(--om-teal-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Practical strip + footer
   -------------------------------------------------------------------------- */

.om-strip {
  padding: 26px 0 20px;
  background-color: var(--om-sand);
  border-top: 1px solid var(--om-line);
  border-bottom: 1px solid var(--om-line);
  font-size: 14px;
  color: var(--om-ink-soft);
}

.om-strip .om-strip__k {
  display: block;
  margin-bottom: 3px;
  color: var(--om-teal-dark);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.om-strip [class*="col-"] { margin-bottom: 8px; }

.om-foot {
  padding: 16px 0 8px;
}

.om-foot h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.om-foot ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.om-foot li { padding: 4px 0; }

.om-foot a,
.om-foot p {
  color: #cfd6d8;
  line-height: 1.75;
}

.om-foot a:hover,
.om-foot a:focus {
  color: var(--om-teal);
  text-decoration: none;
}

.om-foot__legal {
  margin-top: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #a9b3b6;
  font-size: 12.5px;
  line-height: 1.78;
}

.om-foot__legal a { color: var(--om-teal); }

.om-foot__legal .footer-copyright {
  margin: 10px 0 0;
  color: #8e989b;
}

/* The theme's footer is light by default; the manor's is dark. */
.footer {
  background-color: #2c3b40;
  padding: 34px 0 26px;
}

/* --------------------------------------------------------------------------
   9. Enquiry form
   -------------------------------------------------------------------------- */

.om-form label {
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--om-ink);
  font-weight: 600;
}

.om-form .om-optional {
  text-transform: none;
  font-weight: 400;
  color: #8b8b8b;
}

.om-form .form-control {
  height: auto;
  padding: 10px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: none;
}

.om-form .form-control:focus {
  border-color: var(--om-teal);
  box-shadow: 0 0 0 3px rgba(87, 188, 202, 0.16);
}

.om-form textarea.form-control { min-height: 128px; }

.om-form__check {
  position: relative;
  padding: 0 0 12px 27px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--om-ink-soft);
}

.om-form__check input {
  position: absolute;
  left: 0;
  top: 4px;
  margin: 0;
}

.om-form__check label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--om-ink-soft);
}

.om-form__check a { color: var(--om-teal-dark); }

/* Honeypot — off screen, never shown, never announced */
.om-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.om-msg { line-height: 1.7; }
.om-msg a { font-weight: 600; }

.contact-form-info {
  color: #8b8b8b;
  font-size: 13px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   10. Age gate — Gambling Act 2003
   -------------------------------------------------------------------------- */

.om-gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background-color: rgba(20, 38, 43, 0.94);
  overflow-y: auto;
}

.om-gate[hidden] { display: none; }

.om-gate__box {
  width: 100%;
  max-width: 560px;
  padding: 38px 34px 30px;
  background-color: #fff;
  border-top: 5px solid var(--om-teal);
  border-radius: 3px;
  text-align: center;
}

.om-gate__box[hidden] { display: none; }

.om-gate__mark {
  margin-bottom: 20px;
  color: var(--om-teal-dark);
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.om-gate__box h2 {
  margin: 0 0 16px;
  color: var(--om-ink);
  font-size: 27px;
  font-weight: 300;
  line-height: 1.3;
}

.om-gate__box p {
  margin: 0 0 22px;
  color: var(--om-ink-soft);
  line-height: 1.72;
}

.om-gate__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.om-gate__fine {
  margin: 22px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--om-line);
  color: #8b8b8b !important;
  font-size: 13px;
}

.om-btn--ghost {
  background-color: #fff;
  border: 1px solid #cfcfcf !important;
  color: var(--om-ink-soft);
}

.om-btn--ghost:hover,
.om-btn--ghost:focus {
  border-color: var(--om-teal) !important;
  color: var(--om-teal-dark);
}

.om-btn--link {
  background: none;
  color: var(--om-ink-soft);
  text-decoration: underline;
}

.om-btn--link:hover,
.om-btn--link:focus { color: var(--om-teal-dark); }

/* --------------------------------------------------------------------------
   11. Cookie banner
   -------------------------------------------------------------------------- */

.om-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  background-color: #fff;
  border-top: 4px solid var(--om-teal);
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
  font-size: 14px;
  color: var(--om-ink-soft);
  line-height: 1.65;
}

.om-cookie[hidden] { display: none; }

.om-cookie__text { flex: 1 1 340px; }
.om-cookie__text a { color: var(--om-teal-dark); }

.om-cookie__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: none;
}

.om-cookie__buttons .btn { padding: 9px 17px; font-size: 14px; }

.om-cookie__settings {
  flex: 1 1 100%;
  padding-top: 16px;
  border-top: 1px solid var(--om-line);
}

.om-cookie__settings[hidden] { display: none; }

.om-cookie__opt {
  display: block;
  position: relative;
  margin: 0 0 11px;
  padding-left: 26px;
  font-weight: 400;
}

.om-cookie__opt input {
  position: absolute;
  left: 0;
  top: 4px;
  margin: 0;
}

.om-cookie__opt strong { color: var(--om-ink); }

/* --------------------------------------------------------------------------
   12. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .om-kv { margin-top: 138px; height: 300px; }
}

@media (max-width: 991px) {
  .om-topbar__mail { display: none; }
  .om-section h2 { font-size: 30px; }
  .om-kv__text h1 { font-size: 34px; }
  .om-split { gap: 0 26px; }
}

@media (max-width: 767px) {
  .om-topbar {
    height: auto;
    padding: 8px 5px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
  }
  .om-badge { font-size: 10.5px; }
  .om-kv {
    margin-top: 118px;
    height: 240px;
  }
  .om-kv__text { bottom: 22px; }
  .om-kv__text h1 { font-size: 26px; }
  .om-kv__text p { font-size: 13px; }
  .om-section { padding: 44px 0 40px; }
  .om-section h2 { font-size: 25px; }
  .om-split__media,
  .om-split__text { flex: 1 1 100%; }
  .om-split--flip .om-split__media { order: 0; }
  .om-split { margin-bottom: 36px; }
  .om-split__media { margin-bottom: 20px; }
  .om-stats .counter-number,
  .om-stats .om-stat__num { font-size: 33px; }
  .om-gate__box { padding: 28px 22px 24px; }
  .om-gate__box h2 { font-size: 22px; }
  .om-gate__row .btn { width: 100%; }
  .om-cookie { padding: 16px 18px; left: 8px; right: 8px; bottom: 8px; }
  .om-cookie__buttons { width: 100%; }
  .om-cookie__buttons .btn { flex: 1 1 auto; }
}