/* =========================================================
   APN Membership — Front-end styles
   All selectors are scoped under .apn-membership and prefixed
   with apn- to avoid colliding with theme or Elementor CSS.
   ========================================================= */

.apn-membership{
  --apn-bg:#0c0b0a;
  --apn-card-bg:#141210;
  --apn-card-border:rgba(255,255,255,.1);
  --apn-gold:#c9a15b;
  --apn-gold-hover:#d4ad68;
  --apn-white:#f7f5ef;
  --apn-text:#b5afa4;
  --apn-error:#e2685f;
  --apn-success:#7bbf8f;
  --apn-info:#7ea7c9;

  font-family:'Poppins',Arial,sans-serif;
  color:var(--apn-text);
  box-sizing:border-box;
}
.apn-membership *,
.apn-membership *::before,
.apn-membership *::after{
  box-sizing:inherit;
}

/* ---------- Notices / alerts ---------- */
.apn-notice,
.apn-alert{
  border-radius:8px;
  padding:14px 18px;
  margin-bottom:20px;
  font-size:13.5px;
  line-height:1.6;
}
.apn-notice--info,
.apn-alert--info{
  background:rgba(126,167,201,.1);
  border:1px solid rgba(126,167,201,.35);
  color:var(--apn-white);
}
.apn-alert--error{
  background:rgba(226,104,95,.1);
  border:1px solid rgba(226,104,95,.4);
  color:#f3b8b2;
}
.apn-alert--error ul{margin:0;padding-left:18px;}
.apn-alert--success{
  background:rgba(123,191,143,.1);
  border:1px solid rgba(123,191,143,.4);
  color:#bfe4ca;
}
.apn-notice a{color:var(--apn-gold);}

/* ---------- Auth wrap (register/login card) ---------- */
.apn-auth-wrap{
  max-width:640px;
  margin:0 auto;
  background:var(--apn-card-bg);
  border:1px solid var(--apn-card-border);
  border-radius:12px;
  padding:36px;
}
.apn-auth-wrap--narrow{max-width:420px;}

/* ---------- Forms ---------- */
.apn-form__hp{position:absolute;left:-9999px;top:-9999px;}

.apn-form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

.apn-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.apn-form__grid .apn-field{margin-bottom:0;}

.apn-field label{
  color:var(--apn-white);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.apn-req{color:var(--apn-error);}

.apn-field input[type="text"],
.apn-field input[type="email"],
.apn-field input[type="tel"],
.apn-field input[type="password"],
.apn-field input[type="file"]{
  width:100%;
  background:var(--apn-bg);
  border:1px solid var(--apn-card-border);
  border-radius:6px;
  padding:11px 14px;
  color:var(--apn-white);
  font-family:inherit;
  font-size:14px;
  transition:border-color .2s ease;
}
.apn-field input:focus{
  outline:none;
  border-color:var(--apn-gold);
}
.apn-field input[type="file"]{
  padding:9px 10px;
  color:var(--apn-text);
}

.apn-photo-current{
  display:flex;
  align-items:center;
  gap:14px;
}
.apn-photo-current img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid var(--apn-gold);
}
.apn-file-name{color:var(--apn-text);font-size:11.5px;font-weight:400;text-transform:none;}

.apn-form__row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.apn-form__row--between{justify-content:space-between;}

.apn-checkbox{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--apn-text);
  font-size:13px;
  cursor:pointer;
}
.apn-checkbox input{accent-color:var(--apn-gold);}

.apn-form__link{
  color:var(--apn-gold);
  font-size:13px;
  text-decoration:none;
}
.apn-form__link:hover{color:var(--apn-gold-hover);}

.apn-form__footnote{
  text-align:center;
  margin-top:18px;
  font-size:13px;
  color:var(--apn-text);
}
.apn-form__footnote a{color:var(--apn-gold);text-decoration:none;}
.apn-form__footnote a:hover{color:var(--apn-gold-hover);}

.apn-form__hint{
  color:var(--apn-text);
  font-size:12px;
  margin-top:8px;
}

