/*!
 * Prayer Events Plugin — Frontend Styles
 * Designed & developed by Instant Web Tools, LLC
 * https://instantwebtools.co
 */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --pe-gold:       #C9A84C;
  --pe-gold-light: #E8CC80;
  --pe-gold-dark:  #9B7B2E;
  --pe-gold-dim:   rgba(201,168,76,.10);
  --pe-gold-glow:  rgba(201,168,76,.30);

  --pe-ink:        #0D0A07;
  --pe-ink-2:      #141009;
  --pe-ink-3:      #1C1510;
  --pe-ink-4:      #251C12;

  --pe-cream:      #FAF7F2;
  --pe-cream-2:    #F0EBE2;
  --pe-text:       rgba(250,247,242,.92);
  --pe-muted:      rgba(250,247,242,.50);
  --pe-faint:      rgba(250,247,242,.16);
  --pe-border:     rgba(201,168,76,.14);
  --pe-border-h:   rgba(201,168,76,.38);

  --pe-ok:  #52C97E;
  --pe-err: #FF6B6B;
  --pe-warn:#F5A623;

  --pe-radius:    11px;
  --pe-radius-lg: 18px;
  --pe-tr:        .22s cubic-bezier(.4,0,.2,1);
}

/* ── WRAP ────────────────────────────────────────────────────── */
.pe-wrap{
  max-width:960px;
  margin:0 auto;
  padding:1.5rem 1rem 3rem;
  font-family:inherit;
  color:var(--pe-text);
}

/* ── ALERTS ──────────────────────────────────────────────────── */
.pe-alert{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem 1.1rem;border-radius:var(--pe-radius);font-size:.875rem;margin-bottom:1.25rem}
.pe-alert__icon{flex-shrink:0;font-weight:700}
.pe-alert--ok  {background:rgba(82,201,126,.1);border:1px solid rgba(82,201,126,.22);color:var(--pe-ok)}
.pe-alert--err {background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.22);color:var(--pe-err)}
.pe-alert--warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.22);color:var(--pe-warn)}

.pe-notice{padding:.85rem 1.1rem;border-radius:var(--pe-radius);font-size:.875rem;margin-bottom:1.25rem}
.pe-notice--warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.22);color:var(--pe-warn)}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.pe-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1.2rem;border-radius:9px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;text-decoration:none;transition:all var(--pe-tr);white-space:nowrap;font-family:inherit}
.pe-btn:hover{transform:translateY(-1px);text-decoration:none}
.pe-btn:active{transform:translateY(0)}
.pe-btn--gold  {background:linear-gradient(135deg,var(--pe-gold),var(--pe-gold-dark));color:var(--pe-ink);font-weight:600;box-shadow:0 3px 14px rgba(201,168,76,.25)}
.pe-btn--gold:hover{box-shadow:0 6px 24px rgba(201,168,76,.42);color:var(--pe-ink)}
.pe-btn--ghost {background:rgba(255,255,255,.06);color:var(--pe-text);border:1px solid var(--pe-border)}
.pe-btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--pe-cream)}
.pe-btn--ok    {background:rgba(82,201,126,.12);color:var(--pe-ok);border:1px solid rgba(82,201,126,.25)}
.pe-btn--err   {background:rgba(255,107,107,.12);color:var(--pe-err);border:1px solid rgba(255,107,107,.25)}
.pe-btn--sm    {padding:.32rem .85rem;font-size:.8rem;border-radius:7px}
.pe-btn--lg    {padding:.8rem 2rem;font-size:1rem;border-radius:11px}
.pe-btn--full  {width:100%}

/* ── BADGES ──────────────────────────────────────────────────── */
.pe-badge{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:50px;font-size:.68rem;font-weight:500;letter-spacing:.03em}
.pe-badge--ok  {background:rgba(82,201,126,.1);color:var(--pe-ok);border:1px solid rgba(82,201,126,.2)}
.pe-badge--err {background:rgba(255,107,107,.1);color:var(--pe-err);border:1px solid rgba(255,107,107,.2)}
.pe-badge--gold{background:rgba(201,168,76,.1);color:var(--pe-gold);border:1px solid rgba(201,168,76,.2)}
.pe-badge--gray{background:rgba(255,255,255,.06);color:var(--pe-muted);border:1px solid var(--pe-border)}

