/* ErrachidiaSite — selected direction 3: clear, bright blue marketplace. */
:root {
  --brand: #155eef;
  --brand-2: #3478ff;
  --brand-soft: #eaf1ff;
  --navy: #142443;
  --navy-2: #23385e;
  --v28-blue: #155eef;
  --v28-blue-dark: #104bc7;
  --v28-blue-soft: #eaf1ff;
  --os17-blue: #155eef;
  --os17-blue-dark: #104bc7;
  --os17-line: #e3eaf5;
  --os17-bg: #f4f7fc;
  --os17-text: #172743;
  --os17-muted: #68768b;
}

body {
  color: #172743;
  background: #f6f8fc;
}

.premium-header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e6ecf5;
  box-shadow: 0 5px 20px rgba(24, 49, 91, .045);
}

.category-strip {
  background: #f7f9fd;
  border-top: 1px solid #eef2f8;
  border-bottom-color: #e6ecf5;
}

.desktop-nav a:hover,
.desktop-nav a.active,
.nav-pill:hover,
.login-link:hover {
  color: #155eef;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #86aef8;
  box-shadow: 0 0 0 4px rgba(21, 94, 239, .11);
}

/* Homepage hero: live regional image, clear search, and legible copy. */
body.page-home main {
  background: linear-gradient(180deg, #f3f7ff 0, #fff 48%, #f6f8fc 100%);
}

@media (min-width: 981px) {
  body.page-home .os-home-hero {
    position: relative !important;
    isolation: isolate;
    display: block !important;
    min-height: 405px !important;
    padding: 38px 0 58px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(110deg, #f5f8ff 0%, #eef4ff 56%, #e8f0ff 100%) !important;
    box-shadow: none !important;
  }

  body.page-home .os-home-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-start: -140px;
    top: -190px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(21, 94, 239, .045);
  }

  body.page-home .os-home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0 72px;
    inset-inline-end: 0;
    width: 51%;
    border-start-start-radius: 190px;
    border-end-start-radius: 190px;
    background-image: linear-gradient(110deg, rgba(17, 51, 112, .10), rgba(14, 54, 126, .02)), var(--home-hero-image, url("img/region/ziz-oasis.png"));
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 42px rgba(18, 43, 88, .16);
  }

  body.page-home .os-home-hero > .container {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 24px 42px;
    width: min(100% - 64px, 1260px) !important;
  }

  body.page-home .os-mobile-home-copy {
    grid-column: 1;
    grid-row: 1;
    display: block !important;
    max-width: 560px;
    margin: 0 !important;
    color: #142443 !important;
    text-align: start !important;
  }

  body.page-home .os-mobile-home-copy > span {
    display: inline-flex !important;
    align-items: center;
    min-height: 29px;
    padding: 4px 12px;
    border: 1px solid #d9e6ff;
    border-radius: 999px;
    background: #fff;
    color: #155eef;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .045em;
  }

  body.page-home .os-mobile-home-copy h1 {
    max-width: 540px;
    margin: 15px 0 9px !important;
    color: #142443 !important;
    font-size: clamp(35px, 3.3vw, 48px) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
  }

  body.page-home .os-mobile-home-copy p {
    max-width: 520px;
    margin: 0 !important;
    color: #5d6f89 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  body.page-home .os-home-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    min-height: 70px !important;
    grid-template-columns: minmax(155px, 1.05fr) minmax(140px, .9fr) minmax(175px, 1fr) minmax(180px, 1.35fr) 120px !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(219, 229, 246, .95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 16px 40px rgba(24, 49, 91, .13) !important;
  }

  body.page-home .os-home-search label {
    min-height: 52px !important;
    padding-inline: 11px !important;
    border-inline-end: 1px solid #edf1f7 !important;
  }

  body.page-home .os-home-search label .ui-icon {
    color: #4279df !important;
  }

  body.page-home .os-home-search select,
  body.page-home .os-home-search input {
    min-width: 0;
    color: #263852 !important;
    font-size: 12px !important;
  }

  body.page-home .os-home-search .os-search-button {
    min-height: 52px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #3478ff, #155eef) !important;
    box-shadow: 0 7px 18px rgba(21, 94, 239, .18);
  }

  body.page-home .os-home-categories {
    padding: 34px 0 25px !important;
  }

  body.page-home .os-home-categories > .container,
  body.page-home .os-market-row-section > .container,
  body.page-home .home-city-hubs > .container,
  body.page-home .home-popular-searches > .container {
    width: min(100% - 64px, 1260px) !important;
  }

  body.page-home .os-section-title h1,
  body.page-home .os-section-title h2,
  body.page-home .os-row-head h2 {
    color: #142443 !important;
    letter-spacing: -.025em;
  }

  body.page-home .os-category-grid {
    gap: 14px !important;
  }

  body.page-home .os-category-grid > a {
    min-height: 152px !important;
    border: 1px solid #e1e9f6 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 7px 21px rgba(24, 49, 91, .055) !important;
  }

  body.page-home .os-category-grid > a:hover {
    transform: translateY(-3px);
    border-color: #bfd2fb !important;
    box-shadow: 0 13px 27px rgba(21, 72, 164, .11) !important;
  }

  body.page-home .os-cat-icon,
  body.page-home .os-cat-icon.rent,
  body.page-home .os-cat-icon.property,
  body.page-home .os-cat-icon.property-rent {
    background: #eaf1ff !important;
    color: #155eef !important;
  }

  body.page-home .os-market-row-section {
    padding: 30px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.page-home .os-market-row-section.os-latest-section {
    border-block: 1px solid #e6ecf5 !important;
    border-radius: 25px !important;
    background: #f0f5ff !important;
  }

  body.page-home .os-home-listings .card {
    border: 1px solid #e1e8f3 !important;
    border-radius: 17px !important;
    box-shadow: 0 6px 19px rgba(24, 49, 91, .055) !important;
  }

  body.page-home .os-home-listings .card .price,
  body.page-home .os-home-listings .os-card-body-price {
    color: #155eef !important;
  }

  body.page-home .home-city-grid a {
    border-color: #e1e9f6 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 16px rgba(24, 49, 91, .04);
  }

  body.page-home .home-city-grid a > span {
    background: #eaf1ff !important;
    color: #155eef !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  body.page-home .os-home-hero {
    position: relative !important;
    display: block !important;
    min-height: 365px !important;
    padding: 34px 0 46px !important;
    border: 0 !important;
    background: linear-gradient(115deg, #f4f8ff, #eaf1ff) !important;
  }

  body.page-home .os-home-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block: 0 82px;
    inset-inline-end: 0;
    width: 48%;
    border-start-start-radius: 120px;
    border-end-start-radius: 120px;
    background: var(--home-hero-image, url("img/region/ziz-oasis.png")) center / cover no-repeat;
    box-shadow: 0 12px 32px rgba(18, 43, 88, .13);
  }

  body.page-home .os-home-hero > .container {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 22px;
    width: min(100% - 42px, 920px) !important;
  }

  body.page-home .os-mobile-home-copy {
    grid-column: 1;
    display: block !important;
    margin: 0 !important;
    color: #142443 !important;
    text-align: start !important;
  }

  body.page-home .os-mobile-home-copy h1 {
    color: #142443 !important;
    text-shadow: none !important;
    font-size: 32px !important;
  }

  body.page-home .os-mobile-home-copy p {
    color: #5d6f89 !important;
  }

  body.page-home .os-home-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none !important;
    grid-template-columns: minmax(125px, 1fr) minmax(125px, 1fr) minmax(150px, 1.3fr) 52px !important;
    gap: 4px !important;
    padding: 7px !important;
    border: 1px solid #dce6f7 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(24, 49, 91, .11) !important;
  }

  body.page-home .os-home-search .os-provider-select {
    display: none !important;
  }

  body.page-home .os-home-search .os-search-button {
    border-radius: 11px !important;
  }
}

@media (max-width: 700px) {
  body.page-home .os-home-hero {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 224px !important;
    padding: 22px 0 21px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 0 22px 22px !important;
    background-color: #142443 !important;
    background-image: linear-gradient(180deg, rgba(8, 28, 69, .10) 0%, rgba(11, 39, 89, .61) 53%, rgba(11, 39, 89, .88) 100%), var(--home-hero-image, url("img/region/ziz-oasis.png")) !important;
    background-position: center 48% !important;
    background-size: cover !important;
    box-shadow: 0 12px 26px rgba(18, 43, 88, .13) !important;
  }

  body.page-home .os-home-hero::before,
  body.page-home .os-home-hero::after {
    display: none !important;
  }

  body.page-home .os-home-hero > .container {
    position: relative;
    z-index: 1;
    display: block !important;
    width: min(100% - 32px, 560px) !important;
  }

  body.page-home .os-mobile-home-copy {
    display: block !important;
    margin: 0 0 2px !important;
    color: #fff !important;
    text-align: start !important;
  }

  body.page-home .os-mobile-home-copy > span {
    display: inline-flex !important;
    align-items: center;
    min-height: 27px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #f0f5ff;
    font-size: 10px;
    font-weight: 850;
    backdrop-filter: blur(8px);
  }

  body.page-home .os-mobile-home-copy h1 {
    margin: 10px 0 4px !important;
    color: #fff !important;
    font-size: clamp(23px, 6vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.28 !important;
    letter-spacing: -.025em !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .17) !important;
  }

  body.page-home .os-mobile-home-copy p {
    max-width: 420px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .9) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* The header keeps the compact phone search, so avoid showing a second form. */
  body.page-home .os-home-search {
    display: none !important;
  }

  body.page-home .os-home-categories {
    padding-top: 20px !important;
  }

  body.page-home .os-home-listings .card {
    border-color: #e1e8f3 !important;
    border-radius: 15px !important;
  }

  body.page-home .os-home-listings .card .price,
  body.page-home .os-home-listings .os-card-body-price {
    color: #155eef !important;
  }
}

/* Guided publish hub — the first step routes each section into its existing flow. */
.publish-center {
  padding-block: 34px 48px;
  background: linear-gradient(180deg, #f3f7ff 0, #fff 65%, #f7f9fd 100%);
}

.publish-center-layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  width: min(100% - 48px, 1240px);
}

.publish-stepper {
  position: sticky;
  top: 104px;
  padding: 20px 15px;
  border: 1px solid #e1e9f6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(24, 49, 91, .055);
}

.publish-stepper ol {
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publish-stepper ol::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  inset-inline-start: 19px;
  width: 2px;
  background: #e2eaf8;
}

.publish-stepper li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 8px 9px;
  border-radius: 14px;
  color: #697a94;
}

