/*
========================================================
Snippet Name: Novashare Popup Modal Styling
Author: Arif / ChatGPT

Purpose:
- Styles the Novashare share popup/modal window.
- Creates a cleaner and more premium modal appearance.
- Uses Kawan Elite global colour variables where possible.
- Adds subtle hover/focus interaction for share buttons.
- Adds accessible tooltip labels using each button's aria-label.
- Keeps interactions lightweight and accessibility-friendly.

How to Use:
1. No additional custom classes are required because this snippet
   targets Novashare's native popup IDs and classes directly.

2. Recommended Novashare settings:
   - Button Shape: Rounded
   - Button Size: Small or Medium
   - Minimal networks only
   - Share counts disabled initially

Colour Rules:
- Default button/icon colour:
  var(--ke-ink-4)

- Hover/focus button/icon colour:
  var(--ke-green-2)

Interaction Rules:
- Hover lift:
  translateY(-2px)

- Tooltip source:
  Uses existing aria-label attribute from Novashare buttons.

Accessibility Notes:
- Tooltip also appears on keyboard focus.
- Motion remains subtle and non-distracting.
- Hover/focus states improve usability and discoverability.

Important:
- overflow: visible is REQUIRED on the popup container
  so tooltips are not clipped.
========================================================
*/


/* ==================================

Main Popup Container

================================== */

#ns-share-window {
  width: min(660px, calc(100vw - 32px));
  max-width: 660px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}


/* ==================================

Popup Header

================================== */

#ns-share-window-cta {
  min-height: 52px;
  padding: 0 32px;
  background: #006b3f;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}


/* ==================================

Close Button

================================== */

#ns-share-window-close {
  color: #ffffff;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

#ns-share-window-close:hover,
#ns-share-window-close:focus-visible {
  opacity: 1;
}


/* ==================================

Popup Body

================================== */

#ns-share-window-content {
  padding: 14px 32px 25px;
  background: #ffffff;
}


/* ==================================

Button Grid

================================== */

#ns-share-window .ns-buttons-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: stretch;
  padding-bottom: 15px;
}


/* ==================================

Button Base State

================================== */

#ns-share-window .ns-button {
  display: block;
  width: 100%;
  min-width: 0;
 /* height: auto !important; */
  overflow: visible;
  --ns-btn-color: var(--ke-ink-4);
}


/* ==================================

Button Hover / Focus State

================================== */

#ns-share-window .ns-button:hover,
#ns-share-window .ns-button:focus-visible {
  --ns-btn-color: var(--ke-green-2);
}


/* ==================================

Button Card Styling

================================== */

#ns-share-window .ns-button-wrapper {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px !important;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: none !important;
  overflow: visible;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}


/* ==================================

Button Hover / Focus Effects

================================== */

#ns-share-window .ns-button:hover .ns-button-wrapper,
#ns-share-window .ns-button:focus-visible .ns-button-wrapper {
  background: #f8faf9;
  border-color: var(--ke-green-2) !important;
}


/* ==================================

Icon Size

================================== */

#ns-share-window .ns-button-icon svg {
  width: 14px;
  height: 14px;
}


/* ==================================

Button Label Typography

================================== */

#ns-share-window .ns-button-label-wrapper {
  font-size: 12px;
  font-weight: 500;
}


/* ==================================

Mobile Adjustments

================================== */

@media (max-width: 767px) {

  #ns-share-window {
    width: calc(100vw - 24px);
    max-width: none;
    border-radius: 12px;
  }

  #ns-share-window-cta {
    min-height: 50px;
    padding: 0 16px;
  }

  #ns-share-window-content {
    padding: 14px 16px 18px;
  }

  #ns-share-window .ns-buttons-wrapper {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #ns-share-window .ns-button-wrapper {
    min-height: 42px;
  }

}