/*
 * Züri-Gyn – Onlinebuchung (E-PAT booking, Materialize 0.98)
 * Brand colours sampled from the logo (magenta ≈ #B4006F).
 * Materialize colour utilities (teal, orange, blue-grey, ...) are applied by the
 * React app as classes, so overrides need !important.
 */
:root {
  --zg-primary: #B4006F;
  --zg-primary-dark: #8C0057;
  --zg-primary-deep: #5E003B;
  --zg-primary-soft: #FBEAF4;
  --zg-primary-softer: #FDF5F9;
  --zg-text: #2B2B2B;
  --zg-muted: #8A8A8A;
  --zg-line: #EBDCE5;
  --zg-radius: 10px;
}

body { background: #fff; color: var(--zg-text); }

/* ---------- Header ---------- */
.client-header {
  background: #fff !important;
  border-bottom: 3px solid var(--zg-primary);
  box-shadow: 0 2px 14px rgba(180, 0, 111, .08) !important;
}

/* ---------- Headings ---------- */
h5, h5.grey-text { color: var(--zg-text) !important; font-weight: 500; letter-spacing: .2px; }
.section > .row > .col > h5,
.section > .row > .col.s12 > h5 {
  position: relative;
  padding-bottom: 10px;
}
.section > .row > .col.s12 > h5::after {
  content: "";
  display: block;
  width: 36px; height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--zg-primary);
}
.divider { background-color: var(--zg-line) !important; }

/* ---------- Category tabs ---------- */
.tabs .tab a { color: var(--zg-muted); transition: color .2s, background-color .2s; }
.tabs .tab a:hover,
.tabs .tab a.active { color: var(--zg-primary) !important; background-color: transparent; }
.tabs .indicator { background-color: var(--zg-primary) !important; }

/* ---------- Service cards ---------- */
.service .card {
  border: 1px solid var(--zg-line);
  border-radius: var(--zg-radius);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  overflow: hidden;
}
.service:hover .card {
  border-color: var(--zg-primary);
  box-shadow: 0 6px 18px rgba(180, 0, 111, .15);
  transform: translateY(-2px);
}
.service .card .card-title { font-weight: 500; }
.service .card .card-action { border-top: 1px solid var(--zg-line) !important; }
.service .card .card-action a,
.service .card .card-action a:hover {
  color: var(--zg-primary) !important;
  font-weight: 500;
  letter-spacing: .6px;
}
/* selected service */
.service .card.blue-grey {
  background-color: var(--zg-primary) !important;
  border-color: var(--zg-primary);
}
.service .card.blue-grey .card-action { border-top-color: rgba(255, 255, 255, .3) !important; }
.service .card.blue-grey .card-action a,
.service .card.blue-grey .card-action a:hover { color: #fff !important; }

/* ---------- Provider chips ---------- */
.provider.chip {
  background-color: var(--zg-primary-soft);
  color: var(--zg-text);
  border: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.provider.chip:hover { border-color: var(--zg-primary); }
.provider.chip.teal {
  background-color: var(--zg-primary) !important;
  color: #fff !important;
}

/* ---------- Calendar ---------- */
.calendar .monthHeader .tabs { background: transparent; }
.calendar .monthHeader .tabs .tab a { color: var(--zg-primary) !important; opacity: .6; }
.calendar .monthHeader .tabs .tab a.active,
.calendar .monthHeader .tabs .tab a:hover { opacity: 1; }
.calendar .weekday { color: var(--zg-muted); font-weight: 500; text-transform: uppercase; font-size: .8em; }
.calendar .day span.grey-text { color: #BDBDBD !important; }
.calendar .day span.slot {
  background-color: var(--zg-primary) !important;
  color: #fff !important;
  transition: transform .15s, box-shadow .15s;
}
.calendar .day span.slot:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(180, 0, 111, .4);
}
.calendar .day span.selected {
  background-color: var(--zg-primary-deep) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--zg-primary-soft), 0 0 0 5px var(--zg-primary);
}

/* ---------- Available slots list ---------- */
.slotday .collection {
  border: 1px solid var(--zg-line);
  border-radius: var(--zg-radius);
  overflow: hidden;
}
.slotday .collection-header { background: var(--zg-primary-softer); border-bottom: 1px solid var(--zg-line); }
.slotday .collection .collection-item { border-bottom-color: var(--zg-line); transition: background-color .15s; }
.slotday .collection .collection-item:hover { background-color: var(--zg-primary-softer); }
.slotday .collection .collection-item .material-icons { color: var(--zg-primary); }
.slotday .collection .collection-item .secondary-content,
.slotday .collection .collection-item .secondary-content span { color: var(--zg-primary) !important; }
.slotday .collection .collection-item.selected,
.slotday .collection .collection-item.selected:hover {
  background-color: var(--zg-primary) !important;
  color: #fff !important;
}
.slotday .collection .collection-item.selected .material-icons,
.slotday .collection .collection-item.selected .secondary-content { color: #fff !important; }

/* ---------- Chosen slots ---------- */
.selectedSlots .chip {
  background-color: var(--zg-primary) !important;
  color: #fff !important;
  font-weight: 500;
}

/* ---------- Form ---------- */
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--zg-primary) !important;
  box-shadow: 0 1px 0 0 var(--zg-primary) !important;
}
.input-field input:focus + label,
.input-field textarea:focus + label { color: var(--zg-primary) !important; }
.select-wrapper input.select-dropdown:focus { border-bottom-color: var(--zg-primary) !important; }
.dropdown-content li > span { color: var(--zg-primary); }
.dropdown-content li:hover,
.dropdown-content li.active { background-color: var(--zg-primary-soft); }
[type="checkbox"].filled-in:checked + label:after,
[type="checkbox"]:checked + label:before { border-right-color: var(--zg-primary); border-bottom-color: var(--zg-primary); }
[type="checkbox"].filled-in:checked + label:after { background-color: var(--zg-primary); border-color: var(--zg-primary); }
input.valid:not([type]), input.valid:not([type]):focus,
input[type=text].valid:not([type]), input[type=text].valid:not([type]):focus { border-bottom-color: var(--zg-primary); }

/* ---------- Buttons ---------- */
.btn, .btn-large, .btn-flat.teal {
  background-color: var(--zg-primary) !important;
  border-radius: 999px;
  padding: 0 28px;
  height: 42px;
  line-height: 42px;
  letter-spacing: .8px;
  box-shadow: 0 3px 10px rgba(180, 0, 111, .3);
  transition: background-color .2s, box-shadow .2s;
}
.btn:hover, .btn:focus, .btn-large:hover {
  background-color: var(--zg-primary-dark) !important;
  box-shadow: 0 5px 16px rgba(180, 0, 111, .4);
}
.btn.disabled, .btn[disabled] { background-color: #DFDFDF !important; box-shadow: none; }

/* ---------- Footer ---------- */
.page-footer {
  background-color: var(--zg-primary-softer) !important;
  border-top: 3px solid var(--zg-primary);
}
.page-footer h6, .page-footer strong { color: var(--zg-primary-dark) !important; }
.page-footer .footer-copyright { background-color: transparent !important; }
.page-footer a { color: var(--zg-primary) !important; }

/* ---------- Mobile ---------- */
@media only screen and (max-width: 600px) {
  .btn { width: 100%; }
}