.ktk-bmh-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ktk-bmh-modal-overlay.active {
opacity: 1;
visibility: visible;
} body.ktk-bmh-modal-open {
overflow: hidden !important;
} .ktk-bmh-address-input:focus {
outline: none !important;
border-color: rgb(255, 233, 0) !important;
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
position: relative !important;
z-index: 2 !important;
} .ktk-bmh-modal-overlay {
position: fixed !important;
z-index: 9999 !important;
}
.ktk-bmh-modal {
position: relative !important;
z-index: 9999 !important;
} .ktk-bmh-modal * {
box-sizing: border-box;
} .ktk-bmh-modal .pac-container {
font-family: inherit !important;
font-size: 14px !important;
} .ktk-bmh-modal {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
max-width: 448px;
width: 90%;
height: 80vh; max-height: 80vh;
overflow: hidden; position: relative;
transform: scale(0.9) translateY(20px);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
}
.ktk-bmh-modal-overlay.active .ktk-bmh-modal {
transform: scale(1) translateY(0);
} .ktk-bmh-modal-header {
padding: 8px 12px 0;
position: relative;
flex-shrink: 0; } .ktk-bmh-header-top {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
.ktk-bmh-modal-close {
background: none;
border: none;
font-size: 24px;
color: rgb(39, 40, 45);
cursor: pointer;
padding: 8px !important;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-left: auto; }
.ktk-bmh-modal-close:hover,
.ktk-bmh-modal-close:focus,
.ktk-bmh-modal-close:active {
background: rgb(255, 233, 0) !important;
color: rgb(39, 40, 45);
} .ktk-bmh-btn-back-header {
background: rgb(255, 233, 0) !important;
border: none;
font-size: 20px;
color: rgb(39, 40, 45);
cursor: pointer;
padding: 8px !important;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0; }
.ktk-bmh-btn-back-header:hover,
.ktk-bmh-btn-back-header:focus,
.ktk-bmh-btn-back-header:active {
background: rgb(255, 233, 0) !important;
color: rgb(39, 40, 45);
}
.ktk-bmh-modal-title {
font-size: 18px !important;
font-weight: 600 !important;
color: #1a1a1a;
margin: 0; line-height: 1.3;
flex: 1; }
.ktk-bmh-modal-subtitle {
font-size: 16px !important;
font-weight: 600 !important;
color: rgb(39, 40, 45);
margin: 0 0 12px;
line-height: 1.5;
} .ktk-bmh-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
position: relative;
width: 100%;
border-radius: 5px;
}
.ktk-bmh-progress[data-step="1"]::after { width: 0%; }
.ktk-bmh-progress[data-step="2"]::after { width: 50%; }
.ktk-bmh-progress[data-step="3"]::after { width: 100%; }
.ktk-bmh-progress-step {
width: 33%;
height: 10px;
border-radius: 0;
background: #e5e5e5;
display: flex;
position: relative;
z-index: 3;
transition: all 0.3s ease;
}
.ktk-bmh-progress-step.active {
background: rgb(255, 233, 0);
}
.ktk-bmh-progress-step.completed {
background: rgb(255, 233, 0);
} .ktk-bmh-modal-body {
padding: 0 24px 12px;
flex: 1; overflow: hidden; display: flex;
flex-direction: column;
} .ktk-bmh-step {
display: none;
flex: 1; overflow: hidden; overflow-y: auto; flex-direction: column;
}
.ktk-bmh-step.active {
display: flex; animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .ktk-bmh-search-input {
width: 100%;
padding: 12px 16px;
border: 1px solid rgb(226, 226, 226);
border-radius: 8px;
font-size: 16px;
margin-bottom: 10px;
transition: border-color 0.2s ease;
background: #ffffff;
}
.ktk-bmh-search-input:focus {
outline: none;
border-color: #000;
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}
.ktk-bmh-search-input::placeholder {
color: #999;
font-style: italic;
} .ktk-bmh-step-content-fixed {
flex-shrink: 0; }
.ktk-bmh-step-content-scrollable {
flex: 1; max-height: 430px;
overflow: hidden;
display: flex;
flex-direction: column;
} .ktk-bmh-load-more-container {
display: none;
text-align: center;
margin-top: 20px;
padding: 20px 0;
}
.ktk-bmh-load-more-btn {
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
color: #333;
border: 2px solid #ddd;
border-radius: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ktk-bmh-load-more-btn:hover {
background: linear-gradient(135deg, #e8e8e8 0%, #ddd 100%);
border-color: #bbb;
transform: translateY(-1px);
}
.ktk-bmh-load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} .ktk-bmh-scroll-loading {
text-align: center;
padding: 15px;
color: rgb(39, 40, 45);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0;
animation: fadeInOut 1.5s ease-in-out infinite;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
} .ktk-bmh-options-container {
flex: 1;
overflow-y: auto;
padding-right: 4px;
min-height: 0;
} .ktk-bmh-options-container::-webkit-scrollbar {
width: 6px;
}
.ktk-bmh-options-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.ktk-bmh-options-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.ktk-bmh-options-container::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
} .ktk-bmh-options-grid.loading::after {
content: '';
display: block;
width: 100%;
height: 40px;
background: linear-gradient(90deg, transparent, rgba(0, 124, 186, 0.1), transparent);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
margin-top: 16px;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.ktk-bmh-option-card {
padding: 6px 12px;
border-bottom: 1px solid rgb(226, 226, 226);
}
.ktk-bmh-option-card:last-child {
border-bottom: none;
}
.ktk-bmh-option-card:focus,
.ktk-bmh-option-card:hover {
cursor: pointer;
background: rgb(254, 249, 195);
}
.ktk-bmh-option-card.selected {
background: rgb(255, 233, 0);
position: relative;
}
.ktk-bmh-option-card.selected::after {
content: '✓';
position: absolute;
right: 20px;
top: 8px;
pointer-events: none;
} .ktk-bmh-option-card.search-result {
border: 2px solid rgb(255, 233, 0);
background: rgba(0, 124, 186, 0.02);
}
.ktk-bmh-option-title {
font-size: 16px !important;
font-weight: 400 !important;
font-style: normal !important;
color: rgb(39, 40, 45);
margin-bottom: 4px;    
} .ktk-bmh-empty-search {
text-align: center;
padding: 40px 20px;
color: rgb(39, 40, 45);
}
.ktk-bmh-empty-search h4 {
margin: 0 0 8px;
color: #333;
}
.ktk-bmh-empty-search p {
margin: 0;
font-size: 14px;
} .ktk-bmh-location-section {
margin-bottom: 24px;
}
.ktk-bmh-location-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.ktk-bmh-address-option {
flex: 1;
}
.ktk-bmh-address-input.disabled {
background: #f8f9fa;
color: #6c757d;
cursor: not-allowed;
border-color: #e9ecef;
}
.ktk-bmh-location-separator {
text-align: center;
position: relative;
margin: 0;
}
.ktk-bmh-location-separator::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e9ecef;
z-index: 1;
}
.ktk-bmh-location-separator span {
background: white;
padding: 0 16px;
color: #6c757d;
font-size: 14px;
position: relative;
z-index: 2;
}
.ktk-bmh-geolocation-option {
flex: 1;
}
.ktk-bmh-skip-btn {
margin-top: 24px;
}
.ktk-bmh-skip-btn,
.ktk-bmh-geolocation-btn {
width: 100%;
padding: 8px !important;
background: #fff !important;
color: rgb(51, 51, 51) !important;
border: 1px solid rgb(51, 51, 51);
border-radius: 12px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ktk-bmh-skip-btn:hover,
.ktk-bmh-geolocation-btn:hover {
color: rgb(51, 51, 51) !important;
background: rgb(255, 233, 0) !important;
}
.ktk-bmh-skip-btn.selected {
background: rgb(171, 249, 93) !important;
color: rgb(51, 51, 51) !important;
}
.ktk-bmh-geolocation-btn:disabled {
background: #ccc !important;
cursor: not-allowed;
}
.ktk-bmh-geolocation-btn.success,
.ktk-bmh-geolocation-btn.success:hover {
color: rgb(51, 51, 51) !important;
background: rgb(171, 249, 93) !important;
} .ktk-bmh-time-section {
margin-bottom: 24px;
}
.ktk-bmh-time-toggle {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.ktk-bmh-time-option {
flex: 1;
padding: 16px;
border: 2px solid #e5e5e5;
border-radius: 12px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: white;
}
.ktk-bmh-time-option:hover {
border-color: rgb(255, 233, 0);
}
.ktk-bmh-time-option.selected {
border-color: rgb(255, 233, 0);
background-color: rgb(255, 233, 0);
} .ktk-bmh-time-inputs-always-visible {
display: flex;
gap: 16px;
margin-bottom: 8px;
}
.ktk-bmh-time-inputs-always-visible .ktk-bmh-date-input,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-time-select {
padding: 12px;
border: 2px solid #e5e5e5;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s ease;
width: 50%;
} .ktk-bmh-time-inputs-always-visible .ktk-bmh-date-input:disabled,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-time-select:disabled,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-date-input.disabled,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-time-select.disabled {
background: #f8f9fa;
color: #6c757d;
cursor: not-allowed;
border-color: #e9ecef;
opacity: 0.6;
}
.ktk-bmh-time-inputs-always-visible .ktk-bmh-date-input:disabled:focus,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-time-select:disabled:focus,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-date-input.disabled:focus,
.ktk-bmh-time-inputs-always-visible .ktk-bmh-time-select.disabled:focus {
border-color: #e9ecef;
outline: none;
} .ktk-bmh-emergency-separator {
display: flex;
align-items: center;
margin: 0 0 8px;
gap: 16px;
}
.ktk-bmh-emergency-separator-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #e5e5e5 20%, #e5e5e5 80%, transparent 100%);
}
.ktk-bmh-emergency-separator-text {
text-align: center;
font-size: 14px;
color: rgb(39, 40, 45);
opacity: 0.7;
white-space: nowrap;
padding: 0 8px;
}
.ktk-bmh-emergency-line-1 {
font-weight: 500;
margin-bottom: 2px;
}
.ktk-bmh-emergency-line-2 {
font-size: 13px;
opacity: 0.8;
} .ktk-bmh-emergency-option {
width: 100%;
}
.ktk-bmh-emergency-option .ktk-bmh-time-option {
width: 100%;
padding: 8px;
background: #fff;
color: rgb(51, 51, 51);
border: 1px solid rgb(51, 51, 51);
border-radius: 30px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
}
.ktk-bmh-emergency-option .ktk-bmh-time-option:hover {
background-color: rgb(255, 233, 0);
}
.ktk-bmh-emergency-option .ktk-bmh-time-option.selected {
color: #fff;
background-color: rgb(255, 66, 66);
} .ktk-bmh-modal-footer {
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.ktk-bmh-btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.ktk-bmh-btn-primary {
background: rgb(255, 233, 0);
color: white;
}
.ktk-bmh-btn-primary:hover {
background: #005a87;
}
.ktk-bmh-btn-primary:disabled {
background: #ccc;
cursor: not-allowed;
}
.ktk-bmh-btn-outline {
background: transparent;
color: rgb(255, 233, 0);
border: 2px solid rgb(255, 233, 0);
}
.ktk-bmh-btn-outline:hover {
background: rgb(255, 233, 0);
color: white;
} .ktk-bmh-btn-small {
padding: 8px 16px;
font-size: 14px;
}
.ktk-bmh-btn-medium {
padding: 12px 24px;
font-size: 16px;
}
.ktk-bmh-btn-large {
padding: 16px 32px;
font-size: 18px;
} .ktk-bmh-block-wrapper {
margin: 16px 0;
} .ktk-bmh-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: rgb(39, 40, 45);
}
.ktk-bmh-spinner {
width: 20px;
height: 20px;
border: 2px solid #e5e5e5;
border-top: 2px solid rgb(255, 233, 0);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 12px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .ktk-bmh-error {
background: #fff5f5;
border: 1px solid #fed7d7;
border-radius: 8px;
padding: 16px;
color: #c53030;
margin-bottom: 16px;
} .ktk-bmh-empty {
text-align: center;
padding: 40px;
color: rgb(39, 40, 45);
}
.ktk-bmh-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
} @media (max-width: 768px) {
.ktk-bmh-modal {
width: 90%;
border-radius: 12px;
}
.ktk-bmh-step {
overflow-y: auto;
}
.ktk-bmh-modal-header,
.ktk-bmh-modal-body,
.ktk-bmh-modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.ktk-bmh-modal-title {
font-size: 18px !important;
}
.ktk-bmh-options-grid {
grid-template-columns: 1fr;
}
.ktk-bmh-time-inputs {
grid-template-columns: 1fr;
}
.ktk-bmh-modal-footer {
flex-direction: column-reverse;
}
.ktk-bmh-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.ktk-bmh-modal {
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
}
.ktk-bmh-step {
overflow-y: auto;
}
.ktk-bmh-time-toggle {
flex-direction: column;
}
.ktk-bmh-location-options {
gap: 12px;
}
.ktk-bmh-location-separator span {
font-size: 13px;
}
} .ktk-bmh-trigger-btn {
background: rgb(255, 233, 0);
color: rgb(39, 40, 45);
border: none;
padding: 10px 13px;
border-radius: 15px;
font-size: 23px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
text-transform: uppercase;
}  .ktk-bmh-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .ktk-bmh-modal-close:focus,
.ktk-bmh-option-card:focus,
.ktk-bmh-btn:focus,
.ktk-bmh-trigger-btn:focus {
background-color: rgb(255, 233, 0);
} .ktk-bmh-step-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
} .ktk-bmh-btn-back-small {
padding: 8px 16px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ktk-bmh-btn-back-small:hover {
background: #e9ecef;
color: #343a40;
border-color: #adb5bd;
transform: translateX(-2px);
}
.ktk-bmh-btn-back-small:active {
transform: translateX(-1px);
} .ktk-bmh-breadcrumb {
font-size: 14px;
color: #6c757d;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex: 1;
margin-left: 16px;
}
.ktk-bmh-breadcrumb-category {
color: #495057;
font-weight: 600;
}
.ktk-bmh-breadcrumb-separator {
color: #adb5bd;
font-weight: 400;
}
.ktk-bmh-breadcrumb-service {
color: #495057;
font-weight: 500;
} .ktk-bmh-btn-full-width {
width: 100% !important;
margin: 0 !important;
justify-content: center;
font-size: 16px;
font-weight: 600;
padding: 16px 24px;
} .ktk-bmh-modal-footer {
display: flex;
flex-direction: column;
gap: 0;
padding: 8px 12px;
border-radius: 0 0 12px 12px;
}.ktk-bmh-slider-wrapper {
position: relative;
margin: 20px 0;
}
.ktk-bmh-slider-wrapper .swiper {
width: 100%;
overflow: hidden;
padding: 0 10px;
}
.ktk-bmh-slider-wrapper .swiper-wrapper {
display: flex;
align-items: stretch;
} .ktk-bmh-slider-wrapper .swiper-slide {
flex-shrink: 0;
height: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.ktk-bmh-slider-slide {
overflow: hidden;
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, border-bottom 0.3s ease;
border-bottom: 3px solid transparent;
}
.ktk-bmh-slider-slide:hover {
border-bottom: 3px solid #2575fc;
} .ktk-bmh-slider-image {
width: 100%;
height: auto;
object-fit: contain;
overflow: hidden;
flex-shrink: 0;
}
.ktk-bmh-slider-image img {
width: 100%;
height: 100%;
object-fit: contain;
} .ktk-bmh-slider-content {
padding: 0 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ktk-bmh-slider-title {
font-size: 17px !important;
font-weight: 700 !important;
margin-bottom: 0;
color: #000;
line-height: 1.5;
font-style: normal !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.ktk-bmh-slider-subtitle {
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
color: #939393;
line-height: 1.5;
flex-grow: 1;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
} .ktk-bmh-slider-wrapper .swiper-button-next,
.ktk-bmh-slider-wrapper .swiper-button-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
color: #333;
font-size: 0;
margin-top: 0;
}
.ktk-bmh-slider-wrapper .swiper-button-next:after,
.ktk-bmh-slider-wrapper .swiper-button-prev:after {
display: none;
}
.ktk-bmh-slider-wrapper .swiper-button-next .icon,
.ktk-bmh-slider-wrapper .swiper-button-prev .icon {
font-size: 40px;
line-height: 1;
color: #333;
transition: color 0.3s ease;
}
.ktk-bmh-slider-wrapper .swiper-button-next:hover .icon,
.ktk-bmh-slider-wrapper .swiper-button-prev:hover .icon {
color: #007cba;
}
.ktk-bmh-slider-wrapper .swiper-button-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.ktk-bmh-slider-wrapper .swiper-button-prev {
left: -18px;
}
.ktk-bmh-slider-wrapper .swiper-button-next {
right: -18px;
} @media (max-width: 768px) {
.ktk-bmh-slider-wrapper .swiper-button-prev,
.ktk-bmh-slider-wrapper .swiper-button-next {
display: none;
}
.ktk-bmh-slider-content {
padding: 0 15px;
}
.ktk-bmh-slider-title {
font-size: 16px !important;
}
.ktk-bmh-slider-subtitle {
font-size: 14px !important;
}
}