/* Loan Officer Landing Page - Dark Theme */



.lo-landing-page {

  background: #0a0e1a;

  color: #e0e0e0;

  min-height: 100vh;

}



.lo-landing-wrapper {

  min-height: 100vh;

}



/* Back Link */

.back-link-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 20px 20px 0;

}



.back-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #8b92a7;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition: all 0.3s;

}



.back-link:hover {

  color: #d4af37;

}



/* Hero Section */

.lo-hero-section {

  background-size: cover;

  background-position: center;

  background-color: #1a1f2e;

  position: relative;

  padding: 60px 20px;

  margin-bottom: 40px;

  border-radius: 0 0 24px 24px;

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(10, 14, 26, 0.7) 0%, rgba(10, 14, 26, 0.95) 100%);

  border-radius: 0 0 24px 24px;

}



.hero-content {

  max-width: 1400px;

  margin: 0 auto;

  position: relative;

  z-index: 10;

}



.hero-profile {

  display: flex;

  align-items: center;

  gap: 32px;

}



.hero-photo-wrapper {

  position: relative;

  width: 160px;

  height: 160px;

  flex-shrink: 0;

}



.hero-photo {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  border: 6px solid rgba(212, 175, 55, 0.3);

  box-shadow: 0 8px 32px rgba(0,0,0,0.4);

}



.hero-photo-placeholder {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 56px;

  font-weight: 700;

  color: #0a0e1a;

  border: 6px solid rgba(212, 175, 55, 0.3);

  box-shadow: 0 8px 32px rgba(0,0,0,0.4);

}



.verified-badge-hero {

  position: absolute;

  bottom: 8px;

  right: 8px;

  width: 44px;

  height: 44px;

  background: #28a745;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 22px;

  border: 4px solid #0a0e1a;

  box-shadow: 0 2px 12px rgba(0,0,0,0.3);

}



.hero-info h1 {

  font-size: 42px;

  color: white;

  margin: 0 0 16px;

  font-weight: 700;

}



.hero-badges {

  display: flex;

  gap: 12px;

  margin-bottom: 16px;

  flex-wrap: wrap;

}



.badge-pro,

.badge-verified,

.badge-certified {

  padding: 6px 16px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.badge-certified {

  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);

  color: #0a0e1a;

  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);

  animation: pulse-gold 2s ease-in-out infinite;

}



@keyframes pulse-gold {

  0%, 100% {

    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);

  }

  50% {

    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6);

  }

}



.badge-pro {

  background: #d4af37;

  color: #0a0e1a;

}



.badge-verified {

  background: rgba(212, 175, 55, 0.15);

  color: #d4af37;

  border: 1px solid rgba(212, 175, 55, 0.3);

}



.hero-meta {

  display: flex;

  gap: 24px;

  flex-wrap: wrap;

}



.meta-item {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #e0e0e0;

  font-size: 15px;

}



.meta-item i {

  color: #d4af37;

  font-size: 16px;

}



/* Main Content */

.lo-main-content {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 20px 60px;

}



.content-grid {

  display: grid;

  grid-template-columns: 1fr 400px;

  gap: 32px;

}



/* Left Column */

.left-column {

  min-width: 0;
  display: flex;
  flex-direction: column;

}

.left-column .stats-row-inline {
  order: 1;
}

.left-column .listings-section {
  order: 2;
}

.left-column .disclaimer-section {
  order: 3;
}

/* Mobile ordering - disclaimer last */
@media (max-width: 1024px) {
  .left-column .disclaimer-section {
    order: 4; /* Move after right column content on mobile */
  }
}



/* Stats Row Inline - All in one line */

.stats-row-inline {

  display: flex;

  align-items: center;

  gap: 20px;

  background: #1a1f2e;

  border: 1px solid #2a3142;

  border-radius: 16px;

  padding: 24px;

  margin-bottom: 32px;

  flex-wrap: wrap;

}



