/**
 * GenD — Shared customer-surface styling.
 *
 * Loaded on:
 *   - [wu_checkout slug=gdc-membership-launch] (the launch shortcode)
 *   - /my-account/memberships/ list + per-membership detail
 *   - Site Edit (network admin) container migration + domain panels
 *
 * Defines hosting-type tokens + a badge / tag component so the same
 * "Networked / Server / Containers / Self-Hosted" labels show the
 * same color language wherever they appear.
 *
 * Other plugins that want to render the same badge can use:
 *   <span class="gdc-subgroup-tag gdc-subgroup-tag--containers">Containers</span>
 *
 * Domain stage tags use a parallel palette:
 *   <span class="gdc-domain-stage gdc-domain-stage--checking-dns">…</span>
 *   <span class="gdc-domain-stage gdc-domain-stage--done">Live · HTTPS</span>
 *
 * @package WP_Ultimo
 * @since   2.3.x
 */

:root {
    /* Hosting-type palette — picked along the "infrastructure
       intensity" gradient: shared compute → dedicated server →
       container per-site → fully external (your own host). */
    --gdc-sg-networked-bg:   rgba(34, 113, 177, 0.12);
    --gdc-sg-networked-fg:   #2271b1;
    --gdc-sg-server-bg:      rgba(217, 119, 6, 0.12);
    --gdc-sg-server-fg:      #d97706;
    --gdc-sg-containers-bg:  rgba(8, 145, 178, 0.12);
    --gdc-sg-containers-fg:  #0891b2;
    --gdc-sg-selfhosted-bg:  rgba(124, 58, 237, 0.12);
    --gdc-sg-selfhosted-fg:  #7c3aed;

    /* Domain stage palette */
    --gdc-stage-pending-bg:  rgba(217, 119, 6, 0.12);
    --gdc-stage-pending-fg:  #b45309;
    --gdc-stage-issuing-bg:  rgba(34, 113, 177, 0.12);
    --gdc-stage-issuing-fg:  #1e40af;
    --gdc-stage-live-bg:     rgba(22, 163, 74, 0.12);
    --gdc-stage-live-fg:     #16803c;
    --gdc-stage-failed-bg:   rgba(220, 38, 38, 0.12);
    --gdc-stage-failed-fg:   #b91c1c;
}

/* ── Hosting-type tag ─────────────────────────────────────────── */

.gdc-subgroup-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(127, 127, 127, 0.12);
    color: #4b5563;
}

.gdc-subgroup-tag--networked {
    background: var(--gdc-sg-networked-bg);
    color:      var(--gdc-sg-networked-fg);
}
.gdc-subgroup-tag--server {
    background: var(--gdc-sg-server-bg);
    color:      var(--gdc-sg-server-fg);
}
.gdc-subgroup-tag--containers {
    background: var(--gdc-sg-containers-bg);
    color:      var(--gdc-sg-containers-fg);
}
.gdc-subgroup-tag--self_hosted,
.gdc-subgroup-tag--self-hosted {
    background: var(--gdc-sg-selfhosted-bg);
    color:      var(--gdc-sg-selfhosted-fg);
}

/* ── Domain stage tag ─────────────────────────────────────────── */

.gdc-domain-stage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(127, 127, 127, 0.12);
    color: #4b5563;
}

.gdc-domain-stage--checking-dns {
    background: var(--gdc-stage-pending-bg);
    color:      var(--gdc-stage-pending-fg);
}
.gdc-domain-stage--checking-ssl-cert {
    background: var(--gdc-stage-issuing-bg);
    color:      var(--gdc-stage-issuing-fg);
}
.gdc-domain-stage--done,
.gdc-domain-stage--live {
    background: var(--gdc-stage-live-bg);
    color:      var(--gdc-stage-live-fg);
}
.gdc-domain-stage--done-without-ssl {
    background: var(--gdc-stage-pending-bg);
    color:      var(--gdc-stage-pending-fg);
}
.gdc-domain-stage--failed {
    background: var(--gdc-stage-failed-bg);
    color:      var(--gdc-stage-failed-fg);
}

/* ── Pricing-table tabs (launch shortcode) — visual polish ───── */

.gdc-pt-wrap .gdc-pt-tab {
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gdc-pt-wrap .gdc-pt-tab:hover {
    background: #fff !important;
}
.gdc-pt-wrap .gdc-pt-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gdc-pt-wrap .gdc-pt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}