/* ========================================
   PNGSA MEMBER PORTAL
======================================== */

:root {
  --png-black: #050505;
  --png-black-soft: #121212;

  --png-red: #CE1126;
  --png-red-dark: #9F0D1D;

  --png-gold: #F4C430;
  --png-yellow: #FFD84D;

  --png-white: #FFFFFF;

  --png-bg: #F5F5F3;
  --png-border: #E4E4DF;

  --png-text: #181818;
  --png-muted: #6B6B68;
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;

  min-height: 100%;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--png-bg);

  color:
    var(--png-text);
}


/* ========================================
   LOGIN
======================================== */

.member-login-page {
  min-height: 100vh;

  background:
    linear-gradient(
      145deg,
      #050505 0%,
      #160406 35%,
      #720817 68%,
      #CE1126 100%
    );
}


.member-login-wrapper {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;
}


.member-login-card {
  width: 100%;
  max-width: 440px;

  padding: 42px;

  border-radius: 18px;

  background: white;

  border-top:
    5px solid
    var(--png-gold);

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.30);
}


.member-logo {
  display: block;

  text-align: center;
}


.member-logo img {
  width: 90px;
}


.member-eyebrow {
  margin:
    20px 0 7px;

  text-align: center;

  color:
    var(--png-red);

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 11px;

  font-weight: 700;
}


.member-login-card h1 {
  margin:
    0 0 10px;

  text-align: center;

  color:
    var(--png-black);
}


.member-login-description {
  margin-bottom: 28px;

  text-align: center;

  color:
    var(--png-muted);

  line-height: 1.5;
}


/* ========================================
   FORMS
======================================== */

.form-group {
  margin-bottom: 20px;
}


.form-group label {
  display: block;

  margin-bottom: 7px;

  color:
    var(--png-black);

  font-size: 14px;

  font-weight: 700;
}


.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  padding: 13px 14px;

  border:
    1px solid #CCD4DE;

  border-radius: 8px;

  background: white;

  color:
    #182538;

  font-family: inherit;

  font-size: 15px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.form-group textarea {
  resize: vertical;

  min-height: 100px;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:
    var(--png-red);

  box-shadow:
    0 0 0 3px
    rgba(206, 17, 38, 0.10);
}


.form-group input[readonly] {
  background:
    #F4F6F8;

  color:
    #667085;
}


.form-group small {
  display: block;

  margin-top: 7px;

  color:
    #7B8491;

  font-size: 12px;
}


.password-wrapper {
  position: relative;
}


.password-wrapper input {
  padding-right: 45px;
}


.password-toggle {
  position: absolute;

  right: 5px;
  top: 50%;

  transform:
    translateY(-50%);

  width: 38px;
  height: 38px;

  border: 0;

  background: transparent;

  color:
    #6B7280;

  cursor: pointer;
}


/* ========================================
   PRIMARY BUTTON
======================================== */

.member-primary-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 13px 18px;

  border: 0;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      var(--png-red),
      var(--png-red-dark)
    );

  color: white;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 4px 12px
    rgba(206, 17, 38, 0.20);

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.member-login-card
.member-primary-button {
  width: 100%;
}


.member-primary-button:hover {
  background:
    var(--png-red-dark);

  transform:
    translateY(-1px);
}


/* ========================================
   SECONDARY BUTTONS
======================================== */

.outline-button,
.small-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 10px 15px;

  border:
    1px solid
    var(--png-gold);

  border-radius: 7px;

  background: white;

  color:
    var(--png-black);

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;
}


.outline-button:hover,
.small-button:hover {
  background:
    var(--png-gold);

  color:
    var(--png-black);
}


/* ========================================
   FORM MESSAGES
======================================== */

.form-message {
  min-height: 20px;

  margin-top: 15px;

  font-size: 14px;
}


.form-message.error {
  color:
    #B42318;
}


.form-message.success {
  color:
    #15803D;
}


.member-login-footer {
  margin-top: 25px;

  padding-top: 20px;

  border-top:
    1px solid
    #E7EBEF;

  text-align: center;

  color:
    #748092;

  font-size: 13px;
}


.member-login-footer a {
  color:
    var(--png-red);

  text-decoration: none;

  font-weight: 700;
}


/* ========================================
   MEMBER LAYOUT
======================================== */

.member-layout {
  min-height: 100vh;
}


/* ========================================
   MEMBER SIDEBAR
======================================== */

.member-sidebar {
  position: fixed;

  top: 0;
  left: 0;

  width: 235px;
  height: 100vh;

  display: flex;
  flex-direction: column;

  color: white;

  overflow: hidden;

  z-index: 1000;

  background:
    linear-gradient(
      180deg,
      #050505 0%,
      #080808 45%,
      #190305 70%,
      #4B0811 100%
    );

  border-right:
    2px solid
    var(--png-gold);

  box-shadow:
    6px 0 25px
    rgba(0, 0, 0, 0.10);
}


/* ========================================
   SIDEBAR HEADER
======================================== */

