:root{
  --bg: #fffefb;
  --text: #0b2540;
  --muted: #6b7b8c;
  --card: #fffdfb;
  --accent1: #fff0f6; /* very light pink */
  --accent2: #e6fbff; /* very light cyan */
  --accent3: #f5eaff; /* light lavender */
  --accent4: #fffdea; /* soft lemon */
  --accent5: #f0fff5; /* mint */
  --btn1: #9fcaff; /* soft blue */
  --btn2: #ffd9e2; /* soft pink */
  --btn3: #e6fbff; /* soft cyan */
  --success: #bfeccf; /* soft green */
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box}body{font-family:Inter,Segoe UI,Arial;background:var(--bg);color:var(--text);margin:0;padding:20px}a{color:var(--btn)}.container, main{max-width:1100px;margin:0 auto;padding:0 18px}body.admin-ui .container, body.admin-ui main{max-width:min(90vw,1600px)}header.site-header{margin-bottom:20px;display:flex;align-items:center;gap:12px}
header.site-header .logo{height:88px}
header.site-header h1{margin:0;font-size:24px}
.lead{color:var(--muted)} .card-grid{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}.card{flex:1;min-width:200px;padding:22px;border-radius:14px;background:linear-gradient(180deg,var(--accent3),var(--accent1));border:1px solid rgba(0,0,0,0.04);cursor:pointer;box-shadow:0 10px 30px rgba(122,167,255,0.08);font-weight:700}.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(122,167,255,0.12)}.hidden{display:none}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.topbar button{background:transparent;border:1px solid var(--accent3);padding:8px 12px;border-radius:8px;cursor:pointer}.progress{flex:1;background:linear-gradient(90deg,var(--accent3),#f8fcff);border-radius:999px;height:12px;overflow:hidden}.progress #progressbar{height:100%;background:linear-gradient(90deg,var(--btn),#00c2ff)}.form-section{background:linear-gradient(180deg,#fff,#fffafc);padding:22px;border-radius:14px;border:1px solid var(--accent3);margin-bottom:16px}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.field{display:flex;flex-direction:column}.field label{font-size:14px;margin-bottom:8px}.field input, .field select, .field textarea{padding:10px;border-radius:10px;border:1px solid #efe9f1;background:#ffffff; box-sizing:border-box}
.field input[type=date], .field input[type=datetime-local]{padding:8px}
textarea{min-height:100px}.field .error-msg{color:#b00020;font-size:12px;margin-top:6px}.invalid{box-shadow:0 0 0 6px rgba(176,0,32,0.06);border-color:#b00020 !important}.small{font-size:13px;color:var(--muted)}.btn{cursor:pointer;background:linear-gradient(90deg,var(--btn1),var(--btn2));color:#08132a;padding:10px 12px;border-radius:12px;border:none;font-weight:800;margin:6px;box-shadow:0 8px 18px rgba(122,167,255,0.06);transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(80,140,255,0.12)}.btn.small{background:linear-gradient(90deg,var(--btn1),var(--btn3));color:#08132a;padding:8px 10px;border-radius:10px;font-size:13px;margin:4px}.actions .btn{margin:4px;padding:8px 10px;border-radius:10px;font-weight:800}.actions .view{background:transparent;color:var(--muted);box-shadow:none}.actions .contact{background:linear-gradient(90deg,#e0f8e6,#b6f1c9);color:#05440d;box-shadow:0 6px 12px rgba(32,160,90,0.06)}.actions .complete{background:linear-gradient(90deg,#e6f5ff,#c7e8ff);color:#003b5c;box-shadow:0 6px 12px rgba(0,110,180,0.06)}.actions .remove{background:linear-gradient(90deg,#ffecec,#ffd1d1);color:#5a0b0b;box-shadow:0 6px 12px rgba(200,40,40,0.05)}
.error-msg{color:#b00020;font-size:12px;margin-top:6px}
.invalid[type="checkbox"],
.invalid[type="radio"]{outline:2px solid #b00020;outline-offset:2px;box-shadow:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(122,167,255,0.12)}
.btn.small{background:linear-gradient(90deg,var(--btn1),var(--btn3));color:#08132a;padding:8px 10px;border-radius:10px;font-size:13px;margin:6px}.muted{color:var(--muted)} .inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline-center{justify-content:center}.inline-between{justify-content:space-between}.inline-start{justify-content:flex-start}.chip{display:inline-block;padding:6px 12px;background:var(--accent2);border-radius:999px;border:1px solid #e8f7ff}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}.list{margin:0;padding:0;list-style:none}.hs-accordion.list{margin-top:10px}.animal-card, .child-card{border:1px dashed #efe9f1;padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#fffafc);margin-bottom:12px}.schedule-card{border:1px dashed #efe9f1;padding:12px;border-radius:10px;background:#fff;margin-bottom:12px}.detail-section{margin-bottom:12px}.detail-section h3{margin:0 0 8px 0;font-size:15px}.detail-list{display:grid;gap:6px;grid-template-columns:160px 1fr}.toggle{display:flex;gap:8px;align-items:center}.footer{margin-top:20px;color:#6b7b8c}

/* Schedule UI spacing */
#schedule-list{margin-top:10px}
.schedule-actions{margin-top:12px;margin-bottom:2px}

/* Center row content inside forms by default */
#form-container form .inline,
#authArea .inline,
#profileArea .inline{
  justify-content:center;
}
#form-container form .inline.inline-between{justify-content:space-between}
#authArea .inline.inline-between{justify-content:space-between}
#profileArea .inline.inline-between{justify-content:space-between}
#form-container form .inline.inline-start{justify-content:flex-start}
#authArea .inline.inline-start{justify-content:flex-start}
#profileArea .inline.inline-start{justify-content:flex-start}

#form-container form .inline label,
#authArea .inline label,
#profileArea .inline label{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.inline > label{display:inline-flex;align-items:center;gap:8px}

/* Prevent form controls from overflowing their containers */
input, select, textarea, button{max-width:100%}
.inline input:not([type="checkbox"]):not([type="radio"]),
.inline select,
.inline textarea{min-width:0;max-width:100%}

input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  vertical-align:middle;
}

.btn.danger{background:linear-gradient(90deg,#ffecec,#ffd7e0);color:#5a0b0b;box-shadow:0 6px 14px rgba(200,40,40,0.06)}
.btn.danger:hover{box-shadow:0 10px 22px rgba(200,40,40,0.10)}

/* Admin toolbar */
.admin-page-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.admin-top-actions-card{padding:14px 16px;background:linear-gradient(135deg,#f8fbff,#fff6ef);border:1px solid rgba(11,37,64,0.08)}
.admin-top-actions{display:flex;align-items:center;gap:12px;justify-content:space-between}
.admin-top-actions__title{font-size:13px;font-weight:800;color:#4a5b74;letter-spacing:0.02em;text-transform:uppercase}
.admin-top-actions__menu{justify-content:flex-end;flex:1 1 auto}
.toolbar{display:flex;align-items:flex-start;gap:16px;padding:14px;background:linear-gradient(90deg,var(--accent5),#fff);border-radius:12px}
.toolbar .controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:1 1 auto}
.toolbar .controls .field{margin:0}
.toolbar .field input[type=date], .toolbar .field input[type=datetime-local]{width:150px;padding:8px;border-radius:8px}
.toolbar .field input[type=search]{width:260px;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:linear-gradient(180deg,#fff,#fffefc)}

/* Mobile burger menus for action button rows */
.hs-actions-wrap{display:flex;gap:8px;align-items:center}
.hs-action-toggle{display:none}
.hs-action-menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Tabs for Active / Archive */
.tabs{display:flex;gap:6px}
/* make tabs visually match toolbar inputs/selects */
.tab{padding:8px 12px;border-radius:8px;border:1px solid #efe9f1;background:linear-gradient(180deg,#fff,#fffefc);cursor:pointer;font-weight:700;color:var(--text);box-shadow:none}
.tab:hover{box-shadow:0 6px 14px rgba(16,90,200,0.04);transform:none}
.tab.active{background:linear-gradient(90deg,var(--btn1),#dff4ff);box-shadow:0 8px 18px rgba(12,115,255,0.06)}

/* Status select in modal */
.status-select{padding:8px 12px;border-radius:10px;border:1px solid #efe9f1;background:linear-gradient(180deg,#fff,#fffefc);font-weight:800;color:var(--text);min-width:180px}
.status-select:focus{outline:none;box-shadow:0 6px 18px rgba(12,115,255,0.08);border-color:rgba(11,105,255,0.18)}

/* Status pills/colors */
.status-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;color:var(--text);background:#f4f7fb;border:1px solid #eef4fb;font-size:12px}
/* ensure known statuses have strong backgrounds and white text */
.status-provisional{background:#6c7bd8;color:#fff}
.status-deposit{background:#ff9f43;color:#2b1b00}
.status-paid{background:#2bb673;color:#fff}
.status-paid-in-full{background:#2bb673;color:#fff}
.status-completed{background:#17a2b8;color:#fff}
.status-cancelled{background:#e74c3c;color:#fff}
.status-blocked-out{background:#000;color:#fff}

/* gantt bar layout: align arrows and title */
.gantt-bar{position:absolute;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;z-index:5;min-height:30px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:13px;line-height:1.1}
.gantt-bar .gantt-title{flex:1;display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.gantt-arrow-left, .gantt-arrow-right{font-size:14px;opacity:0.95}
.gantt-arrow-left{margin-right:8px}
.gantt-arrow-right{margin-left:8px}

/* Admin table */

.admin-table{width:100%;border-collapse:collapse;table-layout:fixed}
.admin-table th,.admin-table td{padding:12px 12px;border-bottom:1px solid #eef3fb;text-align:left;vertical-align:middle;background:transparent}
.admin-table th{font-weight:700;color:#22324a;font-size:13px;background:rgba(255,253,251,0.96)}
.admin-table tr.deleted td{opacity:0.95;text-decoration:none}
.admin-table tr.completed{background:linear-gradient(90deg, rgba(11,105,255,0.04), rgba(0,194,255,0.02))}
.admin-table td.actions{padding-top:10px;padding-bottom:10px;vertical-align:middle}
.admin-table .actions-wrap{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;min-height:40px;width:100%}
.admin-table .actions-wrap .btn,
.admin-table .actions-wrap a.btn{margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:40px;line-height:1.2;text-decoration:none}
.admin-table tbody tr{height:74px}
.admin-table tbody tr:hover{background:rgba(244,249,255,0.96)}
.admin-table tbody tr:hover td{background:transparent}
.admin-table tr.selected{background:linear-gradient(180deg, rgba(224,239,255,0.98), rgba(235,245,255,0.98))}
.admin-table tr.selected td{background:transparent}
.admin-table tr.selected td:first-child{box-shadow:inset 3px 0 0 rgba(11,105,255,0.28)}
.admin-table td .small{display:block;line-height:1.35;margin-top:4px}

.service-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;font-weight:800;font-size:12px;line-height:1.15;border:1px solid rgba(11,37,64,0.08);white-space:nowrap;max-width:100%}
.service-pet-sitting{background:linear-gradient(90deg,#ffb3c6,#ff8aa8);color:#3b1220}
.service-pet-boarding{background:linear-gradient(90deg,#ffd9b3,#ffb06b);color:#3b2208}
.service-pet-visits{background:linear-gradient(90deg,#cfefff,#7fd6ff);color:#053a53}
.service-baby{background:linear-gradient(90deg,#fff0b3,#ffdf8a);color:#3b2f00}
.service-baby-sitting{background:linear-gradient(90deg,#fff4b8,#ffd65a);color:#4b3400}
.service-house-sitting{background:linear-gradient(90deg,#d6ffd9,#9df0b0);color:#053818}
.service-house-visits{background:linear-gradient(90deg,#e9fff7,#bfffe8);color:#0a4f36}
.service-unavailability{background:#000;color:#fff;border-color:#000}
.service-contact{background:linear-gradient(90deg,#e8f0ff,#d6e7ff);color:#16355a}

.report-action-link{min-width:136px;font-weight:900;letter-spacing:-0.1px;box-shadow:0 10px 24px rgba(90,150,255,0.14)}
.report-action-link::after{content:'↗';font-size:12px;margin-left:8px;opacity:0.8}

#table .cell-id{font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
#table .cell-ts{white-space:nowrap;font-variant-numeric:tabular-nums}
#table .cell-client{overflow-wrap:anywhere;word-break:break-word}
#table .cell-type{white-space:nowrap}
#table .cell-status{min-width:0}
#table .cell-type .service-pill{max-width:none}
#table.admin-table{table-layout:fixed}
#table.admin-table tbody tr{height:78px}
#table.admin-table td.actions{min-width:0}
#table.admin-table .actions-wrap{min-width:0}

/* Compact buttons (used in Contact Requests actions) */
.btn.tiny{padding:6px 10px;font-size:12px;border-radius:10px}

.gantt-bar.selected{outline:3px solid rgba(11,105,255,0.45);outline-offset:2px}

/* Gantt */
#gantt{overflow:auto;padding:75px;background:#fff;border-radius:10px;border:1px solid #eaf3ff}
#gantt-inner{position:relative;height:260px}
.gantt-axis{position:relative;height:28px;margin-bottom:6px}
.gantt-tick{position:absolute;top:-35px;font-size:11px;color:#2b3b4f;transform:translateX(-50%);white-space:nowrap}
.gantt-row{position:relative;border-bottom:1px solid #f1f6fb;padding:8px 0;min-height:36px}
.gantt-grid-line{position:absolute;top:0;bottom:0;width:1px;background:rgba(45,66,81,0.06);z-index:0}
.gantt-bar{position:absolute;border-radius:8px;color:#08132a;padding:6px 10px;font-weight:700;cursor:pointer;z-index:5;min-height:30px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-size:13px;line-height:1.1}
.gantt-bar .gantt-title{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.gantt-bar .gantt-sub{display:block;font-size:10px;font-weight:600;opacity:0.9;margin-top:4px}
.gantt-bar.pet{background:linear-gradient(90deg,#ffd1dc,#ffb4c1);color:#2b1b2b}
.gantt-bar.baby{background:linear-gradient(90deg,#fff0b3,#ffdf8a);color:#3b2f00}
.gantt-bar.house{background:linear-gradient(90deg,#e3f8ff,#cfefff);color:#023c4a}
/* specific type colors */
.gantt-bar.pet-sitting{background:linear-gradient(90deg,#ffb3c6,#ff8aa8);color:#3b1220}
.gantt-bar.pet-boarding{background:linear-gradient(90deg,#ffd9b3,#ffb06b);color:#3b2208}
.gantt-bar.pet-visits{background:linear-gradient(90deg,#cfefff,#7fd6ff);color:#053a53}
.gantt-bar.baby-sitting{background:linear-gradient(90deg,#fff4b8,#ffd65a);color:#4b3400}
.gantt-bar.house-sitting{background:linear-gradient(90deg,#d6ffd9,#9df0b0);color:#053818}
.gantt-bar.house-visits{background:linear-gradient(90deg,#e9fff7,#bfffe8);color:#0a4f36}
.gantt-bar.unavailability{background:#000;color:#fff}
.gantt-bar.unavailability .gantt-sub{opacity:0.95}
.gantt-label{font-size:12px;color:#0b2540;display:inline-block;margin-left:6px}
.gantt-grid-line{position:absolute;top:0;height:100%;width:1px;background:rgba(200,210,220,0.6);z-index:0}


/* Modal tables */
.modal-table{width:100%;border-collapse:collapse}
.modal-table td{padding:6px 8px;border-bottom:1px solid #f1f6fb}
.modal-table td:last-child{white-space:pre-wrap}
.modal-table td:first-child{width:180px;color:#4b5d73;font-weight:700}
.modal-section{margin-bottom:12px}

@media(max-width:800px){ .detail-list{grid-template-columns:120px 1fr}.modal-table td:first-child{width:120px} }

/* Responsive toolbar: stack filters on narrow screens */
@media(max-width:880px){
  .toolbar{padding:12px;flex-direction:column;align-items:stretch}
  .toolbar .controls{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar .controls .field{width:100%}
  .admin-top-actions{align-items:flex-start;flex-wrap:wrap}
  .admin-top-actions__title{flex:1 1 auto;padding-top:8px}
  .toolbar .field input[type=search]{width:100%}
  .toolbar .field input[type=date], .toolbar .field input[type=datetime-local]{width:100%}
  .toolbar .field select{width:100%}

  /* Collapse dashboard top actions into a burger menu */
  .hs-action-toggle{display:inline-flex}
  .hs-actions-wrap{position:relative;width:100%;justify-content:space-between}
  .hs-action-menu{display:none !important}
  .hs-actions-wrap.is-open .hs-action-menu{display:flex !important}
  .hs-actions-wrap.is-open .hs-action-menu{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:2500;
    min-width:220px;
    padding:10px;
    border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,250,252,0.92));
    border: 1px solid rgba(11,37,64,0.08);
    box-shadow: 0 16px 40px rgba(122,167,255,0.10);
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    flex-wrap:nowrap;
  }
  .hs-actions-wrap.is-open .hs-action-menu .btn{width:100%;margin:0}
  .hs-actions-wrap.is-open .hs-action-menu a.btn{width:100%;margin:0}
}

@media(max-width:480px){
  body{padding:12px}
  .container, main{padding:0 12px}
  #gantt{padding:12px}
  #gantt-inner{height:auto}
  .gantt-tick{font-size:10px}
  .admin-table th,.admin-table td{padding:8px}
  .admin-table .actions-wrap{justify-content:flex-start;flex-wrap:wrap}
  .admin-table{table-layout:auto}

  /* Stack inline controls cleanly on narrow screens */
  #form-container form .inline input:not([type="checkbox"]):not([type="radio"]),
  #form-container form .inline select,
  #form-container form .inline textarea{flex:1 1 220px;width:100%}
  .swal2-popup.hs-service-modal .btn{margin-left:0;margin-right:0}

  /* Service modal: smaller cards + always single column */
  .swal2-popup.hs-service-modal .form-section{padding:14px}
  .swal2-popup.hs-service-modal .grid{grid-template-columns:1fr}

  /* Radio/choice groups: wrap into clean rows */
  .swal2-popup.hs-service-modal .field .inline{gap:10px}
  .swal2-popup.hs-service-modal .field .inline > label{flex:1 1 220px}

  /* Radio/choice groups should wrap nicely */
  .swal2-popup.hs-service-modal .field .inline{gap:10px}
  .swal2-popup.hs-service-modal .field .inline > label{flex:1 1 220px}
}

/* Pet sitting date rows: align items on one line when possible */
.swal2-popup.hs-service-modal #pet-sit-date-list .inline{align-items:center;justify-content:flex-start;gap:10px;margin-bottom:12px}
.swal2-popup.hs-service-modal #pet-sit-date-list .btn{margin:0}
.swal2-popup.hs-service-modal #pet-sit-date-list input.visit-date{flex:0 0 160px}
.swal2-popup.hs-service-modal #pet-sit-date-list select.visit-type{flex:1 1 220px;min-width:180px}

@media(max-width:480px){
  .swal2-popup.hs-service-modal #pet-sit-date-list .inline{align-items:stretch}
  .swal2-popup.hs-service-modal #pet-sit-date-list input.visit-date{flex:1 1 auto;width:100%}
  .swal2-popup.hs-service-modal #pet-sit-date-list select.visit-type{flex:1 1 auto;min-width:0;width:100%}
}

@media print{
  .toolbar, #logoutBtn, #runBtn, #exportCsvBtn, #printPdfBtn, a.btn{display:none !important}
  body{background:#fff !important}
  .container{max-width:none !important}
  .form-section{box-shadow:none !important;border:1px solid #eef3fb !important}
  table{page-break-inside:avoid}
}

/* fixed global progress */
.global-progress{position:fixed;left:0;right:0;top:0;height:6px;background:#e9f0ff;z-index:9999}
.global-progress #global-progressbar{height:100%;width:0;background:linear-gradient(90deg,#0b69ff,#00c2ff);transition:width 300ms ease}

@media(max-width:640px){.card-grid{flex-direction:column}.topbar{flex-direction:column;align-items:stretch}.form-actions{flex-direction:column-reverse;align-items:stretch}}

/* Additional theme styles for new pet modules */
.card .desc{display:block;font-weight:600;font-size:13px;color:var(--muted);margin-top:8px}
.visit-date{padding:8px;border-radius:8px;border:1px solid #efe9f1;background:linear-gradient(180deg,#fff,#fffefc)}
.visit-type{padding:8px;border-radius:8px;border:1px solid #efe9f1;background:linear-gradient(180deg,#fff,#fffefc);font-weight:700}
.visit-date,.visit-type{max-width:100%}

/* Flatpickr: distinguish past (grey) vs unavailable (red) */
.flatpickr-day.fp-past.flatpickr-disabled,
.flatpickr-day.fp-past.flatpickr-disabled:hover{
  color:#8a8a8a !important;
  text-decoration: line-through;
  opacity: 0.9;
}
.flatpickr-day.fp-unavailable.flatpickr-disabled,
.flatpickr-day.fp-unavailable.flatpickr-disabled:hover{
  color:#b00020 !important;
  text-decoration: line-through;
  opacity: 0.95;
}
.card[data-service="pet-sitting"]{background:linear-gradient(180deg,#fff9f8,#fff0f6)}
.card[data-service="pet-boarding"]{background:linear-gradient(180deg,#fffaf0,#fff6e8)}
.card[data-service="pet-visits"]{background:linear-gradient(180deg,#f0fbff,#e6fbff)}
.card[data-service="house-visits"]{background:linear-gradient(180deg,#f7fff6,#f0fff5)}

/* Delete button for archived items */
.actions .delete{background:linear-gradient(90deg,#ff6b6b,#ff3b3b);color:#fff;border:none;box-shadow:0 8px 18px rgba(255,80,80,0.12);padding:8px 10px;border-radius:10px}
.actions .delete:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,60,60,0.18)}

/* make archived rows look normal (no strike-through) */
.admin-table tr.deleted td{opacity:0.95;text-decoration:none}

/* === 2026-01: Pastel/Playful UI refresh (overrides) === */
:root{--btn: var(--btn1)}

/* Utilities */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

body[data-ui="marketing"]{
  padding: 0;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(120,190,255,0.35), transparent 60%),
    radial-gradient(800px 560px at 85% 20%, rgba(255,180,210,0.30), transparent 62%),
    radial-gradient(900px 700px at 40% 95%, rgba(180,255,225,0.26), transparent 60%),
    linear-gradient(180deg, rgba(248,252,255,1), rgba(255,251,252,1));
}
body[data-ui="marketing"] main.page{max-width:none;margin:0;padding:0}
body[data-ui="marketing"] .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px, 4vw, 56px)}

/* Marketing: slightly more playful/cutesy base type */
body[data-ui="marketing"]{font-size:16px;line-height:1.55}
body[data-ui="marketing"] h1, body[data-ui="marketing"] h2, body[data-ui="marketing"] h3{letter-spacing:-0.5px}
body[data-ui="marketing"] .lead{color:rgba(11,37,64,0.70);font-weight:650}
body[data-ui="marketing"] .global-progress{height:4px; background:rgba(14,45,86,0.10)}
body[data-ui="marketing"] .global-progress #global-progressbar{background:linear-gradient(90deg,#0b69ff,#7c3aed,#00c2ff)}

/* Ensure SweetAlert2 overlays the sticky header */
body[data-ui="marketing"] .swal2-container{z-index:100000 !important}

/* Marketing buttons (keep legacy .btn styling elsewhere) */
body[data-ui="marketing"] .btn{margin:0;border-radius:14px;padding:12px 14px;border:1px solid rgba(11,37,64,0.10);box-shadow:0 10px 30px rgba(11,37,64,0.08);background:rgba(255,255,255,0.70)}
body[data-ui="marketing"] .btn:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(11,37,64,0.12)}
body[data-ui="marketing"] .btn.primary{background:linear-gradient(90deg,#0b69ff,#7c3aed);color:#fff;border-color:rgba(11,105,255,0.22)}
body[data-ui="marketing"] .btn.primary:hover{filter:saturate(1.05)}

/* === Marketing site layout (index.html) === */
header.site-header--marketing{
  width:100%;
}
body[data-ui="marketing"] header.site-header{
  top: 0;
  margin: 0;
  padding: 14px 0;
  border-radius: 0;
  background: rgba(255,255,255,0.72);
  border: 0;
  border-bottom: 1px solid rgba(11,37,64,0.10);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(11,37,64,0.08);
  z-index: 2000;
}
body[data-ui="marketing"] .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:54px}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:900;letter-spacing:0.2px}
.brand-tag{font-size:12px;color:var(--muted);font-weight:700}

.site-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.site-nav a{color:rgba(11,37,64,0.86);text-decoration:none;font-weight:850;font-size:13px;opacity:0.95;padding:8px 10px;border-radius:999px}
.site-nav a:hover{opacity:1;background:rgba(11,37,64,0.05)}
.site-nav .nav-cta{padding:10px 14px;border-radius:999px;background:linear-gradient(90deg, rgba(11,105,255,0.14), rgba(124,58,237,0.12));border:1px solid rgba(11,37,64,0.10);text-decoration:none}
.header-auth{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Account area inside the mobile dropdown (hidden on desktop by default) */
.mobile-auth{display:none}

.nav-toggle{display:none;align-items:center;justify-content:center;padding:10px 12px;border-radius:999px;border:1px solid rgba(11,37,64,0.10);background:rgba(255,255,255,0.70);font-weight:950;color:rgba(11,37,64,0.86);cursor:pointer;box-shadow:0 10px 30px rgba(11,37,64,0.08)}
.nav-toggle:hover{filter:brightness(0.98)}

.band{padding:72px 0}
.band--hero{padding:0 0 76px 0}
.band--tint{background:rgba(255,255,255,0.55)}
.band--cta{background:linear-gradient(90deg, rgba(11,105,255,0.10), rgba(124,58,237,0.10), rgba(0,194,255,0.08))}
.band--form{padding:24px 0}

/* Soft section separators (more website-like flow) */
body[data-ui="marketing"] .band{position:relative}
body[data-ui="marketing"] .band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, transparent, rgba(11,37,64,0.10), transparent)}

.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta h2{margin:0;font-size:28px;letter-spacing:-0.5px}
.cta .lead{margin:8px 0 0 0;max-width:70ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

.hero{margin-top:0;padding:0}
.hero-banner{border-radius:0;box-shadow:none;border:0;max-height:420px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg, rgba(11,105,255,0.08), rgba(124,58,237,0.08), rgba(0,194,255,0.06))}
.hero-banner img{width:100%;height:clamp(240px, 34vw, 420px);object-fit:contain;object-position:center center}
.hero-banner .ph-label{max-width: 920px; margin: 0 auto}

.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:18px;align-items:stretch}
.hero-copy{padding:22px;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72));border:1px solid rgba(11,37,64,0.08);backdrop-filter: blur(14px);box-shadow: 0 22px 60px rgba(11,37,64,0.10)}
.pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(11,37,64,0.08);background:rgba(255,255,255,0.7);font-weight:900;font-size:12px;color:#22324a}
.hero-title{margin:12px 0 8px 0;font-size:clamp(28px, 3.3vw, 44px);line-height:1.08;letter-spacing:-0.4px}
.hero-subtitle{margin:0;color:rgba(11,37,64,0.72);font-size:15px;max-width:62ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-trust{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:16px}
.trust-item{padding:12px 12px;border-radius:16px;border:1px solid rgba(11,37,64,0.08);background:rgba(255,255,255,0.72)}
.trust-item strong{display:block;font-weight:900}
.trust-item span{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-weight:700}

.hero-media{padding:22px;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));border:1px solid rgba(11,37,64,0.08);backdrop-filter: blur(14px);box-shadow: 0 22px 60px rgba(11,37,64,0.08);display:flex;flex-direction:column;gap:12px}
.hero-media .hero-owner{align-self:flex-start}
.hero-photo{flex:1;min-height:280px;padding:10px;border-radius:16px;box-shadow:0 18px 50px rgba(11,37,64,0.10);border:1px solid rgba(11,37,64,0.08);background:rgba(255,255,255,0.35);display:flex}
.hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:8px 10px;border-radius:999px;border:1px solid rgba(11,37,64,0.08);background:rgba(255,255,255,0.75);font-weight:800;font-size:12px;color:#22324a}

.section{margin-top:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.section-head h2{margin:0;font-size:24px;letter-spacing:-0.4px}
.section-head .lead{margin:0}

/* Marketing: placeholder image slots */
body[data-ui="marketing"] .ph{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(11,37,64,0.10);background:rgba(255,255,255,0.70);box-shadow:0 18px 50px rgba(11,37,64,0.08)}
body[data-ui="marketing"] .ph img{display:block;width:100%;height:auto}
body[data-ui="marketing"] .ph-label{position:absolute;left:12px;bottom:12px;right:12px;padding:10px 12px;border-radius:14px;background:rgba(11,18,32,0.68);color:#fff;font-weight:850;font-size:12px;backdrop-filter: blur(10px)}

/* Marketing: services in 2 columns, with alternating left/right media alignment */
body[data-ui="marketing"] #selector.services{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px}
body[data-ui="marketing"] .service-row{display:flex;align-items:stretch;gap:0;border-radius:22px;border:1px solid rgba(11,37,64,0.10);background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.70));box-shadow:0 22px 60px rgba(11,37,64,0.10);overflow:hidden;position:relative}
body[data-ui="marketing"] .service-row::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 200px at 20% 10%, rgba(255,210,230,0.22), transparent 60%),radial-gradient(480px 220px at 80% 0%, rgba(160,210,255,0.18), transparent 60%)}
body[data-ui="marketing"] .service-row__media{flex:0 0 44%;min-height:220px}
body[data-ui="marketing"] .service-row__media img{width:100%;height:100%;object-fit:cover}
body[data-ui="marketing"] .service-row__content{flex:1;position:relative;z-index:1}
body[data-ui="marketing"] .service-row:nth-child(even){flex-direction:row-reverse}
body[data-ui="marketing"] .service-row--contact{grid-column:1 / -1}
body[data-ui="marketing"] .service-row__content{padding:20px}
body[data-ui="marketing"] .service-row__kicker{display:inline-block;font-weight:950;letter-spacing:0.12em;text-transform:uppercase;font-size:11px;color:rgba(11,37,64,0.62);margin-bottom:8px}
body[data-ui="marketing"] .service-row h3{margin:0 0 8px 0;font-size:20px;letter-spacing:-0.4px}
body[data-ui="marketing"] .service-row p{margin:0;color:rgba(11,37,64,0.72);font-weight:650;max-width:70ch}
body[data-ui="marketing"] .service-row .service-points{margin:12px 0 0 0}
body[data-ui="marketing"] .service-row__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
/* Pointer cursor on hoverable marketing cards */
body[data-ui="marketing"] #selector.services .service-row[data-service]:not(.service-row--contact){cursor:pointer}
body[data-ui="marketing"] #selector.services .service-row[data-service]:not(.service-row--contact) *{cursor:pointer}
body[data-ui="marketing"] .service-card{cursor:pointer}
body[data-ui="marketing"] .service-card *{cursor:pointer}
body[data-ui="marketing"] .service-row:hover{transform:translateY(-2px);transition:transform .18s ease}

/* Inline help form (inside the contact service-row) */
body[data-ui="marketing"] #hs-help-inline .hs-inline-help-form textarea{min-height:110px;resize:vertical}
body[data-ui="marketing"] #hs-help-inline .hs-inline-help-form .form-actions .btn{margin:0}
body[data-ui="marketing"] #hs-help-inline .hs-inline-help-form input,
body[data-ui="marketing"] #hs-help-inline .hs-inline-help-form textarea{cursor:text}
body[data-ui="marketing"] #hs-help-inline .hs-inline-help-form button{cursor:pointer}

body[data-ui="marketing"] .gallery-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}

.services-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}
.service-card{border-radius:18px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,250,252,0.90));border:1px solid rgba(11,37,64,0.08);box-shadow:0 18px 50px rgba(11,37,64,0.07);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.service-card:hover{transform:translateY(-3px);box-shadow:0 26px 70px rgba(11,37,64,0.11);border-color:rgba(11,105,255,0.18)}
.service-card h3{margin:10px 0 6px 0;font-size:16px;letter-spacing:-0.1px}
.service-card p{margin:0;color:var(--muted);font-weight:700;font-size:13px;line-height:1.45}
.service-icon{font-size:22px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg, rgba(11,105,255,0.16), rgba(255,180,210,0.18));border:1px solid rgba(11,37,64,0.08)}
.service-points{margin:10px 0 0 0;padding-left:18px;color:#2b3b4f;font-size:13px;font-weight:700}
.service-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.service-card--wide{grid-column:1 / -1;display:flex;align-items:center;gap:14px}
.service-card--wide h3{margin-top:0}
.service-card--wide .service-actions{margin-top:0;margin-left:auto}

.steps{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px}
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(255,255,255,0.70);border:1px solid rgba(11,37,64,0.08)}
.step-num{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;background:linear-gradient(90deg,var(--btn1),var(--btn2));border:1px solid rgba(11,37,64,0.08)}
.step h3{margin:0;font-size:15px}
.step p{margin:6px 0 0 0;color:var(--muted);font-weight:700;font-size:13px}

.pricing{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px}
.price-card{padding:16px;border-radius:16px;background:rgba(255,255,255,0.70);border:1px solid rgba(11,37,64,0.08)}
.price-card h3{margin:0 0 8px 0}
.price{margin:0;font-size:22px;font-weight:950;letter-spacing:-0.3px}

.faq details{border-radius:14px;background:rgba(255,255,255,0.70);border:1px solid rgba(11,37,64,0.08);padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:900}
.faq p{margin:10px 0 0 0;color:var(--muted);font-weight:700}

.footer{margin-top:26px}
.footer-grid{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{font-weight:800;text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* Marketing: full-width footer */
body[data-ui="marketing"] .site-footer{padding:48px 0;background:rgba(11,18,32,0.92);color:rgba(255,255,255,0.88)}
body[data-ui="marketing"] .site-footer .muted{color:rgba(255,255,255,0.70)}
body[data-ui="marketing"] .site-footer a{color:rgba(255,255,255,0.88)}
body[data-ui="marketing"] .site-footer a:hover{color:#fff}
body[data-ui="marketing"] .footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.12);font-weight:800;color:rgba(255,255,255,0.70)}

/* Floating WhatsApp button */
/* Floating social icon stack (WhatsApp/Facebook/Instagram) */
.social-float{position:fixed;right:18px;bottom:18px;z-index:2400;display:flex;flex-direction:column;gap:10px;align-items:center}
.social-float__link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;text-decoration:none;background:transparent;border:none;padding:0}
.social-float__link:hover{transform:translateY(-2px)}
.social-float__link img{width:28px;height:28px;display:block;filter:drop-shadow(0 10px 22px rgba(11,37,64,0.22))}

/* Back-compat: if any old .wa-float remains, make it icon-only */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:2400;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;text-decoration:none;background:transparent;border:none;padding:0}
.wa-float:hover{transform:translateY(-2px)}
.wa-float img{width:28px;height:28px;display:block;filter:drop-shadow(0 10px 22px rgba(11,37,64,0.22))}

/* Reviews carousel */
.reviews-carousel{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(11,37,64,0.08);background:rgba(255,255,255,0.70);padding:14px}
.reviews-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:2px 2px 8px 2px}
.reviews-track:focus{outline:none;box-shadow:0 0 0 6px rgba(11,105,255,0.10);border-radius:14px}
.reviews-track::-webkit-scrollbar{height:10px}
.reviews-track::-webkit-scrollbar-thumb{background:rgba(11,37,64,0.18);border-radius:999px}
.reviews-track::-webkit-scrollbar-track{background:rgba(11,37,64,0.06);border-radius:999px}
.review-card{flex:0 0 calc((100% - 16px) / 2);scroll-snap-align:start;border:1px solid rgba(11,37,64,0.08);border-radius:16px;background:linear-gradient(180deg,#fff,#fffafc);box-shadow:0 14px 34px rgba(11,37,64,0.06);padding:16px 18px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between}
body[data-ui="marketing"] .review-card{cursor:pointer}
.review-card__text{margin:0 0 12px 0;color:#20334a;font-weight:750;white-space:pre-line}
.review-card__meta{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-weight:900;font-size:13px}
.review-card__name{color:var(--text)}
.reviews-nav{position:absolute;top:50%;transform:translateY(-50%);margin:0;box-shadow:0 10px 22px rgba(11,37,64,0.10)}
.reviews-nav--prev{left:10px}
.reviews-nav--next{right:10px}
@media (max-width: 720px){
  .review-card{flex-basis:100%}
  .reviews-nav--prev{left:8px}
  .reviews-nav--next{right:8px}
}

/* SweetAlert2 hosting the full enquiry form */
.swal2-popup.hs-service-modal{padding:14px 14px 16px 14px;width:96vw;max-width:1040px;border-radius:18px}
.swal2-popup.hs-service-modal .swal2-html-container{margin:12px 0 0 0;max-height:calc(100vh - 220px);overflow:auto;overflow-x:hidden;padding:0}
.swal2-popup.hs-service-modal .swal2-title{font-weight:950;letter-spacing:-0.2px}

/* Service modal: prevent inner layout from forcing horizontal scroll */
.swal2-popup.hs-service-modal .grid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.swal2-popup.hs-service-modal .grid > *{min-width:0}
.swal2-popup.hs-service-modal .field{min-width:0}
.swal2-popup.hs-service-modal .field input,
.swal2-popup.hs-service-modal .field select,
.swal2-popup.hs-service-modal .field textarea{width:100%}
.swal2-popup.hs-service-modal .inline input,
.swal2-popup.hs-service-modal .inline select,
.swal2-popup.hs-service-modal .inline textarea{width:auto;max-width:100%}
.swal2-popup.hs-service-modal .form-section{max-width:100%}
.swal2-popup.hs-baby-report-modal .admin-table{table-layout:auto}
.swal2-popup.hs-baby-report-modal .admin-table th,
.swal2-popup.hs-baby-report-modal .admin-table td{vertical-align:top}
.swal2-popup.hs-baby-report-modal .admin-table tbody tr{height:auto}
.swal2-popup.hs-baby-report-modal .admin-table td:last-child,
.swal2-popup.hs-baby-report-modal .admin-table th:last-child{width:120px;min-width:120px}
.swal2-popup.hs-baby-report-modal .baby-report-table-input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #efe9f1;
  background:#fff;
  box-sizing:border-box;
  color:#22324a;
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset;
}
.swal2-popup.hs-baby-report-modal .baby-report-table-input[type=time]{min-width:132px}
.swal2-popup.hs-baby-report-modal .baby-report-table-input:focus{
  outline:none;
  border-color:#b7d3ff;
  box-shadow:0 0 0 4px rgba(122,167,255,0.12);
}
.swal2-popup.hs-baby-report-modal .baby-report-actions{white-space:nowrap}
.swal2-popup.hs-baby-report-modal .baby-report-remove-row{
  margin:0;
  min-width:96px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Ensure mobile overrides win (this block is intentionally after the base modal rules) */
@media(max-width:600px){
  .swal2-popup.hs-service-modal .grid{grid-template-columns:1fr}
  .swal2-popup.hs-baby-report-modal .admin-table th:last-child,
  .swal2-popup.hs-baby-report-modal .admin-table td:last-child{width:108px;min-width:108px}
  .swal2-popup.hs-baby-report-modal .baby-report-remove-row{min-width:84px}
}

/* Keep any Swal popup within viewport on small screens */
.swal2-popup{max-width:96vw}
.swal2-html-container{overflow-wrap:break-word;word-break:normal}
.swal2-html-container pre,
.hs-inline-alert,
.error-msg{overflow-wrap:anywhere;word-break:break-word}

/* In the service modal, don't center radio/inline groups by default */
.swal2-popup.hs-service-modal form .inline:not(.inline-center):not(.inline-between){justify-content:flex-start}

/* Pet sitting date rows: align date/select/remove inline where possible */
.swal2-popup.hs-service-modal #pet-sit-date-list .inline{align-items:center;justify-content:flex-start;gap:10px;margin-bottom:12px}
.swal2-popup.hs-service-modal #pet-sit-date-list .btn{margin:0}
.swal2-popup.hs-service-modal #pet-sit-date-list input.visit-date{flex:0 0 160px}
.swal2-popup.hs-service-modal #pet-sit-date-list select.visit-type{flex:1 1 220px;min-width:180px}

@media(max-width:480px){
  .swal2-popup.hs-service-modal #pet-sit-date-list .inline{align-items:stretch}
  .swal2-popup.hs-service-modal #pet-sit-date-list input.visit-date{flex:1 1 auto;width:100%}
  .swal2-popup.hs-service-modal #pet-sit-date-list select.visit-type{flex:1 1 auto;min-width:0;width:100%}
}

/* inline notice area used when service modal is open (avoid nested Swal popups) */
.hs-inline-alert{margin:10px 0 12px 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(11,37,64,0.10);background:rgba(255,255,255,0.80);font-weight:800}
.hs-inline-alert.is-error{border-color:rgba(176,0,32,0.22);background:rgba(255,236,236,0.85);color:#5a0b0b}
.hs-inline-alert.is-warn{border-color:rgba(255,159,67,0.22);background:rgba(255,248,235,0.85);color:#4b3400}
.hs-inline-alert.is-info{border-color:rgba(11,105,255,0.20);background:rgba(234,243,255,0.88);color:#023c4a}
.hs-inline-alert .hs-inline-alert-title{display:block;font-weight:950;margin-bottom:4px}

.hs-modal-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.78);backdrop-filter: blur(6px);display:flex;align-items:center;justify-content:center;z-index:5;border-radius:14px}
.hs-modal-overlay .hs-modal-overlay-card{width:min(560px, 92%);background:rgba(255,255,255,0.94);border:1px solid rgba(11,37,64,0.10);border-radius:16px;box-shadow:0 24px 60px rgba(11,37,64,0.14);padding:14px}
.hs-modal-overlay .hs-modal-overlay-card h3{margin:0 0 10px 0}
.hs-modal-overlay .hs-modal-overlay-body{max-height:52vh;overflow:auto;padding-right:4px;color:#2b3b4f;font-weight:700}
.hs-modal-overlay .hs-modal-overlay-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

/* Ensure flatpickr appears above SweetAlert2 */
.flatpickr-calendar{z-index: 100001 !important}

/* Sticky top header while filling forms */
header.site-header{
  position: sticky;
  top: 14px;
  z-index: 1200;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.70));
  border: 1px solid rgba(11,37,64,0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(122,167,255,0.10);
}

/* Make form areas read like white cards on a soft gradient */
.form-section,
.animal-card,
.child-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,250,252,0.92));
  border: 1px solid rgba(11,37,64,0.08);
}

/* Accordions for pets & children */
.hs-accordion{display:flex;flex-direction:column;gap:12px}
.hs-acc-item{border:1px solid rgba(11,37,64,0.10);border-radius:14px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,250,252,0.92))}
.hs-acc-item > summary{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-weight:950;letter-spacing:-0.2px}
.hs-acc-item > summary::-webkit-details-marker{display:none}
.hs-acc-item > summary::after{content:'+';font-weight:950;opacity:0.8}
.hs-acc-item[open] > summary::after{content:'–';opacity:0.9}
.hs-acc-body{padding:0 14px 14px 14px}
.hs-acc-sub{font-size:12px;color:var(--muted);font-weight:800}

/* Spacing for add/remove controls inside accordion bodies */
.hs-acc-item .btn.remove,
.hs-acc-item .btn.remove-animal,
.hs-acc-item .btn.remove-child{margin-top:10px}

button#addPet,
button#addChild,
button#addPetEdit,
button#addChildEdit,
button#add-animal,
button#add-child{margin:10px 0}

/* Avoid double borders/background inside accordion items */
.hs-acc-item .animal-card,
.hs-acc-item .child-card{border:none;background:transparent;margin-bottom:0;padding:0}

/* Pastel gradient progress bars (responsive height) */
.progress{
  height: clamp(10px, 2.8vw, 14px);
  min-height: 10px;
  border: 1px solid rgba(11,37,64,0.06);
}
.progress #progressbar{
  background: linear-gradient(90deg, var(--btn1), var(--btn2), var(--btn3));
  transition: width 240ms ease;
}

.global-progress{background: rgba(233,240,255,0.75)}
.global-progress #global-progressbar{background: linear-gradient(90deg, var(--btn1), var(--btn2), var(--btn3))}

.header-back{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(11,37,64,0.10);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  backdrop-filter: blur(10px);
}
.header-back:hover{filter: brightness(0.98)}

@media(max-width:480px){
  header.site-header{top: 10px; padding: 12px 12px}
}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  body[data-ui="marketing"] .gallery-grid{grid-template-columns:1fr}
  body[data-ui="marketing"] #selector.services{grid-template-columns:1fr}
  body[data-ui="marketing"] .service-row{flex-direction:column}
  body[data-ui="marketing"] .service-row:nth-child(even){flex-direction:column}
  .steps{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}

@media(max-width:560px){
  .nav-toggle{display:inline-flex}
  body[data-ui="marketing"] .site-header__inner{position:relative}
  /* Keep all account controls inside the dropdown menu on mobile */
  .header-auth{display:none !important}
  .site-nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 10px);flex-direction:column;align-items:stretch;gap:6px;padding:10px;border-radius:16px;background:rgba(255,255,255,0.92);border:1px solid rgba(11,37,64,0.10);backdrop-filter: blur(16px);box-shadow:0 22px 60px rgba(11,37,64,0.18);z-index:2100}
  .site-nav a{padding:10px 12px;border-radius:12px;font-size:14px}
  body.nav-open .site-nav{display:flex}
    .mobile-auth{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid rgba(11,37,64,0.10)}
    .mobile-auth .auth-status{white-space:normal !important;line-height:1.35}
    .mobile-auth .btn{width:100%;justify-content:center}
  .hero-trust{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .service-card--wide{flex-direction:column;align-items:flex-start}
  .service-card--wide .service-actions{margin-left:0}
}