.stat-card-inline {

  display: flex;

  align-items: center;

  gap: 16px;

  flex: 1;

  min-width: 200px;

}



.stat-icon-inline {

  width: 48px;

  height: 48px;

  background: rgba(212, 175, 55, 0.1);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #d4af37;

  font-size: 22px;

  flex-shrink: 0;

}



.stat-info-inline {

  flex: 1;

}



.stat-label-inline {

  font-size: 10px;

  color: #8b92a7;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 4px;

}



.stat-value-inline {

  font-size: 24px;

  font-weight: 700;

  color: white;

  line-height: 1;

}



.fsbo-logo-inline {

  flex-shrink: 0;

  padding-left: 20px;

  border-left: 1px solid #2a3142;

}



.fsbo-logo-img {

  max-width: 150px;

  height: auto;

  opacity: 0.9;

}



/* Listings Section */

.listings-section {

  background: #1a1f2e;

  border: 1px solid #2a3142;

  border-radius: 16px;

  padding: 32px;

  margin-bottom: 24px;

}



.listings-section h2 {

  font-size: 20px;

  color: white;

  margin: 0 0 24px;

  font-weight: 600;

}



.no-listings {

  text-align: center;

  padding: 60px 20px;

  color: #8b92a7;

}



.no-listings i {

  font-size: 48px;

  margin-bottom: 16px;

  opacity: 0.3;

}



.no-listings p {

  font-size: 15px;

  margin: 0;

}



.listings-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 20px;

}



.listing-card {

  background: #0f1419;

  border: 1px solid #2a3142;

  border-radius: 12px;

  overflow: hidden;

  text-decoration: none;

  transition: all 0.3s;

  display: block;

}



.listing-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(0,0,0,0.4);

  border-color: #d4af37;

}



.listing-photo {

  position: relative;

  height: 200px;

  background: #2a3142;

  overflow: hidden;

}



.listing-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s;

}



.listing-card:hover .listing-photo img {

  transform: scale(1.05);

}



.listing-photo-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 48px;

  color: #5a6070;

}



.photo-count {

  position: absolute;

  bottom: 10px;

  right: 10px;

  background: rgba(0,0,0,0.75);

  color: white;

  padding: 4px 10px;

  border-radius: 12px;

  font-size: 11px;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 4px;

}



.listing-status-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  padding: 4px 12px;

  border-radius: 12px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

}



.status-active {

  background: #28a745;

  color: white;

}



.status-pending {

  background: #ffc107;

  color: #0a0e1a;

}



.listing-info {

  padding: 16px;

}



.listing-price {

  font-size: 22px;

  font-weight: 700;

  color: #d4af37;

  margin-bottom: 8px;

}



