/* ===============================
   PURE CSS STICKY SIDEBAR (IFRAME)
   PropTech Aqua Tab + Electric Blue Glow
   Inter @ 20px + 4s Shine | All HEX
   =============================== */

/* Load Inter (remove if your theme already provides it) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');

/* Tunables */
:root{
  --w: 340px;
  --right: 20px;
  --top: 96px;
  --z: 2147483000;

  --radius: 16px;
  --shadow: 0 12px 30px #0000002e; /* ≈ rgba(0,0,0,0.18) */
  --border: 1px solid #00000014;   /* ≈ rgba(0,0,0,0.08) */
  --bg: #ffffff;

  /* Tab sizing */
  --tabW: 60px;     /* wider tab */
  --tabH: 220px;    /* taller tab */
  --tabFont: 20px;  /* Inter size */

  /* Shine speed */
  --shine-speed: 4s; /* requested */
}

/* Hidden checkbox toggle */
#hs-toggle{ display:none; }

.hs-css-sticky, .hs-css-sticky *{ box-sizing: border-box; }

/* Fixed container (stays on screen while scrolling) */
.hs-css-sticky{
  position: fixed;
  right: var(--right);
  top: var(--top);
  width: var(--w);
  max-height: calc(100vh - var(--top) - 20px);
  z-index: var(--z);
  border-radius: var(--radius);
}

/* Panel uses grid (header/body) to avoid top-gap weirdness */
.hs-css-panel{
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;

  transform: translateX(0);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}

/* Collapsed state via the checkbox */
#hs-toggle:not(:checked) ~ .hs-css-sticky .hs-css-panel{
  transform: translateX(calc(100% + 12px));
  box-shadow: none;
  border-color: transparent;
}
#hs-toggle:not(:checked) ~ .hs-css-sticky{
  width: var(--tabW);
}

/* =========================
   TAB — Aqua Gradient + Electric Blue Glow
   ========================= */
.hs-css-tab{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: var(--tabW);
  height: var(--tabH);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #ffffff;
  font-size: var(--tabFont);
  line-height: 1.1;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;

  /* Subtle 3D edge */
  border: 2px solid #ffffff99; /* 60% white edge */
  box-shadow:
    inset 0 0 0 1px #ffffff40,   /* faint inner rim */

    /* 🔵 Electric Blue multi-layer glow (all HEX+alpha) */
    0 0 28px #53d4ffff,
    0 0 70px #53d4ffb3,
    0 0 110px #53d4ff80;

  /* PropTech aqua gradient */
  background: linear-gradient(180deg, #10acc6 0%, #007ba0 100%) !important;

  filter: saturate(118%);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;

  overflow: hidden;
  outline: none;
}

/* Tab position when expanded */
#hs-toggle:checked ~ .hs-css-sticky .hs-css-tab{
  left: calc(100% - var(--tabW));
}

/* Hover/focus: extra lift + hotter blue glow */
.hs-css-tab:hover,
.hs-css-tab:focus-visible{
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    inset 0 0 0 1px #ffffff40,
    0 0 36px #53d4ffff,
    0 0 90px #53d4ffd9,
    0 0 140px #53d4ff99;
  filter: saturate(140%);
}



/* =========================
   HEADER / BODY
   ========================= */
.hs-css-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid #00000014;
  background: #ffffff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.hs-css-title{
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}
.hs-css-min{
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  user-select: none;
}
.hs-css-min:hover,
.hs-css-min:focus-visible{
  background: #0000000f; /* ≈ rgba(0,0,0,0.06) */
}

.hs-css-body{
  padding: 12px;
  overflow: auto;
  max-height: calc(100vh - var(--top) - 20px - 52px);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================
   Panel Glow When Open (subtle)
   ========================= */
#hs-toggle:checked ~ .hs-css-sticky .hs-css-panel{
  box-shadow:
    0 0 18px #53d4ff59,   /* ~35% */
    0 20px 40px #0000002e; /* base drop shadow */
}