.publish-stepper li > span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #d5dfef;
  border-radius: 50%;
  background: #fff;
  color: #72829a;
  font-size: 13px;
  font-weight: 900;
}

.publish-stepper li.active {
  background: #edf4ff;
  color: #155eef;
}

.publish-stepper li.active > span {
  border-color: #155eef;
  background: #155eef;
  color: #fff;
  box-shadow: 0 5px 13px rgba(21, 94, 239, .22);
}

.publish-stepper li.complete > span {
  border-color: #bfd4fd;
  background: #eaf1ff;
  color: #155eef;
}

.publish-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 13px;
  color: #155eef;
  font-size: 11px;
  font-weight: 850;
}

.publish-back-link .ui-icon {
  width: 14px;
  height: 14px;
}

.publish-activity-form {
  padding: clamp(16px, 2.5vw, 25px);
  border: 1px solid #dfe8f6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(24, 49, 91, .055);
}

.publish-form-intro {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf1f7;
}

.publish-form-intro > span {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eaf1ff;
  color: #155eef;
}

.publish-form-intro .ui-icon {
  width: 19px;
  height: 19px;
}

.publish-form-intro b,
.publish-form-intro small {
  display: block;
}

.publish-form-intro b {
  color: #203b62;
  font-size: 13px;
}

