html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
  background-color: var(--pure-white);

}

.t {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
}

h1, h2, h3, .bold, .card-title, .h {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.noselect, button, .card-tag, .tag, .radio-option {
  /* Prevent text selection, buttons and tags */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.selectTags{
    background: none;
    border: none;
    outline: none;
}

.selectable {
  /** When placed in a noselect area, makes text selectable **/
  -webkit-user-select: text; /* Safari */
  -ms-user-select: text; /* IE 10 and IE 11 */
  user-select: text; /* Standard syntax */
}

.resident ::selection {
  /* Resident theme selection: use theme primary color */
  background: var(--blue-primary);
  color: var(--pure-white);
}

.student ::selection {
  /* Student theme selection: use theme primary color */
  background: var(--green-primary);
  color: var(--pure-white);
}

/* Login Page */
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
.login-part{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 100px;
    min-width: fit-content;
}
.logo-holder{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
.page-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding-top: 100px;
}
.vertical-line{
    width: 2px;
    height: 300px;
    align-self: flex-start !important;
    margin-top: 50px !important;

}
.login-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.transparent:hover {
  box-shadow: 0 0px 0px var(--shadow-box) !important;
}
.login-section h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--navy-dark);
}

.logo-placeholder {
  content: var(--web-logo);
  background-size: contain;
  background-repeat: no-repeat;
  width: 250px;
  height: 250px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.corner-logo{
    width: clamp(32px, 8vw, 60px);
    height: clamp(32px, 8vw, 60px);
}

.login-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 320px;
}
.login-btnh {
  padding: 6px 24px;
  border: 2px solid;
  border-radius: 50px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.login-btn {
  padding: 12px 24px;
  border: 2px solid;
  border-radius: 50px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.login-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 16px var(--shadow-box);
}
.login-btn::before {
  content: '';
  width: 28px;
  height: 28px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.google-btn::before {
  background-image: var(--google-logo);
}
.yahoo-btn::before {
  background-image: var(--yahoo-logo);
}
.apple-btn::before {
  background-image: var(--apple-logo);
}
.microsoft-btn::before {
  background-image: var(--microsoft-logo);
}

.google-btn:hover .g0 {
  color: var(--gray-hover);
}
.google-btn:hover .g1, .google-btn:hover .g4 {
  color: var(--google-color-blue);
}
.google-btn:hover .g2, .google-btn:hover .g6 {
  color: var(--google-color-red);
}
.google-btn:hover .g3 {
  color: var(--google-color-yellow);
}
.google-btn:hover .g5 {
  color: var(--google-color-green);
}
.yahoo-btn:hover::before {
  background-image: var(--yahoo-logo-white);
  filter: brightness(0) invert(1);
}
.yahoo-btn:hover {
  background-color: var(--yahoo-color) !important;
  border-color: var(--yahoo-color) !important;
}
.apple-btn:hover::before {
  background-image: var(--apple-logo);
  filter: brightness(0) invert(1);
}

.student-btn:hover {
  background-color: var(--green-dark) !important;
  box-shadow: 0 4px 16px var(--shadow-hover) !important;
}
.student-btn::before {
  background-image: var(--student-logo) !important;
}


/* Pending Approval Page */
.pending-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.pending-box {
  background: var(--pure-white);
  padding: 50px 70px;
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow-box);
  text-align: center;
  max-width: 600px;
}
.pending-box h2 {
  color: var(--navy-dark);
  margin-bottom: 25px;
  font-size: 24px;
}
.pending-box p {
  color: var(--gray-text);
  line-height: 1.6;
  font-size: 16px;
}
.reload-btn, .approve-btn {
  margin-top: 30px;
  padding: 12px 35px;
  background-color: var(--blue-primary);
  color: var(--pure-white);
  border: none;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
}
.approve-btn {
  margin-left: 10px;
}

/* Main Header */
.header {
  background: var(--pure-white);
  padding: 20px 40px;
  box-shadow: 0 2px 5px var(--shadow-light);
  margin-bottom: 30px;
}
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
.logo-posts{
    display: flex;
    flex-direction: row;
    gap: 17px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toggle-container {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.toggle-btn {
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  color: var(--gray-text);
  border-bottom: 3px solid transparent;
}
.toggle-btn.active {
  color: var(--navy-dark);
  border-bottom: 3px solid var(--green-primary);
}
.filter-btn, .create-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.create-btn:hover {
  background-color: var(--gray-hover);
}

.divider-pipe {
  color: var(--gray-border);
}

/* Opportunities Grid */
.opportunities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 40px;
  align-items: start;
}
.opportunity-card {
  background: var(--pure-white);
  border-radius: 10px;
  padding: 20px; box-shadow: 0 2px 8px var(--shadow-medium);
  transition: box-shadow 0.2s; display: flex; flex-direction: column; min-height: 240px;
}
.opportunity-card:hover {
  box-shadow: 0 4px 12px var(--shadow-hover);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 4%;
}
.card-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--navy-dark);
  font-size: 18px;
  flex: 0 0 38%;
  min-width: 0;
}
/* Cards */
.card-tag {
  border: none;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
  flex-shrink: 0;
}
.card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 58%;
  justify-content: flex-end;
  min-width: 0;
}

