/* TASK-N42 (ruling IT, 23-10-2026): share row, visitor cards, region chips.
   N42c (ruling IX, 23-10-2026): band width, live card box, native share on desktop.
   Tokens only (tokens.css). Loaded on every page: the footer card is everywhere. */

/* Elements the scripts hide or show: the hidden attribute wins over the
   display value of the component (a card is display:flex), by specificity. */
.gpcf-share .gpcf-share-btn[hidden],
.gpcf-vcard[hidden],
.gpcf-chips[hidden],
.card[hidden],
.pcard[hidden],
.hubsec[hidden]{ display:none; }

/* ---------- 1. Share row (HS3) ---------- */
.gpcf-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  margin:var(--space-10) 0 0;
  font-family:var(--font-body);
}
.gpcf-share-h{
  font-weight:var(--weight-bold); font-size:var(--size-label);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--os-muted);
  margin-right:var(--space-2);
}
.gpcf-share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-width:44px; height:44px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--os-line); border-radius:var(--radius-pill);
  background:var(--os-card); color:var(--os-link);
  font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--size-small);
  text-decoration:none; cursor:pointer;
  transition:border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
a.gpcf-share-btn{ padding:0; width:44px; }
.gpcf-share-btn:hover,
.gpcf-share-btn:focus-visible{ border-color:var(--os-accent); color:var(--os-link-hover); text-decoration:none; }
.gpcf-share-btn:focus-visible{ outline:2px solid var(--os-accent); outline-offset:2px; }
.gpcf-share-btn svg{ display:block; flex:none; }
.gpcf-share-native{ background:var(--os-cta); border-color:var(--os-cta); color:var(--os-cta-ink); }
.gpcf-share-native:hover,
.gpcf-share-native:focus-visible{ background:var(--os-cta-hover); border-color:var(--os-cta-hover); color:var(--os-cta-ink); }
/* N42c (ruling IX): the native share sheet is for phones. On a desktop
   (precise pointer that can hover) the button stays hidden, even where the
   browser offers navigator.share. */
@media (hover:hover) and (pointer:fine){
  .gpcf-share-native{ display:none; }
}
.gpcf-share-copy.is-done{ border-color:var(--os-accent); background:var(--os-tint); }
.gpcf-share-status{ font-size:var(--size-caption); color:var(--os-muted); }
.gpcf-share-status:empty{ display:none; }

/* One placement per width: under the header on phones, at the foot of the body on desktop. */
.gpcf-share-top{ display:none; }
@media (max-width:768px){
  .gpcf-share-top{ display:flex; margin:var(--space-7) auto 0; padding:0 16px; max-width:100%; box-sizing:border-box; }
  .gpcf-share-foot{ display:none; }
}

/* ---------- 2. Visitor cards (P3-1) ---------- */
/* The cards are the WP-UserOnline widget turned into a card by the snippet
   "Online Now Widget - Styled Card" and the Cloudflare snippet. Their own
   styles are overridden here so both match the theme's cards. */
.gpcf-vcards{ display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:flex-start; }
.gpcf-vcards-foot{ margin-top:var(--space-8); }
.gpcf-vband{ padding:var(--space-10) 0 0; }
.gpcf-vcard{ margin:0; padding:0; list-style:none; }
/* N42c (ruling IX): the band keeps the page width and gutters on every page,
   not only inside .rates and .pkgpage, and the live card loses the generic
   .widget box of shared-components.css (the card styles come from the snippet). */
.gpcf-vband .wrap{ max-width:var(--content-max); margin:0 auto; padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
@media (max-width:768px){
  .gpcf-vband .wrap{ padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
}
.gpcf-vcard.widget{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.gpcf-vcard .fm-online-widget,
.gpcf-vcard .fm-cf-widget{
  font-family:var(--font-body);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-raised);
  width:280px; max-width:100%;
}
.gpcf-vcard .fm-online-widget .fm-ow-top span,
.gpcf-vcard .fm-cf-widget .fm-cf-top span{
  color:var(--os-link); font-size:var(--size-label); letter-spacing:var(--ls-label);
}
.gpcf-vcard .fm-online-widget .fm-ow-dot{ background:var(--os-accent); }
.gpcf-vcard .fm-online-widget .fm-ow-num,
.gpcf-vcard .fm-cf-widget .fm-cf-main .fm-cf-num{
  font-family:var(--font-display); font-weight:var(--weight-display); color:var(--os-heading);
}
.gpcf-vcard .fm-online-widget .fm-ow-lbl,
.gpcf-vcard .fm-cf-widget .fm-cf-main .fm-cf-lbl{ font-size:var(--size-caption); color:var(--os-muted); }
.gpcf-vcard .fm-online-widget .fm-ow-foot,
.gpcf-vcard .fm-cf-widget .fm-cf-foot{ font-size:var(--size-label); color:var(--os-muted); border-top-color:var(--os-line); }
.gpcf-vcard .fm-cf-widget .fm-cf-item{ background:var(--os-sunken); }
.gpcf-vcard .fm-cf-widget .fm-cf-item .fm-cf-v{ color:var(--os-heading); }
.gpcf-vcard .fm-cf-widget .fm-cf-item .fm-cf-k{ font-size:var(--size-label); color:var(--os-muted); }
.gpcf-vcard .fm-online-widget svg,
.gpcf-vcard .fm-cf-widget svg[stroke]{ stroke:var(--os-accent); }
.gpcf-vcard .fm-cf-widget svg path[fill]{ fill:var(--os-accent); }

/* ---------- 4. Region chips (HW3) ---------- */
.gpcf-chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-10); }
.gpcf-chip{
  min-height:44px; padding:0 var(--space-8);
  border:1px solid var(--os-line); border-radius:var(--radius-pill);
  background:var(--os-card); color:var(--os-link);
  font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--size-small);
  cursor:pointer;
  transition:background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.gpcf-chip:hover{ border-color:var(--os-accent); }
.gpcf-chip:focus-visible{ outline:2px solid var(--os-accent); outline-offset:2px; }
.gpcf-chip[aria-pressed="true"]{ background:var(--os-link); border-color:var(--os-link); color:var(--on-dark); }