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

body{
    font-family:Arial,sans-serif;
    background:#f5f5f5;
    color:#222;
}

/* Responsive Mobile Navigation/Toggle Header Styles */

.nav-toggle {
  display: none;
}

.nav-button {
  display: none;
}

@media (max-width: 850px) {
  .nav-button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: 6px;
    margin-right: 10px;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
    padding: 10px 0 10px 10px;
  }
  .nav-button span {
    display: block;
    width: 28px;
    height: 3px;
    background: #071b34;
    border-radius: 99px;
    transition: transform 0.18s;
  }
  /* Animate burger to X when active */
  .nav-toggle:checked + .nav-button span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle:checked + .nav-button span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked + .nav-button span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Hide .main-nav by default, show on toggle */
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    background: #fff;
    padding: 20px 4%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 20px 30px rgba(7,27,52,0.10);
    gap: 18px;
    z-index: 25;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
  }
  .nav-toggle:checked ~ .main-nav {
    display: flex;
    animation: slideDownNav 0.18s ease;
  }
  @keyframes slideDownNav {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Shift search below nav in mobile */
  .header-search {
    order: 5;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .nav-button {
    padding: 8px 0 8px 6px;
  }
  .main-nav {
    padding: 16px 4%;
  }
}

/* End Mobile Navigation Header Styles */
/* Hero Section Conversion Start */
.hero {
    position:relative;
    background:url('../img/hero-manchester.png') center/cover no-repeat, #071b34;
    display:flex;
    align-items:center;
    min-height:500px;
    color:#fff;
    margin-bottom:0;
}
.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.46),rgba(0,0,0,.12));
    z-index:1;
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:760px;
    padding:90px 0;
    margin-left:auto;
    margin-right:auto;
}
.eyebrow {
    display:inline-flex;
    font-size:13px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#111;
    background:#ffb703;
    padding:8px 13px;
    border-radius:999px;
    margin-bottom:12px;
}
.hero-content h1 {
    font-size:clamp(40px,7vw,76px);
    line-height:.98;
    margin:22px 0 18px;
    color:#fff;
    font-weight:bold;
}
.hero-content p {
    font-size:19px;
    max-width:680px;
    color:#eef5ff;
    margin-bottom:0;
}
.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    padding:15px 24px;
    font-weight:800;
    border:1px solid transparent;
    cursor:pointer;
    font-size:17px;
    transition:background .18s,color .16s,border .16s;
    text-decoration: none;
}
.btn-primary {
    background:#ffb703;
    color:#111;
}
.btn-primary:hover {
    background:#ffd880;
    color:#111;
}
.btn-light {
    background:rgba(255,255,255,.12);
    color:#fff;
    border-color:rgba(255,255,255,.35);
}
.btn-light:hover {
    background:rgba(255,255,255,.23);
    color:#fff;
    border-color:rgba(255,255,255,.40);
}
@media (max-width: 850px) {
    .hero {
        min-height:440px;
    }
    .hero-content {
        padding:70px 0;
    }
}
@media (max-width: 560px) {
    .hero-content {
        padding:48px 0;
    }
    .hero-overlay {
        background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.55));
    }
    .hero-actions,.btn {
        width:100%;
        flex-direction:column;
    }
    .btn {
        width:100%;
        margin-bottom:8px;
        justify-content:stretch;
    }
    .hero-actions {
        gap:10px;
    }
}
/* Hero Section Conversion End */
/* Small Hero for Add Business Page */
.small-hero {
  position: relative;
  background: linear-gradient(135deg, #071b34, #0f3765);
  color: #fff;
  padding: 80px 0 58px 0;
}
.small-hero .eyebrow {
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  background: #ffb703;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.small-hero h1 {
  font-size: clamp(34px, 6vw, 48px);
  margin: 18px 0 11px 0;
  font-weight: 800;
  color: #fff;
}
.small-hero p {
  font-size: 19px;
  max-width: 680px;
  color: #eef5ff;
  margin-bottom: 0;
}
.price-pill {
  display: inline-flex;
  margin-top: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  align-items: center;
  gap: 6px;
}
.price-pill strong {
  margin-left: 7px;
  color: #fff;
  font-weight: 800;
}
@media (max-width: 850px) {
  .small-hero {
    padding: 54px 0 38px 0;
  }
}
@media (max-width: 560px) {
  .small-hero {
    padding: 38px 0 20px 0;
  }
  .small-hero h1 {
    font-size: 27px;
    margin: 14px 0 9px 0;
  }
  .price-pill {
    font-size: 16px;
    padding: 9px 10px;
  }
}

/* Add Business - Notice Card & Form Card *//* Hide legacy box classes for add-business after redesign */
/* --- Business Details Multi-section Form Grouping (Visual Enhancement) --- */
.form-card section + section {
  margin-top: 22px;
  border-top: 1px solid #e4eaf2;
  padding-top: 20px;
}
.form-card h3.section-label {
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #071b34;
  font-weight: 800;
  margin: 0 0 8px 0;
  background: none !important;
  padding: 0;
}
.form-card .form-group-row label {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="url"],
.form-card input[type="password"],
.form-card input[type="file"],
.form-card textarea,
.form-card select {
  margin-top: 0px;
  margin-bottom: 0px;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  background: #fff;
  padding: 14px 15px;
  font-size: 16px;
  color: #13233a;

  width: 100%;
  flex-basis: 100%;
}
.form-card textarea {
  resize: vertical;
}
.form-card label small,
.form-card .form-group-row small {
  font-size: 14px;
  color: #657287;
  font-weight: 400;
  margin-top: 3px;
  display: block;
  line-height: 1.45;
}
.form-card input[type="file"] {
  border: 1px dashed #c6d2e4;
  padding: 10px 7px;
  background: #f8fafc;
  font-size: 15px;
}
.form-card button.btn-primary {
  margin-top: 12px;
  min-width: 160px;
  font-size: 17px;
  font-weight: 800;
  padding: 15px 24px;
}
.notice-card.alert-error {
  background: #fff6f7;
  border-color: #ffdad8;
  color: #a4302e;
  font-size: 17px;
  font-weight: 600;
  padding: 22px 30px;
  border-radius: 18px;
}
@media (max-width: 560px) {
  .form-card section + section {
    margin-top: 15px;
    padding-top: 13px;
  }
  .form-card h3.section-label {
    font-size: 12px;
    margin-bottom: 7px;
  }
}
.category-grid, .category-box, .new-category-box { display: none !important; }

.notice-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 30px;
  margin-bottom: 28px;
  text-align: left;
}
.notice-card h2 {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: #13233a;
}
.notice-card p {
  color: #657287;
  font-size: 16px;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .notice-card {
    padding: 20px;
    margin-bottom: 18px;
  }
}

.form-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 32px;
  margin-top: 42px;
  margin-bottom: 0;
  text-align: left;
  display: block;
}
@media (max-width: 560px) {
  .form-card {
    padding: 18px;
    margin-top: 26px;
  }
}
.inline-form {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.inline-form input[type="text"] {
  flex: 1 1 auto;
  border-radius: 12px;
  font-size: 16px;
  padding: 14px 12px;
}
.inline-form button.btn.btn-primary {
  margin: 0;
  min-width: 120px;
  border-radius: 12px;
  font-size: 16px;
  padding: 13px 22px;
  font-weight: 800;
}
@media (max-width: 560px) {
  .inline-form {
    flex-direction: column;
    gap: 10px;
    margin-top: 11px;
  }
  .inline-form button {
    width: 100%;
  }
}


/* Listings Section and Listing Card - New Design Style */

/* Category Section and Category Grid (matches new_design) */
.category-section {
  padding: 72px 0;
  background: transparent;
  margin: 0;
}

/* Split layout for Add Business page, matching new_design structure */
.category-section > .container.split-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.category-section > .container.split-layout > main {
  min-width: 0;
}
.category-section > .container.split-layout > .sidebar {
  width: 340px;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1100px) {
  .category-section > .container.split-layout {
    grid-template-columns: 1fr 280px;
    gap: 22px;
  }
  .category-section > .container.split-layout > .sidebar {
    width: 100%;
  }
}
@media (max-width: 850px) {
  .category-section > .container.split-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .category-section > .container.split-layout > .sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 36px;
  }
}
@media (max-width: 560px) {
  .category-section > .container.split-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .category-section > .container.split-layout > .sidebar {
    margin-top: 25px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .category-section {
    padding: 50px 0;
  }
}
.category-section > .container {
  width: min(1180px,92%);
  max-width: 100%;
  margin: auto;
}
.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px auto;
}
.section-heading .section-label {
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  background: #ffb703;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-heading h2 {
  font-size: clamp(28px,4vw,44px);
  line-height: 1.1;
  margin: 17px 0 8px 0;
  color: #13233a;
  font-weight: 800;
}
@media (max-width: 560px) {
  .section-heading {
    margin-bottom: 28px;
  }
}
.category-stack {
  display: grid;
  gap: 20px;
}