/* ── FORMS ───────────────────────────────────────────────────── */
.pe-form__group{margin-bottom:1.1rem}
.pe-form__row  {display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pe-form__label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pe-muted);margin-bottom:.45rem}
.pe-form__input,.pe-form__textarea,.pe-form__select{width:100%;padding:.72rem .95rem;background:rgba(255,255,255,.04);border:1px solid var(--pe-border);border-radius:var(--pe-radius);color:var(--pe-cream);font-size:.9rem;outline:none;transition:border-color var(--pe-tr),background var(--pe-tr);font-family:inherit;box-sizing:border-box}
.pe-form__input:focus,.pe-form__textarea:focus{border-color:var(--pe-gold);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(201,168,76,.1)}
.pe-form__input::placeholder,.pe-form__textarea::placeholder{color:var(--pe-faint)}
.pe-form__textarea{resize:vertical;min-height:100px;line-height:1.7}
.pe-form__input--sm{padding:.42rem .7rem;font-size:.855rem}
.pe-form__hint{font-size:.76rem;color:var(--pe-muted);margin-top:.35rem}
.pe-form__check{display:flex;align-items:flex-start;gap:.55rem;font-size:.875rem;color:var(--pe-muted);cursor:pointer;margin-bottom:.5rem}
.pe-form__check input{accent-color:var(--pe-gold);margin-top:.15rem;flex-shrink:0}
.pe-form__actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1.25rem}

/* ── AUTH CARD ───────────────────────────────────────────────── */
.pe-auth-card{max-width:440px;margin:0 auto;background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:2.25rem 2rem}
.pe-auth-card__header{text-align:center;margin-bottom:2rem}
.pe-auth-card__cross{font-size:2.5rem;display:block;margin-bottom:.75rem;color:var(--pe-gold)}
.pe-auth-card__header h2{font-size:1.75rem;font-weight:300;color:var(--pe-cream);margin:.4rem 0}
.pe-auth-card__header p{font-size:.875rem;color:var(--pe-muted)}
.pe-auth-switch{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--pe-muted)}
.pe-auth-switch a{color:var(--pe-gold)}

/* ── CARDS ───────────────────────────────────────────────────── */
.pe-card{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);margin-bottom:1.5rem}
.pe-card__title{font-size:1.2rem;font-weight:300;color:var(--pe-cream);margin:0 0 1.5rem;padding:1.5rem 1.75rem;border-bottom:1px solid var(--pe-border)}
.pe-card--create{padding:1.75rem}
.pe-card--create .pe-card__title{padding:0;border:none;margin-bottom:1.25rem}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.pe-page-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.pe-page-header h2{font-size:1.75rem;font-weight:300;color:var(--pe-cream);margin:0}
.pe-page-header p{font-size:.875rem;color:var(--pe-muted);margin:.25rem 0 0}

/* ── FILTER BAR ──────────────────────────────────────────────── */
.pe-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.pe-filter-tabs{display:flex;gap:.2rem;background:rgba(255,255,255,.03);border:1px solid var(--pe-border);border-radius:9px;padding:.22rem}
.pe-filter-tab{display:inline-block;padding:.35rem .85rem;border-radius:7px;font-size:.82rem;color:var(--pe-muted);text-decoration:none;transition:all var(--pe-tr)}
.pe-filter-tab:hover{color:var(--pe-cream);background:rgba(255,255,255,.06);text-decoration:none}
.pe-filter-tab--active{background:var(--pe-gold);color:var(--pe-ink);font-weight:600}
.pe-search-form{display:flex;gap:.4rem}
.pe-search-input{padding:.42rem .85rem;background:rgba(255,255,255,.04);border:1px solid var(--pe-border);border-radius:8px;color:var(--pe-cream);font-size:.855rem;outline:none;width:200px;font-family:inherit}
.pe-search-input:focus{border-color:var(--pe-gold)}
.pe-search-input::placeholder{color:var(--pe-faint)}

