.suggest-box { position: absolute; top: 105%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 18px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; display: none; z-index: 20; } .suggest-item { padding: 10px; cursor: pointer; transition: background 0.2s; font-size: 13px; } .suggest-item::before { margin-top: 0px; display: inline-block; content: ""; width: 18px; height: 13px; background-image: url(../../assets/img/index/booking/gray-location-icon.png?tr=f-auto,q-75,w-1920); background-size: contain; background-repeat: no-repeat; } .suggest-item:hover { background: #f5f5f5; } .sub-address-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 300px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3); display: none; z-index: 100; } .sub-popup-header { padding: 10px; font-weight: 600; color: #2e2e2e; border-radius: 10px 10px 0 0; text-align: center; font-size: 13px; } .sub-list { overflow: auto; max-height: 200px; padding: 10px; } .sub-search-box { padding: 10px; border-bottom: 1px solid #ddd; } .sub-search-box input { background: #f5f5f5; width: 100%; padding: 8px 10px; border: 1px solid #f5f5f5; border-radius: 12px; font-size: 13px; outline: none; } .sub-item { font-size: 13px; padding: 6px; cursor: pointer; border-radius: 5px; } .sub-item:hover { background: #f5f5f5; } .selected-address-display { margin-top: -12px; font-size: 12px; color: #333; position: absolute; } .selected-address-display span { font-size: 12px; color: #949494; cursor: pointer; } @media (max-width: 720px) { .selected-address-display { margin-top: 38px; } .styled-input { font-size: 13px; } }