/* ══════════════════════════════════════════════════════════════════════
   ERRAND RUNNER SL — PUBLIC PAGES THEME (ptheme.css)
   teal-900 (#134e4a) is the dominant brand colour everywhere.
   Lighter teals used only for hover, icon accents, subtle borders.
══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE TOKENS
══════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  --pub-bg            : #f2f5f4;
  --pub-surface       : #ffffff;
  --pub-surface-2     : #f5f8f7;
  --pub-surface-3     : #edf3f2;
  --pub-input-bg      : #fafafa;
  --pub-input-focus   : #ffffff;
  --pub-text          : #1a1a1a;
  --pub-text-sec      : #374151;
  --pub-text-muted    : #9ca3af;
  --pub-heading       : #134e4a;        /* teal-900 for all headings */
  --pub-label         : #134e4a;        /* teal-900 for labels/icons */
  --pub-border        : #dde5e4;
  --pub-border-teal   : #c2d8d6;
  --pub-teal-900      : #134e4a;
  --pub-teal-700      : #0f766e;        /* hover states only */
  --pub-teal-500      : #0d9488;        /* gradient ends only */
  --pub-teal-50       : #f0f9f8;
  --pub-shadow        : 0 4px 24px rgba(19,78,74,.1);
  --pub-shadow-sm     : 0 2px 14px rgba(19,78,74,.07);
  --pub-overlay       : rgba(0,0,0,.55);
  /* Process section — deep dark teal */
  --pub-process-bg    : #0a1f1e;
  --pub-process-text  : #ffffff;
  --pub-process-card  : rgba(255,255,255,.07);
  --pub-process-arrow : rgba(255,255,255,.7);  /* white arrows not bright teal */
  --pub-process-num   : #134e4a;
  --pub-cookie-bg     : #edf3f2;
  --pub-loader-bg     : rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE TOKENS
══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --pub-bg            : #080f0e;
  --pub-surface       : #101818;
  --pub-surface-2     : #162020;
  --pub-surface-3     : #1a2626;
  --pub-input-bg      : #162020;
  --pub-input-focus   : #1c2828;
  --pub-text          : #e4eded;
  --pub-text-sec      : #a8c4c2;
  --pub-text-muted    : #5a7878;
  --pub-heading       : #e4eded;
  --pub-label         : #5eead4;        /* teal-200 for labels on dark */
  --pub-border        : #1e3030;
  --pub-border-teal   : #1a2e2e;
  --pub-teal-900      : #0c4a45;
  --pub-teal-700      : #0d7e74;
  --pub-teal-500      : #0b6b62;
  --pub-teal-50       : #0a1a1a;
  --pub-shadow        : 0 4px 24px rgba(0,0,0,.5);
  --pub-shadow-sm     : 0 2px 14px rgba(0,0,0,.35);
  --pub-overlay       : rgba(0,0,0,.8);
  --pub-process-bg    : #060f0e;
  --pub-process-text  : #e4eded;
  --pub-process-card  : rgba(255,255,255,.05);
  --pub-process-arrow : rgba(255,255,255,.65);
  --pub-process-num   : #0c4a45;
  --pub-cookie-bg     : #162020;
  --pub-loader-bg     : rgba(8,15,14,.94);
}


/* ══════════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════════ */
body {
  background-color : var(--pub-bg);
  color            : var(--pub-text);
  font-family      : 'Outfit', sans-serif;
  transition       : background-color .3s, color .3s;
  min-height       : 100vh;
}


/* ══════════════════════════════════════════════════════════════════
   FAVICON / ICO — tell browsers where icons live
══════════════════════════════════════════════════════════════════ */
/* These are referenced in HTML <link> tags, not CSS.
   Documented here for reference:
   /ico/icon-16.png   /ico/icon-32.png   /ico/icon-96.png
   /ico/icon-192.png  /ico/icon-512.png  /ico/favicon.ico   */


/* ══════════════════════════════════════════════════════════════════
   BOOKING FORM SECTION
══════════════════════════════════════════════════════════════════ */
.pub-booking-section {
  background : var(--pub-bg);
  padding    : 56px 24px;
  display    : flex;
  justify-content: center;
}