.publish-form-intro small {
  margin-top: 2px;
  color: #71819a;
  font-size: 10px;
}

.publish-activity-fields {
  gap: 14px;
}

.publish-activity-fields [hidden] {
  display: none !important;
}

.publish-business-media,
.publish-business-links,
.publish-business-location,
.publish-subscription-options {
  padding: 16px;
  border: 1px solid #e5ebf4;
  border-radius: 15px;
  background: #fbfcff;
}

.publish-business-media,
.publish-plan-grid,
.publish-social-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.publish-business-upload small,
.publish-map-actions small,
.publish-subscription-note {
  display: block;
  margin-top: 7px;
  color: #71819a;
  font-size: 11px;
  line-height: 1.6;
}

.publish-business-upload input[type="file"] {
  min-height: 40px;
  padding: 7px;
  background: #fff;
}

.publish-current-image,
.publish-current-gallery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.publish-current-image img {
  width: 150px;
  height: 95px;
  object-fit: cover;
  border-radius: 10px;
}

.publish-current-gallery img {
  width: 72px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
}

.publish-current-image label,
.publish-current-gallery label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #697a92;
  font-size: 11px;
}

.publish-business-links h3,
.publish-subscription-options h3 {
  margin: 0 0 12px;
  color: #243b5a;
  font-size: 14px;
}

