/* ================================================
   PRIKAZNA PORTAL — pcp2-portal.css
   ================================================ */

/* ---- LIGHT THEME VARIABLES ---- */
.pcp2-theme-light {
  --pcp2-bg:            #f9f3ef;
  --pcp2-white:         #fdf9f6;
  --pcp2-border:        #e8d8cc;
  --pcp2-text:          #2c1a14;
  --pcp2-text-muted:    #9b8478;
  --pcp2-primary:       #8b3a52;
  --pcp2-primary-light: rgba(139,58,82,0.10);
  --pcp2-shadow:        0 4px 32px rgba(139,58,82,0.10);
  --pcp2-sidebar-bg:    #fdf6f0;
  --pcp2-sidebar-border:#e8d8cc;
  --pcp2-nav-active-bg: rgba(139,58,82,0.10);
  --pcp2-avatar-bg:     linear-gradient(135deg,#e8b4b8,#8b3a52);
  --pcp2-header-bg:     linear-gradient(135deg,#fdf0eb 0%,#f9ece8 100%);
  --pcp2-card-bg:       #fdf9f6;
  --pcp2-section-bg:    #fdf9f6;
  --pcp2-input-bg:      #f9f3ef;
  --pcp2-stat-gradient: linear-gradient(135deg,#f9ece8,#f5e6d0);
  --pcp2-progress-gradient: linear-gradient(90deg,#8b3a52,#c9a96e);
  --pcp2-badge-color:   #8b3a52;
  --pcp2-badge-bg:      rgba(139,58,82,0.10);
  --pcp2-gold:          #c9a96e;
  --pcp2-radius:        16px;
}

/* ---- DARK THEME VARIABLES ---- */
.pcp2-theme-dark {
  --pcp2-bg:            #0f0a0d;
  --pcp2-white:         #1a1118;
  --pcp2-border:        #2e1a22;
  --pcp2-text:          #f5f0e8;
  --pcp2-text-muted:    #a08888;
  --pcp2-primary:       #c9922a;
  --pcp2-primary-light: rgba(201,146,42,0.14);
  --pcp2-shadow:        0 4px 40px rgba(0,0,0,0.60);
  --pcp2-sidebar-bg:    #0a0608;
  --pcp2-sidebar-border:#2e1a22;
  --pcp2-nav-active-bg: rgba(201,146,42,0.12);
  --pcp2-avatar-bg:     linear-gradient(135deg,#8b1a2e,#c9922a);
  --pcp2-header-bg:     linear-gradient(135deg,#140a10 0%,#1e1018 100%);
  --pcp2-card-bg:       #160d14;
  --pcp2-section-bg:    #160d14;
  --pcp2-input-bg:      #0a0608;
  --pcp2-stat-gradient: linear-gradient(135deg,#1e1018,#2a1020);
  --pcp2-progress-gradient: linear-gradient(90deg,#8b1a2e,#c9922a);
  --pcp2-badge-color:   #c9922a;
  --pcp2-badge-bg:      rgba(201,146,42,0.14);
  --pcp2-bordeaux:      #8b1a2e;
  --pcp2-gold:          #c9922a;
  --pcp2-radius:        16px;
}

/* ================================================================
   PORTAL OUTER WRAPPER
================================================================ */
.pcp2-portal-outer {
  position: relative;
  width: 80vw;
  left: 50%;
  margin-left: -40vw;
  margin-top: 30px;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

/* ================================================================
   PORTAL LAYOUT
================================================================ */
.pcp2-portal {
  display: flex;
  gap: 0;
  width: 100% !important;
  height: 80vh;
  background: var(--pcp2-bg);
  border-radius: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
.pcp2-portal * { box-sizing: border-box; }

/* ================================================================
   SIDEBAR
================================================================ */
.pcp2-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--pcp2-sidebar-bg);
  border-right: 1px solid var(--pcp2-sidebar-border);
  display: flex;
  flex-direction: column;
  height: 80vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

/* Sidebar top — user info */
.pcp2-sidebar-top {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--pcp2-sidebar-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pcp2-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pcp2-avatar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.pcp2-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pcp2-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.pcp2-user-email {
  font-size: 11px;
  color: var(--pcp2-text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.pcp2-sidebar-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--pcp2-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}

/* Nav */
.pcp2-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.pcp2-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 13.5px;
  color: var(--pcp2-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.pcp2-nav-item:hover {
  background: var(--pcp2-nav-active-bg);
  color: var(--pcp2-primary);
  text-decoration: none;
}
.pcp2-nav-item.pcp2-active {
  background: var(--pcp2-nav-active-bg);
  color: var(--pcp2-primary);
  border-left-color: var(--pcp2-primary);
  font-weight: 600;
}
.pcp2-nav-item .pcp2-nav-icon { font-size: 16px; flex-shrink: 0; }

/* Logout */
.pcp2-logout {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--pcp2-sidebar-border);
  font-size: 13px;
  color: #c0392b !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcp2-logout:hover { opacity: 0.8; text-decoration: none; }

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
.pcp2-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  height: 80vh;
  padding: 28px 32px;
  background: var(--pcp2-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pcp2-tab-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pcp2-border);
}
.pcp2-tab-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--pcp2-text);
  margin: 0;
}

/* ================================================================
   SECTIONS & CARDS
================================================================ */
.pcp2-section {
  background: var(--pcp2-section-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.pcp2-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--pcp2-text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcp2-empty {
  text-align: center;
  color: var(--pcp2-text-muted);
  padding: 24px 0;
  font-size: 14px;
}

/* ================================================================
   DASHBOARD
================================================================ */
.pcp2-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pcp2-welcome {
  margin-bottom: 24px;
}
.pcp2-welcome h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--pcp2-text);
  margin: 0 0 6px;
}
.pcp2-welcome p { color: var(--pcp2-text-muted); margin: 0; font-size: 14px; }
.pcp2-welcome strong { color: var(--pcp2-primary); }

/* Contact info card */
.pcp2-contact-info { display: flex; flex-direction: column; gap: 10px; }
.pcp2-info-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pcp2-text); }
.pcp2-info-row span:first-child { color: var(--pcp2-text-muted); min-width: 130px; font-size: 13px; }

/* Events list */
.pcp2-events-list { display: flex; flex-direction: column; gap: 12px; }
.pcp2-event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.pcp2-event-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  background: var(--pcp2-primary-light);
  border-radius: 8px;
  padding: 6px 8px;
}
.pcp2-event-day { font-size: 20px; font-weight: 800; color: var(--pcp2-primary); line-height: 1; }
.pcp2-event-mon { font-size: 10px; font-weight: 600; color: var(--pcp2-text-muted); text-transform: uppercase; }
.pcp2-event-info { flex: 1; }
.pcp2-event-info h4 { font-size: 14px; font-weight: 600; color: var(--pcp2-text); margin: 0 0 3px; }
.pcp2-event-info p  { font-size: 12px; color: var(--pcp2-text-muted); margin: 0; }

/* ================================================================
   BUTTONS
================================================================ */
.pcp2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pcp2-primary);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.pcp2-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.pcp2-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--pcp2-primary) !important;
  border: 1.5px solid var(--pcp2-primary);
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.pcp2-btn-outline:hover { background: var(--pcp2-primary); color: #fff !important; }

.pcp2-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pcp2-primary-light);
  color: var(--pcp2-primary) !important;
  border: 1px solid var(--pcp2-border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s;
}
.pcp2-btn-sm:hover { background: var(--pcp2-primary); color: #fff !important; }

/* ================================================================
   BADGES & TAGS
================================================================ */
.pcp2-badge {
  display: inline-flex;
  align-items: center;
  background: var(--pcp2-badge-bg);
  color: var(--pcp2-badge-color);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.pcp2-badge-green { background: rgba(45,158,107,0.12); color: #2d9e6b; }
.pcp2-badge-gold  { background: rgba(201,146,42,0.15); color: #c9922a; }

/* ================================================================
   FORMS (Profile, Addresses)
================================================================ */
.pcp2-input {
  border: 1.5px solid var(--pcp2-border) !important;
  border-radius: 9px !important;
  padding: 10px 13px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--pcp2-text) !important;
  -webkit-text-fill-color: var(--pcp2-text) !important;
  background: var(--pcp2-input-bg) !important;
  outline: none !important;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pcp2-input:focus {
  border-color: var(--pcp2-primary) !important;
  box-shadow: 0 0 0 3px var(--pcp2-primary-light) !important;
}
.pcp2-input::placeholder { color: var(--pcp2-text-muted) !important; opacity: 1; }

.pcp2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.pcp2-form-field { display: flex; flex-direction: column; gap: 5px; }
.pcp2-form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pcp2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Addresses */
.pcp2-addresses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pcp2-address-card {
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 20px 22px;
}
.pcp2-address-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--pcp2-text);
  margin: 0 0 16px;
}
.pcp2-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pcp2-addr-full { grid-column: span 2; }
.pcp2-addr-grid label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pcp2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

/* Payment */
.pcp2-payment-list { display: flex; flex-direction: column; gap: 12px; }
.pcp2-payment-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.pcp2-payment-card.is-default { border-color: var(--pcp2-primary); }
.pcp2-payment-icon { font-size: 28px; }
.pcp2-payment-info { flex: 1; }
.pcp2-payment-info strong { display: block; font-size: 14px; color: var(--pcp2-text); }
.pcp2-payment-actions { display: flex; gap: 8px; align-items: center; }

/* Orders */
.pcp2-orders-table { width: 100%; border-collapse: collapse; }
.pcp2-orders-table th { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--pcp2-primary); border-bottom: 2px solid var(--pcp2-border); text-align: left; }
.pcp2-orders-table td { padding: 12px 14px; font-size: 14px; color: var(--pcp2-text); border-bottom: 1px solid var(--pcp2-border); }
.pcp2-orders-table tr:last-child td { border-bottom: none; }

/* ================================================================
   SUBSCRIPTIONS / COURSES IN PORTAL
================================================================ */
.pcp2-course-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pcp2-course-card {
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 12px;
  overflow: hidden;
}
.pcp2-course-thumb { width: 100%; height: 130px; object-fit: cover; display: block; }
.pcp2-course-body  { padding: 14px 16px; }
.pcp2-course-body h4 { font-size: 14px; font-weight: 600; color: var(--pcp2-text); margin: 0 0 6px; }
.pcp2-progress-bar {
  height: 6px;
  background: var(--pcp2-border);
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.pcp2-progress-fill {
  height: 100%;
  background: var(--pcp2-progress-gradient);
  border-radius: 3px;
  transition: width 0.5s;
}

/* ================================================================
   NOTICE / ALERTS
================================================================ */
.pcp2-notice {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 500;
}
.pcp2-notice.success { background: rgba(45,158,107,0.12); color: #2d9e6b; border-left: 4px solid #2d9e6b; }
.pcp2-notice.error   { background: rgba(192,58,43,0.12);  color: #c0392b; border-left: 4px solid #c0392b; }

/* ================================================================
   AUTH FORMS (Login / Register)
================================================================ */
.pcp2-auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 40px 20px;
}
.pcp2-theme-light.pcp2-auth-wrap { background: linear-gradient(135deg,#f9f3ef 0%,#fdf6f0 50%,#f5ece8 100%); }
.pcp2-theme-dark.pcp2-auth-wrap  { background: linear-gradient(135deg,#0f0a0d 0%,#160d14 100%); }

.pcp2-auth-card {
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 20px;
  padding: 40px 44px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--pcp2-shadow);
}
.pcp2-auth-brand { text-align: center; margin-bottom: 28px; }
.pcp2-auth-brand h2 { font-size: 24px; font-weight: 800; color: var(--pcp2-text); margin: 0 0 6px; }
.pcp2-auth-brand p  { color: var(--pcp2-text-muted); font-size: 14px; margin: 0; }

.pcp2-auth-tabs {
  display: flex;
  background: var(--pcp2-bg);
  border-radius: 30px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}
.pcp2-auth-tab {
  flex: 1;
  text-align: center;
  padding: 9px 14px;
  border-radius: 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pcp2-text-muted);
  text-decoration: none;
  transition: all 0.2s;
}
.pcp2-auth-tab.active {
  background: var(--pcp2-primary);
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.pcp2-auth-form { display: flex; flex-direction: column; gap: 16px; }
.pcp2-auth-field { display: flex; flex-direction: column; gap: 5px; }
.pcp2-auth-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pcp2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pcp2-auth-field input {
  border: 1.5px solid var(--pcp2-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--pcp2-text) !important;
  -webkit-text-fill-color: var(--pcp2-text) !important;
  background: var(--pcp2-input-bg) !important;
  outline: none !important;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pcp2-auth-field input:focus {
  border-color: var(--pcp2-primary) !important;
  box-shadow: 0 0 0 3px var(--pcp2-primary-light) !important;
}
.pcp2-auth-field input::placeholder { color: var(--pcp2-text-muted) !important; opacity: 1; }

.pcp2-auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pcp2-auth-submit {
  background: var(--pcp2-primary);
  color: #fff !important;
  border: none;
  padding: 14px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.pcp2-auth-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.pcp2-auth-row { display: flex; align-items: center; justify-content: space-between; }
.pcp2-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pcp2-text); cursor: pointer; }
.pcp2-auth-link  { font-size: 13px; color: var(--pcp2-primary) !important; text-decoration: none; }
.pcp2-auth-switch { text-align: center; font-size: 13px; color: var(--pcp2-text-muted); margin: 4px 0 0; }
.pcp2-auth-switch a { color: var(--pcp2-primary) !important; font-weight: 600; text-decoration: none; }
.pcp2-auth-error {
  background: rgba(192,58,43,0.10);
  color: #c0392b;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
}

/* Password toggle */
.pcp2-pass-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.pcp2-pass-wrap input { width: 100% !important; padding-right: 44px !important; }
.pcp2-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
  z-index: 2;
}
.pcp2-eye:hover { opacity: 1; }

/* ================================================================
   AMBASSADOR TAB
================================================================ */
.pcp2-amb-card {
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 16px;
  padding: 28px 30px;
  text-align: center;
}
.pcp2-amb-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 20px 0; }
.pcp2-amb-stat {
  background: var(--pcp2-stat-gradient);
  border-radius: 12px;
  padding: 16px;
}
.pcp2-amb-stat .num { font-size: 28px; font-weight: 800; color: var(--pcp2-primary); display: block; }
.pcp2-amb-stat .lbl { font-size: 12px; color: var(--pcp2-text-muted); }

/* ================================================================
   VOUCHERS TAB
================================================================ */
.pcp2-voucher-list { display: flex; flex-direction: column; gap: 12px; }
.pcp2-voucher-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 12px;
  padding: 16px 20px;
}
.pcp2-voucher-code {
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--pcp2-primary);
  background: var(--pcp2-primary-light);
  padding: 6px 14px;
  border-radius: 8px;
  letter-spacing: 2px;
  border: 1px dashed var(--pcp2-primary);
}
.pcp2-voucher-info { flex: 1; }
.pcp2-voucher-info strong { display: block; font-size: 15px; color: var(--pcp2-text); }
.pcp2-voucher-info span   { font-size: 12px; color: var(--pcp2-text-muted); }

/* ================================================================
   MOBILE
================================================================ */
.pcp2-mobile-topbar { display: none; }
.pcp2-sidebar-overlay { display: none; }

@media (max-width: 768px) {
  .pcp2-portal-outer {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .pcp2-portal { flex-direction: column; height: auto; min-height: 100vh; }
  .pcp2-sidebar { width: 100%; height: auto; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 200; transform: translateX(-100%); transition: transform 0.28s; }
  .pcp2-sidebar.is-open { transform: translateX(0); }
  .pcp2-main { height: auto; min-height: 100vh; padding: 80px 18px 24px; }
  .pcp2-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--pcp2-sidebar-bg);
    border-bottom: 1px solid var(--pcp2-border);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
  }
  .pcp2-hamburger {
    background: none;
    border: 1.5px solid var(--pcp2-border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--pcp2-text);
    font-size: 18px;
  }
  .pcp2-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
  }
  .pcp2-sidebar-overlay.is-visible { display: block; }
  .pcp2-dashboard-grid { grid-template-columns: 1fr; }
  .pcp2-addresses-grid { grid-template-columns: 1fr; }
  .pcp2-form-grid { grid-template-columns: 1fr; }
  .pcp2-auth-grid2 { grid-template-columns: 1fr; }
  .pcp2-course-grid { grid-template-columns: 1fr 1fr; }
  .pcp2-auth-card { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .pcp2-course-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   CALENDAR IN PORTAL TAB
================================================================ */
.pcp2-cal-inline { background: var(--pcp2-card-bg); border-radius: 14px; overflow: hidden; }

/* ================================================================
   CALENDAR TAB IN PORTAL
================================================================ */
.pcp2-calendar-wrap {
  background: var(--pcp2-section-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.pcp2-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pcp2-cal-header a {
  color: var(--pcp2-primary);
  text-decoration: none;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.pcp2-cal-header a:hover { background: var(--pcp2-primary-light); }
.pcp2-cal-header span {
  font-size: 15px;
  font-weight: 700;
  color: var(--pcp2-text);
  letter-spacing: 0.5px;
}
.pcp2-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.pcp2-cal-dayname {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pcp2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0;
}
.pcp2-cal-empty { min-height: 36px; }
.pcp2-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 8px;
  cursor: default;
  transition: background 0.15s;
  position: relative;
  padding: 4px 2px;
}
.pcp2-cal-day span {
  font-size: 13px;
  color: var(--pcp2-text-muted);
  line-height: 1;
}
.pcp2-cal-day.has-event {
  cursor: pointer;
  background: var(--pcp2-primary-light);
}
.pcp2-cal-day.has-event span { color: var(--pcp2-primary); font-weight: 700; }
.pcp2-cal-day.has-event:hover { background: var(--pcp2-primary); }
.pcp2-cal-day.has-event:hover span { color: #fff; }
.pcp2-cal-day.today { background: var(--pcp2-primary) !important; border-radius: 8px; }
.pcp2-cal-day.today span { color: #fff !important; font-weight: 700; }
.pcp2-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pcp2-primary);
  margin-top: 2px;
}
.pcp2-cal-day.today .pcp2-cal-dot { background: #fff; }
.pcp2-cal-day.has-event:hover .pcp2-cal-dot { background: #fff; }
.pcp2-cal-hint { font-size: 11px; color: var(--pcp2-text-muted); margin: 8px 0 0; }

/* Event popup */
.pcp2-cal-popup {
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.pcp2-cal-popup h4 { font-size: 16px; font-weight: 700; color: var(--pcp2-text); margin: 0 0 8px; }
.pcp2-cal-popup p  { font-size: 13px; color: var(--pcp2-text-muted); margin: 4px 0; }

/* ================================================================
   AMBASSADOR TAB — improved
================================================================ */
.pcp2-amb-hero {
  background: var(--pcp2-stat-gradient);
  border: 1px solid var(--pcp2-border);
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pcp2-amb-icon { font-size: 52px; flex-shrink: 0; }
.pcp2-amb-text h3 { font-size: 20px; font-weight: 800; color: var(--pcp2-text); margin: 0 0 4px; }
.pcp2-amb-text p  { font-size: 14px; color: var(--pcp2-text-muted); margin: 0; }

.pcp2-amb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.pcp2-amb-stat {
  background: var(--pcp2-section-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pcp2-amb-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pcp2-primary);
}
.pcp2-amb-num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--pcp2-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}
.pcp2-amb-lbl {
  font-size: 12px;
  color: var(--pcp2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pcp2-amb-code-wrap {
  background: var(--pcp2-section-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.pcp2-amb-code-wrap h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--pcp2-text-muted);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pcp2-amb-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pcp2-amb-code {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--pcp2-primary);
  background: var(--pcp2-primary-light);
  padding: 10px 18px;
  border-radius: 10px;
  letter-spacing: 3px;
  border: 1.5px dashed var(--pcp2-primary);
  flex: 1;
}
.pcp2-amb-copy {
  background: var(--pcp2-primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.pcp2-amb-copy:hover { opacity: 0.88; }
.pcp2-amb-hint { font-size: 13px; color: var(--pcp2-text-muted); }

/* Referrals list */
.pcp2-ref-list { display: flex; flex-direction: column; gap: 10px; }
.pcp2-ref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pcp2-card-bg);
  border: 1px solid var(--pcp2-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--pcp2-text);
}
.pcp2-ref-amount { color: var(--pcp2-primary); font-weight: 700; }

/* ================================================================
   MOBILE RESPONSIVE — Portal, Calendar, Auth
================================================================ */

/* ---- PORTAL OUTER ---- */
@media (max-width: 768px) {
  .pcp2-portal-outer {
    width: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pcp2-portal {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Sidebar → bottom tab bar on mobile */
  .pcp2-sidebar {
    width: 100%;
    height: auto;
    min-width: unset;
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    z-index: 200;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-top: 1px solid var(--pcp2-sidebar-border);
    padding: 0;
  }
  .pcp2-sidebar-top { display: none; }
  .pcp2-nav {
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    flex: 1;
    align-items: center;
  }
  .pcp2-nav-item {
    flex-direction: column;
    padding: 8px 10px;
    font-size: 10px;
    gap: 3px;
    border-left: none;
    border-top: 2px solid transparent;
    white-space: nowrap;
    min-width: 60px;
    align-items: center;
    justify-content: center;
  }
  .pcp2-nav-item.pcp2-active {
    border-left-color: transparent;
    border-top-color: var(--pcp2-primary);
    background: var(--pcp2-nav-active-bg);
  }
  .pcp2-nav-item .pcp2-nav-icon { font-size: 20px; }
  .pcp2-logout {
    flex-direction: column;
    padding: 8px 10px;
    font-size: 10px;
    gap: 3px;
    border-top: none;
    margin-top: 0;
    min-width: 60px;
    align-items: center;
    justify-content: center;
  }

  /* Main area — add bottom padding for tab bar */
  .pcp2-main {
    height: auto;
    min-height: calc(100vh - 70px);
    padding: 18px 16px 90px;
    overflow: visible;
  }

  /* Auth form */
  .pcp2-auth-wrap {
    min-height: auto;
    padding: 20px 16px 100px;
    align-items: flex-start;
    padding-top: 20px;
  }
  /* Portal outer - no negative margin on mobile */
  .pcp2-portal-outer {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .pcp2-auth-card {
    padding: 28px 20px;
    border-radius: 16px;
    max-width: 100%;
  }
  .pcp2-auth-grid2 { grid-template-columns: 1fr; }

  /* Calendar */
  .pcp2-calendar-wrap { padding: 14px 12px; overflow: hidden; }
  .pcp2-cal-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .pcp2-cal-dayname { font-size: 9px; padding: 4px 0; }
  .pcp2-cal-day { min-height: 30px; border-radius: 6px; }
  .pcp2-cal-day span { font-size: 11px; }

  /* Dashboard */
  .pcp2-dashboard-grid { grid-template-columns: 1fr; }
  .pcp2-amb-stats { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .pcp2-amb-num { font-size: 20px; }
  .pcp2-amb-hero { flex-direction: column; text-align: center; padding: 20px; gap: 12px; }
  .pcp2-amb-icon { font-size: 40px; }

  /* Addresses */
  .pcp2-addresses-grid { grid-template-columns: 1fr; }
  .pcp2-addr-grid { grid-template-columns: 1fr; }
  .pcp2-addr-full { grid-column: span 1; }

  /* Sections */
  .pcp2-section { padding: 14px 16px; }
  .pcp2-tab-header { margin-bottom: 16px; padding-bottom: 12px; }
  .pcp2-tab-header h2 { font-size: 18px; }

  /* Events */
  .pcp2-event-card { flex-wrap: wrap; gap: 10px; }

  /* Vouchers */
  .pcp2-voucher-card { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 480px) {
  .pcp2-nav-item { min-width: 52px; padding: 8px 6px; font-size: 9px; }
  .pcp2-nav-item .pcp2-nav-icon { font-size: 18px; }
  .pcp2-main { padding: 14px 12px 90px; }
}