/*
 * Share button and menu on the eSIM plan cards
 * (templates/default/dest_v2_plan_card.php, in the card header), loaded
 * site-wide from header.php because the cards show up on many pages and in
 * ajax-loaded blocks.
 * Behaviour: one delegated click handler in js/default/custom.js.
 * Navy #14183A on neutral greys, pink #E8236E as the accent.
 *
 * The dropdown is moved to <body> by UIkit (container: true) while open,
 * so the rules below don't depend on the card around it.
 */

/* ------------------------------------------------------------------ */
/* Share button                                                        */
/* ------------------------------------------------------------------ */
/* Placed by the card header grid (css/product_block_v2.css). */
.ss-share {
   position: relative;
}

/* 44px tap target, 40px visible circle (padding + content-box fill). */
.ss-share-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   margin: 0;
   padding: 2px;
   border: 0;
   border-radius: 50%;
   background: #f4f4f6;
   background-clip: content-box;
   color: #14183A;
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color .15s ease, transform .1s ease, color .15s ease;
}

/* Hover only where there is a real pointer, so it doesn't stick after a tap. */
@media (hover: hover) {
   .ss-share-btn:hover {
      background-color: #ebebef;
      color: #E8236E;
   }
}

.ss-share-btn[aria-expanded="true"] {
   background-color: #ebebef;
   color: #E8236E;
}

.ss-share-btn:active {
   background-color: #e2e2e8;
   transform: scale(.92);
}

.ss-share-btn:focus {
   outline: none;
}

.ss-share-btn:focus-visible {
   box-shadow: inset 0 0 0 2px #E8236E;
}

/* ------------------------------------------------------------------ */
/* Dropdown panel                                                      */
/* ------------------------------------------------------------------ */
.uk-dropdown.ss-share-drop {
   min-width: 220px;
   width: auto;
   padding: 8px;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 12px 32px rgba(20, 24, 58, .14);
   color: #14183A;
   z-index: 1030;
}

.ss-share-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

.ss-share-list > li {
   margin: 0;
   padding: 0;
}

.ss-share-list > li + li {
   margin-top: 2px;
}

/* Rows are links or (Copy link) a button: same look for both. */
.ss-share-item {
   display: flex;
   align-items: center;
   gap: 12px;
   box-sizing: border-box;
   width: 100%;
   min-height: 44px;
   margin: 0;
   padding: 6px 12px 6px 6px;
   border: 0;
   border-radius: 10px;
   background: transparent;
   color: #14183A;
   font-family: inherit;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.2;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color .12s ease;
}

.ss-share-item:hover,
.ss-share-item:focus-visible {
   background: #f6f6f8;
   color: #14183A;
   text-decoration: none;
   outline: none;
}

.ss-share-item:active {
   background: #eeeef2;
}

.ss-share-ico {
   display: inline-flex;
   flex: 0 0 32px;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 9px;
   background: #f4f4f6;
   font-size: 15px;
   line-height: 1;
}

.ss-share-ico-copy { color: #E8236E; }
.ss-share-ico-whatsapp { color: #25D366; font-size: 17px; }
.ss-share-ico-facebook { color: #1877F2; }
.ss-share-ico-x { color: #000; }
.ss-share-ico-email { color: #14183A; }

/* "Copied!" state, set by custom.js for about 1.5s. */
.ss-share-copy.is-copied .ss-share-ico {
   background: #e7f6ec;
   color: #1a8a3f;
}

.ss-share-copy.is-copied .ss-share-label {
   color: #1a8a3f;
}