/* Titan Healthcare — shared live-admin styles.
   Loaded on every page that includes titan-live-admin.js so the editing
   experience (toolbar, editable outlines, image buttons) looks the same
   everywhere. Uses fixed/neutral colors so it looks right on any page
   theme (navy, amber, teal, etc). */

.titan-admin-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999998;
  border: 1px solid rgba(135, 220, 224, .6);
  border-radius: 999px;
  background: #0a1830;
  color: #fff;
  padding: 12px 16px;
  box-shadow: 0 18px 40px rgba(8, 26, 48, .35);
  font: 800 12px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: .04em;
  cursor: pointer;
  display: none; /* hidden from regular visitors — only shown once logged in */
}
.titan-admin-toggle:hover { transform: translateY(-2px); }
/* The floating pill is never shown — the header "Login"/"Admin" button
   is the single entry point into admin mode, so nothing extra ever
   appears for regular visitors, logged in or not. */

.titan-admin-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid rgba(135, 220, 224, .45);
  border-radius: 12px;
  background: rgba(7, 19, 38, .96);
  box-shadow: 0 18px 40px rgba(8, 26, 48, .45);
}
body.titan-admin-on .titan-admin-panel { display: flex; }
body.titan-admin-on .titan-admin-toggle { display: none; }

.titan-admin-panel strong {
  margin-right: 4px;
  color: #8ee9ed;
  font: 800 12px/1 "IBM Plex Mono", Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.titan-admin-panel button {
  border: 0;
  border-radius: 6px;
  background: #35b8bf;
  color: #031424;
  padding: 10px 12px;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.titan-admin-panel button:hover { filter: brightness(1.05); }
.titan-admin-panel button.titan-danger { background: #f06f6f; color: #fff; }
.titan-admin-panel button.titan-ghost { background: rgba(255, 255, 255, .12); color: #fff; }

body.titan-admin-on [contenteditable="true"] {
  outline: 1px dashed rgba(53, 184, 191, .75);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
}
body.titan-admin-on [contenteditable="true"]:hover {
  outline: 1px dashed rgba(53, 184, 191, 1);
}
body.titan-admin-on [contenteditable="true"]:focus {
  outline: 2px solid #35b8bf;
  background: rgba(53, 184, 191, .08);
}

.titan-img-btn {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 500;
  border: 1px solid #35b8bf;
  border-radius: 6px;
  background: #fff;
  color: #0a1830;
  padding: 6px 9px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(8, 26, 48, .28);
}
.titan-img-btn:hover { filter: brightness(1.03); }

.titan-admin-added-block {
  position: relative;
  margin: 20px auto;
}

.titan-admin-toast {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 999999;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #0a1830;
  color: #fff;
  font: 700 13px/1.4 Inter, system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(8, 26, 48, .4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.titan-admin-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .titan-admin-panel { justify-content: flex-start; overflow-x: auto; }
  .titan-admin-toggle { right: 14px; bottom: 14px; }
}

/* ===== Login modal ===== */
.titan-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 999997;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 19, 38, .55);
  backdrop-filter: blur(2px);
  padding: 20px;
}
.titan-login-overlay.show { display: flex; }

.titan-login-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 28px;
  box-shadow: 0 30px 70px -20px rgba(8, 26, 48, .55);
  font-family: Inter, system-ui, sans-serif;
}
.titan-login-close {
  position: absolute;
  right: 14px;
  top: 14px;
  border: 0;
  background: transparent;
  color: #8a9aa6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.titan-login-close:hover { color: #0a1830; }
.titan-login-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #35b8bf;
  margin-bottom: 6px;
}
.titan-login-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: #0a1830;
  margin-bottom: 6px;
}
.titan-login-sub {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 20px;
}
.titan-login-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 8px;
}
.titan-login-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14.5px;
  color: #0a1830;
  margin-bottom: 6px;
  outline: none;
  transition: border-color .15s ease;
}
.titan-login-card input:focus { border-color: #35b8bf; }
.titan-login-error {
  min-height: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #dc2626;
  margin-bottom: 10px;
}
.titan-login-submit {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #0a1830;
  color: #fff;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: transform .15s ease, background .15s ease;
}
.titan-login-submit:hover { background: #12283f; transform: translateY(-1px); }

/* Shared specialty-page booking popup — matches the home-page journey form. */
.titan-book-overlay { background: rgba(7, 19, 38, .72); backdrop-filter: blur(8px); }
.titan-book-card { max-width: 444px; padding: 34px 36px; border-radius: 13px; text-align: center; }
.titan-book-card .titan-login-close { width: 34px; height: 34px; right: 15px; top: 15px; border-radius: 50%; background: #f3f6fa; color: #4b5563; font-size: 24px; line-height: 1; }
.titan-book-card .titan-book-brand { display: inline-flex; align-items: center; border: 1px solid #ecd28d; border-radius: 999px; padding: 5px 14px; background: #fffaf0; color: #344154; font-size: 12px; letter-spacing: 0; text-transform: none; margin: 0 auto 20px; }
.titan-book-brand em { color: #c99632; font-family: Fraunces, serif; font-weight: 700; margin-left: 4px; }
.titan-book-card h3 { font-family: Inter, sans-serif; font-size: 30px; line-height: 1.12; font-weight: 800; color: #202631; margin: 0 0 8px; }
.titan-book-card .titan-login-sub { color: #6a7280; font-size: 15px; margin: 0 0 24px; }
.titan-book-card form { display: grid; gap: 14px; text-align: left; }
.titan-book-card label { display: none; }
.titan-book-card input, .titan-book-card select { width: 100%; height: 42px; padding: 10px 14px; margin: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #293241; font: 14px Inter, sans-serif; }
.titan-book-card select { appearance: auto; }
.titan-book-card .titan-login-error { margin: -5px 0 -4px; }
.titan-book-card .titan-login-submit { margin: 0; min-height: 44px; border-radius: 5px; background: #2998a7; font-size: 14px; }
.titan-book-card .titan-login-submit:hover { background: #237f8c; }
@media (max-width: 480px) { .titan-book-card { padding: 30px 20px; } .titan-book-card h3 { font-size: 27px; } }

/* Header "Login" button once logged in */
.header-cta .titan-logged-in,
.titan-login-btn.titan-logged-in {
  background: #35b8bf !important;
  border-color: #35b8bf !important;
  color: #031424 !important;
}

/* "Set link" pill next to editable links like "Learn More" */
.titan-link-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid #35b8bf;
  border-radius: 999px;
  background: #fff;
  color: #0a1830;
  padding: 3px 10px;
  font: 800 10px/1.6 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(8, 26, 48, .18);
}
.titan-link-btn:hover { filter: brightness(1.05); }

/* "+ Add card" button shown under each editable card grid in admin mode */
.titan-card-btn {
  display: block;
  margin: 14px auto 30px;
  border: 1.5px dashed #35b8bf;
  border-radius: 10px;
  background: rgba(53, 184, 191, .08);
  color: #0a1830;
  padding: 10px 18px;
  font: 800 12.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.titan-card-btn:hover { background: rgba(53, 184, 191, .16); }

/* "+ Add tag" button next to the hero condition-bubble row */
.titan-tag-btn {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  border: 1.5px dashed rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding: 6px 14px;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.titan-tag-btn:hover { background: rgba(255, 255, 255, .14); }

/* Remove ("x") button on cards and hero tags in admin mode */
.titan-card-remove-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 500;
  width: 26px;
  height: 26px;
  border: 1px solid #f06f6f;
  border-radius: 50%;
  background: #fff;
  color: #a32d2d;
  font: 800 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(8, 26, 48, .28);
}
.titan-card-remove-btn:hover { background: #f06f6f; color: #fff; }

.titan-tag-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: #fff;
  font: 800 9px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  vertical-align: middle;
}
.titan-tag-remove-btn:hover { background: #f06f6f; }

/* "+ Add image" button in the hero banner */
.titan-hero-add-img-btn {
  display: block;
  width: 100%;
  grid-column: 2;
  margin: 12px 0 0;
  border: 1.5px dashed rgba(255, 255, 255, .4);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding: 12px 16px;
  font: 800 12.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.titan-hero-add-img-btn:hover { background: rgba(255, 255, 255, .14); }
.titan-hero-extra-img { grid-column: 2; }
@media (max-width: 980px) {
  .titan-hero-add-img-btn, .titan-hero-extra-img { grid-column: 1; }
}

/* "Set background photo" button on the hero section itself */
.titan-hero-bg-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 500;
  border: 1px solid #35b8bf;
  border-radius: 8px;
  background: #fff;
  color: #0a1830;
  padding: 8px 14px;
  font: 800 11.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(8, 26, 48, .28);
}
.titan-hero-bg-btn:hover { filter: brightness(1.03); }

/* Secondary submit style (image-picker "Use This URL" button) */
.titan-login-submit.titan-ghost-submit {
  background: #fff;
  color: #0a1830;
  border: 1.5px solid #cbd5e1;
  margin-top: 8px;
}
.titan-login-submit.titan-ghost-submit:hover { background: #f8fafc; }

/* Prevent the "flash of old content" — hide the page until saved edits
   (from Firebase, or this browser's local copy) have been applied, then
   reveal it. JS adds .titan-content-ready to <html> once ready; a 2.5s
   safety timeout in the JS guarantees this never leaves the page blank. */
html:not(.titan-content-ready) body { visibility: hidden; }
html.titan-content-ready body { visibility: visible; }