.category-block {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 26px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-width: 0;
}
/* image/icon styling for business cards in category-stack mode */
.category-block .icon-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2f7;
  display: block;
  box-shadow: none;
  padding: 6px;
  margin: 0 auto 16px auto;
  border: none;
}
.category-block .icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  overflow: hidden;
}
@media (min-width: 601px) {
  .category-stack {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media (max-width: 1100px) {
  .category-stack {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 850px) {
  .category-stack {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .category-block {
    padding: 24px;
  }
  .category-stack {
    gap: 12px;
  }
}
.category-block:hover {
  box-shadow: 0 18px 44px rgba(7,27,52,.11);
  transform: translateY(-2px);
}
.category-block h3 {
  font-size: 20px;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 16px 0;
  line-height: 1.1;
}
.category-block h3 a {
  color: #13233a;
  text-decoration: none;
  transition: color 0.13s;
  font-weight: 800;
}
.category-block h3 a:hover {
}
/* Area-select specific overrides for select-area.php redesign */
.category-section main .form-card label[for="area_id"] {
  font-weight: 700;
  margin-bottom: 9px;
}
.category-section main .form-card select#area_id {
  font-size: 16px;
  margin-bottom: 0;
}
.category-section .form-card button.btn {
  min-width: 120px;
  font-size: 16px;
  font-weight: 800;
}
.category-section .category-stack {
  margin-bottom: 0;
}
.category-section .category-stack .category-block {
  padding-top: 22px;
  padding-bottom: 18px;
}
.category-block .mini-link-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 560px) {
  .category-section main .form-card,
  .category-section .category-stack .category-block {
    padding-left: 8px;
    padding-right: 8px;
  }
  .category-section .category-stack {
    gap: 10px;
  }
  .category-section {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}

  color: #005bbb;
  text-decoration: underline;
}
.mini-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .mini-link-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 850px) {
  .mini-link-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .mini-link-grid {
    grid-template-columns: 1fr;
  }
}
.mini-link-grid a {
  display: block;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #005bbb;
  text-align: center;
  transition: background 0.13s, color 0.13s;
  line-height: 1.2;
  box-shadow: none;
  height: 40px;
  text-decoration: none;
  margin: 8px 0 0 0;
}
.mini-link-grid a:hover {
  background: #eaf3ff;
  color: #13233a;
  /*text-decoration: underline;*/
}
.no-subcategories {
  color: #657287;
  font-size: 15px;
  margin: 0;
  text-align: center;
  padding: 6px 0 0 0;
}

/* Improved section heading for categories *//* Sidebar as side-card modern card style */

/* === Dashboard Section & Grid === */
.dashboard-section {
  padding: 72px 0;
  background: #f5f8fc;
}
@media (max-width: 560px) {
  .dashboard-section {
    padding: 50px 0;
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  width: 100%;
  margin: 0 0 0 0;
}
@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
  }
}
@media (max-width: 850px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.dash-card.customer-listing {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 28px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow 0.17s, transform 0.13s;
  position: relative;
}
.dash-card.customer-listing:hover {
  box-shadow: 0 18px 44px rgba(7,27,52,.11);
  transform: translateY(-2px);
}
.dashboard-title {
  font-size: 20px;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 16px 0;
  line-height: 1.1;
}
.customer-meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.customer-meta-wrap {
  margin-bottom: 14px;
}
.customer-desc {
  font-size: 15px;
  color: #657287;
  margin-bottom: 22px;
  margin-top: 0;
  line-height: 1.45;
}
.dashboard-actions-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
@media (max-width: 560px) {
  .dash-card.customer-listing {
    padding: 20px 14px 16px 14px;
  }
  .dashboard-title {
    font-size: 17px;
  }
  .customer-desc {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .dashboard-actions-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* Dashboard Alerts/Notice Cards */
/* ---- Customer Login & Dashboard page custom styles ---- */

/* Customer login page centering and card polish */
.category-section.customer-login-centered {
  display: flex;
  align-items: center;
  min-height: 480px;
  background: #f5f8fc;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 600px) {
  .category-section.customer-login-centered {
    padding-top: 24px; padding-bottom: 24px;
    min-height: 350px;
  }
}
.category-section .login-box-wrapper {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.category-section .login-box-wrapper .section-heading {
  margin-bottom: 30px;
}
.form-card .notice-card.alert-error {
  margin-bottom: 20px;
  font-size: 17px;
}

/* Customer Dashboard - Polished Styles */
.dashboard-section {
  position: relative;
  z-index: 1;
}
.section-heading .btn.btn-light {
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 11px;
  margin-top: 12px;
  box-shadow: 0 2px 9px rgba(7,27,52,0.06);
}
@media (max-width: 600px) {
  .section-heading .btn.btn-light {
    float: none;
    position: static;
    margin: 12px auto 0 auto;
    display: block;
    width: 100%;
    text-align: center;
  }
}
.dashboard-title {
  font-size: 20px;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 8px 0;
  line-height: 1.1;
}
.dashboard-grid {
  margin-top: 0;
}
.dash-card.customer-listing {
  min-height: 162px;
  padding-bottom: 16px;
}
.customer-meta-row {
  margin-bottom: 12px;
  gap: 7px;
}
@media (max-width: 560px) {
  .dashboard-title {
    font-size: 17px;
  }
  .dash-card.customer-listing {
    padding: 18px 10px 14px 10px;
  }
}
.notice-card.alert-empty {
  background: #fffbe7;
  border: 1.5px solid #ffe1a8;
  color: #13233a;
  max-width: 540px;
  margin: 0 auto 26px auto;
  text-align: center;
}
.notice-card.alert-empty h2 {
  font-size: 22px;
  color: #b07b00;
  margin-bottom: 7px;
  font-weight: 800;
}
.notice-card.alert-empty a.btn-primary {
  margin-left: 6px;
  margin-top: 7px;
  box-shadow: 0 2px 7px rgba(255,183,3,0.08);
}

/* End customer login/dashboard custom styles *//* End customer login/dashboard custom styles */

/* Customer Edit Listing Page */

.business-logo-block {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-top: 6px;
}
.business-logo {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 15px;
  background: #f8fafc;
  border: 1.5px solid #e4eaf2;
  box-shadow: 0 2px 9px rgba(7,27,52,0.08);
  display: block;
}
@media (max-width: 560px) {
  .business-logo {
    width: 62px;
    height: 62px;
  }
}
.form-card .form-group-row {
  margin-bottom: 13px;
}
.form-card .form-group-row label {
  font-weight: 800;
  color: #0f3765;
  margin-bottom: 4px;
}
.form-card .form-group-row label small {
  font-size: 13px;
  font-weight: 400;
  color: #657287;
  margin-left: 7px;
}
.form-card .form-group-row input[type="file"] {
  background: #f5f8fc;
  border-radius: 12px;
  padding: 8px 8px;
  border: 1px dashed #c6d2e4;
}
.custom-links-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.custom-link-fields {
  /*flex: 1 1 210px;*/
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
@media (max-width: 850px) {
  .custom-links-row {
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .custom-links-row {
    flex-direction: column;
    gap: 7px;
  }
  .custom-link-fields {
    min-width: 0;
  }
  .business-logo-block {
    justify-content: flex-start;
  }
}
.actions-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 13px;
}
@media (max-width: 600px) {
  .actions-row {
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* === Customer Dashboard Full-Width Row Layout (row/list style) === */
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.dashboard-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(7,27,52,0.07);
  padding: 32px 32px 24px 32px;
  gap: 30px;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  transition: box-shadow 0.18s, transform 0.15s;
}
.dashboard-row:hover {
  box-shadow: 0 16px 48px rgba(7,27,52,0.13);
  transform: translateY(-1.5px);
}
.dashboard-row-info {
  flex: 1 1 0%;
  text-align: left;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.dashboard-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 130px;
  margin-left: auto;
}
.dashboard-row-actions .btn,
.dashboard-row-actions button {
  min-width: 124px;
  font-size: 16px;
  padding: 12px 18px;
  margin-top: 0;
}
.dashboard-row-actions .btn + .btn,
.dashboard-row-actions button + .btn,
.dashboard-row-actions .btn + button,
.dashboard-row-actions button + button {
  margin-top: 9px;
}
/* Polished light button for logout at top right */
.dashboard-logout-btn {
  background: rgba(255,255,255,0.9);
  color: #0f3765;
  border: 1px solid #e4eaf2;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 25px;
  box-shadow: 0 2px 10px rgba(7,27,52,0.08);
  float: right;
  margin-left: auto;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: background 0.16s, box-shadow 0.13s;
}
.dashboard-logout-btn:hover,
.dashboard-logout-btn:focus {
  background: #eaf3ff;
  color: #071b34;
  box-shadow: 0 4px 14px rgba(7,27,52,0.16);
}
/* Listing/category/area tag and status badge tweaks for dashboard row */
.dashboard-row .listing-tag.category-tag {
  background: #eef2f7;
  color: #0f3765;
  font-weight: 700;
  border-radius: 9px;
  font-size: 13px;
  padding: 4px 11px;
  margin-right: 6px;
  margin-bottom: 3px;
  display: inline-block;
}
.dashboard-row .listing-tag.area-tag {
  background: #eaf3ff;
  color: #229871;
  font-weight: 700;
  border-radius: 9px;
  font-size: 13px;
  padding: 4px 11px;
  margin-right: 6px;
  margin-bottom: 3px;
  display: inline-block;
}
.dashboard-row .status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  margin-left: 6px;
  margin-bottom: 3px;
  text-transform: capitalize;
  letter-spacing: .01em;
}
.dashboard-row .status-badge.status-active {
  background: #229871;
  color: #fff;
}
.dashboard-row .status-badge.status-pending_review {
  background: #f6af1b;
  color: #fff;
}
.dashboard-row .status-badge.status-inactive,
.dashboard-row .status-badge.status-rejected {
  background: #c24b4b;
  color: #fff;
}
/* Ensure no overflow on small screens */
.dashboard-row *, .dashboard-row {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 850px) {
  .dashboard-row {
    flex-direction: column;
    padding: 24px 12px 18px 14px;
    gap: 16px;
  }
  .dashboard-row-actions {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    margin-left: 0;
    margin-top: 10px;
    min-width: 0;
    width: 100%;
  }
  .dashboard-row-actions .btn,
  .dashboard-row-actions button {
    min-width: 0;
    width: 100%;
    font-size: 15px;
    margin-top: 0;
  }
  .dashboard-row-actions .btn + .btn,
  .dashboard-row-actions button + .btn,
  .dashboard-row-actions .btn + button,
  .dashboard-row-actions button + button {
    margin-top: 0;
  }
}
@media (max-width: 560px) {
  .dashboard-list {
    gap: 12px;
  }
  .dashboard-row {
    padding: 17px 5px 12px 7px;
    border-radius: 15px;
  }
  .dashboard-row-info {
    gap: 7px;
  }
  .dashboard-row-actions {
    gap: 7px;
    padding-bottom: 0;
    padding-top: 0;
    width: 100%;
  }
  .dashboard-row-actions .btn,
  .dashboard-row-actions button {
    font-size: 14px;
  }
}
/* === End Customer Dashboard Row Layout === */


.notice-card.alert-empty {
  background: #fffbe7;
  border: 1.5px solid #ffe1a8;
  color: #13233a;
}
.notice-card.alert-empty h2 {
  font-size: 22px;
  color: #b07b00;
  margin-bottom: 7px;
  font-weight: 800;
}
.notice-card.alert-empty a.btn-primary {
  margin-left: 6px;
  margin-top: 7px;
  box-shadow: 0 2px 7px rgba(255,183,3,0.08);
}

/* Listing/meta tag & status badge reuse - consistent look */
.listing-tag.category-tag {
  background: #eef2f7;
  color: #005bbb;
  font-weight: 700;
  border-radius: 8px;
  font-size: 13px;
  padding: 4px 11px;
  display: inline-block;
}
.listing-tag.area-tag {
  background: #eaf3ff;
  color: #0f3765;
  font-weight: 700;
  border-radius: 8px;
  font-size: 13px;
  padding: 4px 11px;
  display: inline-block;
}
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  margin-left: 5px;
  text-transform: capitalize;
  color: #fff;
  background: #a9a9a9;
  letter-spacing: .01em;
}
.status-badge.status-active {
  background: #229871;
  color: #fff;
}
.status-badge.status-pending_review {
  background: #f6af1b;
  color: #fff;
}
.status-badge.status-inactive, .status-badge.status-rejected {
  background: #c24b4b;
  color: #fff;
}

.sidebar {
  background: transparent;
  padding: 0;
  width: 340px;
  min-width: 0;
}
@media (max-width: 850px) {
  .sidebar { width: 100%; max-width: 100%; }
}
.side-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,0.055);
  padding: 32px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 560px) {
  .side-card {
    padding: 20px 12px 12px 12px;
  }
}
.sidebar-title, .side-card h3 {
  font-size: 21px;
  color: #13233a;
  font-weight: 800;
  margin: 0 0 26px 0;
  letter-spacing: -0.5px;
  line-height: 1.16;
  text-align: left;
  padding: 0;
}

/* Borough blocks modern visual grouping */
.borough-block {
  margin-bottom: 18px;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid #e4eaf2;
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow 0.18s;
}
.borough-block:last-child {
  margin-bottom: 0;
}

.borough-toggle {
  width: 100%;
  text-align: left;
  padding: 15px 18px 13px 18px;
  border: none;
  background: none;
  font-weight: 800;
  color: #071b34;
  font-size: 16px;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  background: transparent;
  transition: background 0.13s;
}
.borough-toggle:hover, .borough-toggle:focus {
  background: #f0f7ff;
}

.borough-areas {
  padding: 0 13px 10px 18px;
  display: block;
}
.borough-areas a {
  display: block;
  background: #eef2f7;
  border: 1px solid #e4eaf2;
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 15px;
  color: #005bbb;
  font-weight: 700;
  margin: 8px 0 0 0;
  line-height: 1.13;
  transition:background 0.13s, color 0.13s, border 0.13s;
  text-decoration: none;
}
.borough-areas a:first-child {
  margin-top: 2px;
}
.borough-areas a:hover {
  background: #eaf3ff;
  color: #13233a;
  border: 1px solid #c7daf6;
}

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px auto;
}
.section-heading .section-label {
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  background: #ffb703;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-heading h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 17px 0 8px 0;
  color: #13233a;
  font-weight: 800;
}
@media (max-width: 560px) {
  .section-heading {
    margin-bottom: 28px;
  }
}
.section-heading h2, h2.section-title {
  font-size: clamp(28px,4vw,44px);
  line-height: 1.1;
  margin: 17px 0 8px 0;
  color: #13233a;
  font-weight: 800;
}

.listings-section {
  padding: 72px 0 72px 0;
  background: #f5f8fc;
  margin: 0;
}
.section-heading.centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px;
}
.section-heading .section-label {
  display:inline-flex;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#111;
  background:#ffb703;
  padding:8px 13px;
  border-radius:999px;
  margin-bottom:14px;
}
.section-heading h2 {
  font-size:clamp(28px,4vw,44px);
  line-height:1.1;
  margin:17px 0 8px 0;
  color: #13233a;
  font-weight: 800;
}
.section-heading p {
  color: #657287;
  font-size: 16px;
  margin-bottom: 0;
}
.listings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .listings-grid {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 850px) {
  .listings-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 560px) {
  .listings-grid {grid-template-columns: 1fr;}
  .listings-section {padding: 50px 0 50px 0;}
}
.listing-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  text-align: center;
  padding: 24px 16px 14px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  transition: .2s;
  position: relative;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(7,27,52,.11);
}
.listing-card .icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  overflow: hidden;
}
.listing-card .icon-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2f7;
  margin: 0 auto 16px auto;
  display: block;
  border: none;
  box-shadow: none;
  padding: 6px;
}
.listing-card h3 {
  font-size: 16px;
  font-weight: bold;
  color: #071b34;
  margin: 0 0 4px 0;
}
.listing-card h3 a {
  color: #071b34;
  text-decoration: none;
}
.listing-card h3 a:hover {
  color: #005bbb;
  text-decoration: underline;
}
.listing-card p {
  font-size: 13px;
  color: #657287;
  margin: 0;
  line-height: 1.3;
}
.listing-card span {
  display: block;
  font-size: 13px;
  color: #657287;
  padding-bottom: 14px;
  margin-top: 5px;
  border-bottom: 1px solid #e4eaf2;
}
.listing-card strong {
  display: block;
  padding-top: 12px;
  font-size: 14px;
  color: #071b34;
  font-weight: 800;
  letter-spacing: 0.06em;
}



.container{
  width: min(1180px,92%);
  /*max-width: 100%;*/
  margin: auto;
}

.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 8px 25px rgba(7,27,52,0.08);
    padding: 0;
}

