/* Atlantis Backpackers. One stylesheet, no framework. Works without JavaScript and degrades on old browsers:
   every rule that uses a newer feature has a plain fallback before it. Palette from the original site
   (#3FACFA sky, #1395F2 bright, #1D405C navy, #1e1e1e); text uses the darker text-safe blues. */

@font-face {
  font-family: 'Cinzel';
  font-weight: 600 700;
  font-display: swap;
  src: url('/s/fonts/cinzel-latin-700-normal.woff2') format('woff2'), url('/s/fonts/cinzel-latin-700-normal.woff') format('woff');
}

:root {
  --navy: #1d405c;
  --sea: #0a5e99;
  --link: #0f6fb0;
  --bright: #1395f2;
  --sky: #3facfa;
  --sky-soft: #e9f5fd;
  --paper: #fbf6e9;
  --sand: #f6efdc;
  --gold: #f2c14e;
  --ink: #1e1e1e;
  --muted: #4a5560;
  --line: #d9cfb6;
  --ok: #1e6b3a;
  --ok-soft: #e3f3e8;
  --warn: #7a4b00;
  --warn-soft: #fff1d1;
  --danger: #a1261b;
  --danger-soft: #fde6e3;
  --display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow: 4px 4px 0 #1d405c;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h10V3H4v4h3' fill='none' stroke='%231d405c' stroke-width='2'/%3E%3Cpath d='M12 1h10v8h-6V5h3' fill='none' stroke='%231d405c' stroke-width='2'/%3E%3Cpath d='M10 11h2M12 1v0M22 9v2h2M0 1h0' fill='none' stroke='%231d405c' stroke-width='2'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 8c15 0 15-6 30-6s15 6 30 6 15-6 30-6 15 6 30 6v8H0z' fill='%23e9f5fd'/%3E%3C/svg%3E");
  --scales: radial-gradient(circle at 50% 0, transparent 9px, rgba(255, 255, 255, 0.06) 10px, transparent 11px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --navy: #cfe6f7;
    --sea: #8fcaf5;
    --link: #8fcaf5;
    --sky-soft: #15324a;
    --paper: #0f2233;
    --sand: #152c40;
    --ink: #f3ecd9;
    --muted: #b5c2cc;
    --line: #2f4b63;
    --ok: #8fd9a8;
    --ok-soft: #133524;
    --warn: #f2c14e;
    --warn-soft: #3a2e10;
    --danger: #ffb3a8;
    --danger-soft: #3d1813;
    --shadow: 4px 4px 0 #000;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fbf6e9;
  background: var(--paper);
  color: #1e1e1e;
  color: var(--ink);
  font: 17px/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--sea); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--navy); line-height: 1.2; letter-spacing: 0.02em; margin: 0 0 0.5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