.member-sidebar-header {
  flex-shrink: 0;

  padding: 24px 20px;

  text-align: center;

  border-bottom:
    1px solid
    rgba(244, 196, 48, 0.22);
}


.member-sidebar-header img {
  width: 68px;
}


.member-sidebar-header h2 {
  margin:
    8px 0 0;

  color: white;
}


.member-sidebar-header span {
  display: block;

  margin-top: 4px;

  color:
    var(--png-gold);

  font-size: 12px;

  font-weight: 700;
}


/* ========================================
   SCROLLABLE MEMBER NAV
======================================== */

.member-nav {
  flex: 1;

  min-height: 0;

  padding:
    20px 11px 30px;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(244, 196, 48, 0.40)
    transparent;
}


/* ========================================
   NAVIGATION LINKS
======================================== */

.member-nav a {
  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 6px;

  padding:
    12px 14px;

  border-radius: 7px;

  color:
    #F5F5F5;

  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.member-nav a i {
  width: 17px;

  flex-shrink: 0;

  text-align: center;

  color:
    var(--png-gold);
}


.member-nav a:hover {
  background:
    rgba(206, 17, 38, 0.18);

  transform:
    translateX(2px);
}


.member-nav a.active {
  background:
    linear-gradient(
      90deg,
      var(--png-red),
      var(--png-red-dark)
    );

  color: white;

  box-shadow:
    0 4px 14px
    rgba(206, 17, 38, 0.25);
}


.member-nav a.active::before {
  content: "";

  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 3px;

  border-radius:
    0 4px 4px 0;

  background:
    var(--png-yellow);
}


.member-nav a.active i {
  color:
    var(--png-yellow);
}


/* ========================================
   SIDEBAR SCROLLBAR
======================================== */

.member-nav::-webkit-scrollbar {
  width: 6px;
}


.member-nav::-webkit-scrollbar-track {
  background: transparent;
}


.member-nav::-webkit-scrollbar-thumb {
  background:
    rgba(244, 196, 48, 0.35);

  border-radius: 10px;
}


.member-nav::-webkit-scrollbar-thumb:hover {
  background:
    rgba(244, 196, 48, 0.65);
}


/* ========================================
   LOGOUT
======================================== */

.member-logout-button {
  flex-shrink: 0;

  margin: 18px;

  padding: 11px;

  border:
    1px solid
    rgba(244, 196, 48, 0.65);

  border-radius: 7px;

  background:
    rgba(206, 17, 38, 0.10);

  color: white;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


.member-logout-button:hover {
  background:
    var(--png-red);

  border-color:
    var(--png-red);
}


/* ========================================
   MAIN MEMBER AREA
======================================== */

.member-main {
  margin-left:
    235px;

  min-height:
    100vh;

  padding:
    35px;

  background:
    linear-gradient(
      135deg,
      #FAFAF8,
      #F3F3EF
    );
}


/* ========================================
   PAGE HEADER
======================================== */

.member-page-header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 20px;

  margin-bottom:
    28px;
}


.member-page-header h1 {
  margin:
    0 0 5px;

  color:
    var(--png-black);

  font-size:
    31px;
}


.member-page-header
> div
> p:not(.member-page-label) {
  margin: 0;

  color:
    var(--png-muted);
}


.member-page-label {
  margin:
    0 0 5px;

  color:
    var(--png-red);

  text-transform:
    uppercase;

  letter-spacing:
    0.8px;

  font-size:
    12px;

  font-weight:
    800;
}


/* ========================================
   SIGNED IN CARD
======================================== */

.signed-in-card {
  display: flex;

  flex-direction:
    column;

  padding:
    11px 15px;

  border:
    1px solid
    rgba(244, 196, 48, 0.55);

  border-radius:
    8px;

  background:
    white;

  box-shadow:
    0 3px 12px
    rgba(0, 0, 0, 0.05);
}


.signed-in-card span {
  color:
    #7A8492;

  font-size:
    11px;
}


.signed-in-card strong {
  margin-top:
    3px;

  font-size:
    13px;
}


/* ========================================
   STAT CARDS
======================================== */

.member-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  margin-bottom:
    25px;
}


.member-stat-card {
  display: flex;

  align-items:
    center;

  gap: 15px;

  padding:
    22px;

  border:
    1px solid
    var(--png-border);

  border-top:
    3px solid
    var(--png-gold);

  border-radius:
    12px;

  background:
    white;

  box-shadow:
    0 4px 14px
    rgba(0, 0, 0, 0.04);
}


.stat-icon {
  width:
    44px;

  height:
    44px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  background:
    rgba(206, 17, 38, 0.08);

  color:
    var(--png-red);
}


.member-stat-card p {
  margin:
    0 0 5px;

  color:
    #758091;

  font-size:
    12px;
}


.member-stat-card strong {
  color:
    var(--png-black);
}


/* ========================================
   PANELS
======================================== */