.header-inner {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

.brand {
    font-weight: 800;
    font-size: 22px;
    color: #071b34;
    text-decoration: none;
    letter-spacing: -0.5px;
    display: inline-block;
    line-height: 1.05;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0 15px 0 0;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-weight: 700;
    font-size: 15px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.main-nav a {
    color: #071b34;
    text-decoration: none;
    padding: 6px 0 6px 0;
    border-radius: 7px;
    transition: color .18s, background .13s;
    position: relative;
    background: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
    margin: 0;
}

.main-nav a:hover {
    color: #d18c00;
    background: none;
}

.nav-cta {
    background: #ffb703;
    padding: 12px 18px;
    border-radius: 10px;
    color: #111 !important;
    font-weight: 900;
    box-shadow: 0 1px 4px rgba(7,27,52,0.06);
    transition: background .18s, color .18s;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.12;
    margin: 0;
    border: none;
}

.nav-cta:hover {
    background: #ffd880;
    color: #111 !important;
}

.header-search {
    margin-left: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 1100px) {
    .header-search {margin-left: 18px;}
}
@media (max-width: 850px) {
    .header-search {
        margin-left: 0;
    }
}

.header-search input[type="text"] {
    padding: 9px 13px;
    border: 1px solid #e4eaf2;
    border-radius: 8px;
    font-size: 15px;
    background: #f5f8fc;
    color: #071b34;
    width: 180px;
    transition: border .15s;
}

.header-search input[type="text"]:focus {
    outline: none;
    border-color: #ffb703;
    background: #fff8e1;
}

.header-search button {
    background: #071b34;
    color: #fff;
    font-weight: bold;
    padding: 9px 15px;
    border: none;
    border-radius: 7px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.16s;
}

.header-search button:hover {
    background: #0f3765;
}

@media (max-width: 850px) {
    .header-inner {
        height: 68px;
        gap: 12px;
        padding-left: 0;
        padding-right: 0;
    }
    .main-nav {
        gap: 18px;
        margin-left: 0;
        width: 100%;
    }
    .header-search {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .brand {
        font-size: 19px;
        padding-bottom: 2px;
    }
    .header-inner {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .main-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 18px;
        margin-left: 0;
        margin-bottom: 0;
        padding: 0;
    }
    .main-nav a {
        font-size: 16px;
        padding: 3px 0;
        margin-bottom: 0;
    }
    .nav-cta {
        margin-left: 0;
        margin-top: 1px;
        margin-bottom: 3px;
        display: inline-block;
    }
    .header-search {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        margin-top: 10px;
    }
    .header-search input[type="text"] {
        width: 100%;
    }
}

.main-layout {
    display: flex;
    gap: 30px;
    margin-top: 0;
    align-items: flex-start;
}

/* NEW split-layout to match new_design reference */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.split-layout main {
  min-width: 0;
}
.split-layout .sidebar {
  width: 340px;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1100px) {
  .split-layout {
    grid-template-columns: 1fr 280px;
    gap: 22px;
  }
  .split-layout .sidebar {
    width: 100%;
  }
}
@media (max-width: 850px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .split-layout .sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 36px;
  }
}
@media (max-width: 560px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .split-layout .sidebar {
    margin-top: 25px;
    width: 100%;
  }
}
/* Remove excess containe/* Listing detail page NEW CARD tweaks */

.listing-detail-card {
  /*max-width: 580px;*/
  margin: 40px auto;
  padding: 38px 32px 32px 32px;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(7,27,52,.08);
  border: 1px solid #e4eaf2;
  background: #fff;
}
@media (max-width: 700px) {
  .listing-detail-card {margin: 28px 0; padding: 20px 9px; border-radius: 18px; box-shadow: 0 6px 18px rgba(7,27,52,.06);}
}
.business-header {
  text-align: left;
  margin-bottom: 24px;
}
.listing-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.business-logo-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: contain;
  background: #eef2f7;
  box-shadow: 0 2px 12px rgba(7,27,52,0.07);
  border: none;
  padding: 8px;
}
.business-icon {
  width: 76px;
  height: 76px;
  font-size: 34px;
  align-items: center;
  justify-content: center;
  display: flex;
  background: #eef2f7;
  border-radius: 50%;
  margin: 0;
}
.business-name-heading {
  margin-bottom: 8px;
  font-size: clamp(32px, 4vw, 39px);
  color: #13233a;
  font-weight: 800;
  padding-bottom: 0;
  text-align: left;
}
.listing-meta-card {
  display: flex;
  gap: 19px;
  margin: 13px 0 0 0;
}
.meta-row {
  display: flex;
  gap: 5px;
  align-items: center;
  background: #f8fafc;
  border-radius: 11px;
  padding: 6px 13px 6px 13px;
  border: 1px solid #e4eaf2;
  font-size: 15px;
  color: #657287;
}
.meta-label {font-weight: 700;color:#13233a;}
.meta-value {font-weight: 500;}

.custom-links-card {
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 15px;
  padding: 17px 18px 8px 17px;
  margin: 18px 0 20px 0;
}
.custom-links-heading {
  margin: 0 0 7px 0;
  font-size: 18px;
  font-weight: 800;
  color: #13233a;
}
.custom-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.custom-links-list a {
  background: #fff;
  border: 1px solid #dde5f1;
  border-radius: 9px;
  font-size: 15px;
  color: #005bbb;
  font-weight: 700;
  padding: 9px 13px;
  margin-bottom: 7px;
  display: inline-block;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.custom-links-list a:hover {
  background: #eaf3ff;
  color: #13233a;
  border: 1px solid #c7daf6;
}

.listing-description-card {
  margin: 18px 0 19px 0;
}
.desc-heading {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 800;
  color: #13233a;
}
.listing-description-body {
  color: #222;
  font-size: 17px;
  line-height: 1.55;
  background: none;
  padding: 0 0 0 0;
}

.listing-contact-card {
  margin: 24px 0 0 0;
  border-top: 1px solid #e4eaf2;
  padding-top: 21px;
}
.contact-heading {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #13233a;
}
.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #071b34;
  padding: 0;
}
.contact-label { font-weight: 700; color: #071b34;}
.contact-icon { font-size: 18px; min-width:22px;}
@media (max-width: 560px) {
  .listing-detail-card {padding: 11px 4px;}
  .business-logo-img, .business-icon {width:58px;height:58px;font-size:20px;}
  .listing-meta-card {flex-direction: column; gap:9px;}
}
/* Listing Detail Visual Section Styles - Match Add Business/New Cards */
.business-logo .icon-img, .business-logo img.icon-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2f7;
  display: block;
  box-shadow: none;
  padding: 6px;
  margin: 0 auto 0 auto;
  border: none;
}
.listing-description {
  font-size: 17px;
  color: #13233a;
}
@media (max-width: 560px) {
  .listing-description {font-size: 15px;}
}
/* Remove ugly default boxes from old .custom-links-box, .listing-meta, .listing-contact */
.custom-links-box, .listing-meta, .listing-contact {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide default .business-logo unless used inline as icon-img */
.business-logo {margin-bottom:0;}
r margins and horizontal overflow protection */
body, html {
    overflow-x: hidden;
}
/* Enforce no horizontal overflow in all root sections of homepage */
.hero, .category-section, .listings-section, main > .container, .split-layout {
  max-width: 100vw;
  overflow-x: hidden;
}


/*
 * The .content wrapper is no longer applied on the homepage. 
 * Keep .content styling for inner/other pages.
 */

/* Hide the legacy category.php content wrapper for new design */
.category-section > .content, .content[role='main'] { display: none !important; }
.content {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    display: none; /* Hide old .content area for add-business (structure now reworked) */
}


.site-footer {
    background: #071b34;
    color: #fff;
    padding: 38px 0 38px 0;
    margin-top: 40px;
    font-size: 16px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
}
.site-footer .footer-brand strong {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    display: block;
    letter-spacing: 0;
}
.footer-brand .footer-desc {
    color: #b8c7d9;
    font-size: 15px;
    margin: 6px 0 0 0;
    font-weight: 400;
}
.footer-nav {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-nav a {
    color: #fff;
    text-decoration: none;
    padding: 6px 0;
    border-radius: 7px;
    font-weight: 600;
    font-size: 15px;
    transition: color .16s, background .13s;
}
.footer-nav a:hover {
    color: #ffb703;
}
.footer-copyright {
    text-align: right;
    color: #b8c7d9;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}
.site-footer p {
    margin: 8px 0 0 0;
    color: #b8c7d9;
}
@media (max-width: 850px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .footer-copyright {
        text-align: left;
    }
    .footer-nav {
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .site-footer {
        padding: 28px 0 28px 0;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .footer-brand strong {
        font-size: 19px;
    }
    .footer-nav {
        gap: 13px;
    }
}


.admin-login-box{
    width:450px;
    max-width:100%;
    margin:50px auto;
    background:#fff;
    padding:30px;
    border-radius:8px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:25px;
}

.dashboard-card{
    background:#fff;
    padding:25px;
    border-radius:8px;
    border:1px solid #ddd;
}

.dashboard-card h3{
    margin-bottom:10px;
    font-size:16px;
}

.dashboard-card strong{
    font-size:32px;
}

.intro-text{
    margin-bottom:25px;
    color:#555;
}

/* Deprecated: The below .category-grid, .category-box, .new-category-box are no longer used in the add-business page layout */
.category-grid, .category-box, .new-category-box { display: none !important; }


.alert{
    padding:12px;
    margin-bottom:20px;
    border-radius:4px;
}

.alert-error{
    background:#ffe5e5;
    color:#b00000;
}

.success-box{
    background:#eefbea;
    border:1px solid #b9e7aa;
    padding:25px;
    border-radius:6px;
}

.form-box{
    margin-top:20px;
    background:#fafafa;
    border:1px solid #ddd;
    padding:25px;
    border-radius:6px;
}

.form-box label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
}

.form-box input,
.form-box select,
.form-box textarea{
    width:100%;
    padding:12px;
    margin-bottom:18px;
    border:1px solid #ccc;
    border-radius:4px;
}

.form-box button{
    padding:12px 20px;
    background:#111;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}

.business-logo{
    margin-bottom:20px;
}

.business-logo img{
    max-width:180px;
    max-height:120px;
    object-fit:contain;
    border:1px solid #ddd;
    padding:10px;
    background:#fff;
    border-radius:6px;
}

.listing-logo{
    max-width:100px;
    max-height:70px;
    object-fit:contain;
    float:right;
    margin-left:15px;
    border:1px solid #ddd;
    padding:6px;
    background:#fff;
    border-radius:4px;
}

.listing-card{
    background:#ffffff;
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding:22px 24px;
    margin-bottom:18px;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
    transition:all 0.2s ease;
    overflow:hidden;
}

.listing-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,0.1);
}

.listing-card h3{
    margin-bottom:10px;
    font-size:18px;
    line-height:1.3;
}

.listing-card h3 a{
    color:#005bbb;
    text-decoration:none;
}

.listing-card h3 a:hover{
    text-decoration:underline;
}

.listing-card p{
    font-size:15px;
    line-height:1.6;
    color:#333;
    margin-bottom:12px;
}

.listing-card strong{
    color:#111;
}

.read-more{
    display:inline-block;
    margin-top:6px;
    padding:9px 14px;
    background:#005bbb;
    color:#fff !important;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
}

.read-more:hover{
    background:#003f85;
    text-decoration:none;
}

h2.section-title {
    margin: 20px 0 20px 0;
}

.listing-detail{
    background:#ffffff;
    border:1px solid #dcdcdc;
    border-radius:14px;
    padding:35px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    margin-bottom:30px;
}

.listing-detail h1{
    font-size:36px;
    margin-bottom:20px;
    color:#111;
    line-height:1.3;
}

.listing-meta{
    background:#f5f7fb;
    border:1px solid #dfe5ee;
    padding:18px 20px;
    border-radius:10px;
    margin-bottom:28px;
    line-height:1.9;
    font-size:15px;
}

.listing-meta strong{
    color:#111;
}

.listing-description{
    font-size:17px;
    line-height:1.9;
    color:#333;
    margin-bottom:35px;
}

.listing-contact{
    background:#fafafa;
    border:1px solid #e2e2e2;
    border-radius:12px;
    padding:25px;
}

.listing-contact h3{
    font-size:24px;
    margin-bottom:20px;
    color:#111;
    padding-bottom:12px;
    border-bottom:1px solid #ddd;
}

.listing-contact p{
    margin-bottom:16px;
    font-size:16px;
    line-height:1.7;
}

.listing-contact a{
    color:#005bbb;
    text-decoration:none;
    font-weight:500;
}

.listing-contact a:hover{
    text-decoration:underline;
}

.business-logo{
    margin-bottom:25px;
}

.business-logo img{
    max-width:220px;
    max-height:140px;
    object-fit:contain;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    padding:14px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.listing-tags{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    flex-wrap:wrap;
}

.listing-tag{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    line-height:1;
}

.listing-tag{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    transition:all 0.2s ease;
}

.category-tag:hover{
    background:#005bbb;
    color:#fff;
}

.area-tag:hover{
    background:#444;
    color:#fff;
}

.category-tag{
    background:#eaf3ff;
    color:#005bbb;
    border:1px solid #cfe2ff;
}

.area-tag{
    background:#f3f4f6;
    color:#444;
    border:1px solid #ddd;
}

.admin-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:25px 0;
}

.admin-filters a{
    display:inline-flex;
    align-items:center;
    padding:10px 16px;
    border-radius:8px;
    background:#ffffff;
    border:1px solid #d9d9d9;
    text-decoration:none;
    color:#333;
    font-size:14px;
    font-weight:600;
    transition:all 0.2s ease;
}

.admin-filters a:hover{
    background:#005bbb;
    border-color:#005bbb;
    color:#fff;
}

.admin-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    margin-top:10px;
}

.admin-table thead{
    background:#0f172a;
}

.admin-table thead th{
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.4px;
    padding:18px 20px;
    border:none;
}

.admin-table tbody tr{
    transition:background 0.2s ease;
}

.admin-table tbody tr:nth-child(even){
    background:#fafafa;
}

.admin-table tbody tr:hover{
    background:#f1f7ff;
}

.admin-table td{
    padding:18px 20px;
    border-bottom:1px solid #ececec;
    font-size:15px;
    color:#333;
    vertical-align:middle;
}

.admin-table td a{
    color:#005bbb;
    text-decoration:none;
    font-weight:600;
}

.admin-table td a:hover{
    text-decoration:underline;
}

.admin-view-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.admin-view-header h1{
    margin-bottom:6px;
    font-size:32px;
    color:#111827;
}

.admin-view-header p{
    color:#6b7280;
    font-size:15px;
}

.premium-detail-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:30px;
    box-shadow:0 8px 24px rgba(0,0,0,0.07);
}

.admin-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:28px;
}

.admin-info-item{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
}

.admin-info-item span{
    display:block;
    font-size:13px;
    color:#6b7280;
    margin-bottom:8px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.4px;
}

.admin-info-item strong{
    display:block;
    font-size:16px;
    color:#111827;
    line-height:1.5;
}

.admin-info-item a{
    color:#005bbb;
    text-decoration:none;
}

.admin-info-item a:hover{
    text-decoration:underline;
}

.admin-description-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:24px;
    margin-bottom:28px;
}

.admin-description-box h3{
    font-size:22px;
    margin-bottom:12px;
    color:#111827;
}

.admin-description-box p{
    font-size:16px;
    line-height:1.8;
    color:#374151;
}

.premium-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    padding-top:22px;
    border-top:1px solid #e5e7eb;
}