.publish-social-fields {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.publish-business-location .publish-map-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.publish-business-location .publish-map-actions small {
  margin: 0;
}

.publish-activity-map {
  z-index: 0;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #eef3f8;
}

.publish-plan-grid {
  margin-top: 12px;
}

.publish-plan-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.publish-plan-card:has(input:checked) {
  border-color: #1674d1;
  box-shadow: 0 0 0 2px #1674d11c;
}

.publish-plan-card > span {
  display: grid;
  gap: 3px;
}

.publish-plan-card b,
.publish-plan-card strong {
  color: #18375f;
}

.publish-plan-card strong {
  font-size: 19px;
}

.publish-plan-card small {
  color: #71819a;
  font-size: 11px;
}

.publish-admin-profile-status select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dce5f2;
  border-radius: 11px;
  background: #fbfcff;
  color: #263852;
  font: inherit;
}

.admin-business-thumb {
  display: block;
  width: 86px;
  height: 58px;
  margin-bottom: 7px;
  border-radius: 8px;
  object-fit: cover;
}

.admin-business-profiles-panel .admin-row-actions {
  min-width: 150px;
}

.admin-business-profiles-panel .table td {
  vertical-align: top;
}

.standalone-business-card-image {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  object-fit: cover;
}

.standalone-business-hero-image {
  display: block;
  width: 100%;
  max-height: 380px;
  margin-bottom: 16px;
  border-radius: 14px;
  object-fit: cover;
}

.standalone-business-hours {
  margin: 10px 0 0;
  color: #345847;
  font-size: 12px;
}

.standalone-business-map-link,
.standalone-business-links a {
  display: inline-flex;
  margin: 10px 8px 0 0;
  color: #087b5a;
  font-size: 12px;
  font-weight: 800;
}

.standalone-business-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.standalone-business-gallery img {
  width: 100%;
  height: 90px;
  border-radius: 9px;
  object-fit: cover;
}

.standalone-business-contact {
  flex-wrap: wrap;
}

.business-whatsapp-link {
  color: #087b5a;
  font-weight: 900;
}

.standalone-business-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
}