.card-details {
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.8;
}
.card-meta {
  color: var(--gray-text-light);
  font-size: 13px;
  margin-bottom: 15px;
}
.type-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-text {
  color: var(--gray-text);
  font-weight: 600;
  font-size: 14px;
}
.people-registered{
  color: var(--gray-text-light);
  font-size: 15px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #333;
}
.registered-volunteers {
  margin-top: 15px;
  padding: 15px;
  background-color: var(--gray-light);
  border-radius: 6px;
  border: 1px solid var(--gray-border);
  margin-bottom: 15px;
}

.registered-volunteers-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-dark);
  margin-bottom: 10px;
}

.volunteer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.volunteer-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--pure-white);
  border-radius: 4px;
  border: 1px solid var(--gray-border-light);
  font-size: 13px;
  color: var(--gray-text);
}

.volunteer-name {
  font-weight: 600;
  color: var(--navy-dark);
  margin-right: 8px;
}

.volunteer-email {
  color: var(--gray-text);
  font-style: italic;
  word-break: break-word;
  overflow-wrap: break-word;
}

.no-volunteers {
  color: var(--gray-text-light);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 10px;
}

/* Resident theme adjustments */
.resident-card .registered-volunteers {
  background-color: var(--resident-description-bg);
  border-color: var(--border-resident);
}

.resident-card .volunteer-item {
  background-color: var(--resident-tag-bg);
  border-color: var(--border-resident);
}
.dropdown-btn-container {
  margin-top: auto;
  height: 40px;
  display: flex;
  align-items: flex-end;
}
.dropdown-btn {
  width: 100%;
  padding: 8px;
  background-color: var(--pure-white);
  border: 2px solid var(--gray-border);
  border-radius: 6px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gray-text);
  transition: background-color 0.2s;
}
.dropdown-btn:hover {
  background-color: var(--gray-hover);
}
.dropdown-arrow {
  transition: transform 0.2s;
}
.dropdown-arrow.open {
  transform: rotate(180deg);
}

.card-expanded {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--gray-border-light);
}
.card-description {
  background-color: var(--pure-white);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.6;
}
.card-location {
  color: var(--gray-text);
  margin-bottom: 15px;
  font-size: 14px;
  margin-top: 7px;
}
.signup-container{
    display: flex;
    justify-content: center;
    text-align: center;
}
.signup-btn, .email-btn{
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 10px;
  background-color: var(--green-primary);
  color: var(--green-darker);
}
.contact-email {
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-text);
}

.contact-email strong {
  color: var(--navy-dark);
  font-weight: 700;
}

