/* ============================================================

   PBG PUBLIC USERS.PHP CONSISTENCY LAYER v1.7.0

   Baseline: the approved users.php card language.

   This layer is visual-only and deliberately does not resize the

   homepage hero/server carousel or change public page data/logic.

   ============================================================ */



/* Keep the approved Users page itself as the reference. */

.pbg-page-users .user-directory-card { transition: transform .24s ease; }



/* Shared legacy surfaces: make older public blocks read like users.php cards. */

.pbg-public-page:not(.pbg-page-index) :is(

  .panel,

  .application-note,

  .staff-overview-card,

  .staff-hero-copy,

  .staff-highlight-card,

  .staff-block,

  .staff-role-card,

  .staff-expect-item,

  .staff-cta-strip,

  .purchase-hero,

  .summary-card,

  .purchase-toolbar,

  .purchase-card,

  .purchase-empty,

  .pbg-forum-hero-card,

  .pbg-forum-card,

  .pbg-forum-post,

  .bp-policy-section,

  .bp-note,

  .vote-status-card,

  .hub-accordion,

  .table-wrap,

  .policy-live-shell .pbg-policies-card

) {

  border-radius: var(--radius-a) var(--radius-b) var(--radius-a) var(--radius-b) !important;

  border: 1px solid rgba(72,119,255,.34) !important;

  background: linear-gradient(180deg,rgba(2,10,24,.38),rgba(1,7,17,.48)) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.12) !important;

  backdrop-filter: blur(8px);

  transition: background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease !important;

}



.pbg-public-page:not(.pbg-page-index) :is(

  .panel,

  .application-note,

  .staff-overview-card,

  .staff-hero-copy,

  .staff-highlight-card,

  .staff-block,

  .staff-role-card,

  .staff-expect-item,

  .staff-cta-strip,

  .summary-card,

  .purchase-toolbar,

  .purchase-card,

  .pbg-forum-hero-card,

  .pbg-forum-card,

  .pbg-forum-post,

  .bp-policy-section,

  .bp-note,

  .vote-status-card,

  .hub-accordion,

  .table-wrap,

  .policy-live-shell .pbg-policies-card

):hover {

  background: linear-gradient(145deg,rgba(2,14,34,.72),rgba(0,5,14,.82)) !important;

  border-color: rgba(80,132,255,.52) !important;

  box-shadow: inset 0 0 38px color-mix(in srgb,var(--accent) 10%,transparent),0 0 24px color-mix(in srgb,var(--accent) 13%,transparent) !important;

}



/* Older inner tiles should stay lighter than their parent card, just like users.php stats. */

.pbg-public-page:not(.pbg-page-index) :is(

  .application-field input,.application-field textarea,.application-field select,

  .checkbox-wrap,.purchase-item,.purchase-detail,.purchase-access,.purchase-access-date,

  .schedule-detail,.hub-server-stat-new,.support-department,.support-request-row,

  .bp-flow-step,.bp-instant-grid > *, .clan-resource,.clan-achievement

) {

  border-radius:16px 9px 16px 9px !important;

  border-color:rgba(49,94,213,.24) !important;

  background:rgba(1,8,19,.32) !important;

}



/* Forms and filters use the Users page filter language everywhere. */

.pbg-public-page :is(.filter-bar,.purchase-filter-grid,.support-new-form,.pbg-forum-form) input,

.pbg-public-page :is(.filter-bar,.purchase-filter-grid,.support-new-form,.pbg-forum-form) select,

.pbg-public-page :is(.filter-bar,.purchase-filter-grid,.support-new-form,.pbg-forum-form) textarea,

.pbg-public-page .form-control,

.pbg-public-page .pbg-forum-input,

.pbg-public-page .pbg-forum-textarea {

  border:1px solid rgba(65,117,255,.32) !important;

  background:rgba(1,8,20,.60) !important;

  color:#eef4ff !important;

  border-radius:14px 9px 14px 9px !important;

}

.pbg-public-page :is(input,select,textarea):focus {

  border-color:rgba(83,135,255,.68) !important;

  box-shadow:0 0 0 3px rgba(23,111,255,.10),0 0 18px rgba(23,111,255,.10) !important;

  outline:none !important;

}



