/* IGMM Academy — front-end pieces. Colours follow the theme when it defines these presets. */
:root {
	--igmm-ink: var(--wp--preset--color--forest, var(--wp--preset--color--ink, #102a24));
	--igmm-accent: var(--wp--preset--color--green, #1f7a5a);
	--igmm-soft: var(--wp--preset--color--mint, #eef5f0);
	--igmm-line: var(--wp--preset--color--line, #d9e3dd);
	--igmm-muted: var(--wp--preset--color--muted, #5f6f68);
	--igmm-warn: #9a6200;
	--igmm-ok: #12753f;
}
.igmm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--igmm-ink); color: #fff !important; font-weight: 700; text-decoration: none !important; border: 0; cursor: pointer; }
.igmm-btn:hover { opacity: .92; }
.igmm-btn.is-off { background: #c9d2ce; cursor: default; }
.igmm-btn.is-tg { background: #229ed9; }
.igmm-empty { color: var(--igmm-muted); background: var(--igmm-soft); border-radius: 12px; padding: 14px 16px; }
.igmm-pending { color: var(--igmm-warn); font-weight: 600; }

/* receipt */
.igmm-receipt { border: 1.5px solid var(--igmm-line); border-radius: 16px; padding: 20px; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.igmm-receipt h2 { margin: 0; font-size: 1.3em; }
.igmm-steps { margin: 0; padding-inline-start: 20px; }
.igmm-account { margin: 0; display: grid; gap: 8px; }
.igmm-account > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; background: var(--igmm-soft); border-radius: 10px; padding: 10px 14px; }
.igmm-account dt { color: var(--igmm-muted); }
.igmm-account dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.igmm-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.igmm-upload label { font-weight: 700; width: 100%; }
.igmm-upload input[type=file] { flex: 1 1 240px; min-width: 0; border: 1.5px dashed var(--igmm-line); border-radius: 10px; padding: 10px; background: #fff; }
.igmm-upload button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--igmm-ink); color: #fff; font-weight: 700; cursor: pointer; }
.igmm-ok { color: var(--igmm-ok); font-weight: 700; margin: 0; }
.igmm-err { color: #b42318; margin: 0; }
.igmm-receipt-desc p { margin: 0; }

/* course page */
.igmm-course-box { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto !important; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--igmm-soft); border-radius: 14px; padding: 14px 16px; margin: 0 0 20px; }

/* watermark */
.igmm-wm { position: absolute; z-index: 30; pointer-events: none; user-select: none; color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.45); font-size: 13px; font-weight: 600; white-space: nowrap; transition: top 1.2s ease, left 1.2s ease; direction: ltr; }
.igmm-demo-video { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #102a24; color: #cfe3d8; border-radius: 10px; font-weight: 600; padding: 20px; text-align: center; }

/* verify */
.igmm-verify { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.igmm-verify-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.igmm-verify-form div, .igmm-registry-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.igmm-verify-form input, .igmm-registry-form select { flex: 1 1 220px; min-width: 0; min-height: 48px; border: 1.5px solid var(--igmm-line); border-radius: 10px; padding: 0 14px; font: inherit; }
.igmm-verify-form button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--igmm-ink); color: #fff; font-weight: 700; cursor: pointer; }
.igmm-result { border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.igmm-result.is-ok { background: #e8f6ee; border: 1.5px solid #8fd1ab; }
.igmm-result.is-ok strong { color: var(--igmm-ok); }
.igmm-result.is-no { background: #fdeceb; border: 1.5px solid #f2b8b3; }
.igmm-result small { color: var(--igmm-muted); }

/* registry */
.igmm-registry { display: flex; flex-direction: column; gap: 16px; }
.igmm-registry-form label { font-weight: 700; }
.igmm-grads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.igmm-grad { border: 1px solid var(--igmm-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.igmm-grad ul { margin: 4px 0 0; padding-inline-start: 18px; color: var(--igmm-muted); font-size: .92em; }
.igmm-where { color: var(--igmm-accent); font-weight: 600; }
.igmm-phone { font-weight: 700; }

/* workshops */
.igmm-workshops { display: flex; flex-direction: column; gap: 12px; }
.igmm-ws { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border: 1px solid var(--igmm-line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.igmm-ws-date { flex-shrink: 0; width: 70px; text-align: center; background: var(--igmm-ink); color: #fff; border-radius: 12px; padding: 8px 0; line-height: 1.2; display: flex; flex-direction: column; }
.igmm-ws-date b { font-size: 24px; }
.igmm-ws-date span { font-size: 13px; opacity: .8; }
.igmm-ws-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.igmm-ws-info a { color: inherit; text-decoration: none; }
.igmm-ws-info span { color: var(--igmm-muted); font-size: .92em; }
.igmm-ws-seats { flex: 0 1 190px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .92em; color: var(--igmm-accent); }
.igmm-ws-seats i { display: block; height: 8px; border-radius: 99px; background: var(--igmm-soft); overflow: hidden; }
.igmm-ws-seats b { display: block; height: 100%; background: currentColor; }
.igmm-ws-seats.is-low { color: #b42318; }
.igmm-ws-urgent { flex: 0 1 260px; display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 8px 14px; border-radius: 999px; background: #fdf3e7; color: #8a4b0f; font-size: .9em; font-weight: 700; line-height: 1.4; }
.igmm-ws-urgent::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #e08a2e; animation: igmmPulse 1.6s ease-in-out infinite; }
.igmm-ws-urgent.is-last { background: #fdecea; color: #b42318; }
.igmm-ws-urgent.is-last::before { background: #b42318; }
.igmm-ws-seats.is-full { color: #6b7a73; }
@keyframes igmmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .igmm-ws-urgent::before { animation: none; } }
.igmm-ws-buy { display: flex; align-items: center; gap: 12px; }
.igmm-ws-price { font-weight: 800; white-space: nowrap; }
.igmm-ws.is-full { opacity: .65; }

/* my certificates */
.igmm-mycerts { display: grid; gap: 10px; }
.igmm-mycert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border: 1px solid var(--igmm-line); border-radius: 14px; padding: 14px 16px; }
.igmm-code { font-family: ui-monospace, Menlo, monospace; color: var(--igmm-muted); }
.tutor-video-player .igmm-demo-video { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

/* language switcher (the theme restyles it in the header) */
.igmm-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1.5px solid var(--igmm-line); border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1; }
.igmm-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 8px; border-radius: 999px; color: inherit; text-decoration: none; }
.igmm-lang a.is-current { background: var(--igmm-ink); color: #fff; }

.igmm-lock { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--igmm-ink); }
.igmm-lock::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Bunny Stream player */
.igmm-bunny { position: relative !important; background: #000; width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 0 16px !important; overflow: hidden; }
.igmm-bunny-ratio { position: relative !important; width: 100% !important; height: 0 !important; padding-top: 56.25% !important; aspect-ratio: auto; overflow: hidden; }
.igmm-bunny-ratio iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; border: 0 !important; display: block; }
@supports (aspect-ratio: 16 / 9) {
	.igmm-bunny-ratio { height: auto !important; padding-top: 0 !important; aspect-ratio: 16 / 9 !important; }
}
@media (max-width: 782px) {
	.igmm-bunny, .igmm-bunny-ratio { min-height: 0 !important; }
}

/* receipt under review: a calm status card instead of a plain line */
.igmm-course-box .igmm-pending { display: inline-flex; align-items: center; gap: 10px; background: #fff8e6; border: 1px solid #f0d28a; color: #7a5200; padding: 10px 14px; border-radius: 14px; font-weight: 700; line-height: 1.6; }
.igmm-course-box .igmm-pending::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #e0a526; animation: igmm-pulse 2s ease-out infinite; }
.igmm-course-box .igmm-pending + .igmm-btn { min-height: 40px; }
@keyframes igmm-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,165,38,.55); } 70% { box-shadow: 0 0 0 10px rgba(224,165,38,0); } 100% { box-shadow: 0 0 0 0 rgba(224,165,38,0); } }
@media (prefers-reduced-motion: reduce) { .igmm-course-box .igmm-pending::before { animation: none; } }