.email-link {
  color: var(--blue-primary);
  text-decoration: none;
  font-weight: 500;
}

.email-link:hover {
  text-decoration: underline;
}
.signup-btn:disabled {
  background-color: var(--gray-medium);
  color: var(--gray-text);
  cursor: not-allowed;
}

.people-registered-container{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.stop-accepting-btn{
      background-color: var(--resident-tag-bg);
      color: var(--resident-tag-text);
      border: 2px solid var(--border-resident);
      border-radius: 15px;
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 10px;
      justify-content: center;
      height: 30px;
      padding-right: 10px;
      padding-left: 10px;
      font-family: sans-serif;
}
.blue{
    border: none;
    border-radius: 6px;
}
.edit, .delete{
  background-color: var(--pure-white);
  color: var(--navy-dark);
}

.edit{
    margin-right: 10px;
    width: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.delete{
    margin-left: 10px;
    width: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.delete:hover, .edit:hover, .stop-accepting-btn:hover{
  background-color: var(--gray-hover);
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--gray-text-light);
  font-size: 16px;
  grid-column: 1 / -1;
}
.resident-empty {
  color: var(--resident-empty-text);
}

/* Resident card adjustments */
.resident-card {
  min-height: 200px;
}

.card-description-resident {
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  margin-top: 10px;
}

.card-tags-resident {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  margin-top: 10px;
  justify-content: flex-start; /* Align tags to the left */
  align-items: flex-start;
}

.card-tags-resident .card-tag {
  margin-left: 0; /* Remove any left margin from tags */
}

/* Filter Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--shadow-modal);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal.show {
  display: flex;
}
.modal-content {
  background: var(--pure-white);
  border-radius: 12px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.tags-section{
    display: flex;
    flex-direction: column;
    align-items: left;
}
.apply-filters-btn{
    margin-top: 20px !important;
}
.filter-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
.apply-filters-btn{
    height: 50px;
}
.clear-filters-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--gray-border);
  background-color: var(--pure-white);
  color: var(--gray-text);
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.clear-filters-btn:hover {
  background-color: var(--gray-hover);
  border-color: var(--gray-text);
}

.apply-filters-btn {
  flex: 1;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.modal-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-dark);
}
.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--gray-text-light);
  line-height: 1;
}

.filter-section {
  margin-bottom: 25px;
}
.filter-section-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy-dark);
  margin-bottom: 12px;
}
.datetime-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  pointer-events: auto;
}
.days-of-week {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.day-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.compensation-option {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--gray-border);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.compensation-option.selected {
  background-color: var(--green-primary);
  border-color: var(--green-primary);
  color: var(--green-darker);
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid var(--gray-border);
  background: var(--pure-white);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.apply-filters-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
}

/* Confirmation Page - popup overlay */
.confirmation-page {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
}
.confirmation-page.show {
  display: flex;
}
.confirmation-box {
  background: var(--pure-white);
  padding: 50px 60px;
  border-radius: 12px;
  box-shadow: 0 2px 10px
  var(--shadow-box);
  max-width: 700px;
  text-align: center;
}
.confirmation-box h2 {
  color: var(--navy-dark);
  margin-bottom: 20px;
  font-size: 22px;
}
.confirmation-box p {
  color: var(--gray-text);
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 15px; }
.contact-info {
  background: var(--gray-light);
  padding: 15px;
  border-radius: 6px;
  margin: 20px 0;
  color: var(--navy-dark);
  font-size: 15px;
}
.signup-btns{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}
.return-btn {
  padding: 12px 25px;
  border: none; border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
}
.confirm-signup-btn {
  background-color: var(--gray-light) !important;
  color: var(--black-text) !important;
  border: 2px solid var(--gray-border) !important;
}

.confirm-signup-btn:hover {
  background-color: var(--gray-light) !important;
}

/* New Post Form */
.form-container {
  max-width: 700px;
  margin: 40px auto;
  background: var(--pure-white);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow-medium);
}
.form-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--navy-dark);
  margin-bottom: 30px;
}

