/* ================================
   Sage Flats – Sienna widget overrides
   File: /css/aws.css
   ================================ */

/* Theme variables */
:root{
  --asw-btn-bg: #2772b5ba;              /* button background */
  --asw-btn-size: 44px;               /* button diameter */
  --asw-overlay: rgba(0,0,0,.45);
  --asw-shadow: 0 10px 15px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.08);
}

/* Ensure the widget respects box-sizing */
html body .asw-widget,
html body .asw-widget *,
html body .asw-menu,
html body .asw-menu *{
  box-sizing: border-box !important;
}

/* ================================
   FAB (menu button)
   (works for <a> or <div> button)
   ================================ */
html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]){
  position: fixed !important;
  z-index: 500001 !important;

  /* Default desktop placement */
  left: 20px !important;
  bottom: 20px !important;

  width: var(--asw-btn-size) !important;
  height: var(--asw-btn-size) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  outline: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;

  border-radius: 50% !important;
  background: var(--asw-btn-bg) !important;
  box-shadow: var(--asw-shadow) !important;
  transition: transform .2s ease !important;
  opacity: .95 !important;
}

/* Kill any built-in icon the widget or your old JS injected */
html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]) > :is(svg,img){
  display: none !important;
}

/* Use your custom wheel icon (update path if needed) */
html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"])::before{
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: url("/img/wheel_left_wh.svg") no-repeat center / contain;
}
.asw-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2772b5 !important;
    color: #fff;
    padding-left: 12px;
    font-weight: 600;
}
.asw-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2772b5 !important;
    padding: 16px;
    text-align: center;
    color: #fff;
}
/* Optional hover/active feedback */
@media (hover:hover){
  html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]):hover{
    transform: translateY(-1px) !important;
  }
}
html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]):active{
  transform: translateY(1px) !important;
}

/* ================================
   Menu panel & overlay
   ================================ */
html body .asw-widget .asw-menu{
  left: 20px !important;
  bottom: 20px !important;
  border-radius: 14px !important;
}
html body .asw-widget .asw-overlay{
  background: var(--asw-overlay) !important;
}

/* ================================
   Responsive placement
   ================================ */
@media (max-width: 991px){
  html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]){
    left: auto !important;
    right: 10px !important;   /* move to right on tablets/phones */
    bottom: 10px !important;
    background-color: #2772b5ba !important; /* your earlier mobile color */
  }
}
@media (max-width: 767px){
  html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]){
    left: auto !important;
    right: 20px !important;
  }
}

/* ================================
   Accessibility niceties
   ================================ */
@media (prefers-reduced-motion: reduce){
  html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]){
    transition: none !important;
  }
}
html body .asw-widget :is(a.asw-menu-btn[role="button"], div.asw-menu-btn[role="button"]):focus-visible{
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #00484f !important;
}

/* Ensure the widget sits above general UI (adjust if you have higher stacks) */
html body .asw-widget{ z-index: 500000 !important; }