/* ==================== Section(Share Styles - CSS)Start ==================== */
/*  ==================== Section(Share Modal Styles - CSS)Start ==================== 
     Purpose: Make the fallback Share modal visible/usable on desktop & mobile.
     Notes:
       • Uses attribute toggle: [aria-hidden="true"] is hidden; "false" shows the overlay.
       • Namespaced classes (.bd-share-*) to avoid collisions.
       • No changes to your HTML/JS are required beyond Steps 1–2.
     ============================================================================ */

  /* --- Overlay visibility --- */
  .bd-share-modal[aria-hidden="true"] { display: none; }
  .bd-share-modal[aria-hidden="false"] {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: rgba(0,0,0,0.55);
  }

  /* --- Dialog --- */
  .bd-share-dialog {
    width: min(92vw, 480px);
    background: #ffffff;
    color: #111827; /* neutral-900 */
    border-radius: 16px;
    padding: 16px 16px 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.25);
    outline: none;
  }

  /* --- Header + close --- */
  .bd-share-close {
    float: right;
    border: 0; background: transparent;
    font-size: 24px; line-height: 1; cursor: pointer;
    color: #374151; /* neutral-700 */
  }
  .bd-share-heading {
    margin: 4px 0 8px;
    font-size: 18px; font-weight: 700;
  }
  .bd-share-msg {
    margin: 0 0 12px;
    font-size: 14px; color: #4b5563; /* neutral-600 */
  }

  /* --- Copy Row --- */
  .bd-share-copy {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px; margin-bottom: 12px;
  }
  .bd-share-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #e5e7eb; /* neutral-200 */
    border-radius: 10px;
    background: #f9fafb;
  }
  .bd-share-copy-btn {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f3f4f6;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
  }

  /* --- Quick-share chips --- */
  .bd-share-alt { display: flex; flex-wrap: wrap; gap: 8px; }
  .bd-share-chip {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #111827; text-decoration: none;
    font-size: 13px;
  }

  /* --- Feedback --- */
  .bd-share-feedback {
    margin-top: 8px;
    min-height: 1.2em;
    font-size: 13px;
    color: #16a34a; /* green-600 */
  }

  /* --- Optional: inline link aesthetics --- */
  .bd-share-link {
    display: inline-block;
    color: #00ff00; /* Lime-600 */
    text-decoration: underline;
    cursor: pointer;
  }

  /* --- Optional: inline link aesthetics --- */
  .bd-store-link {
    display: inline-block;
    color: #00ff00; /* Lime-600 */
    text-decoration: underline;
    cursor: pointer;
  }


  /* --- Mobile tweaks --- */
  @media (max-width: 480px) {
    .bd-share-dialog { padding: 14px; border-radius: 14px; }
    .bd-share-heading { font-size: 16px; }
    .bd-share-input { font-size: 13px; }
  }

/*  ==================== Section(Share Modal Styles - CSS)End ==================== */

/* ==================== Section(Share Styles - CSS)End ==================== */