/*
 * Plugin skin: how the Talegates Core application pages (log in, create account, account, Bloxma link, pricing, features, contact)
 * look inside this theme. PRESENTATION ONLY.
 *   - The plugin already restyles itself from the --tg-* tokens (tokens.css). This file only adds what tokens cannot express:
 *     pill buttons, input wells, plan emphasis, a calmer page canvas.
 *   - It never touches markup, form fields, names, actions or behaviour, and every selector is scoped under body.tg so the plugin
 *     looks correct (from its own fallbacks) under any other theme.
 *   - Specificity (body.tg + class) beats the plugin's single-class rules without !important.
 */

/* page canvas for application pages */
.tg-app-page { position: relative; isolation: isolate; padding-block: clamp(3rem, 2rem + 5vw, 7rem); background: transparent; min-height: 62vh; }
.tg-app-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 28rem; z-index: -1; pointer-events: none; background: radial-gradient(46% 70% at 50% 0%, rgba(114, 84, 250, .28), transparent 72%); }

/* typography inside plugin pages */
body.tg .tga-title { font-family: var(--tg-font-display); font-weight: 600; letter-spacing: var(--tg-track-h2); color: var(--tg-text); }
body.tg .tga-h3 { font-family: var(--tg-font-display); font-weight: 600; letter-spacing: var(--tg-track-h3); color: var(--tg-text); }
body.tg .tga-h4 { font-family: var(--tg-font-body); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tg-text-dim); }
body.tg .tga-lede, body.tg .tga-muted { color: var(--tg-text-muted); }
body.tg .tga a { color: var(--tg-accent-text); }
@media (hover: hover) and (pointer: fine) { body.tg .tga a:hover { color: var(--tg-text); } }

/* the auth card: login, register, forgot, reset, verify, Bloxma link */
body.tg .tga-auth { padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); border: 1px solid var(--tg-line-strong); border-radius: var(--tg-radius-xl); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--tg-surface); box-shadow: var(--tg-shadow-frame); }

/* cards */
body.tg .tga-card, body.tg .tga-feature, body.tg .tga-plan-card { border: 1px solid var(--tg-line); border-radius: var(--tg-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--tg-surface); box-shadow: var(--tg-shadow-card); }
body.tg .tga-card--quiet { background: transparent; border-style: dashed; border-color: var(--tg-line-strong); box-shadow: none; }
body.tg .tga-sessions li { background: var(--tg-bg-raised); border: 1px solid var(--tg-line); border-radius: var(--tg-radius); }
body.tg .tga code { background: var(--tg-bg-raised); border: 1px solid var(--tg-line); color: var(--tg-text); }
body.tg .tga details { border-top-color: var(--tg-line); }

/* fields: inputs are wells (darker than the card), with a visible, soft focus state */
body.tg .tga-field > span { font-weight: 500; color: var(--tg-text); }
body.tg .tga input[type="text"], body.tg .tga input[type="email"], body.tg .tga input[type="password"], body.tg .tga input[type="url"], body.tg .tga input[type="search"], body.tg .tga select, body.tg .tga textarea {
  background: var(--tg-bg-raised); border: 1px solid var(--tg-line-strong); border-radius: var(--tg-radius); color: var(--tg-text); min-height: 3rem;
  transition: border-color var(--tg-dur-hover) var(--tg-ease-out), box-shadow var(--tg-dur-ui) var(--tg-ease-out), background-color var(--tg-dur-hover) var(--tg-ease-out);
}
body.tg .tga input::placeholder, body.tg .tga textarea::placeholder { color: var(--tg-text-dim); }
@media (hover: hover) and (pointer: fine) { body.tg .tga input:hover, body.tg .tga select:hover, body.tg .tga textarea:hover { border-color: rgba(255, 255, 255, .28); } }
body.tg .tga input:focus-visible, body.tg .tga select:focus-visible, body.tg .tga textarea:focus-visible { outline: none; border-color: var(--tg-purple-bright); box-shadow: 0 0 0 3px rgba(148, 122, 255, .3); background: var(--tg-bg); }
body.tg .tga input[aria-invalid="true"], body.tg .tga .is-invalid input { border-color: var(--tg-danger-text); }
body.tg .tga-check input { accent-color: var(--tg-purple); }

