/**
 * Browse Modal - shared city picker CSS.
 * Custom properties defined on the modal element itself to avoid
 * collisions with homepage :root when both are loaded.
 *
 * @since 2.9.12
 */

.tr-hp__browse-modal {
	--tr-green: #03c988;
	--tr-w65: rgba(255,255,255,.65);
	--tr-w92: rgba(255,255,255,.92);
	--tr-sp-2: 8px; --tr-sp-3: 12px; --tr-sp-4: 16px;
	--tr-sp-5: 20px; --tr-sp-6: 24px; --tr-sp-8: 32px;
	--tr-r-sm: 8px; --tr-r-md: 12px;
	--tr-ease: cubic-bezier(.4, 0, .2, 1);
	--tr-dur: .2s;
	font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tr-hp__browse-modal { display: none; position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; align-items: center !important; justify-content: center !important; padding: 120px var(--tr-sp-5) var(--tr-sp-5) !important; }
.tr-hp__browse-modal.is-open { display: flex !important; }
.tr-hp__browse-modal-bg { position: absolute !important; inset: 0 !important; background: rgba(5,10,20,.72) !important; -webkit-backdrop-filter: blur(8px) brightness(.45) !important; backdrop-filter: blur(8px) brightness(.45) !important; opacity: 0 !important; transition: opacity .25s var(--tr-ease) !important; }
.tr-hp__browse-modal.is-open .tr-hp__browse-modal-bg { opacity: 1 !important; }
.tr-hp__browse-modal-box { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: 640px !important; max-height: 80vh !important; background: rgba(13,27,42,.95) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: var(--tr-r-md) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; box-shadow: 0 var(--tr-sp-8) 100px rgba(0,0,0,.6) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transform: translateY(20px) !important; opacity: 0 !important; transition: transform .3s var(--tr-ease), opacity .3s var(--tr-ease) !important; }
.tr-hp__browse-modal.is-open .tr-hp__browse-modal-box { transform: translateY(0) !important; opacity: 1 !important; }
.tr-hp__browse-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.06) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,.6) !important; font-size: 16px !important; cursor: pointer !important; z-index: 2 !important; }
.tr-hp__browse-modal-header { position: sticky !important; top: 0 !important; z-index: 3 !important; padding: var(--tr-sp-6) var(--tr-sp-6) var(--tr-sp-4) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; background: rgba(13,27,42,.98) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; flex-shrink: 0 !important; }
.tr-hp__browse-modal-title { font-size: 18px !important; font-weight: 700 !important; color: var(--tr-w92) !important; margin-bottom: 14px !important; }
.tr-hp__browse-search { display: flex !important; align-items: center !important; gap: var(--tr-sp-2) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--tr-r-sm) !important; padding: 10px var(--tr-sp-3) !important; min-height: 44px !important; box-sizing: border-box !important; }
.tr-hp__browse-search input { all: unset !important; flex: 1 !important; font-family: inherit !important; font-size: 16px !important; color: #fff !important; }
.tr-hp__browse-search input::placeholder { color: rgba(255,255,255,.3) !important; }
.tr-hp__browse-search svg { width: 16px !important; height: 16px !important; color: rgba(255,255,255,.3) !important; flex-shrink: 0 !important; }
.tr-hp__browse-tabs { display: flex !important; gap: 0 !important; margin-top: var(--tr-sp-3) !important; }
.tr-hp__browse-tab { all: unset !important; flex: 1 !important; text-align: center !important; padding: 10px 0 !important; min-height: 44px !important; box-sizing: border-box !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,.4) !important; cursor: pointer !important; border-bottom: 2px solid transparent !important; transition: color var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease) !important; -webkit-tap-highlight-color: transparent !important; }
.tr-hp__browse-tab.is-active { color: var(--tr-green) !important; border-bottom-color: var(--tr-green) !important; }
.tr-hp__browse-body { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: var(--tr-sp-4) var(--tr-sp-6) var(--tr-sp-6) !important; scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.1) transparent !important; overscroll-behavior: contain !important; }

