/* ============================================
   Per-item share: the trigger + its modal
   ============================================

   RTL-authored, like the rest of the public CSS: CssDirectionFlipper mirrors it
   for LTR locales (see css_url). Two rules for living in this file:

   1. NO APOSTROPHES ANYWHERE, comments included. The flipper protects strings by
      scanning for quote characters, so a stray apostrophe in a comment makes it
      skip every declaration until the next one and a whole region ships
      unflipped. styles/ltr-overrides.css documents where that already happened.
   2. Anything the flip MUST get right even when the flip pass fails (it returns
      the RTL file untouched on a write error) is re-asserted by hand at the
      bottom of styles/ltr-overrides.css.

   The sheet CHROME is not here. styles/share.css owns the overlay, the panel,
   the drag handle, the close button, the dividers, the social row, the slider
   arrows, the skeleton, the report row, the powered-by block and the toast, and
   its selectors name #itemSharePopup alongside #sharePopup — so the per-item
   sheet and the page sheet cannot drift apart. What follows is the trigger, and
   only the parts of the sheet that have no equivalent in the page modal.
   ============================================ */

/* ============================================
   1. Trigger
   ============================================ */

.item-share-trigger {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Bare glyph at rest — the tint only appears under the pointer, so the
       trigger never competes with the button label for attention.
       color: inherit and no opacity dimming: it takes the exact text colour of
       whatever it sits on, which is the only thing that works across every
       colour a customer can pick. A faded glyph vanishes on a dark template.
       The flat rgba below is the hover fallback for engines without color-mix. */
    color: inherit;
    background: transparent;
    border: none;
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

.item-share-trigger i {
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

.item-share-trigger:hover,
.item-share-trigger:focus-visible,
.item-share-trigger:active {
    background: rgba(128, 128, 128, 0.18);
    background: color-mix(in srgb, currentColor 18%, transparent);
    outline: none;
}

.item-share-trigger:active {
    transform: scale(0.92);
}

/* --- plain: ordinary .button-main, centred on the inline-end edge --- */
.item-share-trigger--plain {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
}

.item-share-trigger--plain:active {
    transform: translateY(-50%) scale(0.92);
}

/* The trigger lives INSIDE the button, so the label needs room for it. Templates
   set this padding themselves and their inline style block loads after this
   sheet, hence the !important. 36px covers the trigger box (6 + 26) with a
   hairline to spare; templates that already reserved 44-46px lose a few pixels
   nobody sees. */
.button-main:not(.card-button) .overflow-wrap {
    padding-left: 36px !important;
}

/* Buttons carrying the branch open/closed pill (menu extension): the pill is
   absolutely positioned on this same edge, so it moves inboard to clear the
   trigger, with air between the two — 34px clears the widest trigger box (6 +
   26) with room to spare, so the pill never touches it. The label reserve grows
   to match. One value at every width: the pill is the same size on a phone, so
   moving it back out there only made the two controls touch on the screen where
   they are already tightest. Keep these numbers in step with the block in
   styles/user-page-extra.css.

   :has(.item-share-trigger), NOT :has(.item-share-trigger--plain). A CARD button
   carries the inline variant, and its content column is on the leading side of
   the card — the same side the pill is pinned to — so the pill sat directly on
   top of the trigger there. Naming the variant made the rule miss exactly the
   shape where the collision was worst. */
.button-main:has(.item-share-trigger) .status-indicator {
    left: 34px;
}

/* And the card title has to clear the pill in its new place: 34 + roughly 77px
   of pill = 111, against the 38px the content column already reserves for the
   trigger. user-page-extra.css sets 70px here for a pill at 15px. */
.card-button:has(.status-indicator) .card-title {
    margin-left: 76px;
}

.button-main:not(.card-button):has(.status-indicator) .overflow-wrap {
    padding-left: 118px !important;
}

/* The narrow-screen pair of the reserve above — user-page-extra.css drops the
   indicator gap to 80px here, and the pill still starts 28px in. */
@media (max-width: 600px) {
    .button-main:not(.card-button):has(.status-indicator) .overflow-wrap {
        padding-left: 108px !important;
    }
}

/* Buttons that open something in place — multilinks, forms, quick payments —
   carry an open/close chevron on this same edge. The TRIGGER keeps the edge (it
   is in the same place on every item of the page, which is the whole point of
   it) and the chevron steps inboard, so reading outward the visitor passes the
   chevron and then the trigger. multilinks.css owns the first, form.css the
   second; both are overridden here so the two live in one place. */
.multilinks-main .multilinks-chevron,
.button-main .icon-container-left {
    left: 36px;
}

.multilinks-main .overflow-wrap,
.button-main:has(.icon-container-left) .overflow-wrap {
    padding-left: 62px !important;
}

/* --- inline: card-shaped items (card buttons, discount cards, products) ---

   Pinned to the inline-END edge of the CONTENT column and vertically centred,
   so it reads as the same control in the same place as on a plain button. It is
   anchored to .card-content rather than to the card because in a card button the
   card edge is the picture, and a control floating on the artwork is both harder
   to see and easy to hit by accident while scrolling. */
.button-main.card-button:not(.product-card) .card-content {
    position: relative;
    /* Room for the trigger, so a long title never runs underneath it. */
    padding-left: 38px;
}

/* A product card is a different shape again: its content column runs tags,
   title, description, price, countdown, so the middle of THAT column is the
   middle of the text. The description block is the one strip that is always
   present and always short, and centring the trigger on its inline-end edge
   puts the control in the same relationship to the text as on a map card. */
.product-card .card-description {
    position: relative;
    padding-left: 38px;
    min-height: 36px;
}

/* Hard against the edge, like the plain variant, so the control sits in the
   same visual place whichever shape the item is. */
.item-share-trigger--inline {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

.item-share-trigger--inline:active {
    transform: translateY(-50%) scale(0.92);
}

/* Deliberately NOT display:flex here: this block also holds the price row, the
   shop-now link and the countdown, and turning it into a flex container would
   restack all of them. Reserve the room, keep the flow. */

/* --- row: on a map card, centred against the inline-end edge of the info
   block (the strip holding the place name, the address and the directions
   pill). The map itself stays completely clear. --- */
.l1-map-info {
    position: relative;
}

.item-share-trigger--row {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
}

.item-share-trigger--row:active {
    transform: translateY(-50%) scale(0.92);
}

.item-share-trigger--row i {
    font-size: 14px;
}

/* The info block centres its text, so the room for the trigger is taken from
   BOTH sides — padding on one side alone would shift the place name off centre. */
.l1-map-info:has(.item-share-trigger--row) {
    padding-left: 46px;
    padding-right: 46px;
}

.item-share-trigger--row:hover,
.item-share-trigger--row:focus-visible,
.item-share-trigger--row:active {
    background: rgba(127, 127, 127, 0.28);
}

/* --- the item a shared link landed on --- */
.item-share-landed {
    animation: item-share-landed 2.2s ease;
}

@keyframes item-share-landed {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    18%  { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ============================================
   3. Preview block (what replaces the avatar)
   ============================================ */

.item-share-preview {
    padding: 4px 0 2px;
}

.item-share-media {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 10px auto 14px;
    border-radius: 24px;
    overflow: hidden;
    background: #f4f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* The picture LAYERS OVER the glyph rather than sitting beside it. The media box
   is a flex row, so an image that is merely hidden with the [hidden] attribute
   still took a flex slot — .item-share-image { display: block } outranks the user
   agent [hidden] { display: none } — and the sheet showed a half-empty picture
   frame next to a half-size icon. Absolute positioning plus an explicit
   [hidden] rule means there is exactly one thing in that box at any moment. */
.item-share-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-share-image[hidden] {
    display: none;
}

/* The fallback when there is no picture to show: the item icon on a tinted
   tile, which is what the page already uses to identify it. */
.item-share-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6b7280;
}

.item-share-glyph i {
    font-size: 54px;
    line-height: 1;
}

/* Belt and braces: the picture already covers the glyph, but a PNG with a
   transparent background would otherwise let the icon show through it. */
.item-share-media.has-image .item-share-glyph {
    visibility: hidden;
}

/* Waiting on the picture. The icon stays, faded back so it reads as a placeholder
   rather than as the answer, and a ring spins over it. Set by item-share.js while
   the image is in flight — see setImage(). */
.item-share-media.is-image-loading .item-share-glyph {
    opacity: 0.18;
}

.item-share-media.is-image-loading::after {
    content: "";
    position: absolute;
    /* inset:0 + margin:auto centres it on both axes with no left/right in the
       rule at all, so the direction flipper has nothing to mirror and nothing to
       get wrong. A transform would have fought the spin animation. */
    inset: 0;
    width: 34px;
    height: 34px;
    margin: auto;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #6b7280;
    animation: item-share-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes item-share-spin {
    to { transform: rotate(360deg); }
}

/* Respect a visitor who has asked for less motion: keep the ring as a static
   marker that something is pending rather than removing the signal entirely. */
@media (prefers-reduced-motion: reduce) {
    .item-share-media.is-image-loading::after {
        animation: none;
    }
}

/* Type comes from .share-page-title in share.css — the element carries both
   classes so the two sheets read the same. Only what is genuinely different
   here is stated: a link title can be one unbroken URL, which the page title
   never is. */
.item-share-title {
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

.item-share-desc {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 6px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    /* Three lines is a preview; more is the page itself. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-share-desc:empty {
    display: none;
}

.item-share-host {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #9ca3af;
    text-decoration: none;
    direction: ltr;
    unicode-bidi: isolate;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-share-host:hover {
    color: #6b7280;
    text-decoration: underline;
}

/* Exactly the trap described above .item-share-image, and missed here: an author
   `display: inline-flex` outranks the user agent's [hidden] { display: none }, so
   elHost.hidden = true hid nothing at all. One modal is repopulated per item, so
   the PREVIOUS item's address simply stayed on screen — open a map card, then a
   multilink / form / quick-payment item that has no address of its own, and
   "google.com" was still sitting under the new title. */
.item-share-host[hidden] {
    display: none;
}

/* ============================================
   4. Everything else is share.css
   ============================================

   The sheet chrome — overlay, panel, drag handle, close button, dividers,
   social row, slider arrows, skeleton, report row, powered-by, toast — is NOT
   restated here. styles/share.css owns it and its selectors name both sheets,
   so the per-item modal and the page modal cannot drift apart. What follows is
   only the handful of places where this sheet needs something the page sheet
   has no equivalent of. */

/* The preview picture is a rounded square, not a circle: it is a link card,
   not a face. Its skeleton has to agree. */
.share-skeleton .sk-avatar-square {
    border-radius: 24px;
}

/* Copy button: .btn-submit from share.css, widened to fill the row and given
   room for its icon. */
.item-share-copy-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 13px;
}

/* Confirmation is the icon becoming a tick and the label changing for a moment.
   The button keeps its own colour and returns to its resting label by itself —
   a control left in a success colour reads as a mode nobody can get out of. */
.item-share-copy-btn.copied i::before {
    content: "\f00c";       /* fa-check */
}