/* Rent A Cart Destin theme for the booking app (loaded only on customer pages when THEME_DIR points here).
   Mirrors www.rentacartdestin.com: teal #08bbcc, Open Sans body, Josefin Sans headings, beach hero with blue overlay. */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --sea: #08bbcc; --sea-dark: #07a6b5; --deep: #138a9a; --link: #0a9fae; --mist: #f5f6f7;
  --ink: #333; --muted: #666; --line: #e2e6e9; --head: "Josefin Sans", Helvetica, Arial, sans-serif;
  --serif: var(--head);
}
html { overflow-x: hidden; }
body { font-family: "Open Sans", Arial, sans-serif; font-weight: 500; color: #555; background: #fff; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; color: #333; letter-spacing: 0; }
a { color: var(--link); }

/* Buttons: flat teal, white text, 3px corners */
.btn { background: var(--sea); color: #fff; border: 2px solid transparent; border-radius: 3px; box-shadow: none;
       font: 700 1.05rem/1.3 var(--head); letter-spacing: .04em; text-transform: uppercase; padding: 13px 26px 11px; transition: background .3s, opacity .3s; }
.btn:hover { background: var(--sea-dark); color: #fff; }
.btn.ghost { background: #fff; color: #333; border: 1px solid #c9d0d4; font: 600 .95rem/1.3 "Open Sans", sans-serif; text-transform: none; }
.btn.ghost:hover { background: var(--mist); }
.btn.danger { background: #e9b9a8; color: #333; }

/* ---------- Top bar ---------- */
.rac-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.rac-top { background: #08bbcc; color: #fff; font: 600 12px/1 "Open Sans", Arial, sans-serif; }
.rac-top .rac-in { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 12px; }
.rac-top a { color: #fff; text-decoration: none; }
.rac-top a:hover { opacity: .75; }
.rac-top-left { display: flex; align-items: center; gap: 22px; }
.rac-phone { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Main header: menu split around a centered round logo ---------- */
.rac-head { background: #fff; position: relative; z-index: 30; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.rac-head .rac-in { position: relative; min-height: 76px; display: flex; align-items: center; }
.rac-logo { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 2; line-height: 0; }
.rac-logo img { width: auto; height: 96px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.rac-menu { flex: 1; display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; }
.rac-menu ul { list-style: none; margin: 0; padding: 0; }
.rac-left, .rac-right { display: flex; gap: 26px; }
.rac-left { grid-column: 1; justify-content: flex-end; }
.rac-right { grid-column: 3; justify-content: flex-start; }
.rac-menu > ul > li { position: relative; }
.rac-menu a { color: #08bbcc; font: 600 17px/1 "Open Sans", Arial, sans-serif; text-decoration: none; display: block; padding: 30px 0; transition: opacity .4s; }
.rac-menu a:hover { opacity: .7; }
.rac-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border: solid currentColor;
                      border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rac-sub ul { position: absolute; top: 100%; left: -20px; min-width: 230px; background: #fff; border-top: 3px solid #2ea3f2;
              box-shadow: 0 2px 5px rgba(0,0,0,.1); padding: 16px 0; opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 40; }
.rac-sub:hover ul, .rac-sub:focus-within ul { opacity: 1; visibility: visible; }
.rac-sub ul a { color: #666; font-size: 14px; padding: 7px 20px; }
.rac-burger { display: none; }

@media (max-width: 980px) {
  .rac-top-right { display: none; }
  .rac-head .rac-in { position: static; min-height: 72px; justify-content: space-between; }
  .rac-logo { position: static; transform: none; }
  .rac-logo img { height: 60px; filter: none; }
  .rac-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px;
                border: 0; background: none; cursor: pointer; }
  .rac-burger span { display: block; height: 3px; background: #08bbcc; border-radius: 2px; }
  .rac-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 3px solid #2ea3f2;
              box-shadow: 0 6px 12px rgba(0,0,0,.12); padding: 0 20px 10px; }
  .rac-head.open .rac-menu { display: block; }
  .rac-left, .rac-right { display: block; }
  .rac-menu a { padding: 12px 4px; font-size: 15px; color: #666; border-bottom: 1px solid rgba(0,0,0,.05); }
  .rac-menu a.on { color: #08bbcc; }
  .rac-sub > a::after { display: none; }
  .rac-sub ul { position: static; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 16px; min-width: 0; }
  .rac-sub ul a { font-size: 14px; padding: 10px 4px; }
}
@media (max-width: 420px) { .rac-top-left { gap: 12px; } .rac-tag { font-weight: 500; } }

/* ---------- Hero: their beach photo with the blue overlay, behind the booking intro ---------- */
main.wrap { max-width: 1000px; padding-top: 36px; }
.intro { position: relative; z-index: 0; display: block; margin-top: -36px; padding: 78px 0 104px; color: #fff; }
.intro::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(118deg, rgba(6,54,97,.51) 0%, rgba(43,78,136,.67) 100%), url("hero.jpg") center 60% / cover no-repeat, #000; }
.intro::after { content: ""; position: absolute; z-index: -1; bottom: -1px; left: 50%; width: 100vw; height: 70px; transform: translateX(-50%);
  background: linear-gradient(to top left, #fff200 49.6%, transparent 50%); }
.intro .intro-text { max-width: 640px; }
.intro .intro-text::before { content: ""; display: block; width: 100%; max-width: 500px; height: 1px; background: #7ebec5; margin-bottom: 30px; }
.intro h1 { color: #fff; font-size: 3.1rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.intro-text p { color: #fff; font-size: 1.05rem; max-width: 52ch; }
.intro-phone { color: #fff !important; }
.intro-phone a { color: #fff !important; }
.intro-photo { display: none; }
@media (max-width: 720px) {
  .intro { padding: 44px 0 70px; }
  .intro::after { height: 40px; }
  .intro h1 { font-size: 2.1rem; }
  .intro .intro-text::before { margin-bottom: 18px; }
}

/* ---------- Booking form ---------- */
#bookform .card h2 { font-size: 1.45rem; padding-top: 3px; }
#bookform .card h2::before { background: #08bbcc; font-family: "Open Sans", sans-serif; padding-top: 0; }
#bookform .card.review { background: var(--mist); }
.type.selected { border-color: #08bbcc; box-shadow: 0 0 0 3px rgba(8,187,204,.18); }
.type .name { font-family: var(--head); font-size: 1.05rem; text-transform: uppercase; color: #333; }
.tipbtn.on { border-color: #08bbcc; color: var(--deep); }
label { color: #333; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  border-color: #cdd5da; border-radius: 3px; color: #333; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline-color: #08bbcc; border-color: #08bbcc; }

/* ---------- Footer ---------- */
.rac-foot { font-family: "Open Sans", Arial, sans-serif; }
.rac-contact { background: #08bbcc url("footer-bg.png") center / cover no-repeat; color: #fff; text-align: center; padding: 46px 0 40px; }
.rac-contact h2 { color: #fff; font-size: 1.9rem; margin: 0 0 14px; }
.rac-contact ul { list-style: none; margin: 0; padding: 0; font: 600 1.15rem/1.8 var(--head); }
.rac-contact a { color: #fff; text-decoration: none; }
.rac-bottom { background: #222; color: #666; font-size: 13px; padding: 16px 0 14px; text-align: center; }
.rac-bottom a { color: #666; font-weight: 700; text-decoration: none; }
.rac-bottom a:hover { color: #999; }
@media (max-width: 720px) {
  .rac-contact h2 { font-size: 1.5rem; }
  .rac-contact ul { font-size: 1rem; }
  body:has(#stickybar) .rac-bottom { padding-bottom: 92px; }   /* keep the copyright clear of the booking page's sticky total bar */
}