/* H5 commercial directory palette shared by the public and member views. */
:root {
  --blue: #0052d9;
  --orange: #d95400;
  --muted: #647286;
  --line: #e4eaf2;
  --mobile-ink: #18283e;
  --mobile-wash: #edf4ff;
  --mobile-shadow: 0 2px 8px #19385e0b;
  color: var(--mobile-ink);
  background: #f4f6f9;
}

.mobile-icon-library { position: absolute; overflow: hidden; pointer-events: none; }
.mobile-header { border-bottom-color: #e4e9f3; box-shadow: var(--mobile-shadow); }
.mobile-header .header-action { background: #fff; border-color: #e4ebf5; color: #2d4d75; }
.mobile-header .mobile-activity-menu summary { background: var(--mobile-wash); color: #0648b3; }
.mobile-header .mobile-activity-menu[open] summary { border-color: #afc8f0; background: #dceaff; }
.mobile-activity-panel { box-shadow: 0 12px 34px #142a502e; }
.mobile-activity-menu .service-link { color: #284465; }
.mobile-activity-menu .service-link:active, .mobile-header .header-action:active { background: #dceaff; }
.search-form {
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 4px;
  border: 1px solid #e2eafa;
  border-radius: 10px;
  background: #eef2fa;
}
.search-form > svg { width: 17px; height: 17px; margin-left: 7px; flex: 0 0 auto; color: #62789a; }
.search-form input { padding-inline: 4px; }
.search-form button { min-height: 38px; }
.home-hero {
  min-height: 170px;
  margin-top: 12px;
  padding: 20px 14px 14px;
  background: #063998;
  box-shadow: 0 8px 18px #0644a327;
}
.home-hero img { width: 74%; opacity: .65; mix-blend-mode: luminosity; }
.home-hero::after { background: linear-gradient(90deg, #083b98 5%, #084abdde 40%, #1046af15 100%); }
.hero-copy h1 { font-size: clamp(24px, 7vw, 34px); line-height: 1.25; }
.hero-actions { max-width: 420px; }
.hero-actions > a, .hero-actions > button { min-height: 44px; gap: 5px; padding-inline: 6px; }
.hero-actions svg, .deal-ticker svg { width: 16px; height: 16px; flex: 0 0 auto; }
.quick-filters { padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.quick-filters strong { color: var(--muted); font-weight: 650; }
.quick-filters a { display: inline-flex; align-items: center; min-height: 32px; background: #f3f6fb; }
.mobile-home-activities .service-grid { padding: 10px 6px; border-color: var(--line); box-shadow: var(--mobile-shadow); }
.deal-ticker { min-height: 38px; border: 1px solid #eceff5; }
.deal-ticker > strong { display: inline-flex; align-items: center; gap: 4px; }

.mobile-company-list-page .company-filter { padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--mobile-shadow); }
.filter-bar > :is(select, button) { min-height: 44px; font-size: 13px; }
.filter-bar button { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.filter-bar svg, .filter-sheet > header svg { width: 17px; height: 17px; flex: 0 0 auto; }
.list-toolbar { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.list-toolbar select { min-height: 40px; }
.filter-sheet { max-height: 88dvh; border-radius: 18px 18px 0 0; }
.filter-sheet > header { padding: 10px 16px; }
.filter-sheet > header > button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 9px;
  background: #f2f5fb;
  color: #385276;
}
.filter-sheet-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-sheet-body select, .filter-sheet-body input { min-height: 44px; }
.filter-sheet > footer { background: #f8faff; }

.company-card, .news-card { border-color: var(--line); border-radius: 12px; box-shadow: var(--mobile-shadow); }
.company-card h3 { color: var(--mobile-ink); }
.company-card .card-tags > span { font-size: 11px; }
.company-card .sale-status { color: #004caf; }
.company-card .sale-status::before { content: ""; display: inline-block; vertical-align: 2px; width: 5px; height: 5px; margin-right: 4px; background: currentColor; border-radius: 50%; }
.company-card .company-meta { color: #61728a; font-size: 12px; }
.card-bottom :is(.consult, .detail-link) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 8px; border-radius: 6px; font-weight: 650; white-space: nowrap; }
.card-bottom .consult { border-color: #e4ebf6; background: #edf2fa; color: #3f5677; }
.card-bottom .detail-link { background: var(--blue); color: #fff; }
.card-bottom small { color: #61728a; }
.card-bottom .price { overflow-wrap: anywhere; }

.company-detail-page .detail-hero { border-color: #dce8fa; background: linear-gradient(160deg, #eff5ff, #fff 76%); box-shadow: var(--mobile-shadow); }
.detail-company-number { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.detail-company-number button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; border: 0; padding-inline: 7px; color: #1755a9; background: transparent; border-radius: 6px; }
.detail-company-number svg { width: 15px; height: 15px; }
.detail-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); margin: 5px 0 12px; padding: 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.detail-overview > div { padding: 0 7px; min-width: 0; }
.detail-overview > div + div { border-left: 1px solid var(--line); }
.detail-overview span { display: block; color: var(--muted); font-size: 11px; }
.detail-overview strong { display: block; margin: 3px 0 0; line-height: 1.35; overflow-wrap: anywhere; }
.detail-overview .price { font-size: clamp(16px, 5.6vw, 25px); }
.detail-tabs { padding: 2px 7px; border: 1px solid var(--line); box-shadow: var(--mobile-shadow); }
.detail-tabs a { display: flex; align-items: center; min-height: 44px; font-weight: 650; }
.dossier h2 { display: flex; align-items: center; gap: 7px; color: #17345f; scroll-margin-top: 10px; }
.dossier h2 svg { width: 18px; height: 18px; color: #1d62c3; }
.dossier dl > div { margin-block: 0; padding-block: 8px; border-top: 1px solid #eef2f8; }
.dossier dt { color: #586d89; }
.company-scope { border-top: 1px solid var(--line); }
.company-scope summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; color: #1755a9; font-weight: 650; cursor: pointer; }
.company-scope summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 4px; }
.company-scope[open] summary::after { transform: rotate(225deg); }
.company-scope p { white-space: pre-line; overflow-wrap: anywhere; color: #435874; padding-bottom: 9px; }
.detail-consult-bar > :is(a, button) { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; }
.detail-consult-bar > a { min-width: 44px; border-radius: 8px; background: var(--mobile-wash); color: var(--blue); }
.detail-consult-bar > button { flex: 1; }
.detail-consult-bar svg { width: 20px; height: 20px; }

.mobile-news-heading { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid #dce7f9; border-radius: 12px; background: linear-gradient(105deg, #eaf2ff, #fff); }
.mobile-news-heading > span, .contact-sheet-heading > span { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 11px; background: #e2edff; color: #1455b3; }
.mobile-news-heading svg, .contact-sheet-heading svg { width: 22px; height: 22px; }
.mobile-news-heading h1 { font-size: 20px; }
.mobile-news-heading p, .contact-sheet-heading p { color: var(--muted); font-size: 12px; }
.news-card { position: relative; padding-right: 29px; }
.news-card h3 { font-size: 15px; line-height: 1.45; }
.news-card p { color: #53677e; }
.news-card-arrow { position: absolute; right: 9px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: #51739f; }
.article-detail { border-color: var(--line); box-shadow: var(--mobile-shadow); }
.article-summary { background: #eef4ff; color: #425e82; }
.article-detail .rich-content { color: #273952; }

.contact-service-dialog { max-height: 86dvh; overflow-y: auto; border: 1px solid #e2e9f5; box-shadow: 0 -10px 35px #112a4e29; }
.contact-service-dialog .contact-service-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #4a6080; }
.contact-service-close svg { width: 19px; height: 19px; }
.contact-sheet-heading { display: flex; align-items: center; gap: 10px; padding-right: 48px; margin: 0 0 15px; }
.contact-service-dialog .contact-sheet-heading h2 { margin: 0 0 2px; }
.contact-sheet-phone { display: grid; gap: 4px; color: #304b70; font-weight: 650; }
.contact-sheet-phone > span:nth-child(2) { display: flex; align-items: center; gap: 8px; padding-inline: 9px; border: 1px solid #d9e5f8; border-radius: 8px; background: #f8faff; }
.contact-sheet-phone > span:nth-child(2):focus-within { outline: 2px solid #87b3f5; }
.contact-sheet-phone svg, .contact-privacy-note svg, .sheet-hotline svg { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: middle; color: #426ea5; }
.contact-sheet-phone input { width: 100%; min-height: 46px; padding-inline: 0; border: 0; background: transparent; font-weight: 400; outline: 0; }
.contact-sheet-phone input:focus { outline: 0; }
.contact-service-dialog .lead-type-option span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.contact-service-dialog .sheet-hotline { min-height: 44px; }

.auth-page .auth-heading { margin-bottom: 12px; padding: 17px 12px 20px; border: 1px solid #dce7f8; border-radius: 14px; background: radial-gradient(ellipse at top right, #ddeaff, transparent 74%), #f5f8ff; }
.auth-page .auth-heading--compact { padding-inline: 15px; }
.auth-page .auth-emblem { background: linear-gradient(140deg, #0754d6, #073987); }
.auth-page .auth-tab { min-height: 44px; }
.auth-page :is(input:not([type=checkbox]):not([type=hidden]), .auth-submit) { min-height: 48px; }
.mobile-password-control { position: relative; margin-bottom: 13px; }
.auth-form .mobile-password-control > label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.auth-form .mobile-password-control input { padding-right: 53px; }
.mobile-password-control > button { position: absolute; right: 2px; bottom: 0; min-width: 46px; min-height: 44px; padding: 0 5px; border-radius: 7px; background: transparent; color: #1858aa; font-weight: 650; }
.policy-page { border: 1px solid var(--line); border-radius: 12px; }
.member-page-titlebar { margin-bottom: 13px; }
.member-back { min-height: 44px; color: #47658d; }
.member-dashboard-main .member-identity { background: linear-gradient(112deg, #0b3478, #0954c1); }
.member-dashboard-main .member-wallet { box-shadow: var(--mobile-shadow); }
.member-dashboard-main .member-order-shortcuts a, .member-dashboard-main .member-wallet nav a { min-height: 44px; }
.member-link-group .member-link-icon { width: 19px; height: 19px; flex: 0 0 auto; color: #2763b7; }
.member-page :is(.member-finance-card, .member-content-surface, .member-profile-panel, .member-order-card, .member-record-card) {
  border-color: var(--line);
  box-shadow: var(--mobile-shadow);
}
.member-page :is(.member-finance-section-head, .member-section-head, .member-panel-head) :is(h1, h2, strong) { color: #1b365e; }
.member-page :is(.member-primary-button, .member-ghost-button, .member-danger-button, .member-order-role-tabs a) { min-height: 44px; }
.member-page :is(.member-finance-form, .member-form-compact) :is(input:not([type=checkbox]):not([type=hidden]), select, textarea) { min-height: 44px; }
.member-page :is(.member-empty, .member-finance-empty) { color: #5a6f89; background: #f3f7fc; border-radius: 8px; }
.member-page .member-order-filter { grid-template-columns: minmax(0, 1fr) auto; }
.member-order-status-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.member-order-status-options label { position: relative; }
.member-order-status-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.member-order-status-options label span { display: flex; align-items: center; min-height: 44px; padding: 0 7px; border-radius: 6px; color: #496080; font-size: 12px; white-space: nowrap; }
.member-order-status-options input:checked + span { background: var(--mobile-wash); color: #0754be; font-weight: 750; }
.member-order-status-options input:focus-visible + span { outline: 2px solid #367cde; outline-offset: -2px; }
.member-order-empty { display: grid; justify-items: center; gap: 5px; padding: 26px 16px; border: 1px dashed #d9e4f4; border-radius: 12px; background: #fff; color: var(--muted); }
.member-order-empty svg { width: 30px; height: 30px; color: #5486c8; }
.member-order-empty strong { color: var(--mobile-ink); }
.member-order-empty span { font-size: 12px; }
.member-status[data-order-state="Unpaid"] { color: #92501d; background: #fff1e5; }
.member-status[data-order-state="Completed"] { color: #0a704d; background: #e9f8f0; }
.member-status[data-order-state="Closed"] { color: #52657f; background: #edf1f5; }

:is(.mobile-header, .mobile-page, .contact-service-dialog) :is(a, button, summary):focus-visible { outline: 2px solid #367cde; outline-offset: 2px; }