/* --- Auth page: force white border and text for secondary buttons --- */
.auth-body .btn-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.auth-body .btn-secondary:hover,
.auth-body .btn-secondary:focus,
.auth-body .btn-secondary:active {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 2px solid var(--gold) !important;
}
/* --- Force white border and text for for-firms secondary buttons, gold on hover --- */
.for-firms-main .btn-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.for-firms-main .btn-secondary:hover,
.for-firms-main .btn-secondary:focus,
.for-firms-main .btn-secondary:active {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 2px solid var(--gold) !important;
}
/* --- Force orange button for for-firms primary buttons --- */
.for-firms-main .btn-primary,
.for-firms-main .btn-primary:hover,
.for-firms-main .btn-primary:focus,
.for-firms-main .btn-primary:active {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
}
/* ============================================
   BLYDE - Home Page Styles
   ============================================ */

/* ---- Hero ---- */
.hero-section {
  background: var(--cream);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 18px 0 20px;
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 440px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero-input-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 20px 16px;
  box-shadow: var(--shadow-lg);
}

.hero-input-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.hero-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  resize: none;
  height: 90px;
  background: transparent;
  line-height: 1.6;
}

.hero-textarea::placeholder { color: var(--muted); }

.hero-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 10px;
  gap: 12px;
}

.hero-input-footer small {
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Steps Grid ---- */
.steps-grid .step-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}

.step-num {
  width: 34px; height: 34px;
  background: var(--ink);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-card p {
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.trust-dot { opacity: 0.35; }

/* ---- Category Grid ---- */
.cats-home-grid .cat-home-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--ease);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cat-home-card:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-pale);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.cat-home-icon { font-size: 1.6rem; }

/* ---- Firm Preview ---- */
.firm-preview-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  cursor: pointer;
}

.fpc-logo {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.fpc-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.fpc-addr {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.fpc-price {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}

.fpc-price strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

/* ---- Dark section perks ---- */
.perks-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.perk-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.8);
}

/* ============================================
   BLYDE - Firms Page Styles
   ============================================ */

/* ---- Firms Hero ---- */
.firms-hero {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-2xl) var(--space-xl) 80px;
  text-align: center;
}

.firms-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.firms-hero-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  margin: 12px 0 14px;
  letter-spacing: -0.5px;
}

.firms-hero-sub {
  opacity: 0.68;
  max-width: 480px;
  margin: 0 auto 36px;
  font-size: 1.02rem;
  line-height: 1.65;
}

.firms-perks {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.firms-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  opacity: 0.88;
}

.firms-perk-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* ---- Registration Wrap ---- */
.reg-wrap {
  max-width: 680px;
  margin: -40px auto 60px;
  padding: 0 var(--space-xl);
  position: relative;
  z-index: 2;
}

.reg-step-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.reg-step-icon {
  width: 44px; height: 44px;
  background: var(--gold-pale);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.reg-step-label strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

.reg-step-label span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- Practice Areas ---- */
.practice-areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.pa-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.87rem;
  transition: all var(--ease);
  background: var(--white);
  user-select: none;
}

.pa-item:hover { border-color: var(--border-dark); }

.pa-item.selected {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--gold);
  font-weight: 500;
}

.pa-item input[type="checkbox"] {
  pointer-events: none;
  accent-color: var(--gold);
  flex-shrink: 0;
}

/* ---- Booking Wrap ---- */
.booking-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px var(--space-xl);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-inner { gap: 36px; }
  .hero-title { font-size: 3rem; }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 var(--space-md);
  }
  .hero-right { display: none; }
  .hero-title { font-size: 2.6rem; }
  .firms-perks { gap: 28px; }
  .practice-areas-grid { grid-template-columns: 1fr; }
  .reg-wrap { padding: 0 var(--space-md); }
  .booking-wrap { padding: 32px var(--space-md); }
  .firms-hero { padding: var(--space-xl) var(--space-md) 80px; }
  .firms-hero-title { font-size: 2rem; }
}

/* Public firms directory */
.firms-grid-home{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.directory-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.directory-result-copy{
  color:var(--ink-soft);
  font-size:0.98rem;
}
.directory-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.directory-stat-pill{
  min-width:180px;
  padding:18px 22px;
  border-radius:22px;
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.directory-stat-pill strong{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:1;
}
.directory-stat-pill span{
  color:var(--ink-soft);
}
.directory-filters{
  margin-bottom:18px;
}
.directory-filter-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;
  gap:14px;
  align-items:end;
}
.directory-label{
  display:block;
  font-size:0.82rem;
  font-weight:700;
  margin-bottom:7px;
}
.directory-input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--white);
}
.directory-filter-actions{
  display:flex;
  align-items:flex-end;
  min-height:50px;
}
.firms-directory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.directory-card{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.directory-card:hover,
.directory-card-focused{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.directory-card-top{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.directory-card-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--gold-pale);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:1.45rem;
  color:var(--gold-700);
}
.directory-card-name{
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.2;
}
.directory-card-meta,
.directory-card-stats{
  color:var(--ink-soft);
  font-size:0.9rem;
}
.directory-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:12px;
}
.directory-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.directory-card-summary{
  color:var(--ink-soft);
  margin:0 0 16px;
  line-height:1.55;
}
.directory-card-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.directory-price-label{
  color:var(--muted);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.directory-price-value{
  font-family:var(--font-display);
  font-size:1.5rem;
}
.directory-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 1280px){
  .firms-grid-home{grid-template-columns:repeat(3,minmax(0,1fr));}
  .firms-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .directory-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 820px){
  .firms-grid-home,
  .firms-directory-grid,
  .directory-filter-grid{grid-template-columns:1fr;}
  .directory-card-bottom{align-items:flex-start;flex-direction:column;}
}