.tr-hp__browse-back { all: unset !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: var(--tr-sp-2) 14px var(--tr-sp-2) 10px !important; margin-bottom: var(--tr-sp-4) !important; min-height: 36px !important; box-sizing: border-box !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--tr-r-sm) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--tr-w65) !important; cursor: pointer !important; transition: background var(--tr-dur) var(--tr-ease), color var(--tr-dur) var(--tr-ease) !important; -webkit-tap-highlight-color: transparent !important; }
.tr-hp__browse-back:hover { background: rgba(255,255,255,.1) !important; color: var(--tr-w92) !important; }
.tr-hp__browse-back svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

.tr-hp__browse-region-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--tr-sp-2) !important; }
.tr-hp__browse-region-card { all: unset !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px var(--tr-sp-4) !important; min-height: 48px !important; box-sizing: border-box !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: var(--tr-r-sm) !important; cursor: pointer !important; transition: background var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease) !important; -webkit-tap-highlight-color: transparent !important; }
.tr-hp__browse-region-card:hover { background: rgba(3,201,136,.06) !important; border-color: rgba(3,201,136,.18) !important; }
.tr-hp__browse-region-card:active { background: rgba(3,201,136,.1) !important; }
.tr-hp__browse-region-name { font-size: 13px !important; font-weight: 600 !important; color: var(--tr-w92) !important; }
.tr-hp__browse-region-count { font-size: 11px !important; font-weight: 500 !important; color: rgba(255,255,255,.3) !important; flex-shrink: 0 !important; }
.tr-hp__browse-region-arrow { font-size: 12px !important; color: rgba(255,255,255,.2) !important; flex-shrink: 0 !important; margin-left: 6px !important; }

.tr-hp__browse-region-label { font-size: 11px !important; font-weight: 700 !important; color: rgba(3,201,136,.5) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin: var(--tr-sp-4) 0 var(--tr-sp-2) !important; }
.tr-hp__browse-region-label:first-child { margin-top: 0 !important; }
.tr-hp__browse-region-grid { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.tr-hp__browse-loc { all: unset !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 14px !important; min-height: 40px !important; box-sizing: border-box !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: var(--tr-r-sm) !important; font-size: 13px !important; color: var(--tr-w92) !important; font-weight: 500 !important; cursor: pointer !important; transition: background var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; }
.tr-hp__browse-loc:hover { background: rgba(3,201,136,.08) !important; border-color: rgba(3,201,136,.2) !important; }
.tr-hp__browse-loc-pc { font-size: 11px !important; color: rgba(255,255,255,.3) !important; font-family: ui-monospace, monospace !important; }
.tr-hp__browse-empty { font-size: 13px !important; color: rgba(255,255,255,.35) !important; padding: var(--tr-sp-5) 0 !important; }

@media (max-width: 599px) {
	.tr-hp__browse-modal { padding: 100px 0 0 !important; align-items: flex-end !important; }
	.tr-hp__browse-modal-box { max-height: calc(100vh - 180px) !important; max-height: calc(100dvh - 100px) !important; max-width: 100% !important; border-radius: var(--tr-r-md) var(--tr-r-md) 0 0 !important; transform: translateY(40px) !important; }
	.tr-hp__browse-modal.is-open .tr-hp__browse-modal-box { transform: translateY(0) !important; }
	.tr-hp__browse-modal-header { padding: var(--tr-sp-5) var(--tr-sp-4) var(--tr-sp-3) !important; }
	.tr-hp__browse-modal-title { font-size: 16px !important; margin-bottom: var(--tr-sp-3) !important; }
	.tr-hp__browse-body { padding: var(--tr-sp-3) var(--tr-sp-4) var(--tr-sp-8) !important; }
	.tr-hp__browse-region-cards { grid-template-columns: 1fr !important; gap: 6px !important; }
	.tr-hp__browse-region-card { padding: var(--tr-sp-4) !important; min-height: 52px !important; }
	.tr-hp__browse-region-name { font-size: 14px !important; }
	.tr-hp__browse-loc { padding: 11px 14px !important; min-height: 44px !important; font-size: 14px !important; }
}