.pub-form-card {
  background    : var(--pub-surface);
  border-radius : 20px;
  box-shadow    : var(--pub-shadow);
  padding       : 40px;
  width         : 100%;
  max-width     : 740px;
  /* teal-900 top border accent */
  border-top    : 4px solid var(--pub-teal-900);
  border-left   : 1px solid var(--pub-border-teal);
  border-right  : 1px solid var(--pub-border-teal);
  border-bottom : 1px solid var(--pub-border-teal);
  transition    : background .25s, box-shadow .25s;
}
@media(max-width:640px) { .pub-form-card { padding: 28px 20px; } }

.pub-form-card h1 {
  font-size     : 1.65rem;
  font-weight   : 700;
  color         : var(--pub-heading);   /* teal-900 */
  text-align    : center;
  margin-bottom : 28px;
  letter-spacing: -.3px;
  font-family   : 'Outfit', sans-serif;
}

/* Section titles — teal-900 background strip */
.pub-form-section-title {
  font-size     : .7rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color         : #ffffff;
  font-family   : 'JetBrains Mono', monospace;
  margin-bottom : 14px;
  margin-top    : 24px;
  display       : flex;
  align-items   : center;
  gap           : 6px;
  background    : var(--pub-teal-900);
  padding       : 7px 12px;
  border-radius : 7px;
}

.pub-form-divider {
  height    : 1px;
  background: var(--pub-border-teal);
  margin    : 22px 0 18px;
}

.pub-field { margin-bottom: 18px; }

.pub-field label,
.pub-form-card label {
  display      : block;
  font-size    : .82rem;
  font-weight  : 600;
  color        : var(--pub-heading);    /* teal-900 */
  margin-bottom: 6px;
  font-family  : 'Outfit', sans-serif;
}

/* Form inputs */
.form-input,
.form-select,
.pub-form-card input[type="text"],
.pub-form-card input[type="email"],
.pub-form-card input[type="number"],
.pub-form-card input[type="datetime-local"],
.pub-form-card select,
.pub-form-card textarea {
  width            : 100%;
  padding          : 10px 14px;
  border           : 1.5px solid var(--pub-border);
  border-radius    : 9px;
  font-size        : .88rem;
  font-family      : 'Outfit', sans-serif;
  background-color : var(--pub-input-bg);
  color            : var(--pub-text);
  outline          : none;
  box-sizing       : border-box;
  transition       : border-color .18s, background .18s, box-shadow .18s;
}
.form-input:focus,
.form-select:focus,
.pub-form-card input:focus,
.pub-form-card select:focus,
.pub-form-card textarea:focus {
  border-color : var(--pub-teal-900);
  background   : var(--pub-input-focus);
  box-shadow   : 0 0 0 3px rgba(19,78,74,.12);
}
.pub-form-card textarea  { resize: vertical; min-height: 90px; }
.pub-form-card input:disabled {
  background : var(--pub-surface-2);
  color      : var(--pub-text-muted);
}

.pub-grid-2 {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 16px;
}
@media(max-width:560px) { .pub-grid-2 { grid-template-columns: 1fr; } }

/* Cost badge — solid teal-900 */
.pub-cost-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  background    : var(--pub-teal-900);
  color         : #ffffff;
  border-radius : 10px;
  padding       : 10px 16px;
  font-family   : 'JetBrains Mono', monospace;
  font-size     : .85rem;
  font-weight   : 600;
  margin-top    : 4px;
}

.service-panel-pub {
  background  : var(--pub-surface-2);
  border      : 1.5px solid var(--pub-border-teal);
  border-left : 3px solid var(--pub-teal-900);
  border-radius: 12px;
  padding     : 20px;
  margin-top  : 12px;
  display     : none;
}
.service-panel-pub.active { display: block; }

#bankFields, #hospitalFields, #shopFields { margin-top: 12px; }

#phoneError {
  color      : #dc2626;
  font-size  : .75rem;
  margin-top : 4px;
  display    : none;
}

.pub-check-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  margin     : 10px 0;
}
.pub-check-row input[type="checkbox"] { accent-color: var(--pub-teal-900); }
.pub-check-row label {
  font-size  : .85rem;
  color      : var(--pub-text-sec);
  margin     : 0;
  font-weight: 400;
}

