/* White cards and dialog with coordinated colored section accents. */
.directory { --background: #eaf4fc; }
.directory-list { --background: #4E97D2; }
.directory-list .directory-intro { max-width: none; }
.directory-list .directory-intro, .directory-list .results-heading { padding: 26px; border: 1px solid #d3e3f0; border-radius: 24px; background: #fff; box-shadow: 0 6px 20px rgba(31,76,112,.08); }
.directory-list .directory-intro h1 { font-family: Georgia, serif; color: #241333; letter-spacing: -.5px; }
.directory-list .search-panel { padding: 26px; border: 1px solid #d3e3f0; border-radius: 24px; background: #fff; box-shadow: 0 6px 20px rgba(31,76,112,.08); }
.directory-list .search-panel h2 { padding: 0; border: 0; background: none; color: #71329c; font-size: 22px; }
.directory-list .filter-field label { padding: 0; border: 0; background: none; color: #087c73; font-size: 16px; }
.directory-list .filter-field + .filter-field label { color: #1668ab; }
.directory-list .filter-field select { border-radius: 12px; border-color: #d3e3f0; }
.directory-list .search-panel .search-button { border-radius: 12px; background: #241333; border-color: #241333; }
.directory-list .search-panel .search-button:hover { background: #432653; }
.directory-list .filter-footer { padding-top: 16px; border-top: 1px solid #e8def3; }
.directory-list .filter-footer a { color: #71329c; }
.directory-list .results-heading h2 { font-family: Georgia, serif; color: #241333; }
.directory-list .results-heading p, .directory-list .directory-intro p { color: #40556a; }
.directory-list .results-order { padding: 6px 12px; background: #fff; border: 1px solid #d3e3f0; border-radius: 12px; color: #40556a; }
@media (max-width: 640px) {
    .directory-list .search-panel, .directory-list .directory-intro, .directory-list .results-heading { padding: 20px; }
}
.directory .compact-provider { cursor: pointer; padding: 22px; border: 1px solid #d3e3f0; border-radius: 24px; background: #ffffff; box-shadow: 0 6px 20px rgba(31,76,112,.08); }
.directory .compact-provider { border-top: 4px solid #5bb698; }
.directory .compact-provider:nth-child(4n+2) { border-top-color: #e8b158; }
.directory .compact-provider:nth-child(4n+3) { border-top-color: #dc82ac; }
.directory .compact-provider:nth-child(4n+4) { border-top-color: #6aa6d8; }
.directory-list .directory-intro { border-top: 4px solid #5bb698; }
.directory-list .search-panel { border-top: 4px solid #6aa6d8; }
.directory-list .results-heading { border-top: 4px solid #dc82ac; }
.compact-heading { display: flex; gap: 16px; align-items: flex-start; padding: 0; background: #ffffff; }
.compact-heading > div { min-width: 0; }
.compact-logo { flex: 0 0 64px; }
.compact-logo img { display: block; width: 64px; height: 64px; object-fit: contain; border: 2px solid var(--accent); border-radius: 50%; padding: 4px; background: #fff; }
.compact-heading h3 { margin: 6px 0 0; font: 600 20px/1.3 Georgia, serif; overflow-wrap: anywhere; color: #203b50; }
.compact-heading h3 a { text-decoration: none; }
.compact-location { margin: 0; font-size: 12px; color: #71329c; background: #f4eafa; border: 1px solid #e4cef4; border-radius: 12px; padding: 3px 9px; }
.compact-location i { color: #d83289; margin-right: 4px; }
.compact-services { margin: 22px 0; }
.compact-services h4 { display: inline-block; margin: 0 0 10px; padding: 3px 10px; color: #087c73; background: #ecfcf7; border: 1px solid #a9e5d9; border-radius: 6px; font-size: 13px; }
.compact-services p { margin: 0; color: #5d6378; font-size: 14px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.compact-bottom { margin-top: auto; }
.provider-social-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #c9dfef; border-radius: 12px; background: #fff; color: #24658e; text-decoration: none; font-size: 19px; }
.provider-social-icons a:hover { background: #e8f3fb; }
.compact-provider .provider-social-icons a { color: #852dc2; background: #faf4ff; border-color: #e2cafa; }
.compact-provider .provider-social-icons a:hover { background: #f0e3fc; }
.compact-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; font-size: 12px; color: #616174; }
.compact-rating .rating-stars { font-size: 22px; color: #8c7549; }
.compact-rating .rating-stars-fill { color: #b77908; }
.compact-rating > span:last-child { padding: 3px 8px; border-radius: 8px; background: #fff7e5; color: #805c16; }
.compact-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #dce8f1; padding-top: 16px; }
.compact-actions a { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; text-decoration: none; }
.directory .compact-whatsapp { background: #07865f; color: white; }
.directory .compact-details { background: #241333; color: white; }
.compact-actions a:hover { filter: brightness(1.15); }
.provider-dialog { width: min(820px, calc(100% - 32px)); height: min(880px, calc(100dvh - 40px)); max-height: calc(100% - 40px); padding: 0; border: 1px solid #c9dfef; border-radius: 24px; background: #ffffff; overflow: hidden; }
.provider-dialog::backdrop { background: rgba(27,59,83,.58); backdrop-filter: blur(5px); }
.provider-dialog-close { position: absolute; right: 12px; top: 10px; z-index: 2; width: 44px; height: 44px; border: 1px solid #c9dfef; border-radius: 50%; background: #fff; color: #24658e; font-size: 30px; cursor: pointer; }
.provider-dialog-frame { width: 100%; height: 100%; border: 0; background: #ffffff; }
.provider-dialog-frame[hidden] { display: none; }
.provider-dialog-status { padding: 72px 28px; }
.provider-dialog-open { overflow: hidden; }
.profile-embedded { background: #ffffff; --accent: #075b8f; }
.profile-embedded .directory-container { width: 100%; }
.profile-embedded .profile-hero { border: 0; border-radius: 0; padding: 28px 68px 24px 26px; background: #ffffff; gap: 18px; }
.profile-embedded .profile-logo { flex: 0 0 72px; }
.profile-embedded .profile-logo img { width: 72px; height: 72px; border: 2px solid var(--accent); border-radius: 50%; padding: 4px; background: #fff; }
.profile-embedded .profile-heading h1 { font: 600 28px/1.3 Georgia, serif; }
.profile-embedded .profile-layout { display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.profile-embedded .profile-main, .profile-embedded .profile-contact { width: 100%; }
.profile-embedded .profile-contact { order: 0; }
.profile-embedded .profile-section, .profile-embedded .profile-contact { border-color: #dce8f1; border-radius: 18px; }
.profile-embedded .profile-actions .search-button { background: #07865f; border-color: #07865f; }
@media (max-width: 600px) {
    .provider-dialog { width: calc(100% - 16px); max-height: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 18px; }
    .profile-embedded .profile-hero { flex-direction: row; align-items: flex-start; padding-left: 18px; }
    .profile-embedded .profile-heading h1 { font-size: 22px; }
    .profile-embedded .profile-layout { padding: 16px; }
}

/* Color marks each section while the modal surface stays white. */
.profile-embedded #about-title,
.profile-embedded #gallery-title,
.profile-embedded #location-title,
.profile-embedded #contact-title,
.profile-embedded .profile-social h3 { width: fit-content; max-width: 100%; padding: 7px 12px; border: 1px solid; border-radius: 10px; font-size: 17px; }
.profile-embedded #about-title { color: #087c73; background: #ecfcf7; border-color: #a9e5d9; }
.profile-embedded #gallery-title { color: #1668ab; background: #edf6ff; border-color: #c6dff6; }
.profile-embedded #location-title { color: #71329c; background: #f4eafa; border-color: #e4cef4; }
.profile-embedded #contact-title { color: #a62e68; background: #fff0f6; border-color: #f4cadd; }
.profile-embedded .profile-social h3 { color: #852dc2; background: #faf4ff; border-color: #e2cafa; }
.profile-embedded .profile-section h2 .profile-icon,
.profile-embedded .profile-contact h2 .profile-icon,
.profile-embedded .profile-social h3 .profile-icon { color: inherit; }
.profile-embedded .profile-city { width: fit-content; padding: 5px 10px; border: 1px solid #e4cef4; border-radius: 12px; color: #71329c; background: #f4eafa; }
.profile-embedded .profile-city .profile-icon { color: #d83289; }
.profile-embedded .provider-social-icons a { color: #852dc2; background: #faf4ff; border-color: #e2cafa; }
.profile-embedded .provider-social-icons a:hover { background: #f0e3fc; }
.profile-embedded .rating-summary { padding: 12px; border: 1px solid #f0dfb6; border-radius: 12px; color: #805c16; background: #fff7e5; }
.profile-embedded .rating-stars { color: #8c7549; }
.profile-embedded .rating-stars-fill { color: #b77908; }
.profile-embedded .profile-actions .profile-button { color: #71329c; background: #faf4ff; border-color: #e2cafa; }
.profile-embedded .profile-actions .profile-button:hover { background: #f0e3fc; }
.provider-dialog-close { color: #852dc2; border-color: #e2cafa; }