/* Activations — reached from "For Clients" / the "More" mega menu.
   Reuses the .ph-dd dropdown component from phone-history.css for the
   two filter pills. */
:root{
  --blue-dark:#0f3d28;
  --blue-mid:#1f7a52;
  --blue-bright:#27935f;
  --accent-orange:#f39c1f;
  --header-blue:#0d3322;
}

html,body{height:100%;}
body{background:#eef5f2;display:flex;flex-direction:column;min-height:100vh;}

.act-layout{
  flex:1 0 auto;
  max-width:1650px;
  margin:0 auto;
  padding:32px 16px 60px;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}

.act-content{flex:1 1 620px;min-width:0;}

.breadcrumb{
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:#9fc7b4;
  margin:0 0 10px;
}
.breadcrumb a{color:#9fc7b4;text-decoration:none;}
.breadcrumb a:hover{color:var(--blue-mid);}

.act-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 6px;
}
.act-title-row svg{width:28px;height:28px;flex-shrink:0;color:var(--accent-orange);}
.act-title{
  margin:0;
  text-align:center;
  font-family:var(--font-heading);
  font-size:30px;
  font-weight:700;
  color:var(--blue-dark);
}
.act-subtitle{
  margin:0 0 24px;
  text-align:center;
  font-size:14px;
  font-weight:400;
  color:var(--blue-mid);
}

.act-toolbar{
  position:relative;
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

/* Solid green pill variant of the shared .ph-dd dropdown, for the
   All Countries / All Services filter triggers. Positioned statically
   (instead of inheriting .ph-dd's position:relative) so its panel
   anchors to .act-toolbar rather than to whichever trigger opened it —
   a panel centered on its own trigger can extend past the viewport
   edge when that trigger isn't near the row's horizontal center (e.g.
   the second pill on a narrow screen); centering on the shared,
   already-contained toolbar row is overflow-safe at any width. */
.ph-dd--pill{position:static;width:auto;min-width:180px;}
.ph-dd--pill .ph-dd-trigger{
  justify-content:center;
  padding:12px 24px;
  border-radius:999px;
  background:var(--header-blue);
  border-color:var(--header-blue);
  color:#fff;
  font-weight:600;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.ph-dd--pill .ph-dd-trigger svg{color:#fff;}
.ph-dd--pill .ph-dd-trigger:hover{background:var(--blue-dark);border-color:var(--blue-dark);}
.ph-dd--pill.is-open .ph-dd-trigger{
  background:var(--header-blue);
  border-color:var(--header-blue);
  box-shadow:0 0 0 3px rgba(0,27,92,.25);
}
.ph-dd--pill .ph-dd-panel{
  left:50%;
  right:auto;
  transform:translate(-50%,6px);
  width:min(260px, 100%);
}
.ph-dd--pill.is-open .ph-dd-panel{transform:translate(-50%,0);}

.act-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.act-card{
  position:relative;
  background:#fff;
  border:1px solid #e6e9ec;
  border-radius:16px;
  padding:36px 14px 56px;
  text-align:center;
  box-shadow:0 4px 16px -10px rgba(15,31,61,.22);
}
.act-flag{
  position:absolute;
  top:12px;left:12px;
  width:26px;height:26px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.act-icon{
  position:absolute;
  top:12px;right:12px;
  width:26px;height:26px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.act-icon svg{width:15px;height:15px;}

.act-pcs{font-size:20px;font-weight:700;color:var(--blue-dark);}
.act-pcs-unit{font-size:11px;font-weight:700;color:#8fb3a2;margin-left:3px;text-transform:uppercase;}
.act-total{display:block;margin-top:2px;font-size:10.5px;font-weight:400;color:#9fc7b4;text-transform:uppercase;letter-spacing:.3px;}
.act-price{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--blue-mid);}

.act-buy{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  padding:9px;
  border:none;
  border-radius:999px;
  background:var(--accent-orange);
  color:var(--blue-dark);
  font-family:inherit;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.act-buy:hover{background:var(--header-blue);color:#fff;}
.act-buy:active{transform:translateY(1px);}

.act-empty{
  grid-column:1 / -1;
  padding:40px 20px;
  text-align:center;
  color:var(--blue-mid);
  font-weight:400;
  font-size:13.5px;
}

@media (max-width:820px){
  .act-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:640px){
  .act-grid{grid-template-columns:repeat(2, 1fr);}
  .act-title{font-size:24px;}
}
@media (max-width:400px){
  .act-grid{grid-template-columns:1fr;}
}

/* Match the header's edge-to-edge horizontal inset on mobile (see
   header.css .site-header) so the page content lines up flush with it
   instead of sitting inset relative to it. */
@media (max-width:860px){
  .act-layout{padding-left:4px;padding-right:4px;}
}