/* Submit button — solid teal-900 */
.pub-submit-btn {
  width          : 100%;
  padding        : 13px;
  background     : var(--pub-teal-900);
  color          : #ffffff;
  border         : none;
  border-radius  : 10px;
  font-size      : .95rem;
  font-weight    : 700;
  font-family    : 'Outfit', sans-serif;
  cursor         : pointer;
  letter-spacing : .3px;
  transition     : transform .12s, filter .12s, box-shadow .12s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  box-shadow     : 0 4px 18px rgba(19,78,74,.35);
  margin-top     : 8px;
}
.pub-submit-btn:hover {
  transform  : translateY(-1px);
  filter     : brightness(1.12);
  box-shadow : 0 6px 24px rgba(19,78,74,.5);
}


/* ══════════════════════════════════════════════════════════════════
   BOOKING PROCESS SECTION
   Background: very dark teal. Cards and arrows use white/opacity.
══════════════════════════════════════════════════════════════════ */
.pub-process-section {
  background : var(--pub-process-bg);
  padding    : 72px 40px 80px;
  transition : background .3s;
}
@media(max-width:768px) { .pub-process-section { padding: 52px 20px 60px; } }

.pub-process-section > h1 {
  font-size     : 2rem;
  font-weight   : 800;
  color         : #ffffff;
  text-align    : center;
  margin-bottom : 10px;
  letter-spacing: -.4px;
  font-family   : 'Outfit', sans-serif;
}
.pub-process-section > p {
  text-align   : center;
  color        : rgba(255,255,255,.55);
  font-size    : .9rem;
  margin-bottom: 48px;
  font-family  : 'Outfit', sans-serif;
}

.pub-process-part-title {
  font-size      : 1.05rem;
  font-weight    : 700;
  color          : rgba(255,255,255,.9);
  text-align     : center;
  margin-bottom  : 32px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  font-family    : 'Outfit', sans-serif;
}
.pub-process-part-title::before,
.pub-process-part-title::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: rgba(255,255,255,.12);
  max-width : 140px;
}


/* ── Step rows ── */
.pub-steps-row {
  display               : grid;
  grid-template-columns : 1fr 40px 1fr 40px 1fr;
  align-items           : center;
  max-width             : 900px;
  margin                : 0 auto;
}
.pub-steps-gap { height: 24px; }


/* ── Step cards ── */
.pub-step {
  background    : rgba(19,78,74,.35);     /* teal-900 tint */
  border        : 1px solid rgba(255,255,255,.1);
  border-top    : 2px solid rgba(19,78,74,.8);
  border-radius : 14px;
  padding       : 28px 18px 22px;
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
  position      : relative;
  transition    : background .2s, transform .18s, box-shadow .18s;
  min-height    : 180px;
}
.pub-step:hover {
  background : rgba(19,78,74,.55);
  transform  : translateY(-4px);
  box-shadow : 0 14px 36px rgba(0,0,0,.45);
}

/* Step number badge — teal-900 solid */
.pub-step-num {
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  background     : var(--pub-teal-900);
  border         : 2px solid rgba(255,255,255,.25);
  color          : #ffffff;
  font-family    : 'JetBrains Mono', monospace;
  font-size      : .72rem;
  font-weight    : 700;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  letter-spacing : .3px;
}

/* Step icon — white */
.pub-step-icon {
  font-size  : 1.9rem;
  color      : rgba(255,255,255,.85);
  line-height: 1;
}

.pub-step h3 {
  font-size  : .9rem;
  font-weight: 600;
  color      : #ffffff;
  font-family: 'Outfit', sans-serif;
  margin     : 0;
  line-height: 1.35;
}
.pub-step p {
  font-size  : .77rem;
  color      : rgba(255,255,255,.55);
  line-height: 1.55;
  margin     : 0;
}

/* Desktop arrow between steps */
.pub-step-arrow {
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : rgba(255,255,255,.5);
  font-size      : 1.5rem;
  opacity        : 1;
}

