/* === EngiNerds Student Portal (front) === */

/* Global mini menu under header */
.sp-util-nav {
    background: #2c4b65;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.sp-util-nav ul {
    padding: 8px 16px;
    list-style: none;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    width: fit-content;
}


.actionButton {
    color: #65bc7b;
}

.actionButton:hover {
    color: #2c4b65;
}

.sp-util-nav a { color:#fff; text-decoration:none; }
.sp-util-nav a:hover,
.actionButton:hover { 
    color: #65bc7b !important;
    transition: all .2s;
}

/* Auth (login + registration) */
.sp-auth-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:800px){ .sp-auth-grid { grid-template-columns:1fr 1fr; } }
.sp-auth-card {
  border:1px solid #e5e7eb; border-radius:12px; padding:20px; background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
.sp-form label { display:block; font-weight:600; margin:6px 0 4px; }
.sp-form input[type=text],
.sp-form input[type=email],
.sp-form input[type=password],
.sp-form input[type=number],
.sp-form input[type=datetime-local],
.sp-form textarea {
  width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px;
}
.sp-row-2 { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:600px){ .sp-row-2 { grid-template-columns:1fr 1fr; } }
.sp-errors {
  background:#fee2e2; border:1px solid #ef4444; color:#7f1d1d;
  padding:10px; border-radius:8px; margin-bottom:10px;
}
.sp-note { font-size:12px; color:#6b7280; }

/* Receipt form */
.sp-receipt .sp-row-2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:600px){ .sp-receipt .sp-row-2{ grid-template-columns:1fr 1fr; } }
.sp-receipt label{ display:block; font-weight:600; margin:6px 0 4px; }
.sp-receipt input[type=text],
.sp-receipt input[type=number],
.sp-receipt input[type=email],
.sp-receipt input[type=datetime-local],
.sp-receipt textarea
{
    width: 100%;
    padding: 10px !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    line-height: 16px;
    height: 46px;
}

.dashboardIcons ul{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* equal width */
  gap:30px;
  margin-left:0;
  padding-left:0;
}

.dashboardIcons ul li{
  list-style:none;
  background:#f5f5f5;
  padding:30px 40px;
  text-align:center;
  font-size:22px;

  /* make cards look consistent */
  display:flex;                 /* center icon + text nicely */
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.dashboardIcons ul li i{
  display:block;
  font-size:30px;
  color:#2c4b65;
  margin-bottom:6px;
}

/* responsive: 2 per row on tablets, 1 per row on mobile */
@media (max-width: 900px){
  .dashboardIcons ul{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .dashboardIcons ul{ grid-template-columns: 1fr; }
}


.sfwd-courses.type-sfwd-courses,.sp-receipt, .sp-dashboard, .sp-auth-grid, .sp-payment {
    padding: 70px 0;
}

.sp-form .button.button-primary {
    padding-top: var(--button_padding-top, 13px);
    padding-right: var(--button_padding-right, 29px);
    padding-bottom: var(--button_padding-bottom, 13px);
    padding-left: var(--button_padding-left, 29px);
    line-height: var(--button_line_height, 1);
    font-size: var(--button_font_size, 14px);
    color: var(--button_accent_color, #fff);
    transition: all .2s;
    outline: 0;
    box-shadow: none !important;
    background: var(--button_gradient_top_color);
    color: var(--button_accent_color);
    border-color: var(--button_border_color);
    border: 0;
    font-family: var(--button_typography-font-family);
    font-weight: var(--button_typography-font-weight);
    font-style: var(--button_typography-font-style, normal);
    letter-spacing: var(--button_typography-letter-spacing);
    border-width: var(--button_border_width-top, 0) var(--button_border_width-right, 0) var(--button_border_width-bottom, 0) var(--button_border_width-left, 0);
    border-style: solid;
    border-radius: var(--button-border-radius-top-left, 0) var(--button-border-radius-top-right, 0) var(--button-border-radius-bottom-right, 0) var(--button-border-radius-bottom-left, 0);
    text-transform: var(--button_text_transform);
    cursor: pointer;
}

.sp-form .button.button-primary:hover {
    background: var(--button_gradient_top_color_hover);
    color: var(--button_accent_hover_color, var(--button_accent_color));
    border-color: var(--button_border_hover_color);
}