.btn-success{
    background:#15803d;
}

.btn-success:hover{
    background:#166534;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.4px;
}

.status-active{
    background:#e8f8ee;
    color:#15803d;
}

.status-pending_review{
    background:#fff7e6;
    color:#b45309;
}

.status-pending_payment{
    background:#eef4ff;
    color:#1d4ed8;
}

.status-rejected{
    background:#ffe8e8;
    color:#b91c1c;
}

.payment-page{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

.payment-summary-card,
.stripe-checkout-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:30px;
    box-shadow:0 8px 24px rgba(0,0,0,0.07);
}

.payment-summary-card h1{
    font-size:32px;
    margin-bottom:10px;
    color:#111827;
}

.payment-intro{
    color:#6b7280;
    margin-bottom:25px;
    line-height:1.7;
}

.payment-summary-list{
    display:grid;
    gap:14px;
}

.payment-summary-list div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:16px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:12px;
}

.payment-summary-list span{
    color:#6b7280;
    font-weight:600;
}

.payment-summary-list strong{
    color:#111827;
    text-align:right;
}

.payment-total{
    background:#eef6ff !important;
    border-color:#cfe2ff !important;
}

.payment-total strong{
    font-size:22px;
    color:#005bbb;
}

.stripe-checkout-card h2{
    margin-bottom:20px;
    font-size:24px;
}

.payment-success-page{
    display:flex;
    justify-content:center;
    padding:30px 0;
}

.payment-success-card{
    width:100%;
    max-width:760px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:50px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.success-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#dcfce7;
    color:#15803d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    font-weight:bold;
}

.payment-success-card h1{
    font-size:38px;
    margin-bottom:16px;
    color:#111827;
}

.success-message{
    font-size:17px;
    line-height:1.8;
    color:#4b5563;
    margin-bottom:30px;
}

.success-status-box{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:25px;
    margin-bottom:30px;
}

.status-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #ececec;
}

.status-row:last-child{
    border-bottom:none;
}

.status-row span{
    color:#6b7280;
    font-weight:600;
}

.status-row strong{
    font-size:15px;
}

.success-green{
    color:#15803d;
}

.pending-orange{
    color:#c2410c;
}

.success-note{
    font-size:15px;
    line-height:1.8;
    color:#6b7280;
    margin-bottom:35px;
}

.success-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.customer-auth-card{
    max-width:520px;
    margin:0 auto;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:35px;
    box-shadow:0 8px 24px rgba(0,0,0,0.07);
}

.customer-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.customer-dashboard-header h1{
    margin-bottom:6px;
}

.customer-dashboard-header p{
    color:#6b7280;
}

.customer-listing-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:24px;
    margin-bottom:18px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.customer-listing-card h3{
    font-size:22px;
    margin-bottom:12px;
    color:#111827;
}

.customer-listing-card p{
    color:#4b5563;
    line-height:1.7;
}

.customer-card-actions{
    display:flex;
    align-items:flex-start;
    gap:10px;
    flex-shrink:0;
}

.form-section-title{
    margin:30px 0 10px;
    font-size:22px;
    color:#111827;
}

.custom-links-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:24px;
    margin-bottom:30px;
}

.custom-links-box h3{
    font-size:22px;
    margin-bottom:16px;
}

.custom-links-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.custom-links-list a{
    display:inline-flex;
    padding:10px 16px;
    background:#eef6ff;
    border:1px solid #cfe2ff;
    color:#005bbb;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.custom-links-list a:hover{
    background:#005bbb;
    color:#fff;
}

/* Admin Dashboard Styles */
.admin-section {
  padding: 70px 0 54px 0;
  background: #f5f8fc;
  /*min-height: 75vh;*/
}
.admin-page-header {
  margin: 0 0 38px 0;
  padding: 0;
  background: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 22px;
}
.admin-page-header h1 {
  color: #071b34;
  font-size: 2.3rem;
  font-weight: 900;
  margin: 0;
}
.admin-page-header .page-lead {
  color: #657287;
  font-size: 17px;
  font-weight: 500;
  margin-top: 2px;
}
.admin-section .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 32px;
  width: 100%;
  margin: 0;
}
@media (max-width: 1100px) {
  .admin-section .dashboard-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
  }
}
@media (max-width: 770px) {
  .admin-section .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .admin-section {
    padding: 34px 0 24px 0;
  }
  .admin-section .dashboard-grid {
    gap: 10px;
  }
}
.dashboard-grid .admin-stat-card {
  background: #fff;
  border: 1.5px solid #e4eaf2;
  border-radius: 19px;
  box-shadow: 0 6px 30px rgba(7,27,52,.08);
  padding: 38px 30px 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  transition: box-shadow 0.18s, transform 0.13s;
}
.dashboard-grid .admin-stat-card:hover {
  box-shadow: 0 15px 38px rgba(15,55,101,0.13);
  transform: translateY(-2px);
}
.admin-section .dashboard-title {
  font-size: 1.11rem;
  font-weight: 700;
  color: #657287;
  margin-bottom: 7px;
  margin-top: 0;
  letter-spacing: 0.01em;
  text-transform: none;
  background: none;
  padding: 0;
}
.admin-section .admin-stat-value {
  font-size: 2.6rem;
  font-weight: 900;
  color: #071b34;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 0;
  margin-top: 3px;
}
@media (max-width: 560px) {
  .admin-section .admin-stat-card {
    padding: 20px 15px 13px 15px;
  }
  .admin-section .admin-stat-value {
    font-size: 2rem;
  }
  .admin-section .dashboard-title {
    font-size: 0.98rem;
    margin-bottom: 5px;
  }
}
/* End Admin Dashboard Styles */

/* Site-wide Missing Classes and Responsive Fixes */

/* === Utility Containers and Global Wrappers === */
.container {
  width: min(1180px, 92%);
  max-width: 100%;
  margin: 0 auto;
}

/* ==== Site Header & Footer layout (prevent overflow/stack on mobile) ==== */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 8px 25px rgba(7,27,52,.08);
}
.header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.brand {
  font-weight: 800;
  font-size: 22px;
  color: #071b34;
  text-decoration: none;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  font-weight: 700;
  font-size: 14px;
}
.nav-cta {
  background: #ffb703;
  padding: 12px 18px;
  border-radius: 10px;
  color: #111 !important;
}
.site-footer {
  background: #071b34;
  color: #fff;
  padding: 38px 0 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.site-footer p {
  color: #b8c7d9;
  margin: 8px 0 0;
}
.site-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer .footer-grid>p {
  text-align: right;
  font-size: 14px;
}
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .site-footer nav {
    justify-content: flex-start;
  }
  .site-footer .footer-grid>p {
    text-align: left;
  }
}
@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .brand {
    font-size: 19px;
  }
}

/* ==== Section/Heading Utilities ==== */
.centered {
  text-align: center !important;
}
.section-label {
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  background: #ffb703;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* === Admin & Table Styles === */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  background: #fff;
  margin-bottom: 20px;
}
th, td {
  padding: 14px 14px;
  text-align: left;
  border-bottom: 1px solid #e4eaf2;
  font-size: 15px;
}
th {
  font-weight: 800;
  color: #13233a;
  background: #f5f8fc;
  white-space: nowrap;
}
td {
  color: #222;
  background: #fff;
}
.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.status-pill {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #eef5ff;
  color: #0f3765;
  margin-right: 5px;
}
.status-pill.approved {
  background: #deffe4;
  color: #228e54;
}
.status-pill.pending {
  background: #fff7e0;
  color: #bb7400;
}
.status-pill.rejected {
  background: #ffebe0;
  color: #b94213;
}
@media (max-width: 900px) {
  .table-responsive {
    overflow-x: auto;
    max-width: 100vw;
  }
  th, td {
    padding: 11px 10px;
    font-size: 14px;
  }
}
@media (max-width: 700px) {
  table,
  .dashboard-table,
  .admin-table,
  .listing-table,
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  th, td {
    min-width: 100px;
  }
}

/* === Listing Cards (listings-grid) === */
.listings-section {
  padding: 72px 0;
  background: transparent;
}
.listings-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.listing-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  text-align: center;
  padding: 24px 16px 14px 16px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  transition: box-shadow 0.17s, transform 0.18s;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(7,27,52,.11);
}
.listing-card .icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.listing-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 4px 0;
  line-height: 1.14;
}
.listing-card p {
  font-size: 13px;
  color: #657287;
  margin: 0 0 5px 0;
}
.listing-card span {
  display: block;
  font-size: 13px;
  color: #657287;
  padding-bottom: 14px;
  margin-top: 5px;
  border-bottom: 1px solid #e4eaf2;
}
.listing-card strong {
  display: block;
  padding-top: 12px;
  font-size: 14px;
  color: #071b34;
}
@media (max-width: 1100px) {
  .listings-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
  }
}
@media (max-width: 850px) {
  .listings-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .listings-section {
    padding: 50px 0;
  }
  .listings-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .listing-card {
    padding: 16px 8px 10px 8px;
  }
}

/* ==== Sidebar Card Pattern === */
.side-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(7,27,52,0.08);
  padding: 26px 22px;
  margin-bottom: 24px;
  display: block;
  text-align: left;
  font-size: 16px;
}
@media (max-width: 700px) {
  .side-card {
    padding: 14px 7px;
    font-size: 15px;
  }
}

/* === Form Button Row Flex/Stack Utility (for actions-row, buttons-row, dashboard-actions-row) === */
.buttons-row, .actions-row, .dashboard-actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.buttons-row .btn, .actions-row .btn, .dashboard-actions-row .btn {
  margin-left: 0 !important;
}
@media (max-width: 700px) {
  .buttons-row, .actions-row, .dashboard-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* === Alert and Notice Cards === */
.alert-card, .notice-card, .success-card, .warning-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(7,27,52,0.08);
  padding: 26px 32px 24px 32px;
  margin-bottom: 22px;
  font-size: 16px;
  color: #13233a;
  text-align: left;
  position: relative;
}
.alert-card.alert-error, .notice-card.alert-error {
  background: #fff6f7;
  border-color: #ffdad8;
  color: #a4302e;
}
.alert-card.alert-success, .success-card {
  background: #eafce8;
  border-color: #a2e3b9;
  color: #196740;
}
.alert-card.alert-warning, .warning-card {
  background: #fffbe7;
  border-color: #ffe1a8;
  color: #b07b00;
}
@media (max-width: 650px) {
  .alert-card, .notice-card, .success-card, .warning-card {
    padding: 16px 10px 14px 10px;
    font-size: 15px;
  }
}

/* === Prevent Horizontal Overflow (App-wide) === */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
body, .main-content {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

/* === Responsive grid/layout/fixes for admin/panels/dashboard === */
@media (max-width: 1020px) {
  .dashboard-grid, .category-stack, .listings-grid, .footer-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media (max-width: 850px) {
  .header-inner {
    height: 68px;
  }
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    background: #fff;
    padding: 20px 4%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 20px 30px rgba(7,27,52,0.10);
    gap: 18px;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
  }
  .nav-toggle:checked ~ .main-nav {
    display: flex;
  }
}
@media (max-width: 560px) {
  .container {
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    width: 100vw;
    min-width: 0;
  }
  .dashboard-row {
    flex-direction: column;
    gap: 13px !important;
    padding: 13px 5px 12px 5px;
  }
  .dashboard-row-actions {
    align-items: stretch;
    min-width: 0;
    margin-top: 6px;
    margin-left: 0;
  }
}

/* === File input focus/fix for mobile === */
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  border-radius: 8px;
  background: #eaf3ff;
  border: 1px solid #005bbb;
  padding: 7px 13px;
  color: #071b34;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  font: inherit;
  border-radius: 8px;
  background: #eaf3ff;
  border: 1px solid #005bbb;
  padding: 7px 13px;
  color: #071b34;
  cursor: pointer;
}