/* ---------- Buttons ---------- */
.apn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:6px;
  cursor:pointer;
  transition:all .25s ease;
  border:1.5px solid var(--apn-gold);
}
.apn-btn--solid{
  background:var(--apn-gold);
  color:#1c1a17;
}
.apn-btn--solid:hover{background:var(--apn-gold-hover);border-color:var(--apn-gold-hover);}
.apn-btn--outline{
  background:transparent;
  color:var(--apn-gold);
}
.apn-btn--outline:hover{background:var(--apn-gold);color:#1c1a17;}
.apn-btn--full{width:100%;}

/* ---------- Plan selection cards ---------- */
.apn-plan-select{margin:28px 0 20px;}
.apn-plan-select h3{
  color:var(--apn-white);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.apn-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:16px;
}

.apn-plan-card{
  position:relative;
  display:block;
  background:var(--apn-bg);
  border:1.5px solid var(--apn-card-border);
  border-radius:8px;
  padding:18px 16px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.apn-plan-card input{position:absolute;top:14px;right:14px;accent-color:var(--apn-gold);}
.apn-plan-card.is-selected,
.apn-plan-card.is-current{
  border-color:var(--apn-gold);
  background:rgba(201,161,91,.06);
}
.apn-plan-card__name{
  display:block;
  color:var(--apn-white);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:4px;
}
.apn-plan-card__price{
  display:block;
  color:var(--apn-gold);
  font-size:12.5px;
  font-weight:600;
  margin-bottom:10px;
}
.apn-plan-card__features{
  list-style:none;
  margin:0;
  padding:0;
}
.apn-plan-card__features li{
  color:var(--apn-text);
  font-size:11.5px;
  line-height:1.6;
  padding-left:14px;
  position:relative;
}
.apn-plan-card__features li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--apn-gold);
}
.apn-plan-card__current{
  display:inline-block;
  margin-top:10px;
  background:var(--apn-gold);
  color:#1c1a17;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:4px;
}

.apn-billing-toggle{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--apn-bg);
  border:1px solid var(--apn-card-border);
  border-radius:6px;
  padding:12px 16px;
  margin-bottom:20px;
}
.apn-billing-toggle__label{
  color:var(--apn-white);
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
}
.apn-billing-toggle label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--apn-text);
  font-size:13px;
  cursor:pointer;
}
.apn-billing-toggle input{accent-color:var(--apn-gold);}

/* ---------- Dashboard ---------- */
.apn-dashboard__header{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--apn-card-bg);
  border:1px solid var(--apn-card-border);
  border-radius:12px;
  padding:24px;
  margin-bottom:20px;
}
.apn-dashboard__avatar{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--apn-gold);
}
.apn-dashboard__identity{flex:1;min-width:0;}
.apn-dashboard__name{
  color:var(--apn-white);
  font-size:19px;
  font-weight:700;
  margin:0 0 2px;
}
.apn-dashboard__email{
  color:var(--apn-text);
  font-size:13px;
  margin:0 0 10px;
}
.apn-dashboard__badges{display:flex;gap:8px;flex-wrap:wrap;}

.apn-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.apn-badge--plan{background:rgba(201,161,91,.15);color:var(--apn-gold);}
.apn-badge--status-active{background:rgba(123,191,143,.15);color:var(--apn-success);}
.apn-badge--status-pending{background:rgba(201,161,91,.15);color:var(--apn-gold);}
.apn-badge--status-expired,
.apn-badge--status-cancelled{background:rgba(226,104,95,.15);color:var(--apn-error);}

.apn-dashboard__logout{flex-shrink:0;}

/* Tabs */
.apn-tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--apn-card-border);
  margin-bottom:24px;
  overflow-x:auto;
}
.apn-tab{
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--apn-text);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:12px 18px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.apn-tab:hover{color:var(--apn-white);}
.apn-tab.is-active{color:var(--apn-gold);border-color:var(--apn-gold);}

.apn-tab-panel{display:none;}
.apn-tab-panel.is-active{display:block;}

/* Cards inside dashboard */
.apn-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.apn-card{
  background:var(--apn-card-bg);
  border:1px solid var(--apn-card-border);
  border-radius:10px;
  padding:22px 24px;
}
.apn-card h3{
  color:var(--apn-white);
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0 0 16px;
}

.apn-info-list{list-style:none;margin:0;padding:0;}
.apn-info-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.apn-info-list li:last-child{border-bottom:none;}
.apn-info-list li span{color:var(--apn-text);}
.apn-info-list li strong{color:var(--apn-white);font-weight:600;text-align:right;}

.apn-status--active{color:var(--apn-success) !important;}
.apn-status--pending{color:var(--apn-gold) !important;}
.apn-status--expired,
.apn-status--cancelled{color:var(--apn-error) !important;}

.apn-form--inline{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ================= TABLET ================= */
@media (max-width:900px){
  .apn-plan-grid{grid-template-columns:1fr;}
  .apn-cards-grid{grid-template-columns:1fr;}
}

/* ================= MOBILE ================= */
@media (max-width:600px){
  .apn-auth-wrap{padding:24px 20px;border-radius:8px;}
  .apn-form__grid{grid-template-columns:1fr;gap:0;}
  .apn-dashboard__header{flex-wrap:wrap;}
  .apn-dashboard__logout{width:100%;justify-content:center;}
  .apn-tabs{gap:0;}
  .apn-tab{padding:10px 12px;font-size:11.5px;}
  .apn-card{padding:18px;}
}