/* Tables should float on the dotted canvas instead of becoming large solid slabs. */

.pbg-public-page .table-wrap { overflow:auto; }

.pbg-public-page .table-wrap table { background:transparent !important; }

.pbg-public-page .table-wrap thead th {

  background:rgba(5,22,53,.54) !important;

  border-bottom-color:rgba(72,119,255,.24) !important;

}

.pbg-public-page .table-wrap tbody tr { transition:background .18s ease; }

.pbg-public-page .table-wrap tbody tr:hover { background:rgba(4,20,49,.38) !important; }



/* Application page: same card language without changing the form/content. */

.pbg-page-application .staff-overview-card::before { opacity:.36 !important; }

.pbg-page-application .staff-overview-inner { padding:24px !important; }

.pbg-page-application .staff-highlight-grid,

.pbg-page-application .staff-section-grid { gap:14px !important; }

.pbg-page-application .staff-highlight-card,

.pbg-page-application .staff-block,

.pbg-page-application .staff-role-card { box-shadow:none !important; }

.pbg-page-application .staff-role-step {

  background:rgba(5,25,62,.74) !important;

  border:1px solid rgba(75,124,255,.42) !important;

  color:#b7c8ff !important;

  box-shadow:0 0 18px rgba(23,111,255,.12) !important;

}

.pbg-page-application .application-btn { border-radius:14px !important; }

.pbg-page-application .application-btn.primary {

  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 72%,#061c49),var(--accent),var(--accent-2)) !important;

}



/* Store purchases contained orange remnants in the old custom page. Keep them PBG blue. */

.pbg-page-store-purchases .purchase-pagination .current,

.pbg-page-store-purchases .purchase-icon {

  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 72%,#061c49),var(--accent),var(--accent-2)) !important;

  border-color:rgba(105,144,255,.55) !important;

}



/* Forums: keep forum functionality but use the same dark-glass card surfaces. */

.pbg-page-forum-board :is(.pbg-forum-card,.pbg-forum-hero-card,.pbg-thread-card),

.pbg-page-forum-thread :is(.pbg-forum-card,.pbg-forum-hero-card,.pbg-forum-post) {

  border-color:rgba(72,119,255,.34) !important;

  background:linear-gradient(180deg,rgba(2,10,24,.38),rgba(1,7,17,.48)) !important;

}

.pbg-page-forum-board .pbg-thread-card:hover,

.pbg-page-forum-thread .pbg-forum-post:hover {

  background:linear-gradient(145deg,rgba(2,14,34,.72),rgba(0,5,14,.82)) !important;

  box-shadow:inset 0 0 30px rgba(23,111,255,.08),0 0 22px rgba(23,111,255,.10) !important;

}



/* Live map: only the server card and actual square map should float above the dots.

   Remove the huge dark outer rectangle around the iframe. */

.pbg-page-live-map .live-map-frame-card {

  background:transparent !important;

  padding:0 !important;

  overflow:visible !important;

  box-shadow:none !important;

  border-radius:0 !important;

}

.pbg-page-live-map .live-map-frame-card::before,

.pbg-page-live-map .live-map-frame-card::after { display:none !important; }

.pbg-page-live-map .live-map-frame-card:hover { transform:none !important; }

.pbg-page-live-map .live-map-frame-body {

  background:transparent !important;

  overflow:visible !important;

  padding:0 !important;

}

.pbg-page-live-map .live-map-frame-head {

  background:transparent !important;

  border:0 !important;

  padding:6px 2px 12px !important;

}

.pbg-page-live-map .live-map-iframe {

  background:transparent !important;

  border:0 !important;

  border-radius:26px 14px 26px 14px !important;

}



/* The Community Hub embedded map should also let the shared dotted canvas show around it. */

.pbg-page-community-hub .hub-map-frame-new {

  background:transparent !important;

  border-radius:26px 14px 26px 14px !important;

}



/* Policy cards and legacy content should not create a second opaque page background. */

.pbg-page-terms .policy-live-shell,

.pbg-page-terms .pbg-policies-wrap { background:transparent !important; }

.pbg-page-terms .pbg-policy-content section { background:rgba(1,8,19,.25) !important; }