/* SVG turn connectors */
.pub-flow-turn-right {
  display        : flex;
  justify-content: flex-end;
  width          : 100%;
  max-width      : 900px;
  margin         : -88px auto;
  position       : relative;
  z-index        : 2;
  pointer-events : none;
  padding-right  : 18px;
}
.pub-flow-turn-left {
  display        : flex;
  justify-content: flex-start;
  width          : 100%;
  max-width      : 900px;
  margin         : -88px auto;
  position       : relative;
  z-index        : 2;
  pointer-events : none;
  padding-left   : 18px;
}
.pub-flow-turn-right svg,
.pub-flow-turn-left  svg {
  display : block;
  width   : 90px;
  height  : 220px;
  overflow: visible;
}


/* ── Mobile — vertical stack ── */
@media(max-width:768px) {
  .pub-steps-row {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    max-width     : 380px;
    margin        : 0 auto;
    gap           : 0;
  }
  .pub-step {
    width     : 100%;
    min-height: auto;
  }
  .pub-step-arrow {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    padding        : 10px 0;
    font-size      : 1.4rem;
    opacity        : .8;
  }
  .pub-step-arrow i { display: none; }
  .pub-step-arrow::before {
    content    : '↓';
    font-family: 'Outfit', sans-serif;
    font-size  : 1.6rem;
    color      : rgba(255,255,255,.6);
  }
  .pub-steps-gap {
    width          : 100%;
    max-width      : 380px;
    margin         : 0 auto;
    height         : auto;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 10px 0;
  }
  .pub-steps-gap::before {
    content    : '↓';
    font-family: 'Outfit', sans-serif;
    font-size  : 1.6rem;
    color      : rgba(255,255,255,.6);
  }
  .pub-flow-turn-right,
  .pub-flow-turn-left { display: none; }
  .pub-steps-row[style] {
    display       : flex !important;
    flex-direction: column !important;
    align-items   : center !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   HOW TO BOOK CARDS
══════════════════════════════════════════════════════════════════ */
.pub-how-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
  gap                   : 20px;
  max-width             : 900px;
  margin                : 36px auto 0;
}
.pub-how-card {
  background    : rgba(19,78,74,.3);
  border        : 1px solid rgba(255,255,255,.1);
  border-top    : 2px solid var(--pub-teal-900);
  border-radius : 14px;
  padding       : 28px 22px;
  text-align    : center;
  transition    : background .18s, transform .18s;
}
.pub-how-card:hover {
  background: rgba(19,78,74,.5);
  transform : translateY(-3px);
}
.pub-how-card i {
  font-size    : 2rem;
  color        : rgba(255,255,255,.75);
  margin-bottom: 12px;
  display      : block;
}
.pub-how-card h3 {
  font-size    : .95rem;
  font-weight  : 600;
  color        : #ffffff;
  margin-bottom: 8px;
  font-family  : 'Outfit', sans-serif;
}
.pub-how-card p {
  font-size  : .8rem;
  color      : rgba(255,255,255,.55);
  line-height: 1.6;
  font-family: 'Outfit', sans-serif;
}
.pub-how-card a {
  display        : inline-block;
  margin-top     : 14px;
  padding        : 7px 18px;
  background     : var(--pub-teal-900);
  color          : #ffffff;
  border         : 1px solid rgba(255,255,255,.2);
  border-radius  : 7px;
  font-size      : .8rem;
  font-weight    : 600;
  text-decoration: none;
  transition     : filter .15s, transform .12s;
}
.pub-how-card a:hover { filter: brightness(1.15); transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER SECTION
══════════════════════════════════════════════════════════════════ */
.pub-newsletter-section {
  background : #f5f5f4;
  padding    : 56px 24px;
  text-align : center;
  transition : background .25s;
}
.pub-newsletter-section h2 {
  font-size    : 1.4rem;
  font-weight  : 700;
  color        : #134e4a;
  margin-bottom: 8px;
  font-family  : 'Outfit', sans-serif;
}
.pub-newsletter-section p {
  color        : #4b5563;
  font-size    : .9rem;
  margin-bottom: 24px;
  font-family  : 'Outfit', sans-serif;
}
.pub-subscribe-row {
  display        : flex;
  justify-content: center;
  align-items    : center;
  gap            : 12px;
  flex-wrap      : wrap;
  max-width      : 560px;
  margin         : 0 auto;
}
#subemail {
  flex          : 1;
  min-width     : 260px;
  padding       : 14px 18px;
  border        : 2px solid #134e4a;
  border-radius : 10px;
  font-size     : 1rem;
  font-family   : 'Outfit', sans-serif;
  background    : #134e4a;
  color         : #ffffff;
  outline       : none;
  box-shadow    : 0 0 0 4px rgba(19,78,74,.15),
                  0 4px 16px rgba(19,78,74,.2);
  transition    : border-color .18s, background .18s, box-shadow .18s;
}
#subemail::placeholder { color: rgba(255,255,255,.55); }
#subemail:focus {
  border-color: #0f766e;
  background  : #0f3d3a;
  box-shadow  : 0 0 0 5px rgba(19,78,74,.22),
                0 6px 20px rgba(19,78,74,.3);
}
.pub-subscribe-btn {
  padding      : 14px 28px;
  background   : #134e4a;
  color        : #fff;
  border       : 2px solid #134e4a;
  border-radius: 10px;
  font-size    : 1rem;
  font-weight  : 700;
  font-family  : 'Outfit', sans-serif;
  cursor       : pointer;
  box-shadow   : 0 4px 14px rgba(19,78,74,.3);
  transition   : transform .12s, filter .12s, box-shadow .12s;
  white-space  : nowrap;
}
.pub-subscribe-btn:hover {
  transform  : translateY(-1px);
  filter     : brightness(1.15);
  box-shadow : 0 6px 20px rgba(19,78,74,.45);
}

