/* =====================================================================
   Pogozo Feature Request Portal
   Fonts + colors come from Elementor Site Settings (Global Fonts / Global
   Colors). If a global is not set, the declaration is ignored and the
   theme's own font/color is inherited instead.
   ===================================================================== */

.pgzp-ui {
  /* Colors: Elementor globals -> sensible fallbacks */
  --pgzp-accent: var(--e-global-color-accent, var(--e-global-color-primary, #2196f3));
  --pgzp-heading: var(--e-global-color-primary, currentColor);
  --pgzp-text: var(--e-global-color-text, currentColor);
  --pgzp-on-accent: #fff;
  --pgzp-border: rgba(127, 127, 127, .22);
  --pgzp-muted: rgba(127, 127, 127, 1);
  --pgzp-surface: #fff;
  --pgzp-radius: 12px;
  --pgzp-radius-sm: 8px;

  /* Card title (WP Admin > Feature Requests > Settings > Card title) */
  --pgzp-title-color: #000;
  --pgzp-title-font: var(--e-global-typography-primary-font-family);
  --pgzp-title-weight: 700;
  --pgzp-title-size: 1.2rem;

  /* "Vote for me" button */
  --pgzp-vote-bg: var(--pgzp-accent);
  --pgzp-vote-color: var(--pgzp-on-accent);
  --pgzp-vote-hover-bg: var(--pgzp-vote-bg);
  --pgzp-vote-hover-color: var(--pgzp-vote-color);
  --pgzp-vote-hover-filter: brightness(.9);

  /* Likes pill (thumbs-up + count) */
  --pgzp-likes-bg: rgba(127, 127, 127, .1);
  --pgzp-likes-color: var(--pgzp-accent);
  --pgzp-likes-voted-bg: var(--pgzp-accent);
  --pgzp-likes-voted-color: #fff;

  /* Body font = Elementor "Text" global (falls back to theme font) */
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
  box-sizing: border-box;
}
@supports (background: color-mix(in srgb, red 10%, blue)) {
  .pgzp-ui { --pgzp-likes-bg: color-mix(in srgb, var(--pgzp-accent) 10%, transparent); }
}
.pgzp-ui *, .pgzp-ui *::before, .pgzp-ui *::after { box-sizing: border-box; }
.pgzp-ui [hidden] { display: none !important; }

/* Form controls never pick their own font: use the site's */
.pgzp-ui button, .pgzp-ui input, .pgzp-ui textarea, .pgzp-ui select { font-family: inherit; }

/* Heading font = Elementor "Primary" global */
.pgzp-ui .pgzp__title,
.pgzp-ui .pgzp-card__title,
.pgzp-ui .pgzp-modal__title {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
  color: var(--pgzp-heading);
  letter-spacing: normal;
  text-transform: none;
}

/* Button font = Elementor "Accent" global */
.pgzp-ui .pgzp-trigger,
.pgzp-ui .pgzp-btn,
.pgzp-ui .pgzp__tab,
.pgzp-ui .pgzp-vote-btn {
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight, 600);
}

/* =====================================================================
   Portal layout
   ===================================================================== */
.pgzp { max-width: 1140px; margin: 0 auto; padding: 0; }

.pgzp__head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.pgzp-ui .pgzp__title { margin: 0 0 14px; line-height: 1.2; }
.pgzp__intro { color: var(--pgzp-text); }
.pgzp__intro p { margin: 0 0 12px; }
.pgzp__head .pgzp-trigger-wrap { margin-top: 20px; }

/* =====================================================================
   Standalone "Submit Idea" button  [pogozo_submit_idea_button]
   ===================================================================== */
.pgzp-trigger-wrap { display: block; }
.pgzp-trigger-wrap.pgzp-align-left   { text-align: left; }
.pgzp-trigger-wrap.pgzp-align-center { text-align: center; }
.pgzp-trigger-wrap.pgzp-align-right  { text-align: right; }
.pgzp-trigger-wrap.pgzp-align-full   { --pgzp-trigger-width: 100%; }

.pgzp-ui .pgzp-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pgzp-trigger-width, auto);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.pgzp-ui .pgzp-trigger--filled,
.pgzp-ui .pgzp-trigger--outline {
  padding: 14px 30px; border-radius: var(--pgzp-radius-sm);
  font-size: var(--e-global-typography-accent-font-size, 1rem);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
  box-shadow: none;
}
.pgzp-ui .pgzp-trigger--filled {
  background: var(--pgzp-accent); color: var(--pgzp-on-accent);
  border: 2px solid var(--pgzp-accent);
}
.pgzp-ui .pgzp-trigger--filled:hover,
.pgzp-ui .pgzp-trigger--filled:focus-visible {
  background: var(--pgzp-accent); border-color: var(--pgzp-accent); color: var(--pgzp-on-accent);
  filter: brightness(.9); transform: translateY(-1px);
}
.pgzp-ui .pgzp-trigger--outline {
  background: transparent; color: var(--pgzp-accent);
  border: 2px solid var(--pgzp-accent);
}
.pgzp-ui .pgzp-trigger--outline:hover,
.pgzp-ui .pgzp-trigger--outline:focus-visible {
  background: var(--pgzp-accent); color: var(--pgzp-on-accent);
}
/* --theme: styling comes from Elementor Site Settings > Buttons (.elementor-button) */

