/* Durrës Vacation Photographer Website */

:root {
  --sand: #f7efe2;
  --cream: #fffaf1;
  --ink: #17201d;
  --muted: #6b746f;
  --gold: #c78346;
  --gold-dark: #8c562e;
  --sea: #1e5965;
  --red: #b42318;
  --green: #247047;
  --line: rgba(23, 32, 29, .13);
  --white: #ffffff;
  --shadow: 0 28px 80px rgba(30, 25, 18, .16);
  --soft-shadow: 0 18px 45px rgba(30, 25, 18, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 239, 226, .9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

section[id], .package-copy[id] {
  scroll-margin-top: 100px;
}

.nav {
  max-width: 1220px;
  margin: auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.site-logo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow: 0 12px 26px rgba(199, 131, 70, .28);
}

.nav-links { display: flex; gap: 13px; font-size: .84rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(23, 32, 29, .18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(23, 32, 29, .22); }
.btn.gold { background: var(--gold); }
.btn.sea { background: var(--sea); }
.btn.light { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.section {
  max-width: 1220px;
  margin: auto;
  padding: 88px 22px;
}

.hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 46px;
  padding-top: 64px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255,255,255,.48);
  color: var(--sea);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

h1, h2, h3 { margin: 0; line-height: 1.03; letter-spacing: -.055em; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
h1 { margin-top: 22px; font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
h2 { font-size: clamp(2.15rem, 4.2vw, 4.45rem); max-width: 890px; }
h3 { font-size: clamp(1.55rem, 2vw, 2.1rem); letter-spacing: -.04em; }

.lead {
  max-width: 650px;
  margin: 24px 0 30px;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.7vw, 1.28rem);
}

.hero-actions, .package-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.hero-visual {
  position: relative;
  height: 700px;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: transparent;
}

/* WebP <picture> wrappers should be invisible to layout so the <img>
   inside behaves exactly like a direct child (grid/flex sizing, > selectors). */
picture {
  display: contents;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.floating-card {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  padding: 24px;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.floating-card strong { display: block; font-size: 1.12rem; margin-bottom: 6px; }
.muted { color: var(--muted); }

.quick-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
  max-width: 1000px;
}

.quick-price {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  transition: transform .15s, box-shadow .15s;
}

.quick-price:hover {
  transform: translateY(-3px);
  box-shadow: var(--soft-shadow);
}

.quick-price b { display: block; font-size: 1.55rem; letter-spacing: -.05em; }
.quick-price b.quick-price-text { font-size: 1.1rem; letter-spacing: -.02em; }

.intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }

/* Fills the empty space left below the intro heading (its column is
   narrower and shorter than the text+cards column next to it). */
.intro-photo-wrap { height: 420px; border-radius: 32px; overflow: hidden; box-shadow: var(--soft-shadow); margin-top: 28px; }
.intro-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) {
  .intro-photo-wrap { height: 280px; }
}
.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.mini-card { background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: var(--soft-shadow); }
.mini-card b { display: block; margin-bottom: 4px; }

/* Longer mini-cards (e.g. the posing reassurance text) span 2 of the 4
   grid columns instead of 1, so they get a normal card shape instead of
   a narrow, oddly tall "column" — see .mini-grid above. */
.mini-card.wide { grid-column: span 2; }

.package-section { padding-top: 70px; padding-bottom: 70px; }

.package-showcase {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px;
  align-items: stretch;
  border-radius: 42px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.package-showcase.reverse { grid-template-columns: .95fr 1.05fr; }
.package-copy { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.package-copy .eyebrow { margin-bottom: 18px; width: fit-content; }
.package-kicker { color: var(--gold-dark); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 10px; }

.price-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 22px 0; }
.price { font-size: clamp(3.1rem, 6vw, 5rem); font-weight: 950; letter-spacing: -.08em; line-height: .9; }
.price-note { color: var(--muted); font-weight: 800; padding-bottom: 8px; }

.included { display: grid; gap: 10px; margin: 24px 0 28px; }
.included div { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.included div::before {
  content: "✓";
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(199, 131, 70, .14);
  color: var(--gold-dark);
  font-weight: 950;
  font-size: .82rem;
  margin-top: 1px;
}

.package-media {
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: rgba(23,32,29,.035);
}

.package-media .main { grid-column: span 2; border-radius: 30px 30px 18px 18px; overflow: hidden; }
.package-media .small { border-radius: 18px; overflow: hidden; }

.image-button, .gallery-card {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
}

.image-button img, .gallery-card img { transition: transform .35s ease; }
.image-button:hover img, .gallery-card:hover img { transform: scale(1.045); }

.media-label span, .gallery-card span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
}

.dark-feature { background: var(--ink); color: white; max-width: 100%; }
.dark-feature .package-showcase { max-width: 1220px; margin: auto; background: #111815; border-color: rgba(255,255,255,.13); }
.dark-feature .muted, .dark-feature .included div, .dark-feature .price-note { color: rgba(255,255,255,.72); }
.dark-feature .eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #f3d6b5; }
.dark-feature .package-kicker { color: #f3d6b5; }

/* "You Choose Your Favorites" highlight box — sits directly under each
   package's price, right before the checkmark feature list. */
.favorites-box {
  background: rgba(199, 131, 70, .1);
  border: 1px solid rgba(199, 131, 70, .3);
  border-radius: 18px;
  padding: 16px 20px;
  margin: 2px 0 24px;
}
.favorites-box .favorites-title {
  display: block;
  color: var(--gold-dark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  margin-bottom: 6px;
}
.favorites-box p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.dark-feature .favorites-box { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.dark-feature .favorites-box .favorites-title { color: #f3d6b5; }
.dark-feature .favorites-box p { color: rgba(255,255,255,.78); }

/* Small "bad weather? no problem" badge — shown near the outdoor/sunset
   packages, not just tucked away in the FAQ. */
.weather-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 89, 101, .08);
  border: 1px solid rgba(30, 89, 101, .22);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: .85rem;
  font-weight: 800;
  color: var(--sea);
  margin: 18px 0 22px;
}
.dark-feature .weather-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #cfe8ec; }

/* Short couples tagline under the Sunset Beach lead paragraph. */
.package-tagline { margin: -14px 0 0; font-style: italic; color: var(--gold-dark); font-weight: 700; }
.dark-feature .package-tagline { color: #f3d6b5; }

/* About section — closing line under the "During your session..." text. */
.about-tagline { margin-top: 16px; font-style: italic; color: var(--gold-dark); font-weight: 700; }

/* After-the-shoot 3 steps — horizontal row, stacks vertically on mobile.
   Tighter section padding than the default .section (88px) — this
   section's content is short, and full padding on both this section AND
   the next one (#more-sessions, below) stacked into an oversized empty
   gap before "More sessions" starts. */
.after-shoot-steps { padding-top: 44px; padding-bottom: 16px; }
#more-sessions { padding-top: 40px; }

/* align-items:stretch (the flex default) so all 3 cards share the
   height of the tallest one — step 2 has an extra description line, so
   without this the other two looked short and mismatched next to it.
   justify-content:flex-start (not center) so this row lines up on the
   left, matching every other section's heading/content alignment on
   the site (e.g. "More sessions" directly below it) instead of looking
   like a separate, oddly-centered block. */
.steps-row { display: flex; align-items: stretch; justify-content: flex-start; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 28px;
  min-width: 190px;
  text-align: center;
  box-shadow: var(--soft-shadow);
}
.step-icon { font-size: 2rem; }
.step-item b { font-size: .95rem; }
.step-desc { font-size: .82rem; color: var(--muted); }
.step-arrow { font-size: 1.6rem; color: var(--gold); }

@media (max-width: 980px) {
  .steps-row { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); }
}

/* FAQ accordion — this was the one section on the site with literally no
   custom styling, just the browser's bare <details>/<summary> look, so it
   sat cramped right against the h2 with no gap and no visual separation
   between questions. Matches the card language used everywhere else
   (mini-card, step-item, favorites-box). */
#faq details {
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 26px;
  margin-top: 14px;
  box-shadow: var(--soft-shadow);
}
#faq details:first-of-type { margin-top: 34px; }
#faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
  font-size: 1.02rem;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-dark);
  transition: transform .25s ease;
}
#faq details[open] summary::after { transform: rotate(45deg); }
#faq details p { margin: 14px 0 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 620px) {
  #faq details { padding: 16px 18px; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; margin-top: 34px; }
.gallery-card { overflow: hidden; border-radius: 26px; box-shadow: var(--soft-shadow); }
.gallery-card.large { grid-column: span 2; grid-row: span 2; }
.gallery-card.wide { grid-column: span 2; }

.booking-card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  background: var(--sea);
  color: white;
  border-radius: 42px;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--shadow);
  align-items: start;
}

.booking-card .muted, .booking-card .lead { color: rgba(255,255,255,.74); }
.cash-box { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; padding: 20px; margin-top: 22px; }
.payment-options { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.payment-option { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 10px 16px; cursor: pointer; font-size: 14px; }
.payment-option input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--gold, #c78346); }

form {
  display: grid;
  gap: 14px;
  background: white;
  color: var(--ink);
  border-radius: 30px;
  padding: 26px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
label { font-weight: 900; font-size: .9rem; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 15px;
  font: inherit;
  color: var(--ink);
  background: white;
  outline: none;
}

input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(199, 131, 70, .14); }
textarea { min-height: 112px; resize: vertical; }

.form-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.form-buttons .btn { flex: 1; min-width: 180px; }
.note { margin: 0; color: var(--muted); font-size: .9rem; }
.hidden-field { position: absolute; left: -9999px; }

.availability-message {
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(30, 89, 101, .08);
  color: var(--sea);
  border: 1px solid rgba(30, 89, 101, .15);
  font-weight: 800;
  font-size: .92rem;
}

.availability-message.error {
  color: var(--red);
  background: rgba(180, 35, 24, .08);
  border-color: rgba(180, 35, 24, .18);
}

.availability-message.success {
  color: var(--green);
  background: rgba(36, 112, 71, .08);
  border-color: rgba(36, 112, 71, .18);
}

.album-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  background: rgba(0, 0, 0, .9);
  padding: 24px;
}

.album-lightbox.active { display: flex; align-items: center; justify-content: center; }
.album-shell { width: min(1160px, 96vw); max-height: 94vh; display: grid; gap: 16px; color: white; }
.album-header { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.album-header h3 { margin-top: 10px; }
.album-count { font-weight: 900; color: rgba(255,255,255,.72); }

.album-viewer {
  position: relative;
  height: min(68vh, 720px);
  border-radius: 26px;
  overflow: hidden;
  background: #0f0f0f;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.album-viewer img { object-fit: contain; }
.album-arrow, .album-close { border: 0; cursor: pointer; background: white; color: var(--ink); }

.album-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  border-radius: 999px;
  z-index: 2;
  font-size: 42px;
  line-height: .5;
}

.album-arrow.prev { left: 16px; }
.album-arrow.next { right: 16px; }

.album-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 28px;
}

.album-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }

.album-thumbs button {
  width: 96px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 2px solid transparent;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: .7;
}

.album-thumbs button.active { border-color: var(--gold); opacity: 1; }

footer {
  text-align: center;
  padding: 34px 22px 54px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Admin */
.admin-body { background: #f7efe2; }
.admin-shell { max-width: 1180px; margin: auto; padding: 32px 18px; }
.admin-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  box-shadow: var(--soft-shadow);
}
.admin-table { width: 100%; border-collapse: collapse; margin-top: 18px; background: white; overflow: hidden; border-radius: 18px; }
.admin-table th, .admin-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .92rem; }
.admin-table th { background: var(--cream); font-weight: 900; }
.badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; font-weight: 900; font-size: .78rem; }
.badge.pending { background: rgba(199,131,70,.13); color: var(--gold-dark); }
.badge.confirmed { background: rgba(36,112,71,.13); color: var(--green); }
.badge.cancelled { background: rgba(180,35,24,.13); color: var(--red); }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 981px) and (max-width: 1300px) {
  .logo-text{ display: none; }
  .nav{ gap: 8px; }
  .nav-links{ gap: 10px; font-size: .8rem; }
}

