/*
 * Header location + search and the location popup, modelled on blinkit.com:
 * bold line over a small "Select Location v" line, light-grey search bar with a rotating
 * Search "..." placeholder, and a "Welcome" popup that drops under the location button
 * (detect my location / OR / search delivery location + suggestions).
 */
header .top-nav .navbar-top .middle-box.gk-bk { flex: 1 1 auto; min-width: 0; gap: 0; align-items: center; }

/* ---------- location button ---------- */
header .gk-bk-loc { flex: 0 0 auto; margin: 0 22px 0 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; width: auto !important; }
.gk-bk-locbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 250px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; line-height: 1.25; }
.gk-bk-loctitle { font-size: 15px; font-weight: 800; color: #1f1f1f; letter-spacing: -.1px; white-space: nowrap; }
.gk-bk-locsub, header .gk-bk-locbtn .gk-bk-locsub { display: flex !important; align-items: center; gap: 4px; max-width: 100%; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; font-weight: 500 !important; color: #1f1f1f !important; }
.gk-bk-caret, header .gk-bk-locbtn i.gk-bk-caret { font-size: 11px; color: #1f1f1f !important; }

/* ---------- search ---------- */
.gk-bk-form { flex: 1 1 auto; min-width: 0; max-width: 640px; margin: 0; }
.gk-bk-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 46px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #f3f3f3;
	transition: background .18s, border-color .18s;
}
.gk-bk-search:hover { background: #efefef; }
.gk-bk-search:focus-within { background: #fff; border-color: #cfcfcf; }
.gk-bk-sicon { flex: 0 0 auto; margin-right: 14px; font-size: 15px; color: #1f1f1f !important; }
.gk-bk-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 400; color: #1f1f1f; box-shadow: none; }
.gk-bk-input::-webkit-search-cancel-button { display: none; }
.gk-bk-ph { position: absolute; left: 45px; top: 50%; transform: translateY(-50%); display: flex; font-size: 14px; color: #7a7a7a; pointer-events: none; overflow: hidden; height: 22px; line-height: 22px; white-space: nowrap; }
.gk-bk-phword { display: inline-block; transition: transform .28s ease, opacity .28s ease; }
.gk-bk-phword.is-out { transform: translateY(-110%); opacity: 0; }
.gk-bk-search.has-value .gk-bk-ph, .gk-bk-search:focus-within .gk-bk-input:not(:placeholder-shown) ~ .gk-bk-ph { display: none; }
.gk-bk-clear { display: none; flex: 0 0 auto; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 0; border-radius: 50%; background: #e3e3e3; color: #444; font-size: 11px; cursor: pointer; }
.gk-bk-clear:hover { background: #d6d6d6; }
.gk-bk-search.has-value .gk-bk-clear { display: grid; place-items: center; }

@media (max-width: 767px) {
	header .top-nav .navbar-top .middle-box .search-box.gk-bk-search { display: flex; }
	header .gk-bk-loc { margin-right: 10px !important; }
	.gk-bk-locbtn { max-width: 150px; }
	.gk-bk-loctitle { font-size: 13px; }
}

/* ---------- location popup (drops under the header button) ---------- */
.gk-bkmodal.modal { background: rgba(0, 0, 0, .0); }
.gk-bkmodal .modal-dialog { position: absolute; margin: 0; width: 440px; max-width: calc(100vw - 16px); top: 76px; left: 24px; transform: none !important; }
.gk-bkmodal .modal-content { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, .24); overflow: hidden; }
.modal-backdrop.show { opacity: .55; }
.gk-bkpop { padding: 14px 18px 8px; }
.gk-bkpop-head { display: flex; align-items: center; justify-content: space-between; }
.gk-bkpop-head h5 { margin: 0; font-size: 16px; font-weight: 700; color: #1f1f1f; }
.gk-bkpop-head h5 span { color: #d32f2f; font-weight: 600; }
.gk-bkmodal-x { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #f3f3f3; color: #333; font-size: 12px; cursor: pointer; }
.gk-bkmodal-x:hover { background: #e6e6e6; }
.gk-bkpop-body { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gk-bkpop-pin { flex: 0 0 auto; box-sizing: content-box; padding: 7px; border-radius: 50%; background: #e8eefa; color: #2a2a7c; }
.gk-bkpop-body p { margin: 0; font-size: 12.5px; line-height: 1.4; color: #5a5a5a; }
.gk-bkpop-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.gk-bkmodal-detect { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: #2a2a7c; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s; }
.gk-bkmodal-detect::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--gk-gps) center/contain no-repeat; mask: var(--gk-gps) center/contain no-repeat; --gk-gps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E"); }
.gk-bkmodal-detect:hover { background: #1d1d5c; }
.gk-bkmodal-detect:disabled { opacity: .7; cursor: wait; }
.gk-bkmodal-or { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e0e0e0; border-radius: 50%; background: #fff; font-size: 9px; font-weight: 600; color: #8a8a8a; }
.gk-bkpop-input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 13px; color: #1f1f1f; outline: 0; box-shadow: none; transition: border-color .15s; }
.gk-bkpop-input::placeholder { color: #7a7a7a; }
.gk-bkpop-input:focus { border-color: #1b82c4; box-shadow: 0 0 0 3px rgba(27, 130, 196, .12); }
.gk-bkmodal-msg { margin: 0 0 10px; font-size: 12.5px; color: #c0261b; }
.gk-bkpop-list { list-style: none; margin: 0 -18px; padding: 0; }
.gk-bkpop-list:empty { display: none; }
.gk-bkpop-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid #f0f0f0; cursor: pointer; transition: background .12s; }
.gk-bkpop-list li:hover { background: #f4f7fd; }
.gk-bkpop-list li svg { flex: 0 0 auto; margin-top: 3px; color: #1f1f1f; }
.gk-bkpop-list li b { display: block; font-size: 13px; font-weight: 600; color: #1f1f1f; }
.gk-bkpop-list li small { display: block; margin-top: 2px; font-size: 11.5px; color: #666; }

@media (max-width: 575px) {
	.gk-bkmodal .modal-dialog { left: 8px !important; top: 60px !important; width: calc(100vw - 16px); }
	.gk-bkpop-row { flex-wrap: wrap; }
	.gk-bkpop-input { flex-basis: 100%; }
	.gk-bkmodal-or { display: none; }
}

/* space between the logo and the location button */
header .top-nav .navbar-top .web-logo.nav-logo { margin-right: 28px; }
@media (max-width: 991px) { header .top-nav .navbar-top .web-logo.nav-logo { margin-right: 14px; } }