.member-panel {
  margin-bottom:
    24px;

  padding:
    25px;

  border:
    1px solid
    var(--png-border);

  border-radius:
    12px;

  background:
    white;

  box-shadow:
    0 4px 14px
    rgba(0, 0, 0, 0.04);
}


.member-panel-header {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;
}


.member-panel-header h2 {
  margin:
    0;

  color:
    var(--png-black);
}


/* ========================================
   PROFILE SUMMARY
======================================== */

.profile-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;
}


.profile-summary-grid div {
  padding:
    16px;

  border:
    1px solid
    #EEEEEA;

  border-radius:
    8px;

  background:
    #F8F8F5;
}


.profile-summary-grid span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--png-red);

  font-size:
    11px;

  text-transform:
    uppercase;

  font-weight:
    700;
}


/* ========================================
   MEMBER ALERT
======================================== */

.member-alert {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    24px;

  padding:
    18px 20px;

  border:
    1px solid
    var(--png-gold);

  border-radius:
    10px;

  background:
    #FFF8DD;
}


.member-alert > div {
  display: flex;

  align-items:
    center;

  gap:
    13px;
}


.member-alert h3 {
  margin:
    0 0 4px;
}


.member-alert p {
  margin: 0;
}


.muted-text {
  color:
    #707C8E;
}


/* ========================================
   PROFILE FORM
======================================== */

.profile-form-grid {
  display: grid;

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

  gap:
    5px 22px;
}


.full-width {
  grid-column:
    1 / -1;
}


.profile-actions {
  display: flex;

  gap:
    10px;

  margin-top:
    10px;
}


/* ========================================
   PROFILE PICTURE AREA
======================================== */

.profile-picture-section,
.profile-image-section,
.profile-photo-section {
  display: flex;

  align-items:
    center;

  gap:
    20px;

  padding:
    20px;

  margin-bottom:
    25px;

  border:
    1px solid
    #E1E6EC;

  border-radius:
    12px;

  background:
    #F8FAFC;
}


/* ========================================
   FILE INPUT
======================================== */

input[type="file"] {
  max-width:
    100%;

  font-family:
    inherit;
}


input[type="file"]::file-selector-button {
  margin-right:
    12px;

  padding:
    10px 14px;

  border:
    0;

  border-radius:
    7px;

  background:
    var(--png-red);

  color:
    white;

  font-weight:
    700;

  cursor:
    pointer;
}


input[type="file"]::file-selector-button:hover {
  background:
    var(--png-red-dark);
}


/* ========================================
   VOTING
======================================== */

.ballot-position {
  margin-bottom:
    22px;

  padding:
    25px;

  border:
    1px solid
    var(--png-border);

  border-radius:
    12px;

  background:
    white;
}


.ballot-position h2 {
  margin:
    0 0 18px;

  color:
    var(--png-black);
}


.candidate-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    15px;
}


.candidate-option {
  position:
    relative;
}


.candidate-option input {
  position:
    absolute;

  opacity:
    0;
}


.candidate-option label {
  display:
    block;

  height:
    100%;

  padding:
    18px;

  border:
    2px solid
    #E1E6EC;

  border-radius:
    10px;

  cursor:
    pointer;

  transition:
    0.2s;
}


.candidate-option input:checked
+ label {
  border-color:
    var(--png-red);

  background:
    #FFF4F5;

  box-shadow:
    0 0 0 2px
    rgba(206, 17, 38, 0.06);
}


.candidate-option h3 {
  margin:
    0 0 6px;

  color:
    var(--png-black);
}


.candidate-option p {
  margin:
    0;

  color:
    #6C7787;

  line-height:
    1.5;
}


.ballot-submit-panel {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 800px) {

  .member-layout {
    display:
      block;
  }


  .member-sidebar {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      100%;

    height:
      auto;

    overflow:
      visible;

    border-right:
      none;

    border-bottom:
      3px solid
      var(--png-gold);

    z-index:
      auto;
  }


  .member-main {
    margin-left:
      0;

    padding:
      20px;
  }


  .member-nav {
    display:
      flex;

    flex:
      none;

    min-height:
      auto;

    padding:
      12px;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    white-space:
      nowrap;
  }


  .member-nav a {
    flex:
      0 0 auto;

    margin-right:
      6px;

    margin-bottom:
      0;

    white-space:
      nowrap;
  }


  .member-nav a:hover {
    transform:
      none;
  }


  .member-nav a.active::before {
    display:
      none;
  }


  .member-logout-button {
    margin:
      10px 12px 15px;
  }


  .member-page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .member-stat-grid,
  .profile-summary-grid,
  .profile-form-grid,
  .candidate-grid {
    grid-template-columns:
      1fr;
  }


  .member-alert,
  .ballot-submit-panel {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .profile-picture-section,
  .profile-image-section,
  .profile-photo-section {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

  .member-main {
    padding:
      15px;
  }


  .member-panel {
    padding:
      18px;
  }


  .member-page-header h1 {
    font-size:
      27px;
  }


  .member-login-card {
    padding:
      30px 22px;
  }

}