/* ==== Additional missing card utility for admin/dashboard/panels ==== */
.admin-panel {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(7,27,52,0.07);
  padding: 28px 20px;
  margin-bottom: 22px;
}
.admin-section-heading {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 9px;
  color: #071b34;
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  width: 100%;
  margin-bottom: 21px;
}
.admin-stat-card {
  background: #f8fafc;
  border: 1.5px solid #e4eaf2;
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #0f3765;
  box-shadow: 0 4px 18px rgba(7,27,52,.07);
}
@media (max-width: 1000px) {
  .admin-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
@media (max-width: 700px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* === Standardized input errors & field validation messages === */
.field-error,
.input-error {
  color: #a4302e;
  background: #fff6f7;
  font-size: 14px;
  border: 1px solid #ffdad8;
  border-radius: 8px;
  padding: 8px 11px;
  margin-top: 4px;
  margin-bottom: 8px;
  display: block;
}

/* === Modal / Lightbox (for admin etc) === */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(23,32,46,0.39);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.modal-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(7,27,52,0.18);
  padding: 36px 29px;
  max-width: 96vw;
  min-width: 320px;
}
@media (max-width: 560px) {
  .modal-content {
    padding: 17px 4vw;
    min-width: 90vw;
  }
}

/* === Dashboard/Panel Section, Titles, Wrappers for Admin & Customer === */
.dashboard-panel {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 8px 24px rgba(7,27,52,.05);
  margin-bottom: 18px;
  min-width: 0;
}
.dashboard-panel-title {
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #13233a;
}
.dashboard-panel-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .dashboard-panel {
    padding: 13px;
  }
}

/* === Full-width row hover-overflow fix for dashboard/row cards === */
.dashboard-row,
.dashboard-card,
.dash-card,
.admin-panel {
  min-width: 0;
  word-break: break-word;
}

/* --- HEADER LAYOUT OVERRIDES FOR full RESPONSIVENESS (brand left, burger right, nav+search stacked mobile) --- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 8px 25px rgba(7,27,52,0.08); }
.header-inner { padding: 0 15% 0 15%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; height: 76px; position: relative; }
.brand { font-weight: 800; font-size: 22px; color: #071b34; flex-shrink: 0; text-decoration: none; }
.header-search-outer { width: 100%; padding-top: 0; padding-bottom: 0; }
.header-search { display: flex; align-items: center; gap: 8px; max-width: 420px; margin-left: auto; margin-right: 0; width: 100%; }
.header-search input[type="text"] { flex: 1 1 0px; border-radius: 12px; padding: 12px 14px; font-size: 15px; border: 1px solid #e4eaf2; }
.header-search button { padding: 12px 22px; border-radius: 10px; background: #ffb703; color: #111; border: none; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .17s; }
.header-search button:hover { background: #ffd880; }
/* Ensure the outer container doesn't restrict search on mobile */
.header-search-outer { display: flex; justify-content: flex-end; margin-top: 0; }

@media (max-width: 1100px){ .header-inner{ height: 72px;} }
@media (max-width: 850px) {
  .header-inner { padding: 5px; height: 68px; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
  .main-nav { padding: 20px 4%; gap: 18px; }
  .header-search-outer {
    display: block;
    margin: 0;
    padding: 0 0 6px 0;
    width: 100%;
  }
  .header-search {
    max-width: 100%;
    margin: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    order: 4;
    justify-content: flex-start;
  }
  .site-header { box-shadow: 0 8px 25px rgba(7,27,52,0.08); }
}
@media (max-width: 650px) {
  .header-inner { gap: 6px; }
  .header-search { gap: 6px; }
}
@media (max-width: 560px) {
  .header-inner { height: 58px; gap: 0; }
  .brand { font-size: 19px; padding-left: 2px; }
  .header-search-outer {
    padding: 0 0 5px 0;
    margin: 0 auto 0 auto;
    width: 100%;
  }
  .header-search {
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    width: 100%;
    padding: 0;
    max-width: 100%;
  }
  .header-search input[type="text"] { font-size: 15px; }
  .header-search button { width: 100%; font-size: 15px; padding: 12px 0; }
}
/* Ensure no header element ever causes horizontal scrolling */
.site-header, .header-inner, .main-nav, .header-search-outer, .header-search {
  max-width: 100vw;
  overflow-x: visible;
}
/* Hide search in header-inner, only show in .header-search-outer row. (structure change) */
.header-inner .header-search { display: none !important; }

/* --- END HEADER RESPONSIVE OVERRIDES --- */

/* === Sidebar Accordion Styles === */
.sidebar .side-card {
  padding: 32px 20px 28px 20px;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
}
.accordion-nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}
.borough-block.card-accordion {
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 17px;
  margin: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.16s;
  width: 100%;
}
.borough-block.card-accordion:focus-within {
  box-shadow: 0 0 2px 1.5px #ffb703;
}
.borough-toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  padding: 17px 20px 17px 16px;
  font-size: 15.6px;
  font-weight: 800;
  color: #0f3765;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  z-index: 2;
  text-align: left;
  border-radius: 17px 17px 0 0;
}
.borough-toggle:focus-visible {
  outline: 2px solid #ffb703;
  outline-offset: 2px;
  background: #fffbe7;
}
.borough-toggle[aria-expanded="true"] {
  background: #fffbe7;
  color: #b07b00;
  border-radius: 17px 17px 0 0;
}
.borough-toggle-label {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1em;
}
.chevron {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-left: 13px;
  transition: transform 0.24s cubic-bezier(.28,.63,.51,.93);
  color: #b07b00;
  position: relative;
}
.chevron::before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border-style: solid;
  border-width: 0 3px 3px 0;
  border-color: #b07b00;
  transform: rotate(45deg);
  margin: 3px auto 0 3px;
  transition: border-color 0.18s;
}
.borough-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}
.borough-block.card-accordion .accordion-panel {
  display: block;
  padding: 0 14px 16px 18px;
  background: transparent;
  transition: max-height 0.21s, padding 0.18s;
}
.borough-block.card-accordion .accordion-panel[hidden] {
  display: none;
  padding: 0 14px 0 18px;
}
.borough-block.card-accordion .mini-link-grid {
  margin: 0;
}
.borough-block.card-accordion .mini-link-grid a {
  border-radius: 8px;
  font-size: 14px;
  padding: 12px 6px;
}
.borough-block.card-accordion .mini-link-grid a:hover {
  background: #eaf3ff;
  color: #13233a;
}
/* Hide scroll on X */
.sidebar {
  overflow-x: hidden;
}
@media (max-width: 850px) {
  .sidebar .side-card {
    padding: 27px 6px 20px 6px;
  }
  .borough-block.card-accordion .accordion-panel,
  .borough-block.card-accordion .accordion-panel[hidden] {
    padding-left: 9px;
    padding-right: 8px;
  }
}
@media (max-width: 560px) {
  .sidebar .side-card {
    padding: 14px 2px 12px 2px;
  }
  .borough-toggle {
    font-size: 15px;
    padding: 15px 8px 15px 7px;
  }
  .borough-block.card-accordion .accordion-panel {
    padding: 0 3px 10px 7px;
  }
}

/* --- Admin Table & Listings Visual Upgrade --- */

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px auto;
  position: relative;
}
.section-heading .section-label {
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  background: #ffb703;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-heading h2 {
  font-size: clamp(28px,4vw,44px);
  line-height: 1.1;
  margin: 17px 0 8px 0;
  color: #13233a;
  font-weight: 800;
}

.admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 34px;
  margin-top: 0;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  background: #f5f8fc;
  border: 1.5px solid #e4eaf2;
  color: #0f3765;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  padding: 8px 22px;
  transition: background 0.14s, color 0.12s, border 0.12s;
  text-decoration: none;
  min-width: 84px;
  justify-content: center;
}
.filter-pill.active, .filter-pill:hover {
  background: #ffb703;
  color: #111;
  border-color: #ffb703;
}

.admin-table-scroll {
  width: 100%;
  overflow-x: auto;
  margin-top: 18px;
}
.admin-table-card {
  background: #fff;
  border: 1.5px solid #e4eaf2;
  border-radius: 26px;
  box-shadow: 0 12px 30px rgba(7,27,52,.07);
  padding: 0 0 0 0;
  margin-bottom: 42px;
  min-width: 630px;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: none;
  font-size: 15px;
  border-radius: 24px;
  overflow: hidden;
}
.admin-table thead tr {
  background: #f5f8fc;
}
.admin-table th, .admin-table td {
  padding: 18px 18px;
  border: none;
  text-align: left;
  font-weight: 800;
  color: #13233a;
}
.admin-table th {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  border-bottom: 1.5px solid #e4eaf2;
  background: #f5f8fc;
  border-top: none;
}
.admin-table td.admin-table-cell {
  font-weight: 500;
  border-bottom: 1px solid #e4eaf2;
  background: #fff;
  font-size: 15px;
  color: #192e46;
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: none !important;
}
.admin-table tbody tr:nth-child(odd) {
  background: #fafbfc;
}
.admin-table tbody tr:nth-child(even) {
  background: #fff;
}
.admin-table tbody tr:hover {
  background: #fffbef;
  transition: background 0.12s;
}
.admin-table .btn-view {
  font-size: 15px;
  min-width: 82px;
  padding: 7px 14px;
  border-radius: 8px;
}
.status-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  padding: 7px 16px 7px 15px;
  border-radius: 99px;
  background: #f1f6ff;
  color: #496290;
  text-transform: capitalize;
  border: 1.5px solid #e4eaf2;
}
.status-badge.status-active {
  background: #e3fbe9;
  color: #207e33;
  border-color: #b7ebc2;
}
.status-badge.status-pending_review {
  background: #fffbe7;
  color: #b07b00;
  border-color: #ffe1a8;
}
.status-badge.status-rejected {
  background: #fff6f7;
  color: #a4302e;
  border-color: #ffdad8;
}
.status-badge.status-pending_payment {
  background: #f2f5fe;
  color: #146e9b;
  border-color: #d1e0fa;
}

/* Responsive horizontal scroll for tables on mobile */
@media (max-width: 850px) {
  .admin-table-card {
    min-width: 520px;
    padding: 0;
    border-radius: 16px;
  }
  .admin-table th, .admin-table td {
    padding: 13px 9px;
    font-size: 14px;
  }
  .admin-table-scroll {
    margin-top: 10px;
  }
}
@media (max-width: 560px) {
  .admin-table-scroll {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 2px;
    padding-right: 2px;
  }
  .admin-table-card {
    min-width: 430px;
    border-radius: 9px;
  }
}

/* Empty state message from admin-listings page */
.notice-card.alert-empty {
  background: #fffbe7;
  border: 1.5px solid #ffe1a8;
  color: #13233a;
  max-width: 540px;
  margin: 0 auto 20px auto;
  text-align: center;
  padding: 30px 20px;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(255,183,3,0.05);
}
.notice-card.alert-empty h2 {
  font-size: 22px;
  color: #b07b00;
  margin-bottom: 8px;
  font-weight: 900;
}
.notice-card.alert-empty p {
  font-size: 16px;
  margin-bottom: 0;
  color: #796208;
}

/* Hide old admin-filters row if any remain after markup update */
.admin-filters { display: none !important; }

/* --- End Admin Table & Listings Visual Upgrade --- */