/* ── EVENTS GRID ─────────────────────────────────────────────── */
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin-bottom:2rem}
.pe-event-card{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:all var(--pe-tr)}
.pe-event-card:hover{border-color:var(--pe-border-h);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.5);text-decoration:none;color:inherit}
.pe-event-card__bar{height:4px;background:linear-gradient(90deg,var(--pe-gold),var(--pe-gold-dark))}
.pe-event-card__bar--ended{background:linear-gradient(90deg,#444,#333)}
.pe-event-card__body{padding:1.25rem;flex:1}
.pe-event-card__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
.pe-event-card__title{font-size:1.15rem;font-weight:300;color:var(--pe-cream);margin:0 0 .5rem;line-height:1.3}
.pe-event-card__desc{font-size:.82rem;color:var(--pe-muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.85rem}
.pe-event-card__meta{display:flex;gap:.85rem;font-size:.76rem;color:var(--pe-muted);flex-wrap:wrap}
.pe-event-card__foot{padding:.75rem 1.25rem;background:rgba(0,0,0,.18);border-top:1px solid var(--pe-border);display:flex;justify-content:space-between;align-items:center;font-size:.76rem}
.pe-event-card__org{color:var(--pe-muted)}
.pe-event-card__join{color:var(--pe-gold)}

/* ── EVENT HEADER ────────────────────────────────────────────── */
.pe-back-link{display:inline-block;color:var(--pe-muted);font-size:.855rem;text-decoration:none;margin-bottom:1.5rem;transition:color var(--pe-tr)}
.pe-back-link:hover{color:var(--pe-cream)}
.pe-event-header{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:2rem;margin-bottom:1.5rem}
.pe-event-header__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.85rem}
.pe-event-header__title{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:300;color:var(--pe-cream);margin:0 0 .65rem;line-height:1.25}
.pe-event-header__desc{font-size:.9rem;color:var(--pe-muted);line-height:1.8;margin-bottom:1rem}
.pe-event-header__meta{display:flex;gap:1.25rem;font-size:.8rem;color:var(--pe-muted);flex-wrap:wrap}

/* ── TABS ────────────────────────────────────────────────────── */
.pe-tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--pe-border);margin-bottom:1.5rem;overflow-x:auto}
.pe-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.1rem;font-size:.875rem;color:var(--pe-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all var(--pe-tr)}
.pe-tab:hover{color:var(--pe-cream);text-decoration:none}
.pe-tab--active{color:var(--pe-gold);border-bottom-color:var(--pe-gold)}
.pe-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;background:rgba(255,255,255,.08);border-radius:50px;font-size:.68rem;font-weight:600;padding:0 .35rem}
.pe-tab__count--err{background:rgba(255,107,107,.15);color:var(--pe-err)}

/* ── PRAYERS ─────────────────────────────────────────────────── */
.pe-add-prayer-inline{background:var(--pe-ink-3);border:1px solid var(--pe-border-h);border-radius:var(--pe-radius-lg);padding:1.5rem;margin-bottom:1.5rem}
.pe-add-prayer-inline h4{font-size:1rem;font-weight:300;color:var(--pe-cream);margin:0 0 1.1rem}
.pe-prayer{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:1.5rem;margin-bottom:1.1rem;transition:border-color var(--pe-tr)}
.pe-prayer:hover{border-color:var(--pe-border-h)}
.pe-prayer--pending{border-left:3px solid var(--pe-gold)}
.pe-prayer__header{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}
.pe-prayer__av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--pe-gold),var(--pe-gold-dark));display:flex;align-items:center;justify-content:center;color:var(--pe-ink);font-weight:700;font-size:.82rem;flex-shrink:0}
.pe-prayer__name{font-size:.875rem;font-weight:500;color:var(--pe-cream);display:block}
.pe-prayer__time{font-size:.76rem;color:var(--pe-muted)}
.pe-prayer__title{font-size:1rem;font-weight:500;color:var(--pe-cream);margin:0 0 .5rem}
.pe-prayer__text{font-size:.875rem;color:var(--pe-muted);line-height:1.75;margin-bottom:1rem}
.pe-prayer__mod-actions{display:flex;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pe-border)}

/* ── REPLIES ─────────────────────────────────────────────────── */
.pe-replies{margin-bottom:1rem;padding-left:1rem;border-left:2px solid var(--pe-border)}
.pe-reply{display:flex;gap:.6rem;padding:.7rem 0}
.pe-reply__av{width:26px;height:26px;border-radius:50%;background:rgba(201,168,76,.18);display:flex;align-items:center;justify-content:center;color:var(--pe-gold);font-size:.7rem;font-weight:700;flex-shrink:0}
.pe-reply__body{flex:1}
.pe-reply__name{font-size:.8rem;font-weight:500;color:var(--pe-cream)}
.pe-reply__time{font-size:.72rem;color:var(--pe-muted);margin-left:.5rem}
.pe-reply__text{font-size:.82rem;color:var(--pe-muted);line-height:1.65;margin:.25rem 0 0}
.pe-reply-form{margin-top:.5rem}
.pe-reply-input-row{display:flex;gap:.5rem}
.pe-reply-input-row .pe-form__input{flex:1}