/* Keep footer shared and compact without duplicate visual weight. */

.pbg-public-page .site-footer { padding-top:20px !important; padding-bottom:12px !important; }

.pbg-public-page .footer-grid { gap:20px !important; }

.pbg-public-page .footer-bottom { margin-top:14px !important; padding-top:10px !important; }



/* Responsive cleanup only; no homepage dimension overrides. */

@media(max-width:900px){

  .pbg-page-application .staff-hero-grid,

  .pbg-page-application .staff-section-grid{grid-template-columns:1fr !important}

  .pbg-page-application .staff-block-wide{grid-column:auto !important}

}

@media(max-width:650px){

  .pbg-page-application .application-stats{grid-template-columns:1fr !important}

  .pbg-page-application .form-grid{grid-template-columns:1fr !important}

  .pbg-page-application .application-field.full{grid-column:auto !important}

}



/* v1.7.1 — compact footer: no duplicated navigation columns. */

.pbg-public-page .site-footer.site-footer-compact{

  padding:10px 20px !important;

  min-height:0 !important;

  background:rgba(1,7,17,.94) !important;

  border-top:1px solid rgba(55,106,242,.22) !important;

  content-visibility:visible !important;

  contain-intrinsic-size:auto !important;

}

.pbg-public-page .footer-compact-inner{

  width:min(var(--shell),calc(100% - 8px));

  margin:0 auto;

  display:grid;

  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);

  align-items:center;

  gap:16px;

}

.pbg-public-page .footer-compact-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#8194b0;font-size:13px}

.pbg-public-page .site-footer.site-footer-compact .footer-logo{width:108px !important;max-height:34px !important;object-fit:contain}

.pbg-public-page .footer-compact-social{margin:0 !important;justify-self:center}

.pbg-public-page .footer-compact-social a{width:36px;height:36px;margin:0 !important;border-radius:13px 8px 13px 8px}

.pbg-public-page .footer-compact-version{justify-self:end;color:#667b99;font-size:12px;white-space:nowrap}

@media(max-width:650px){

  .pbg-public-page .site-footer.site-footer-compact{padding:10px 14px !important}

  .pbg-public-page .footer-compact-inner{grid-template-columns:1fr auto;gap:10px}

  .pbg-public-page .footer-compact-social{justify-self:end}

  .pbg-public-page .footer-compact-version{grid-column:1/-1;justify-self:center;font-size:11px}

  .pbg-public-page .site-footer.site-footer-compact .footer-logo{width:92px !important}

}



/* ============================================================

   v1.7.2 — STAFF APPLICATION ONLY

   Keep the public staff application readable and visually aligned

   with users.php without changing any other public page dimensions.

   ============================================================ */



/* The old application wrapper was a large opaque slab. Let the dotted

   public canvas show through and turn the actual content into cards. */

.pbg-page-application .section > .panel {

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  overflow: visible !important;

}

.pbg-page-application .section > .panel:hover {

  background: transparent !important;

  border-color: transparent !important;

  box-shadow: none !important;

  transform: none !important;

}



/* Heading card above the questions — same light glass language as users.php. */

.pbg-page-application .section > .panel > .section-heading {

  margin: 0 0 14px !important;

  padding: 18px 20px !important;

  border: 1px solid rgba(72,119,255,.34) !important;

  border-radius: var(--radius-a) var(--radius-b) var(--radius-a) var(--radius-b) !important;

  background: linear-gradient(180deg,rgba(2,10,24,.40),rgba(1,7,17,.52)) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.10) !important;

  backdrop-filter: blur(8px);

  transition: background .22s ease,border-color .22s ease,box-shadow .22s ease !important;

}

.pbg-page-application .section > .panel > .section-heading:hover {

  background: linear-gradient(145deg,rgba(2,14,34,.72),rgba(0,5,14,.82)) !important;

  border-color: rgba(80,132,255,.52) !important;

  box-shadow: inset 0 0 34px rgba(23,111,255,.08),0 0 22px rgba(23,111,255,.10) !important;

}



.pbg-page-application .section-heading .shell-kicker {

  color: #86a7ff !important;

}

.pbg-page-application .section-heading .shell-title {

  color: #f4f7ff !important;

}