/* === Admin Categories Page Styles (New Design System) === */
.admin-categories-section .section-heading {
  margin-bottom: 36px;
  text-align: center;
}
.admin-table-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  margin-bottom: 0;
  margin-top: 0;
  box-shadow: 0 10px 28px rgba(7,27,52,0.09);
  padding: 0 0 6px 0;
}
.admin-table-card > div[style*="overflow-x"] {
  width: 100%;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: none;
  margin-bottom: 0;
  font-size: 16px;
  color: #13233a;
  border-radius: 20px;
  overflow: hidden;
  min-width: 650px;
}
.admin-table thead tr {
  background: #f5f8fc;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.admin-table th,
.admin-table td {
  padding: 16px 16px;
  text-align: left;
  border: none;
}
.admin-table th {
  font-weight: 800;
  font-size: 15px;
  color: #0f3765;
  background: #f5f8fc;
  border-bottom: 1.5px solid #e4eaf2;
}
.admin-table tr {
  transition: background 0.13s;
}
.admin-table tbody tr {
  background: #fff;
}
.admin-table tbody tr:hover {
  background: #f7fbff;
}
.admin-table td {
  font-size: 16px;
  border-bottom: 1.5px solid #e4eaf2;
  vertical-align: middle;
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.btn-xs {
  font-size: 14px !important;
  padding: 7px 15px !important;
  border-radius: 9px !important;
  font-weight: 800;
  line-height: 1.1;
}
.badge {
  display: inline-block;
  padding: 3.5px 12px 3.5px 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.badge-active {
  background: #e4fbe1;
  color: #217a35;
  border: 1px solid #b9ebbe;
}
.badge-inactive {
  background: #fff6f7;
  color: #a4302e;
  border: 1px solid #f9c4c2;
}
.badge-system {
  background: #f6faff;
  color: #1670aa;
  border: 1px solid #c7e1fd;
}
.badge-user {
  background: #ffecd6;
  color: #b45d09;
  border: 1px solid #ffe1ad;
}
@media (max-width: 950px){
  .admin-table {
    min-width: 590px;
    font-size: 15px;
  }
  .admin-table th, .admin-table td {
    padding: 12px 9px;
  }
}
@media (max-width: 650px){
  .admin-table {
    min-width: 480px;
    font-size: 14px;
  }
  .admin-table-card {
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(7,27,52,0.10);
  }
}
@media (max-width: 560px){
  .admin-categories-section .container {
    padding-left: 0;
    padding-right: 0;
  }
  .admin-table-card {
    padding: 0 0 6px 0;
  }
  .form-card {
    margin-bottom: 19px;
  }
  .admin-categories-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/***** Admin Listing Edit Visual Styles *****/
.dashboard-section .form-card {
  margin-bottom: 65px;
  margin-top: 25px;
}
.form-card form > section {
  margin-bottom: 15px;
  padding-bottom: 0px;
}
.form-card form > section + section {
  margin-top: 22px;
  border-top: 1px solid #e4eaf2;
  padding-top: 20px;
}
.form-group-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
.form-group-row label {
  font-weight: 800;
  color: #0f3765;
  margin-bottom: 4px;
}
.form-group-row input[type="text"],
.form-group-row input[type="email"],
.form-group-row input[type="url"],
.form-group-row textarea,
.form-group-row select {
  background: #fff;
  color: #13233a;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  font-size: 16px;
  padding: 14px 15px;
  width: 100%;
  font-family: inherit;
}
.form-group-row input[type="file"] {
  border: 1px dashed #c6d2e4;
  padding: 10px 7px;
  background: #f8fafc;
  font-size: 15px;
  border-radius: 12px;
}
.form-group-row textarea {
  resize: vertical;
}
.form-group-row label small {
  font-size: 13px;
  color: #657287;
  margin-left: 7px;
  font-weight: 400;
}
.actions-row {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 24px;
}
.actions-row .btn {
  min-width: 130px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 800;
}
@media (max-width: 600px) {
  .actions-row {
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    align-items: stretch;
  }
  .dashboard-section .form-card {
    margin-bottom: 25px;
  }
}
/* Style image preview for logo in admin form */
.business-logo-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  margin-top: 4px;
}
.business-logo img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 15px;
  background: #f8fafc;
  border: 1.5px solid #e4eaf2;
  box-shadow: 0 1px 5px rgba(7,27,52,0.08);
  display: block;
}
.status-select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 250px;
  font-size: 15.5px;
}
.status-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 99px;
  font-weight: 700;
  border: 1.5px solid #e4eaf2;
  margin-left: 7px;
  margin-bottom: 2px;
}
.status-badge.status-pending_payment {
  background: #fffbe4;
  border-color: #ffe89d;
  color: #ad7c0e;
}
.status-badge.status-pending_review {
  background: #e8f1ff;
  border-color: #8cbafd;
  color: #295bae;
}
.status-badge.status-active {
  background: #e6fde7;
  border-color: #7be692;
  color: #127033;
}
.status-badge.status-rejected {
  background: #fff6f6;
  border-color: #fac0c0;
  color: #ab2323;
}
.notice-card.alert-error {
  background: #fff6f7;
  border-color: #ffdad8;
  color: #a4302e;
  font-size: 17px;
  font-weight: 600;
  padding: 22px 28px;
  border-radius: 18px;
}
.form-card .notice-card.alert-error {
  margin-bottom: 18px;
  font-size: 17px;
}
/***** End Admin Listing Edit Visual Styles *****/

/* === ADMIN LISTING DETAIL CARD - MODERN STYLE (Polish: 2024) === */
.admin-view-container {
  width: min(900px,95%);
  margin: 45px auto 0 auto;
  padding-bottom: 74px;
}
.admin-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}
.admin-view-header .page-title {
  font-size: 29px;
  font-weight: 800;
  color: #13233a;
  margin-bottom: 2px;
  margin-top: 0;
  line-height: 1.12;
}
.admin-view-header .subtitle {
  color: #657287;
  font-size: 17px;
  margin: 0 0 0.5rem 0;
}
.status-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 15px;
  border-radius: 13px;
  padding: 8px 17px;
  background: #f7fafc;
  color: #657287;
  border: 1.5px solid #dde4f3;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  margin-left: 12px;
  margin-top: 2px;
}
.status-badge.status-active { background: #e6fce8; color: #219a41; border-color: #ccefd9; }
.status-badge.status-pending_review { background: #fef8ec; color: #b99121; border-color: #f3e0bb; }
.status-badge.status-rejected { background: #fff6f7; color: #d2352f; border-color: #ffdad8; }
.status-badge.status-expired { background: #f7fafd; color: #657287; border-color: #dde4f3; }
.status-badge.status-draft { background: #f7fafd; color: #164378; border-color: #dde4f3; }

.admin-detail-card.form-card {
  box-shadow: 0 14px 42px rgba(7,27,52,.10);
  border-radius: 24px;
  border: 1.6px solid #e4eaf2;
  background: #fff;
  padding: 36px 36px 29px 36px;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}
@media (max-width: 700px) {
  .admin-detail-card.form-card {
    padding: 18px 10px 10px 10px;
  }
  .admin-view-container {
    padding-bottom: 34px;
  }
  .admin-view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
}
.admin-section + .admin-section {
  margin-top: 30px;
  border-top: 1px solid #e4eaf2;
  padding-top: 24px;
}
.admin-section .section-label {
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #071b34;
  font-weight: 800;
  margin: 0 0 12px 0;
  background: none;
  display: inline-block;
}

.admin-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 18px;
  margin-bottom: 0;
}
.admin-info-item {
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 13px;
  padding: 15px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  word-break: break-word;
}
.admin-info-item span {
  font-size: 12px;
  color: #8d98ad;
  font-weight: 700;
  margin-bottom: 2px;
}
.admin-info-item strong {
  font-weight: 800;
  font-size: 16px;
  color: #164378;
  margin-top: 1px;
  word-break: break-word;
}
.admin-info-item a {
  color: #005bbb;
  text-decoration: underline;
  font-size: 15px;
  font-weight: 700;
}
.admin-info-item a:hover {
  color: #13233a;
}
@media (max-width: 900px) {
  .admin-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
}
@media (max-width: 600px) {
  .admin-info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-info-item {
    padding: 13px 10px 8px 12px;
  }
}

.admin-description-section {
  margin-bottom: 0;
}
.admin-description-box {
  background: #f8fafd;
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid #e4eaf2;
}
.admin-description-box p {
  font-size: 16px;
  color: #222b3a;
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .admin-description-box {
    padding: 12px 7px;
  }
}

.admin-actions-section {
  margin-bottom: 0;
  margin-top: 16px;
}
.admin-actions-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 10px;
}
.admin-actions-row .btn {
  min-width: 126px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 19px;
  margin: 0;
}
@media (max-width: 600px) {
  .admin-actions-row {
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
  }
  .admin-actions-row .btn {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
    margin-bottom: 0;
  }
}
/* END ADMIN LISTING DETAIL POLISH */

/* === Admin Locations Page Table, Form, and Badge Styles === */
.admin-table-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(7,27,52,0.10);
  padding: 0 0 0 0;
  margin-top: 22px;
  margin-bottom: 44px;
  overflow: visible;
}
.admin-table-card > div {
  width: 100%;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  background: none;
  margin: 0;
}
.admin-table th, .admin-table td {
  padding: 17px 18px 17px 16px;
  text-align: left;
  background: none;
}
.admin-table th {
  color: #071b34;
  font-size: 15px;
  font-weight: 800;
  background: #f8fafc;
  border-bottom: 2px solid #e4eaf2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-table td {
  color: #192c4d;
  border-bottom: 1.5px solid #e4eaf2;
  background: #fff;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: #f2f8ff;
  transition: background 0.14s;
}
@media (max-width: 800px) {
  .admin-table-card {
    border-radius: 15px;
    overflow-x: auto;
    padding: 0;
  }
  .admin-table th, .admin-table td {
    padding: 13px 10px 13px 10px;
    font-size: 14px;
  }
}
@media (max-width: 560px) {
  .admin-table-card {
    border-radius: 11px;
    box-shadow: 0 2px 9px rgba(7,27,52,0.06);
    margin-bottom: 22px;
  }
  .admin-table th, .admin-table td {
    padding: 8px 7px 8px 7px;
    font-size: 13px;
  }
}
.status-badge {
  display: inline-block;
  border-radius: 99px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 14px;
  background: #eef2f7;
  color: #4e647e;
  margin-right: 2px;
  letter-spacing: 0.01em;
  border: none;
}
.status-badge.status-active {
  background: #e7fce5;
  color: #217a00;
  border: 1px solid #b4f6b6;
}
.status-badge.status-inactive {
  background: #fff4ef;
  color: #ad3903;
  border: 1px solid #ffd8c2;
}
.badge {
  display: inline-block;
  border-radius: 12px;
  padding: 7px 13px;
  font-weight: 700;
  font-size: 14px;
  background: #edf4fa;
  color: #1061a1;
  margin-right: 2px;
}
.badge-soft {
  background: #f7f9ff;
  color: #657287;
  border: 1px solid #e4eaf2;
}
.btn-xs, .btn.btn-xs {
  font-size: 13px;
  padding: 8px 15px;
  border-radius: 9px;
  min-width: 70px;
  font-weight: 700;
}
.form-card .form-group-row {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}
.form-card .form-group-row:last-child {
  margin-bottom: 0;
}
.form-card input[type="text"],
.form-card select {
  font-size: 15px;
  min-height: 44px;
  border-radius: 11px;
  margin-top: 3px;
  border: 1px solid #e4eaf2;
}
.form-card label {
  color: #0f3765;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.form-card button.btn-primary {
  width: 100%;
  margin-top: 7px;
  min-width: none;
}
.form-card h3.section-label {
  margin-bottom: 14px;
  margin-top: -10px;
  background: none;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* Section heading local tweak for left-aligned admin subsections */
.section-heading {
  position: relative;
}
.section-heading .section-label {
  margin-bottom: 0px;
  margin-top: 0px;
}
.notice-card.alert-error {
  background: #fff6f7;
  border: 1.5px solid #ffdad8;
  color: #a4302e;
  font-size: 17px;
  font-weight: 600;
  padding: 22px 30px;
  border-radius: 18px;
}
@media (max-width: 560px) {
  .notice-card.alert-error {
    padding: 14px 10px;
    font-size: 15px;
    border-radius: 10px;
  }
}

/* --- Admin Payments Page Styles --- */
.admin-page-section {
  width: min(1180px, 94%);
  margin: 56px auto 0 auto;
  padding-bottom: 60px;
}
@media (max-width: 850px) {
  .admin-page-section {
    margin-top: 36px;
    padding-bottom: 28px;
  }
}
.section-heading {
  margin-bottom: 35px;
}

.admin-table-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(7,27,52,0.07);
  padding: 0 0 0 0;
  margin-bottom: 35px;
  overflow-x: auto;
  width: 100%;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
  background: none;
}
.admin-table th, .admin-table td {
  padding: 17px 20px;
  font-size: 15px;
  color: #13233a;
  text-align: left;
}
.admin-table th {
  background: #0f172a;
  font-weight: 800;
  border-bottom: 2px solid #e4eaf2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
}
.admin-table tr {
  border-bottom: 1px solid #e4eaf2;
}
.admin-table tbody tr:last-child {
  border-bottom: none;
}
.admin-table td {
  background: #fff;
  vertical-align: middle;
}
.admin-table tr:hover td {
  background: #f8fafc;
}

/* For horizontal scroll below min-width, table is wrapped */
@media (max-width: 1100px) {
  .admin-table-card {
    padding: 0;
    border-radius: 16px;
  }
  .admin-table {
    min-width: 620px;
    font-size: 14px;
  }
  .admin-table th, .admin-table td {
    padding: 12px 10px;
  }
}
@media (max-width: 620px) {
  .admin-table {
    min-width: 480px;
    font-size: 13px;
  }
  .admin-table th, .admin-table td {
    padding: 8px 4px;
  }
}

.payments-table .admin-status-badge {
  display: inline-block;
  min-width: 82px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: 14px;
  padding: 6px 15px 5px 15px;
  margin-right: 0;
  color: #fff;
  letter-spacing: 0.01em;
  background: #0f3765;
  border: none;
  line-height: 1.25;
}
.admin-status-badge.admin-status-succeeded {
  background: #53b361;
  color: #fff;
}
.admin-status-badge.admin-status-failed, 
.admin-status-badge.admin-status-error {
  background: #e4483e;
}
.admin-status-badge.admin-status-pending {
  background: #ffb703;
  color: #111;
}
.admin-status-badge.admin-status-processing {
  background: #e6ba32;
  color: #111;
}
.admin-status-badge.admin-status-cancelled,
.admin-status-badge.admin-status-refunded {
  background: #7b8896;
  color: #fff;
}

.notice-card.alert-empty {
  background: #fffbe7;
  border: 1.5px solid #ffe1a8;
  color: #665700;
  border-radius: 18px;
  box-shadow: 0 8px 16px rgba(255,183,3,0.06);
  padding: 33px 16px 22px 16px !important;
  margin-bottom: 15px;
}
.notice-card.alert-empty h2 {
  color: #b07b00;
  font-size: 21px;
  margin-bottom: 7px;
  font-weight: 800;
}
.notice-card.alert-empty p {
  color: #665700;
  font-size: 15px;
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .admin-page-section {
    margin-top: 18px;
    padding-bottom: 15px;
    width: 99%;
  }
  .section-heading {
    margin-bottom: 17px;
  }
  .admin-table-card {
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(7,27,52,0.06);
    padding: 0;
  }
  .admin-table {
    font-size: 13px;
  }
}

/* =============================================================
   Admin Login and Navigation Polish
   All styles below are admin-only: target body.admin, .admin-*,
   or .admin-page where present, and do not affect public UI.    
   ============================================================= */
body.admin-login {
  background: #f5f8fc !important;
}
.admin-login-outer {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #f5f8fc;
  padding: 44px 0 44px 0;
}
.admin-login-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 8px 36px rgba(7,27,52,0.09);
  max-width: 400px;
  width: 100%;
  padding: 52px 38px 38px 38px;
  border: 1px solid #e4eaf2;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (max-width: 560px) {
  .admin-login-card {
    padding: 28px 10px 22px 10px;
    border-radius: 18px;
  }
}
.admin-login-card .admin-login-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 14px 0;
  letter-spacing: -0.5px;
}
.admin-login-card .admin-login-desc {
  text-align: center;
  color: #657287;
  font-size: 1.08rem;
  margin-bottom: 23px;
}
.notice-card.alert-error {
  background: #fff6f7;
  border: 1px solid #ffdad8;
  color: #a4302e;
  font-size: 16.5px;
  font-weight: 600;
  margin-bottom: 18px;
  border-radius: 17px;
  padding: 19px 22px;
  text-align: left;
  box-shadow: 0 5px 18px rgba(254,79,79,0.04);
}
.admin-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 5px;
}
.admin-login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.admin-login-form label {
  font-weight: 700;
  color: #0f3765;
  font-size: 15px;
  margin-bottom: 2px;
}
.admin-login-form input[type=email],
.admin-login-form input[type=password] {
  border-radius: 13px;
  border: 1px solid #e4eaf2;
  background: #f8fafc;
  font-size: 16px;
  padding: 13px 15px;
  color: #13233a;
  margin-bottom: 0;
  width: 100%;
  transition: border 0.18s;
}
.admin-login-form input[type=email]:focus,
.admin-login-form input[type=password]:focus {
  border: 1.4px solid #0f3765;
  outline: none;
  background: #fff;
}
.admin-login-form button[type=submit] {
  background: #ffb703;
  color: #111;
  border-radius: 12px;
  border: none;
  padding: 15px 0;
  font-size: 19px;
  font-weight: 800;
  margin-top: 6px;
  box-shadow: 0 2px 9px rgba(255,183,3,0.08);
  transition: background 0.13s;
  cursor: pointer;
}
.admin-login-form button[type=submit]:hover {
  background: #ffd880;
}