.form-group.title-description{
    margin-bottom: 0px !important;
}
.title-input{
    width: 96%
}
.form-group {
  margin-bottom: 25px;
}
.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  color: var(--navy-dark);
  font-size: 15px;
}

.form-input, .form-textarea, .form-select {
  padding: 12px;
  border: 2px solid var(--gray-border);
  border-radius: 6px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
}
.address-num-ppl{
    width: 96%;
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.char-count {
  text-align: right;
  color: var(--gray-text-light);
  font-size: 13px;
  margin-top: 5px;
}

.compensation-options {
  display: flex;
  gap: 15px;
}
.radio-option {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--gray-border);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.pay-rate-toggle .radio-option {
  font-size: 14px;
  padding: 10px 12px;
  background-color: none !important;
}

.amount-input {
  margin-top: 10px;
  display: none;
  width: 100%;
}
.amount-input.show {
  display: block;
}
.pay-rate-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
}
.pay-rate-toggle .radio-option {
  flex: 1;
  padding: 12px;
  font-size: inherit;
}
.pay-rate-hint {
  margin-top: 6px;
  color: var(--gray-text);
  font-size: 13px;
}
.amount-input input {
  width: 96.5%;
  padding: 10px;
  border: 2px solid var(--gray-border);
  border-radius: 6px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
}

.form-actions {
  display: flex; gap: 15px; margin-top: 30px;
}
.back-btn, .post-btn{
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
}
.back-btn {
  background: var(--gray-medium); color: var(--gray-text);
}

.back-btn:hover {
  background-color: var(--gray-hover);
}

.post-btn {
  background: var(--blue-primary); color: var(--pure-white);
}

.post-btn:hover {
  background-color: var(--blue-hov);
}

.hidden { display: none !important; }

/* RESIDENT THEME: slightly bluer box + darker dropdown background + bordered tags */
.resident-card {
  background-color: var(--resident-card-bg);
}
.resident-card .card-title,
.resident-card .card-details,
.resident-card .card-meta,
.resident-card .card-location {
  color: var(--black-resident);
}
.resident-card .card-description {
  background-color: var(--resident-description-bg);
  color: var(--black-resident-medium);
}
.resident-card .card-expanded {
  border-top-color: var(--border-resident-expanded);
}
.resident-card .card-tag,
.resident-card .card-tags .card-tag {
  background-color: var(--resident-tag-bg);
  color: var(--resident-tag-text);
  border: 2px solid var(--border-resident);
  border-radius: 15px;
}

/*delete modal stuff*/
.delete-modal-content {
  max-width: 380px;
  max-height: 200px;
}

.delete-modal-header {
  text-align: center;
  padding: 1px 25px 1px 25px;
}

.delete-modal-header .modal-title {
  margin: 0;
  text-align: center;
  width: 100%;
}

.delete-modal-body {
  padding: 1px 25px 15px 25px;
  text-align: center;
}

.delete-modal-body p {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.4;
}

.delete-warning {
  color: var(--error-red);
  font-weight: 600;
  font-size: 13px;
  margin-top: 10px;
}

#deletePostTitle {
  font-weight: 600;
  color: var(--black-text);
}

.delete-modal-actions {
  display: flex;
  gap: 12px;
  padding: 18px 25px 18px 25px;
  justify-content: center;
  border-top: 1px solid var(--gray-border);
}

.cancel-delete-btn,
.confirm-delete-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-delete-btn {
  background-color: var(--gray-medium);
  color: var(--black-text);
}

.cancel-delete-btn:hover {
  background-color: var(--gray-hover);
}

.confirm-delete-btn {
  background-color: var(--error-red);
  color: var(--pure-white);
}