@media (max-width: 980px) {
  .hero, .intro-grid, .package-showcase, .package-showcase.reverse, .booking-card { grid-template-columns: 1fr; }
  /* This is a photography site — on mobile the photo should always be the
     first thing seen, not a wall of text/prices. Desktop's zig-zag layout
     puts the photo before or after the text depending on the section (via
     DOM order + .reverse), which used to carry over inconsistently once
     everything collapsed to one column on mobile. Forcing the photo first
     here makes every section behave the same way on mobile regardless of
     its desktop order. */
  .hero-visual, .package-media { order: -1; }
  .hero-visual { height: 500px; }
  .quick-prices, .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .package-media { min-height: 520px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-card.large, .gallery-card.wide { grid-column: span 2; }
  .nav-links { display: none; }
}

@media (max-width: 620px) {
  .logo-text{ display: none; }
	
	.hero-visual {
  height: 460px;
  border-radius: 30px;
}
  .section { padding: 58px 18px; }
  .hero { padding-top: 34px; }
  .quick-prices, .mini-grid, .form-row { grid-template-columns: 1fr; }
  .mini-card.wide { grid-column: span 1; }
  .package-section { padding-top: 34px; padding-bottom: 34px; }
  .package-media { min-height: auto; grid-template-columns: 1fr; grid-template-rows: 280px 200px 200px; }
  .package-media .main { grid-column: span 1; }
  .gallery-grid { grid-auto-rows: 190px; }
  .gallery-card.large, .gallery-card.wide, .gallery-card { grid-column: span 2; grid-row: span 1; }
  .floating-card { left: 14px; right: 14px; bottom: 14px; padding: 18px; }
  .booking-card { border-radius: 30px; }
  form { padding: 20px; }
  .album-lightbox { padding: 14px; }
  .album-viewer { height: 58vh; }
  .album-header { padding-right: 48px; }
  .album-arrow { width: 42px; height: 50px; }
  .admin-table { display: block; overflow-x: auto; }
}

/* ---------- More Sessions (extra packages added from admin panel) ---------- */
.more-session-card{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.more-session-price{ font-weight:700; color:var(--gold, #c89b5d); font-size:1.1rem; }
.more-session-card .btn{ margin-top:6px; }

/* ---------- Testimonials ---------- */
.testimonial-card{ display:flex; flex-direction:column; gap:10px; }
.testimonial-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.hero-review-badge{
  display:flex; align-items:center; gap:8px;
  margin-top:18px; font-size:.92rem; color:var(--muted);
}
.hero-review-badge:empty{ display:none; }
.hero-review-badge .stars{ color:#c78346; letter-spacing:.06em; }
.hero-review-badge a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

.testimonials-summary{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  margin:18px 0 28px; font-size:1rem; color:var(--ink); flex-wrap:wrap;
}
.testimonials-summary .stars{ color:#c78346; letter-spacing:.06em; }
.testimonials-summary a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.testimonial-stars{ color:#c78346; font-size:1.1rem; letter-spacing:.1em; }
.testimonial-source-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#4285F4; background:rgba(66,133,244,.1);
  padding:4px 10px; border-radius:999px;
}
.testimonial-quote{ font-style:italic; color:var(--ink); line-height:1.6; margin:0; }
.testimonial-read-more{
  background:none; border:none; padding:0; cursor:pointer;
  color:#c78346; font-weight:600; font-size:.85rem; text-align:left;
  width:fit-content;
}
.testimonial-read-more:hover{ text-decoration:underline; }
.testimonial-card b{ font-size:.9rem; color:#777; font-weight:600; }

/* ---------- Instagram grid (our own photos, matches site design) ---------- */
.instagram-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.instagram-tile{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}

.instagram-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.instagram-tile-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(31, 22, 14, 0);
  color: #fff;
  font-size: 1.6rem;
  opacity: 0;
  transition: background .25s ease, opacity .25s ease;
}

.instagram-tile-likes{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .95rem;
  font-weight: 700;
}
.instagram-tile-likes i{ color: #ff5c7a; font-size: .95rem; }

.instagram-tile:hover img{ transform: scale(1.06); }
.instagram-tile:hover .instagram-tile-overlay{
  background: rgba(31, 22, 14, .38);
  opacity: 1;
}

@media(max-width: 900px){
  .instagram-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 600px){
  .instagram-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .instagram-tile{ border-radius: 14px; }
}

/* ---------- Language switcher (flags) ---------- */
.lang-switcher{ display:flex; gap:6px; align-items:center; }
.lang-btn{
  background:none; border:1px solid transparent; border-radius:8px;
  font-size:1.25rem; line-height:1; padding:4px 6px; cursor:pointer;
  opacity:.55; transition:opacity .15s, border-color .15s, transform .15s;
}
.lang-btn:hover{ opacity:.85; transform:translateY(-1px); }
.lang-btn.active{ opacity:1; border-color:var(--line); background:rgba(255,255,255,.6); }

@media(max-width:900px){
  .lang-switcher{ order:3; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-consent-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.cookie-consent-banner p{ margin: 0; font-size: .88rem; line-height: 1.5; flex: 1; min-width: 220px; }
.cookie-consent-banner a{ color: #fff; text-decoration: underline; }
.cookie-consent-actions{ display: flex; gap: 10px; flex-shrink: 0; }
.cookie-consent-actions .btn{ padding: 10px 18px; font-size: .85rem; }

@media (max-width: 500px){
  .cookie-consent-banner{ flex-direction: column; align-items: stretch; }
  .cookie-consent-actions{ justify-content: stretch; }
  .cookie-consent-actions .btn{ flex: 1; }
}

/* ---------- Floating "back to top" button ---------- */
#scrollTopBtn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 400;
}
#scrollTopBtn.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scrollTopBtn:hover{ filter: brightness(1.15); }

@media (max-width: 620px){
  #scrollTopBtn{ right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- Live chat widget ---------- */
#chatWidget{ position: fixed; left: 22px; bottom: 22px; z-index: 450; }

#chatBubble{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--gold, #c78346);
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s;
}
#chatBubble:hover{ transform: translateY(-2px); }

.chat-bubble-badge{
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e0413f;
  border: 2px solid #fff;
}

.chat-window{
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  height: 440px;
  max-height: 70vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  flex-direction: column;
}

.chat-window-header{
  background: var(--ink);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-window-header strong{ display: block; font-size: .95rem; }
.chat-window-header span{ font-size: .75rem; opacity: .7; }
.chat-window-header button{ background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; opacity: .8; }
.chat-window-header button:hover{ opacity: 1; }

.chat-pre-form{ padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.chat-pre-form p{ font-size: .85rem; color: #555; margin: 0 0 4px; }
.chat-pre-form input{
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e5e5);
  font-family: inherit;
  font-size: .85rem;
}

.chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg{
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: .85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg-visitor{ align-self: flex-end; background: var(--gold, #c78346); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-admin{ align-self: flex-start; background: #f1efe9; color: #333; border-bottom-left-radius: 4px; }

.chat-form{ display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line, #eee); }
.chat-form input{
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e5e5);
  font-family: inherit;
  font-size: .85rem;
}
.chat-form button{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--gold, #c78346);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 620px){
  #chatWidget{ left: 16px; bottom: 16px; }
  .chat-window{ width: calc(100vw - 32px); }
}

/* ---------- Booking form: consent checkboxes ---------- */
.consent-field{ margin: 4px 0; }
.consent-field label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.5;
}
.consent-field input[type="checkbox"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--gold, #c78346);
}
.consent-field a{ color: inherit; text-decoration: underline; }

.transport-van-prompt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,.5);
}
.transport-van-prompt label{ margin: 0; }
.transport-van-yes-btn{ padding: 8px 22px; }

/* Same card language as the vehicle picker on the sister taxi site, laid
   out as a full-width row instead of a narrow tile: text on the left,
   van photo on the right — whole card clickable, no empty dead space. */
.transport-van-option{
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  cursor: pointer;
  background: rgba(255,255,255,.6);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.transport-van-option:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.1);
}
.transport-van-option:has(input:checked){
  border-color: var(--gold, #c78346);
  background: rgba(199,131,70,.08);
}
.transport-van-option input[type="checkbox"]{ position: absolute; opacity: 0; }
.transport-van-copy{ flex: 1; min-width: 0; text-align: left; }
.transport-van-photo{
  display: block;
  flex-shrink: 0;
  width: 180px;
  height: 100px;
  object-fit: contain;
}
.transport-van-name{ font-weight: 700; font-size: 1rem; color: var(--ink); }
.transport-van-meta{ font-size: .85rem; color: var(--muted); margin-top: 4px; }
.transport-van-meta b{ color: var(--gold, #c78346); }
.transport-van-desc{ font-size: .8rem; color: var(--muted) !important; margin-top: 8px; line-height: 1.5; }

@media (max-width: 560px){
  .transport-van-option{ flex-direction: column; text-align: center; }
  .transport-van-copy{ text-align: center; }
  .transport-van-photo{ width: 100%; max-width: 220px; }
}
@media (max-width: 480px){
  .transport-van-thumb{ display: none; }
}

/* ---------- Why book with us ---------- */
.why-us-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.why-us-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  font-weight: 600;
  font-size: .92rem;
}
.why-us-item i{ color: #2e8b57; font-size: 1.1rem; flex-shrink: 0; }

@media(max-width:900px){
  .why-us-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:600px){
  .why-us-grid{ grid-template-columns: 1fr; }
}