/* ── MEMBERS GRID ────────────────────────────────────────────── */
.pe-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85rem}
.pe-member-card{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius);padding:1rem;display:flex;align-items:center;gap:.75rem}
.pe-member-card__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pe-gold),var(--pe-gold-dark));display:flex;align-items:center;justify-content:center;color:var(--pe-ink);font-weight:700;font-size:.9rem;flex-shrink:0}
.pe-member-card__info{flex:1;min-width:0}
.pe-member-card__info strong{display:block;font-size:.875rem;color:var(--pe-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem}
.pe-member-card__time{font-size:.72rem;color:var(--pe-muted);flex-shrink:0}

/* ── INVITE PANEL ────────────────────────────────────────────── */
.pe-invite-panel{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:2rem}
.pe-invite-panel h4{font-size:1.1rem;color:var(--pe-cream);margin:0 0 .5rem}
.pe-invite-link-row{display:flex;gap:.6rem;margin:1rem 0}
.pe-invite-link-row .pe-form__input{flex:1;font-size:.8rem;color:var(--pe-gold)}
.pe-share-buttons{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}

/* ── JOIN CARD ───────────────────────────────────────────────── */
.pe-join-card{max-width:500px;margin:0 auto;text-align:center;background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:3rem 2rem}
.pe-join-card__cross{font-size:3rem;color:var(--pe-gold);display:block;margin-bottom:1rem}
.pe-join-card__title{font-size:1.75rem;font-weight:300;color:var(--pe-cream);margin:0 0 .75rem;line-height:1.3}
.pe-join-card__desc{font-size:.9rem;color:var(--pe-muted);line-height:1.8;margin-bottom:1.25rem}
.pe-join-card__meta{display:flex;gap:1.25rem;justify-content:center;font-size:.8rem;color:var(--pe-muted);margin-bottom:1.75rem;flex-wrap:wrap}
.pe-join-card__actions{display:flex;flex-direction:column;gap:.75rem;align-items:center}

/* ── DASHBOARD ───────────────────────────────────────────────── */
.pe-dash-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap}
.pe-dash-title{font-size:1.75rem;font-weight:300;color:var(--pe-cream);margin:0}
.pe-dash-title em{font-style:italic;color:var(--pe-gold)}
.pe-dash-sub{font-size:.875rem;color:var(--pe-muted);margin:.25rem 0 0}
.pe-dash-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.pe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.75rem}
.pe-stat{background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);padding:1.25rem;text-align:center}
.pe-stat__num{font-size:2.4rem;font-weight:300;color:var(--pe-gold);line-height:1;display:block}
.pe-stat__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--pe-muted);margin-top:.3rem;display:block}
.pe-section-head{display:flex;align-items:center;justify-content:space-between;margin:1.75rem 0 1rem}
.pe-section-head h3{font-size:1.1rem;font-weight:400;color:var(--pe-cream);margin:0}
.pe-section-title{font-size:1.3rem;font-weight:300;color:var(--pe-cream);margin:0 0 1.25rem}
.pe-dash-links{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--pe-border);font-size:.875rem}
.pe-link{color:var(--pe-gold);text-decoration:none}
.pe-link:hover{color:var(--pe-gold-light)}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.pe-empty{text-align:center;padding:4rem 2rem}
.pe-empty__icon{display:block;font-size:3rem;opacity:.25;margin-bottom:1rem}
.pe-empty p{font-size:.9rem;color:var(--pe-muted);margin-bottom:1.5rem}
.pe-empty h3{font-size:1.4rem;font-weight:300;color:var(--pe-muted);margin-bottom:.5rem}

/* ── PAGINATION ──────────────────────────────────────────────── */
.pe-pagination{display:flex;gap:.4rem;justify-content:center;margin-top:1.75rem;flex-wrap:wrap}
.pe-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--pe-ink-3);border:1px solid var(--pe-border);border-radius:8px;font-size:.855rem;color:var(--pe-muted);text-decoration:none;transition:all var(--pe-tr)}
.pe-pagination__btn:hover{border-color:var(--pe-border-h);color:var(--pe-cream)}
.pe-pagination__btn--active{background:var(--pe-gold);color:var(--pe-ink);border-color:var(--pe-gold);font-weight:600}

/* ── TEXT UTILITIES ──────────────────────────────────────────── */
.pe-text-muted{color:var(--pe-muted)!important;font-size:.875rem}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:640px){
  .pe-form__row{grid-template-columns:1fr}
  .pe-stats{grid-template-columns:1fr 1fr}
  .pe-filter-bar{flex-direction:column;align-items:stretch}
  .pe-search-form{width:100%}
  .pe-search-input{flex:1;width:auto}
  .pe-invite-link-row{flex-direction:column}
  .pe-reply-input-row{flex-direction:column}
  .pe-auth-card{padding:1.5rem 1.1rem}
}
@media(max-width:400px){
  .pe-stats{grid-template-columns:1fr}
  .pe-wrap{padding:1rem .75rem 2rem}
}