.confirm-delete-btn:hover {
  background-color: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Toast Notification (variants) */
.toast {
  position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 6px;
  box-shadow: 0 2px 10px var(--shadow-toast); z-index: 1001; font-family: 'Lato', sans-serif; font-weight: 700;
  transform: translateX(150%); transition: transform 0.3s ease-in-out;
}
.toast.show {
  transform: translateX(0);
}
.toast.success {
  background-color: var(--green-primary); color: var(--green-darker);
}
.toast.error {
  background-color: var(--error-red); color: var(--pure-white);
}

/* Helpers */
.time-inputs-mt, .duration-mt {
  margin-top: 15px;
  width: 96%
}
.time-inputs-mt{
    width: 100%;
}
.tag-input-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-posts-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--navy-dark);
}

/* Responsive */
@media (max-width: 1200px) {
  .opportunities-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    padding: 0 20px 40px;
  }
}
@media (max-width: 768px) {
  .opportunities-grid {
    grid-template-columns: 1fr; padding: 0 15px 40px;
  }
  .opportunity-card {
    min-height: 220px;
  }
}
@media (max-width: 480px) {
  .opportunities-grid {
    padding: 0 10px 40px;
  }
  .opportunity-card {
    min-height: 200px;
    padding: 15px;
  }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
      gap: 15px;
    }
  .card-tag, .card-tags {
    margin-left: 0;
  }
}

.tag-input-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
}