/* =====================================================================
   Shared internal buttons (reset theme/Elementor button styles first)
   ===================================================================== */
.pgzp-ui .pgzp-btn,
.pgzp-ui .pgzp__tab,
.pgzp-ui .pgzp-vote-btn,
.pgzp-ui .pgzp-star,
.pgzp-ui .pgzp-modal__close {
  margin: 0; box-shadow: none; text-decoration: none; text-shadow: none;
  letter-spacing: normal; text-transform: none; min-height: 0; width: auto;
}

.pgzp-ui .pgzp-btn {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--pgzp-accent); color: var(--pgzp-on-accent);
  border: 2px solid var(--pgzp-accent); border-radius: var(--pgzp-radius-sm);
  padding: 12px 28px; font-size: 1rem; line-height: 1.2;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.pgzp-ui .pgzp-btn:hover,
.pgzp-ui .pgzp-btn:focus-visible {
  background: var(--pgzp-accent); border-color: var(--pgzp-accent); color: var(--pgzp-on-accent);
  filter: brightness(.9);
}
.pgzp-ui .pgzp-btn:disabled { opacity: .55; cursor: default; }

/* =====================================================================
   Status tabs
   ===================================================================== */
.pgzp__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 36px; }
.pgzp-ui .pgzp__tab {
  cursor: pointer; background: transparent; color: var(--pgzp-text);
  border: 1px solid var(--pgzp-border); border-radius: 999px;
  padding: 11px 24px; font-size: .95rem; line-height: 1.2; transition: all .2s;
}
.pgzp-ui .pgzp__tab:hover,
.pgzp-ui .pgzp__tab:focus-visible { background: transparent; color: var(--pgzp-accent); border-color: var(--pgzp-accent); }
.pgzp-ui .pgzp__tab.is-active,
.pgzp-ui .pgzp__tab.is-active:hover { background: var(--pgzp-accent); border-color: var(--pgzp-accent); color: var(--pgzp-on-accent); }

/* =====================================================================
   Masonry grid
   Cards keep left-to-right order; each card only takes the height it
   needs, so a short card lets the card below it move up.
   (JS sets each card's row span; without JS it is a normal grid.)
   ===================================================================== */
