/* * Custom styles for LegitEBusiness.com
 *<!-- TEST TO SPEECH - MAKE SURE TO PLACE THIS HTML SNIPET IN BODY SECTION OF THE SITE -->
    
<!-- Advanced Vertical Widget -->
<div class="text-size-widget" aria-label="Text size controls" role="region" aria-roledescription="accessibility widget">
  <div class="ts-drag" aria-hidden="true">⋮⋮</div>

  <button type="button" class="ts-toggle" data-widget-toggle aria-label="Toggle text size controls">
    <span aria-hidden="true">Tt</span>
    <span class="sr-only">Toggle text size controls</span>
  </button>

  <!-- Main Play/Pause Button -->
  <button type="button" class="ts-btn ts-btn-voice ts-btn-control" id="sr-toggle" aria-label="Start screen reader">
    <span id="sr-icon">🔊</span>
  </button>

  <!-- Replay Button -->
  <button type="button" class="ts-btn ts-btn-control" id="sr-replay" aria-label="Replay from start">
    ↺
  </button>

  <button type="button" class="ts-btn ts-btn-increase ts-btn-control" data-text-size="increase" aria-label="Increase text size">A+</button>
  <button type="button" class="ts-btn ts-btn-reset ts-btn-control" data-text-size="reset" aria-label="Reset text size">A</button>
  <button type="button" class="ts-btn ts-btn-decrease ts-btn-control" data-text-size="decrease" aria-label="Decrease text size">A−</button>
</div>

<div id="sr-status" class="sr-status" role="status" aria-live="polite"></div>

 */
  

/* Text to speech generated with Gemini */
  :root {
    --leb-accent: #00c4b4;
    --leb-accent-dark: #009688;
    --leb-accent-soft: rgba(0, 196, 180, 0.18);
  }

  html { font-size: 100%; }
  body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; padding: 2rem; background: radial-gradient(circle at top left, #e8fbf9, #f4f6f8); }
  .content{ max-width:760px; margin:0 auto; background:#fff; padding:2rem; border-radius:16px; box-shadow:0 20px 45px rgba(0,0,0,.06)}
  h1,h2,h3,p{margin-bottom:1rem}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

  /* Widget styles - Forced Vertical & Universal Scoping */
  .text-size-widget {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    display: flex;
    flex-direction: column; 
    align-items: stretch;
    gap: 6px; /* Fixed px to prevent growth */
    padding: 8px; /* Fixed px to prevent growth */
    background: linear-gradient(180deg, var(--leb-accent), var(--leb-accent-dark));
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(7px);
    z-index: 2147483647; 
    color: #fff;
    width: 44px; /* Strictly locked width */
    box-sizing: border-box;
    will-change: transform, left, top;
    touch-action: none;
    font-size: 14px !important; /* Forces fixed font size regardless of HTML scale */
  }
  
  .text-size-widget * {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    flex-shrink: 0;
    font-size: 14px !important; /* Ensures child elements don't grow */
  }
  
  @media(max-height: 500px), (max-width: 600px) {
    .text-size-widget {
      flex-direction: column !important;
      top: 50%;
      left: 10px;
      transform: translate3d(0, -50%, 0) !important;
      padding: 6px;
      gap: 5px;
      width: 40px;
    }
    .text-size-widget .ts-drag {
      width: 100% !important;
      height: 20px !important;
      margin-right: 0 !important;
      margin-bottom: 2px;
    }
  }

  .ts-drag{width:100%;height:22px;border-radius:999px;background:rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;font-size:12px !important;letter-spacing:.12em;text-transform:uppercase}
  .ts-drag:active{cursor:grabbing}
  
  .ts-toggle{border:none;border-radius:999px;padding:6px;width:30px;height:30px;margin: 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);color:#fff;font-weight:600;cursor:pointer;margin-top:4px;transition:background .15s, transform .12s;}
  
  .ts-btn{border:none;border-radius:999px;padding:6px;width:30px;height:30px;margin: 0 auto;display:flex;align-items:center;justify-content:center;background:var(--leb-accent-soft);color:#fff;font-weight:600;cursor:pointer;outline:none; transition: opacity 0.2s;}
  .ts-btn-reset{background:rgba(0,0,0,.22);font-weight:700}
  
  .text-size-widget.collapsed .ts-btn-control{display:none}

  /* status */
  .sr-status{position:fixed;left:1rem;bottom:1rem;background:rgba(0,0,0,.85);color:#fff;padding:.5rem .8rem;border-radius:8px;font-size:14px;z-index:2147483647;display:none;pointer-events:none;}
  .sr-status.visible{display:block}

  ::selection {
    background: #00c4b4;
    color: white;
  }
/* Add any custom utility classes or overrides here */