.publish-activity-fields .label {
  display: block;
  margin-bottom: 6px;
  color: #334a69;
  font-size: 11px;
  font-weight: 850;
}

.publish-activity-fields input,
.publish-activity-fields select,
.publish-activity-fields textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dce5f2;
  border-radius: 11px;
  background: #fbfcff;
  color: #263852;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.publish-activity-fields textarea {
  min-height: 112px;
  resize: vertical;
}

.publish-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 2px;
  padding-top: 15px;
  border-top: 1px solid #edf1f7;
}

.publish-form-footer > small {
  max-width: 430px;
  color: #71819a;
  font-size: 10px;
  line-height: 1.6;
}

.publish-form-footer .btn {
  flex: 0 0 auto;
  min-height: 43px;
  padding-inline: 16px;
  border-radius: 11px;
}

.publish-stepper li b,
.publish-stepper li small {
  display: block;
}

.publish-stepper li b {
  color: #172743;
  font-size: 13px;
  font-weight: 850;
}

.publish-stepper li.active b {
  color: #155eef;
}

.publish-stepper li small {
  margin-top: 2px;
  color: #7a889d;
  font-size: 10px;
  line-height: 1.45;
}

.publish-stepper-note {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 1px 9px;
  margin-top: 17px;
  padding: 13px 11px;
  border: 1px solid #dfeafb;
  border-radius: 14px;
  background: #f5f8ff;
}

.publish-stepper-note > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #e6efff;
  color: #155eef;
}

.publish-stepper-note .ui-icon {
  width: 16px;
  height: 16px;
}

.publish-stepper-note b {
  color: #294365;
  font-size: 11px;
}

.publish-stepper-note small {
  color: #71819a;
  font-size: 9px;
  line-height: 1.45;
}

.publish-center-main {
  min-width: 0;
}

.publish-center-heading {
  margin: 1px 0 21px;
}

.publish-center-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid #d9e6ff;
  border-radius: 999px;
  background: #fff;
  color: #2468e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .045em;
}

.publish-center-eyebrow .ui-icon {
  width: 14px;
  height: 14px;
}

.publish-center-heading h1 {
  margin: 13px 0 5px;
  color: #142443;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.035em;
}

.publish-center-heading p {
  margin: 0;
  color: #687a94;
  font-size: 14px;
  line-height: 1.7;
}

.publish-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.publish-choice-card {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 174px;
  overflow: hidden;
  border: 1px solid #dfe8f6;
  border-radius: 17px;
  background: #fff;
  color: #172743;
  box-shadow: 0 6px 18px rgba(24, 49, 91, .045);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.publish-choice-card:hover {
  transform: translateY(-2px);
  border-color: #a9c5fb;
  color: #172743;
  box-shadow: 0 13px 27px rgba(21, 72, 164, .11);
}

.publish-choice-card:focus-visible,
.publish-choice-actions a:focus-visible,
.publish-help-panel a:focus-visible,
.create-back-to-hub:focus-visible {
  outline: 3px solid rgba(21, 94, 239, .45);
  outline-offset: 3px;
}

.create-back-to-hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: #155eef;
  font-size: 12px;
  font-weight: 850;
}

.create-back-to-hub .ui-icon {
  width: 15px;
  height: 15px;
}

.publish-choice-image {
  flex: 0 0 39%;
  align-self: center;
  aspect-ratio: 1;
  margin: 10px;
  border-radius: 13px;
  background-image: url("img/publish-categories.png");
  background-repeat: no-repeat;
  background-size: auto 200%;
  background-position: 16.6% 0%;
}

.publish-choice-property .publish-choice-image {
  background-position: 83.4% 0%;
}

.publish-choice-jobs .publish-choice-image {
  background-position: 16.6% 100%;
}

.publish-choice-services .publish-choice-image {
  background-position: 83.4% 100%;
}

.publish-choice-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 16px 13px 15px 2px;
}