/* =========================
   Mobile: bottom sheet style
   ========================= */
@media (max-width: 768px){
  .hs-css-sticky{
    position: fixed;
    right: 12px;   /* keep on screen right */
    left: auto;    /* stop pushing it left */
    width: auto;
    top: auto;
    bottom: 14px;
    max-height: 70vh;
    z-index: var(--z);
  }

  /* Panel slides up from bottom instead of from the side */
  #hs-toggle:not(:checked) ~ .hs-css-sticky .hs-css-panel{
    transform: translateY(calc(100% + 14px));
  }

  /* Mobile tab button */
  .hs-css-tab{
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    top: auto;

    writing-mode: initial;      /* horizontal text */
    transform: none;
    
    width: auto;
    height: 54px;
    padding: 0 22px;

    border-radius: 999px;
    font-size: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  #hs-toggle:checked ~ .hs-css-sticky .hs-css-tab{
    right: 0;
    left: auto;
    bottom: calc(100% + 12px); /* move above panel when open */
  }

  .hs-css-body{
    max-height: calc(70vh - 56px);
  }
}

/* ===== Mobile cookie-banner avoidance ===== */
:root{
  /* Change this if your banner is taller/shorter */
  --cookie-h: 64px; /* default guess; adjust after a quick eyeball */
}

/* If your cookie tool adds a known element, auto-raise the offset. 
   Uncomment ONE that matches your site (or keep all if unsure). */
/* html:has(#hs-eu-cookie-confirmation){ --cookie-h: 72px; }            /* older HubSpot banner */
/* html:has(.hs-cookie-notification){ --cookie-h: 72px; }               /* newer HubSpot cookie banner */
/* html:has(#onetrust-banner-sdk){ --cookie-h: 80px; }                  /* OneTrust */
/* html:has(.cookie-banner), html:has(.cookies-banner){ --cookie-h: 72px; }  /* generic */

@media (max-width: 768px){
  /* Park the whole widget above the cookie bar + safe area */
  .hs-css-sticky{
    right: 12px;
    left: auto;
    bottom: calc(14px + var(--cookie-h) + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-height: 70vh;
    z-index: var(--z);
  }

  /* Slide the panel up from below its parked bottom */
  #hs-toggle:not(:checked) ~ .hs-css-sticky .hs-css-panel{
    transform: translateY(calc(100% + 14px));
  }

  /* Mobile tab (bottom-right) */
  .hs-css-tab{
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    top: auto;

    writing-mode: initial;
    transform: none;

    width: auto;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 18px;
  }

  /* When open, move the tab just above the panel’s top edge */
  #hs-toggle:checked ~ .hs-css-sticky .hs-css-tab{
    right: 0;
    left: auto;
    bottom: calc(100% + 12px);
  }

  /* Keep the panel’s scroll area sized to the viewport */
  .hs-css-body{
    max-height: calc(70vh - 56px);
  }
}

/* ===== Mobile tab text fix (prevents clipping) ===== */
@media (max-width: 768px){
  .hs-css-tab{
    /* let it grow if needed */
    height: auto;                 /* was fixed */
    min-height: 56px;             /* keep a good touch target */
    padding: 10px 20px;           /* more breathing room */
    font-size: 18px;              /* already reduced on mobile */
    line-height: 1.25;            /* avoid vertical crop */
    white-space: nowrap;          /* keep text on one line */
    overflow: visible;            /* don't crop the text */
    max-width: calc(100vw - 24px - env(safe-area-inset-right)); /* stay within viewport */
    box-sizing: border-box;
  }

  /* ensure the label text itself can expand */
  .hs-css-tab .hs-css-tab-text{
    display: inline-block;
    max-width: 100%;
  }

  /* when panel is open, keep the tab just above it, still full width */
  #hs-toggle:checked ~ .hs-css-sticky .hs-css-tab{
    bottom: calc(100% + 12px);
    right: 0;
    left: auto;
  }
}