/* ══════════════════════════════════════════════════════════════════
   MESSAGE BOX
══════════════════════════════════════════════════════════════════ */
#messageBox {
  display        : none;
  position       : fixed;
  inset          : 0;
  background     : var(--pub-overlay);
  z-index        : 9999;
  align-items    : center;
  justify-content: center;
}
#messageBox.show { display: flex; }

.pub-msg-inner {
  background    : var(--pub-surface);
  border-radius : 14px;
  border-top    : 4px solid var(--pub-teal-900);
  padding       : 28px 32px;
  max-width     : 360px;
  width         : 90%;
  text-align    : center;
  box-shadow    : 0 20px 56px rgba(0,0,0,.3);
  font-family   : 'Outfit', sans-serif;
}
.pub-msg-inner p {
  font-size    : .95rem;
  margin-bottom: 18px;
  line-height  : 1.6;
  color        : var(--pub-text);
}
.pub-msg-ok {
  background   : var(--pub-teal-900);
  color        : #fff;
  padding      : 9px 28px;
  border       : none;
  border-radius: 8px;
  font-weight  : 600;
  cursor       : pointer;
  font-family  : 'Outfit', sans-serif;
  transition   : filter .15s, transform .12s;
}
.pub-msg-ok:hover { filter: brightness(1.12); transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════════════
   LOADER
══════════════════════════════════════════════════════════════════ */
#loaderOverlay {
  background     : var(--pub-loader-bg) !important;
  opacity        : 1;
  transition     : opacity .5s ease;
  display        : flex;
  align-items    : center;
  justify-content: center;
}
#loaderOverlay.fade-out { opacity: 0; }

.loader {
  position  : relative;
  width     : 200px;
  height    : 200px;
  animation : rotateOrbit 3s linear infinite;
}
.ball-wrapper {
  position        : absolute;
  top             : 50%;
  left            : 50%;
  width           : 0;
  height          : 0;
  transform-origin: center;
}
.ball {
  position     : absolute;
  width        : 16px;
  height       : 16px;
  background   : var(--pub-teal-900);
  border-radius: 50%;
  transform    : translateY(-90px);
}
@keyframes rotateOrbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════════════════════════ */
#cookieBanner {
  background-color: var(--pub-cookie-bg) !important;
  color           : var(--pub-text) !important;
}
#cookieBanner div { color: var(--pub-text-sec) !important; }
#acceptCookies {
  background: var(--pub-teal-900) !important;
  color     : #ffffff !important;
}
#acceptCookies:hover { filter: brightness(1.1); }


/* ══════════════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition: background-color .25s, border-color .25s, color .2s, box-shadow .25s;
}
.ball-wrapper, .ball, .loader { transition: none !important; }