/**
 * TGC prijskaarten + maand/jaar-toggle.
 * Layout = tgctest /workspace; app-iconen = z/w stroke-iconen van staging.
 */

.tgc-plans *{ box-sizing:border-box; margin:0; padding:0; }
.tgc-plans{ font-family:Inter, system-ui, -apple-system, sans-serif; color:#0b0b0b; }

/* Kaarten vullen de hoogte van hun Elementor-kolom, zodat kaarten naast elkaar even hoog zijn. */
.elementor-widget-tgc-plan-card,
.elementor-widget-tgc-plan-card > .elementor-widget-container,
.tgc-plan{ height:100%; }
.tgc-plan{ display:flex; flex-direction:column; container-type:inline-size; }

/* TOGGLE */
.tgc-plans .topbar{ display:flex; justify-content:center; }
.tgc-plans .billing-toggle{ display:inline-flex; align-items:center; background:rgba(0,0,0,.04); border-radius:80px; padding:4px; gap:2px; position:relative; }
.tgc-plans .billing-option,
.tgc-plans .billing-option:hover,
.tgc-plans .billing-option:focus{ appearance:none; border:0; background:transparent; font:inherit; line-height:1.2; padding:8px 20px; border-radius:999px; font-size:14px; font-weight:600; color:rgba(0,0,0,.45); cursor:pointer; transition:all .2s ease; display:flex; align-items:center; gap:6px; user-select:none; white-space:nowrap; box-shadow:none; }
.tgc-plans .billing-option:focus-visible{ outline:2px solid #0b0b0b; outline-offset:2px; }
.tgc-plans .billing-option.active{ background:#fff; color:#0b0b0b; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.tgc-plans .billing-option .discount{ font-size:12px; font-weight:600; color:#6B7280; }

/* CARD */
.tgc-plans .card{ flex:1 1 auto; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:18px; padding:30px 28px 28px; display:grid; grid-template-rows:auto auto auto auto 1fr auto; min-height:570px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:box-shadow .18s ease, border-color .18s ease; }
.tgc-plans .card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); border-color:rgba(0,0,0,.12); }
.tgc-plans .card.family{ border-color:#0b0b0b; }
.tgc-plans .card.family:hover{ box-shadow:0 10px 28px rgba(0,0,0,.12); }

/* TOP — vaste hoogtes, zodat prijs, iconen en kenmerken van naast elkaar staande kaarten op één lijn liggen. */
.tgc-plans .top{ display:flex; flex-direction:column; height:150px; flex-shrink:0; }
.tgc-plans .card.standard .title-row{ min-height:32px; }
.tgc-plans .card.standard .storage-row{ min-height:54px; display:flex; align-items:flex-end; margin-top:4px; }
.tgc-plans .card.family .title-row{ min-height:54px; display:flex; align-items:center; }
.tgc-plans .card.family .storage-row{ min-height:46px; display:block; }
.tgc-plans .card.family .billed-row{ min-height:40px; }
.tgc-plans .preprice-spacer{ height:4px; }
.tgc-plans .price-row{ min-height:30px; }
.tgc-plans .billed-row{ min-height:24px; }

.tgc-plans .plan-name{ font-size:15px; font-weight:700; margin-top:8px; line-height:1.2; color:#0b0b0b; }
.tgc-plans .storage{ font-size:40px; line-height:.95; font-weight:700; letter-spacing:-0.02em; }
/* Titel schaalt mee met de kaartbreedte, zodat "Friends & Family" ook in een smalle kolom op één regel past. */
.tgc-plans .family-title{ font-size:32px; font-size:clamp(22px, 9.5cqi, 32px); line-height:1; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.tgc-plans .users-pill{ display:inline-flex; align-items:center; gap:6px; background:#FBEAFF; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; color:#B026C4; width:fit-content; }
.tgc-plans .users-pill svg{ width:13px; height:13px; stroke:#B026C4; stroke-width:2; fill:none; flex-shrink:0; }
.tgc-plans .price{ font-size:16px; font-weight:700; color:#0b0b0b; letter-spacing:-0.01em; }
.tgc-plans .billed,
.tgc-plans .ncwm-offer-note{ font-size:12px; color:rgba(0,0,0,.4); line-height:1.4; margin-top:1px; }
.tgc-plans .subtitle{ font-size:14px; color:rgba(0,0,0,.62); font-weight:500; line-height:1.4; margin-top:6px; }

/* APP-ICONEN (z/w, kleur bij hover) */
.tgc-plans .app-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; margin-bottom:10px; }
.tgc-plans .app-icon{ position:relative; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:rgba(0,0,0,.04); cursor:default; transition:background .15s ease; }
.tgc-plans .app-icon:hover{ background:var(--icon-color, rgba(0,0,0,.08)); }
.tgc-plans .app-icon svg{ width:13px; height:13px; stroke:#888; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s ease; }
.tgc-plans .app-icon:hover svg{ stroke:var(--icon-stroke, #444); }
.tgc-plans .app-icon::after{ content:attr(data-label); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#0b0b0b; color:#fff; font-size:11px; font-weight:500; white-space:nowrap; padding:4px 8px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:2; }
.tgc-plans .app-icon:hover::after{ opacity:1; }

/* KENMERKEN */
.tgc-plans .features{ list-style:none; display:grid; grid-template-rows:repeat(4, minmax(24px, auto)); row-gap:11px; padding-top:16px; margin-top:16px; align-content:start; border-top:1px solid rgba(0,0,0,.07); }
.tgc-plans .features li{ display:flex; align-items:center; gap:10px; font-size:13.5px; line-height:1.4; color:rgba(0,0,0,.72); min-height:22px; }
.tgc-plans .feat-icon{ width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.tgc-plans .feat-icon svg{ width:14px; height:14px; stroke:#0b0b0b; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* KNOP */
.tgc-plans .btn-spacer{ height:32px; flex-shrink:0; }
.tgc-plans .btn{ width:100%; height:48px; background:#0b0b0b; color:#fff !important; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:600; letter-spacing:.01em; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; border:1px solid transparent; }
.tgc-plans .btn:visited{ color:#fff !important; }
.tgc-plans .btn:hover{ background:#fff; color:#0b0b0b !important; border-color:#0b0b0b; }
.tgc-plans .btn:active{ transform:scale(.98); }

/* Alleen zichtbaar in de Elementor-editor. */
.tgc-plans .tgc-plan-warning{ margin-bottom:10px; padding:10px 12px; border-radius:10px; background:#fcf0f1; border:1px solid #d63638; color:#8a1f1f; font-size:13px; line-height:1.4; }
.tgc-plans .tgc-plan-notice{ background:#fcf9e8; border-color:#dba617; color:#6b5300; }

@media (max-width:700px){
	.tgc-plans .card{ padding:26px 22px; min-height:auto; }
	.tgc-plans .storage{ font-size:38px; }
	.tgc-plans .top{ height:auto; }
	.tgc-plans .title-row,
	.tgc-plans .storage-row,
	.tgc-plans .price-row,
	.tgc-plans .billed-row{ min-height:auto !important; }
	.tgc-plans .btn-spacer{ height:20px; }
	.tgc-plans .features{ grid-template-rows:none; margin-top:14px; }
}