/* ---- Admin Header, Navigation and Responsive ---- */
.site-header.admin-header {
  background: #fff;
  border-bottom: 1.5px solid #e4eaf2;
  box-shadow: 0 8px 22px rgba(7,27,52,0.09);
  position: sticky;
  top: 0;
  z-index: 101;
}
.admin-header-inner {
  display: flex;
  align-items: center;
  height: 68px;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px,96%);
  margin: 0 auto;
}
.admin-logo {
  font-weight: 800;
  font-size: 21px;
  color: #071b34;
  letter-spacing: -0.6px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (max-width: 560px) {
  .admin-logo {
    font-size: 17px;
  }
  .admin-header-inner {
    height: 55px;
    gap: 11px;
    padding: 0;
  }
}
.admin-main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 700;
  font-size: 15px;
  z-index: 1;
}
.admin-main-nav a {
  color: #0f3765;
  text-decoration: none;
  border-radius: 7px;
  padding: 8px 14px;
  transition: background 0.15s, color 0.14s;
  display: inline-block;
}
.admin-main-nav a:hover {
  background: #f5f8fc;
  color: #d18c00;
}
.admin-main-nav a.active {
  background: #ffb703;
  color: #071b34;
  font-weight: 800;
  box-shadow: 0 1px 7px rgba(255,183,3,0.07);
}

@media (max-width: 850px) {
  .admin-header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 0;
  }
  .admin-main-nav {
    flex-wrap: wrap;
    gap: 6px 0;
  }
  .admin-main-nav a {
    margin-right: 9px;
    margin-bottom: 8px;
    padding: 8px 12px;
  }
}
@media (max-width: 640px) {
  .admin-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    padding: 7px 0;
  }
  .admin-main-nav {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: flex-start;
    margin-top: 7px;
  }
  .admin-main-nav a {
    width: 100%;
    margin-right: 0;
    margin-bottom: 5px;
    text-align: left;
    padding: 10px 6px 10px 14px;
    border-radius: 9px;
    background: #f8fafc;
  }
}
body.admin main, body.admin .container {
  /*max-width: 1150px;*/
  width: 96%;
  margin: 0 auto;
}
/* End Admin Login and Navigation Polish */

/* Admin Full Width Layout and Footer Polish */
.admin-container {
  max-width: 1420px;
  width: 98%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (max-width: 1550px) {
  .admin-container { max-width: 99vw; }
}
@media (max-width: 900px) {
  .admin-container { padding-left: 6px; padding-right: 6px; }
}

body.admin-area,
.dashboard-section,
.admin-view-container,
.admin-page-section,
.admin-login-outer {
  background: #f5f8fc;
}

/* Use wide layout for all admin cards & tables */
.admin-container .dashboard-grid,
.admin-container .dashboard-list,
.admin-container .dashboard-row,
.admin-container .admin-table-card,
.admin-container .form-card,
.admin-container .admin-detail-card,
.admin-container .section-heading,
.admin-container .admin-table-scroll,
.admin-container .admin-table,
.admin-container .notice-card,
.admin-container .admin-categories-section,
.admin-container .admin-table-card > div,
.admin-container .admin-actions-row {
    max-width: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.admin-container .admin-table-scroll { overflow-x: auto; }

.admin-table-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(7,27,52,0.07);
  border: 1px solid #e4eaf2;
  padding: 0;
  margin-bottom: 28px;
}

/* Admin Footer */
.admin-footer {
  width: 100%;
  background: #071b34;
  color: #e1ecfa;
  padding: 0;
  margin: 0;
  border-top: 1.5px solid #192c49;
  font-size: 15px;
}
.admin-footer-inner {
  max-width: 1420px;
  width: 98%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  min-height: 40px;
}
.admin-footer-inner p {
  color: #b8c7d9;
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .admin-footer-inner {
    flex-direction: column;
    gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
}

/* Tighter admin card/form width for login page only */
.admin-login-outer {
  min-height: 90vh; display: flex; align-items: center; justify-content: center; background: #f5f8fc;
}
.admin-login-card {
  width: 100%; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 20px; border: 1.5px solid #e4eaf2; box-shadow: 0 6px 32px rgba(7,27,52,0.09); padding: 40px 36px;
}
.admin-login-title { font-size: 2rem; margin-bottom: 6px; font-weight: 800; }
.admin-login-desc { color: #657287; font-size: 15.5px; margin-bottom: 20px; }
.admin-login-form label { color: #0f3765; font-size: 15px; font-weight: 700; }
.admin-login-form input { border-radius: 12px; font-size: 16px; margin-bottom: 7px; }
.admin-login-form button { width: 100%; margin-top: 12px; }

/* Global: Mark admin body with .admin-area class via header include for future-proofing. Only style via .admin-container or pages with admin-area class. */

/* HOMEPAGE - Section vertical separation after order swap */
.listings-section {
  padding-top: 72px;
  padding-bottom: 0;
  background: transparent;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .listings-section {
    padding-top: 50px;
    padding-bottom: 0;
  }
}
.category-section {
  padding-top: 72px;
  padding-bottom: 72px;
  margin-top: 0;
  background: transparent;
}
@media (max-width: 560px) {
  .category-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* ==== Header Search Bar Desktop and Responsive Fixes ==== */
.header-search-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}
.header-search-align {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 2px 9px rgba(7,27,52,0.04);
  border: 1px solid #e4eaf2;
  padding: 4px 7px 4px 9px;
  position: relative;
  z-index: 5;
}
.header-search input[type="text"] {
  flex: 1 1 0%;
  border: none;
  padding: 12px 12px 12px 2px;
  font-size: 16px;
  background: transparent;
  color: #13233a;
  border-radius: 10px;
  outline: none;
  box-shadow: none;
  min-width: 60px;
}
.header-search input[type="text"]::placeholder {
  color: #b6bdd1;
}
.header-search button {
  margin-left: 4px;
  border-radius: 8px;
  background: #ffb703;
  color: #111;
  font-weight: 800;
  padding: 11px 22px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(255,183,3,0.08);
  transition: background .14s;
}
.header-search button:hover {
  background: #ffd77f;
}
@media (max-width: 900px) {
  .header-search {
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 850px) {
  .header-search-outer {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .header-search-align {
    width: 100%;
    justify-content: flex-start;
  }
  .header-search {
    width: 100%;
    max-width: 100%;
    margin: 7px 0 0 0;
    flex-direction: row;
    padding: 2px 3px 2px 3px;
  }
  .header-search input[type="text"] {
    font-size: 15px;
    padding: 9px 7px 9px 1px;
  }
  .header-search button {
    min-width: 90px;
    font-size: 14px;
    padding: 8px 13px;
  }
}
@media (max-width: 560px) {
  .header-search-outer {
    width: 100%;
    margin-top: 4px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .header-search-align {
    width: 100%;
    justify-content: flex-start;
  }
  .header-search {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    flex-direction: column;
    gap: 8px;
    box-shadow: none;
    border-radius: 12px;
    padding: 1px 0 6px 0;
  }
  .header-search input[type="text"] {
    width: 100%;
    border-radius: 8px;
    padding: 9px 8px 9px 2px;
    margin-bottom: 0;
  }
  .header-search button {
    width: 100%;
    border-radius: 8px;
    margin: 0;
    padding: 10px 0;
    min-width: 0;
  }
}

/* Prevent search from crowding nav or logo on desktop */
@media (min-width: 900px) {
  .site-header .header-inner {
    margin-bottom: 0px;
  }
  .header-search-outer {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .header-search-align {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .header-search {
    margin-top: 10px;
    margin-bottom: 2px;
    box-shadow: 0 2px 9px rgba(7,27,52,0.05);
  }
}
/* ==== End Header Search Bar Desktop and Responsive Fixes ==== */

/* Success Card Styles for Category Created (matches design system) */
.success-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.08);
  padding: 38px 38px 32px 38px;
  text-align: center;
  margin: 0 auto;
  max-width: 440px;
  display: block;
}
@media (max-width: 560px) {
  .success-card {
    padding: 19px 8px 18px 8px;
    max-width: 98vw;
  }
}

/* === Admin View Listing Modern Card & Section Styles === */
.admin-main-container {
  width: 100%;
  background: #f5f8fc;
  min-height: 100vh;
  padding: 58px 0 0 0;
}
.admin-detail-wrapper {
  max-width: 700px;
  margin: 0 auto 55px;
  width: 95%;
}
.admin-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
}
.admin-detail-title {
  margin: 0 0 6px 0;
  font-size: 28px;
  color: #071b34;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.admin-detail-meta {
  display: flex;
  gap: 18px;
  color: #657287;
  font-size: 14px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.admin-detail-meta span {
  color: #657287;
  font-size: 14px;
}
.admin-detail-meta strong {
  color: #13233a;
  font-weight: 800;
  margin-left: 4px;
}
.admin-detail-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 38px 36px 22px 36px;
  margin-bottom: 0;
  text-align: left;
}
@media (max-width: 700px){
  .admin-detail-card{padding: 18px 8px 16px 12px;}
  .admin-detail-wrapper{width:99%;}
}

.admin-section {
  margin-bottom: 25px;
}
.admin-section:last-child {
  margin-bottom: 0;
}
.section-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #071b34;
  background: #ffb703;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 13px;
  display: inline-block;
}

.admin-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 17px 36px;
  padding: 6px 0;
}
.admin-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: #13233a;
}
.admin-info-item .meta-label {
  color: #657287;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .admin-info-grid {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
}

.admin-description-section .admin-description-box {
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e4eaf2;
  padding: 17px 20px 12px 20px;
  font-size: 15px;
  color: #13233a;
  margin-top: 7px;
  min-height: 46px;
}

.admin-actions-section {
  border-top: 1px solid #e4eaf2;
  padding-top: 22px;
  margin-top: 18px;
}
.admin-actions-row {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-admin {
  background: #0f3765;
  color: #fff;
  border-radius: 11px;
  padding: 13px 24px;
  font-weight: 800;
  font-size: 16px;
  border: 1px solid #0f3765;
  transition: background 0.16s;
}
.btn-admin.btn-success {
  background: #22bb6c;
  border-color: #22bb6c;
}
.btn-admin.btn-danger {
  background: #b60e2e;
  border-color: #b60e2e;
}
.btn-admin.btn-light {
  background: #f8fafc;
  color: #0f3765;
  border-color: #e4eaf2;
}
.btn-admin:hover {
  background: #071b34;
  color: #fff;
  border-color: #071b34;
}
.btn-admin.btn-success:hover {
  background: #15894b;
  border-color: #15894b;
}
.btn-admin.btn-danger:hover, .btn-admin-delete:hover {
  background: #85102b;
  border-color: #85102b;
}
.btn-admin.btn-light:hover {
  background: #eaf3ff;
  color: #071b34;
  border-color: #cde1fa;
}
.btn-admin-delete {
  background: #fff6f8;
  color: #b60e2e;
  border-color: #ffdad8;
}
.btn-admin-delete:hover {
  background: #fbeaec;
  color: #85102b;
  border-color: #ffb6b6;
}
@media (max-width: 600px) {
  .admin-actions-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .btn-admin, .btn-admin-delete {
    width: 100%;
    text-align: center;
    min-width: 1px;
    padding: 13px 0;
  }
}

.status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 7px 19px;
  border-radius: 999px;
  text-transform: capitalize;
  margin-left: 10px;
  background: #eaf3ff;
  color: #0f3765;
  border: none;
}
.status-badge.status-active {
  background: #e5fbe9;
  color: #17804c;
}
.status-badge.status-pending_review {
  background: #fffae0;
  color: #b07b00;
}
.status-badge.status-rejected {
  background: #fff6f7;
  color: #b60e2e;
}
.status-badge.status-pending_payment {
  background: #e1edff;
  color: #0f3765;
}
.status-badge.status-unpaid {
  background: #ffe5e5;
  color: #b60e2e;
}
.status-badge.payment-status {
  margin-left: 0;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 16px;
}
.status-badge.status-paid {
  background: #e5fbe9;
  color: #15894b;
}
.status-badge.status-failed {
  background: #fff6f7;
  color: #b60e2e;
}
.status-badge.status-unpaid {
  background: #fff6f7;
  color: #b60e2e;
}

.admin-listing-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: flex-start;
  font-size: 13px;
  color: #6d7d8c;
  margin-top: 18px;
  margin-bottom: 15px;
  padding-left: 6px;
}
.admin-listing-meta-row span {
  color: #6d7d8c;
  font-size: 13px;
}
.admin-listing-meta-row strong {
  color: #0f3765;
  font-weight: 800;
}
@media (max-width: 600px) {
  .admin-listing-meta-row {
    flex-direction: column;
    gap: 7px;
    padding-left: 2px;
  }
}
/* === End Admin View Listing Card & Section Styles === */

/* Listing Contact Card Modern Styles - Matches new_design */
.listing-contact-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  padding: 32px 30px 24px 30px;
  margin-top: 32px;
  margin-bottom: 0;
  display: block;
}
.listing-contact-card .contact-heading,
.listing-contact-card .section-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #071b34;
  margin-bottom: 20px;
  background: none;
  padding: 0;
  display: block;
}
.listing-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  width: 100%;
}
@media (max-width: 700px) {
  .listing-contact-grid {
    grid-template-columns: 1fr;
    gap: 15px 0;
  }
}
.listing-contact-item {
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 15px;
  padding: 14px 18px 12px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.listing-contact-label {
  font-size: 13px;
  font-weight: 700;
  color: #657287;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.listing-contact-value {
  font-size: 15px;
  font-weight: 600;
  color: #0f3765;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.48;
  min-width: 0;
}
.listing-contact-value a {
  color: #0f3765;
  text-decoration: underline;
  word-break: break-all;
  overflow-wrap: break-word;
}
.listing-contact-value a:hover {
  color: #ffb703;
  text-decoration: underline;
}
.listing-contact-item:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 560px) {
  .listing-contact-card {
    padding: 17px 10px 10px 10px;
    border-radius: 16px;
  }
  .listing-contact-grid {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
  .listing-contact-item {
    padding: 11px 11px 10px 12px;
    border-radius: 11px;
  }
}

/* ----- Address Field: Wrap long address on cards cleanly ----- */
.contact-row .contact-address-value, .admin-info-item span[style*="white-space:pre-line"] {
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 340px;
  display: inline-block;
  vertical-align: top;
}
@media (max-width: 560px) {
  .contact-row .contact-address-value, .admin-info-item span[style*="white-space:pre-line"] {
    max-width: 92vw;
    font-size: 15px;
  }
}

/* --- SEARCH RESULTS PAGE POLISH --- */

.listings-section {
  padding: 72px 0 !important;
  background: transparent;
}
.section-heading.centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 38px auto;
}
.listings-section .form-card {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
/* Results grid for search page: default 3 or 2 per row responsive */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  width: 100%;
}
@media (max-width: 1100px) {
  .listings-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
  }
}
@media (max-width: 850px) {
  .listings-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .listings-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
  .section-heading.centered {
    margin-bottom: 20px;
  }
  .listings-section .form-card {
    padding: 13px 8px 16px 8px;
  }
  .listings-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.listing-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  text-align: center;
  padding: 24px 16px 19px 16px;
  box-shadow: 0 12px 30px rgba(7,27,52,.055);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: 0.22s box-shadow, 0.10s transform;
  min-width: 0;
  position: relative;
}
.listing-card .icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  box-shadow: none;
}
.listing-card .icon-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2f7;
  display: block;
  box-shadow: none;
  padding: 6px;
  margin: 0 auto 16px auto;
  border: none;
}
.listing-card h3 {
  font-size: 16px;
  margin: 0 0 4px 0;
  font-weight: 800;
  color: #13233a;
  line-height: 1.2;
}
.listing-card h3 a {
  color: #13233a;
  text-decoration: none;
  font-weight: 800;
  transition: color 0.13s;
}
.listing-card h3 a:hover {
  color: #174a83;
}
.listing-card p, .listing-card span {
  font-size: 13px;
  color: #657287;
  line-height: 1.50;
  margin: 0 0 0.4em 0;
}
.listing-card span {
  padding-bottom: 8px;
  margin-bottom: 0;
}
.listing-card .btn.btn-primary {
  margin-top: 4px;
  width: 100%;
  font-size: 16px;
  font-weight: 800;
  padding: 13px 0;
  border-radius: 11px;
}
.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(7,27,52,.11);
}