.pgzp-ui { --pgzp-gap: 28px; }
.pgzp__grid {
  display: grid;
  grid-template-columns: repeat(var(--pgzp-cols, 3), minmax(0, 1fr));
  gap: var(--pgzp-gap);
  align-items: start;
}
.pgzp__grid.is-masonry {
  grid-auto-rows: 4px;   /* must match ROW_UNIT in portal.js */
  row-gap: 0;
}
.pgzp__grid.is-masonry .pgzp-card { margin-bottom: var(--pgzp-gap); }
@media (max-width: 1024px) { .pgzp__grid { grid-template-columns: repeat(var(--pgzp-cols-tablet, 2), minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pgzp__grid { grid-template-columns: repeat(var(--pgzp-cols-mobile, 1), minmax(0, 1fr)); } }

/* =====================================================================
   Cards
   ===================================================================== */
.pgzp-card { min-width: 0; }
.pgzp-card__inner {
  display: flex; flex-direction: column;
  background: var(--pgzp-surface);
  border: 1px solid var(--pgzp-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .03), 0 12px 32px rgba(0, 0, 0, .05);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.pgzp-card:hover .pgzp-card__inner {
  border-color: color-mix(in srgb, var(--pgzp-accent) 35%, transparent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .04), 0 20px 44px rgba(0, 0, 0, .09);
  transform: translateY(-3px);
}
.pgzp-card__img { padding: 10px 10px 0; }
.pgzp-card__img img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 12px; }
.pgzp-card__body { padding: 22px 24px 18px; }
.pgzp-ui .pgzp-card__title {
  margin: 0 0 10px; line-height: 1.35;
  color: var(--pgzp-title-color);
  font-family: var(--pgzp-title-font), sans-serif;
  font-weight: var(--pgzp-title-weight);
  font-size: var(--pgzp-title-size);
}
.pgzp-card__meta {
  display: inline-block; color: var(--pgzp-muted); font-size: .8rem; margin: 0 0 14px;
  letter-spacing: .01em;
}
.pgzp-card__desc { font-size: .95rem; line-height: 1.65; color: var(--pgzp-text); }
.pgzp-card__desc p { margin: 0 0 10px; }
.pgzp-card__desc p:last-child { margin-bottom: 0; }

/* Footer: "Vote for me" (left) + thumbs-up count (right) */
.pgzp-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding: 14px 24px;
  border-top: 1px solid var(--pgzp-border);
}
.pgzp-ui .pgzp-vote-btn {
  cursor: pointer; display: inline-flex; align-items: center;
  background: var(--pgzp-vote-bg); color: var(--pgzp-vote-color);
  border: 2px solid var(--pgzp-vote-bg); border-radius: 999px;
  padding: 9px 20px; font-size: .78rem; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, filter .2s;
}
.pgzp-ui .pgzp-vote-btn:hover,
.pgzp-ui .pgzp-vote-btn:focus-visible {
  background: var(--pgzp-vote-hover-bg); color: var(--pgzp-vote-hover-color);
  border-color: var(--pgzp-vote-hover-bg); filter: var(--pgzp-vote-hover-filter);
}
.pgzp-ui .pgzp-vote-btn[aria-expanded="true"],
.pgzp-ui .pgzp-vote-btn.is-voted,
.pgzp-ui .pgzp-vote-btn.is-voted:hover {
  background: transparent; color: var(--pgzp-vote-bg); border-color: var(--pgzp-vote-bg); filter: none;
}

.pgzp-votes {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--pgzp-likes-bg);
  color: var(--pgzp-likes-color); font-weight: 700; line-height: 1;
  transition: background-color .2s, color .2s;
}
.pgzp-votes__icon { display: block; flex: 0 0 auto; }
.pgzp-vote-count { font-size: 1rem; font-variant-numeric: tabular-nums; }
.pgzp-card.is-voted .pgzp-votes { background: var(--pgzp-likes-voted-bg); color: var(--pgzp-likes-voted-color); }
.pgzp-ui .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
@keyframes pgzp-bump { 50% { transform: scale(1.25); } }
.pgzp-votes.is-bump .pgzp-votes__icon { animation: pgzp-bump .4s ease; }

