/* CGOO Country Copy — below-plans English copy section (Layout A pages).
   Desktop: intro head + 2x2 card grid. Mobile: cards stack, fully visible
   (unlike the legacy guide column, this section must show on phones —
   it sits after the plans, so it never blocks buying). */

.cgoo-cc {
  /* The section element is .cgoo-cc — v1.1.0 mistakenly styled the
     .cgoo-country-copy handle name, so the theme's constrained layout
     capped the section at content width (narrow column). Explicit wide
     width here matches the buy block above it. */
  width: 100%;
  max-width: min(1760px, 96vw);
  margin: 8px auto 2.5rem;
  box-sizing: border-box;
  grid-column: 1 / -1;
}
.cgoo-cc-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .6rem;
}
.cgoo-cc-head p {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 70ch;
}
.cgoo-cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.cgoo-cc-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  box-sizing: border-box;
}
.cgoo-cc-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .6rem;
}
.cgoo-cc-card ul {
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.cgoo-cc-card li { margin-bottom: .5rem; line-height: 1.6; font-size: .95rem; }
.cgoo-cc-card p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.65; }
.cgoo-cc-card p:last-child { margin-bottom: 0; }
.cgoo-cc-card a { color: #0f766e; font-weight: 600; }

html.cgoo-dark .cgoo-cc-card { background: #111C2E; color: #E6EDF7; }
html.cgoo-dark .cgoo-cc-card a { color: #2dd4bf; }

@media (max-width: 900px) {
  .cgoo-cc-grid { grid-template-columns: 1fr; }
  .cgoo-cc { margin-bottom: 2rem; }
  .cgoo-cc-head h2 { font-size: 1.3rem; }
}

/* Global tab view (v1.2.6): square tabs, no borders, prefix line icons.
   Inactive tab background is theme-aware: light mode = winter white
   #e2e3e0 (RAL 0000 90 00), dark mode = white #ffffff. Text and icons
   are footer-navy #0a1f33 in both modes. Hover = mid teal, active = deep teal. */
.cgoo-cc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 1rem; }
.cgoo-cc-tab { border: 0; border-radius: 0; padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: .95rem; transition: background .25s, transform .25s; display: inline-flex; align-items: center; gap: 6px; background: #e2e3e0; color: #0a1f33; }
html.cgoo-dark .cgoo-cc-tab { background: #ffffff; color: #0a1f33; }
.cgoo-cc-tab:hover { transform: translateY(-1px); }
.cgoo-cc-tab svg { flex: none; }
.cgoo-cc-tab-panel { display: none; }
.cgoo-cc-tab-panel.cgoo-cc-active { display: block; }
.cgoo-cc-tabs-on .cgoo-cc-grid { display: block; }
.cgoo-cc-tabs-on .cgoo-cc-card { width: 100%; }
@media (max-width: 900px) {
  .cgoo-cc-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .cgoo-cc-tab { flex: 0 0 auto; }
}