/* TTST Sonaar Off-Canvas SVG Logo Size v1.1.0
   Affects only Sonaar's sr-offcanvas widget when its selected icon is a custom SVG.
   Does NOT touch the sr-e-menu hamburger or the off-canvas panel functionality. */

/* Inline SVG from Elementor icon control or custom logo image inside Sonaar trigger. */
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle-wrap svg,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle svg,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle-wrap img,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle img {
  width: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px)) !important;
  height: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px)) !important;
  min-width: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px)) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Ensure the SVG's direct icon holder scales with it, rather than clipping it to a
   legacy font-icon width. This does not resize any navigation panel. */
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle-wrap .elementor-icon,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle .elementor-icon {
  width: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px)) !important;
  height: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px)) !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent the icon itself from being cut off by the clickable toggle. */
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle-wrap > button,
.elementor-widget-sr-offcanvas.ttst-sonaar-svg-size-fix .sr-offcanvas-toggle-wrap > a {
  min-height: max(44px, var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, 40px))) !important;
  height: auto !important;
  overflow: visible !important;
}


/* v1.1.0 — TTST Icon Replacer places a CSS mask directly on the clickable
   .sr-offcanvas-toggle and hides the original SVG. This is the *visible* logo.
   Keep styling scoped to the original sr-offcanvas widget with the selected
   SVG icon; no global .ttst-icon-replacer-mask override. */
.elementor-widget-sr-offcanvas
  .sr-offcanvas-toggle.ttst-icon-replacer-active {
  position: relative !important;
  min-width: max(44px, var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px)))) !important;
  min-height: max(44px, var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px)))) !important;
  height: auto !important;
  box-sizing: border-box;
  overflow: visible !important;
}

/* The replacer uses a span as the visible glyph, not an <img> or <svg>.
   Explicit sizing and centering prevent its older inset:0/100% overlay
   dimensions from overriding Elementor's icon-size setting. */
.elementor-widget-sr-offcanvas
  .sr-offcanvas-toggle.ttst-icon-replacer-active
  > .ttst-icon-replacer-layer.ttst-icon-replacer-mask {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px))) !important;
  height: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px))) !important;
  min-width: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px))) !important;
  min-height: var(--ttst-sonaar-svg-logo-editor-size, var(--ttst-sonaar-svg-logo-size, var(--ttst-sonaar-offcanvas-default-logo-size, 40px))) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  pointer-events: none !important;
  box-sizing: border-box;
}