.notice-card.alert-empty {
  background: #fffbe7;
  border: 1.5px solid #ffe1a8;
  color: #13233a;
  box-shadow: 0 8px 24px rgba(255,183,3,0.06);
  max-width: 540px;
  margin: 0 auto 32px auto;
  text-align: center;
  border-radius: 22px;
  padding: 38px 36px 31px 36px;
}
.notice-card.alert-empty h2 {
  font-size: 22px;
  color: #b07b00;
  margin-bottom: 7px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.notice-card.alert-empty p {
  font-size: 17px;
  color: #65541f;
  margin-bottom: 0;
  font-weight: 500;
}
@media (max-width: 560px) {
  .notice-card.alert-empty {
    padding: 20px 10px 16px 10px;
    margin-bottom: 18px;
  }
  .notice-card.alert-empty h2 {
    font-size: 18px;
  }
  .notice-card.alert-empty p {
    font-size: 15px;
  }
}

/* ===== SEARCH RESULTS ROW STYLE (full-width row cards) ===== */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.search-result-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(7,27,52,0.07);
  padding: 30px 34px 24px 30px;
  gap: 36px;
  transition: box-shadow 0.14s, transform 0.11s;
  min-width: 0;
  position: relative;
}
.search-result-row:hover {
  box-shadow: 0 16px 48px rgba(7,27,52, 0.13);
  transform: translateY(-2.5px);
}
.search-result-media {
  display: flex;
  align-items: center;
  flex: 0 0 60px;
  justify-content: center;
  margin-right: 6px;
}
.search-result-media .listing-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #eef2f7;
  display: block;
  box-shadow: none;
  border: none;
}
.search-result-media .icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  color: #b0b6be;
}
.search-result-content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 12px;
}
.search-result-content h3 {
  font-size: 21px;
  font-weight: 800;
  color: #13233a;
  margin: 0 0 4px 0;
  line-height: 1.15;
  word-break: break-word;
}
.search-result-content h3 a {
  color: #13233a;
  text-decoration: none;
  transition: color .16s;
}
.search-result-content h3 a:hover {
  color: #ffb703;
}
.search-result-content .category-meta {
  font-size: 14px;
  color: #0f3765;
  font-weight: 700;
  margin-bottom: 2px;
}
.search-result-content .area-meta {
  display: block;
  font-size: 14px;
  color: #657287;
  margin-bottom: 9px;
}
.search-result-content .desc {
  font-size: 15px;
  color: #657287;
  margin-bottom: 0;
  margin-top: 8px;
  min-height: 32px;
  line-height: 1.45;
  word-break: break-word;
}
.search-result-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 160px;
  margin-left: auto;
  padding-left: 5px;
}
.search-result-actions .btn {
  min-width: 136px;
  font-size: 16px;
  padding: 13px 22px;
  font-weight: 800;
  border-radius: 12px;
  border-color: #FFF;
  background: #000;
}
.search-result-actions .btn:hover {
  border-color: #000;
  background: #FFF;
  color: #000
}

@media (max-width: 850px) {
  .search-result-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 13px 16px 13px;
    gap: 14px;
  }
  .search-result-media {
    margin-bottom: 3px;
    margin-right: 0;
    justify-content: flex-start;
  }
  .search-result-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-start;
    padding-left: 0;
  }
  .search-result-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    font-size: 15px;
    padding: 13px 0;
  }
}
@media (max-width: 560px) {
  .search-result-row {
    padding: 14px 5px 10px 5px;
    gap: 8px;
    border-radius: 17px;
  }
  .search-result-media .listing-logo, .search-result-media .icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
  .search-result-content h3 {
    font-size: 16px;
  }
  .search-result-content .desc {
    font-size: 13px;
    min-height: 22px;
  }
  .search-result-actions .btn {
    font-size: 14px;
    padding: 12px 0;
    min-width: 0;
  }
}
/* Override grid for old .listings-grid on search page (ensure not visible) */
/*.listings-grid { display: none !important; }
.listing-card { display: none !important; }*/

/* === New Design Hero Section Conversion (matches new_design) === */
.hero {
  background: url('../img/hero-manchester.png') center/cover no-repeat, #071b34;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 510px;
  color: #fff;
  margin-bottom: 0;
  padding: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg,rgba(7,27,52,0.97),rgba(3, 48, 95, 0.76) 53%,rgba(7,27,52,0.47) 100%);
  z-index: 1;
}
.hero-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 500px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.hero-content {
  padding: 90px 0 90px 0;
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 420px;
  position: relative;
  z-index: 2;
}
.hero-tag.tag {
  display: inline-block;
  font-size: 15px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #161616;
  background: #ffeb85;
  padding: 9px 17px;
  border-radius: 999px;
  margin-bottom: 19px;
  box-shadow: 0 2px 7px rgba(255,183,3,0.10);
}
.fade-up {}
.hero-content h1 {
  font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
  font-size: clamp(46px, 8vw, 76px);
  font-weight: 700;
  line-height: 1.021;
  letter-spacing: -1.5px;
  margin: 12px 0 26px 0;
  color: #fff;
  text-shadow: 0 2px 38px rgba(31,31,53,0.12);
}
.hero-content .lead {
  color: #eafafc;
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 28px;
  font-family: 'Inter', Arial, sans-serif;
  max-width: 490px;
}
.hero .search-bar {
  display: flex;
  width: 100%;
  max-width: 460px;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(7,27,52,0.14);
  background: #fff;
  border: 2px solid #fff;
  margin-bottom: 0;
  margin-top: 7px;
}
.search-bar input[type="text"],.search-bar input[type="search"],.search-bar input {
  flex: 1 1 0;
  font-size: 19px;
  border: none;
  background: none;
  color: #232a2c;
  padding: 21px 19px;
  font-family: 'Inter', Arial, sans-serif;
  outline: none;
  font-weight: 500;
}
.search-bar input::placeholder {
  color: #a0a7b9;
  font-weight: 400;
  opacity: 1;
}
.search-bar button.btn {
  border-radius: 0;
  min-width: 105px;
  font-size: 18px;
  font-weight: 800;
  background: #18181b;
  color: #fff;
  border: none;
  padding: 0 21px;
  transition: background 0.15s, color 0.15s;
  text-shadow: none;
  height: auto;
  box-shadow: none;
  font-family: 'Space Grotesk', Arial, sans-serif;
}
.search-bar button.btn.btn-dark:hover {
  background: #302c36;
  color: #ffb703;
}
.bee-float {
  position: absolute;
  right: 36px;
  top: 44px;
  font-size: 70px;
  z-index: 3;
  animation: bee-buzz 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 16px rgba(31,27,30,0.14));
  pointer-events: none;
  user-select: none;
}
@keyframes bee-buzz {
  from { transform: translateY(0px) rotate(8deg); }
  35% { transform: translateY(-8px) rotate(18deg); }
  75% { transform: translateY(10px) rotate(-15deg); }
  to { transform: translateY(2px) rotate(3deg); }
}
@media (max-width: 960px) {
  .hero-content-wrapper {
    flex-direction: column;
    min-height: 400px;
  }
  .bee-float {
    right: 6vw;
    top: 34px;
    font-size: 48px;
  }
  .hero-content {
    padding: 65px 0 55px 0;
  }
}
@media (max-width: 600px) {
  .hero {
    min-height: 362px;
    height: auto;
    padding-bottom: 0;
  }
  .hero-content {
    max-width: 100%;
    padding: 33px 0 24px 0;
  }
  .hero-content h1 {
    font-size: 28px;
    line-height: 1.12;
  }
  .hero-content .lead {
    font-size: 15px;
    margin-bottom: 19px;
    max-width: 100%;
  }
  .search-bar {
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    box-shadow: 0 3px 18px rgba(7,27,52,0.13);
  }
  .search-bar input {
    padding: 13px 11px;
    font-size: 16px;
    min-width: 0;
  }
  .search-bar button.btn {
    font-size: 15px;
    width: 100%;
    padding: 10px 0;
    border-radius: 0 0 12px 12px;
    margin: 0;
  }
  .bee-float {
    font-size: 33px;
    right: 14px;
    top: 11px;
  }
  .hero-tag.tag {
    font-size: 12px;
    padding: 7px 13px;
  }
}
/* === End new_design hero conversion === */