/*
 * Text Monster AI Ideas Pro — Frontend Styles v1.1.0
 * Minimal CSS — no forced colors or fonts, inherits theme.
 * Only layout, Pro card structure, blur locker, social buttons.
 *
 * @package TextMonsterAIIdeasPro
 */

/* ── Wrap ──────────────────────────────────────────────────── */
.tmgp-wrap { max-width: 780px; margin: 0 auto; padding: 32px 16px 56px; }
.tmgp-eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:8px; }
.tmgp-title   { margin-bottom:8px; }
.tmgp-subtitle { margin-bottom:8px; opacity:.8; line-height:1.6; }
.tmgp-counter  { font-size:13px; opacity:.6; margin-bottom:24px; }

/* ── Form ──────────────────────────────────────────────────── */
.tmgp-form { border:1px solid rgba(0,0,0,.12); border-radius:8px; padding:24px; margin-bottom:28px; }
.tmgp-field { margin-bottom:16px; }
.tmgp-field label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; opacity:.7; }
.tmgp-field input,
.tmgp-field select { width:100%; padding:10px 13px; border:1px solid rgba(0,0,0,.2); border-radius:4px; font-family:inherit; font-size:inherit; background:transparent; box-sizing:border-box; }
.tmgp-field input:focus,
.tmgp-field select:focus { outline:2px solid currentColor; outline-offset:1px; }
.tmgp-hint { font-size:12px; opacity:.6; margin-top:3px; }
.tmgp-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Error ─────────────────────────────────────────────────── */
.tmgp-error { display:none; padding:10px 14px; border-radius:4px; font-size:14px; margin-bottom:12px; border:1px solid #b91c1c; color:#b91c1c; background:#fef2f2; }
.tmgp-error.active { display:block; }

/* ── Button ────────────────────────────────────────────────── */
.tmgp-btn { display:block; width:100%; padding:13px 20px; font-family:inherit; font-size:inherit; font-weight:700; cursor:pointer; border-radius:4px; margin-top:8px; border:none; }
.tmgp-btn:disabled { opacity:.5; cursor:not-allowed; }
.tmgp-limit-note { font-size:12px; text-align:center; margin-top:8px; opacity:.6; }

/* ── Spinner ───────────────────────────────────────────────── */
.tmgp-spinner        { display:none; text-align:center; padding:28px; opacity:.7; }
.tmgp-spinner.active { display:block; }
.tmgp-dots span { display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; margin:0 3px; animation:tmgpPulse 1.2s infinite ease-in-out; }
.tmgp-dots span:nth-child(2) { animation-delay:.2s; }
.tmgp-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes tmgpPulse { 0%,80%,100% { transform:scale(.6); opacity:.4; } 40% { transform:scale(1); opacity:1; } }

/* ── Results ───────────────────────────────────────────────── */
.tmgp-results        { display:none; }
.tmgp-results.active { display:block; }
.tmgp-results-title  { font-size:1.2em; font-weight:700; margin-bottom:4px; }
.tmgp-results-sub    { font-size:.875em; opacity:.6; margin-bottom:20px; }

/* ── Pro outline card ──────────────────────────────────────── */
.tmgp-card { border:1px solid rgba(0,0,0,.1); border-radius:8px; padding:22px 24px; margin-bottom:16px; transition:box-shadow .2s; }
.tmgp-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
.tmgp-card-num    { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.5; margin-bottom:6px; }
.tmgp-card-title  { font-size:1.2em; font-weight:700; margin-bottom:10px; line-height:1.35; }
.tmgp-card-intro  { font-size:.95em; opacity:.8; line-height:1.6; font-style:italic; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.07); }

/* ── Subheadings ───────────────────────────────────────────── */
.tmgp-subheadings { list-style:none; margin:0; padding:0; }
.tmgp-sub-item    { padding:12px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.tmgp-sub-item:last-child { border-bottom:none; }
.tmgp-sub-label   { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.5; margin-bottom:3px; }
.tmgp-sub-title   { font-size:1em; font-weight:700; margin-bottom:4px; line-height:1.4; }
.tmgp-sub-prompt  { font-size:.9em; opacity:.75; line-height:1.55; }

/* ── Copy button ───────────────────────────────────────────── */
.tmgp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 7px 14px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tmgp-copy-btn.copied {
    background: #2d8a57 !important;
    color: #fff !important;
    border-color: #2d8a57 !important;
}

@media (prefers-color-scheme: dark) {
    .tmgp-copy-btn {
        border-color: rgba(255,255,255,.2);
    }
}

/* ── Locked section / Fog effect ───────────────────────────── */
.tmgp-locked-section { margin-top:8px; }
.tmgp-ideas-locked-wrapper { position:relative; overflow:hidden; }

.tmgp-blurred-content-active {
  filter:blur(7px);
  opacity:.35;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  transition:filter .5s ease, opacity .5s ease;
}

.tmgp-social-locker-overlay {
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:99;
}

.tmgp-locker-box {
  text-align:center;
  padding:30px 24px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  max-width:500px;
  width:92%;
  position:relative;
  z-index:11;
}

.tmgp-locked-icon  { font-size:28px; margin-bottom:10px; display:block; }
.tmgp-locked-title { font-size:1.1em; font-weight:700; margin:0 0 8px; }
.tmgp-locked-text  { font-size:.9em; opacity:.75; margin:0 0 18px; line-height:1.5; }

/* ── Social share buttons ──────────────────────────────────── */
.tmgp-social-buttons { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:16px; }

.tmgp-share-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 12px;
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  font-size:.82em;
  font-weight:700;
  transition:opacity .2s, transform .1s;
  white-space:nowrap;
}
.tmgp-share-btn:hover  { opacity:.88; color:#fff; text-decoration:none; }
.tmgp-share-btn:active { transform:scale(.97); }

/* ── Counter bar in locker ─────────────────────────────────── */
.tmgp-counter-bar { font-size:.82em; opacity:.6; margin-top:12px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:540px) {
  .tmgp-row            { grid-template-columns:1fr; }
  .tmgp-form           { padding:16px; }
  .tmgp-card           { padding:16px; }
  .tmgp-locker-box     { padding:20px 14px; }
  .tmgp-social-buttons { flex-direction:column; align-items:center; }
  .tmgp-share-btn      { width:200px; justify-content:center; }
}