/* buttons: pills, same press feedback as the rest of the site. Long labels wrap instead of overflowing (Hello Elementor makes every button nowrap). */
body.tg .tga-btn { white-space: normal; max-width: 100%; text-align: center; border-radius: var(--tg-radius-pill); min-height: 2.875rem; padding-inline: 1.35rem; font-weight: 500; color: var(--tg-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--tg-line-strong);
  transition: transform var(--tg-dur-press) var(--tg-ease-out), background-color var(--tg-dur-hover) var(--tg-ease-out), border-color var(--tg-dur-hover) var(--tg-ease-out), box-shadow var(--tg-dur-ui) var(--tg-ease-out); }
body.tg .tga-btn:active { transform: scale(.97); }
body.tg .tga-btn:hover { background: rgba(255, 255, 255, .09); }
body.tg .tga-btn--primary { background: var(--tg-accent); border-color: transparent; box-shadow: var(--tg-shadow-button); }
body.tg .tga-btn--primary:hover { background: var(--tg-accent-hover); }
body.tg .tga-btn--primary:active { background: var(--tg-accent-active); }
body.tg .tga-btn--small { min-height: 2.375rem; padding-inline: 1rem; }
body.tg .tga-btn--danger { background: var(--tg-danger); border-color: transparent; color: #fff; }
body.tg .tga-btn--danger:hover { background: #e0454b; }
@media (hover: none) { body.tg .tga-btn:hover { background: rgba(255, 255, 255, .05); } body.tg .tga-btn--primary:hover { background: var(--tg-accent); } body.tg .tga-btn--danger:hover { background: var(--tg-danger); } }
body.tg .tga-btn.is-disabled, body.tg .tga-btn[aria-disabled="true"] { opacity: .5; border-style: solid; }

/* status colours that are TEXT on dark use the text-safe tokens */
body.tg .tga-notice--error { color: var(--tg-danger-text); }
body.tg .tga-danger summary { color: var(--tg-danger-text); }
body.tg .tga-notice--success { color: var(--tg-ok); }
body.tg .tga-notice { border-radius: var(--tg-radius); }
body.tg .tga-warn { border-radius: var(--tg-radius-xs); }

/* plan / tier pills (square, same as the site's badges) */
body.tg .tga-pill { border-radius: var(--tg-radius-xs); border-width: 1px; font-weight: 600; letter-spacing: .03em; }
body.tg .tga-pill--premium { background: var(--tg-purple-soft); border-color: rgba(148, 122, 255, .45); color: var(--tg-accent-text); }
body.tg .tga-pill--lifetime { background: var(--tg-ink); border-color: rgba(148, 122, 255, .35); color: #fff; }

/* feature grid and lists */
body.tg .tga-feature__cat { font-family: var(--tg-font-body); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tg-text-dim); }
body.tg .tga-featurelist li { border-bottom-color: var(--tg-line); }

/* pricing: the toggle is a pill; the recommended plan glows, the lifetime plan is deep violet */
body.tg .tga-toggle { background: var(--tg-bg-raised); border: 1px solid var(--tg-line-strong); }
body.tg .tga-toggle label { transition: background-color var(--tg-dur-ui) var(--tg-ease-out), color var(--tg-dur-ui) var(--tg-ease-out); }
body.tg .tga-toggle__input:nth-of-type(1):checked ~ .tga-toggle label:nth-child(1), body.tg .tga-toggle__input:nth-of-type(2):checked ~ .tga-toggle label:nth-child(2) { background: var(--tg-text); color: var(--tg-bg); }
body.tg .tga-plan-card { border-radius: var(--tg-radius-xl); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
body.tg .tga-plan-card--premium { border-color: rgba(148, 122, 255, .55); box-shadow: 0 0 0 1px rgba(148, 122, 255, .25) inset, 0 30px 70px -36px rgba(114, 84, 250, .7); background: radial-gradient(80% 50% at 50% 0%, rgba(114, 84, 250, .2), transparent 70%), var(--tg-surface); }
body.tg .tga-plan-card--lifetime { background: var(--tg-ink); border-color: rgba(148, 122, 255, .3); --_line: rgba(255, 255, 255, .14); }
body.tg .tga-plan-card--lifetime .tga-btn { border-color: rgba(255, 255, 255, .5); }
body.tg .tga-price { letter-spacing: var(--tg-track-h2); }

/* contact form sits in a card on the contact page */
body.tg .tga-contact { max-width: 36rem; }