:focus { outline: 3px solid var(--bright); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: #fff; padding: 8px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.center { text-align: center; }

/* Greek key strip */
.meander { height: 12px; background: var(--meander) repeat-x; background-size: 24px 12px; opacity: 0.9; }

/* Header */
.top { background: #fff; border-bottom: 2px solid #1d405c; }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.brand { display: block; width: 150px; }
.brand img { width: 150px; height: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; }
.nav a { display: inline-block; padding: 10px 12px; min-height: 44px; color: #1d405c; font-weight: 600; text-decoration: none; }
.nav a:hover, .nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #f2c14e; }
.nav .btn { margin-left: 8px; }
.menu { display: none; }
@media (max-width: 760px) {
  .nav { display: none; }
  .menu { display: block; }
  .menu summary { list-style: none; cursor: pointer; padding: 10px 14px; min-height: 44px; border: 2px solid #1d405c; font-weight: 700; color: #1d405c; background: #fff; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .nav { display: block; width: 100%; padding: 8px 0; }
  .menu[open] .nav a { display: block; border-bottom: 1px solid #e6dcc2; }
  .menu[open] { width: 100%; }
  .menu[open] summary { display: inline-block; }
  .top .wrap { position: relative; }
}

.notice { background: #f2c14e; color: #1e1e1e; text-align: center; padding: 8px 16px; font-weight: 600; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 18px;
  min-height: 44px;
  border: 2px solid #1d405c;
  background: #1d405c;
  color: #fff;
  font: 700 1rem/1.4 var(--body);
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #f2c14e;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover { background: #0a5e99; color: #fff; }
.btn:active { box-shadow: 1px 1px 0 #f2c14e; transform: translate(2px, 2px); }
.btn.alt { background: #fff; color: #1d405c; box-shadow: 3px 3px 0 #1d405c; }
.btn.alt:hover { background: #e9f5fd; }
.btn.gold { background: #f2c14e; color: #1e1e1e; box-shadow: 3px 3px 0 #1d405c; }
.btn.danger { background: #a1261b; border-color: #a1261b; box-shadow: none; }
.btn.small { padding: 6px 12px; min-height: 36px; font-size: 0.9rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }

/* Hero */
.hero { position: relative; background: #1d405c; color: #fff; overflow: hidden; }
.hero picture img { width: 100%; height: 340px; object-fit: cover; opacity: 0.55; }
.hero .copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px 40px; }
.hero h1 { color: #fff; font-size: 2.4rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); margin-bottom: 0.2em; }
.hero p { font-size: 1.15rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); max-width: 34em; }
.hero .chips span { display: inline-block; background: rgba(255, 255, 255, 0.92); color: #1d405c; padding: 4px 10px; margin: 0 6px 6px 0; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }
.wave { height: 16px; background: var(--wave) repeat-x; background-size: 120px 16px; margin-top: -16px; position: relative; }
@media (max-width: 600px) {
  .hero picture img { height: 420px; }
  .hero h1 { font-size: 1.9rem; }
}

.stamp {
  display: inline-block;
  background: #f2c14e;
  color: #1e1e1e;
  border: 2px dashed #1d405c;
  padding: 8px 14px;
  font-weight: 800;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 #1d405c;
}

/* Quick search */
.search { background: #fff; border: 2px solid #1d405c; box-shadow: var(--shadow); padding: 16px; margin: -28px auto 24px; position: relative; max-width: 1068px; }
.search form { display: flex; flex-wrap: wrap; align-items: flex-end; }
.search .field { margin: 0 12px 8px 0; flex: 1 1 140px; }
.search .btn { margin-bottom: 8px; }

/* Sections */
.section { padding: 40px 0; }
.section.tint { background: #e9f5fd; background: var(--sky-soft); }
.section.sand { background: var(--sand); }
.section.deep { background: #1d405c; color: #fff; background-image: var(--scales); background-size: 20px 12px; }
.section.deep h2, .section.deep h3 { color: #fff; }
.section.deep a { color: #bfe3fd; }
.section h2 { text-align: center; }
.section h2::after { content: ''; display: block; width: 96px; height: 12px; margin: 10px auto 0; background: var(--meander) repeat-x; background-size: 24px 12px; }
.section.deep h2::after { -webkit-filter: invert(1); filter: invert(1); }
.lead { font-size: 1.1rem; max-width: 40em; margin: 0 auto 1.5em; text-align: center; }

/* Grids (flex fallback first, then grid) */
.grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.grid > * { flex: 1 1 280px; margin: 0 8px 16px; }
@supports (display: grid) {
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: 16px; gap: 16px; margin: 0; }
  .grid > * { margin: 0; }
  .grid.two { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.card { background: #fff; border: 2px solid #1d405c; border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; color: #1e1e1e; display: flex; flex-direction: column; }
.card .body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.card .body > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 0.3em; }
.card img { width: 100%; height: 200px; object-fit: cover; border-bottom: 2px solid #1d405c; }
.card .price { font-weight: 800; color: #1d405c; font-size: 1.15rem; }
.card .actions { margin-top: auto; padding-top: 12px; }
.tiles::before { content: ''; float: right; width: 16px; height: 16px; margin: -4px -4px 0 8px; background: linear-gradient(90deg, #3facfa 50%, #1d405c 50%) 0 0 / 16px 8px no-repeat, linear-gradient(90deg, #1d405c 50%, #f2c14e 50%) 0 8px / 16px 8px no-repeat; }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding-left: 26px; position: relative; margin-bottom: 4px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 18px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6c3-5 9-6 13 0-4 6-10 5-13 0zM14 6l3-4v8z' fill='%231395f2'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat; }
.cols { -webkit-columns: 2 260px; columns: 2 260px; -webkit-column-gap: 32px; column-gap: 32px; }

.features { text-align: center; }
.features .card .body { align-items: center; }
.features svg { width: 44px; height: 44px; margin-bottom: 8px; }

/* Photos as postcards */
.polaroid { background: #fff; padding: 8px 8px 12px; border: 1px solid var(--line); box-shadow: 2px 3px 0 rgba(29, 64, 92, 0.25); margin: 0; }
.polaroid figcaption { font-size: 0.9rem; color: #4a5560; padding-top: 6px; text-align: center; }
@media (min-width: 768px) {
  .gallery .polaroid:nth-child(3n + 1) { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); }
  .gallery .polaroid:nth-child(3n + 2) { -webkit-transform: rotate(1deg); transform: rotate(1deg); }
}
.gallery a { display: block; }
.gallery img { width: 100%; height: 220px; object-fit: cover; }

.split { display: flex; flex-wrap: wrap; align-items: center; margin-left: -16px; margin-right: -16px; }
.split > * { flex: 1 1 300px; min-width: 0; padding: 0 16px; margin-bottom: 16px; }
.wrap.split { margin-left: auto; margin-right: auto; padding: 0; }

.quote { font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; border-left: 4px solid #f2c14e; padding-left: 16px; }

/* Forms */
.field { margin-bottom: 14px; }
label, .label { display: block; font-weight: 700; margin-bottom: 4px; color: var(--navy); }
input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='date'], input[type='number'], input[type='time'], input[type='url'], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  color: #1e1e1e;
  background: #fff;
  border: 2px solid #1d405c;
  border-radius: 4px;
}
textarea { min-height: 120px; }
.check { display: flex; align-items: center; min-height: 44px; font-weight: 400; color: inherit; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0 12px 0 0; flex: none; }
.hint { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }
.form { max-width: 520px; }
.form.wide { max-width: 760px; }
.panel { background: #fff; color: #1e1e1e; border: 2px solid #1d405c; border-radius: 4px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 24px; }
.hp { position: absolute; left: -9999px; }
fieldset { border: 2px solid var(--line); border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; }
legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row > * { flex: 1 1 160px; margin: 0 6px; }

.alert { padding: 12px 16px; border: 2px solid; border-radius: 4px; margin: 0 0 16px; }
.alert.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.alert.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert.info { background: var(--sky-soft); border-color: var(--sea); color: var(--navy); }
.alert.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; background: #fff; color: #1e1e1e; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6dcc2; vertical-align: top; }
th { background: #1d405c; color: #fff; font-weight: 700; white-space: nowrap; }
tr:nth-child(even) td { background: #fbf8ef; }
.num { text-align: right; white-space: nowrap; }
dl.facts { display: flex; flex-wrap: wrap; margin: 0 0 16px; }
dl.facts dt { flex: 0 0 40%; font-weight: 700; color: var(--navy); padding: 4px 0; }
dl.facts dd { flex: 0 0 60%; margin: 0; padding: 4px 0; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; border: 1px solid; white-space: nowrap; }
.badge::before { content: '● '; }
.b-pending, .b-unpaid, .b-partial { background: #fff1d1; color: #7a4b00; }
.b-confirmed, .b-paid { background: #e3f3e8; color: #1e6b3a; }
.b-checked_in { background: #e9f5fd; color: #0a5e99; }
.b-checked_out { background: #eee; color: #444; }
.b-cancelled, .b-declined, .b-no_show, .b-refunded { background: #fde6e3; color: #a1261b; }

.steps { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: s; font-weight: 700; }
.steps li { counter-increment: s; margin-right: 18px; color: var(--muted); }
.steps li::before { content: counter(s) '. '; }
.steps li[aria-current='step'] { color: var(--navy); text-decoration: underline; text-decoration-color: #f2c14e; }

/* Calendar grid (admin) */
.cal td, .cal th { text-align: center; padding: 6px; min-width: 44px; }
.cal th:first-child, .cal td:first-child { text-align: left; white-space: nowrap; }
.cal .full { background: #fde6e3; color: #a1261b; font-weight: 800; }
.cal .some { background: #fff1d1; }
.cal .free { background: #e3f3e8; }

/* Admin layout */
.admin-nav { background: #1d405c; }
.admin-nav a { color: #fff; display: inline-block; padding: 10px 12px; min-height: 44px; text-decoration: none; font-weight: 600; }
.admin-nav a[aria-current='page'] { background: #0a5e99; box-shadow: inset 0 -3px 0 #f2c14e; }
.stats { display: flex; flex-wrap: wrap; margin: 0 -8px 16px; }
.stats > div { flex: 1 1 150px; margin: 0 8px 16px; background: #fff; border: 2px solid #1d405c; padding: 12px 16px; color: #1e1e1e; }
.stats strong { display: block; font-size: 1.8rem; font-family: var(--display); color: #1d405c; }
.inline { display: inline; }
.actions-row form, .actions-row a { display: inline-block; margin: 0 8px 8px 0; }

/* Footer: the seabed */
.foot { background: #1d405c; color: #e9f5fd; padding: 32px 0 96px; background-image: var(--scales); background-size: 20px 12px; }
.foot a { color: #bfe3fd; }
.foot h3, .foot .foot-h { color: #fff; font-size: 1rem; }
.foot .foot-h::after { display: none; }
.foot .meander { -webkit-filter: invert(1); filter: invert(1); opacity: 0.5; margin-bottom: 24px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.fish { position: relative; height: 24px; overflow: hidden; }
.fish svg { position: absolute; left: 5%; top: 2px; width: 34px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .fish svg { -webkit-animation: swim 38s linear infinite; animation: swim 38s linear infinite; }
  @-webkit-keyframes swim { from { left: -40px; } to { left: 100%; } }
  @keyframes swim { from { left: -40px; } to { left: 100%; } }
}

/* Sticky book bar on phones */
.bookbar { display: none; }
@media (max-width: 760px) {
  .bookbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-top: 2px solid #1d405c; padding: 8px 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bookbar .btn { display: block; width: 100%; text-align: center; }
}

/* Foldables and very narrow screens (Galaxy Fold outer screen is ~280px wide) */
@media (max-width: 340px) {
  body { font-size: 16px; }
  .wrap { padding: 0 12px; }
  .brand, .brand img { width: 120px; }
  h1, .hero h1 { font-size: 1.6rem; }
  .card img { height: 160px; }
}

@media print {
  .top, .foot, .bookbar, .admin-nav, .btn, .meander, .wave { display: none !important; }
  body { background: #fff; color: #000; }
}

.left, .section h2.left { text-align: left; }
.section h2.left::after { margin-left: 0; }
.narrow { max-width: 360px; }
.bigfish { width: 120px; margin: 0 auto 16px; }
.onnavy { color: #fff; }
.pre { white-space: pre-wrap; }
code { font-size: 0.85rem; word-break: break-all; }
details > summary { cursor: pointer; min-height: 44px; }

.nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; background: #e9f5fd; color: #1d405c; border-bottom: 2px solid #1d405c; font-weight: 700; }
.nophoto svg { width: 72px; height: 44px; margin-bottom: 8px; }
.polaroid .nophoto { border: 0; height: 280px; }
.plain { list-style: none; padding: 0; }
.plain li { margin-bottom: 6px; }
.photos { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.photos picture { flex: 1 1 140px; margin: 4px; }
.photos img { width: 100%; height: 160px; object-fit: cover; border: 2px solid #1d405c; }
.hero .chips { list-style: none; padding: 0; margin: 0; }
.hero .chips li { display: inline-block; background: rgba(255, 255, 255, 0.92); color: #1d405c; padding: 4px 10px; margin: 0 6px 6px 0; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }
.searchform .submit { flex: 0 0 auto; }
.features svg { color: #1d405c; }

/* Dark mode: the page becomes the deep sea, and cards, panels, forms and tables stay light "postcards"
   with the light-theme ink, so every text/background pair keeps its tested contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .card,
  :root:not([data-theme='light']) .panel,
  :root:not([data-theme='light']) .search,
  :root:not([data-theme='light']) .table-wrap,
  :root:not([data-theme='light']) .stats > div,
  :root:not([data-theme='light']) .polaroid,
  :root:not([data-theme='light']) .top,
  :root:not([data-theme='light']) .bookbar,
  :root:not([data-theme='light']) .alert,
  :root:not([data-theme='light']) .notice {
    --navy: #1d405c; --sea: #0a5e99; --link: #0f6fb0; --sky-soft: #e9f5fd; --ink: #1e1e1e; --muted: #4a5560; --line: #d9cfb6;
    --ok: #1e6b3a; --ok-soft: #e3f3e8; --warn: #7a4b00; --warn-soft: #fff1d1; --danger: #a1261b; --danger-soft: #fde6e3;
    color: #1e1e1e;
    color-scheme: light;
  }
  :root:not([data-theme='light']) .section.tint, :root:not([data-theme='light']) .section.sand { background: #132a3d; }
  :root:not([data-theme='light']) .wave { opacity: 0.25; }
}

.searchform input, .searchform select { height: 46px; }
.polaroid picture, .polaroid img { width: 100%; }
.results-h { font-size: 1.15rem; letter-spacing: 0.01em; }
.section h2.results-h::after { margin-left: 0; }