/* Vote panel */
.pgzp-vote-panel { padding: 18px 24px 22px; border-top: 1px solid var(--pgzp-border); background: rgba(127, 127, 127, .04); background: color-mix(in srgb, var(--pgzp-accent) 4%, transparent); }
.pgzp-vote-q { margin: 0 0 8px; font-weight: 600; }
.pgzp-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.pgzp-ui .pgzp-star,
.pgzp-ui .pgzp-star:hover,
.pgzp-ui .pgzp-star:focus {
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0;
  font-size: 30px; line-height: 1; color: #cfd4de; transition: color .15s, transform .1s;
}
.pgzp-ui .pgzp-star:hover { transform: scale(1.12); }
.pgzp-ui .pgzp-star.is-on { color: #f5b301; }

/* =====================================================================
   Inputs (Elementor Site Settings > Form Fields can still override)
   ===================================================================== */
.pgzp-ui .pgzp-vote-email,
.pgzp-ui .pgzp-form textarea,
.pgzp-ui .pgzp-form input[type="email"] {
  display: block; width: 100%; padding: 12px 14px; font-size: 1rem; color: var(--pgzp-text);
  border: 1px solid var(--pgzp-border); border-radius: var(--pgzp-radius-sm); background: #fff;
}
.pgzp-ui .pgzp-vote-email { margin-bottom: 12px; }
.pgzp-ui .pgzp-vote-email:focus,
.pgzp-ui .pgzp-form input:focus,
.pgzp-ui .pgzp-form textarea:focus {
  outline: 2px solid var(--pgzp-accent); outline-offset: 0; border-color: var(--pgzp-accent);
}

/* Messages */
.pgzp-msg { margin: 10px 0 0; font-size: .9rem; min-height: 1.2em; }
.pgzp-msg.is-error { color: #c62828; }
.pgzp-msg.is-ok { color: #2e7d32; }
.pgzp__empty { text-align: center; color: var(--pgzp-muted); padding: 30px 0; }

/* Honeypot */
.pgzp-ui .pgzp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* =====================================================================
   Popup form
   ===================================================================== */
.pgzp-modal {
  position: fixed; inset: 0; z-index: 999999; overflow-y: auto;
  background: rgba(10, 12, 20, .6); display: flex; align-items: flex-start; justify-content: center;
  padding: 50px 15px;
}
.pgzp-modal[hidden] { display: none !important; }
.pgzp-modal__dialog {
  position: relative; width: 100%; max-width: 580px; background: var(--pgzp-surface);
  border-radius: var(--pgzp-radius); padding: 36px; box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
  animation: pgzp-pop .2s ease-out;
}
@keyframes pgzp-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pgzp-ui .pgzp-modal__close,
.pgzp-ui .pgzp-modal__close:hover,
.pgzp-ui .pgzp-modal__close:focus {
  position: absolute; top: 12px; right: 14px; background: none; border: 0; padding: 4px 8px;
  font-size: 30px; line-height: 1; cursor: pointer; color: var(--pgzp-muted);
}
.pgzp-ui .pgzp-modal__close:hover { color: var(--pgzp-heading); }
.pgzp-ui .pgzp-modal__title { margin: 0 0 22px; font-size: 1.6rem; line-height: 1.2; }
.pgzp-field { display: block; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.pgzp-ui .pgzp-field__label { display: block; font-weight: 600; margin-bottom: 8px; padding: 0; color: var(--pgzp-heading); font-size: .95rem; }
.pgzp-field em { color: #c62828; font-style: normal; }
.pgzp-field small { display: block; color: var(--pgzp-muted); margin-top: 6px; font-size: .8rem; }
.pgzp-importance label { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-weight: 400; cursor: pointer; }
.pgzp-importance input { margin-top: .3em; accent-color: var(--pgzp-accent); }
.pgzp-form .pgzp-btn { width: 100%; margin-top: 4px; }
html.pgzp-lock { overflow: hidden; }

@media (max-width: 600px) {
  .pgzp-modal { padding: 20px 10px; }
  .pgzp-modal__dialog { padding: 26px 20px; }
}