/* Asset version: 2026.04.16-1 */

/*  Contact Widget  */
:root {
  --contact-gap: clamp(16px, 3.5vmin, 28px);
  --contact-radius: clamp(12px, 1.6vmin, 18px);
  --contact-font: clamp(18px, 2vmin, 18px);
  --contact-card-max: min(94vw, 560px);
}

/* Container */
.contact-widget {
  position: fixed;
  right: var(--contact-gap);
  bottom: var(--contact-gap);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Collapsed button (styled like the card) */
.contact-fab {
  all: unset;
  box-sizing: border-box;
  background: rgba(255,255,255,0.9);
  color: #111;
  font-weight: 700;
  font-size: var(--contact-font);
  padding: clamp(12px, 1.8vmin, 16px) clamp(16px, 2vmin, 20px);
  border-radius: var(--contact-radius);
  cursor: pointer;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centered label */
  min-width: clamp(150px, 20vmin, 220px);
  transition: transform .12s ease, box-shadow .18s ease;
}
.contact-fab:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(0,19,40,.08), 0 14px 32px rgba(0,0,0,.12);
}
.contact-fab:active { transform: translateY(0); }
.contact-widget.open .contact-fab { display: none; }

/* Card (auto height + content width) */
.contact-card[hidden] { display: none !important; }
.contact-card {
  display: block; /* simple block layout, header chrome + main below */
  width: auto;
  max-width: var(--contact-card-max);
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-radius: var(--contact-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.18);
  padding: clamp(12px, 1.8vmin, 18px);
  color: #111;
  transform-origin: bottom right;
  transform: scale(.98);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.contact-widget.open .contact-card { opacity: 1; transform: scale(1); }

/* Top chrome: title left, clean X pinned top-right */
.card-chrome {
  position: relative;
  padding-right: 36px; /* room for X */
  margin: 0 0 clamp(8px, 1.6vmin, 12px) 0;
}
.card-chrome h3 {
  margin: 0;
  line-height: 1.05;
  font-size: clamp(16px, 2.2vmin, 22px);
  color: #6b6b6b; /* muted grey for the Contact title */
}
.contact-close {
  all: unset;
  position: absolute;
  top: 0;
  right: 0;
  width: 21px;   /* 75% of previous 28px */
  height: 21px;  /* 75% of previous 28px */
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #111;
}
.contact-close svg { display: block; width: 100%; height: 100%; }
.contact-close svg path { stroke-width: 1.4px; /* slightly thinner for smaller X */ }
.contact-close:hover { color: #000; }

/* Main content: sits below chrome, uses same link style as before */
.contact-card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vmin, 16px);
  margin: 0;
}

.contact-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: clamp(10px, 1.6vmin, 14px);
  border-radius: calc(var(--contact-radius) - 4px);
  background: rgba(255,255,255,0.95);
  box-shadow: inset 0 0 0 1px rgba(0,19,40,.06), 0 6px 14px rgba(0,0,0,.06);
  color: #001328;
  transition: transform .12s ease, box-shadow .18s ease;
}
.contact-link:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0,19,40,.10), 0 14px 28px rgba(0,0,0,.08); }

.contact-link .label { font-size: clamp(12px, 1.6vmin, 14px); font-weight: 700; color: #0d1b31; text-transform: uppercase; letter-spacing: .04em; }
.contact-link .value { font-size: clamp(16px, 2.2vmin, 20px); font-weight: 600; color: #111; }

/* Small screens: ensure the card remains usable */
@media (max-width: 480px) {
  .contact-card { max-width: 94vw; }
  .contact-fab { min-width: 140px; }
}

/* Contact widget inline icon */
.contact-icon {
  display: inline-block;
  margin-left: clamp(8px, 1.2vmin, 12px);
  flex: 0 0 auto;
  color: #111; /* inherits from parent, adjust if needed */
}

/* ensure the phone value aligns icon to the right of the number, vertically centered */
.contact-link .value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* smaller icon on very small screens */
@media (max-width: 480px) {
  .contact-icon { width: 16px; height: 16px; margin-left: 8px; }
}