.listing-address {

  font-size: 15px;

  font-weight: 600;

  color: white;

  margin-bottom: 4px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.listing-location {

  font-size: 13px;

  color: #8b92a7;

  margin-bottom: 12px;

  display: flex;

  align-items: center;

  gap: 6px;

}



.listing-specs {

  display: flex;

  gap: 16px;

  font-size: 13px;

  color: #8b92a7;

}



.spec-item {

  display: flex;

  align-items: center;

  gap: 6px;

}



.spec-item i {

  color: #d4af37;

  font-size: 14px;

  width: 16px;

  text-align: center;

}



.spec-value {

  font-weight: 700;

  color: white;

  font-size: 14px;

}



.spec-label {

  color: #8b92a7;

  font-size: 12px;

}



/* Disclaimer */

.disclaimer-section {

  background: #1a1f2e;

  border: 1px solid #2a3142;

  border-radius: 12px;

  padding: 20px;

}



.disclaimer-section p {

  font-size: 11px;

  color: #8b92a7;

  line-height: 1.6;

  margin: 0;

}



/* Right Column - Contact Card */

.right-column {

  position: relative;

}



.contact-card {

  background: #1a1f2e;

  border: 1px solid #2a3142;

  border-radius: 16px;

  padding: 28px;

}



.contact-card.sticky {

  position: sticky;

  top: 20px;

}



.contact-card h3 {

  font-size: 22px;

  color: white;

  margin: 0 0 8px;

  font-weight: 700;

}



.contact-subtitle {

  font-size: 14px;

  color: #8b92a7;

  margin: 0 0 24px;

  line-height: 1.5;

}



.btn-contact-primary {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  padding: 16px 24px;

  background: #0a3c72;

  color: white;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  transition: all 0.3s;

  margin-bottom: 12px;

}



.btn-contact-primary:hover {

  background: #083056;

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(10, 60, 114, 0.4);

  color: white;

}



.btn-contact-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-contact-phone:hover {
  background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Connect as Loan Officer Button for Guests (redirects to login) */
.btn-connect-lo-guest {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fd7e14 0%, #dc6502 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(253, 126, 20, 0.3);
  text-decoration: none;
}

.btn-connect-lo-guest:hover {
  background: linear-gradient(135deg, #dc6502 0%, #c55902 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
  text-decoration: none;
}



.contact-bio {

  padding-top: 24px;

  border-top: 1px solid #2a3142;

  margin-bottom: 24px;

}



.contact-bio h4 {

  font-size: 14px;

  color: white;

  margin: 0 0 12px;

  font-weight: 600;

}



.contact-bio p {

  font-size: 14px;

  color: #8b92a7;

  line-height: 1.7;

  margin: 0;

}



.licensed-in {

  padding-top: 24px;

  border-top: 1px solid #2a3142;

  margin-bottom: 24px;

}



.licensed-in h4 {

  font-size: 12px;

  color: #8b92a7;

  margin: 0 0 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.state-badges {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.state-badge {

  padding: 6px 14px;

  background: rgba(212, 175, 55, 0.1);

  color: #d4af37;

  border: 1px solid rgba(212, 175, 55, 0.3);

  border-radius: 8px;

  font-size: 13px;

  font-weight: 700;

}



.contact-social {

  display: flex;

  gap: 10px;

  justify-content: center;

  padding-top: 24px;

  border-top: 1px solid #2a3142;

}



.social-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 16px;

  text-decoration: none;

  transition: all 0.3s;

}



.social-icon:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}



.social-icon.facebook {

  background: #1877f2;

}



.social-icon.instagram {

  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

}



.social-icon.twitter {

  background: #000000;

}



.social-icon.linkedin {

  background: #0077b5;

}



.social-icon.tiktok {

  background: #000000;

}



/* Responsive */

@media (max-width: 1024px) {

  .content-grid {

    display: flex;
    flex-direction: column;

  }
  
  .left-column {
    display: flex;
    flex-direction: column;
  }
  
  .left-column .stats-row-inline {
    order: 1;
  }
  
  .left-column .listings-section {
    order: 2;
  }
  
  .right-column {
    order: 3; /* Contact card appears third */
  }
  
  .left-column .disclaimer-section {
    order: 4; /* Disclaimer appears last */
  }

  

  .contact-card.sticky {

    position: relative;

    top: 0;

  }

  

  .stats-row {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .hero-profile {

    flex-direction: column;

    text-align: center;

  }

  

  .hero-info h1 {

    font-size: 32px;

  }

  

  .hero-badges,

  .hero-meta {

    justify-content: center;

  }

  

  .listings-grid {

    grid-template-columns: 1fr;

  }

  

  .stats-row-inline {

    flex-direction: column;

    gap: 16px;

  }

  

  .stat-card-inline {

    width: 100%;

    min-width: 0;

  }

  

  .fsbo-logo-inline {

    width: 100%;

    padding-left: 0;

    padding-top: 16px;

    border-left: none;

    border-top: 1px solid #2a3142;

    text-align: center;

  }

}