/* General mobile/responsive tweaks */
@media (max-width: 900px) {
  .login-part{
    flex-direction: column;
    gap: 36px;
    padding: 0 20px 30px;
  }
  .vertical-line{
    display: none;
  }
  .logo-placeholder{
    width: 190px;
    height: 190px;
  }
  .corner-logo{
    width: clamp(28px, 7vw, 50px);
    height: clamp(28px, 7vw, 50px);
  }
  .header {
    padding: 14px 18px;
  }
  .header-content {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .logo-posts{
    gap: 10px;
    flex-shrink: 0;
  }
  .toggle-container {
    flex: 1 1 auto;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .toggle-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
  .filter-btn, .create-btn {
    width: auto;
    padding: 8px 12px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .login-page {
    padding: 20px 10px 40px;
  }
  .login-buttons {
    width: 100%;
  }
  .login-btn {
    width: 100%;
    justify-content: center;
  }
  .pending-box {
    padding: 30px 22px;
    width: 100%;
  }
  .opportunity-card {
    padding: 16px;
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card-title {
    flex: none;
  }
  .card-tags {
    justify-content: flex-start;
  }
  .people-registered-container{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .stop-accepting-btn{
    width: 100%;
  }
  .signup-container{
    flex-direction: column;
  }
  .form-container {
    padding: 28px 22px;
    margin: 24px 12px;
    width: auto;
  }
  .form-input, .form-textarea, .form-select, .address-num-ppl, .title-input {
    width: 100%;
  }
  .datetime-inputs {
    grid-template-columns: 1fr;
  }
  .compensation-options {
    flex-direction: column;
  }
  .pay-rate-toggle {
    width: 100%;
  }
  .confirmation-box {
    padding: 32px 22px;
    margin: 0 12px;
  }
  .signup-btns{
    flex-direction: column;
  }
  .modal-content {
    padding: 20px;
    width: calc(100% - 40px);
    max-width: 520px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 14px 12px;
  }
  .header-content {
    gap: 10px;
  }
  .toggle-container {
    gap: 8px;
  }
  .filter-btn, .create-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  .about-link {
    right: 12px;
    bottom: 14px;
  }
}

@media (max-width: 420px) {
  .corner-logo{
    width: clamp(24px, 9vw, 40px);
    height: clamp(24px, 9vw, 40px);
  }
  .toggle-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  .logo-posts{
    gap: 8px;
  }
  .header {
    padding: 12px 10px;
  }
}

.about-link {
  text-decoration: none !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--blue-primary);
  border-radius: 15px;
  width: 150px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2 2px 20px var(--shadow-blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  z-index: 10;
  text-align: center;
  color: var(--pure-white);
  font-size: 15px;
  font-weight: 700;
}

.about-link:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--blue-hov);
  box-shadow: 0 6px 24px var(--shadow-blue);
}

/* About page */
.about-page {
  background: radial-gradient(circle at 12% 20%, rgba(127, 171, 110, 0.12), rgba(127, 171, 110, 0) 35%), radial-gradient(circle at 88% 10%, rgba(0, 93, 170, 0.12), rgba(0, 93, 170, 0) 30%), var(--pure-white);
  color: var(--black-text);
  min-height: 100vh;
  font-family: 'Lato', sans-serif;
}
.about-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 26px;
}
.about-topbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-border-light);
  position: sticky;
  top: 0;
  z-index: 15;
}
.about-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.about-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-logo {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 8px 20px var(--shadow-medium);
  border: 1px solid var(--gray-border);
}
.about-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-brand-kicker {
  font-size: 12px;
  color: var(--gray-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about-brand-name {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy-dark);
}
.about-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.about-nav-link {
  color: var(--gray-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.about-nav-link:hover {
  color: var(--navy-dark);
}
.about-primary-btn,
.about-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.about-primary-btn {
  background: var(--blue-primary);
  font-family: 'Lato', sans-serif;
  color: var(--pure-white);
  box-shadow: 0 10px 24px var(--shadow-hover);
}
.about-primary-btn:hover {
  transform: translateY(-2px);
  font-family: 'Lato', sans-serif;
  background: var(--blue-hov);
}
.about-primary-btn.small {
  padding: 10px 16px;
}
.about-ghost-btn {
  border: 2px solid var(--gray-border);
  color: var(--navy-dark);
  background: var(--pure-white);
}
.about-ghost-btn:hover {
  color: var(--blue-primary);
  border-color: var(--blue-primary);
  transform: translateY(-2px);
}
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 70px;
}
.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.3;
}
.about-hero::before {
  background: var(--blue-primary);
  top: -120px;
  left: -160px;
}
.about-hero::after {
  background: var(--green-primary);
  bottom: -140px;
  right: -120px;
}
.about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr);
  gap: 48px;
  align-items: flex-start;
}
.about-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0, 93, 170, 0.12);
  color: var(--navy-dark);
  font-family: 'Lato', sans-serif;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  width: fit-content;
}
.about-hero-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.15;
  color: var(--navy-dark);
  margin: 12px 0 10px;
}
.about-hero-lede {
  color: var(--gray-text);
  font-size: 19px;
  line-height: 1.8;
  margin: 0 0 18px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-metrics {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.metric-card {
  background: var(--pure-white);
  font-family: 'Lato', sans-serif;
  border: 1px solid var(--gray-border-light);
  box-shadow: 0 10px 30px var(--shadow-light);
  padding: 14px 16px;
  border-radius: 12px;
  min-width: 160px;
  max-width: 200px;
}
.metric-number {
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  color: var(--blue-primary);
  font-weight: 700;
}
.metric-label {
  color: var(--gray-text);
  font-size: 13px;
  margin-top: 4px;
}
.about-hero-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visual-card {
  background: var(--pure-white);
  border: 1px solid var(--gray-border-light);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow-medium);
}
.visual-title {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: var(--navy-dark);
  margin: 0 0 10px;
}
.visual-list {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-text);
  line-height: 1.7;
}
.visual-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.stack-card {
  background: linear-gradient(135deg, rgba(0, 93, 170, 0.1), rgba(127, 171, 110, 0.12));
  border: 1px solid var(--gray-border-light);
  font-family: 'Lato', sans-serif;
  border-radius: 12px;
  padding: 14px;
  font-weight: 700;
  color: var(--navy-dark);
  box-shadow: 0 8px 18px var(--shadow-light);
}
.stack-card.alt {
  background: linear-gradient(135deg, rgba(127, 171, 110, 0.18), rgba(0, 93, 170, 0.08));
}
.about-section {
  padding: 70px 0;
}
.about-section-header {
  text-align: center;
  font-family: 'Lato', sans-serif;
  max-width: 760px;
  margin: 0 auto 40px;
}
.about-section-header h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--navy-dark);
  margin: 0 0 10px;
}
.about-section-header p {
  color: var(--gray-text);
  line-height: 1.7;
  margin: 0;
}
.about-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.about-card {
  background: var(--pure-white);
  border: 1px solid var(--gray-border-light);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 12px 30px var(--shadow-light);
}
.about-card h3 {
  font-size: 18px;
  color: var(--navy-dark);
  margin: 0 0 8px;
}
.about-card p {
  color: var(--gray-text);
  margin: 0;
  line-height: 1.6;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.member-link {
  color: var(--blue-primary);
  text-decoration: none;
}
.member-card {
  background: var(--pure-white);
  border: 1px solid var(--gray-border-light);
  border-radius: 14px;
  padding: 18px;
  font-family: 'Lato', sans-serif;
  box-shadow: 0 14px 30px var(--shadow-light);
  position: relative;
  overflow: hidden;
}
.member-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 93, 170, 0.12), rgba(0, 93, 170, 0));
  opacity: 0.6;
  inset: auto -30px -40px auto;
  transform: rotate(8deg);
}
.member-avatar {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--blue-primary), var(--green-primary));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--pure-white);
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 8px 24px var(--shadow-medium);
  margin-bottom: 12px;
}
.member-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 3px solid var(--blue-primary);
}
.avatar-caption {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.9;
}
.member-name {
  font-size: 17px;
  color: var(--navy-dark);
  margin: 0 0 4px;
  font-weight: 700;
}
.member-role {
  font-size: 13px;
  color: var(--gray-text);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.member-note {
  margin: 0;
  color: var(--gray-text);
  line-height: 1.5;
}
.design-section {
  background: linear-gradient(135deg, rgba(0, 93, 170, 0.06), rgba(127, 171, 110, 0.08));
  border: 1px solid var(--gray-border-light);
  border-radius: 18px;
  padding: 40px 28px 36px;
  box-shadow: 0 16px 36px var(--shadow-light);
  margin-bottom: 30px;
}
.design-header {
  max-width: 720px;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.design-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-primary);
  font-weight: 800;
  font-size: 13px;
}
.design-header h2 {
  margin: 0;
  font-size: 30px;
  color: var(--navy-dark);
}
.design-header p {
  margin: 0;
  color: var(--gray-text);
  line-height: 1.7;
  font-size: 16px;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.design-card {
  background: var(--pure-white);
  border: 1px solid var(--gray-border-light);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 12px 28px var(--shadow-light);
}
.design-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--navy-dark);
}
.design-list {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-text);
  line-height: 1.8;
  display: grid;
  gap: 10px;
}
.design-list.two-column {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.about-cta-panel {
  margin: 50px 0 20px;
  padding: 26px 24px;
  background: linear-gradient(135deg, rgba(0, 93, 170, 0.13), rgba(127, 171, 110, 0.18));
  border-radius: 16px;
  border: 1px solid var(--gray-border);
  box-shadow: 0 16px 40px var(--shadow-hover);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.about-cta-title {
  font-size: 22px;
  color: var(--navy-dark);
  margin: 0;
}
.about-cta-text {
  color: var(--gray-text);
  margin: 6px 0 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .about-hero-title {
    font-size: 36px;
  }
  .about-link-card {
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .about-link-card {
    flex-direction: column;
    text-align: left;
  }
  .about-topbar {
    position: static;
  }
  .about-hero {
    padding: 60px 0 30px;
  }
  .about-hero-title {
    font-size: 30px;
  }
  .about-primary-btn,
  .about-ghost-btn {
    width: 100%;
    justify-content: center;
  }
  .hero-actions {
    width: 100%;
  }
}