.pbg-page-application .section-heading .shell-copy {

  color: #b9c7dc !important;

}



/* Each question becomes its own users.php-style glass tile rather than

   disappearing into one large dark rectangle. */

.pbg-page-application .form-grid {

  gap: 14px !important;

  align-items: start;

}

.pbg-page-application .application-field {

  padding: 14px !important;

  border: 1px solid rgba(55,104,235,.28) !important;

  border-radius: 18px 10px 18px 10px !important;

  background: linear-gradient(180deg,rgba(2,10,24,.32),rgba(1,7,17,.42)) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;

  transition: background .20s ease,border-color .20s ease,box-shadow .20s ease,transform .20s ease !important;

}

.pbg-page-application .application-field:hover {

  background: linear-gradient(145deg,rgba(3,17,40,.64),rgba(0,6,16,.76)) !important;

  border-color: rgba(75,126,255,.46) !important;

  box-shadow: inset 0 0 26px rgba(23,111,255,.055),0 0 16px rgba(23,111,255,.07) !important;

}



/* Fix the nearly-black question labels seen on the live page. */

.pbg-page-application .application-field > label:not(.checkbox-wrap) {

  display: block !important;

  margin: 0 0 8px !important;

  color: #9eb8ff !important;

  font-size: 12px !important;

  font-weight: 850 !important;

  line-height: 1.35 !important;

  letter-spacing: .11em !important;

  text-transform: uppercase !important;

  text-shadow: 0 0 12px rgba(23,111,255,.12);

}

.pbg-page-application .application-required {

  color: #ff8d98 !important;

  text-shadow: none !important;

}



/* Inputs stay dark, but readable, instead of blending into the surrounding panel. */

.pbg-page-application .application-field input:not([type="checkbox"]),

.pbg-page-application .application-field textarea,

.pbg-page-application .application-field select {

  width: 100% !important;

  min-height: 44px;

  padding: 12px 14px !important;

  color: #f0f5ff !important;

  background: rgba(1,8,20,.62) !important;

  border: 1px solid rgba(67,117,255,.32) !important;

  border-radius: 14px 8px 14px 8px !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;

}

.pbg-page-application .application-field textarea {

  min-height: 132px !important;

  line-height: 1.55;

}

.pbg-page-application .application-field input[readonly] {

  color: #c9d7ed !important;

  background: rgba(5,14,31,.54) !important;

}

.pbg-page-application .application-field input::placeholder,

.pbg-page-application .application-field textarea::placeholder {

  color: #637895 !important;

}

.pbg-page-application .application-field input:focus,

.pbg-page-application .application-field textarea:focus,

.pbg-page-application .application-field select:focus {

  border-color: rgba(83,135,255,.72) !important;

  box-shadow: 0 0 0 3px rgba(23,111,255,.10),0 0 18px rgba(23,111,255,.10) !important;

}



.pbg-page-application .checkbox-wrap {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  color: #dce7f8 !important;

  background: transparent !important;

  border: 0 !important;

  padding: 2px 0 !important;

}

.pbg-page-application .application-helper {

  color: #9eafc8 !important;

}



/* Keep the submit area open and compact, not another large blank card. */

.pbg-page-application .application-field.full:last-child {

  padding: 4px 0 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

}

.pbg-page-application .application-field.full:last-child:hover {

  background: transparent !important;

  border-color: transparent !important;

  box-shadow: none !important;

}



@media(max-width:700px){

  .pbg-page-application .section > .panel > .section-heading{padding:15px !important}

  .pbg-page-application .application-field{padding:12px !important}

}



/* ============================================================

   v1.7.3 — PUBLIC FILTER DEFAULTS + SHORT APPLICATION PAGE

   - Server filters are handled in players.php / clans.php.

   - Keep the compact footer at the bottom of short Applications pages.

   Scoped to applications.php only so homepage/other page dimensions do not move.

   ============================================================ */

.pbg-page-applications {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

.pbg-page-applications > .page-shell {

  width: 100%;

  flex: 1 0 auto;

  margin-top: 0;

  margin-bottom: 0;

}

.pbg-page-applications > .site-footer.site-footer-compact {

  margin-top: auto;

  flex: 0 0 auto;

}