.publish-choice-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 11px;
  background: #eaf1ff;
  color: #155eef;
}

.publish-choice-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.publish-choice-copy > b {
  color: #142443;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.publish-choice-copy > small {
  margin-top: 3px;
  color: #6b7b94;
  font-size: 11px;
  line-height: 1.5;
}

.publish-choice-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: #155eef;
  font-size: 11px;
  font-weight: 900;
}

.publish-choice-link .ui-icon {
  width: 13px;
  height: 13px;
}

.publish-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.publish-choice-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid #dbe6fb;
  border-radius: 9px;
  background: #f5f8ff;
  color: #155eef;
  font-size: 9px;
  font-weight: 850;
  text-decoration: none;
}

.publish-choice-actions a:hover {
  border-color: #a9c5fb;
  background: #edf4ff;
}

.publish-help-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  padding: 14px 16px;
  border: 1px solid #dfeafb;
  border-radius: 16px;
  background: linear-gradient(110deg, #f1f6ff, #fbfdff);
}

.publish-help-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 13px;
  background: #e3edff;
  color: #155eef;
}

.publish-help-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.publish-help-panel b,
.publish-help-panel small {
  display: block;
}

.publish-help-panel b {
  color: #203b62;
  font-size: 12px;
}

.publish-help-panel small {
  margin-top: 3px;
  color: #71819a;
  font-size: 10px;
  line-height: 1.5;
}

.publish-help-panel .btn {
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .publish-center-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(100% - 36px, 820px);
  }

  .publish-stepper {
    position: static;
    padding: 11px;
  }

  .publish-stepper ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .publish-stepper ol::before {
    top: 19px;
    bottom: auto;
    inset-inline: 15%;
    width: auto;
    height: 2px;
  }

  .publish-stepper li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    min-height: 55px;
    padding: 6px;
  }

  .publish-stepper li > span {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .publish-stepper li b {
    font-size: 11px;
  }

  .publish-stepper li small {
    display: none;
  }

  .publish-stepper-note {
    display: none;
  }
}

@media (max-width: 620px) {
  .publish-center {
    padding-block: 18px 30px;
  }

  .publish-center-layout {
    width: min(100% - 26px, 520px);
    gap: 14px;
  }

  .publish-stepper {
    padding: 8px;
    border-radius: 15px;
  }

  .publish-stepper li {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 43px;
    padding: 4px;
  }

  .publish-stepper ol::before {
    top: 15px;
  }

  .publish-stepper li > span {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }

  .publish-stepper li b {
    font-size: 9px;
    line-height: 1.3;
  }

  .publish-center-heading {
    margin-bottom: 14px;
  }

  .publish-center-heading h1 {
    margin-top: 10px;
    font-size: 25px;
  }

  .publish-center-heading p {
    font-size: 12px;
  }

  .publish-choice-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .publish-choice-card {
    min-height: 142px;
    border-radius: 15px;
  }

  .publish-choice-image {
    flex-basis: 34%;
    margin: 8px;
    border-radius: 11px;
  }

  .publish-choice-copy {
    padding: 11px 10px 11px 0;
  }

  .publish-choice-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
  }

  .publish-choice-copy > b {
    font-size: 15px;
  }

  .publish-choice-copy > small {
    font-size: 10px;
  }

  .publish-choice-link {
    margin-top: 7px;
    font-size: 10px;
  }

  .publish-choice-actions {
    margin-top: 7px;
  }

  .publish-choice-actions a {
    min-height: 27px;
    font-size: 8.5px;
  }

  .publish-help-panel {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .publish-help-icon {
    width: 34px;
    height: 34px;
  }

  .publish-help-panel .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .publish-activity-form {
    padding: 14px;
    border-radius: 16px;
  }

  .publish-activity-fields {
    gap: 10px;
  }

  .publish-activity-fields > div:not(.full) {
    grid-column: 1 / -1;
  }

  .publish-business-media,
  .publish-plan-grid,
  .publish-social-fields {
    grid-template-columns: 1fr;
  }

  .publish-activity-map {
    height: 240px;
  }

  .publish-form-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .publish-form-footer .btn {
    justify-content: center;
    width: 100%;
  }
}
.unified-plan-choices {
  margin: 0;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7fbff, #fff);
}

.unified-plan-choices legend {
  padding: 0 8px;
  color: #18375f;
  font-size: 15px;
  font-weight: 800;
}

.unified-plan-choices > p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.unified-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.unified-plan-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dce5f2;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.unified-plan-option:hover {
  transform: translateY(-1px);
  border-color: #8bb8e9;
}

.unified-plan-option:has(input:checked) {
  border-color: #1674d1;
  box-shadow: 0 0 0 3px #1674d11c;
}

.unified-plan-option > span {
  display: grid;
  gap: 4px;
}

.unified-plan-option b,
.unified-plan-option strong {
  color: #18375f;
}

.unified-plan-option strong {
  font-size: 20px;
}

.unified-plan-option small {
  color: #71819a;
  font-size: 11px;
}

.unified-plan-status {
  border-color: #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
}

@media (max-width: 640px) {
  .unified-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Public activity profile */
.business-detail-v8 { --profile-ink:#15294d; --profile-line:#dce6f5; }
.business-detail-v8 .standalone-business-detail { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr); gap:24px; align-items:start; }
.business-detail-v8 .standalone-business-main,
.business-detail-v8 .standalone-booking-card { border:1px solid var(--profile-line); border-radius:24px; background:#fff; box-shadow:0 12px 32px #15294d0d; padding:clamp(16px,3vw,30px); min-width:0; }
.business-detail-v8 .standalone-business-hero-image { display:block; width:100%; aspect-ratio:16/8; height:auto; object-fit:cover; border-radius:17px; margin-block-end:20px; }
.business-detail-v8 h1 { font-size:clamp(26px,4vw,42px); line-height:1.25; color:var(--profile-ink); overflow-wrap:anywhere; }
.business-detail-v8 .standalone-business-description,
.business-detail-v8 .standalone-business-contact { border-block-start:1px solid var(--profile-line); padding-block-start:16px; margin-block-start:20px; }
.business-detail-v8 h2 { color:var(--profile-ink); }
.business-detail-v8 .standalone-business-description h2,
.business-detail-v8 .business-gallery-title { font-size:18px; margin-block:0 10px; }
.business-detail-v8 svg { width:1.15em; height:1.15em; vertical-align:middle; flex:none; }
.business-detail-v8 .standalone-business-map-link,
.business-detail-v8 .standalone-business-links a,
.business-detail-v8 .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.business-detail-v8 .standalone-business-contact,
.business-detail-v8 .standalone-business-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.business-detail-v8 .standalone-business-contact > b { flex-basis:100%; }
.business-detail-v8 .business-whatsapp-link { background:#087647; color:#fff; border-color:#087647; }
.business-detail-v8 .standalone-business-map-link { padding-inline:14px; border-radius:12px; background:#eef5ff; }
.business-detail-v8 .business-book-jump { margin-block-start:14px; }
.business-detail-v8 .standalone-booking-card { scroll-margin-top:100px; }
.business-detail-v8 :focus-visible { outline:3px solid #155eef; outline-offset:3px; }
@media(max-width:800px) {
  .business-detail-v8 .standalone-business-detail { grid-template-columns:minmax(0,1fr); }
  .business-detail-v8 .business-book-jump { width:100%; }
}
.business-slider{position:relative;overflow:hidden;border-radius:18px;margin-bottom:20px;background:#eef5ff}
.business-slides{display:flex;direction:rtl;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.business-slides::-webkit-scrollbar{display:none}
.business-slides a{display:block;flex:0 0 100%;min-width:0;scroll-snap-align:start;aspect-ratio:16/9}
.business-slides img{display:block;width:100%;height:100%;object-fit:cover}
.business-slider button{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:white;color:#15294d;box-shadow:0 2px 12px #0003;display:grid;place-items:center;cursor:pointer}
.business-slider button:disabled{opacity:.45;cursor:default}
.business-slider [data-step="-1"]{right:12px}
.business-slider [data-step="1"]{left:12px}
.business-slide-count{position:absolute;bottom:12px;left:12px;background:#15294de6;color:white;padding:5px 12px;border-radius:30px;pointer-events:none}
.business-side-contact{border-top:1px solid var(--profile-line);margin-top:22px;padding-top:18px}
.business-detail-v8 .business-side-contact .standalone-business-contact{margin-top:0;padding-top:0;border:0}
.business-side-contact .standalone-business-links{margin-top:12px}
.business-detail-v8 .standalone-business-links .business-social-icon { width:44px; height:44px; padding:0; border:1px solid #dce6f5; border-radius:50%; background:#eef5ff; color:#155eef; } .business-detail-v8 .business-social-icon:hover { background:#155eef; color:#fff; } .business-detail-v8 .business-social-icon svg { width:21px; height:21px; }
.business-detail-v8 .business-sidebar-book{width:100%}
.business-sidebar-map{margin-block-start:20px}
.business-sidebar-map h2,.business-side-contact h2{font-size:18px}
.business-sidebar-map iframe{display:block;width:100%;height:210px;border:1px solid var(--profile-line);border-radius:14px;margin-block:10px}
#business-booking-dialog{box-sizing:border-box;width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:1px solid #dce6f5;border-radius:20px;background:white;color:#15294d;overflow:auto}
#business-booking-dialog::backdrop{background:#15294db3}
.business-dialog-close{display:flex;justify-content:flex-end;margin-block-end:8px}
#appointment-schedule { scroll-margin-top: 100px; }
.appointment-schedule-editor, .schedule-week-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); gap:14px; }
.appointment-schedule-editor > label, .schedule-week-grid > label { display:grid; gap:7px; align-content:start; }
.appointment-schedule-editor input { width:100%; min-width:0; }
.appointment-schedule-editor .schedule-week { grid-column:1/-1; min-width:0; margin:0; padding:14px; border:1px solid #dce6f5; border-radius:14px; background:#f7faff; }
.schedule-week legend { padding-inline:7px; font-weight:700; }
.schedule-week p { margin:0 0 12px; }
.appointment-schedule-editor > button { grid-column:1/-1; justify-self:start; }
.business-availability { margin-block:18px; }
.business-availability h2 { font-size:18px; }
.business-detail-v8 [data-slot-list] { display:flex; flex-wrap:wrap; gap:8px; margin-block-end:12px; }
.business-slot { display:inline-flex; align-items:center; min-height:38px; padding:6px 10px; border:1px solid currentColor; border-radius:10px; font-size:13px; }
.business-slot.is-available { background:#e8f8ef; color:#12643c; }
.business-slot.is-booked { background:#fff0ef; color:#9b242b; }
.business-slot.is-past,.business-slot.is-unavailable { background:#f1f3f6; color:#525a68; }
button.business-slot { cursor:pointer; }
.business-slot[aria-pressed="true"] { background:#12643c; color:white; }
.booking-week { margin-block:12px; }
.booking-week-nav { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px; margin-block-end:10px; }
.booking-week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.booking-week-days button { min-width:0; min-height:52px; padding:4px 2px; font:inherit; font-size:clamp(10px,2.5vw,13px); color:#15294d; border:1px solid #dce6f5; border-radius:9px; background:#f7faff; cursor:pointer; }
.booking-week-days button[aria-pressed="true"] { color:#fff; background:#155eef; border-color:#155eef; }
.booking-week-days button:disabled { opacity:.48; cursor:default; }